refactor create/meta controller to component (#814)

jelhan · Dec 17, 2023 · e3935e5 · e3935e5
1 parent 26ab849
commit e3935e5
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 87 deletions.
diff --git a/app/components/create-index.ts b/app/components/create-index.ts
@@ -5,22 +5,22 @@ import { registerDestructor } from '@ember/destroyable';
 import type RouterService from '@ember/routing/router-service';
 import type { CreateIndexRouteModel } from '../routes/create/index';
 
-export interface CreateOptionsIndexSignature {
+export interface CreateIndexSignature {
   Args: {
     formData: CreateIndexRouteModel['formData'];
     poll: CreateIndexRouteModel['poll'];
   };
 }
 
-export default class CreateIndexComponent extends Component<CreateOptionsIndexSignature> {
+export default class CreateIndexComponent extends Component<CreateIndexSignature> {
   @service declare router: RouterService;
 
   @action
   submit() {
     this.router.transitionTo('create.meta');
   }
 
-  constructor(owner: unknown, args: CreateOptionsIndexSignature['Args']) {
+  constructor(owner: unknown, args: CreateIndexSignature['Args']) {
     super(owner, args);
 
     registerDestructor(this, () => {

diff --git a/app/components/create-meta.hbs b/app/components/create-meta.hbs
@@ -0,0 +1,45 @@
+<div class="cr-form-wrapper box">
+  <BsForm
+    @formLayout="horizontal"
+    @model={{@formData}}
+    @onInvalid={{(scroll-first-invalid-element-into-view-port)}}
+    @onSubmit={{this.submit}}
+    novalidate
+    as |form|
+  >
+    <form.element
+      @controlType="text"
+      @label={{t "create.meta.input.title.label"}}
+      @property="title"
+      class="title"
+      data-test-form-element="title"
+      as |el|
+    >
+      <el.control
+        placeholder={{t "create.meta.input.title.placeholder"}}
+        {{autofocus}}
+      />
+    </form.element>
+    <form.element
+      @controlType="textarea"
+      @label={{t "create.meta.input.description.label"}}
+      @property="description"
+      class="description"
+      data-test-form-element="description"
+      as |el|
+    >
+      <el.control
+        placeholder={{t "create.meta.input.description.placeholder"}}
+      />
+    </form.element>
+
+    <div class="row cr-steps-bottom-nav">
+      <div class="col-6 col-md-8 order-12">
+        <NextButton />
+      </div>
+      <div class="col-6 col-md-4 order-1 text-right">
+        <BackButton @onClick={{this.previousPage}} />
+      </div>
+    </div>
+  </BsForm>
+</div>
diff --git a/app/components/create-meta.ts b/app/components/create-meta.ts
@@ -0,0 +1,44 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { registerDestructor } from '@ember/destroyable';
+import type RouterService from '@ember/routing/router-service';
+import type { CreateMetaRouteModel } from '../routes/create/meta';
+
+export interface CreateMetaSignature {
+  Args: {
+    formData: CreateMetaRouteModel['formData'];
+    poll: CreateMetaRouteModel['poll'];
+  };
+}
+
+export default class CreateMetaComponent extends Component<CreateMetaSignature> {
+  @service declare router: RouterService;
+
+  @action
+  previousPage() {
+    this.router.transitionTo('create.index');
+  }
+
+  @action
+  submit() {
+    this.router.transitionTo('create.options');
+  }
+
+  constructor(owner: unknown, args: CreateMetaSignature['Args']) {
+    super(owner, args);
+
+    registerDestructor(this, () => {
+      const { poll, formData } = this.args;
+
+      poll.title = formData.title;
+      poll.description = formData.description;
+    });
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    CreateMeta: typeof CreateMetaComponent;
+  }
+}
diff --git a/app/controllers/create/meta.ts b/app/controllers/create/meta.ts
diff --git a/app/templates/create/meta.hbs b/app/templates/create/meta.hbs
@@ -1,45 +1 @@
-<div class="cr-form-wrapper box">
-  <BsForm
-    @formLayout="horizontal"
-    @model={{@model.formData}}
-    @onInvalid={{(scroll-first-invalid-element-into-view-port)}}
-    @onSubmit={{this.submit}}
-    novalidate
-    as |form|
-  >
-    <form.element
-      @controlType="text"
-      @label={{t "create.meta.input.title.label"}}
-      @property="title"
-      class="title"
-      data-test-form-element="title"
-      as |el|
-    >
-      <el.control
-        placeholder={{t "create.meta.input.title.placeholder"}}
-        {{autofocus}}
-      />
-    </form.element>
-    <form.element
-      @controlType="textarea"
-      @label={{t "create.meta.input.description.label"}}
-      @property="description"
-      class="description"
-      data-test-form-element="description"
-      as |el|
-    >
-      <el.control
-        placeholder={{t "create.meta.input.description.placeholder"}}
-      />
-    </form.element>
-
-    <div class="row cr-steps-bottom-nav">
-      <div class="col-6 col-md-8 order-12">
-        <NextButton />
-      </div>
-      <div class="col-6 col-md-4 order-1 text-right">
-        <BackButton @onClick={{this.previousPage}} />
-      </div>
-    </div>
-  </BsForm>
-</div>
+<CreateMeta @formData={{@model.formData}} @poll={{@model.poll}} />