added radio button component

app/components/radio-button.hbs

@@ -0,0 +1,16 @@
+<div class="form-group">
+  <label>{{this.args.element.label}}</label>
+  {{#each this.args.element.options as |option|}}
+    <div class="radio-option">
+      <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}}
+      >
+      <label for={{option.value}}>{{option.label}}</label>
+    </div>
+  {{/each}}
+</div>

app/components/radio-button.js

@@ -0,0 +1,15 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class RadioButtonComponent extends Component {
+    @action
+    updateSelection(event) {
+      // Проверим, что event и event.target существуют
+      if (event && event.target) {
+        const selectedValue = event.target.value;  // Получаем значение из event
+        this.args.updateValue(selectedValue);      // Передаём выбранное значение
+      } else {
+        console.error('Event or event.target is undefined');
+      }
+    }
+}

app/components/step-bar.hbs

@@ -1,5 +1,5 @@
 <div class="step-bar">
   <div class="step" style="width: {{this.progress}}%;">
-    {{this.currentStep}} of {{this.totalSteps}} Steps
+    Step {{this.args.currentStep}} of {{this.args.totalSteps}}
   </div>
 </div>

app/components/step-bar.js

@@ -1,11 +1,7 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 
 export default class StepBarComponent extends Component {
-  @tracked currentStep = 1;
-  @tracked totalSteps = 5;
-
   get progress() {
-    return (this.currentStep / this.totalSteps) * 100;
+    return (this.args.currentStep / this.args.totalSteps) * 100;
   }
 }

app/components/submit-button.js

@@ -5,7 +5,6 @@ export default class SubmitButtonComponent extends Component {
   @action
   handleClick() {
     if (this.args.element.action === 'nextPage') {
-
       this.args.onNextPage();
     }
   }

app/controllers/survey.js

@@ -2,25 +2,44 @@ import Controller from '@ember/controller';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
-export default class SurveyPageController extends Controller {
-  @tracked name = ''; // Отслеживаемое значение имени
+class PageElement {
+  @tracked value = '';
+
+  constructor(type, label, id, required = false, options = []) {
+    this.type = type;
+    this.label = label;
+    this.id = id;
+    this.required = required;
+    this.options = options;
+  }
+}
 
+export default class SurveyPageController extends Controller {
   @tracked currentStep = 1;
-  totalSteps = 5;
+  @tracked currentPage = 0;
+  totalSteps = this.pages.length;
 
   @tracked pages = [
     {
-      name: 'Introduction',
+      name: 'Overal Info',
       elements: [
-        { type: 'text', label: 'Enter your name', id: 'name', value: '' }
-      ]
+        new PageElement('text', 'Department', 'name', true),
+        new PageElement('text', 'Role', 'role', 'name', true),
+        new PageElement('text', 'Age', 'age', 'age', true),
+        new PageElement('radio', 'Select your favorite color', 'favoriteColor', true, [
+          { label: 'Red', value: 'red' },
+          { label: 'Green', value: 'green' },
+          { label: 'Blue', value: 'blue' }
+        ])
+      ],
     },
     {
-      name: 'Contact Information',
+      name: 'Work experience',
       elements: [
-        { type: 'email', label: 'Enter your email', id: 'email', value: '' }
-      ]
-    }
+        new PageElement('text', 'Previous company', 'prevComp', true),
+        new PageElement('text', 'Previous role', 'currRole', true),
+      ],
+    },
   ];
 
   @tracked currentPage = 0;
@@ -29,12 +48,35 @@ export default class SurveyPageController extends Controller {
     return this.pages[this.currentPage];
   }
 
-  // Проверка, что имя введено, чтобы активировать кнопку "Proceed"
-  get isNextEnabled() {
-    return this.name.trim() !== '';
+  @action
+updateElementValue(element, eventOrValue) {
+  // Если передается событие, это input или change, получаем значение
+  const value = eventOrValue.target ? eventOrValue.target.value : eventOrValue;
+  element.value = value;  // Устанавливаем новое значение
+  // this.saveSurveyProgress();  // Сохраняем прогресс в localStorage
+}
+
+  get isNextDisabled() {
+    // Проверяем, что все обязательные поля заполнены
+    return this.currentPageConfig.elements.some(element => {
+      if (element.required) {
+        if (element.type === 'radio') {
+          return !element.value;  // Если нет значения, возвращаем true (чтобы кнопка была disabled)
+        } else {
+          // Для текстовых полей проверяем пустые строки
+          return !element.value || element.value.trim() === '';  // Пустое поле
+        }
+      }
+      return false;  // Если поле не обязательное, оно не влияет на состояние кнопки
+    });
+  }
+
+
+
+  get isBackEnabled() {
+    return this.currentPage > 0;
   }
 
-  // Обработчик для перехода на следующую страницу
   @action
   handleNextPage() {
     if (this.currentPage < this.pages.length - 1) {
@@ -45,9 +87,11 @@ export default class SurveyPageController extends Controller {
     }
   }
 
-  // Обработчик обновления значения поля имени
   @action
-  updateName(event) {
-    this.name = event.target.value;
+  handleBackPage() {
+    if (this.currentPage > 0) {
+      this.currentPage--;
+      this.currentStep--;
+    }
   }
 }

app/templates/survey.hbs

@@ -7,21 +7,32 @@
   {{#each this.currentPageConfig.elements as |element|}}
     {{#if (eq element.type "text")}}
       <div class="form-group">
-        <label for="name">{{element.label}}</label>
+        <label for={{element.id}}>{{element.label}}</label>
         <input
           type="text"
           id={{element.id}}
-          value={{this.name}}
-          {{on "input" this.updateName}}
+          value={{element.value}}
+          {{on "input" (fn this.updateElementValue element)}}
         >
       </div>
     {{/if}}
+
+    {{#if (eq element.type "radio")}}
+      <RadioButton @element={{element}} @updateValue={{fn this.updateElementValue element}} />
+    {{/if}}
   {{/each}}
 
+  <button
+    type="button"
+    {{on "click" this.handleBackPage}}
+    disabled={{not this.isBackEnabled}}
+  >
+    Back
+  </button>
   <button
     type="button"
     {{on "click" this.handleNextPage}}
-    disabled={{not this.isNextEnabled}}
+    disabled={{this.isNextDisabled}}
   >
     Proceed
   </button>

tests/integration/components/radio-button-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'survey-builder/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | radio-button', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<RadioButton />`);
+
+    assert.dom().hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <RadioButton>
+        template block text
+      </RadioButton>
+    `);
+
+    assert.dom().hasText('template block text');
+  });
+});