mirrors/homebox
1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2025-08-01 15:20:29 +00:00
Code Issues Projects Releases Packages Wiki Activity

Modify the confirm dialog by adding a 'Title' argument to show different titles for different dialogs

Browse source
This commit is contained in:
ThaiMing3 2023-12-17 18:56:28 +08:00
parent caa481f937
commit 11b8967205
6 changed files with 21 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/components/ModalConfirm.vue
View file

@ -1,7 +1,7 @@
<template>
<BaseModal v-model="isRevealed" readonly @cancel="cancel(false)">
<template #title> Confirm </template>
<div>
<template #title> Confirm {{ title }}</template>
<div class="mt-3">
<p>{{ text }}</p>
</div>
<div class="modal-action">
@ -11,5 +11,5 @@
</template>
<script setup lang="ts">
const { text, isRevealed, confirm, cancel } = useConfirm();
const { title, text, isRevealed, confirm, cancel } = useConfirm();
</script>

12
frontend/composables/use-confirm.ts
View file

@ -2,12 +2,14 @@ import { UseConfirmDialogRevealResult, UseConfirmDialogReturn } from "@vueuse/co
import { Ref } from "vue";
type Store = UseConfirmDialogReturn<any, boolean, boolean> & {
title: Ref<string>;
text: Ref<string>;
setup: boolean;
open: (text: string) => Promise<UseConfirmDialogRevealResult<boolean, boolean>>;
open: (title: string, text: string) => Promise<UseConfirmDialogRevealResult<boolean, boolean>>;
};
const store: Partial<Store> = {
title: ref("Confirm"),
text: ref("Are you sure you want to delete this item? "),
setup: false,
};
@ -30,14 +32,18 @@ export function useConfirm(): Store {
store.cancel = cancel;
}
async function openDialog(msg: string): Promise<UseConfirmDialogRevealResult<boolean, boolean>> {
async function openDialog(title: string, msg: string): Promise<UseConfirmDialogRevealResult<boolean, boolean>> {
if (!store.reveal) {
throw new Error("reveal is not defined");
}
if (!store.text) {
throw new Error("text is not defined");
}
if (!store.title) {
throw new Error("title is not defined");
}
store.title.value = title;
store.text.value = msg;
return await store.reveal();
}

6
frontend/pages/item/[id]/index/edit.vue
View file

@ -286,7 +286,7 @@
const confirm = useConfirm();
async function deleteAttachment(attachmentId: string) {
const confirmed = await confirm.open("Are you sure you want to delete this attachment?");
const confirmed = await confirm.open("Delete Attachment" , "Are you sure you want to delete this attachment?");
if (confirmed.isCanceled) {
return;
@ -521,7 +521,7 @@
<div class="flex items-end col-span-3">
<FormTextField v-model="field.textValue" label="Value" />
<div class="tooltip" data-tip="Delete">
<button class="btn btn-sm btn-square mb-2 ml-2" @click="item.fields.splice(idx, 1)">
<button class="btn btn-sm btn-square mb-2 ml-2 btn-error" @click="item.fields.splice(idx, 1)">
<Icon name="mdi-delete" />
</button>
</div>
@ -575,7 +575,7 @@
</p>
<div class="flex gap-2 justify-end">
<div class="tooltip" data-tip="Delete">
<button class="btn btn-sm btn-square" @click="deleteAttachment(attachment.id)">
<button class="btn btn-sm btn-square btn-error" @click="deleteAttachment(attachment.id)">
<Icon name="mdi-delete" />
</button>
</div>

4
frontend/pages/item/[id]/index/maintenance.vue
View file

@ -122,7 +122,7 @@
const confirm = useConfirm();
async function deleteEntry(id: string) {
const result = await confirm.open("Are you sure you want to delete this entry?");
const result = await confirm.open("Delete Maintenance Entry", "Are you sure you want to delete this entry?");
if (result.isCanceled) {
return;
}
@ -253,7 +253,7 @@
</template>
Edit
</BaseButton>
<BaseButton size="sm" @click="deleteEntry(e.id)">
<BaseButton class="btn-error" size="sm" @click="deleteEntry(e.id)">
<template #icon>
<Icon name="mdi-delete" />
</template>

6
frontend/pages/profile.vue
View file

@ -97,7 +97,7 @@
async function deleteProfile() {
const result = await confirm.open(
"Are you sure you want to delete your account? If you are the last member in your group all your data will be deleted. This action cannot be undone."
"Delete Account", "Are you sure you want to delete your account? If you are the last member in your group all your data will be deleted. This action cannot be undone."
);
if (result.isCanceled) {
@ -251,7 +251,7 @@
}
async function deleteNotifier(id: string) {
const result = await confirm.open("Are you sure you want to delete this notifier?");
const result = await confirm.open("Delete Notifier", "Are you sure you want to delete this notifier?");
if (result.isCanceled) {
return;
@ -367,7 +367,7 @@
<p class="mr-auto text-lg">{{ n.name }}</p>
<div class="flex gap-2 justify-end">
<div class="tooltip" data-tip="Delete">
<button class="btn btn-sm btn-square" @click="deleteNotifier(n.id)">
<button class="btn btn-sm btn-square btn-error" @click="deleteNotifier(n.id)">
<Icon name="mdi-delete" />
</button>
</div>

2
frontend/pages/tools.vue
View file

@ -125,7 +125,7 @@
async function ensureAssetIDs() {
const { isCanceled } = await confirm.open(
"Are you sure you want to ensure all assets have an ID? This can take a while and cannot be undone."
"Ensure Asset IDs", "Are you sure you want to ensure all assets have an ID? This can take a while and cannot be undone."
);
if (isCanceled) {