Skip to content

Commit eecb9cc

Browse files
SerVitasikSerVitasik
authored
Merge pull request #585 from devforth/feature/AdminForth/1487/make-beautiful-are-you-sure-po
feat: add guard message to modal confirmation and update related comp…
2 parents ff26146 + 520782a commit eecb9cc

6 files changed

Lines changed: 35 additions & 24 deletions

File tree

‎adminforth/spa/src/adminforth.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,7 @@ class FrontendAPI implements FrontendAPIInterface {
120120
return new Promise((resolve, reject) => {
121121
this.modalStore.setModalContent({
122122
title: params.title,
123+
guardMessage: params.guardMessage,
123124
content: params.message,
124125
contentHTML: params.messageHtml,
125126
acceptText: params.yes || 'Yes',

‎adminforth/spa/src/components/AcceptModal.vue‎

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,36 @@
44
ref="modalRef"
55
:beforeCloseFunction="()=>{modalStore.onAcceptFunction(false);modalStore.isOpened=false}"
66
backgroundCustomClasses="z-[998]"
7-
modalCustomClasses="z-[999]"
7+
modalCustomClasses="z-[999] flex items-center justify-center"
88
>
9-
<div class="relative p-6 sm:p-8 w-[440px] bg-white rounded-2xl shadow-xl dark:bg-gray-800" >
9+
<div class="relative p-6 sm:p-8 w-[440px] bg-white rounded-lg shadow-xl dark:bg-gray-800" >
1010

1111
<button type="button" @click="modalStore.togleModal()" class="absolute top-4 right-4 text-gray-400 hover:text-gray-900 transition-colors dark:hover:text-white" >
1212
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
1313
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
1414
</svg>
1515
</button>
1616

17-
<div class="text-center">
18-
<div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-red-50 mb-5 relative dark:bg-red-900/20">
17+
<div class="text-center flex flex-col">
18+
<div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-red-50 mb-4 relative dark:bg-red-900/20">
1919
<IconClipboardDocumentSolid class="w-10 h-10 text-red-500" />
20-
<div class="absolute bottom-1 right-1 bg-red-500 rounded-full w-[18px] h-[18px] flex items-center justify-center border-2 border-white dark:border-gray-800">
21-
<span class="text-white text-[10px] font-medium">!</span>
20+
<div class="absolute bottom-1 right-1 bg-red-500 rounded-full w-[18px] h-[18px] flex items-center justify-center border-2 border-white dark:border-gray-800">
21+
<span class="text-white text-[10px] font-medium">!</span>
22+
</div>
2223
</div>
23-
</div>
24-
25-
<h3 v-if="modalStore?.modalContent?.title" class="mb-4 text-2xl font-bold text-gray-900 dark:text-white">
26-
{{ modalStore.modalContent.title }}
27-
</h3>
2824

29-
<div class="mb-2 text-[15px] text-gray-600 dark:text-gray-300">
30-
<div v-if="modalStore?.modalContent?.contentHTML" class="font-medium" v-html="modalStore.modalContent.contentHTML"></div>
31-
<p v-else-if="modalStore?.modalContent?.content" class="font-medium">{{ modalStore.modalContent.content }}</p>
25+
<div class="flex flex-col gap-3">
26+
<h3 v-if="modalStore?.modalContent?.title" class="text-2xl font-bold text-gray-900 dark:text-white">
27+
{{ modalStore.modalContent.title }}
28+
</h3>
29+
30+
<div class="text-[15px] text-gray-600 dark:text-gray-300">
31+
<div v-if="modalStore?.modalContent?.contentHTML" class="font-medium" v-html="modalStore.modalContent.contentHTML"></div>
32+
<p v-else-if="modalStore?.modalContent?.content" class="font-medium">{{ modalStore.modalContent.content }}</p>
33+
</div>
3234
</div>
3335

34-
<hr class="border-t border-gray-100 dark:border-gray-700 mb-6">
36+
<hr class="border-t border-gray-100 dark:border-gray-700 my-6">
3537

3638
<div class="flex justify-center gap-4 w-full">
3739
<button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}" type="button" class="flex-1 py-2.5 px-4 text-sm font-medium text-gray-700 bg-white rounded-lg border border-gray-200 hover:bg-gray-50 focus:ring-4 focus:ring-gray-100 transition-all dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">
@@ -44,18 +46,15 @@
4446
class="flex-1 flex items-center justify-center py-2.5 px-4 text-sm font-medium transition-all focus:outline-none
4547
text-white bg-red-600 hover:bg-red-700
4648
dark:bg-red-500 dark:hover:bg-red-600
47-
border border-red-700 dark:border-red-600
48-
rounded-lg shadow-sm focus:z-10 focus:ring-4
49+
border-none rounded-lg shadow-sm focus:z-10 focus:ring-4
4950
focus:ring-red-100 dark:focus:ring-red-900 gap-1">
5051
{{ modalStore?.modalContent?.acceptText }}
5152
</button>
5253
</div>
5354

54-
<div class="flex items-center justify-center mt-5 text-xs text-gray-400 gap-1.5 font-medium">
55-
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
56-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
57-
</svg>
58-
<span>Your changes will not be saved</span>
55+
<div v-if="modalStore?.modalContent?.guardMessage" class="flex items-center justify-center mt-6 text-xs text-gray-400 gap-1.5 font-medium">
56+
<IconShieldCheck class="w-4 h-4" />
57+
<span> {{ modalStore?.modalContent?.guardMessage }}</span>
5958
</div>
6059

6160
</div>
@@ -68,7 +67,7 @@
6867
import { watch, ref } from 'vue';
6968
import { useModalStore } from '@/stores/modal';
7069
import { Modal } from '@/afcl';
71-
import { IconClipboardDocumentSolid } from '@iconify-prerendered/vue-heroicons';
70+
import { IconClipboardDocumentSolid, IconShieldCheck } from '@iconify-prerendered/vue-heroicons';
7271
7372
7473
const modalRef = ref();

‎adminforth/spa/src/stores/modal.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { defineStore } from 'pinia'
33

44
type ModalContentType = {
55
title?: string;
6+
guardMessage?: string;
67
content?: string;
78
contentHTML?: string;
89
acceptText?: string;
@@ -13,6 +14,7 @@ import { defineStore } from 'pinia'
1314
export const useModalStore = defineStore('modal', () => {
1415
const modalContent = ref({
1516
title: 'title',
17+
guardMessage: 'guardMessage',
1618
content: '',
1719
contentHTML: '',
1820
acceptText: 'acceptText',
@@ -33,6 +35,7 @@ export const useModalStore = defineStore('modal', () => {
3335
function setModalContent(content: ModalContentType) {
3436
modalContent.value = {
3537
title: content.title || '',
38+
guardMessage: content.guardMessage || '',
3639
content: content.content || '',
3740
contentHTML: content.contentHTML || '',
3841
acceptText: content.acceptText || 'acceptText',
@@ -43,6 +46,7 @@ export const useModalStore = defineStore('modal', () => {
4346
isOpened.value = false;
4447
modalContent.value = {
4548
title: 'title',
49+
guardMessage: 'guardMessage',
4650
content: 'content',
4751
contentHTML: '',
4852
acceptText: 'acceptText',

‎adminforth/spa/src/utils/listUtils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export async function startBulkAction(actionId: string, resource: AdminForthReso
6060

6161
if (action?.confirm) {
6262
const confirmed = await confirm({
63-
message: action.confirm,
63+
title: action.confirm,
6464
});
6565
if (!confirmed) {
6666
return;

‎adminforth/spa/src/utils/utils.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -782,6 +782,7 @@ export async function onBeforeRouteLeaveCreateEditViewGuard(initialValues: any,
782782

783783
const answer = await confirm({
784784
title: t('There are unsaved changes'),
785+
guardMessage: t('Your changes will not be saved'),
785786
messageHtml,
786787
yes: t('Leave without saving'),
787788
no: t('Stay and continue'),

‎adminforth/types/FrontendAPI.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,12 @@ export type ConfirmParams = {
164164
* The title to display in the dialog
165165
*/
166166
title?: string;
167+
168+
/**
169+
* The message to display in the dialog as a warning that action is irreversible
170+
*/
171+
guardMessage?: string;
172+
167173
/**
168174
* The message to display in the dialog
169175
*/

0 commit comments

Comments
 (0)