Fixed fetching data schedules page

This commit is contained in:
ZacTohZY
2024-07-05 11:56:40 +08:00
parent ed9ebb5e29
commit e294a4b0dd
5 changed files with 3323 additions and 2606 deletions

5702
client/pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -3,8 +3,8 @@ import DefaultLayout from "../layouts/default";
import { SetStateAction, useEffect, useState } from 'react';
import { Button, Avatar, Link, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Input } from "@nextui-org/react";
import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure } from "@nextui-org/react";
import axios from "axios";
import config from "../config";
import instance from "../security/http";
interface Post {
title: string;
@@ -28,29 +28,29 @@ export default function CommunityPage() {
const onSearchChange = (e: { target: { value: SetStateAction<string>; }; }) => {
setSearch(e.target.value);
};
const getPosts = () => {
axios
.get(config.serverAddress + '/post').then((res) => {
instance
.get(config.serverAddress + '/post').then((res) => {
setCommunityList(res.data);
});
};
};
const searchPosts = () => {
axios
.get(config.serverAddress + `/post?search=${search}`).then((res) => {
setCommunityList(res.data);
});
instance
.get(config.serverAddress + `/post?search=${search}`).then((res) => {
setCommunityList(res.data);
});
};
useEffect(() => {
getPosts();
}, []);
}, []);
const onSearchKeyDown = (e: { key: string; }) => {
if (e.key === "Enter") {
searchPosts();
}
if (e.key === "Enter") {
searchPosts();
}
};
const onClickSearch = () => {
@@ -62,11 +62,11 @@ export default function CommunityPage() {
};
useEffect(() => {
axios
.get(config.serverAddress + '/post').then((res) => {
console.log(res.data);
setCommunityList(res.data);
});
instance
.get(config.serverAddress + '/post').then((res) => {
console.log(res.data);
setCommunityList(res.data);
});
}, []);
const handleDeleteClick = (post: Post) => {
@@ -76,8 +76,8 @@ export default function CommunityPage() {
const handleDeleteConfirm = async () => {
if (selectedPost) {
try {
await axios
.delete(config.serverAddress + `/post/${selectedPost.id}`);
await instance
.delete(config.serverAddress + `/post/${selectedPost.id}`);
setCommunityList((prevList) => prevList.filter(post => post.id !== selectedPost.id));
onOpenChange();
} catch (error) {
@@ -116,18 +116,18 @@ export default function CommunityPage() {
<div>
<DropdownTrigger className="justify-center items-center">
<Button isIconOnly className="w-full h-3/5 justify-center items-center" variant="light">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
className="size-6">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
className="size-6">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
</svg>
</Button>
</DropdownTrigger>
@@ -218,35 +218,35 @@ export default function CommunityPage() {
onKeyDown={onSearchKeyDown}
/>
<Button isIconOnly className="bg-red-color">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
className="size-6 bg-red-color text-white"
onClick={onClickSearch}>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</Button>
<Button isIconOnly className="bg-red-color">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
className="size-6 text-white"
onClick={onClickClear}>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18 18 6M6 6l12 12" />
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18 18 6M6 6l12 12" />
</svg>
</Button>
</div>

View File

@@ -44,7 +44,7 @@ export default function SchedulePage() {
<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
<h1>Karang Guni Schedule</h1>
<div className="flex flex-col gap-8">
<Table>
<Table aria-label="Schedule Table">
<TableHeader>
<TableColumn>Date</TableColumn>
<TableColumn>Time</TableColumn>
@@ -77,7 +77,7 @@ export default function SchedulePage() {
<div>
<div className="flex flex-row gap-20 ">
<div>
<Card>
<Card aria-label="Paper Price Card 1">
<CardBody>
<p className="text-lg">Paper</p>
<p className="text-xl">$0.05 to 0.20/KG</p>
@@ -90,7 +90,7 @@ export default function SchedulePage() {
</Card>
</div>
<div>
<Card>
<Card aria-label="Paper Price Card 2">
<CardBody>
<p className="text-lg">Paper</p>
<p className="text-xl">$0.05 to 0.20/KG</p>
@@ -103,7 +103,7 @@ export default function SchedulePage() {
</Card>
</div>
<div>
<Card>
<Card aria-label="Paper Price Card 3">
<CardBody>
<p className="text-lg">Paper</p>
<p className="text-xl">$0.05 to 0.20/KG</p>

View File

@@ -28,6 +28,9 @@ app.use("/users", usersRoute);
const postRoute = require('./routes/post');
app.use("/post", postRoute);
const schedulesRoute = require("./routes/schedule");
app.use("/schedule", schedulesRoute)
db.sequelize
.sync({ alter: true })
.then(() => {

108
server/routes/schedule.js Normal file
View File

@@ -0,0 +1,108 @@
const express = require('express');
const router = express.Router();
const { Schedule } = require('../models');
const { Op } = require("sequelize");
const yup = require("yup");
router.post("/", async (req, res) => {
let data = req.body;
// Validate request body
let validationSchema = yup.object().shape({
dateTime: yup.date().required(),
location: yup.string().trim().min(15).max(50).required(),
postalCode: yup.string().matches(/^\d{6}$/, 'Postal code must be exactly 6 digits').required(),
status: yup.string().trim().required()
});
try {
data = await validationSchema.validate(data, { abortEarly: false });
// Process valid data
let result = await Schedule.create(data);
res.json(result);
} catch (err) {
res.status(400).json({ errors: err.errors });
}
});
router.get("/", async (req, res) => {
let condition = {};
let search = req.query.search;
if (search) {
condition[Op.or] = [
{ dateTime: { [Op.like]: `%${search}%` } },
{ location: { [Op.like]: `%${search}%` } },
{ postalCode: { [Op.like]: `%${search}%` } },
{ status: { [Op.like]: `%${search}%` } }
];
}
let list = await Schedule.findAll({
where: condition,
order: [['createdAt', 'ASC']]
});
res.json(list);
});
router.get("/:id", async (req, res) => {
let id = req.params.id;
let schedule = await Schedule.findByPk(id);
if (!schedule) {
res.sendStatus(404);
return;
}
res.json(schedule);
});
router.put("/:id", async (req, res) => { //update
let id = req.params.id;
let schedule = await Schedule.findByPk(id);
if (!schedule) {
res.sendStatus(404);
return;
}
let data = req.body;
let validationSchema = yup.object().shape({
dateTime: yup.date().required(),
location: yup.string().trim().min(15).max(50).required(),
postalCode: yup.string().matches(/^\d{6}$/, 'Postal code must be exactly 6 digits').required(),
status: yup.string().trim().required()
});
try {
data = await validationSchema.validate(data,
{ abortEarly: false });
let num = await Schedule.update(data, {
where: { id: id }
});
if (num == 1) {
res.json({
message: "Schedule was updated successfully."
});
}
else {
res.status(400).json({
message: `Cannot update schedule with id ${id}.`
});
}
}
catch (err) {
res.status(400).json({ errors: err.errors });
}
});
router.delete("/:id", async (req, res) => {
let id = req.params.id;
let num = await Schedule.destroy({
where: { id: id }
})
if (num == 1) {
res.json({
message: "Schedule was deleted successfully."
});
}
else {
res.status(400).json({
message: `Cannot delete schedule with id ${id}.`
});
}
});
module.exports = router;