Add remove CLIN confirmation modal

This commit is contained in:
leigh-mil 2019-09-04 16:21:30 -04:00
parent 46345657c7
commit eb58612182
2 changed files with 44 additions and 1 deletions

View File

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

View File

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