13309 Allow clearing LU Previously Approved Action Code

NYCPlanning · Nov 17, 2020 · 4a94b1c · 4a94b1c
1 parent 66b05ce
commit 4a94b1c
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 28 deletions.
diff --git a/client/app/components/packages/landuse-form/proposed-action-editor.hbs b/client/app/components/packages/landuse-form/proposed-action-editor.hbs
@@ -178,26 +178,38 @@
 
     {{/if}}
 
-    <div>
-      <h5 class="small-margin-bottom">
-        If this is a follow-up Action, indicate the previously approved Action Code
-      </h5>
-
-      <label data-test-dcpPreviouslyapprovedactioncode-picker="{{landuseActionForm.data.dcpActioncode}}">
-        <PowerSelect
-          triggerClass="previouslyapprovedactions-dropdown"
-          supportsDataTestProperties={{true}}
-          @placeholder={{this.selectedActionPlaceholder}}
-          @searchEnabled={{false}}
-          @options={{optionset 'landuseAction' 'dcpPreviouslyapprovedactioncode' 'list'}}
-          @selected={{this.actionCode}}
-          @onChange={{fn (mut this.actionCode)}}
-          @onClose={{fn this.setPreviouslyApprovedActionCodeFields this.actionCode.code}}
-          as |landUseAction|
+    <div class="grid-x">
+      <div class="cell small-12">
+        <h5 class="small-margin-bottom">
+          If this is a follow-up Action, indicate the previously approved Action Code
+        </h5>
+
+        <label data-test-dcpPreviouslyapprovedactioncode-picker="{{landuseActionForm.data.dcpActioncode}}">
+          <PowerSelect
+            triggerClass="previouslyapprovedactions-dropdown"
+            supportsDataTestProperties={{true}}
+            @placeholder="-- select an action --"
+            @searchEnabled={{false}}
+            @options={{optionset 'landuseAction' 'dcpPreviouslyapprovedactioncode' 'list'}}
+            @selected={{this.chosenDcpPreviouslyapprovedactioncode}}
+            @onChange={{fn (mut this.chosenDcpPreviouslyapprovedactioncode)}}
+            @onClose={{fn this.setPreviouslyApprovedActionCodeFields this.chosenDcpPreviouslyapprovedactioncode.code}}
+            as |landUseAction|
+          >
+            {{landUseAction.label}}
+          </PowerSelect>
+        </label>
+      </div>
+
+      <div class="cell text-right">
+        <button
+          type="button"
+          class="dropdown-clear-btn-below"
+          {{on "click" (fn this.clearPreviouslyApprovedActionCodeDropdown landuseActionForm.data)}}
         >
-          {{landUseAction.label}}
-        </PowerSelect>
-      </label>
+          Clear
+        </button>
+      </div>
     </div>
 
     {{#if this.projectHasRequiredActionsAndFollowUpYes}}

diff --git a/client/app/components/packages/landuse-form/proposed-action-editor.js b/client/app/components/packages/landuse-form/proposed-action-editor.js
@@ -1,9 +1,14 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 import { optionset } from '../../../helpers/optionset';
 
 export default class PackagesLanduseFormProposedActionEditorComponent extends Component {
-  actionCode;
+  @tracked chosenDcpPreviouslyapprovedactioncode = this.args.landuseActionForm.data.dcpPreviouslyapprovedactioncode
+    ? {
+      code: this.args.landuseActionForm.data.dcpPreviouslyapprovedactioncode,
+      label: optionset(['landuseAction', 'dcpPreviouslyapprovedactioncode', 'label', this.args.landuseActionForm.data.dcpPreviouslyapprovedactioncode]),
+    } : null;
 
   requiredActionCodes = ['CM', 'LD', 'RA', 'RC', 'RS', 'SA', 'SC', 'SD', 'ZA', 'ZC', 'ZS'];
 
@@ -17,20 +22,21 @@ export default class PackagesLanduseFormProposedActionEditorComponent extends Co
     return this.projectHasRequiredActions && hasPreviousAction;
   }
 
-  get selectedActionPlaceholder() {
-    const previouslyApprovedActionCode = this.args.landuseActionForm.data.dcpPreviouslyapprovedactioncode;
-    if (previouslyApprovedActionCode) {
-      return optionset(['landuseAction', 'dcpPreviouslyapprovedactioncode', 'label', previouslyApprovedActionCode]);
-    } return '-- select an action --';
-  }
-
   @action
   setPreviouslyApprovedActionCodeFields(actionCode) {
     if (actionCode) {
       this.args.landuseActionForm.data.dcpPreviouslyapprovedactioncode = actionCode;
       this.args.landuseActionForm.data.dcpFollowuptopreviousaction = true;
-    } else if (!actionCode && !this.args.landuseActionForm.data.dcpPreviouslyapprovedactioncode) {
+    } else {
+      this.args.landuseActionForm.data.dcpPreviouslyapprovedactioncode = null;
       this.args.landuseActionForm.data.dcpFollowuptopreviousaction = false;
     }
   }
+
+  @action
+  clearPreviouslyApprovedActionCodeDropdown(landuseActionFormData) {
+    this.chosenDcpPreviouslyapprovedactioncode = null;
+    landuseActionFormData.dcpPreviouslyapprovedactioncode = null;
+    landuseActionFormData.dcpFollowuptopreviousaction = false;
+  }
 }