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/Career.tsx
+30 -37
View File
@@ -1,7 +1,6 @@
import { useState, useEffect, useCallback } from "react";
import { getCareersApi, deleteCareerApi } from "@/api/career";
import apiClient from "@/api/client";
import { getCareersApi, updateCareerApi, createCareerApi } from "@/api/career";
import {
Table,
@@ -31,7 +30,6 @@ import {
Loader2,
Plus,
Pencil,
Trash,
RefreshCw,
ChevronLeft,
ChevronRight,
@@ -96,6 +94,18 @@ export default function CareerPage() {
setForm({ ...form, [e.target.name]: e.target.value });
}
const handleToggleStatus = async (item: any) => {
try {
await updateCareerApi(item.id, {
...item,
isActive: !item.isActive,
} as any);
fetchAll();
} catch (error) {
console.error("Failed to toggle status", error);
}
};
function openAdd() {
setEditing(null);
setForm({
@@ -131,10 +141,11 @@ export default function CareerPage() {
async function handleSubmit() {
try {
if (editing) {
await apiClient.patch(`/careers/${editing.id}`, form);
await updateCareerApi(editing.id, form);
} else {
await apiClient.post("/careers", form);
await createCareerApi(form);
}
setOpenModal(false);
fetchAll();
} catch (err) {
@@ -142,12 +153,6 @@ export default function CareerPage() {
}
}
async function handleDelete(id: number) {
if (!confirm("Delete career?")) return;
await deleteCareerApi(id);
fetchAll();
}
return (
<div className="p-6 space-y-6">
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
@@ -185,13 +190,13 @@ export default function CareerPage() {
<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-[800px] table-fixed border-separate border-spacing-0">
<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
<TableRow>
<TableHead className="w-[60px] bg-background font-bold text-sm">
<TableHead className="w-[80px] bg-background font-bold text-sm">
Priority
</TableHead>
<TableHead className="w-[200px] bg-background font-bold text-sm">
<TableHead className="w-[250px] bg-background font-bold text-sm">
Post & Designation
</TableHead>
<TableHead className="w-[200px] bg-background font-bold text-sm">
@@ -200,13 +205,10 @@ export default function CareerPage() {
<TableHead className="w-[120px] bg-background font-bold text-sm">
Experience
</TableHead>
<TableHead className="w-[200px] bg-background font-bold text-sm">
Contact Info
<TableHead className="w-[80px] bg-background font-bold text-sm">
Status (Active)
</TableHead>
<TableHead className="w-[100px] bg-background font-bold text-sm">
Visibility
</TableHead>
<TableHead className="w-[120px] bg-background font-bold text-right text-sm">
<TableHead className="w-[80px] bg-background font-bold text-right text-sm">
Actions
</TableHead>
</TableRow>
@@ -215,14 +217,14 @@ export default function CareerPage() {
<TableBody>
{loading ? (
<TableRow>
<TableCell colSpan={7} className="text-center py-10">
<TableCell colSpan={6} className="text-center py-10">
<Loader2 className="h-8 w-8 animate-spin mx-auto" />
</TableCell>
</TableRow>
) : currentItems.length === 0 ? (
<TableRow>
<TableCell
colSpan={7}
colSpan={6}
className="text-center text-muted-foreground py-10 text-base"
>
No careers found
@@ -251,18 +253,18 @@ export default function CareerPage() {
{item.experienceNeed}
</TableCell>
<TableCell>
<div className="text-sm font-medium">{item.email}</div>
<div className="text-xs text-muted-foreground">
{item.number}
</div>
</TableCell>
<TableCell>
<div className="flex items-center gap-2">
<Switch
checked={item.isActive}
onCheckedChange={() => handleToggleStatus(item)}
/>
<Badge
variant={item.isActive ? "default" : "secondary"}
className="capitalize"
>
{item.isActive ? "Active" : "Hidden"}
</Badge>
</div>
</TableCell>
<TableCell className="text-right">
@@ -275,15 +277,6 @@ export default function CareerPage() {
>
<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(item.id)}
>
<Trash className="h-4 w-4" />
</Button>
</div>
</TableCell>
</TableRow>
frontend/src/pages/Department.tsx
+28 -54
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"}>
<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>
</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>
</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">
frontend/src/pages/Doctor.tsx
+29 -33
View File
@@ -7,7 +7,6 @@ import {
getDoctorsApi,
createDoctorApi,
updateDoctorApi,
deleteDoctorApi,
getDoctorTimingApi,
} from "@/api/doctor";
import { getDepartmentsApi } from "@/api/department";
@@ -39,7 +38,6 @@ import {
RefreshCw,
Plus,
Pencil,
Trash,
ChevronLeft,
ChevronRight,
} from "lucide-react";
@@ -139,6 +137,16 @@ export default function DoctorPage() {
setForm({ ...form, [e.target.name]: value });
}
const handleToggleStatus = async (doc: any) => {
try {
const updatedDoc = { ...doc, isActive: !doc.isActive };
await updateDoctorApi(doc.doctorId, updatedDoc);
fetchAll();
} catch (err) {
console.error("Failed to update status", err);
}
};
function handleDepartmentToggle(depId: string) {
const exists = form.departments.find((d: any) => d.departmentId === depId);
if (exists) {
@@ -236,16 +244,6 @@ export default function DoctorPage() {
}
}
async function handleDelete(id: string) {
if (!confirm("Delete this doctor?")) return;
try {
await deleteDoctorApi(id);
fetchAll();
} 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">
@@ -308,19 +306,19 @@ export default function DoctorPage() {
<TableHead className="w-[80px] bg-background text-sm font-bold">
Priority{" "}
</TableHead>
<TableHead className="w-[200px] bg-background text-sm font-bold">
<TableHead className="w-[180px] bg-background text-sm font-bold">
Doctor Info
</TableHead>
<TableHead className="w-[100px] bg-background text-sm font-bold">
Status
</TableHead>
<TableHead className="w-[150px] bg-background text-sm font-bold">
Designation
</TableHead>
<TableHead className="w-[220px] bg-background text-sm font-bold">
Departments (Hierarchy)
</TableHead>
<TableHead className="w-[120px] bg-background text-right text-sm font-bold">
<TableHead className="w-[80px] bg-background text-sm font-bold">
Status (Active)
</TableHead>
<TableHead className="w-[80px] bg-background text-right text-sm font-bold">
Actions
</TableHead>
</TableRow>
@@ -361,12 +359,6 @@ export default function DoctorPage() {
</div>
</TableCell>
<TableCell>
<Badge variant={doc.isActive ? "default" : "secondary"}>
{doc.isActive ? "Active" : "Hidden"}
</Badge>
</TableCell>
<TableCell>
<div
className="truncate text-sm font-medium"
@@ -396,6 +388,20 @@ export default function DoctorPage() {
</div>
</TableCell>
<TableCell>
<div className="flex items-center gap-2">
<Switch
checked={doc.isActive}
onCheckedChange={() => handleToggleStatus(doc)}
/>
<Badge
variant={doc.isActive ? "default" : "secondary"}
>
{doc.isActive ? "Active" : "Hidden"}
</Badge>
</div>
</TableCell>
<TableCell className="text-right">
<div className="flex justify-end gap-2">
<Button
@@ -406,14 +412,6 @@ export default function DoctorPage() {
>
<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(doc.doctorId)}
>
<Trash className="h-4 w-4" />
</Button>
</div>
</TableCell>
</TableRow>
@@ -622,8 +620,6 @@ export default function DoctorPage() {
const depName = departments.find(
(d) => d.departmentId === dep.departmentId,
)?.name;
console.log("doctor department sortOrder", dep.sortOrder);
console.log("dep", dep);
return (
<div
key={dep.departmentId}