Add other-option when configuring a survey (#1128)

* Add other-option when configuring a survey

* Removing other-option from dropdown

* Removing forgotten mistake

Author: Angamanga

apps/web-mzima-client/src/app/settings/surveys/create-field-modal/create-field-modal.component.html

@@ -40,15 +40,17 @@
       </div>
 
       <!-- Has options -->
-      <div class="form-row" *ngIf="hasOptions">
+      <div class="form-row form-row__options" *ngIf="hasOptions">
         <div class="form-head-panel">
           <mat-label class="form-label" [data-qa]="'field-options'"
             >{{ 'form.field_options' | translate }}
           </mat-label>
 
           <mzima-client-button
             fill="outline"
-            color="secondary"
+            color="gray"
+            size="medium"
+            class="form-row__options__button"
             (buttonClick)="addOption()"
             [data-qa]="'btn-add-option'"
           >
@@ -65,16 +67,15 @@
               (input)="onChange(i)"
               placeholder="{{ 'form.field_name_placeholder' | translate }}"
               [data-qa]="'option-' + i"
+              [disabled]="option.value === 'Other'"
             />
-
             <mzima-client-button
               matSuffix
               fill="clear"
               color="danger"
               [iconOnly]="true"
               class="button-flat button-beta"
               (buttonClick)="removeOption(i)"
-              *ngIf="selectedFieldType.options.length > 1"
               [data-qa]="'btn-remove-option-' + i"
             >
               <mat-icon icon svgIcon="delete"></mat-icon>
@@ -84,6 +85,26 @@
             {{ option.error | translate }}
           </mat-error>
         </div>
+        <div
+          *ngIf="
+            selectedFieldType?.options?.length > 0 &&
+            !selectedFieldType?.options?.includes('Other') &&
+            selectedFieldType.input !== 'select'
+          "
+        >
+          <mzima-client-button
+            fill="outline"
+            color="gray"
+            size="medium"
+            class="form-row__options__button"
+            (buttonClick)="addOther()"
+          >
+            {{ 'form.field_add_other' | translate }}
+          </mzima-client-button>
+          <p class="form-row__options__add-other">
+            {{ 'form.field_add_other_desc' | translate }}
+          </p>
+        </div>
       </div>
 
       <div class="form-row" *ngIf="selectedFieldType.input === 'tags'">

apps/web-mzima-client/src/app/settings/surveys/create-field-modal/create-field-modal.component.scss

@@ -81,6 +81,35 @@ quill-editor {
   &__item {
     margin-bottom: 8px;
   }
+  &__options {
+    background-color: var(--color-neutral-10);
+    padding: 16px;
+    border-radius: 4px;
+    .form-label {
+      font-weight: 700;
+    }
+    &__button {
+      &::ng-deep {
+        .mzima-button {
+          background-color: transparent;
+          font-size: 14px;
+          min-height: 22px;
+          width: unset;
+        }
+      }
+    }
+    .form-row__item {
+      background-color: var(--color-light);
+      .mat-input-element {
+        padding: 12px;
+      }
+    }
+    &__add-other {
+      padding: 6px;
+      font-size: 12px;
+      color: var(--color-neutral-70);
+    }
+  }
 
   .form-head-panel {
     margin-bottom: 8px;

apps/web-mzima-client/src/app/settings/surveys/create-field-modal/create-field-modal.component.ts

@@ -259,6 +259,13 @@ export class CreateFieldModalComponent implements OnInit {
     this.fieldOptions.push({ value: '', error: '' });
   }
 
+  public addOther() {
+    if (!this.selectedFieldType.options) this.selectedFieldType.options = [];
+    if (this.selectedFieldType.options.includes('Other')) return;
+    this.selectedFieldType.options.push('Other');
+    this.fieldOptions.push({ value: 'Other', error: '' });
+  }
+
   private setTempSelectedFieldType() {
     this.fieldOptions = this.selectedFieldType.options.map((opt: string) => ({
       value: opt,

apps/web-mzima-client/src/assets/locales/en.json

@@ -245,6 +245,8 @@
     "edit_post_type": "Edit Survey: {{form}}",
     "edit_post_types": "Edit Surveys",
     "field_add_option": "Add",
+    "field_add_other": "Add other",
+    "field_add_other_desc": "Allows entering a custom option that is not listed among the provided choices.",
     "field_default": "Field Default",
     "field_key": "Field Key",
     "field_type": "Field Type",