From 4407712f7d3fea2a0f1cf82c7ca1e71e2e22bf1e Mon Sep 17 00:00:00 2001
From: Tassana Pralao <65160024@go.buu.ac.th>
Date: Sun, 23 Mar 2025 16:46:40 +0700
Subject: [PATCH] update server.js
---
client/package-lock.json | 2 +-
client/package.json | 1 +
client/src/App.css | 6 ++
.../src/components/card/BorrowdetailCard.jsx | 66 +++++++++++++++++++
client/src/components/card/EquipmentCard.jsx | 10 ++-
client/src/pages/All.jsx | 9 +--
client/src/stock/borrow-stock.jsx | 20 +++++-
server/server.js | 2 +-
8 files changed, 107 insertions(+), 9 deletions(-)
create mode 100644 client/src/components/card/BorrowdetailCard.jsx
diff --git a/client/package-lock.json b/client/package-lock.json
index 827cb54e..de681450 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -14,6 +14,7 @@
"axios": "^1.8.3",
"bootstrap": "^5.3.3",
"cors": "^2.8.5",
+ "lodash": "^4.17.21",
"lucide-react": "^0.483.0",
"rc-slider": "^11.1.8",
"react": "^19.0.0",
@@ -3130,7 +3131,6 @@
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
- "dev": true,
"license": "MIT"
},
"node_modules/lodash.merge": {
diff --git a/client/package.json b/client/package.json
index 16941ba3..aadd1d30 100644
--- a/client/package.json
+++ b/client/package.json
@@ -16,6 +16,7 @@
"axios": "^1.8.3",
"bootstrap": "^5.3.3",
"cors": "^2.8.5",
+ "lodash": "^4.17.21",
"lucide-react": "^0.483.0",
"rc-slider": "^11.1.8",
"react": "^19.0.0",
diff --git a/client/src/App.css b/client/src/App.css
index 3b9ed328..8729e62c 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -73,3 +73,9 @@
background-color: rgba(255, 255, 255, 0.3);
font-weight: bold;
}
+
+.hover-blue:hover {
+ background-color: #007bff; /* Bootstrap's blue */
+ border-color: #007bff; /* Optional: Change border color on hover */
+ color: white; /* Ensure text is white */
+}
diff --git a/client/src/components/card/BorrowdetailCard.jsx b/client/src/components/card/BorrowdetailCard.jsx
new file mode 100644
index 00000000..b7a2322e
--- /dev/null
+++ b/client/src/components/card/BorrowdetailCard.jsx
@@ -0,0 +1,66 @@
+import React from "react";
+import { Trash2 } from "lucide-react";
+
+const BorrowdetailCard = () => {
+ return (
+ <div>
+ <h5 className="font-weight-bold">จัดการการยืมอุปกรณ์</h5>
+ {/* Border for card */}
+ <div className="border p-3">
+ {/* Card content */}
+ <div className="bg-white p-3">
+ {/* Row 1 */}
+ <div className="d-flex justify-content-between align-items-center">
+ {/* Left side: Image and Title/Description */}
+ <div className="d-flex gap-3 align-items-center">
+ <div className="w-100 h-100 bg-secondary rounded d-flex justify-content-center align-items-center">
+ <span className="text-white">No Image</span>
+ </div>
+ <div>
+ <p className="font-weight-bold mb-1">Title</p>
+ <p className="text-muted m-0">Description</p>
+ </div>
+ </div>
+ {/* Right side: Delete button */}
+ <div>
+ <button className="btn btn-danger btn-sm">
+ <Trash2 size={18} /> {/* Increased icon size */}
+ </button>
+ </div>
+ </div>
+
+ {/* Row 2: Count adjustment */}
+ <div className="d-flex justify-content-between mb-2 mt-3">
+ {/* Left: Count control with margin to the left */}
+ <div className="d-flex align-items-center border rounded px-2 py-1 ms-3">
+ <button className="btn btn-secondary btn-sm rounded-start hover-blue">
+ -
+ </button>
+ <span className="px-4">Count</span>
+ <button className="btn btn-secondary btn-sm rounded-end hover-blue">
+ +
+ </button>
+ </div>
+
+ {/* Right: (You can add other content here if necessary) */}
+ </div>
+ </div>
+
+ {/* Total Section */}
+ <div className="d-flex justify-content-between mt-3">
+ <span>รวม</span>
+ <span>0</span> {/* You can dynamically render total here */}
+ </div>
+
+ {/* Button */}
+ <div className="mt-4">
+ <button className="bg-success text-white w-100 py-2 rounded">
+ ดำเนินการยืมอุปกรณ์
+ </button>
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default BorrowdetailCard;
diff --git a/client/src/components/card/EquipmentCard.jsx b/client/src/components/card/EquipmentCard.jsx
index 2e89c5c6..5f9cd1c8 100644
--- a/client/src/components/card/EquipmentCard.jsx
+++ b/client/src/components/card/EquipmentCard.jsx
@@ -1,7 +1,11 @@
import React from "react";
import { SquarePlus } from "lucide-react";
+import useBorrowStock from "../../stock/borrow-stock";
const EquipmentCard = ({ item }) => {
+
+ const actionAddtoBorrowdetail = useBorrowStock((state)=>state.actionAddtoBorrowdetail)
+
return (
<div
className="border rounded shadow p-1 col-12 col-sm-6 col-md-5 col-lg-4"
@@ -21,7 +25,7 @@ const EquipmentCard = ({ item }) => {
}}
/>
) : (
- <div className="w-100 h-32 bg-secondary rounded text-center d-flex align-items-center justify-content-center shadow-sm mb-3">
+ <div className="w-500 h-500 bg-secondary rounded text-center d-flex align-items-center justify-content-center shadow-sm">
<span className="text-light">No Image</span>
</div>
)}
@@ -35,7 +39,9 @@ const EquipmentCard = ({ item }) => {
{/* Action Button */}
<div className="d-flex justify-content-center align-items-center mt-3">
- <button className="btn btn-primary btn-sm">
+ <button
+ onClick={()=>actionAddtoBorrowdetail(item)}
+ className="btn btn-primary btn-sm">
<SquarePlus className="me-2" />
Add
</button>
diff --git a/client/src/pages/All.jsx b/client/src/pages/All.jsx
index 7948f8e9..27a4650b 100644
--- a/client/src/pages/All.jsx
+++ b/client/src/pages/All.jsx
@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
import EquipmentCard from "../components/card/EquipmentCard";
import useBorrowStock from "../stock/borrow-stock";
import SearchCard from "../components/card/SearchCard";
+import BorrowdetailCard from "../components/card/BorrowdetailCard";
const All = () => {
const getEquipment = useBorrowStock((state) => state.getEquipment);
@@ -12,8 +13,8 @@ const All = () => {
}, []);
return (
- <div className="container mt-4">
- <div className="row g-4">
+ <div className="container">
+ <div className="row g-1">
{/* SearchBar */}
<div className="col-12 col-md-3">
<div className="bg-light p-3 rounded shadow-sm">
@@ -23,7 +24,7 @@ const All = () => {
{/* Equipment */}
<div className="col-12 col-md-6">
- <div className="bg-white p-3 rounded shadow-sm">
+ <div className="bg-white p-2 rounded shadow-sm">
<p>อุปกรณ์ทั้งหมด</p>
<div className="d-flex flex-wrap justify-content-between">
{/* Equipment card */}
@@ -36,7 +37,7 @@ const All = () => {
{/* BorrowDetail */}
<div className="col-12 col-md-3">
- <div className="bg-light p-3 rounded shadow-sm">BorrowDetail</div>
+ <div className="bg-light p-3 rounded shadow-sm"><BorrowdetailCard /></div>
</div>
</div>
</div>
diff --git a/client/src/stock/borrow-stock.jsx b/client/src/stock/borrow-stock.jsx
index 41613883..19275a40 100644
--- a/client/src/stock/borrow-stock.jsx
+++ b/client/src/stock/borrow-stock.jsx
@@ -3,12 +3,30 @@ import { create } from 'zustand'
import { persist,createJSONStorage } from 'zustand/middleware'
import { listCategory } from '../api/category'
import { listEquipment, searchFilters } from "../api/equipment";
+import _ from 'lodash'
-const borrowStock = (set) => ({
+const borrowStock = (set,get) => ({
user: null,
token: null,
categories: [],
equipments: [],
+ borrowdetails: [],
+
+ actionAddtoBorrowdetail:(equipment)=>{
+ const borrowdetails = get().borrowdetails
+ const updateBorrowdetail = [
+ ...borrowdetails,
+ { ...equipment, borrowedCount: 1 },
+ ];
+
+ const unique = _.unionWith(updateBorrowdetail,_.isEqual)
+ console.log("Click add in Zustand", updateBorrowdetail);
+ console.log('unique', unique)
+
+
+ set({borrowdetails: updateBorrowdetail})
+
+ },
actionLogin: async (form) => {
const res = await axios.post("http://localhost:3000/api/login", form);
console.log(res.data.token);
diff --git a/server/server.js b/server/server.js
index 2792bb1c..3cd3f5b3 100644
--- a/server/server.js
+++ b/server/server.js
@@ -31,7 +31,7 @@ readdirSync(routesPath).map((file) => {
app.use("/api", require(routePath));
});
-app.listen(3000, () => console.log("Server is running on port 3000"));
+app.listen(3001, () => console.log("Server is running on port 3001"));
// เชื่อมต่อกับฐานข้อมูล
db.connect((err) => {
--
GitLab