86 lines
1.5 KiB
Vue
86 lines
1.5 KiB
Vue
<template>
|
|
<modal
|
|
class="confirm-dialog"
|
|
:small="true"
|
|
>
|
|
<template #header>
|
|
<h3 class="confirm-dialog__heading">
|
|
{{ title }}
|
|
</h3>
|
|
</template>
|
|
<p class="confirm-dialog__content">
|
|
{{ message }}
|
|
</p>
|
|
<template #footer>
|
|
<div>
|
|
<a
|
|
class="button button--primary"
|
|
data-cy="modal-save-button"
|
|
@click="confirm"
|
|
>
|
|
Bestätigen
|
|
</a>
|
|
<a
|
|
class="button"
|
|
data-cy="modal-cancel-button"
|
|
@click="cancel"
|
|
>
|
|
Abbrechen
|
|
</a>
|
|
</div>
|
|
</template>
|
|
</modal>
|
|
</template>
|
|
|
|
<script>
|
|
import Modal from '@/components/Modal';
|
|
|
|
export default {
|
|
components: {
|
|
Modal,
|
|
},
|
|
|
|
computed: {
|
|
title() {
|
|
const { payload } = this.$modal.state;
|
|
if (payload && payload.title) {
|
|
return payload.title;
|
|
}
|
|
return 'Bestätigung';
|
|
},
|
|
message() {
|
|
const { payload } = this.$modal.state;
|
|
if (payload && payload.message) {
|
|
return payload.message;
|
|
}
|
|
return 'Wollen Sie diesen Eintrag wirklich löschen?';
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
confirm() {
|
|
this.$modal.confirm();
|
|
},
|
|
cancel() {
|
|
this.$modal.cancel();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import 'styles/helpers';
|
|
|
|
.confirm-dialog {
|
|
&__heading {
|
|
@include modal-heading;
|
|
}
|
|
|
|
&__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: $medium-spacing 0;
|
|
}
|
|
}
|
|
</style>
|