MIDNIGHT/enlight-lms
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: improve delete button UX and add confirmation dialog

Browse Source
This commit is contained in:
Rehan Ansari
2025-10-25 14:09:31 +05:30
parent 741cc4ccc7
commit ca2cc7bbda
1 changed files with 30 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/pages/Programs/ProgramForm.vue
View File

@@ -248,13 +248,12 @@
/> />
</template> </template>
<template #actions="{ close }"> <template #actions="{ close }">
<div class="flex justify-end space-x-2 group"> <div class="flex justify-end space-x-2">
<Button <Button
v-if="programName != 'new'" v-if="programName != 'new'"
@click="deleteProgram(close)" @click="deleteProgram(close)"
variant="outline" variant="outline"
theme="red" theme="red"
class="invisible group-hover:visible"
> >
<template #prefix> <template #prefix>
<Trash2 class="size-4 stroke-1.5" /> <Trash2 class="size-4 stroke-1.5" />
@@ -283,7 +282,7 @@ import {
ListRow, ListRow,
toast, toast,
} from 'frappe-ui' } from 'frappe-ui'
import { computed, ref, watch } from 'vue' import { computed, ref, watch, getCurrentInstance } from 'vue'
import { Plus, Trash2, TrendingUp } from 'lucide-vue-next' import { Plus, Trash2, TrendingUp } from 'lucide-vue-next'
import { Programs, Program } from '@/types/programs' import { Programs, Program } from '@/types/programs'
import { openSettings } from '@/utils' import { openSettings } from '@/utils'
@@ -300,6 +299,9 @@ const member = ref<string>('')
const showProgressDialog = ref(false) const showProgressDialog = ref(false)
const dirty = ref(false) const dirty = ref(false)
const app = getCurrentInstance()
const { $dialog } = app.appContext.config.globalProperties
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
programName: string | null programName: string | null
@@ -643,14 +645,31 @@ const removeNewProgramMembers = (
const deleteProgram = (close: () => void) => { const deleteProgram = (close: () => void) => {
if (props.programName == 'new') return if (props.programName == 'new') return
programs.value?.delete.submit(props.programName, { $dialog({
onSuccess() { title: __('Delete Program'),
toast.success(__('Program deleted successfully')) message: __(
close() 'Are you sure you want to delete this program? This action cannot be undone.'
}, ),
onError(err: any) { actions: [
toast.warning(__(err.messages?.[0] || err)) {
}, label: __('Delete'),
theme: 'red',
variant: 'solid',
onClick(closeDialog) {
programs.value?.delete.submit(props.programName, {
onSuccess() {
toast.success(__('Program deleted successfully'))
close()
closeDialog()
},
onError(err: any) {
toast.warning(__(err.messages?.[0] || err))
closeDialog()
},
})
},
},
],
}) })
} }