ISMAIL MASSERAN
574 lines
21 KiB
Vue
574 lines
21 KiB
Vue
<script lang="ts" setup>
|
|
import { onMounted, ref, watch } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import dayjs from 'dayjs'
|
|
import debounce from 'lodash/debounce'
|
|
import { Search, HatGlasses, SquarePen, Trash2, Eye, Shield, RotateCcw } from '@lucide/vue'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { CheckboxRoot, CheckboxControl, CheckboxLabel } from '@/components/ui/checkbox'
|
|
import { DialogRoot, DialogContent, DialogCloseTrigger } from '@/components/ui/dialog'
|
|
import { Lucide } from '@/components/ui/lucide'
|
|
import DataTable from '@/components/ui/usage/DataTable.vue'
|
|
import type { TableHeader } from '@/components/ui/usage/DataTable.vue'
|
|
import { usePermissions } from '@/composables/usePermissions'
|
|
import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage'
|
|
import { listRoles } from '@/modules/role/services/role.service'
|
|
import type { RoleListItem } from '@/modules/role/types/role.types'
|
|
import { useImpersonate } from '../composables/useImpersonate'
|
|
import { useDeletedUserList } from '../composables/useDeletedUserList'
|
|
import { useUserList } from '../composables/useUserList'
|
|
import {
|
|
assignUserRoles as assignUserRolesService,
|
|
deleteUser as deleteUserService,
|
|
restoreUser as restoreUserService,
|
|
} from '../services/user.service'
|
|
import type { UserRole, UserListItem } from '../types/user.types'
|
|
import { AlertRoot, AlertTitle, AlertDescription } from '@/components/ui/alert'
|
|
import type { BadgeVariants } from '@/components/ui/styles/badge.styles'
|
|
|
|
type StatusFilterChip = {
|
|
label: string
|
|
value: string
|
|
variant: BadgeVariants['variant']
|
|
}
|
|
|
|
const STATUS_FILTER_CHIPS: StatusFilterChip[] = [
|
|
{ label: 'Semua', value: '', variant: 'ghost' },
|
|
{ label: 'Active', value: 'active', variant: 'success' },
|
|
{ label: 'Inactive', value: 'inactive', variant: 'danger' },
|
|
{ label: 'Pending', value: 'pending', variant: 'pending' },
|
|
]
|
|
|
|
const router = useRouter()
|
|
const { hasPermission } = usePermissions()
|
|
|
|
const deleteConfirmationOpen = ref(false)
|
|
const userToDelete = ref<UserListItem | null>(null)
|
|
const deleting = ref(false)
|
|
const deleteError = ref<string | null>(null)
|
|
|
|
const assignRolesOpen = ref(false)
|
|
const userToAssignRoles = ref<UserListItem | null>(null)
|
|
const availableRoles = ref<RoleListItem[]>([])
|
|
const selectedRoleIds = ref<Set<string>>(new Set())
|
|
const loadingRoles = ref(false)
|
|
const savingRoles = ref(false)
|
|
const assignRolesError = ref<string | null>(null)
|
|
|
|
const restoreConfirmationOpen = ref(false)
|
|
const userToRestore = ref<UserListItem | null>(null)
|
|
const restoring = ref(false)
|
|
const restoreError = ref<string | null>(null)
|
|
|
|
function goToEditUser(userId: string) {
|
|
router.push({ name: 'edit-user', params: { id: userId } })
|
|
}
|
|
|
|
function goToCreateUser() {
|
|
router.push({ name: 'create-user' })
|
|
}
|
|
|
|
function goToViewUser(userId: string) {
|
|
router.push({ name: 'view-user', params: { id: userId } })
|
|
}
|
|
|
|
function formatUserRoles(roles: UserRole[] | undefined): string {
|
|
return roles?.map((role) => role.name).join(', ') || '-'
|
|
}
|
|
|
|
function statusBadgeVariant(status: string) {
|
|
if (status === 'active') return 'success'
|
|
if (status === 'inactive') return 'danger'
|
|
return 'pending'
|
|
}
|
|
|
|
function isStatusFilterActive(value: string) {
|
|
return statusFilter.value === value
|
|
}
|
|
|
|
function setStatusFilter(value: string) {
|
|
statusFilter.value = value
|
|
}
|
|
|
|
function formatDeletedAt(value: string | null | undefined): string {
|
|
if (!value) return '-'
|
|
return dayjs(value).format('DD MMM YYYY, HH:mm')
|
|
}
|
|
|
|
function openDeleteConfirmation(user: UserListItem) {
|
|
userToDelete.value = user
|
|
deleteError.value = null
|
|
deleteConfirmationOpen.value = true
|
|
}
|
|
|
|
async function confirmDelete() {
|
|
if (!userToDelete.value || deleting.value) {
|
|
return
|
|
}
|
|
|
|
deleting.value = true
|
|
deleteError.value = null
|
|
|
|
try {
|
|
await deleteUserService(userToDelete.value.id)
|
|
deleteConfirmationOpen.value = false
|
|
userToDelete.value = null
|
|
await Promise.all([fetchUsers(page.value), fetchDeletedUsers(deletedPage.value)])
|
|
} catch (err) {
|
|
deleteError.value = getApiErrorMessage(err, 'Gagal mengpadam akaun pengguna.')
|
|
} finally {
|
|
deleting.value = false
|
|
}
|
|
}
|
|
|
|
async function loadAvailableRoles() {
|
|
if (availableRoles.value.length) {
|
|
return
|
|
}
|
|
|
|
loadingRoles.value = true
|
|
assignRolesError.value = null
|
|
|
|
try {
|
|
const response = await listRoles()
|
|
availableRoles.value = response.data.filter((role) => role.guard_name === 'api')
|
|
} catch (err) {
|
|
assignRolesError.value = getApiErrorMessage(err, 'Gagal memuatkan senarai peranan.')
|
|
availableRoles.value = []
|
|
} finally {
|
|
loadingRoles.value = false
|
|
}
|
|
}
|
|
|
|
async function openAssignRolesDialog(user: UserListItem) {
|
|
userToAssignRoles.value = user
|
|
selectedRoleIds.value = new Set(user.roles?.map((role) => role.id) ?? [])
|
|
assignRolesError.value = null
|
|
assignRolesOpen.value = true
|
|
await loadAvailableRoles()
|
|
}
|
|
|
|
function setRoleChecked(roleId: string, checked: boolean) {
|
|
const next = new Set(selectedRoleIds.value)
|
|
if (checked) {
|
|
next.add(roleId)
|
|
} else {
|
|
next.delete(roleId)
|
|
}
|
|
selectedRoleIds.value = next
|
|
}
|
|
|
|
async function confirmAssignRoles() {
|
|
if (!userToAssignRoles.value || savingRoles.value) {
|
|
return
|
|
}
|
|
|
|
if (!selectedRoleIds.value.size) {
|
|
assignRolesError.value = 'Sila pilih sekurang-kurangnya satu peranan.'
|
|
return
|
|
}
|
|
|
|
savingRoles.value = true
|
|
assignRolesError.value = null
|
|
|
|
try {
|
|
await assignUserRolesService(
|
|
userToAssignRoles.value.id,
|
|
Array.from(selectedRoleIds.value),
|
|
)
|
|
assignRolesOpen.value = false
|
|
userToAssignRoles.value = null
|
|
await fetchUsers(page.value)
|
|
} catch (err) {
|
|
assignRolesError.value = getApiErrorMessage(err, 'Gagal menetapkan peranan pengguna.')
|
|
} finally {
|
|
savingRoles.value = false
|
|
}
|
|
}
|
|
|
|
function openRestoreConfirmation(user: UserListItem) {
|
|
userToRestore.value = user
|
|
restoreError.value = null
|
|
restoreConfirmationOpen.value = true
|
|
}
|
|
|
|
async function confirmRestore() {
|
|
if (!userToRestore.value || restoring.value) {
|
|
return
|
|
}
|
|
|
|
restoring.value = true
|
|
restoreError.value = null
|
|
|
|
try {
|
|
await restoreUserService(userToRestore.value.id)
|
|
restoreConfirmationOpen.value = false
|
|
userToRestore.value = null
|
|
await Promise.all([fetchUsers(page.value), fetchDeletedUsers(deletedPage.value)])
|
|
} catch (err) {
|
|
restoreError.value = getApiErrorMessage(err, 'Gagal memulihkan akaun pengguna.')
|
|
} finally {
|
|
restoring.value = false
|
|
}
|
|
}
|
|
|
|
const headers: TableHeader[] = [
|
|
{ title: 'Bil.', key: '#', sortable: false },
|
|
{ title: 'Name', key: 'name', sortable: true },
|
|
{ title: 'Emel', key: 'email', sortable: true },
|
|
{ title: 'Jawatan', key: 'position', sortable: true },
|
|
{ title: 'No. Anggota', key: 'member_number', sortable: true, align: 'center' },
|
|
{
|
|
title: 'Peranan',
|
|
key: 'roles',
|
|
sortable: false,
|
|
exportValue: (item) => formatUserRoles(item.roles),
|
|
},
|
|
{ title: 'Status', key: 'status', sortable: true },
|
|
{ title: 'Tindakan', key: 'actions', sortable: false },
|
|
]
|
|
|
|
const deletedHeaders: TableHeader[] = [
|
|
{ title: 'Bil.', key: '#', sortable: false },
|
|
{ title: 'Name', key: 'name', sortable: true },
|
|
{ title: 'Emel', key: 'email', sortable: true },
|
|
{ title: 'Jawatan', key: 'position', sortable: true },
|
|
{ title: 'No. Anggota', key: 'member_number', sortable: true, align: 'center' },
|
|
{
|
|
title: 'Peranan',
|
|
key: 'roles',
|
|
sortable: false,
|
|
exportValue: (item) => formatUserRoles(item.roles),
|
|
},
|
|
{ title: 'Status', key: 'status', sortable: true },
|
|
{ title: 'Dipadam Pada', key: 'deleted_at', sortable: true },
|
|
{ title: 'Tindakan', key: 'actions', sortable: false },
|
|
]
|
|
|
|
const {
|
|
users,
|
|
loading,
|
|
error,
|
|
search,
|
|
statusFilter,
|
|
sortBy,
|
|
page,
|
|
itemsPerPage,
|
|
pagination,
|
|
handleSortUpdate,
|
|
fetchUsers,
|
|
} = useUserList()
|
|
|
|
const {
|
|
users: deletedUsers,
|
|
loading: deletedLoading,
|
|
error: deletedError,
|
|
search: deletedSearch,
|
|
statusFilter: deletedStatusFilter,
|
|
sortBy: deletedSortBy,
|
|
page: deletedPage,
|
|
itemsPerPage: deletedItemsPerPage,
|
|
pagination: deletedPagination,
|
|
handleSortUpdate: handleDeletedSortUpdate,
|
|
fetchUsers: fetchDeletedUsers,
|
|
} = useDeletedUserList({ autoWatchFilters: false, autoFetchOnMount: false })
|
|
|
|
const debouncedDeletedFetch = debounce(() => {
|
|
fetchDeletedUsers(1)
|
|
}, 400)
|
|
|
|
watch([search, statusFilter], () => {
|
|
deletedSearch.value = search.value
|
|
deletedStatusFilter.value = statusFilter.value
|
|
debouncedDeletedFetch()
|
|
})
|
|
|
|
const {
|
|
showImpersonateButton,
|
|
canImpersonateUser,
|
|
impersonateButtonTitle,
|
|
impersonating,
|
|
loading: impersonateLoading,
|
|
refreshImpersonationStatus,
|
|
impersonateUser,
|
|
} = useImpersonate()
|
|
|
|
onMounted(() => {
|
|
refreshImpersonationStatus()
|
|
deletedSearch.value = search.value
|
|
deletedStatusFilter.value = statusFilter.value
|
|
fetchDeletedUsers(1)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full space-y-6">
|
|
<div>
|
|
<h2 class="text-lg font-medium">Senarai Pengguna</h2>
|
|
<p class="mt-1 text-sm opacity-70">Urus dan semak pengguna koperasi.</p>
|
|
</div>
|
|
<AlertRoot v-if="error" class="mt-6" variant="danger">
|
|
<AlertTitle>Error</AlertTitle>
|
|
<AlertDescription>{{ error }}</AlertDescription>
|
|
</AlertRoot>
|
|
|
|
<DataTable :headers="headers" :items="users" :loading="loading" :pagination="pagination" :current-sort="sortBy"
|
|
show-pagination exportable export-file-name="users" v-model:page="page" v-model:items-per-page="itemsPerPage"
|
|
@update:sort-by="handleSortUpdate">
|
|
<template #toolbar>
|
|
<div class="flex w-full flex-col gap-3">
|
|
<div class="flex w-full flex-wrap items-center gap-3">
|
|
<div class="relative w-full max-w-md flex-1">
|
|
<Search
|
|
class="pointer-events-none absolute top-1/2 left-3 z-10 size-4 -translate-y-1/2 text-foreground/50"
|
|
aria-hidden="true" />
|
|
<Input v-model="search" type="search" placeholder="Search name, email, IC, phone, role..."
|
|
class="w-full pl-9" aria-label="Search users" />
|
|
</div>
|
|
<Button v-if="hasPermission('daftar pengguna baru')" type="button" variant="primary" look="outline"
|
|
@click="goToCreateUser">
|
|
Daftar Pengguna
|
|
</Button>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<span class="text-sm opacity-70">Status:</span>
|
|
<Badge v-for="chip in STATUS_FILTER_CHIPS" :key="chip.value || 'all'" :variant="chip.variant"
|
|
:look="isStatusFilterActive(chip.value) ? 'filled' : 'outline'" class="capitalize" role="button"
|
|
tabindex="0" :aria-pressed="isStatusFilterActive(chip.value)" @click="setStatusFilter(chip.value)"
|
|
@keydown.enter="setStatusFilter(chip.value)">
|
|
{{ chip.label }}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template #item.name="{ item }">
|
|
<div class="flex items-center gap-2">
|
|
<!-- profile image -->
|
|
<img v-if="item.image_url" :src="item.image_url" alt="Profile Image" class="size-10 rounded-full" />
|
|
<div v-else class="size-10 rounded-full bg-gray-200 flex items-center justify-center">
|
|
<span class="text-gray-500">{{ item.name.charAt(0) }}</span>
|
|
</div>
|
|
|
|
<!-- name -->
|
|
<span class="font-medium">{{ item.name }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<template #item.email="{ item }">
|
|
<span class="lowercase">{{ item.email }}</span>
|
|
</template>
|
|
|
|
<template #item.roles="{ item }">
|
|
{{ formatUserRoles(item.roles) }}
|
|
</template>
|
|
|
|
<template #item.member_number="{ item }">
|
|
<span class="text-center">{{ item.member_number }}</span>
|
|
</template>
|
|
|
|
<!-- centre align status -->
|
|
<template #item.status="{ item }">
|
|
<Badge :variant="statusBadgeVariant(item.status)" class="capitalize text-center">
|
|
{{ item.status }}
|
|
</Badge>
|
|
</template>
|
|
|
|
<template #item.actions="{ item }">
|
|
<div class="flex items-center">
|
|
<Button v-if="hasPermission('lihat peranan')" type="button" variant="ghost" size="sm"
|
|
class="bg-purple-600 text-white disabled:opacity-50" :disabled="savingRoles"
|
|
:title="savingRoles ? 'Menyimpan perubahan...' : 'Tetapkan peranan'"
|
|
@click="openAssignRolesDialog(item as UserListItem)"> Urus Peranan
|
|
<Shield class="size-4" aria-hidden="true" />
|
|
</Button>
|
|
<Button v-if="hasPermission('lihat pengguna')" type="button" variant="ghost" size="sm"
|
|
class="bg-green-600 text-white disabled:opacity-50" :disabled="savingRoles"
|
|
:title="savingRoles ? 'Menyimpan perubahan...' : 'Lihat profil'" @click="goToViewUser(item.id)">
|
|
<Eye class="size-4" aria-hidden="true" />
|
|
</Button>
|
|
<Button v-if="hasPermission('kemaskini pengguna')" type="button" variant="ghost" size="sm"
|
|
class="bg-yellow-600 text-white disabled:opacity-50" :disabled="savingRoles"
|
|
:title="savingRoles ? 'Menyimpan perubahan...' : 'Kemaskini pengguna'" @click="goToEditUser(item.id)">
|
|
<SquarePen class="size-4" aria-hidden="true" />
|
|
</Button>
|
|
<Button v-if="hasPermission('padam akaun pengguna')" type="button" variant="ghost" size="sm"
|
|
class="bg-red-600 text-white disabled:opacity-50" :disabled="deleting"
|
|
@click="openDeleteConfirmation(item as UserListItem)">
|
|
<Trash2 class="size-4" aria-hidden="true" />
|
|
</Button>
|
|
<Button v-if="showImpersonateButton(item as UserListItem)" type="button" variant="ghost" size="sm"
|
|
class="bg-orange-600 text-white disabled:opacity-50"
|
|
:disabled="!canImpersonateUser(item as UserListItem) || impersonateLoading || impersonating"
|
|
:title="impersonateButtonTitle(item as UserListItem)" @click="impersonateUser(item as UserListItem)">
|
|
<HatGlasses class="size-4" aria-hidden="true" />
|
|
</Button>
|
|
|
|
</div>
|
|
</template>
|
|
</DataTable>
|
|
|
|
<!-- Start of deleted users table -->
|
|
<div class="space-y-4 border-t border-foreground/10 pt-8">
|
|
<div>
|
|
<h3 class="text-lg font-medium">Pengguna Dipadam</h3>
|
|
<p class="mt-1 text-sm opacity-70">Pengguna yang telah dipadam dan boleh dipulihkan.</p>
|
|
</div>
|
|
|
|
<AlertRoot v-if="deletedError" variant="danger">
|
|
<AlertTitle>Error</AlertTitle>
|
|
<AlertDescription>{{ deletedError }}</AlertDescription>
|
|
</AlertRoot>
|
|
|
|
<DataTable :headers="deletedHeaders" :items="deletedUsers" :loading="deletedLoading"
|
|
:pagination="deletedPagination" :current-sort="deletedSortBy" show-pagination exportable
|
|
export-file-name="deleted-users" v-model:page="deletedPage" v-model:items-per-page="deletedItemsPerPage"
|
|
@update:sort-by="handleDeletedSortUpdate">
|
|
<template #item.name="{ item }">
|
|
<div class="flex items-center gap-2">
|
|
<img v-if="item.image_url" :src="item.image_url" alt="Profile Image" class="size-10 rounded-full" />
|
|
<div v-else class="flex size-10 items-center justify-center rounded-full bg-gray-200">
|
|
<span class="text-gray-500">{{ item.name.charAt(0) }}</span>
|
|
</div>
|
|
<span class="font-medium">{{ item.name }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<template #item.email="{ item }">
|
|
<span class="lowercase">{{ item.email }}</span>
|
|
</template>
|
|
|
|
<template #item.roles="{ item }">
|
|
{{ formatUserRoles(item.roles) }}
|
|
</template>
|
|
|
|
<template #item.member_number="{ item }">
|
|
<span class="text-center">{{ item.member_number ?? '-' }}</span>
|
|
</template>
|
|
|
|
<template #item.status="{ item }">
|
|
<Badge :variant="statusBadgeVariant(item.status)" class="capitalize text-center">
|
|
{{ item.status }}
|
|
</Badge>
|
|
</template>
|
|
|
|
<template #item.deleted_at="{ item }">
|
|
{{ formatDeletedAt(item.deleted_at) }}
|
|
</template>
|
|
|
|
<template #item.actions="{ item }">
|
|
<div class="flex items-center">
|
|
<Button v-if="hasPermission('padam akaun pengguna')" type="button" variant="ghost" size="sm"
|
|
class="bg-blue-600 text-white disabled:opacity-50" :disabled="restoring" title="Pulihkan pengguna"
|
|
@click="openRestoreConfirmation(item as UserListItem)">
|
|
<RotateCcw class="size-4" aria-hidden="true" />
|
|
Pulihkan
|
|
</Button>
|
|
</div>
|
|
</template>
|
|
</DataTable>
|
|
</div>
|
|
|
|
<!-- Assign roles dialog -->
|
|
<DialogRoot :open="assignRolesOpen" @openChange="(details) => (assignRolesOpen = details.open)">
|
|
<DialogContent>
|
|
<div class="p-5">
|
|
<div class="text-center text-2xl font-medium">Tetapkan Peranan</div>
|
|
<div v-if="userToAssignRoles" class="mt-2 text-center opacity-70">
|
|
Pilih peranan untuk
|
|
<span class="font-medium">{{ userToAssignRoles.name }}</span>
|
|
</div>
|
|
|
|
<div v-if="assignRolesError" class="mt-4 text-center text-sm text-danger">
|
|
{{ assignRolesError }}
|
|
</div>
|
|
|
|
<div class="mt-5 max-h-80 overflow-auto rounded-lg border border-foreground/10 p-3">
|
|
<div v-if="loadingRoles" class="py-6 text-center opacity-70">
|
|
Memuatkan peranan...
|
|
</div>
|
|
<div v-else-if="!availableRoles.length" class="py-6 text-center opacity-70">
|
|
Tiada peranan ditemui
|
|
</div>
|
|
<div v-else class="grid grid-cols-1 gap-2">
|
|
<CheckboxRoot v-for="role in availableRoles" :key="role.id" :checked="selectedRoleIds.has(role.id)"
|
|
:disabled="savingRoles" @checked-change="({ checked }) => setRoleChecked(role.id, checked === true)">
|
|
<CheckboxControl />
|
|
<CheckboxLabel>
|
|
<span class="font-medium">{{ role.name }}</span>
|
|
<span v-if="role.fullname" class="ml-2 opacity-70">({{ role.fullname }})</span>
|
|
</CheckboxLabel>
|
|
</CheckboxRoot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-5 pb-8 text-center">
|
|
<DialogCloseTrigger class="mr-2 w-24" :disabled="savingRoles">
|
|
Batal
|
|
</DialogCloseTrigger>
|
|
<Button class="w-24" type="button" variant="primary" look="outline" :disabled="savingRoles || loadingRoles"
|
|
@click="confirmAssignRoles">
|
|
{{ savingRoles ? 'Menyimpan...' : 'Simpan' }}
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</DialogRoot>
|
|
|
|
<!-- Delete confirmation dialog -->
|
|
<DialogRoot :open="deleteConfirmationOpen" @openChange="(details) => (deleteConfirmationOpen = details.open)">
|
|
<DialogContent>
|
|
<div class="p-5 text-center">
|
|
<Lucide class="text-danger mx-auto mt-3 size-16 stroke-1" icon="CircleX" />
|
|
<div class="mt-5 text-2xl font-medium">Adakah anda yakin?</div>
|
|
<div class="mt-2 opacity-70">
|
|
Adakah anda benar-benar mahu menghapus
|
|
<span v-if="userToDelete" class="font-medium">{{ userToDelete.name }}</span>?
|
|
<br />
|
|
Proses ini tidak boleh dibatalkan.
|
|
</div>
|
|
<div v-if="deleteError" class="mt-4 text-sm text-danger">
|
|
{{ deleteError }}
|
|
</div>
|
|
</div>
|
|
<div class="px-5 pb-8 text-center">
|
|
<DialogCloseTrigger class="mr-2 w-24" :disabled="deleting">
|
|
Batal
|
|
</DialogCloseTrigger>
|
|
<Button class="w-24" type="button" variant="danger" look="outline" :disabled="deleting"
|
|
@click="confirmDelete">
|
|
{{ deleting ? 'Menghapus...' : 'Hapus' }}
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</DialogRoot>
|
|
|
|
<!-- Restore confirmation dialog -->
|
|
<DialogRoot :open="restoreConfirmationOpen" @openChange="(details) => (restoreConfirmationOpen = details.open)">
|
|
<DialogContent>
|
|
<div class="p-5 text-center">
|
|
<Lucide class="mx-auto mt-3 size-16 stroke-1 text-primary" icon="RotateCcw" />
|
|
<div class="mt-5 text-2xl font-medium">Pulihkan pengguna?</div>
|
|
<div class="mt-2 opacity-70">
|
|
Adakah anda mahu memulihkan
|
|
<span v-if="userToRestore" class="font-medium">{{ userToRestore.name }}</span>?
|
|
</div>
|
|
<div v-if="restoreError" class="mt-4 text-sm text-danger">
|
|
{{ restoreError }}
|
|
</div>
|
|
</div>
|
|
<div class="px-5 pb-8 text-center">
|
|
<DialogCloseTrigger class="mr-2 w-24" :disabled="restoring">
|
|
Batal
|
|
</DialogCloseTrigger>
|
|
<Button class="w-24" type="button" variant="primary" look="outline" :disabled="restoring"
|
|
@click="confirmRestore">
|
|
{{ restoring ? 'Memulihkan...' : 'Pulihkan' }}
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</DialogRoot>
|
|
</div>
|
|
</template>
|