From eb58612182fef06a7da0d309eda110a71e151c17 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 4 Sep 2019 16:21:30 -0400
Subject: [PATCH] Add remove CLIN confirmation modal

---
 js/components/clin_fields.js      |  8 +++++++
 templates/task_orders/step_3.html | 37 ++++++++++++++++++++++++++++++-
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/js/components/clin_fields.js b/js/components/clin_fields.js
index a7f646eb..cd01e43b 100644
--- a/js/components/clin_fields.js
+++ b/js/components/clin_fields.js
@@ -1,5 +1,6 @@
 import DateSelector from './date_selector'
 import { emitEvent } from '../lib/emitters'
+import Modal from '../mixins/modal'
 import optionsinput from './options_input'
 import textinput from './text_input'
 
@@ -19,6 +20,8 @@ export default {
     textinput,
   },
 
+  mixins: [Modal],
+
   props: {
     initialClinIndex: Number,
     initialClinType: String,
@@ -134,6 +137,7 @@ export default {
       emitEvent('remove-clin', this, {
         clinIndex: this.clinIndex,
       })
+      this.closeModal('remove_clin')
     },
   },
 
@@ -145,5 +149,9 @@ export default {
         return `CLIN`
       }
     },
+
+    removeModalId: function() {
+      return `remove-clin-${this.clinIndex}`
+    },
   },
 }
diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html
index 2e548df1..0b8a1dd4 100644
--- a/templates/task_orders/step_3.html
+++ b/templates/task_orders/step_3.html
@@ -32,7 +32,7 @@
         <button
           v-if='$parent.clinIndex > 0'
           class="icon-link icon-link__remove-clin"
-          v-on:click="removeClin()"
+          v-on:click="openModal(removeModalId)"
           type="button">
           {{ Icon(name='x') }}
         </button>
@@ -327,6 +327,41 @@
           </p>
         </div>
       </div>
+
+      <div v-show="$root.activeModal === removeModalId" v-cloak>
+        <div :id='"modal--" + removeModalId' class='modal modal--dismissable'>
+          <div class='modal__container'>
+            <div class='modal__dialog' role='dialog' aria-modal='true'>
+              <div class='modal__body'>
+                <div class="task-order__modal-cancel">
+                  <h1>Do you want to remove <span v-html='clinTitle'></span>?</h1>
+                  <div class="task-order__modal-cancel_buttons">
+                    <button
+                      v-on:click='closeModal(removeModalId)'
+                      class="usa-button usa-button-primary"
+                      type="button">
+                      No, go back
+                    </button>
+                    <button
+                      v-on:click="removeClin()"
+                      class="usa-button usa-button-primary"
+                      type="button">
+                      Yes, remove CLIN
+                    </button>
+                  </div>
+                </div>
+
+                <button type='button' class='icon-link modal__dismiss' v-on:click='closeModal(removeModalId)'>
+                  {{ Icon('x') }}
+                  <span>
+                    {{ "common.close" | translate }}
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </clin-fields>
 {% endmacro %}