remove repetitive hbs file code using loop

Real-Dev-Squad · Jul 24, 2023 · 9b694b2 · 9b694b2
1 parent e1b082f
commit 9b694b2
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 40 deletions.
diff --git a/app/components/new-signup/checkbox.hbs b/app/components/new-signup/checkbox.hbs
@@ -2,47 +2,20 @@
   <h2 class='user-details__heading' data-test-signup-form-label>
     {{this.label}}
   </h2>
+
   <div class='role-details__field'>
-    <label class='checkbox-label'>
-      <input
-        type='checkbox'
-        name='developer'
-        checked={{false}}
-        {{on 'change' this.checkboxFieldChanged}}
-        class='checkbox-input'
-      />
-      Developer
-    </label>
-    <label class='checkbox-label'>
-      <input
-        type='checkbox'
-        name='designer'
-        checked={{false}}
-        {{on 'change' this.checkboxFieldChanged}}
-        class='checkbox-input'
-      />
-      Designer
-    </label>
-    <label class='checkbox-label'>
-      <input
-        type='checkbox'
-        name='mavens'
-        checked={{false}}
-        {{on 'change' this.checkboxFieldChanged}}
-        class='checkbox-input'
-      />
-      Mavens
-    </label>
-    <label class='checkbox-label'>
-      <input
-        type='checkbox'
-        name='productmanager'
-        checked={{false}}
-        {{on 'change' this.checkboxFieldChanged}}
-        class='checkbox-input'
-      />
-      Product Manager
-    </label>
+    {{#each this.checkboxData as |data|}}
+      <label class='checkbox-label'>
+        <input
+          type='checkbox'
+          name={{data.name}}
+          checked={{false}}
+          {{on 'change' this.checkboxFieldChanged}}
+          class='checkbox-input'
+        />
+        {{data.label}}
+      </label>
+    {{/each}}
   </div>
 
   <div class='signup-action__btn'>

diff --git a/app/components/new-signup/checkbox.js b/app/components/new-signup/checkbox.js
@@ -3,6 +3,25 @@ import { action } from '@ember/object';
 import { LABEL_TEXT } from '../../constants/new-signup';
 
 export default class SignupComponent extends Component {
+  checkboxData = [
+    {
+      label: 'Developer',
+      name: 'developer',
+    },
+    {
+      label: 'Designer',
+      name: 'designer',
+    },
+    {
+      label: 'Mavens',
+      name: 'mavens',
+    },
+    {
+      label: 'Product Manager',
+      name: 'productmanager',
+    },
+  ];
+
   get label() {
     const { currentStep } = this.args;