GGH/gg-backend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: remove delete action and add status toggle to tables

Browse Source
This commit is contained in:
Kailasdevdas
2026-05-11 10:52:30 +05:30
parent 2c6da93dfb
commit 4808e99ae5
3 changed files with 95 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Department.tsx
+31 -57
View File
@@ -6,7 +6,6 @@ import {
getDepartmentsApi,
createDepartmentApi,
updateDepartmentApi,
deleteDepartmentApi,
} from "@/api/department";
import {
@@ -40,7 +39,6 @@ import {
RefreshCw,
Plus,
Pencil,
Trash,
Eye,
ChevronLeft,
ChevronRight,
@@ -134,10 +132,18 @@ export default function DepartmentPage() {
setForm({...form, [e.target.name]: value});
}
function truncate(text: string, limit = 60) {
if (!text) return "-";
return text.length > limit ? text.substring(0, limit) + "..." : text;
}
const handleToggleStatus = async (dep: Department) => {
try {
const {departmentId, ...updateData} = dep;
await updateDepartmentApi(departmentId, {
...updateData,
isActive: !dep.isActive,
} as any);
fetchDepartments();
} catch (error) {
console.error("Failed to toggle status", error);
}
};
function openAdd() {
setEditing(null);
@@ -175,7 +181,7 @@ export default function DepartmentPage() {
try {
if (editing) {
const {departmentId, ...updateData} = form;
await updateDepartmentApi(editing.departmentId, updateData);
await updateDepartmentApi(editing.departmentId, form as any);
} else {
await createDepartmentApi(form);
}
@@ -187,17 +193,6 @@ export default function DepartmentPage() {
}
}
async function handleDelete(id: string) {
if (!confirm("Delete this department?")) return;
try {
await deleteDepartmentApi(id);
fetchDepartments();
} catch (error) {
console.error(error);
}
}
return (
<div className="p-6 space-y-6">
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
@@ -241,25 +236,19 @@ export default function DepartmentPage() {
<CardContent className="p-0 sm:p-6 space-y-4">
<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[650px] relative">
<Table className="w-full min-w-[1000px] table-fixed border-separate border-spacing-0">
<Table className="w-full min-w-[700px] table-fixed border-separate border-spacing-0">
<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
<TableRow>
<TableHead className="w-[80px] bg-background text-sm font-bold">
<TableHead className="w-[100px] bg-background text-sm font-bold">
Priority
</TableHead>
<TableHead className="w-[180px] bg-background text-sm font-bold">
<TableHead className="w-[300px] bg-background text-sm font-bold">
Name
</TableHead>
<TableHead className="w-[100px] bg-background text-sm font-bold">
Status
<TableHead className="w-[80px] bg-background text-sm font-bold">
Status (Active)
</TableHead>
<TableHead className="w-[250px] bg-background text-sm font-bold">
Para 1
</TableHead>
<TableHead className="w-[180px] bg-background text-sm font-bold">
Facilities
</TableHead>
<TableHead className="w-[140px] bg-background text-right text-sm font-bold">
<TableHead className="w-[80px] bg-background text-right text-sm font-bold">
Actions
</TableHead>
</TableRow>
@@ -268,14 +257,14 @@ export default function DepartmentPage() {
<TableBody>
{loading ? (
<TableRow>
<TableCell colSpan={6} className="text-center py-10">
<TableCell colSpan={4} className="text-center py-10">
<Loader2 className="h-8 w-8 animate-spin mx-auto" />
</TableCell>
</TableRow>
) : currentItems.length === 0 ? (
<TableRow>
<TableCell
colSpan={6}
colSpan={4}
className="text-center text-muted-foreground py-10 text-base"
>
No departments found
@@ -302,22 +291,17 @@ export default function DepartmentPage() {
{dep.departmentId}
</div>
</TableCell>
<TableCell>
<Badge variant={dep.isActive ? "default" : "secondary"}>
{dep.isActive ? "Active" : "Hidden"}
</Badge>
</TableCell>
<TableCell>
<div className="text-sm break-words whitespace-normal">
{truncate(dep.para1)}
</div>
</TableCell>
<TableCell>
<div className="text-sm break-words whitespace-normal">
{truncate(dep.facilities)}
<div className="flex items-center gap-2">
<Switch
checked={dep.isActive}
onCheckedChange={() => handleToggleStatus(dep)}
/>
<Badge
variant={dep.isActive ? "default" : "secondary"}
>
{dep.isActive ? "Active" : "Hidden"}
</Badge>
</div>
</TableCell>
@@ -340,15 +324,6 @@ export default function DepartmentPage() {
>
<Pencil className="h-4 w-4" />
</Button>
<Button
size="icon"
variant="ghost"
className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
onClick={() => handleDelete(dep.departmentId)}
>
<Trash className="h-4 w-4" />
</Button>
</div>
</TableCell>
</TableRow>
@@ -469,7 +444,6 @@ export default function DepartmentPage() {
placeholder="Services"
/>
{/* Status and Priority at bottom to keep original UI flow */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 border-t pt-4">
<div className="flex items-center justify-between p-3 border rounded-md">
<Label htmlFor="isActive" className="text-base cursor-pointer">