From e42da9e42832094c3ef4bb783e728ba6ad685dc7 Mon Sep 17 00:00:00 2001
From: Dzmitry <ignatovich.dm@gmail.com>
Date: Sat, 28 Sep 2024 15:30:39 +0200
Subject: [PATCH] added dynamic text field

---
 app/components/radio-button.hbs | 35 ++++++++++++++++++++++-----------
 app/components/radio-button.js  | 25 ++++++++++++++++++-----
 app/controllers/survey.js       |  7 ++++---
 app/helpers/lookup-component.js |  2 ++
 app/templates/survey.hbs        |  2 ++
 5 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/app/components/radio-button.hbs b/app/components/radio-button.hbs
index dc6fc28..4e5f043 100644
--- a/app/components/radio-button.hbs
+++ b/app/components/radio-button.hbs
@@ -1,16 +1,27 @@
-<div class="form-group">
-  <label>{{this.args.element.label}}</label>
-  {{#each this.args.element.options as |option|}}
-    <div class="radio-option">
+<div class="field">
+  {{#each @element.options as |option|}}
+    <div class="control">
+      <label class="radio">
+        <input
+          type="radio"
+          name={{@element.id}}
+          value={{option.value}}
+          checked={{eq @element.value option.value}}
+          {{on "change" this.updateSelection}}
+        >
+        {{option.label}}
+      </label>
+    </div>
+  {{/each}}
+
+  {{#if this.showOtherInput}}
+    <div class="control mt-2">
       <input
-        type="radio"
-        id={{option.value}}
-        name={{this.args.element.id}}
-        value={{option.value}}
-        {{on "change" this.updateSelection}} 
-        checked={{eq this.args.element.value option.value}}
+        type="text"
+        class="input"
+        placeholder="Please specify"
+        {{on "input" this.updateOtherValue}}
       >
-      <label for={{option.value}}>{{option.label}}</label>
     </div>
-  {{/each}}
+  {{/if}}
 </div>
diff --git a/app/components/radio-button.js b/app/components/radio-button.js
index 67947de..d9ed0f2 100644
--- a/app/components/radio-button.js
+++ b/app/components/radio-button.js
@@ -1,15 +1,30 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 export default class RadioButtonComponent extends Component {
+    @tracked showOtherInput = false;
+
   @action
   updateSelection(event) {
-    // Проверим, что event и event.target существуют
-    if (event && event.target) {
-      const selectedValue = event.target.value; // Получаем значение из event
-      this.args.updateValue(selectedValue); // Передаём выбранное значение
+    const selectedValue = event.target.value;
+
+    if (selectedValue === 'other') {
+      this.showOtherInput = true; // Показываем текстовое поле
     } else {
-      console.error('Event or event.target is undefined');
+      this.showOtherInput = false; // Скрываем текстовое поле
+    }
+
+    if (this.args.updateValue) {
+      this.args.updateValue(selectedValue); // Обновляем выбранное значение
+    }
+  }
+
+  @action
+  updateOtherValue(event) {
+    const otherValue = event.target.value;
+    if (this.args.updateValue) {
+      this.args.updateValue(otherValue); // Передаем значение "Other"
     }
   }
 }
diff --git a/app/controllers/survey.js b/app/controllers/survey.js
index 311126a..c9978b3 100644
--- a/app/controllers/survey.js
+++ b/app/controllers/survey.js
@@ -39,6 +39,7 @@ export default class SurveyPageController extends Controller {
             { label: 'Red', value: 'red' },
             { label: 'Green', value: 'green' },
             { label: 'Blue', value: 'blue' },
+            { value: "other", label: "Other" }
           ],
         ),
       ],
@@ -72,9 +73,9 @@ export default class SurveyPageController extends Controller {
           'plans',
           true,
           [
-            { label: 'Technologies', cheked: false },
-            { label: 'People', cheked: false },
-            { label: 'Other', cheked: false },
+            { label: 'Technologies', checked: false },
+            { label: 'People', checked: false },
+            { label: 'Other', checked: false },
           ],
         ),
       ],
diff --git a/app/helpers/lookup-component.js b/app/helpers/lookup-component.js
index 28598bb..00dc155 100644
--- a/app/helpers/lookup-component.js
+++ b/app/helpers/lookup-component.js
@@ -4,6 +4,8 @@ export default helper(function lookupComponent([type]) {
   switch (type) {
     case 'text':
       return 'text-field';
+    case 'checkbox':
+      return 'checkbox-field';
     case 'email':
       return 'email-field';
     case 'button':
diff --git a/app/templates/survey.hbs b/app/templates/survey.hbs
index 9caea4f..7adbab8 100644
--- a/app/templates/survey.hbs
+++ b/app/templates/survey.hbs
@@ -35,7 +35,9 @@
               </div>
             {{/if}}
             {{#if (eq element.type "checkbox")}}
+              <div class="field">
                 <Checkbox @element={{element}} @updateValue={{fn this.updateElementValue element}} />
+              </div>
             {{/if}}
           {{/each}}
         </div>