Add delete step modal [SCI-6781]

This commit is contained in:
Anton 2022-05-04 15:57:13 +02:00
parent 5454aa26bc
commit 277e202c90
3 changed files with 59 additions and 3 deletions

View file

@ -0,0 +1,41 @@
<template>
<div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">
{{ i18n.t('protocols.steps.modals.delete_step.title')}}
</h4>
</div>
<div class="modal-body">
<p>{{ i18n.t('protocols.steps.modals.delete_step.description_1')}}</p>
<p><b>{{ i18n.t('protocols.steps.modals.delete_step.description_2')}}</b></p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" @click="cancel">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-danger" @click="confirm">{{ i18n.t('protocols.steps.modals.delete_step.confirm')}}</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'deleteStepModal',
mounted() {
$(this.$refs.modal).modal('show');
},
methods: {
confirm() {
$(this.$refs.modal).modal('hide');
this.$emit('confirm');
},
cancel() {
$(this.$refs.modal).modal('hide');
this.$emit('cancel');
}
}
}
</script>

View file

@ -46,7 +46,7 @@
</li>
</ul>
</div>
<button class="btn icon-btn btn-light" @click="deleteStep">
<button class="btn icon-btn btn-light" @click="showDeleteModal">
<i class="fas fa-trash"></i>
</button>
</div>
@ -60,6 +60,7 @@
:element.sync="elements[index]"/>
</template>
</div>
<deleteStepModal v-if="confirmingDelete" @confirm="deleteStep" @cancel="closeDeleteModal"/>
</div>
</template>
@ -68,6 +69,7 @@
import StepTable from 'vue/protocol/step_components/table.vue'
import StepText from 'vue/protocol/step_components/text.vue'
import Checklist from 'vue/protocol/step_components/checklist.vue'
import deleteStepModal from 'vue/protocol/modals/delete_step.vue'
export default {
name: 'StepContainer',
@ -79,14 +81,16 @@
},
data() {
return {
elements: []
elements: [],
confirmingDelete: false
}
},
components: {
InlineEdit,
StepTable,
StepText,
Checklist
Checklist,
deleteStepModal
},
created() {
$.get(this.step.attributes.urls.elements_url, (result) => {
@ -94,6 +98,12 @@
});
},
methods: {
showDeleteModal() {
this.confirmingDelete = true;
},
closeDeleteModal() {
this.confirmingDelete = false;
},
deleteStep() {
$.ajax({
url: this.step.attributes.urls.delete_url,

View file

@ -2530,6 +2530,11 @@ en:
description_1: 'Youre about to delete a content block from your protocol. It might contain data you dont want to lose. You wont be able to get it back.'
description_2: 'Are you sure you want to delete it?'
confirm: 'Delete forever'
delete_step:
title: 'Delete step'
description_1: 'Youre about to delete a whole step from your protocol. It might contain data you dont want to lose. You wont be able to get it back.'
description_2: 'Are you sure you want to delete it?'
confirm: 'Delete forever'
options:
up_arrow_title: "Move step up"
down_arrow_title: "Move step down"