feature-8785:Implement dropdown with a number in custom forms (#8802)

* feature-8785:Implement dropdown with a number in custom forms

* Remove min in custom form input hbs

---------

Co-authored-by: Mario Behling <[email protected]>

Author: khangon

app/components/forms/wizard/custom-form-input.hbs

@@ -6,7 +6,23 @@
   </span>
 </div>
 <div {{did-update this.updated @field}} class="ui action input" style="width: inherit;">
-  <Input type="text" placeholder={{t "Field Name"}} @value={{this.name}} />
+  <Input type="text" placeholder={{t "Field Name"}} @value={{this.name}} style="width: 25%"/>
+  {{#if (eq this.type "number")}}
+    <div class="ui action input input-attendee-custom-form">
+        <Input
+          @type="number"
+          @name="min_price"
+          placeholder={{t "Min"}}
+          @value={{this.min}} />
+    </div>
+    <div class="ui action input input-attendee-custom-form">
+      <Input
+        @type="number"
+        @name="max_price"
+        placeholder={{t "Max"}}
+        @value={{this.max}} />
+    </div>
+  {{/if}}
   <UiDropdown class="ui selection dropdown custom-form-dropdown-attendee" @selected={{this.type}} @onChange={{action (mut this.type)}}>
     <div class="default text">
       {{ this.type }}

app/components/forms/wizard/custom-form-input.ts

@@ -5,7 +5,7 @@ import { inject as service } from '@ember/service';
 import DS from 'ember-data';
 import { tracked } from '@glimmer/tracking';
 
-interface CustomForm { fieldIdentifier: string, name: string, type: string }
+interface CustomForm { fieldIdentifier: string, name: string, type: string, min: number, max: number}
 
 function getIdentifier(name: string, fields: CustomForm[]): string {
   const fieldIdentifiers = new Set(fields.map(field => field.fieldIdentifier));
@@ -22,6 +22,8 @@ interface Args {
   customForms: CustomForm[],
   form: string,
   event: any,
+  min: number | 0,
+  max: number | 10,
   onSave: (() => void) | null
 }
 
@@ -36,13 +38,23 @@ export default class CustomFormInput extends Component<Args> {
   @service
   store!: DS.Store;
 
+  @tracked
+  min = 0;
+
+  @tracked
+  max = 10;
+
   @action
   updated(): void {
     if (this.args.field) {
       this.name = this.args.field.name;
       this.type = this.args.field.type;
+      this.min = this.args.field.min;
+      this.max = this.args.field.max;
     } else {
       this.name = '';
+      this.min = 0;
+      this.max = 10;
     }
   }
 
@@ -66,7 +78,9 @@ export default class CustomFormInput extends Component<Args> {
       isRequired      : false,
       isIncluded      : false,
       isComplex       : true,
-      event           : this.args.event
+      event           : this.args.event,
+      min             : this.min,
+      max             : this.max,
     });
   }
 
@@ -79,10 +93,14 @@ export default class CustomFormInput extends Component<Args> {
       this.args.field.name = this.name;
       this.args.field.type = this.type;
       this.args.field.fieldIdentifier = this.identifier;
+      this.args.field.min = this.min;
+      this.args.field.max = this.max;
     } else {
       this.args.customForms.pushObject(this.field);
     }
     this.name = '';
+    this.min = 0;
+    this.max = 10;
 
     this.args.onSave && this.args.onSave();
   }

app/components/forms/wizard/custom-forms/table.hbs

@@ -24,6 +24,11 @@
         <th class="center aligned">
           {{t 'Type'}}
         </th>
+        {{#if this.editColumn}}
+          <th class="center aligned">
+            {{t 'Range'}}
+          </th>
+        {{/if}}
         <th class="center aligned">
           {{t 'Include'}}
         </th>
@@ -57,6 +62,11 @@
           <td class="border center aligned">
             {{t-var field.type}}
           </td>
+          {{#if this.editColumn}}
+            <td class="border center aligned">
+              {{if (eq field.type "number") (concat field.min " - " field.max) "-"}}
+            </td>
+          {{/if}}
           <td class="border center aligned">
             <UiCheckbox
               @class="slider"

app/models/custom-form.js

@@ -69,6 +69,8 @@ export default ModelBase.extend({
   position        : attr('number'),
   isComplex       : attr('boolean', { defaultValue: false }),
   description     : attr('string', { defaultValue: 'text' }),
+  min          : attr('number', { defaultValue: 0 }),
+  max          : attr('number', { defaultValue: 10 }),
 
 
   event             : belongsTo('event'),

app/styles/pages/events.scss

@@ -137,3 +137,9 @@
     max-height: 128px !important;
   }
 }
+
+.input-attendee-custom-form {
+  input {
+    border-radius: unset !important;
+  }
+}

app/templates/components/forms/orders/order-form.hbs

@@ -110,6 +110,12 @@
                         @value={{mut (get holder field.identifierPath)}}
                         @name={{if field.isRequired (concat field.fieldIdentifier "_required_" index) (concat field.fieldIdentifier "_" index)}}
                         @readonly="" />
+                    {{else if (eq field.type "number")}}
+                      <Input
+                        @type={{field.type}}
+                        @value={{mut (get holder field.identifierPath)}}
+                        @name={{if field.isRequired (concat field.fieldIdentifier "_required_" index) (concat field.fieldIdentifier "_" index)}} 
+                        @min={{if field.min field.min null}} @max={{if field.max field.max null}}/>
                     {{else}}
                       <Input
                         @type={{field.type}}