110 lines
4.3 KiB
TypeScript
110 lines
4.3 KiB
TypeScript
import { useState } from "react";
|
||
import { Pencil, Eye, Trash2 } from "lucide-react";
|
||
import { Button } from "@/Components/ui/button";
|
||
import { Link, useForm, usePage } from "@inertiajs/react";
|
||
import type { PurchaseOrder } from "@/types/purchase-order";
|
||
import { toast } from "sonner";
|
||
import { Can } from "@/Components/Permission/Can";
|
||
import { PageProps } from "@/types/global";
|
||
import {
|
||
AlertDialog,
|
||
AlertDialogAction,
|
||
AlertDialogCancel,
|
||
AlertDialogContent,
|
||
AlertDialogDescription,
|
||
AlertDialogFooter,
|
||
AlertDialogHeader,
|
||
AlertDialogTitle,
|
||
} from "@/Components/ui/alert-dialog";
|
||
|
||
export function PurchaseOrderActions({
|
||
order,
|
||
}: { order: PurchaseOrder }) {
|
||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||
const { delete: destroy, processing } = useForm({});
|
||
const { auth } = usePage<PageProps>().props;
|
||
const permissions = auth.user?.permissions || [];
|
||
const isSuperAdmin = auth.user?.roles?.some((r: any) => r.name === 'super-admin');
|
||
|
||
const canApprove = isSuperAdmin || permissions.includes('purchase_orders.approve');
|
||
const canEdit = isSuperAdmin || permissions.includes('purchase_orders.edit');
|
||
|
||
// 編輯按鈕顯示邏輯：
|
||
// 1. 草稿狀態 + 編輯權限
|
||
// 2. 待核准狀態 + 核准權限 (讓主管能直接改)
|
||
const showEditButton = (order.status === 'draft' && canEdit) ||
|
||
(order.status === 'pending' && canApprove);
|
||
|
||
const handleConfirmDelete = () => {
|
||
// @ts-ignore
|
||
destroy(route('purchase-orders.destroy', order.id), {
|
||
onSuccess: () => {
|
||
toast.success("採購單已成功刪除");
|
||
setShowDeleteDialog(false);
|
||
},
|
||
onError: (errors: any) => toast.error(errors.error || "刪除過程中發生錯誤"),
|
||
});
|
||
};
|
||
|
||
return (
|
||
<div className="flex justify-center gap-2">
|
||
<Link href={`/purchase-orders/${order.id}`}>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className="button-outlined-primary"
|
||
title="查看詳情"
|
||
>
|
||
<Eye className="h-4 w-4" />
|
||
</Button>
|
||
</Link>
|
||
{showEditButton && (
|
||
<Link href={`/purchase-orders/${order.id}/edit`}>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className="button-outlined-primary"
|
||
title="編輯"
|
||
>
|
||
<Pencil className="h-4 w-4" />
|
||
</Button>
|
||
</Link>
|
||
)}
|
||
<Can permission="purchase_orders.delete">
|
||
{order.status === 'draft' && (
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className="button-outlined-error"
|
||
title="刪除"
|
||
onClick={() => setShowDeleteDialog(true)}
|
||
disabled={processing}
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
</Button>
|
||
)}
|
||
|
||
<AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>確認刪除採購單</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
確定要刪除採購單 「{order.poNumber}」 嗎？此操作無法撤銷。
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel className="button-outlined-primary">取消</AlertDialogCancel>
|
||
<AlertDialogAction
|
||
onClick={handleConfirmDelete}
|
||
className="button-filled-error"
|
||
>
|
||
確認刪除
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
</Can>
|
||
</div>
|
||
);
|
||
}
|