Add remove CLIN confirmation modal

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}`
+    },
   },
 }

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 %}