feat: remove unused Business Types and Plans components and their related files
This commit is contained in:
Yoga Pangestu
parent
d8edede37a
commit
bc05551f89
@ -1,8 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
BriefcaseBusiness,
|
||||
CreditCard,
|
||||
Database,
|
||||
FolderKanban,
|
||||
LayoutDashboard
|
||||
} from "@lucide/vue"
|
||||
@ -33,8 +30,6 @@ const groups = [
|
||||
icon: FolderKanban,
|
||||
items: [
|
||||
{ title: 'Dashboard', url: '/admin/dashboard', icon: LayoutDashboard },
|
||||
{ title: 'Jenis Bisnis', url: '/admin/business-types', icon: BriefcaseBusiness },
|
||||
{ title: 'Plans', url: '/admin/plans', icon: CreditCard },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
@ -1,130 +0,0 @@
|
||||
import type { ColumnDef, FilterFn } from '@tanstack/vue-table'
|
||||
import { ArrowUpDown, Pencil, Trash2 } from '@lucide/vue'
|
||||
import { h } from 'vue'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from '@/components/ui/tooltip'
|
||||
|
||||
export interface BusinessType {
|
||||
id: string
|
||||
name: string
|
||||
description: string | null
|
||||
is_active: boolean | number
|
||||
}
|
||||
|
||||
export function copy(id: string) {
|
||||
navigator.clipboard.writeText(id)
|
||||
}
|
||||
|
||||
const nameFilter: FilterFn<BusinessType> = (row, _columnId, filterValue) => {
|
||||
const search = (filterValue as string).toLowerCase()
|
||||
const name = (row.original.name as string).toLowerCase()
|
||||
return name.includes(search)
|
||||
}
|
||||
|
||||
const booleanFilter: FilterFn<BusinessType> = (row, columnId, filterValue) => {
|
||||
if (!filterValue || filterValue === '') return true
|
||||
const raw = row.original[columnId as keyof BusinessType]
|
||||
const cellValue = raw === true || raw === 1 || raw === '1'
|
||||
const filterBool = filterValue === 'true'
|
||||
return cellValue === filterBool
|
||||
}
|
||||
|
||||
export function getColumns(callbacks: {
|
||||
onEdit: (businessType: BusinessType) => void
|
||||
onDelete: (businessType: BusinessType) => void
|
||||
onToggleStatus: (businessType: BusinessType, value: boolean) => void
|
||||
}): ColumnDef<BusinessType>[] {
|
||||
return [
|
||||
{
|
||||
id: 'name_search',
|
||||
accessorFn: row => row.name,
|
||||
header: ({ column }) => {
|
||||
return h(Button, {
|
||||
variant: 'ghost',
|
||||
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
|
||||
}, () => ['Nama', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])
|
||||
},
|
||||
cell: ({ row }) => h('div', { class: 'font-medium' }, row.original.name),
|
||||
filterFn: nameFilter,
|
||||
enableHiding: false,
|
||||
},
|
||||
{
|
||||
accessorKey: 'description',
|
||||
header: 'Deskripsi',
|
||||
cell: ({ row }) => {
|
||||
const desc = row.getValue('description') as string | null
|
||||
return h('div', { class: 'text-muted-foreground truncate max-w-[300px]' }, desc ?? '-')
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'is_active',
|
||||
header: 'Status',
|
||||
filterFn: booleanFilter,
|
||||
cell: ({ row }) => {
|
||||
const raw = row.getValue('is_active')
|
||||
const isActive = raw === true || raw === 1 || raw === '1'
|
||||
const businessType = row.original
|
||||
return h('div', { class: 'flex items-center gap-2' }, [
|
||||
h(Switch, {
|
||||
modelValue: isActive,
|
||||
'onUpdate:modelValue': (val: boolean) => callbacks.onToggleStatus(businessType, val),
|
||||
}),
|
||||
h(Badge, {
|
||||
variant: 'outline',
|
||||
class: isActive
|
||||
? 'border-emerald-500 text-emerald-600 bg-emerald-50'
|
||||
: 'border-red-500 text-red-600 bg-red-50',
|
||||
}, () => isActive ? 'Aktif' : 'Nonaktif'),
|
||||
])
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
header: ' ',
|
||||
size: 0,
|
||||
minSize: 0,
|
||||
enableHiding: false,
|
||||
cell: ({ row }) => {
|
||||
const businessType = row.original
|
||||
|
||||
return h(TooltipProvider, null, () =>
|
||||
h('div', { class: 'flex items-center gap-1' }, [
|
||||
h(Tooltip, null, () => [
|
||||
h(TooltipTrigger, { asChild: true }, () =>
|
||||
h(Button, {
|
||||
variant: 'ghost',
|
||||
size: 'icon',
|
||||
class: 'h-8 w-8 text-yellow-500',
|
||||
onClick: () => callbacks.onEdit(businessType),
|
||||
}, () =>
|
||||
h(Pencil, { class: 'h-4 w-4' })
|
||||
)
|
||||
),
|
||||
h(TooltipContent, null, () => 'Edit'),
|
||||
]),
|
||||
h(Tooltip, null, () => [
|
||||
h(TooltipTrigger, { asChild: true }, () =>
|
||||
h(Button, {
|
||||
variant: 'ghost',
|
||||
size: 'icon',
|
||||
class: 'h-8 w-8 text-destructive',
|
||||
onClick: () => callbacks.onDelete(businessType),
|
||||
}, () =>
|
||||
h(Trash2, { class: 'h-4 w-4' })
|
||||
)
|
||||
),
|
||||
h(TooltipContent, null, () => 'Hapus'),
|
||||
]),
|
||||
])
|
||||
)
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
@ -1,320 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import AppSidebar from '@/components/AppSidebar.vue'
|
||||
import SiteHeader from '@/components/SiteHeader.vue'
|
||||
import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar'
|
||||
|
||||
import { ChevronDown, Loader2, Plus, X } from '@lucide/vue'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { toast } from 'vue-sonner'
|
||||
|
||||
import DataTable from '@/components/data-table/DataTable.vue'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '@/components/ui/dialog'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import {
|
||||
Field,
|
||||
FieldGroup,
|
||||
FieldLabel,
|
||||
} from '@/components/ui/field'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { type BusinessType, getColumns } from './columns'
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
|
||||
const { data: businessTypes, status, refresh } = useFetch<BusinessType[]>(`${config.public.apiBase}/business-types`)
|
||||
|
||||
const tableRef = ref<InstanceType<typeof DataTable>>()
|
||||
|
||||
// --- Dialog states ---
|
||||
const formOpen = ref(false)
|
||||
const deleteOpen = ref(false)
|
||||
|
||||
// --- Form state ---
|
||||
type FormMode = 'create' | 'edit'
|
||||
|
||||
const formMode = ref<FormMode>('create')
|
||||
const selectedBusinessType = ref<BusinessType | null>(null)
|
||||
|
||||
interface FormData {
|
||||
name: string
|
||||
description: string
|
||||
}
|
||||
|
||||
const form = ref<FormData>({ name: '', description: '' })
|
||||
|
||||
// --- Loading states ---
|
||||
const formLoading = ref(false)
|
||||
const deleteLoading = ref(false)
|
||||
|
||||
// --- Computed ---
|
||||
const formTitle = computed(() => formMode.value === 'create' ? 'Tambah Jenis Bisnis' : 'Edit Jenis Bisnis')
|
||||
|
||||
// --- Table callbacks ---
|
||||
function openCreateForm() {
|
||||
formMode.value = 'create'
|
||||
selectedBusinessType.value = null
|
||||
form.value = { name: '', description: '' }
|
||||
formOpen.value = true
|
||||
}
|
||||
|
||||
function handleEdit(bt: BusinessType) {
|
||||
formMode.value = 'edit'
|
||||
selectedBusinessType.value = bt
|
||||
form.value = {
|
||||
name: bt.name,
|
||||
description: bt.description ?? '',
|
||||
}
|
||||
formOpen.value = true
|
||||
}
|
||||
|
||||
function handleDelete(bt: BusinessType) {
|
||||
selectedBusinessType.value = bt
|
||||
deleteOpen.value = true
|
||||
}
|
||||
|
||||
async function handleToggleStatus(bt: BusinessType, value: boolean) {
|
||||
try {
|
||||
await $fetch(`${config.public.apiBase}/business-types/${bt.id}/active`, {
|
||||
method: 'PATCH',
|
||||
body: { is_active: value },
|
||||
})
|
||||
if (businessTypes.value) {
|
||||
businessTypes.value = businessTypes.value.map(b =>
|
||||
b.id === bt.id ? { ...b, is_active: value } : b
|
||||
)
|
||||
}
|
||||
toast.success(`Jenis bisnis berhasil di${value ? 'aktifkan' : 'nonaktifkan'}`)
|
||||
} catch (e: any) {
|
||||
toast.error(e?.data?.message ?? 'Gagal mengubah status')
|
||||
}
|
||||
}
|
||||
|
||||
const columns = computed(() => getColumns({ onEdit: handleEdit, onDelete: handleDelete, onToggleStatus: handleToggleStatus }))
|
||||
|
||||
// --- CRUD operations ---
|
||||
async function handleFormSubmit() {
|
||||
if (!form.value.name.trim()) {
|
||||
toast.error('Nama wajib diisi')
|
||||
return
|
||||
}
|
||||
|
||||
formLoading.value = true
|
||||
try {
|
||||
if (formMode.value === 'create') {
|
||||
await $fetch(`${config.public.apiBase}/business-types`, {
|
||||
method: 'POST',
|
||||
body: {
|
||||
name: form.value.name.trim(),
|
||||
description: form.value.description.trim() || null,
|
||||
},
|
||||
})
|
||||
toast.success('Jenis bisnis berhasil ditambahkan')
|
||||
} else {
|
||||
await $fetch(`${config.public.apiBase}/business-types/${selectedBusinessType.value!.id}`, {
|
||||
method: 'PUT',
|
||||
body: {
|
||||
name: form.value.name.trim(),
|
||||
description: form.value.description.trim() || null,
|
||||
},
|
||||
})
|
||||
toast.success('Jenis bisnis berhasil diperbarui')
|
||||
}
|
||||
|
||||
formOpen.value = false
|
||||
await refresh()
|
||||
} catch (e: any) {
|
||||
toast.error(e?.data?.message ?? 'Gagal menyimpan jenis bisnis')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleConfirmDelete() {
|
||||
if (!selectedBusinessType.value) return
|
||||
|
||||
deleteLoading.value = true
|
||||
try {
|
||||
await $fetch(`${config.public.apiBase}/business-types/${selectedBusinessType.value.id}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
toast.success('Jenis bisnis berhasil dihapus')
|
||||
deleteOpen.value = false
|
||||
selectedBusinessType.value = null
|
||||
await refresh()
|
||||
} catch (e: any) {
|
||||
toast.error(e?.data?.message ?? 'Gagal menghapus jenis bisnis')
|
||||
} finally {
|
||||
deleteLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// --- Filters ---
|
||||
function getStatusFilter(table: any) {
|
||||
const val = table.getColumn('is_active')?.getFilterValue()
|
||||
if (val === true || val === 'true' || val === 1) return 'true'
|
||||
if (val === false || val === 'false' || val === 0) return 'false'
|
||||
return 'all'
|
||||
}
|
||||
|
||||
function hasActiveFilter(table: any) {
|
||||
const search = table.getColumn('name_search')?.getFilterValue()
|
||||
const status = table.getColumn('is_active')?.getFilterValue()
|
||||
return (search && search !== '') || (status !== '' && status !== undefined && status !== null)
|
||||
}
|
||||
|
||||
function resetFilters(table: any) {
|
||||
table.getColumn('name_search')?.setFilterValue('')
|
||||
table.getColumn('is_active')?.setFilterValue('')
|
||||
}
|
||||
|
||||
// --- Reset on dialog close ---
|
||||
watch(formOpen, (val) => {
|
||||
if (!val) {
|
||||
form.value = { name: '', description: '' }
|
||||
selectedBusinessType.value = null
|
||||
}
|
||||
})
|
||||
|
||||
watch(deleteOpen, (val) => {
|
||||
if (!val) selectedBusinessType.value = null
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SidebarProvider :style="{
|
||||
'--sidebar-width': 'calc(var(--spacing) * 72)',
|
||||
'--header-height': 'calc(var(--spacing) * 12)',
|
||||
}">
|
||||
<AppSidebar variant="inset" />
|
||||
<SidebarInset>
|
||||
<SiteHeader />
|
||||
<div class="flex flex-1 flex-col">
|
||||
<div class="@container/main flex flex-1 flex-col gap-2">
|
||||
<div class="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
|
||||
<div class="px-4 lg:px-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-2xl font-bold">Jenis Bisnis</h1>
|
||||
<Button size="sm" @click="openCreateForm">
|
||||
<Plus class="h-4 w-4 mr-1" />
|
||||
Tambah
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 lg:px-6">
|
||||
<DataTable ref="tableRef" :columns="columns" :data="businessTypes ?? []" :loading="status === 'pending'">
|
||||
<template #filters="{ table }">
|
||||
<div class="flex items-center gap-2 py-4">
|
||||
<Input class="max-w-sm" placeholder="Cari nama..."
|
||||
:model-value="(table.getColumn('name_search')?.getFilterValue() as string) ?? ''"
|
||||
@update:model-value="table.getColumn('name_search')?.setFilterValue($event)" />
|
||||
<Select :model-value="getStatusFilter(table)"
|
||||
@update:model-value="table.getColumn('is_active')?.setFilterValue($event === 'all' ? '' : $event)">
|
||||
<SelectTrigger class="hidden h-8 w-auto md:flex">
|
||||
<SelectValue placeholder="Semua Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Semua Status</SelectItem>
|
||||
<SelectItem value="true">Aktif</SelectItem>
|
||||
<SelectItem value="false">Nonaktif</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button v-if="hasActiveFilter(table)" variant="ghost" size="sm" class="h-8"
|
||||
@click="resetFilters(table)">
|
||||
<X class="h-4 w-4 mr-1" />
|
||||
Reset
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="outline" class="ml-auto md:hidden">
|
||||
Filter
|
||||
<ChevronDown class="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>Status</DropdownMenuLabel>
|
||||
<div class="px-2 pb-2">
|
||||
<Select :model-value="getStatusFilter(table)"
|
||||
@update:model-value="table.getColumn('is_active')?.setFilterValue($event === 'all' ? '' : $event)">
|
||||
<SelectTrigger class="h-8 w-37.5">
|
||||
<SelectValue placeholder="Semua Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Semua Status</SelectItem>
|
||||
<SelectItem value="true">Aktif</SelectItem>
|
||||
<SelectItem value="false">Nonaktif</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem :disabled="!hasActiveFilter(table)" @click="resetFilters(table)">
|
||||
Reset Filter
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</template>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SidebarInset>
|
||||
|
||||
<!-- ==================== FORM DIALOG (CREATE / EDIT) ==================== -->
|
||||
<Dialog v-model:open="formOpen">
|
||||
<DialogContent class="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{ formTitle }}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form id="businessTypeForm" @submit.prevent="handleFormSubmit">
|
||||
<FieldGroup class="gap-4">
|
||||
<Field>
|
||||
<FieldLabel for="form-name">Nama <span class="text-red-500">*</span></FieldLabel>
|
||||
<Input id="form-name" v-model="form.name" placeholder="Masukkan nama" :disabled="formLoading" />
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel for="form-description">Deskripsi</FieldLabel>
|
||||
<textarea id="form-description" v-model="form.description" placeholder="Masukkan deskripsi (opsional)"
|
||||
:disabled="formLoading" rows="3"
|
||||
class="flex w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</form>
|
||||
<DialogFooter>
|
||||
<DialogClose as-child>
|
||||
<Button variant="outline" :disabled="formLoading">Batal</Button>
|
||||
</DialogClose>
|
||||
<Button type="submit" form="businessTypeForm" :disabled="formLoading">
|
||||
<Loader2 v-if="formLoading" class="h-4 w-4 mr-1 animate-spin" />
|
||||
Simpan
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<!-- ==================== DELETE DIALOG ==================== -->
|
||||
<DeleteDialog v-model:open="deleteOpen" title="Hapus Jenis Bisnis" :item-name="selectedBusinessType?.name"
|
||||
:loading="deleteLoading" @confirm="handleConfirmDelete" />
|
||||
</SidebarProvider>
|
||||
</template>
|
||||
@ -1,145 +0,0 @@
|
||||
import type { ColumnDef, FilterFn } from '@tanstack/vue-table'
|
||||
import { ArrowUpDown, Pencil, Trash2 } from '@lucide/vue'
|
||||
import { h } from 'vue'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from '@/components/ui/tooltip'
|
||||
|
||||
export interface Plan {
|
||||
id: string
|
||||
name: string
|
||||
description: string | null
|
||||
price: number
|
||||
limits: Record<string, any> | null
|
||||
is_active: boolean | number
|
||||
}
|
||||
|
||||
const nameFilter: FilterFn<Plan> = (row, _columnId, filterValue) => {
|
||||
const search = (filterValue as string).toLowerCase()
|
||||
const name = (row.original.name as string).toLowerCase()
|
||||
return name.includes(search)
|
||||
}
|
||||
|
||||
const booleanFilter: FilterFn<Plan> = (row, columnId, filterValue) => {
|
||||
if (!filterValue || filterValue === '') return true
|
||||
const raw = row.original[columnId as keyof Plan]
|
||||
const cellValue = raw === true || raw === 1 || raw === '1'
|
||||
const filterBool = filterValue === 'true'
|
||||
return cellValue === filterBool
|
||||
}
|
||||
|
||||
export function getColumns(callbacks: {
|
||||
onEdit: (plan: Plan) => void
|
||||
onDelete: (plan: Plan) => void
|
||||
onToggleStatus: (plan: Plan, value: boolean) => void
|
||||
}): ColumnDef<Plan>[] {
|
||||
return [
|
||||
{
|
||||
id: 'name_search',
|
||||
accessorFn: row => row.name,
|
||||
header: ({ column }) => {
|
||||
return h(Button, {
|
||||
variant: 'ghost',
|
||||
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
|
||||
}, () => ['Nama', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])
|
||||
},
|
||||
cell: ({ row }) => h('div', { class: 'font-medium' }, row.original.name),
|
||||
filterFn: nameFilter,
|
||||
enableHiding: false,
|
||||
},
|
||||
{
|
||||
accessorKey: 'price',
|
||||
header: ({ column }) => {
|
||||
return h(Button, {
|
||||
variant: 'ghost',
|
||||
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
|
||||
}, () => ['Harga', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
const val = row.original.price
|
||||
const formatted = val.toLocaleString('id-ID')
|
||||
return h('div', { class: 'flex items-center gap-1 text-sm' }, [
|
||||
h('span', { class: 'text-muted-foreground' }, 'Rp'),
|
||||
h('span', { class: 'font-medium' }, formatted),
|
||||
])
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'description',
|
||||
header: 'Deskripsi',
|
||||
cell: ({ row }) => {
|
||||
const desc = row.getValue('description') as string | null
|
||||
return h('div', { class: 'text-muted-foreground truncate max-w-[300px]' }, desc ?? '-')
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'is_active',
|
||||
header: 'Status',
|
||||
filterFn: booleanFilter,
|
||||
cell: ({ row }) => {
|
||||
const raw = row.getValue('is_active')
|
||||
const isActive = raw === true || raw === 1 || raw === '1'
|
||||
const plan = row.original
|
||||
return h('div', { class: 'flex items-center gap-2' }, [
|
||||
h(Switch, {
|
||||
modelValue: isActive,
|
||||
'onUpdate:modelValue': (val: boolean) => callbacks.onToggleStatus(plan, val),
|
||||
}),
|
||||
h(Badge, {
|
||||
variant: 'outline',
|
||||
class: isActive
|
||||
? 'border-emerald-500 text-emerald-600 bg-emerald-50'
|
||||
: 'border-red-500 text-red-600 bg-red-50',
|
||||
}, () => isActive ? 'Aktif' : 'Nonaktif'),
|
||||
])
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
header: ' ',
|
||||
size: 0,
|
||||
minSize: 0,
|
||||
enableHiding: false,
|
||||
cell: ({ row }) => {
|
||||
const plan = row.original
|
||||
|
||||
return h(TooltipProvider, null, () =>
|
||||
h('div', { class: 'flex items-center gap-1' }, [
|
||||
h(Tooltip, null, () => [
|
||||
h(TooltipTrigger, { asChild: true }, () =>
|
||||
h(Button, {
|
||||
variant: 'ghost',
|
||||
size: 'icon',
|
||||
class: 'h-8 w-8 text-yellow-500',
|
||||
onClick: () => callbacks.onEdit(plan),
|
||||
}, () =>
|
||||
h(Pencil, { class: 'h-4 w-4' })
|
||||
)
|
||||
),
|
||||
h(TooltipContent, null, () => 'Edit'),
|
||||
]),
|
||||
h(Tooltip, null, () => [
|
||||
h(TooltipTrigger, { asChild: true }, () =>
|
||||
h(Button, {
|
||||
variant: 'ghost',
|
||||
size: 'icon',
|
||||
class: 'h-8 w-8 text-destructive',
|
||||
onClick: () => callbacks.onDelete(plan),
|
||||
}, () =>
|
||||
h(Trash2, { class: 'h-4 w-4' })
|
||||
)
|
||||
),
|
||||
h(TooltipContent, null, () => 'Hapus'),
|
||||
]),
|
||||
])
|
||||
)
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
@ -1,330 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import AppSidebar from '@/components/AppSidebar.vue'
|
||||
import SiteHeader from '@/components/SiteHeader.vue'
|
||||
import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar'
|
||||
|
||||
import { ChevronDown, Loader2, Plus, X } from '@lucide/vue'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { toast } from 'vue-sonner'
|
||||
|
||||
import DataTable from '@/components/data-table/DataTable.vue'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '@/components/ui/dialog'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import {
|
||||
Field,
|
||||
FieldGroup,
|
||||
FieldLabel,
|
||||
} from '@/components/ui/field'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { type Plan, getColumns } from './columns'
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
|
||||
const { data: plans, status, refresh } = useFetch<Plan[]>(`${config.public.apiBase}/plans`)
|
||||
|
||||
const tableRef = ref<InstanceType<typeof DataTable>>()
|
||||
|
||||
// --- Dialog states ---
|
||||
const formOpen = ref(false)
|
||||
const deleteOpen = ref(false)
|
||||
|
||||
// --- Form state ---
|
||||
type FormMode = 'create' | 'edit'
|
||||
|
||||
const formMode = ref<FormMode>('create')
|
||||
const selectedPlan = ref<Plan | null>(null)
|
||||
|
||||
interface FormData {
|
||||
name: string
|
||||
description: string
|
||||
price: string
|
||||
}
|
||||
|
||||
const form = ref<FormData>({ name: '', description: '', price: '' })
|
||||
|
||||
// --- Loading states ---
|
||||
const formLoading = ref(false)
|
||||
const deleteLoading = ref(false)
|
||||
|
||||
// --- Computed ---
|
||||
const formTitle = computed(() => formMode.value === 'create' ? 'Tambah Plan' : 'Edit Plan')
|
||||
|
||||
// --- Table callbacks ---
|
||||
function openCreateForm() {
|
||||
formMode.value = 'create'
|
||||
selectedPlan.value = null
|
||||
form.value = { name: '', description: '', price: '' }
|
||||
formOpen.value = true
|
||||
}
|
||||
|
||||
function handleEdit(plan: Plan) {
|
||||
formMode.value = 'edit'
|
||||
selectedPlan.value = plan
|
||||
form.value = {
|
||||
name: plan.name,
|
||||
description: plan.description ?? '',
|
||||
price: String(plan.price),
|
||||
}
|
||||
formOpen.value = true
|
||||
}
|
||||
|
||||
function handleDelete(plan: Plan) {
|
||||
selectedPlan.value = plan
|
||||
deleteOpen.value = true
|
||||
}
|
||||
|
||||
async function handleToggleStatus(plan: Plan, value: boolean) {
|
||||
try {
|
||||
await $fetch(`${config.public.apiBase}/plans/${plan.id}/active`, {
|
||||
method: 'PATCH',
|
||||
body: { is_active: value },
|
||||
})
|
||||
if (plans.value) {
|
||||
plans.value = plans.value.map(p =>
|
||||
p.id === plan.id ? { ...p, is_active: value } : p
|
||||
)
|
||||
}
|
||||
toast.success(`Plan berhasil di${value ? 'aktifkan' : 'nonaktifkan'}`)
|
||||
} catch (e: any) {
|
||||
toast.error(e?.data?.message ?? 'Gagal mengubah status')
|
||||
}
|
||||
}
|
||||
|
||||
const columns = computed(() => getColumns({ onEdit: handleEdit, onDelete: handleDelete, onToggleStatus: handleToggleStatus }))
|
||||
|
||||
// --- CRUD operations ---
|
||||
async function handleFormSubmit() {
|
||||
if (!form.value.name.trim()) {
|
||||
toast.error('Nama wajib diisi')
|
||||
return
|
||||
}
|
||||
if (!form.value.price.trim() || isNaN(Number(form.value.price))) {
|
||||
toast.error('Harga wajib diisi dan harus berupa angka')
|
||||
return
|
||||
}
|
||||
|
||||
formLoading.value = true
|
||||
try {
|
||||
const body = {
|
||||
name: form.value.name.trim(),
|
||||
description: form.value.description.trim() || null,
|
||||
price: Number(form.value.price),
|
||||
}
|
||||
|
||||
if (formMode.value === 'create') {
|
||||
await $fetch(`${config.public.apiBase}/plans`, {
|
||||
method: 'POST',
|
||||
body,
|
||||
})
|
||||
toast.success('Plan berhasil ditambahkan')
|
||||
} else {
|
||||
await $fetch(`${config.public.apiBase}/plans/${selectedPlan.value!.id}`, {
|
||||
method: 'PUT',
|
||||
body,
|
||||
})
|
||||
toast.success('Plan berhasil diperbarui')
|
||||
}
|
||||
|
||||
formOpen.value = false
|
||||
await refresh()
|
||||
} catch (e: any) {
|
||||
toast.error(e?.data?.message ?? 'Gagal menyimpan plan')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleConfirmDelete() {
|
||||
if (!selectedPlan.value) return
|
||||
|
||||
deleteLoading.value = true
|
||||
try {
|
||||
await $fetch(`${config.public.apiBase}/plans/${selectedPlan.value.id}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
toast.success('Plan berhasil dihapus')
|
||||
deleteOpen.value = false
|
||||
selectedPlan.value = null
|
||||
await refresh()
|
||||
} catch (e: any) {
|
||||
toast.error(e?.data?.message ?? 'Gagal menghapus plan')
|
||||
} finally {
|
||||
deleteLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// --- Filters ---
|
||||
function getStatusFilter(table: any) {
|
||||
const val = table.getColumn('is_active')?.getFilterValue()
|
||||
if (val === true || val === 'true' || val === 1) return 'true'
|
||||
if (val === false || val === 'false' || val === 0) return 'false'
|
||||
return 'all'
|
||||
}
|
||||
|
||||
function hasActiveFilter(table: any) {
|
||||
const search = table.getColumn('name_search')?.getFilterValue()
|
||||
const status = table.getColumn('is_active')?.getFilterValue()
|
||||
return (search && search !== '') || (status !== '' && status !== undefined && status !== null)
|
||||
}
|
||||
|
||||
function resetFilters(table: any) {
|
||||
table.getColumn('name_search')?.setFilterValue('')
|
||||
table.getColumn('is_active')?.setFilterValue('')
|
||||
}
|
||||
|
||||
// --- Reset on dialog close ---
|
||||
watch(formOpen, (val) => {
|
||||
if (!val) {
|
||||
form.value = { name: '', description: '', price: '' }
|
||||
selectedPlan.value = null
|
||||
}
|
||||
})
|
||||
|
||||
watch(deleteOpen, (val) => {
|
||||
if (!val) selectedPlan.value = null
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SidebarProvider :style="{
|
||||
'--sidebar-width': 'calc(var(--spacing) * 72)',
|
||||
'--header-height': 'calc(var(--spacing) * 12)',
|
||||
}">
|
||||
<AppSidebar variant="inset" />
|
||||
<SidebarInset>
|
||||
<SiteHeader />
|
||||
<div class="flex flex-1 flex-col">
|
||||
<div class="@container/main flex flex-1 flex-col gap-2">
|
||||
<div class="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
|
||||
<div class="px-4 lg:px-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-2xl font-bold">Plans</h1>
|
||||
<Button size="sm" @click="openCreateForm">
|
||||
<Plus class="h-4 w-4 mr-1" />
|
||||
Tambah
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 lg:px-6">
|
||||
<DataTable ref="tableRef" :columns="columns" :data="plans ?? []" :loading="status === 'pending'">
|
||||
<template #filters="{ table }">
|
||||
<div class="flex items-center gap-2 py-4">
|
||||
<Input class="max-w-sm" placeholder="Cari nama..."
|
||||
:model-value="(table.getColumn('name_search')?.getFilterValue() as string) ?? ''"
|
||||
@update:model-value="table.getColumn('name_search')?.setFilterValue($event)" />
|
||||
<Select :model-value="getStatusFilter(table)"
|
||||
@update:model-value="table.getColumn('is_active')?.setFilterValue($event === 'all' ? '' : $event)">
|
||||
<SelectTrigger class="hidden h-8 w-auto md:flex">
|
||||
<SelectValue placeholder="Semua Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Semua Status</SelectItem>
|
||||
<SelectItem value="true">Aktif</SelectItem>
|
||||
<SelectItem value="false">Nonaktif</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button v-if="hasActiveFilter(table)" variant="ghost" size="sm" class="h-8"
|
||||
@click="resetFilters(table)">
|
||||
<X class="h-4 w-4 mr-1" />
|
||||
Reset
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="outline" class="ml-auto md:hidden">
|
||||
Filter
|
||||
<ChevronDown class="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>Status</DropdownMenuLabel>
|
||||
<div class="px-2 pb-2">
|
||||
<Select :model-value="getStatusFilter(table)"
|
||||
@update:model-value="table.getColumn('is_active')?.setFilterValue($event === 'all' ? '' : $event)">
|
||||
<SelectTrigger class="h-8 w-37.5">
|
||||
<SelectValue placeholder="Semua Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Semua Status</SelectItem>
|
||||
<SelectItem value="true">Aktif</SelectItem>
|
||||
<SelectItem value="false">Nonaktif</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem :disabled="!hasActiveFilter(table)" @click="resetFilters(table)">
|
||||
Reset Filter
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</template>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SidebarInset>
|
||||
|
||||
<!-- ==================== FORM DIALOG (CREATE / EDIT) ==================== -->
|
||||
<Dialog v-model:open="formOpen">
|
||||
<DialogContent class="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{ formTitle }}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form id="planForm" @submit.prevent="handleFormSubmit">
|
||||
<FieldGroup class="gap-4">
|
||||
<Field>
|
||||
<FieldLabel for="form-name">Nama <span class="text-red-500">*</span></FieldLabel>
|
||||
<Input id="form-name" v-model="form.name" placeholder="Masukkan nama" :disabled="formLoading" />
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel for="form-price">Harga <span class="text-red-500">*</span></FieldLabel>
|
||||
<PriceDisplay v-model="form.price" placeholder="0" :disabled="formLoading" />
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel for="form-description">Deskripsi</FieldLabel>
|
||||
<textarea id="form-description" v-model="form.description" placeholder="Masukkan deskripsi (opsional)"
|
||||
:disabled="formLoading" rows="3"
|
||||
class="flex w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</form>
|
||||
<DialogFooter>
|
||||
<DialogClose as-child>
|
||||
<Button variant="outline" :disabled="formLoading">Batal</Button>
|
||||
</DialogClose>
|
||||
<Button type="submit" form="planForm" :disabled="formLoading">
|
||||
<Loader2 v-if="formLoading" class="h-4 w-4 mr-1 animate-spin" />
|
||||
Simpan
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<!-- ==================== DELETE DIALOG ==================== -->
|
||||
<DeleteDialog v-model:open="deleteOpen" title="Hapus Plan" :item-name="selectedPlan?.name" :loading="deleteLoading"
|
||||
@confirm="handleConfirmDelete" />
|
||||
</SidebarProvider>
|
||||
</template>
|
||||
@ -0,0 +1,44 @@
|
||||
# Hapus Module Plan dan Jenis Bisnis
|
||||
|
||||
**Tanggal:** 2026-07-25
|
||||
**Status:** Selesai
|
||||
|
||||
## Tujuan
|
||||
Menghapus modul plans dan business-types, serta menghapus properti plan_id yang tidak digunakan dari komponen OnboardingForm.
|
||||
|
||||
## Yang Dikerjakan
|
||||
|
||||
### 1. Hapus Module Plans
|
||||
- Menghapus direktori `app/pages/admin/plans/` yang berisi:
|
||||
- `app/pages/admin/plans/columns.ts` - file yang mendefinisikan kolom untuk tabel plans
|
||||
- `app/pages/admin/plans/index.vue` - halaman daftar plans
|
||||
|
||||
### 2. Hapus Module Business-Types
|
||||
- Menghapus direktori `app/pages/admin/business-types/` yang berisi:
|
||||
- `app/pages/admin/business-types/columns.ts` - file yang mendefinisikan kolom untuk tabel business-types
|
||||
- `app/pages/admin/business-types/index.vue` - halaman daftar business-types
|
||||
|
||||
### 3. Perbarui AppSidebar
|
||||
- Menghapus item menu "Plans" dari sidebar admin
|
||||
- Sekarang menampilkan: Dashboard (existing), Jenis Bisnis (existing)
|
||||
|
||||
### 4. Perbarui OnboardingForm
|
||||
- Menghapus tipe data Plan dari interface declarations
|
||||
- Menghapus tipe data Plan yang tidak terpakai dari useFetch
|
||||
- Menghapus properti plan_id dari handleSubmit (peninggalan setelah penghapusan)
|
||||
- Menghapus pengiriman atau pemilihan plan di UI
|
||||
- Mengurangi steps dari 3 menjadi 2:
|
||||
- Step 0: Pilih Jenis Bisnis
|
||||
- Step 1: Input Info Bisnis
|
||||
- Memperbarui label stepper menjadi ['Bisnis', 'Info']
|
||||
|
||||
## File yang Diubah
|
||||
|
||||
| File | Aksi | Detail |
|
||||
|------|------|--------|
|
||||
| app/components/AppSidebar.vue | Diubah | Menghapus item menu "Plans" |
|
||||
| app/components/OnboardingForm.vue | Diubah | Menghapus pemrosesan plan dan format 3-step |
|
||||
| app/pages/admin/business-types/columns.ts | Dihapus | File kolom untuk business-types |
|
||||
| app/pages/admin/business-types/index.vue | Dihapus | Halaman daftar business-types |
|
||||
| app/pages/admin/plans/columns.ts | Dihapus | File kolom untuk plans |
|
||||
| app/pages/admin/plans/index.vue | Dihapus | Halaman daftar plans |
|
||||
Loading…
Reference in New Issue
Block a user