consultoria-as/GRH
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Project list and crud logic to endpoints

Browse Source
This commit is contained in:
Esteban
2025-12-18 23:14:16 -06:00
parent b93a8d30b0
commit 8204804511
3 changed files with 296 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.example Normal file
View File

@@ -0,0 +1,2 @@
VITE_API_BASE_URL=domain_url
VITE_API_TOKEN=api_token

7
.gitignore vendored
View File

@@ -12,6 +12,13 @@ dist
dist-ssr
*.local
# Environment variables
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json

406
src/pages/projects/ProjectsPage.tsx
View File

@@ -16,63 +16,46 @@ interface Project {
instructionManual: string;
}
/* ================= MOCK DATA ================= */
const mockProjects: Project[] = [
{
id: "1",
areaName: "Zona Norte",
deviceSN: "SN-001",
deviceName: "Sensor Alpha",
deviceType: "Flow Meter",
deviceStatus: "ACTIVE",
operator: "Juan Pérez",
installedTime: "2024-01-10",
communicationTime: "2024-01-11",
instructionManual: "Manual Alpha",
},
{
id: "2",
areaName: "Zona Centro",
deviceSN: "SN-002",
deviceName: "Sensor Beta",
deviceType: "Pressure Meter",
deviceStatus: "INACTIVE",
operator: "María López",
installedTime: "2024-02-05",
communicationTime: "2024-02-06",
instructionManual: "Manual Beta",
},
{
id: "3",
areaName: "Zona Sur",
deviceSN: "SN-003",
deviceName: "Sensor Gamma",
deviceType: "Flow Meter",
deviceStatus: "ACTIVE",
operator: "Carlos Ruiz",
installedTime: "2024-03-01",
communicationTime: "2024-03-02",
instructionManual: "Manual Gamma",
},
];
/* ================= API ================= */
const API_URL = "/api/v2/tables/m05u6wpquvdbv3c/records";
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
const API_URL = `${API_BASE_URL}/api/v3/data/ppfu31vhv5gf6i0/m05u6wpquvdbv3c/records`;
const API_TOKEN = import.meta.env.VITE_API_TOKEN;
const getAuthHeaders = () => ({
Authorization: `Bearer ${API_TOKEN}`,
"Content-Type": "application/json",
});
interface ProjectApiRecord {
id: number;
fields: {
"Area name"?: string;
"Device S/N"?: string;
"Device Name"?: string;
"Device Type"?: string;
"Device Status"?: string;
Operator?: string;
"Installed Time"?: string;
"Communication Time"?: string;
"Instruction Manual"?: string | null;
};
}
const fetchProjects = async (): Promise<Project[]> => {
const res = await fetch(API_URL);
const res = await fetch(API_URL, {
method: "GET",
headers: getAuthHeaders(),
});
const data = await res.json();
return data.records.map((r: any) => ({
id: r.id,
areaName: r.fields["Area Name"] ?? "",
return data.records.map((r: ProjectApiRecord) => ({
id: r.id.toString(),
areaName: r.fields["Area name"] ?? "",
deviceSN: r.fields["Device S/N"] ?? "",
deviceName: r.fields["Device Name"] ?? "",
deviceType: r.fields["Device Type"] ?? "",
deviceStatus:
r.fields["Device Status"] === "INACTIVE"
? "INACTIVE"
: "ACTIVE",
r.fields["Device Status"] === "Installed" ? "ACTIVE" : "INACTIVE",
operator: r.fields["Operator"] ?? "",
installedTime: r.fields["Installed Time"] ?? "",
communicationTime: r.fields["Communication Time"] ?? "",
@@ -83,13 +66,12 @@ const fetchProjects = async (): Promise<Project[]> => {
/* ================= COMPONENT ================= */
export default function ProjectsPage() {
const [projects, setProjects] = useState<Project[]>([]);
const [activeProject, setActiveProject] =
useState<Project | null>(null);
const [loading, setLoading] = useState(true);
const [activeProject, setActiveProject] = useState<Project | null>(null);
const [search, setSearch] = useState("");
const [showModal, setShowModal] = useState(false);
const [editingId, setEditingId] =
useState<string | null>(null);
const [editingId, setEditingId] = useState<string | null>(null);
const emptyProject: Omit<Project, "id"> = {
areaName: "",
@@ -103,20 +85,19 @@ export default function ProjectsPage() {
instructionManual: "",
};
const [form, setForm] =
useState<Omit<Project, "id">>(emptyProject);
const [form, setForm] = useState<Omit<Project, "id">>(emptyProject);
/* ================= LOAD ================= */
const loadProjects = async () => {
setLoading(true);
try {
const data = await fetchProjects();
if (data.length === 0) {
setProjects(mockProjects);
} else {
setProjects(data);
}
} catch {
setProjects(mockProjects);
setProjects(data);
} catch (error) {
console.error("Error loading projects:", error);
setProjects([]);
} finally {
setLoading(false);
}
};
@@ -125,36 +106,197 @@ export default function ProjectsPage() {
}, []);
/* ================= CRUD ================= */
const handleSave = () => {
if (editingId) {
setProjects((prev) =>
prev.map((p) =>
p.id === editingId
? { ...p, ...form }
: p
)
const createProject = async (
projectData: Omit<Project, "id">
): Promise<Project> => {
const res = await fetch(API_URL, {
method: "POST",
headers: getAuthHeaders(),
body: JSON.stringify({
fields: {
"Area name": projectData.areaName,
"Device S/N": projectData.deviceSN,
"Device Name": projectData.deviceName,
"Device Type": projectData.deviceType,
"Device Status":
projectData.deviceStatus === "ACTIVE" ? "Installed" : "Inactive",
Operator: projectData.operator,
"Installed Time": projectData.installedTime,
"Communication Time": projectData.communicationTime,
"Instruction Manual": projectData.instructionManual,
},
}),
});
if (!res.ok) {
throw new Error(
`Failed to create project: ${res.status} ${res.statusText}`
);
} else {
setProjects((prev) => [
...prev,
{ id: Date.now().toString(), ...form },
]);
}
setShowModal(false);
setEditingId(null);
setForm(emptyProject);
setActiveProject(null);
const data = await res.json();
const createdRecord = data.records?.[0];
if (!createdRecord) {
throw new Error("Invalid response format: no record returned");
}
return {
id: createdRecord.id.toString(),
areaName: createdRecord.fields["Area name"] ?? projectData.areaName,
deviceSN: createdRecord.fields["Device S/N"] ?? projectData.deviceSN,
deviceName: createdRecord.fields["Device Name"] ?? projectData.deviceName,
deviceType: createdRecord.fields["Device Type"] ?? projectData.deviceType,
deviceStatus:
createdRecord.fields["Device Status"] === "Installed"
? "ACTIVE"
: "INACTIVE",
operator: createdRecord.fields["Operator"] ?? projectData.operator,
installedTime:
createdRecord.fields["Installed Time"] ?? projectData.installedTime,
communicationTime:
createdRecord.fields["Communication Time"] ??
projectData.communicationTime,
instructionManual:
createdRecord.fields["Instruction Manual"] ??
projectData.instructionManual,
};
};
const handleDelete = () => {
const updateProject = async (
id: string,
projectData: Omit<Project, "id">
): Promise<Project> => {
const res = await fetch(API_URL, {
method: "PATCH",
headers: getAuthHeaders(),
body: JSON.stringify({
id: parseInt(id),
fields: {
"Area name": projectData.areaName,
"Device S/N": projectData.deviceSN,
"Device Name": projectData.deviceName,
"Device Type": projectData.deviceType,
"Device Status":
projectData.deviceStatus === "ACTIVE" ? "Installed" : "Inactive",
Operator: projectData.operator,
"Installed Time": projectData.installedTime,
"Communication Time": projectData.communicationTime,
"Instruction Manual": projectData.instructionManual,
},
}),
});
if (!res.ok) {
if (res.status === 400) {
const errorData = await res.json();
throw new Error(
`Bad Request: ${errorData.msg || "Invalid data provided"}`
);
}
throw new Error(
`Failed to update project: ${res.status} ${res.statusText}`
);
}
const data = await res.json();
const updatedRecord = data.records?.[0];
if (!updatedRecord) {
throw new Error("Invalid response format: no record returned");
}
return {
id: updatedRecord.id.toString(),
areaName: updatedRecord.fields["Area name"] ?? projectData.areaName,
deviceSN: updatedRecord.fields["Device S/N"] ?? projectData.deviceSN,
deviceName: updatedRecord.fields["Device Name"] ?? projectData.deviceName,
deviceType: updatedRecord.fields["Device Type"] ?? projectData.deviceType,
deviceStatus:
updatedRecord.fields["Device Status"] === "Installed"
? "ACTIVE"
: "INACTIVE",
operator: updatedRecord.fields["Operator"] ?? projectData.operator,
installedTime:
updatedRecord.fields["Installed Time"] ?? projectData.installedTime,
communicationTime:
updatedRecord.fields["Communication Time"] ??
projectData.communicationTime,
instructionManual:
updatedRecord.fields["Instruction Manual"] ??
projectData.instructionManual,
};
};
const deleteProject = async (id: string): Promise<void> => {
const res = await fetch(API_URL, {
method: "DELETE",
headers: getAuthHeaders(),
body: JSON.stringify({
id: id,
}),
});
if (!res.ok) {
if (res.status === 400) {
const errorData = await res.json();
throw new Error(
`Bad Request: ${errorData.msg || "Invalid data provided"}`
);
}
throw new Error(
`Failed to delete project: ${res.status} ${res.statusText}`
);
}
};
const handleSave = async () => {
try {
if (editingId) {
const updatedProject = await updateProject(editingId, form);
setProjects((prev) =>
prev.map((p) => (p.id === editingId ? updatedProject : p))
);
} else {
const newProject = await createProject(form);
setProjects((prev) => [...prev, newProject]);
}
setShowModal(false);
setEditingId(null);
setForm(emptyProject);
setActiveProject(null);
} catch (error) {
console.error("Error saving project:", error);
alert(
`Error saving project: ${
error instanceof Error ? error.message : "Please try again."
}`
);
}
};
const handleDelete = async () => {
if (!activeProject) return;
setProjects((prev) =>
prev.filter(
(p) => p.id !== activeProject.id
)
const confirmDelete = window.confirm(
`Are you sure you want to delete the project "${activeProject.deviceName}"?`
);
setActiveProject(null);
if (!confirmDelete) return;
try {
await deleteProject(activeProject.id);
setProjects((prev) => prev.filter((p) => p.id !== activeProject.id));
setActiveProject(null);
} catch (error) {
console.error("Error deleting project:", error);
alert(
`Error deleting project: ${
error instanceof Error ? error.message : "Please try again."
}`
);
}
};
/* ================= FILTER ================= */
@@ -172,17 +314,12 @@ export default function ProjectsPage() {
<div
className="rounded-xl shadow p-6 text-white flex justify-between items-center"
style={{
background:
"linear-gradient(135deg, #4c5f9e, #2a355d, #566bb8)",
background: "linear-gradient(135deg, #4c5f9e, #2a355d, #566bb8)",
}}
>
<div>
<h1 className="text-2xl font-bold">
Project Management
</h1>
<p className="text-sm text-blue-100">
Projects registered
</p>
<h1 className="text-2xl font-bold">Project Management</h1>
<p className="text-sm text-blue-100">Projects registered</p>
</div>
<div className="flex gap-3">
@@ -248,6 +385,7 @@ export default function ProjectsPage() {
{/* TABLE */}
<MaterialTable
title="Projects"
isLoading={loading}
columns={[
{ title: "Area Name", field: "areaName" },
{ title: "Device S/N", field: "deviceSN" },
@@ -274,21 +412,25 @@ export default function ProjectsPage() {
{ title: "Instruction Manual", field: "instructionManual" },
]}
data={filtered}
onRowClick={(_, rowData) =>
setActiveProject(rowData as Project)
}
onRowClick={(_, rowData) => setActiveProject(rowData as Project)}
options={{
search: false,
paging: true,
sorting: true,
rowStyle: (rowData) => ({
backgroundColor:
activeProject?.id ===
(rowData as Project).id
activeProject?.id === (rowData as Project).id
? "#EEF2FF"
: "#FFFFFF",
}),
}}
localization={{
body: {
emptyDataSourceMessage: loading
? "Loading projects..."
: "No projects found. Click 'Add' to create your first project.",
},
}}
/>
</div>
@@ -300,46 +442,74 @@ export default function ProjectsPage() {
{editingId ? "Edit Project" : "Add Project"}
</h2>
<input className="w-full border px-3 py-2 rounded" placeholder="Area Name"
<input
className="w-full border px-3 py-2 rounded"
placeholder="Area Name"
value={form.areaName}
onChange={(e) => setForm({ ...form, areaName: e.target.value })} />
onChange={(e) => setForm({ ...form, areaName: e.target.value })}
/>
<input className="w-full border px-3 py-2 rounded" placeholder="Device S/N"
<input
className="w-full border px-3 py-2 rounded"
placeholder="Device S/N"
value={form.deviceSN}
onChange={(e) => setForm({ ...form, deviceSN: e.target.value })} />
onChange={(e) => setForm({ ...form, deviceSN: e.target.value })}
/>
<input className="w-full border px-3 py-2 rounded" placeholder="Device Name"
<input
className="w-full border px-3 py-2 rounded"
placeholder="Device Name"
value={form.deviceName}
onChange={(e) => setForm({ ...form, deviceName: e.target.value })} />
onChange={(e) => setForm({ ...form, deviceName: e.target.value })}
/>
<input className="w-full border px-3 py-2 rounded" placeholder="Device Type"
<input
className="w-full border px-3 py-2 rounded"
placeholder="Device Type"
value={form.deviceType}
onChange={(e) => setForm({ ...form, deviceType: e.target.value })} />
onChange={(e) => setForm({ ...form, deviceType: e.target.value })}
/>
<input className="w-full border px-3 py-2 rounded" placeholder="Operator"
<input
className="w-full border px-3 py-2 rounded"
placeholder="Operator"
value={form.operator}
onChange={(e) => setForm({ ...form, operator: e.target.value })} />
onChange={(e) => setForm({ ...form, operator: e.target.value })}
/>
<input className="w-full border px-3 py-2 rounded" placeholder="Installed Time"
<input
className="w-full border px-3 py-2 rounded"
placeholder="Installed Time"
value={form.installedTime}
onChange={(e) => setForm({ ...form, installedTime: e.target.value })} />
onChange={(e) =>
setForm({ ...form, installedTime: e.target.value })
}
/>
<input className="w-full border px-3 py-2 rounded" placeholder="Communication Time"
<input
className="w-full border px-3 py-2 rounded"
placeholder="Communication Time"
value={form.communicationTime}
onChange={(e) => setForm({ ...form, communicationTime: e.target.value })} />
onChange={(e) =>
setForm({ ...form, communicationTime: e.target.value })
}
/>
<input className="w-full border px-3 py-2 rounded" placeholder="Instruction Manual"
<input
className="w-full border px-3 py-2 rounded"
placeholder="Instruction Manual"
value={form.instructionManual}
onChange={(e) => setForm({ ...form, instructionManual: e.target.value })} />
onChange={(e) =>
setForm({ ...form, instructionManual: e.target.value })
}
/>
<button
onClick={() =>
setForm({
...form,
deviceStatus:
form.deviceStatus === "ACTIVE"
? "INACTIVE"
: "ACTIVE",
form.deviceStatus === "ACTIVE" ? "INACTIVE" : "ACTIVE",
})
}
className="w-full border rounded px-3 py-2"
@@ -348,9 +518,7 @@ export default function ProjectsPage() {
</button>
<div className="flex justify-end gap-2 pt-3">
<button onClick={() => setShowModal(false)}>
Cancel
</button>
<button onClick={() => setShowModal(false)}>Cancel</button>
<button
onClick={handleSave}
className="bg-[#4c5f9e] text-white px-4 py-2 rounded"