Refactor projects page's component and UI
This commit is contained in:
Takeshi Kimata
@@ -11,7 +11,7 @@ import {
|
|||||||
ModalBody,
|
ModalBody,
|
||||||
ModalFooter,
|
ModalFooter,
|
||||||
} from "@nextui-org/react";
|
} from "@nextui-org/react";
|
||||||
import { ProjectType } from "./page";
|
import { ProjectType } from "@/types/project";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
@@ -20,7 +20,7 @@ type Props = {
|
|||||||
onSubmit: (name: string, detail: string) => void;
|
onSubmit: (name: string, detail: string) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function ProjectDialog({
|
export default function ProjectDialog({
|
||||||
isOpen,
|
isOpen,
|
||||||
editingProject,
|
editingProject,
|
||||||
onCancel,
|
onCancel,
|
||||||
108
frontend/app/projects/ProjectsPage.tsx
Normal file
108
frontend/app/projects/ProjectsPage.tsx
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
"use client";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { Button } from "@nextui-org/react";
|
||||||
|
import { Plus } from "lucide-react";
|
||||||
|
import { ProjectType } from "@/types/project";
|
||||||
|
import ProjectsTable from "./ProjectsTable";
|
||||||
|
import ProjectDialog from "./ProjectDialog";
|
||||||
|
import {
|
||||||
|
fetchProjects,
|
||||||
|
createProject,
|
||||||
|
updateProject,
|
||||||
|
deleteProject,
|
||||||
|
} from "./projectsControl";
|
||||||
|
|
||||||
|
export default function ProjectsPage() {
|
||||||
|
const [projects, setProjects] = useState([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function fetchDataEffect() {
|
||||||
|
try {
|
||||||
|
const data = await fetchProjects();
|
||||||
|
setProjects(data);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error in effect:", error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchDataEffect();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// dialog
|
||||||
|
const [isProjectDialogOpen, setIsProjectDialogOpen] = useState(false);
|
||||||
|
const [editingProject, setEditingProject] = useState<ProjectType | null>(
|
||||||
|
null
|
||||||
|
);
|
||||||
|
const openDialogForCreate = () => {
|
||||||
|
setIsProjectDialogOpen(true);
|
||||||
|
setEditingProject(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeDialog = () => {
|
||||||
|
setIsProjectDialogOpen(false);
|
||||||
|
setEditingProject(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = async (name: string, detail: string) => {
|
||||||
|
if (editingProject) {
|
||||||
|
const updatedProject = await updateProject(
|
||||||
|
editingProject.id,
|
||||||
|
name,
|
||||||
|
detail
|
||||||
|
);
|
||||||
|
const updatedProjects = projects.map((project) =>
|
||||||
|
project.id === updatedProject.id ? updatedProject : project
|
||||||
|
);
|
||||||
|
setProjects(updatedProjects);
|
||||||
|
} else {
|
||||||
|
const newProject = await createProject(name, detail);
|
||||||
|
setProjects([...projects, newProject]);
|
||||||
|
}
|
||||||
|
closeDialog();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onEditClick = (project: ProjectType) => {
|
||||||
|
setEditingProject(project);
|
||||||
|
setIsProjectDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onDeleteClick = async (projectId: number) => {
|
||||||
|
try {
|
||||||
|
await deleteProject(projectId);
|
||||||
|
setProjects(projects.filter((project) => project.id !== projectId));
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error deleting project:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto max-w-3xl pt-16 px-6 flex-grow">
|
||||||
|
<div className="w-full p-3 flex items-center justify-between">
|
||||||
|
<h3 className="font-bold">Projects</h3>
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
startContent={<Plus size={16} />}
|
||||||
|
size="sm"
|
||||||
|
color="primary"
|
||||||
|
onClick={openDialogForCreate}
|
||||||
|
>
|
||||||
|
New Project
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ProjectsTable
|
||||||
|
projects={projects}
|
||||||
|
onEditProject={onEditClick}
|
||||||
|
onDeleteProject={onDeleteClick}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ProjectDialog
|
||||||
|
isOpen={isProjectDialogOpen}
|
||||||
|
editingProject={editingProject}
|
||||||
|
onCancel={closeDialog}
|
||||||
|
onSubmit={onSubmit}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
162
frontend/app/projects/ProjectsTable.tsx
Normal file
162
frontend/app/projects/ProjectsTable.tsx
Normal file
@@ -0,0 +1,162 @@
|
|||||||
|
import { useState, useMemo, useCallback } from "react";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableHeader,
|
||||||
|
TableColumn,
|
||||||
|
TableBody,
|
||||||
|
TableRow,
|
||||||
|
TableCell,
|
||||||
|
Button,
|
||||||
|
DropdownTrigger,
|
||||||
|
Dropdown,
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownItem,
|
||||||
|
SortDescriptor,
|
||||||
|
Link,
|
||||||
|
} from "@nextui-org/react";
|
||||||
|
import { MoreVertical } from "lucide-react";
|
||||||
|
import { ProjectType } from "@/types/project";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
|
||||||
|
const headerColumns = [
|
||||||
|
{ name: "ID", uid: "id", sortable: true },
|
||||||
|
{ name: "Name", uid: "name", sortable: true },
|
||||||
|
{ name: "Detail", uid: "detail", sortable: true },
|
||||||
|
{ name: "Last update", uid: "updatedAt", sortable: true },
|
||||||
|
{ name: "Actions", uid: "actions" },
|
||||||
|
];
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
projects: ProjectType[];
|
||||||
|
onEditProject: (project: ProjectType) => void;
|
||||||
|
onDeleteProject: (projectId: number) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function ProjectsTable({
|
||||||
|
projects,
|
||||||
|
onEditProject,
|
||||||
|
onDeleteProject,
|
||||||
|
}: Props) {
|
||||||
|
const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
|
||||||
|
column: "id",
|
||||||
|
direction: "ascending",
|
||||||
|
});
|
||||||
|
|
||||||
|
const sortedItems = useMemo(() => {
|
||||||
|
return [...projects].sort((a: ProjectType, b: ProjectType) => {
|
||||||
|
const first = a[sortDescriptor.column as keyof ProjectType] as number;
|
||||||
|
const second = b[sortDescriptor.column as keyof ProjectType] as number;
|
||||||
|
const cmp = first < second ? -1 : first > second ? 1 : 0;
|
||||||
|
|
||||||
|
return sortDescriptor.direction === "descending" ? -cmp : cmp;
|
||||||
|
});
|
||||||
|
}, [sortDescriptor, projects]);
|
||||||
|
|
||||||
|
const truncateText = (text: string, maxLength: number) => {
|
||||||
|
return text.length > maxLength ? text.slice(0, maxLength) + "..." : text;
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderCell = useCallback((project: ProjectType, columnKey: Key) => {
|
||||||
|
const cellValue = project[columnKey as keyof ProjectType];
|
||||||
|
|
||||||
|
switch (columnKey) {
|
||||||
|
case "id":
|
||||||
|
return <span>{cellValue}</span>;
|
||||||
|
case "name":
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
underline="hover"
|
||||||
|
href={`/projects/${project.id}/home`}
|
||||||
|
className="text-blue-500"
|
||||||
|
>
|
||||||
|
{cellValue}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
case "detail":
|
||||||
|
const maxLength = 20;
|
||||||
|
const truncatedValue = truncateText(cellValue, maxLength);
|
||||||
|
return (
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<div>{truncatedValue}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
case "updatedAt":
|
||||||
|
return <span>{dayjs(cellValue).format("YYYY/MM/DD HH:mm")}</span>;
|
||||||
|
case "actions":
|
||||||
|
return (
|
||||||
|
<Dropdown>
|
||||||
|
<DropdownTrigger>
|
||||||
|
<Button isIconOnly radius="full" size="sm" variant="light">
|
||||||
|
<MoreVertical size={16} />
|
||||||
|
</Button>
|
||||||
|
</DropdownTrigger>
|
||||||
|
<DropdownMenu aria-label="project actions">
|
||||||
|
<DropdownItem onClick={() => onEditProject(project)}>
|
||||||
|
Edit project
|
||||||
|
</DropdownItem>
|
||||||
|
<DropdownItem
|
||||||
|
className="text-danger"
|
||||||
|
onClick={() => onDeleteProject(project.id)}
|
||||||
|
>
|
||||||
|
Delete project
|
||||||
|
</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
return cellValue;
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const classNames = useMemo(
|
||||||
|
() => ({
|
||||||
|
wrapper: ["max-w-3xl"],
|
||||||
|
th: ["bg-transparent", "text-default-500", "border-b", "border-divider"],
|
||||||
|
td: [
|
||||||
|
// changing the rows border radius
|
||||||
|
// first
|
||||||
|
"group-data-[first=true]:first:before:rounded-none",
|
||||||
|
"group-data-[first=true]:last:before:rounded-none",
|
||||||
|
// middle
|
||||||
|
"group-data-[middle=true]:before:rounded-none",
|
||||||
|
// last
|
||||||
|
"group-data-[last=true]:first:before:rounded-none",
|
||||||
|
"group-data-[last=true]:last:before:rounded-none",
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Table
|
||||||
|
isCompact
|
||||||
|
aria-label="Projects table"
|
||||||
|
classNames={classNames}
|
||||||
|
sortDescriptor={sortDescriptor}
|
||||||
|
onSortChange={setSortDescriptor}
|
||||||
|
>
|
||||||
|
<TableHeader columns={headerColumns}>
|
||||||
|
{(column) => (
|
||||||
|
<TableColumn
|
||||||
|
key={column.uid}
|
||||||
|
align={column.uid === "actions" ? "center" : "start"}
|
||||||
|
allowsSorting={column.sortable}
|
||||||
|
>
|
||||||
|
{column.name}
|
||||||
|
</TableColumn>
|
||||||
|
)}
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody emptyContent={"No cases found"} items={sortedItems}>
|
||||||
|
{(item) => (
|
||||||
|
<TableRow key={item.id}>
|
||||||
|
{(columnKey) => (
|
||||||
|
<TableCell>{renderCell(item, columnKey)}</TableCell>
|
||||||
|
)}
|
||||||
|
</TableRow>
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,231 +1,9 @@
|
|||||||
"use client";
|
import ProjectsPage from "./ProjectsPage";
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { title } from "@/components/primitives";
|
|
||||||
import { ProjectCard } from "./project-card";
|
|
||||||
import { ProjectDialog } from "./project-dialog";
|
|
||||||
import { Button } from "@nextui-org/react";
|
|
||||||
|
|
||||||
import Config from "@/config/config";
|
|
||||||
const apiServer = Config.apiServer;
|
|
||||||
|
|
||||||
export type ProjectType = {
|
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
detail: string;
|
|
||||||
createdAt: string;
|
|
||||||
updatedAt: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* fetch project records
|
|
||||||
*
|
|
||||||
* @param {string} url - API endpoint url
|
|
||||||
* @returns {Promise<Array>} - project record array
|
|
||||||
* @throws {Error}
|
|
||||||
*/
|
|
||||||
async function fetchProjects(url: string) {
|
|
||||||
try {
|
|
||||||
const response = await fetch(url, {
|
|
||||||
method: "GET",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
return data;
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error fetching data:", error.message);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Create project
|
|
||||||
*/
|
|
||||||
async function createProject(name: string, detail: string) {
|
|
||||||
const newProjectData = {
|
|
||||||
name: name,
|
|
||||||
detail: detail,
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchOptions = {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
body: JSON.stringify(newProjectData),
|
|
||||||
};
|
|
||||||
|
|
||||||
const url = `${apiServer}/projects`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(url, fetchOptions);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
||||||
}
|
|
||||||
const data = await response.json();
|
|
||||||
return data;
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error creating new project:", error);
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Update project
|
|
||||||
*/
|
|
||||||
async function updateProject(projectId: number, name: string, detail: string) {
|
|
||||||
const updatedProjectData = {
|
|
||||||
name: name,
|
|
||||||
detail: detail,
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchOptions = {
|
|
||||||
method: "PUT",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
body: JSON.stringify(updatedProjectData),
|
|
||||||
};
|
|
||||||
|
|
||||||
const url = `${apiServer}/projects/${projectId}`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(url, fetchOptions);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
||||||
}
|
|
||||||
const data = await response.json();
|
|
||||||
return data;
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error updating project:", error);
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Delete project
|
|
||||||
*/
|
|
||||||
async function deleteProject(projectId: number) {
|
|
||||||
const fetchOptions = {
|
|
||||||
method: "DELETE",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const url = `${apiServer}/projects/${projectId}`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(url, fetchOptions);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error deleting project:", error);
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function ProjectsPage() {
|
|
||||||
// projects
|
|
||||||
const [projects, setProjects] = useState([]);
|
|
||||||
const url = `${apiServer}/projects`;
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
async function fetchDataEffect() {
|
|
||||||
try {
|
|
||||||
const data = await fetchProjects(url);
|
|
||||||
setProjects(data);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error in effect:", error.message);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchDataEffect();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// dialog
|
|
||||||
const [isProjectDialogOpen, setIsProjectDialogOpen] = useState(false);
|
|
||||||
const [editingProject, setEditingProject] = useState<ProjectType | null>(
|
|
||||||
null
|
|
||||||
);
|
|
||||||
const openDialogForCreate = () => {
|
|
||||||
setIsProjectDialogOpen(true);
|
|
||||||
setEditingProject(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const closeDialog = () => {
|
|
||||||
setIsProjectDialogOpen(false);
|
|
||||||
setEditingProject(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSubmit = async (name: string, detail: string) => {
|
|
||||||
if (editingProject) {
|
|
||||||
const updatedProject = await updateProject(
|
|
||||||
editingProject.id,
|
|
||||||
name,
|
|
||||||
detail
|
|
||||||
);
|
|
||||||
const updatedProjects = projects.map((project) =>
|
|
||||||
project.id === updatedProject.id ? updatedProject : project
|
|
||||||
);
|
|
||||||
setProjects(updatedProjects);
|
|
||||||
} else {
|
|
||||||
const newProject = await createProject(name, detail);
|
|
||||||
setProjects([...projects, newProject]);
|
|
||||||
}
|
|
||||||
closeDialog();
|
|
||||||
};
|
|
||||||
|
|
||||||
const onEditClick = (project: ProjectType) => {
|
|
||||||
setEditingProject(project);
|
|
||||||
setIsProjectDialogOpen(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onDeleteClick = async (projectId: number) => {
|
|
||||||
try {
|
|
||||||
await deleteProject(projectId);
|
|
||||||
setProjects(projects.filter((project) => project.id !== projectId));
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error deleting project:", error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto max-w-7xl pt-16 px-6 flex-grow">
|
<>
|
||||||
<div className="flex h-full items-center">
|
<ProjectsPage />
|
||||||
<h1 className={title()}>Projects</h1>
|
</>
|
||||||
<Button
|
|
||||||
color="primary"
|
|
||||||
onClick={openDialogForCreate}
|
|
||||||
className="ms-5 mt-3"
|
|
||||||
>
|
|
||||||
Create
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-wrap items-stretch gap-4 mt-5">
|
|
||||||
{projects.map((project, index) => (
|
|
||||||
<ProjectCard
|
|
||||||
key={index}
|
|
||||||
project={project}
|
|
||||||
onEditClick={onEditClick}
|
|
||||||
onDeleteClick={onDeleteClick}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ProjectDialog
|
|
||||||
isOpen={isProjectDialogOpen}
|
|
||||||
editingProject={editingProject}
|
|
||||||
onCancel={closeDialog}
|
|
||||||
onSubmit={onSubmit}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,62 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import {
|
|
||||||
Link,
|
|
||||||
Button,
|
|
||||||
Dropdown,
|
|
||||||
DropdownTrigger,
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownItem,
|
|
||||||
Card,
|
|
||||||
CardHeader,
|
|
||||||
CardBody,
|
|
||||||
Divider,
|
|
||||||
} from "@nextui-org/react";
|
|
||||||
import { MoreVertical } from "lucide-react";
|
|
||||||
|
|
||||||
export function ProjectCard({ project, onEditClick, onDeleteClick }) {
|
|
||||||
return (
|
|
||||||
<Card className="w-[250px]">
|
|
||||||
<CardHeader className="flex gap-3 h-[50px] justify-between text-ellipsis overflow-hidden">
|
|
||||||
<div className="flex gap-5">
|
|
||||||
<div className="flex flex-col gap-1 items-start justify-center">
|
|
||||||
<Link
|
|
||||||
underline="hover"
|
|
||||||
className="dark:text-white"
|
|
||||||
href={`/projects/${project.id}/home`}
|
|
||||||
>
|
|
||||||
{project.name}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Dropdown>
|
|
||||||
<DropdownTrigger>
|
|
||||||
<Button
|
|
||||||
isIconOnly
|
|
||||||
size="sm"
|
|
||||||
className="bg-transparent rounded-full"
|
|
||||||
>
|
|
||||||
<MoreVertical size={16} />
|
|
||||||
</Button>
|
|
||||||
</DropdownTrigger>
|
|
||||||
<DropdownMenu aria-label="Static Actions">
|
|
||||||
<DropdownItem key="edit" onClick={() => onEditClick(project)}>
|
|
||||||
Edit project
|
|
||||||
</DropdownItem>
|
|
||||||
<DropdownItem
|
|
||||||
key="delete"
|
|
||||||
className="text-danger"
|
|
||||||
color="danger"
|
|
||||||
onClick={() => onDeleteClick(project.id)}
|
|
||||||
>
|
|
||||||
Delete project
|
|
||||||
</DropdownItem>
|
|
||||||
</DropdownMenu>
|
|
||||||
</Dropdown>
|
|
||||||
</CardHeader>
|
|
||||||
<Divider />
|
|
||||||
<CardBody className="h-[50px] text-ellipsis overflow-hidden">
|
|
||||||
<p>{project.detail}</p>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
117
frontend/app/projects/projectsControl.ts
Normal file
117
frontend/app/projects/projectsControl.ts
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
import Config from "@/config/config";
|
||||||
|
const apiServer = Config.apiServer;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* fetch project records
|
||||||
|
*/
|
||||||
|
async function fetchProjects() {
|
||||||
|
const url = `${apiServer}/projects`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
return data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching data:", error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create project
|
||||||
|
*/
|
||||||
|
async function createProject(name: string, detail: string) {
|
||||||
|
const newProjectData = {
|
||||||
|
name: name,
|
||||||
|
detail: detail,
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchOptions = {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(newProjectData),
|
||||||
|
};
|
||||||
|
|
||||||
|
const url = `${apiServer}/projects`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, fetchOptions);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||||
|
}
|
||||||
|
const data = await response.json();
|
||||||
|
return data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error creating new project:", error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update project
|
||||||
|
*/
|
||||||
|
async function updateProject(projectId: number, name: string, detail: string) {
|
||||||
|
const updatedProjectData = {
|
||||||
|
name: name,
|
||||||
|
detail: detail,
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchOptions = {
|
||||||
|
method: "PUT",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(updatedProjectData),
|
||||||
|
};
|
||||||
|
|
||||||
|
const url = `${apiServer}/projects/${projectId}`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, fetchOptions);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||||
|
}
|
||||||
|
const data = await response.json();
|
||||||
|
return data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error updating project:", error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Delete project
|
||||||
|
*/
|
||||||
|
async function deleteProject(projectId: number) {
|
||||||
|
const fetchOptions = {
|
||||||
|
method: "DELETE",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const url = `${apiServer}/projects/${projectId}`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, fetchOptions);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error deleting project:", error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export { fetchProjects, createProject, updateProject, deleteProject };
|
||||||
6
frontend/package-lock.json
generated
6
frontend/package-lock.json
generated
@@ -16,6 +16,7 @@
|
|||||||
"@types/react-dom": "18.2.7",
|
"@types/react-dom": "18.2.7",
|
||||||
"autoprefixer": "10.4.16",
|
"autoprefixer": "10.4.16",
|
||||||
"clsx": "^2.0.0",
|
"clsx": "^2.0.0",
|
||||||
|
"dayjs": "^1.11.10",
|
||||||
"eslint": "8.48.0",
|
"eslint": "8.48.0",
|
||||||
"eslint-config-next": "14.0.2",
|
"eslint-config-next": "14.0.2",
|
||||||
"framer-motion": "^10.16.4",
|
"framer-motion": "^10.16.4",
|
||||||
@@ -3431,6 +3432,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
|
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
|
||||||
"integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="
|
"integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="
|
||||||
},
|
},
|
||||||
|
"node_modules/dayjs": {
|
||||||
|
"version": "1.11.10",
|
||||||
|
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
|
||||||
|
"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
|
||||||
|
},
|
||||||
"node_modules/debug": {
|
"node_modules/debug": {
|
||||||
"version": "4.3.4",
|
"version": "4.3.4",
|
||||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
|
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
|
||||||
|
|||||||
@@ -17,6 +17,7 @@
|
|||||||
"@types/react-dom": "18.2.7",
|
"@types/react-dom": "18.2.7",
|
||||||
"autoprefixer": "10.4.16",
|
"autoprefixer": "10.4.16",
|
||||||
"clsx": "^2.0.0",
|
"clsx": "^2.0.0",
|
||||||
|
"dayjs": "^1.11.10",
|
||||||
"eslint": "8.48.0",
|
"eslint": "8.48.0",
|
||||||
"eslint-config-next": "14.0.2",
|
"eslint-config-next": "14.0.2",
|
||||||
"framer-motion": "^10.16.4",
|
"framer-motion": "^10.16.4",
|
||||||
|
|||||||
7
frontend/types/project.ts
Normal file
7
frontend/types/project.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
export type ProjectType = {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
detail: string;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user