319 lines
15 KiB
TypeScript
319 lines
15 KiB
TypeScript
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/Components/ui/accordion";
|
|
import { Button } from "@/Components/ui/button";
|
|
import { Checkbox } from "@/Components/ui/checkbox";
|
|
import { Input } from "@/Components/ui/input";
|
|
import { cn } from "@/lib/utils";
|
|
import { useState, useEffect, useMemo } from "react";
|
|
import { ChevronsDown, ChevronsUp } from "lucide-react";
|
|
|
|
export interface Permission {
|
|
id: number;
|
|
name: string;
|
|
display_name?: string;
|
|
}
|
|
|
|
export interface GroupedPermission {
|
|
key: string;
|
|
name: string;
|
|
permissions: Permission[];
|
|
}
|
|
|
|
interface PermissionSelectorProps {
|
|
groupedPermissions: GroupedPermission[];
|
|
selectedPermissions: string[];
|
|
onChange: (permissions: string[]) => void;
|
|
}
|
|
|
|
export default function PermissionSelector({ groupedPermissions, selectedPermissions, onChange }: PermissionSelectorProps) {
|
|
|
|
// 翻譯權限後綴
|
|
const translateAction = (permissionName: string) => {
|
|
const parts = permissionName.split('.');
|
|
if (parts.length < 2) return permissionName;
|
|
const action = parts[parts.length - 1];
|
|
|
|
const map: Record<string, string> = {
|
|
'view': '檢視',
|
|
'create': '新增',
|
|
'edit': '編輯',
|
|
'delete': '刪除',
|
|
|
|
'adjust': '調整',
|
|
'transfer': '調撥',
|
|
'count': '盤點',
|
|
'safety_stock': '安全庫存設定',
|
|
'export': '匯出',
|
|
'complete': '完成',
|
|
'view_cost': '檢視成本',
|
|
'view_logs': '檢視日誌',
|
|
'activate': '啟用/停用',
|
|
'approve': '核准/退回',
|
|
'cancel': '取消',
|
|
};
|
|
|
|
const actionText = map[action] || action;
|
|
|
|
// 處理多段式權限 (例如 inventory_count.view)
|
|
if (parts.length >= 2) {
|
|
const middleKey = parts[parts.length - 2];
|
|
// 如果中間那段有翻譯且不等於動作本身，則顯示為 "標籤: 動作"
|
|
if (map[middleKey] && middleKey !== action) {
|
|
return `${map[middleKey]}: ${actionText}`;
|
|
}
|
|
}
|
|
|
|
return actionText;
|
|
};
|
|
|
|
const togglePermission = (name: string) => {
|
|
if (selectedPermissions.includes(name)) {
|
|
onChange(selectedPermissions.filter(p => p !== name));
|
|
} else {
|
|
onChange([...selectedPermissions, name]);
|
|
}
|
|
};
|
|
|
|
const toggleGroup = (groupPermissions: Permission[]) => {
|
|
const groupNames = groupPermissions.map(p => p.name);
|
|
const allSelected = groupNames.every(name => selectedPermissions.includes(name));
|
|
|
|
if (allSelected) {
|
|
// Unselect all
|
|
onChange(selectedPermissions.filter(p => !groupNames.includes(p)));
|
|
} else {
|
|
// Select all
|
|
const newPermissions = [...selectedPermissions];
|
|
groupNames.forEach(name => {
|
|
if (!newPermissions.includes(name)) newPermissions.push(name);
|
|
});
|
|
onChange(newPermissions);
|
|
}
|
|
};
|
|
|
|
// State for controlling accordion items
|
|
const [openItems, setOpenItems] = useState<string[]>([]);
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
|
|
// Memoize filtered groups to prevent infinite loops in useEffect
|
|
const filteredGroups = useMemo(() => {
|
|
return groupedPermissions.map(group => {
|
|
// If search is empty, return group as is
|
|
if (!searchQuery.trim()) return group;
|
|
|
|
// Check if group name matches
|
|
const groupNameMatch = group.name.toLowerCase().includes(searchQuery.toLowerCase());
|
|
|
|
// Filter permissions that match
|
|
const matchingPermissions = group.permissions.filter(p => {
|
|
const translatedName = p.display_name || translateAction(p.name);
|
|
return translatedName.includes(searchQuery) ||
|
|
p.name.toLowerCase().includes(searchQuery.toLowerCase());
|
|
});
|
|
|
|
// If group name matches, show all permissions. Otherwise show only matching permissions.
|
|
if (groupNameMatch) {
|
|
return group;
|
|
}
|
|
|
|
return {
|
|
...group,
|
|
permissions: matchingPermissions
|
|
};
|
|
}).filter(group => group.permissions.length > 0);
|
|
}, [groupedPermissions, searchQuery]);
|
|
|
|
const currentDisplayKeys = useMemo(() => filteredGroups.map(g => g.key), [filteredGroups]);
|
|
|
|
const onExpandAll = () => setOpenItems(currentDisplayKeys);
|
|
const onCollapseAll = () => setOpenItems([]);
|
|
|
|
// Auto-expand groups when searching
|
|
useEffect(() => {
|
|
if (searchQuery.trim()) {
|
|
const filteredKeys = filteredGroups.map(g => g.key);
|
|
setOpenItems(prev => {
|
|
const next = new Set([...prev, ...filteredKeys]);
|
|
return Array.from(next);
|
|
});
|
|
}
|
|
// removing the 'else' block which forced collapse on empty search
|
|
// We let the user manually collapse if they want, or we could reset only when search is cleared explicitly?
|
|
// User behavior: if I finish searching, I might want to see my previous state, but "Expand All" failing was the main issue.
|
|
// The issue was the effect running on every render resetting state.
|
|
}, [searchQuery]); // Only run when query changes. We actually depend on filteredGroups result but only when query changes matters most for "auto" trigger.
|
|
// Actually, correctly: if filteredGroups changes due to search change, we expand.
|
|
|
|
// Better interaction: When search query *changes* and is not empty, we expand matches.
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-2">
|
|
<div className="relative flex-1 max-w-sm">
|
|
<Input
|
|
placeholder="搜尋權限名稱..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="pl-8"
|
|
/>
|
|
<div className="absolute left-2.5 top-2.5 text-gray-400">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between sm:justify-end gap-4 w-full sm:w-auto">
|
|
<div className="text-sm text-gray-500 whitespace-nowrap">
|
|
已選擇 {selectedPermissions.length} 項
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={onExpandAll}
|
|
className="h-8 text-xs text-gray-600 hover:text-primary-main gap-1.5"
|
|
>
|
|
<ChevronsDown className="h-3.5 w-3.5" />
|
|
展開全部
|
|
</Button>
|
|
<div className="h-4 w-px bg-gray-200" />
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={onCollapseAll}
|
|
className="h-8 text-xs text-gray-600 hover:text-primary-main gap-1.5"
|
|
>
|
|
<ChevronsUp className="h-3.5 w-3.5" />
|
|
收合全部
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Accordion
|
|
type="multiple"
|
|
value={openItems}
|
|
onValueChange={setOpenItems}
|
|
className="w-full space-y-2"
|
|
>
|
|
{filteredGroups.length === 0 ? (
|
|
<div className="text-center py-8 text-gray-500 bg-gray-50 rounded-lg border border-dashed">
|
|
沒有符合「{searchQuery}」的權限項目
|
|
</div>
|
|
) : (
|
|
filteredGroups.map((group) => {
|
|
const selectedCount = group.permissions.filter(p => selectedPermissions.includes(p.name)).length;
|
|
const totalCount = group.permissions.length;
|
|
const isAllSelected = selectedCount === totalCount;
|
|
|
|
// 將權限分為「基本操作」與「狀態/進階操作」
|
|
const statusActions = ['approve', 'cancel', 'complete', 'activate'];
|
|
const normalPermissions = group.permissions.filter(p => !statusActions.includes(p.name.split('.').pop() || ''));
|
|
const specialPermissions = group.permissions.filter(p => statusActions.includes(p.name.split('.').pop() || ''));
|
|
|
|
return (
|
|
<AccordionItem
|
|
key={group.key}
|
|
value={group.key}
|
|
className="bg-white border rounded-lg px-2 data-[state=open]:bg-gray-50/50 last:border-b"
|
|
>
|
|
<div className="flex items-center w-full">
|
|
<div className="flex items-center pl-2 pr-1">
|
|
<Checkbox
|
|
id={`group-select-${group.key}`}
|
|
checked={isAllSelected}
|
|
onCheckedChange={() => toggleGroup(group.permissions)}
|
|
className="data-[state=checked]:bg-primary-main"
|
|
/>
|
|
</div>
|
|
|
|
<AccordionTrigger className="px-2 hover:no-underline hover:bg-gray-50 rounded-lg group flex-1 py-3">
|
|
<div className="flex items-center gap-3">
|
|
<span className={cn(
|
|
"font-medium",
|
|
selectedCount > 0 ? "text-primary-main" : "text-gray-700"
|
|
)}>
|
|
{group.name}
|
|
</span>
|
|
<span className="text-xs text-gray-400 bg-gray-100 px-2 py-0.5 rounded-full font-mono">
|
|
{selectedCount} / {totalCount}
|
|
</span>
|
|
</div>
|
|
</AccordionTrigger>
|
|
</div>
|
|
<AccordionContent className="px-2 pb-4">
|
|
<div className="pl-10 space-y-6 pt-1">
|
|
{/* 基本操作 */}
|
|
{normalPermissions.length > 0 && (
|
|
<div className="space-y-3">
|
|
<div className="text-xs font-semibold text-gray-400 uppercase tracking-wider">
|
|
基本功能權限
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-y-3 gap-x-4">
|
|
{normalPermissions.map((permission) => (
|
|
<PermissionItem
|
|
key={permission.id}
|
|
permission={permission}
|
|
selectedPermissions={selectedPermissions}
|
|
onToggle={togglePermission}
|
|
translate={translateAction}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 狀態操作/進階權限 */}
|
|
{specialPermissions.length > 0 && (
|
|
<div className="space-y-3 pt-2 border-t border-gray-100 italic">
|
|
<div className="text-xs font-semibold text-amber-600/70 uppercase tracking-wider flex items-center gap-1">
|
|
<span className="w-1 h-3 bg-amber-500 rounded-full" />
|
|
單據狀態與進階操作權限
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-y-3 gap-x-4">
|
|
{specialPermissions.map((permission) => (
|
|
<PermissionItem
|
|
key={permission.id}
|
|
permission={permission}
|
|
selectedPermissions={selectedPermissions}
|
|
onToggle={togglePermission}
|
|
translate={translateAction}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
);
|
|
})
|
|
)}
|
|
</Accordion>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PermissionItem({ permission, selectedPermissions, onToggle, translate }: any) {
|
|
return (
|
|
<div className="flex items-start space-x-3">
|
|
<Checkbox
|
|
id={permission.name}
|
|
checked={selectedPermissions.includes(permission.name)}
|
|
onCheckedChange={() => onToggle(permission.name)}
|
|
/>
|
|
<div className="grid gap-1.5 leading-none">
|
|
<label
|
|
htmlFor={permission.name}
|
|
className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer text-gray-700 hover:text-primary-main transition-colors"
|
|
>
|
|
{permission.display_name || translate(permission.name)}
|
|
</label>
|
|
<p className="text-[10px] text-gray-400 font-mono">
|
|
{permission.name}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|