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

Projects api improve

Browse Source
This commit is contained in:
Esteban
2025-12-18 23:29:15 -06:00
parent 8204804511
commit bc9cc3b7f7
4 changed files with 277 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/pages/concentrators/ConcentratorsPage.tsx
View File

@@ -1,7 +1,8 @@
import { useState, useEffect, useMemo } from "react";
import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react";
import MaterialTable from "@material-table/core";
import { fetchProjects, createConcentrator } from "./concentrators.api";
import { fetchProjectNames } from "../../api/projects";
import { createConcentrator } from "./concentrators.api";
/* ================= TYPES ================= */
interface Concentrator {
@@ -37,7 +38,7 @@ export default function ConcentratorsPage() {
useEffect(() => {
const loadProjects = async () => {
try {
const projects = await fetchProjects();
const projects = await fetchProjectNames();
setAllProjects(projects);
} catch (error) {
console.error('Error loading projects:', error);
@@ -180,10 +181,12 @@ export default function ConcentratorsPage() {
value={selectedProject}
onChange={(e) => setSelectedProject(e.target.value)}
className="w-full border px-3 py-2 rounded"
disabled={loadingProjects}
disabled={loadingProjects || visibleProjects.length === 0}
>
{loadingProjects ? (
<option>Loading projects...</option>
) : visibleProjects.length === 0 ? (
<option>No projects available</option>
) : (
visibleProjects.map((proj) => (
<option key={proj} value={proj}>
@@ -192,6 +195,12 @@ export default function ConcentratorsPage() {
))
)}
</select>
{visibleProjects.length === 0 && !loadingProjects && (
<p className="text-sm text-gray-500 mt-2">
No projects available. Please contact your administrator.
</p>
)}
</div>
{/* MAIN */}
@@ -213,7 +222,8 @@ export default function ConcentratorsPage() {
setEditingSerial(null);
setShowModal(true);
}}
className="flex items-center gap-2 px-4 py-2 bg-white text-[#4c5f9e] rounded-lg"
disabled={!selectedProject || visibleProjects.length === 0}
className="flex items-center gap-2 px-4 py-2 bg-white text-[#4c5f9e] rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
>
<Plus size={16} /> Add
</button>

103
src/pages/concentrators/concentrators.api.ts
View File

@@ -1,27 +1,3 @@
interface ProjectRecord {
id: string;
fields: {
"Project ID": string;
"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;
};
}
interface ProjectsResponse {
records: ProjectRecord[];
next?: string;
prev?: string;
nestedNext?: string;
nestedPrev?: string;
}
export const createConcentrator = async (concentratorData: {
"Area Name": string;
"Device S/N": string;
@@ -51,82 +27,3 @@ export const createConcentrator = async (concentratorData: {
throw error;
}
};
export const fetchProjects = async (): Promise<string[]> => {
try {
// const response = await fetch('/api/v3/data/ppfu31vhv5gf6i0/m05u6wpquvdbv3c/records');
// const data: ProjectsResponse = await response.json();
const dummyResponse: ProjectsResponse = {
records: [
{
id: "rec1",
fields: {
"Project ID": "1",
"Area name": "GRH (PADRE)",
"Device S/N": "SN001",
"Device Name": "Device 1",
"Device Type": "Type A",
"Device Status": "Active",
"Operator": "Op1",
"Installed Time": "2023-01-01",
"Communication Time": "2023-01-02",
"Instruction Manual": "Manual 1"
}
},
{
id: "rec2",
fields: {
"Project ID": "2",
"Area name": "CESPT",
"Device S/N": "SN002",
"Device Name": "Device 2",
"Device Type": "Type B",
"Device Status": "Active",
"Operator": "Op2",
"Installed Time": "2023-01-02",
"Communication Time": "2023-01-03",
"Instruction Manual": "Manual 2"
}
},
{
id: "rec3",
fields: {
"Project ID": "3",
"Area name": "Proyecto A",
"Device S/N": "SN003",
"Device Name": "Device 3",
"Device Type": "Type C",
"Device Status": "Inactive",
"Operator": "Op3",
"Installed Time": "2023-01-03",
"Communication Time": "2023-01-04",
"Instruction Manual": "Manual 3"
}
},
{
id: "rec4",
fields: {
"Project ID": "4",
"Area name": "Proyecto B",
"Device S/N": "SN004",
"Device Name": "Device 4",
"Device Type": "Type D",
"Device Status": "Active",
"Operator": "Op4",
"Installed Time": "2023-01-04",
"Communication Time": "2023-01-05",
"Instruction Manual": "Manual 4"
}
}
]
};
const projectNames = [...new Set(dummyResponse.records.map(record => record.fields["Area name"]))];
return projectNames;
} catch (error) {
console.error('Error fetching projects:', error);
return ["GRH (PADRE)", "CESPT", "Proyecto A", "Proyecto B"];
}
};

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

@@ -1,67 +1,13 @@
import { useEffect, useState } from "react";
import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react";
import MaterialTable from "@material-table/core";
/* ================= TYPES ================= */
interface Project {
id: string;
areaName: string;
deviceSN: string;
deviceName: string;
deviceType: string;
deviceStatus: "ACTIVE" | "INACTIVE";
operator: string;
installedTime: string;
communicationTime: string;
instructionManual: string;
}
/* ================= API ================= */
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, {
method: "GET",
headers: getAuthHeaders(),
});
const data = await res.json();
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"] === "Installed" ? "ACTIVE" : "INACTIVE",
operator: r.fields["Operator"] ?? "",
installedTime: r.fields["Installed Time"] ?? "",
communicationTime: r.fields["Communication Time"] ?? "",
instructionManual: r.fields["Instruction Manual"] ?? "",
}));
};
import {
Project,
fetchProjects,
createProject as apiCreateProject,
updateProject as apiUpdateProject,
deleteProject as apiDeleteProject,
} from "../../api/projects";
/* ================= COMPONENT ================= */
export default function ProjectsPage() {
@@ -105,160 +51,16 @@ export default function ProjectsPage() {
loadProjects();
}, []);
/* ================= CRUD ================= */
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}`
);
}
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 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);
const updatedProject = await apiUpdateProject(editingId, form);
setProjects((prev) =>
prev.map((p) => (p.id === editingId ? updatedProject : p))
);
} else {
const newProject = await createProject(form);
const newProject = await apiCreateProject(form);
setProjects((prev) => [...prev, newProject]);
}
@@ -286,7 +88,7 @@ export default function ProjectsPage() {
if (!confirmDelete) return;
try {
await deleteProject(activeProject.id);
await apiDeleteProject(activeProject.id);
setProjects((prev) => prev.filter((p) => p.id !== activeProject.id));
setActiveProject(null);
} catch (error) {