feat(soffit-pwa): radio-group value

Alwatr · Jan 22, 2023 · fdbc609 · fdbc609
1 parent be84c63
commit fdbc609
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 6 deletions.
diff --git a/uniquely/soffit-pwa/src/lottery-form.ts b/uniquely/soffit-pwa/src/lottery-form.ts
@@ -7,7 +7,7 @@ import type {AlwatrTextField} from '@alwatr/ui-kit/text-field/text-field.js';
 
 import '@alwatr/ui-kit/text-field/text-field.js';
 import '@alwatr/ui-kit/button/button.js';
-import './radio-group.js';
+import './tech-dep/radio-group.js';
 
 declare global {
   interface HTMLElementTagNameMap {

diff --git a/uniquely/soffit-pwa/src/tech-dep/radio-group.ts b/uniquely/soffit-pwa/src/tech-dep/radio-group.ts
@@ -6,7 +6,32 @@ declare global {
   }
 }
 
-const _activityType = ['پخش کننده تایل', 'نصاب تایل', 'فروشنده و مغازه‌دار', 'پیمانکار', 'سازنده', 'سایر'];
+const _optionList = [
+  {
+    label: 'پخش کننده تایل',
+    value: '',
+  },
+  {
+    label: 'نصاب تایل',
+    value: '',
+  },
+  {
+    label: 'فروشنده و مغازه‌دار',
+    value: '',
+  },
+  {
+    label: 'پیمانکار',
+    value: '',
+  },
+  {
+    label: 'سازنده',
+    value: '',
+  },
+  {
+    label: 'سایر',
+    value: '',
+  },
+];
 
 /**
  * Alwatr fieldset element
@@ -59,6 +84,13 @@ export class AlwatrFieldSet extends AlwatrDummyElement {
     }
   `;
 
+  get value(): string {
+    for (const inputElement of this.renderRoot.querySelectorAll('input')) {
+      if (inputElement.checked) return inputElement.value;
+    }
+    return '';
+  }
+
   override render(): unknown {
     super.render();
     return html`
@@ -70,11 +102,11 @@ export class AlwatrFieldSet extends AlwatrDummyElement {
   }
 
   protected _inputTemplate(): unknown {
-    return map(_activityType, (activity, index) => {
-      const id: string = 'activityType' + index;
+    return map(_optionList, (item, index) => {
+      const id: string = 'radioInput' + index;
       return html`<div>
-        <input type="radio" id=${id} name="activity" value="${activity}" />
-        <label for=${id}>${activity}</label>
+        <input type="radio" id=${id} value="${item.value}" />
+        <label for=${id}>${item.label}</label>
       </div>`;
     });
   }