feat: mark optional fields (#507)

* fix(user): change phone placeholder * feat: mark optional fields Works for built in and custom meta fields.
projectcaluma · Jun 29, 2022 · 51debd0 · 51debd0
1 parent 2c25eeb
commit 51debd0
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -133,7 +133,9 @@ export default class EmeisOptionsService extends Service {
         label: "My Input", // this could also be an ember-intl translation key
         type: "text",
         visible: true,
-        readOnly: false
+        readOnly: false,
+        required: false, //marks this field as optional
+        placeholder: "some.translation.key" //ember-intl translation key or plain string
       },
       {
         slug: "test-input-2",
@@ -146,7 +148,8 @@ export default class EmeisOptionsService extends Service {
         ],
         type: "choice",
         visible: () => true,
-        readOnly: false
+        readOnly: false,
+        required: true, //marks this field as required
       }
     ]
   }
@@ -161,6 +164,10 @@ There are special options available for `options`, `type` and `visible` properti
 
 Defines the type of the output component and can either be a _text_ or a _choice_.
 
+#### **required** - meta field
+
+Marks this field as optional or validates its presence in case it's set to `true`. Custom _choice_ fields may not be validated as required, tho.
+
 #### **options** - meta field
 
 In combination with `type:"choice"` the options can be a list of options (`{value, label}`) or a (async) function which resolves to a list of options.

diff --git a/addon/components/edit-form/element.hbs b/addon/components/edit-form/element.hbs
@@ -1,6 +1,9 @@
 <div class="uk-margin">
   <label class="uk-form-label" for="form-stacked-text">
     {{@label}}
+    {{#if @optional}}
+      <span class="uk-text-muted uk-text-lowercase uk-text-normal">({{t "emeis.optional"}})</span>
+    {{/if}}
   </label>
   <div class="uk-form-controls">
     {{yield}}

diff --git a/addon/components/meta-field.hbs b/addon/components/meta-field.hbs
@@ -1,5 +1,5 @@
 {{#if this.visible.value}}
-  <EditForm::Element @label={{optional-translate @field.label}}>
+  <EditForm::Element @label={{optional-translate @field.label}} @optional={{@optional}}>
     {{#if (eq @field.type "choice")}}
       {{#if this.options.isRunning}}
         <UkSpinner @ratio="1" />
@@ -9,7 +9,7 @@
           @options={{this.options.value}}
           @selected={{find-by "value" (get @model.metainfo @field.slug) this.options.value}}
           @onChange={{fn this.updateMetaField @field @model}}
-          @placeholder={{t @field.label}}
+          @placeholder={{optional-translate @field.placeholder}}
           @allowClear={{true}}
           @renderInPlace={{true}}
           as |option|
@@ -25,6 +25,8 @@
         type="text"
         value={{get @model.metainfo @field.slug}}
         disabled={{this.readOnly.value}}
+        required={{@field.required}}
+        placeholder={{optional-translate @field.placeholder}}
         {{on "input" (fn this.updateMetaField @field @model)}}
       >
     {{/if}}

diff --git a/addon/templates/permissions/edit.hbs b/addon/templates/permissions/edit.hbs
@@ -9,6 +9,7 @@
       type="text"
       name="slug"
       pattern="^[-a-zA-Z0-9_]+$"
+      required
       disabled={{not @model.isNew}}
       value={{@model.slug}}
     />
@@ -46,7 +47,8 @@
       @placeholder="{{t "emeis.permissions.headings.roles"}}..."
       @onChange={{set @model.roles}}
       @multiple="true"
-      required as |role|
+      required
+      as |role|
     >
       {{role.name}}
     </RelationshipSelect>

diff --git a/addon/templates/roles/edit.hbs b/addon/templates/roles/edit.hbs
@@ -3,12 +3,13 @@
   {{t "emeis.form.back"}}
 </LinkTo>
 <EditForm @model={{@model}} @updateModel={{this.updateModel}} class="uk-margin">
-  <EditForm::Element @label={{t "emeis.roles.headings.slug"}}>
+  <EditForm::Element @label={{t "emeis.roles.headings.slug"}} @optional={{unless @model.isNew true}}>
     <input
       class="uk-input"
       type="text"
       name="slug"
       pattern="^[-a-zA-Z0-9_]+$"
+      required
       disabled={{not @model.isNew}}
       value={{@model.slug}}
     />

diff --git a/addon/templates/scopes/edit.hbs b/addon/templates/scopes/edit.hbs
@@ -21,7 +21,7 @@
           />
         </EditForm::Element>
 
-        <EditForm::Element @label={{t "emeis.scopes.headings.description"}}>
+        <EditForm::Element @label={{t "emeis.scopes.headings.description"}} @optional={{true}}>
           <textarea
             class="uk-textarea"
             rows="5"
@@ -31,7 +31,7 @@
           ></textarea>
         </EditForm::Element>
 
-        <EditForm::Element @label={{t "emeis.scopes.headings.parent"}}>
+        <EditForm::Element @label={{t "emeis.scopes.headings.parent"}} @optional={{true}}>
           <RelationshipSelect
             @model={{this.allScopes}}
             @selected={{@model.parent}}
@@ -43,7 +43,7 @@
         </EditForm::Element>
 
         {{#each this.metaFields as |field|}}
-          <MetaField @field={{field}} @model={{@model}} />
+          <MetaField @field={{field}} @model={{@model}} @optional={{unless field.required true}} />
         {{/each}}
 
       </EditForm>

diff --git a/addon/templates/users/edit.hbs b/addon/templates/users/edit.hbs
@@ -61,12 +61,12 @@
         </EditForm::Element>
 
         {{#if (includes "phone" this.visibleFields)}}
-          <EditForm::Element @label={{t "emeis.users.headings.phone"}}>
+          <EditForm::Element @label={{t "emeis.users.headings.phone"}} @optional={{not (includes "phone" this.requiredFields)}}>
             <input
               class="uk-input"
               type="tel"
               name="phone"
-              placeholder="{{t "emeis.users.headings.phone"}}..."
+              placeholder="{{t "emeis.users.headings.phone-placeholder"}}..."
               required={{includes "phone" this.requiredFields}}
               pattern="^[0-9()\-\s]+$"
               value={{@model.phone}}
@@ -79,7 +79,7 @@
         {{/if}}
 
         {{#if (includes "language" this.visibleFields)}}
-          <EditForm::Element @label={{t "emeis.users.headings.language"}}>
+          <EditForm::Element @label={{t "emeis.users.headings.language"}} @optional={{not (includes "language" this.requiredFields)}}>
             <select
                 class="uk-select uk-text-uppercase"
                 required={{includes "language" this.requiredFields}}
@@ -97,20 +97,20 @@
         {{/if}}
 
         {{#if (includes "address" this.visibleFields)}}
-          <EditForm::Element @label={{t "emeis.users.headings.address"}}>
+          <EditForm::Element @label={{t "emeis.users.headings.address"}} @optional={{not (includes "address" this.requiredFields)}}>
             <input
               class="uk-input"
               type="text"
               name="address"
               placeholder="{{t "emeis.users.headings.address"}}..."
-              required={{includes "phone" this.requiredFields}}
+              required={{includes "address" this.requiredFields}}
               value={{@model.address}}
             />
           </EditForm::Element>
         {{/if}}
 
         {{#if (includes "city" this.visibleFields)}}
-          <EditForm::Element @label={{t "emeis.users.headings.city"}}>
+          <EditForm::Element @label={{t "emeis.users.headings.city"}} @optional={{not (includes "city" this.requiredFields)}}>
             <input
               class="uk-input"
               type="text"
@@ -123,7 +123,7 @@
         {{/if}}
 
         {{#if (includes "zip" this.visibleFields)}}
-          <EditForm::Element @label={{t "emeis.users.headings.zip"}}>
+          <EditForm::Element @label={{t "emeis.users.headings.zip"}} @optional={{not (includes "zip" this.requiredFields)}}>
             <input
               class="uk-input"
               type="number"
@@ -136,7 +136,7 @@
         {{/if}}
 
         {{#each this.metaFields as |field|}}
-          <MetaField @field={{field}} @model={{@model}} />
+          <MetaField @field={{field}} @model={{@model}} @optional={{unless field.required true}} />
         {{/each}}
       </EditForm>
 

diff --git a/tests/dummy/app/services/emeis-options.js b/tests/dummy/app/services/emeis-options.js
@@ -34,6 +34,8 @@ export default class EmeisOptionsService extends Service {
         type: "text",
         visible: true,
         readOnly: false,
+        required: false,
+        placeholder: "emeis.options.meta.user.example",
       },
       // {
       //   slug: "user-meta-example-2",
@@ -77,6 +79,7 @@ export default class EmeisOptionsService extends Service {
         },
         visible: () => true, // boolean or function which evaluates to a boolean value
         readOnly: false,
+        required: false,
       },
       {
         slug: "meta-example-2",

diff --git a/translations/de.yaml b/translations/de.yaml
@@ -4,6 +4,7 @@ emeis:
   empty: "Keine Einträge gefunden..."
   loading: "Laden..."
   inactive: "Inaktiv"
+  optional: "optional"
   general-error: "Ein Problem ist aufgetretten. Bitte versuchen Sie es erneut."
   actions: "Aktionen"
   export: "Export"
@@ -30,7 +31,8 @@ emeis:
       firstName: "Vorname"
       lastName: "Nachname"
       email: "E-Mail"
-      phone: "Telefonnummer"
+      phone: "Telefon"
+      phone-placeholder: "+41 31 123 45 56"
       language: "Sprache"
       address: "Adresse"
       city: "Stadt"

diff --git a/translations/en.yaml b/translations/en.yaml
@@ -4,6 +4,7 @@ emeis:
   empty: "No entries found..."
   loading: "Loading..."
   inactive: "Inactive"
+  optional: "optional"
   general-error: "A problem occured. Please try again."
   actions: "Actions"
   export: "Export"
@@ -31,6 +32,7 @@ emeis:
       lastName: "Last Name"
       email: "E-Mail"
       phone: "Phone"
+      phone-placeholder: "+41 31 123 45 56"
       language: "Language"
       address: "Address"
       city: "City"