ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Refactor confirm modals

This commit is contained in:
Ramon Wenger 2024-02-05 17:35:24 +01:00
parent c32864203e
commit 91dcf3cb20
7 changed files with 67 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
client/src/components/modals/Confirm.vue
View File

@ -4,26 +4,22 @@
:small="true"
>
<template #header>
<h3 class="confirm-dialog__heading">
{{ title }}
</h3>
<h3 class="confirm-dialog__heading">{{ title }}</h3>
</template>
<p class="confirm-dialog__content">
{{ message }}
</p>
<p class="confirm-dialog__content">{{ message }}</p>
<template #footer>
<div>
<a
class="button button--primary"
data-cy="modal-save-button"
@click="confirm"
@click="$emit('confirm')"
>
Bestätigen
</a>
<a
class="button"
data-cy="modal-cancel-button"
@click="cancel"
@click="$emit('cancel')"
>
Abbrechen
</a>
@ -32,40 +28,16 @@
</modal>
</template>
<script>
<script setup lang="ts">
import Modal from '@/components/Modal.vue';
export default {
components: {
Modal,
},
export interface Props {
title: string;
message: string;
}
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();
},
},
};
defineProps<Props>();
defineEmits(['confirm', 'cancel']);
</script>
<style scoped lang="scss">

58
client/src/components/modals/Confirm2.vue
View File

@ -1,58 +0,0 @@
<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="$emit('confirm')"
>
Bestätigen
</a>
<a
class="button"
data-cy="modal-cancel-button"
@click="$emit('cancel')"
>
Abbrechen
</a>
</div>
</template>
</modal>
</template>
<script setup lang="ts">
// todo: rename and probably merge with other confirm modal
import Modal from '@/components/Modal.vue';
export interface Props {
title: string;
message: string;
}
defineProps<Props>();
defineEmits(['confirm', '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>

44
client/src/components/modals/LegacyConfirm.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<confirm
:title="title"
:message="message"
@confirm="confirm"
@cancel="cancel"
/>
</template>
<script lang="ts">
import Confirm from '@/components/modals/Confirm.vue';
export default {
components: {
Confirm,
},
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>

26
client/src/components/modals/index.js
View File

@ -1,24 +1,12 @@
import { defineAsyncComponent } from 'vue';
const Modal = defineAsyncComponent(() => import('@/components/Modal.vue'));
const FullscreenImage = defineAsyncComponent(() =>
import('@/components/FullscreenImage.vue')
);
const FullscreenInfographic = defineAsyncComponent(() =>
import('@/components/FullscreenInfographic.vue')
);
const FullscreenVideo = defineAsyncComponent(() =>
import('@/components/FullscreenVideo.vue')
);
const DeactivatePerson = defineAsyncComponent(() =>
import('@/components/profile/DeactivatePerson.vue')
);
const SnapshotCreated = defineAsyncComponent(() =>
import('@/components/modules/SnapshotCreated.vue')
);
const ChangeVisibility = defineAsyncComponent(() =>
import('@/components/rooms/ChangeVisibility.vue')
);
const Confirm = defineAsyncComponent(() => import('@/components/modals/Confirm.vue'));
const FullscreenImage = defineAsyncComponent(() => import('@/components/FullscreenImage.vue'));
const FullscreenInfographic = defineAsyncComponent(() => import('@/components/FullscreenInfographic.vue'));
const FullscreenVideo = defineAsyncComponent(() => import('@/components/FullscreenVideo.vue'));
const DeactivatePerson = defineAsyncComponent(() => import('@/components/profile/DeactivatePerson.vue'));
const SnapshotCreated = defineAsyncComponent(() => import('@/components/modules/SnapshotCreated.vue'));
const ChangeVisibility = defineAsyncComponent(() => import('@/components/rooms/ChangeVisibility.vue'));
const Confirm = defineAsyncComponent(() => import('@/components/modals/LegacyConfirm.vue'));
export default {
Modal,

2
client/src/helpers/modalService.ts
View File

@ -1,5 +1,5 @@
import { createApp } from 'vue';
import Confirm from '@/components/modals/Confirm2.vue';
import Confirm from '@/components/modals/Confirm.vue';
import { ResolveReject } from './types';
export default {
show() {

2
client/src/plugins/modal.types.ts
View File

@ -2,7 +2,7 @@ export interface Modal {
state: any;
component: string;
payload?: any;
confirm: (res: any) => void;
confirm: (res?: any) => void;
open: (component: string, payload?: any) => Promise<(resolve: () => any, reject: () => any) => void>;
cancel: () => void;
_resolve: (r?: any) => any;

6
client/src/styles/_widget-popover.scss
View File

@ -8,7 +8,7 @@
flex-direction: column;
background-color: $color-white;
padding: 0;
z-index: 100;
z-index: 80;
@include widget-shadow;
width: max-content;
@ -50,7 +50,7 @@
flex-grow: 1;
width: auto;
& > a {
&>a {
@include popover-link;
}
@ -58,7 +58,7 @@
line-height: 40px;
padding: $small-spacing $medium-spacing;
& > a,
&>a,
& {
@include small-text;
}