feat: implement dashboard CRUD status column and toggle actions; refactor related components for improved functionality
This commit is contained in:
mlogclub
@@ -5,11 +5,12 @@ import {
|
||||
MessagesSquareIcon,
|
||||
MessageSquareMoreIcon,
|
||||
} from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { DashboardCrudPage } from "@/components/dashboard/crud"
|
||||
import {
|
||||
createDashboardStatusColumn,
|
||||
DashboardCrudPage,
|
||||
} from "@/components/dashboard/crud"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import {
|
||||
createChannel,
|
||||
deleteChannel,
|
||||
@@ -147,49 +148,28 @@ export default function DashboardChannelsPage() {
|
||||
label: t("channel.columnAgent"),
|
||||
render: (item) => item.aiAgentName || "-",
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
createDashboardStatusColumn<AdminChannel, Status>({
|
||||
label: t("channel.columnStatus"),
|
||||
render: (item, { actionLoading, reload, setActionLoadingId }) => (
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch
|
||||
checked={item.status === Status.Ok}
|
||||
disabled={actionLoading}
|
||||
onCheckedChange={() => {
|
||||
void (async () => {
|
||||
setActionLoadingId(item.id)
|
||||
try {
|
||||
const nextStatus =
|
||||
item.status === Status.Ok ? Status.Disabled : Status.Ok
|
||||
await updateChannelStatus(item.id, nextStatus)
|
||||
toast.success(
|
||||
t(
|
||||
nextStatus === Status.Ok
|
||||
? "channel.statusEnabled"
|
||||
: "channel.statusDisabled",
|
||||
{ name: item.name }
|
||||
)
|
||||
)
|
||||
await reload()
|
||||
} catch (error) {
|
||||
toast.error(
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: t("channel.statusUpdateFailed")
|
||||
)
|
||||
} finally {
|
||||
setActionLoadingId(null)
|
||||
}
|
||||
})()
|
||||
}}
|
||||
aria-label={t("channel.toggleStatus", { name: item.name })}
|
||||
/>
|
||||
<Badge variant={item.status === Status.Ok ? "default" : "outline"}>
|
||||
{getStatusLabel(item.status as Status, t)}
|
||||
</Badge>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
getStatus: (item) => item.status as Status,
|
||||
getLabel: (status) => getStatusLabel(status, t),
|
||||
getBadgeVariant: (status) => (status === Status.Ok ? "default" : "outline"),
|
||||
isEnabled: (status) => status === Status.Ok,
|
||||
toggle: {
|
||||
getNextStatus: (item) =>
|
||||
item.status === Status.Ok ? Status.Disabled : Status.Ok,
|
||||
updateStatus: (item, nextStatus) =>
|
||||
updateChannelStatus(item.id, nextStatus),
|
||||
successMessage: (item, nextStatus) =>
|
||||
t(
|
||||
nextStatus === Status.Ok
|
||||
? "channel.statusEnabled"
|
||||
: "channel.statusDisabled",
|
||||
{ name: item.name }
|
||||
),
|
||||
errorMessage: t("channel.statusUpdateFailed"),
|
||||
ariaLabel: (item) => t("channel.toggleStatus", { name: item.name }),
|
||||
},
|
||||
}),
|
||||
]}
|
||||
fetchList={fetchChannels}
|
||||
getItemId={(item) => item.id}
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
"use client"
|
||||
|
||||
import { BanIcon, CheckCircle2Icon } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { DashboardCrudPage } from "@/components/dashboard/crud"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { DropdownMenuItem } from "@/components/ui/dropdown-menu"
|
||||
import {
|
||||
createDashboardStatusColumn,
|
||||
createDashboardStatusToggleAction,
|
||||
DashboardCrudPage,
|
||||
} from "@/components/dashboard/crud"
|
||||
import {
|
||||
createCompany,
|
||||
deleteCompany,
|
||||
@@ -96,26 +97,19 @@ export default function DashboardCompaniesPage() {
|
||||
className: "w-28",
|
||||
render: (item) => item.customerCount,
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
createDashboardStatusColumn<AdminCompany, Status>({
|
||||
label: t("company.columnStatus"),
|
||||
className: "w-24",
|
||||
render: (item) => (
|
||||
<Badge
|
||||
variant={
|
||||
item.status === Status.Ok
|
||||
? "default"
|
||||
: item.status === Status.Deleted
|
||||
? "outline"
|
||||
: "secondary"
|
||||
}
|
||||
>
|
||||
{StatusLabels[item.status as Status]
|
||||
? getStatusLabel(item.status as Status, t)
|
||||
: t("company.unknownStatus")}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
getStatus: (item) => item.status as Status,
|
||||
getLabel: (status) =>
|
||||
StatusLabels[status] ? getStatusLabel(status, t) : t("company.unknownStatus"),
|
||||
getBadgeVariant: (status) =>
|
||||
status === Status.Ok
|
||||
? "default"
|
||||
: status === Status.Deleted
|
||||
? "outline"
|
||||
: "secondary",
|
||||
}),
|
||||
{
|
||||
key: "remark",
|
||||
label: t("company.columnRemark"),
|
||||
@@ -177,48 +171,23 @@ export default function DashboardCompaniesPage() {
|
||||
maxValue: () => t("company.nameRequired"),
|
||||
},
|
||||
}}
|
||||
renderRowActions={({ item, actionLoading, reload, setActionLoadingId }) => (
|
||||
<DropdownMenuItem
|
||||
disabled={item.status === Status.Deleted}
|
||||
onClick={() => {
|
||||
void (async () => {
|
||||
setActionLoadingId(item.id)
|
||||
try {
|
||||
const nextStatus = item.status === Status.Ok ? Status.Disabled : Status.Ok
|
||||
await updateCompanyStatus(item.id, nextStatus)
|
||||
toast.success(
|
||||
t(nextStatus === Status.Ok ? "company.enabled" : "company.disabled", {
|
||||
name: item.name,
|
||||
})
|
||||
)
|
||||
await reload()
|
||||
} catch (error) {
|
||||
toast.error(
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: t("company.statusUpdateFailed")
|
||||
)
|
||||
} finally {
|
||||
setActionLoadingId(null)
|
||||
}
|
||||
})()
|
||||
}}
|
||||
>
|
||||
{actionLoading ? (
|
||||
t("company.processing")
|
||||
) : item.status === Status.Ok ? (
|
||||
<>
|
||||
<BanIcon />
|
||||
{t("company.disable")}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CheckCircle2Icon />
|
||||
{t("company.enable")}
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
rowActions={[
|
||||
createDashboardStatusToggleAction<AdminCompany, Status>({
|
||||
disabled: (item) => item.status === Status.Deleted,
|
||||
icon: (item) =>
|
||||
item.status === Status.Ok ? <BanIcon /> : <CheckCircle2Icon />,
|
||||
label: (item) =>
|
||||
item.status === Status.Ok ? t("company.disable") : t("company.enable"),
|
||||
getNextStatus: (item) =>
|
||||
item.status === Status.Ok ? Status.Disabled : Status.Ok,
|
||||
updateStatus: (item, nextStatus) => updateCompanyStatus(item.id, nextStatus),
|
||||
successMessage: (item, nextStatus) =>
|
||||
t(nextStatus === Status.Ok ? "company.enabled" : "company.disabled", {
|
||||
name: item.name,
|
||||
}),
|
||||
errorMessage: t("company.statusUpdateFailed"),
|
||||
}),
|
||||
]}
|
||||
labels={{
|
||||
refresh: t("company.refresh"),
|
||||
create: t("company.new"),
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
"use client"
|
||||
|
||||
import { FileTextIcon, RefreshCwIcon } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { DashboardCrudPage } from "@/components/dashboard/crud"
|
||||
import {
|
||||
createDashboardStatusColumn,
|
||||
createDashboardStatusToggleAction,
|
||||
DashboardCrudPage,
|
||||
} from "@/components/dashboard/crud"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { DropdownMenuItem } from "@/components/ui/dropdown-menu"
|
||||
import {
|
||||
createQuickReply,
|
||||
deleteQuickReply,
|
||||
@@ -93,15 +95,12 @@ export default function DashboardQuickRepliesPage() {
|
||||
label: t("quickReply.columnGroup"),
|
||||
render: (item) => <Badge variant="outline">{item.groupName}</Badge>,
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
createDashboardStatusColumn<AdminQuickReply, Status>({
|
||||
label: t("quickReply.columnStatus"),
|
||||
render: (item) => (
|
||||
<Badge variant={item.status === Status.Ok ? "default" : "outline"}>
|
||||
{getStatusLabel(item.status as Status, t)}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
getStatus: (item) => item.status as Status,
|
||||
getLabel: (status) => getStatusLabel(status, t),
|
||||
getBadgeVariant: (status) => (status === Status.Ok ? "default" : "outline"),
|
||||
}),
|
||||
{
|
||||
key: "sortNo",
|
||||
label: t("quickReply.columnSort"),
|
||||
@@ -193,51 +192,34 @@ export default function DashboardQuickRepliesPage() {
|
||||
maxValue: () => t("quickReply.sortInvalid"),
|
||||
},
|
||||
}}
|
||||
renderRowActions={({ item, actionLoading, reload, setActionLoadingId }) => (
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
void (async () => {
|
||||
setActionLoadingId(item.id)
|
||||
try {
|
||||
const nextStatus =
|
||||
item.status === Status.Ok ? Status.Disabled : Status.Ok
|
||||
await updateQuickReply({
|
||||
id: item.id,
|
||||
groupName: item.groupName,
|
||||
title: item.title,
|
||||
content: item.content,
|
||||
sortNo: item.sortNo,
|
||||
status: nextStatus,
|
||||
})
|
||||
toast.success(
|
||||
t(
|
||||
nextStatus === Status.Ok
|
||||
? "quickReply.enabled"
|
||||
: "quickReply.disabled",
|
||||
{ title: item.title }
|
||||
)
|
||||
)
|
||||
await reload()
|
||||
} catch (error) {
|
||||
toast.error(
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: t("quickReply.statusUpdateFailed")
|
||||
)
|
||||
} finally {
|
||||
setActionLoadingId(null)
|
||||
}
|
||||
})()
|
||||
}}
|
||||
>
|
||||
<RefreshCwIcon />
|
||||
{actionLoading
|
||||
? t("quickReply.processing")
|
||||
: item.status === Status.Ok
|
||||
rowActions={[
|
||||
createDashboardStatusToggleAction<AdminQuickReply, Status>({
|
||||
icon: <RefreshCwIcon />,
|
||||
label: (item) =>
|
||||
item.status === Status.Ok
|
||||
? t("quickReply.disable")
|
||||
: t("quickReply.enable")}
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
: t("quickReply.enable"),
|
||||
getNextStatus: (item) =>
|
||||
item.status === Status.Ok ? Status.Disabled : Status.Ok,
|
||||
updateStatus: (item, nextStatus) =>
|
||||
updateQuickReply({
|
||||
id: item.id,
|
||||
groupName: item.groupName,
|
||||
title: item.title,
|
||||
content: item.content,
|
||||
sortNo: item.sortNo,
|
||||
status: nextStatus,
|
||||
}),
|
||||
successMessage: (item, nextStatus) =>
|
||||
t(
|
||||
nextStatus === Status.Ok
|
||||
? "quickReply.enabled"
|
||||
: "quickReply.disabled",
|
||||
{ title: item.title }
|
||||
),
|
||||
errorMessage: t("quickReply.statusUpdateFailed"),
|
||||
}),
|
||||
]}
|
||||
labels={{
|
||||
refresh: t("quickReply.refresh"),
|
||||
create: t("quickReply.new"),
|
||||
|
||||
Reference in New Issue
Block a user