kediritechnopark/groovee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

creating table components

Browse Source
This commit is contained in:
nospeedlimitindonesia
2024-07-31 09:17:59 +00:00
parent 43a2ec337c
commit b32fc0d45d
10 changed files with 267 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/App.js
View File

@@ -24,6 +24,7 @@ import { getItemTypesWithItems } from "./helpers/itemHelper.js";
import { import {
getConnectedGuestSides, getConnectedGuestSides,
getClerks,
removeConnectedGuestSides, removeConnectedGuestSides,
} from "./helpers/userHelpers.js"; } from "./helpers/userHelpers.js";
import { import {
@@ -37,12 +38,14 @@ function App() {
const location = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
const [user, setUser] = useState([]); const [user, setUser] = useState([]);
const [shopClerks, setShopClerks] = useState([]);
const [guestSideOfClerk, setGuestSideOfClerk] = useState(null); const [guestSideOfClerk, setGuestSideOfClerk] = useState(null);
const [guestSides, setGuestSides] = useState([]); const [guestSides, setGuestSides] = useState([]);
const [shopId, setShopId] = useState(""); const [shopId, setShopId] = useState("");
const [tableId, setTableId] = useState(""); const [tableId, setTableId] = useState("");
const [totalItemsCount, setTotalItemsCount] = useState(0); const [totalItemsCount, setTotalItemsCount] = useState(0);
const [deviceType, setDeviceType] = useState(""); const [deviceType, setDeviceType] = useState("");
const [shop, setShop] = useState([]);
const [shopItems, setShopItems] = useState([]); const [shopItems, setShopItems] = useState([]);
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const [modalContent, setModalContent] = useState(null); const [modalContent, setModalContent] = useState(null);
@@ -76,8 +79,9 @@ function App() {
async function fetchData() { async function fetchData() {
console.log("gettingItems"); console.log("gettingItems");
try { try {
const { response, data } = await getItemTypesWithItems(shopId); const { response, cafe, data } = await getItemTypesWithItems(shopId);
if (response.status === 200) { if (response.status === 200) {
setShop(cafe);
setShopItems(data); setShopItems(data);
socket.on("transaction_created", () => { socket.on("transaction_created", () => {
console.log("transaction created"); console.log("transaction created");
@@ -121,7 +125,8 @@ function App() {
setDeviceType("guestDevice"); setDeviceType("guestDevice");
} else { } else {
setUser(data.data.user); setUser(data.data.user);
console.log(data.data.user); if (data.data.user.password == "unsetunsetunset")
setModal("complete_account");
if (data.data.user.cafeId == shopId) { if (data.data.user.cafeId == shopId) {
const connectedGuestSides = await getConnectedGuestSides(); const connectedGuestSides = await getConnectedGuestSides();
setGuestSides(connectedGuestSides.sessionDatas); setGuestSides(connectedGuestSides.sessionDatas);
@@ -130,6 +135,12 @@ function App() {
} else { } else {
setDeviceType("guestDevice"); setDeviceType("guestDevice");
} }
if (data.data.user.roleId == 1) {
// shopClerks is can only be obtained by the shop owner
// so every user that is admin will try to getting shopClerks, even not yet proven that this is their shop
const shopClerks = await getClerks(shopId);
setShopClerks(shopClerks);
}
} }
}); });
@@ -195,7 +206,10 @@ function App() {
<div className="App"> <div className="App">
<header className="App-header"> <header className="App-header">
<Routes> <Routes>
<Route path="/" element={<Dashboard user={user} />} /> <Route
path="/"
element={<Dashboard user={user} setModal={setModal} />}
/>
<Route path="/login" element={<LoginPage />} /> <Route path="/login" element={<LoginPage />} />
<Route <Route
path="/:shopId/:tableId?" path="/:shopId/:tableId?"
@@ -203,7 +217,9 @@ function App() {
<> <>
<CafePage <CafePage
sendParam={handleSetParam} sendParam={handleSetParam}
shopName={shop.name}
shopItems={shopItems} shopItems={shopItems}
shopClerks={shopClerks}
socket={socket} socket={socket}
user={user} user={user}
guestSides={guestSides} guestSides={guestSides}
@@ -231,6 +247,7 @@ function App() {
guestSides={guestSides} guestSides={guestSides}
guestSideOfClerk={guestSideOfClerk} guestSideOfClerk={guestSideOfClerk}
removeConnectedGuestSides={rmConnectedGuestSides} removeConnectedGuestSides={rmConnectedGuestSides}
setModal={setModal} // Pass the function to open modal
/> />
<Footer <Footer
shopId={shopId} shopId={shopId}

130
src/components/Header.js
View File

@@ -212,10 +212,12 @@ const Child = styled.div`
const Header = ({ const Header = ({
HeaderText, HeaderText,
shopId, shopId,
shopName,
shopClerks,
tableId, tableId,
showProfile, showProfile,
user, user,
isEdit, setModal,
isLogout, isLogout,
guestSides, guestSides,
guestSideOfClerk, guestSideOfClerk,
@@ -279,57 +281,83 @@ const Header = ({
return ( return (
<HeaderBar> <HeaderBar>
<Title>{HeaderText}</Title> <Title>{HeaderText}</Title>
<ProfileImage <div style={{ visibility: showProfile ? "visible" : "hidden" }}>
src="https://static-00.iconduck.com/assets.00/profile-major-icon-1024x1024-9rtgyx30.png" <ProfileImage
alt="Profile" src="https://static-00.iconduck.com/assets.00/profile-major-icon-1024x1024-9rtgyx30.png"
onClick={handleImageClick} alt="Profile"
animate={showRectangle && animate} onClick={handleImageClick}
/> animate={showRectangle && animate}
<ProfileName animate={showRectangle && animate}> />
{user.username !== undefined ? user.username : "guest"} <ProfileName animate={showRectangle && animate}>
</ProfileName> {showProfile && user.username !== undefined ? user.username : "guest"}
{showRectangle && ( </ProfileName>
<Rectangle ref={rectangleRef} animate={animate}> {showRectangle && (
<ChildContainer> <Rectangle ref={rectangleRef} animate={animate}>
{guestSideOfClerk && guestSideOfClerk.clerkUsername && ( <ChildContainer>
<Child hasChildren> {guestSideOfClerk && guestSideOfClerk.clerkUsername && (
this is the guest side of {guestSideOfClerk.clerkUsername} <Child hasChildren>
</Child> this is the guest side of {guestSideOfClerk.clerkUsername}
)} </Child>
{user.username === undefined && !guestSideOfClerk && ( )}
<Child onClick={goToLogin}>Click to login</Child> {user.username === undefined && !guestSideOfClerk && (
)} <Child onClick={goToLogin}>Click to login</Child>
{user.username !== undefined && ( )}
<Child onClick={isEdit}>Edit</Child> {user.username !== undefined && (
)} <Child onClick={() => setModal("edit_account")}>Edit</Child>
{shopId && user.username !== undefined && user.roleId === 1 && ( )}
<Child onClick={goToAdminCafes}>Your Cafes</Child> {shopId && user.username !== undefined && user.roleId === 1 && (
)} <>
{user.username !== undefined && user.roleId === 2 && ( <Child onClick={goToAdminCafes}>see your other cafes</Child>
<Child hasChildren> <Child onClick={() => setModal("edit_account")}>
connected guest sides {shopName} table maps
<Child onClick={goToGuestSideLogin}>+ Add guest side</Child> </Child>
{guestSides && <Child hasChildren>
guestSides.map((key, index) => ( {shopName} clerks
<Child key={index}> <Child onClick={() => setModal("craete_account_clerk")}>
guest side {index + 1} + Add clerk
<button
onClick={() =>
removeConnectedGuestSides(guestSides[index][3])
}
>
remove
</button>
</Child> </Child>
))} {shopClerks &&
</Child> shopClerks.map((key, index) => (
)} <Child key={index}>
{user.username !== undefined && ( {shopClerks[index].username}
<Child onClick={isLogout}>Logout</Child> <button
)} onClick={() =>
</ChildContainer> removeConnectedGuestSides(guestSides[index][3])
</Rectangle> }
)} >
remove
</button>
</Child>
))}
</Child>
</>
)}
{user.username !== undefined && user.roleId === 2 && (
<Child hasChildren>
connected guest sides
<Child onClick={goToGuestSideLogin}>+ Add guest side</Child>
{guestSides &&
guestSides.map((key, index) => (
<Child key={index}>
guest side {index + 1}
<button
onClick={() =>
removeConnectedGuestSides(guestSides[index][3])
}
>
remove
</button>
</Child>
))}
</Child>
)}
{user.username !== undefined && (
<Child onClick={isLogout}>Logout</Child>
)}
</ChildContainer>
</Rectangle>
)}
</div>
</HeaderBar> </HeaderBar>
); );
}; };

3
src/components/TableMaps.js Normal file
View File

@@ -0,0 +1,3 @@
import { getTables } from "../helpers/itemHelper.js";
const { response, cafe, data } = await getTables(5);

118
src/helpers/itemHelper.js
View File

@@ -1,14 +1,16 @@
import API_BASE_URL from '../config.js'; import API_BASE_URL from "../config.js";
import { getItemsByCafeId } from './cartHelpers.js'; import { getItemsByCafeId } from "./cartHelpers.js";
export async function getItemTypesWithItems(shopId) { export async function getItemTypesWithItems(shopId) {
try { try {
const response = await fetch(`${API_BASE_URL}/item/get-cafe-items/` + shopId); const response = await fetch(
`${API_BASE_URL}/item/get-cafe-items/` + shopId,
);
const data = await response.json(); const data = await response.json();
return { response, data: data.data }; // Return an object with response and data return { response, cafe: data.cafe, data: data.data }; // Return an object with response and data
} catch (error) { } catch (error) {
console.error('Failed to fetch item types with items:', error); console.error("Failed to fetch item types with items:", error);
throw error; throw error;
} }
} }
@@ -20,57 +22,67 @@ export async function getItemType(shopId) {
const data = await response.json(); const data = await response.json();
return { response, data: data.data }; // Return an object with response and data return { response, data: data.data }; // Return an object with response and data
} catch (error) { } catch (error) {
console.error('Failed to fetch item types with items:', error); console.error("Failed to fetch item types with items:", error);
throw error; throw error;
} }
} }
export async function getCartDetails(shopId) { export async function getCartDetails(shopId) {
try { try {
const response = await fetch(`${API_BASE_URL}/item/get-cart-details/` + shopId, { const response = await fetch(
method: 'POST', `${API_BASE_URL}/item/get-cart-details/` + shopId,
headers: { {
'Content-Type': 'application/json', method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(getItemsByCafeId(shopId)),
}, },
body: JSON.stringify(getItemsByCafeId(shopId)), );
});
if (!response.ok) { if (!response.ok) {
throw new Error('Failed to fetch cart details'); throw new Error("Failed to fetch cart details");
} }
const cartDetails = await response.json(); const cartDetails = await response.json();
console.log(cartDetails); console.log(cartDetails);
return cartDetails; return cartDetails;
} catch (error) { } catch (error) {
console.error('Error:', error); console.error("Error:", error);
} }
} }
export function getImageUrl(notimageurl) { export function getImageUrl(notimageurl) {
return API_BASE_URL + '/' + notimageurl; return API_BASE_URL + "/" + notimageurl;
} }
function getAuthToken() { function getAuthToken() {
return localStorage.getItem('auth'); return localStorage.getItem("auth");
} }
export async function createItem(shopId, name, price, qty, selectedImage, itemTypeId) { export async function createItem(
shopId,
name,
price,
qty,
selectedImage,
itemTypeId,
) {
try { try {
console.log(selectedImage) console.log(selectedImage);
const formData = new FormData(); const formData = new FormData();
formData.append('name', name); formData.append("name", name);
formData.append('price', price); formData.append("price", price);
formData.append('stock', qty); formData.append("stock", qty);
formData.append('image', selectedImage); formData.append("image", selectedImage);
formData.append('itemTypeId', itemTypeId); formData.append("itemTypeId", itemTypeId);
const response = await fetch(`${API_BASE_URL}/item/create/${shopId}`, { const response = await fetch(`${API_BASE_URL}/item/create/${shopId}`, {
method: 'POST', method: "POST",
headers: { headers: {
'Authorization': `Bearer ${getAuthToken()}` Authorization: `Bearer ${getAuthToken()}`,
}, },
body: formData body: formData,
}); });
if (!response.ok) { if (!response.ok) {
@@ -81,24 +93,23 @@ export async function createItem(shopId, name, price, qty, selectedImage, itemTy
const data = await response.json(); const data = await response.json();
return data; return data;
} catch (error) { } catch (error) {
console.error('Failed to create item type:', error); console.error("Failed to create item type:", error);
throw error; throw error;
} }
} }
export async function createItemType(shopId, name, selectedImage) { export async function createItemType(shopId, name, selectedImage) {
try { try {
const formData = new FormData(); const formData = new FormData();
formData.append('name', name); formData.append("name", name);
formData.append('image', selectedImage); formData.append("image", selectedImage);
const response = await fetch(`${API_BASE_URL}/item/createType/${shopId}`, { const response = await fetch(`${API_BASE_URL}/item/createType/${shopId}`, {
method: 'POST', method: "POST",
headers: { headers: {
'Authorization': `Bearer ${getAuthToken()}` Authorization: `Bearer ${getAuthToken()}`,
}, },
body: formData body: formData,
}); });
if (!response.ok) { if (!response.ok) {
@@ -109,22 +120,24 @@ export async function createItemType(shopId, name, selectedImage) {
const data = await response.json(); const data = await response.json();
return data; return data;
} catch (error) { } catch (error) {
console.error('Failed to create item type:', error); console.error("Failed to create item type:", error);
throw error; throw error;
} }
} }
export async function updateItemType(shopId, itemTypeId, newName) { export async function updateItemType(shopId, itemTypeId, newName) {
try { try {
const response = await fetch(`${API_BASE_URL}/item/updateType/` + shopId + "/" + itemTypeId, { const response = await fetch(
method: 'PUT', `${API_BASE_URL}/item/updateType/` + shopId + "/" + itemTypeId,
headers: { {
'Content-Type': 'application/json', method: "PUT",
'Authorization': `Bearer ${getAuthToken()}` headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${getAuthToken()}`,
},
body: JSON.stringify({ newName }),
}, },
body: JSON.stringify({ newName }) );
});
if (!response.ok) { if (!response.ok) {
throw new Error(`Error: ${response.statusText}`); throw new Error(`Error: ${response.statusText}`);
@@ -133,19 +146,22 @@ export async function updateItemType(shopId, itemTypeId, newName) {
const data = await response.json(); const data = await response.json();
return data; return data;
} catch (error) { } catch (error) {
console.error('Failed to update item type:', error); console.error("Failed to update item type:", error);
throw error; throw error;
} }
} }
export async function deleteItemType(shopId, itemTypeId) { export async function deleteItemType(shopId, itemTypeId) {
try { try {
const response = await fetch(`${API_BASE_URL}/item/deleteType/` + shopId + "/" + itemTypeId, { const response = await fetch(
method: 'DELETE', `${API_BASE_URL}/item/deleteType/` + shopId + "/" + itemTypeId,
headers: { {
'Authorization': `Bearer ${getAuthToken()}` method: "DELETE",
} headers: {
}); Authorization: `Bearer ${getAuthToken()}`,
},
},
);
if (!response.ok) { if (!response.ok) {
throw new Error(`Error: ${response.statusText}`); throw new Error(`Error: ${response.statusText}`);
@@ -153,7 +169,7 @@ export async function deleteItemType(shopId, itemTypeId) {
return true; return true;
} catch (error) { } catch (error) {
console.error('Failed to delete item type:', error); console.error("Failed to delete item type:", error);
throw error; throw error;
} }
} }

38
src/helpers/tableHelper.js
View File

@@ -1,11 +1,14 @@
import API_BASE_URL from '../config.js'; import API_BASE_URL from "../config.js";
import { getLocalStorage } from "./localStorageHelpers";
export async function getTable(shopId, tableNo) { export async function getTables(shopId) {
try { try {
const response = await fetch(`${API_BASE_URL}/table/get-table/${shopId}?tableNo=${tableNo}`, { const token = getLocalStorage("auth");
method: 'GET', const response = await fetch(`${API_BASE_URL}/table/get-tables/${shopId}`, {
method: "GET",
headers: { headers: {
'Content-Type': 'application/json', "Content-Type": "application/json",
Authorization: `Bearer ${token}`,
}, },
}); });
@@ -16,6 +19,29 @@ export async function getTable(shopId, tableNo) {
const tableDetail = await response.json(); const tableDetail = await response.json();
return tableDetail; return tableDetail;
} catch (error) { } catch (error) {
console.error('Error:', error); console.error("Error:", error);
}
}
export async function getTable(shopId, tableNo) {
try {
const response = await fetch(
`${API_BASE_URL}/table/get-table/${shopId}?tableNo=${tableNo}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
},
},
);
if (!response.ok) {
return false;
}
const tableDetail = await response.json();
return tableDetail;
} catch (error) {
console.error("Error:", error);
} }
} }

54
src/helpers/userHelpers.js
View File

@@ -141,7 +141,6 @@ export const updateUser = async (formData) => {
return data; return data;
} catch (error) { } catch (error) {
console.error("Error updating user:", error); console.error("Error updating user:", error);
throw error;
} }
} }
}; };
@@ -165,7 +164,58 @@ export const getAllCafeOwner = async (formData) => {
return data; return data;
} catch (error) { } catch (error) {
console.error("Error updating user:", error); console.error("Error updating user:", error);
throw error; }
}
};
export const createClerks = async (shopId, email, username, password) => {
const token = getLocalStorage("auth");
if (token) {
try {
const response = await fetch(
API_BASE_URL + "/user/create-clerk/" + shopId,
{
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
body: JSON.stringify({
email: email,
username: username,
password: password,
}),
},
);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error("Error getting clerk:", error);
}
}
};
export const getClerks = async (shopId) => {
const token = getLocalStorage("auth");
if (token) {
try {
const response = await fetch(API_BASE_URL + "/user/get-clerk/" + shopId, {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error("Error getting clerk:", error);
} }
} }
}; };

7
src/pages/CafePage.js
View File

@@ -21,7 +21,9 @@ import {
function CafePage({ function CafePage({
sendParam, sendParam,
shopName,
shopItems, shopItems,
shopClerks,
socket, socket,
user, user,
guestSides, guestSides,
@@ -46,7 +48,6 @@ function CafePage({
if (user.cafeId != null && user.cafeId != shopId) { if (user.cafeId != null && user.cafeId != shopId) {
navigate("/" + user.cafeId); navigate("/" + user.cafeId);
} }
if (user.password == "unsetunsetunset") setIsModalOpen(true);
}, [user]); }, [user]);
useEffect(() => { useEffect(() => {
@@ -95,9 +96,11 @@ function CafePage({
<Header <Header
HeaderText={"Menu"} HeaderText={"Menu"}
showProfile={true} showProfile={true}
isEdit={() => setModal("edit")} setModal={setModal}
isLogout={handleLogout} isLogout={handleLogout}
shopId={shopId} shopId={shopId}
shopName={shopName}
shopClerks={shopClerks}
tableId={tableId} tableId={tableId}
user={user} user={user}
guestSides={guestSides} guestSides={guestSides}

4
src/pages/Dashboard.js
View File

@@ -9,7 +9,7 @@ import { getOwnedCafes } from "../helpers/cafeHelpers";
import { ThreeDots } from "react-loader-spinner"; import { ThreeDots } from "react-loader-spinner";
const Dashboard = ({ user }) => { const Dashboard = ({ user, setModal }) => {
const navigate = useNavigate(); const navigate = useNavigate();
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
@@ -58,6 +58,8 @@ const Dashboard = ({ user }) => {
isEdit={() => setIsModalOpen(true)} isEdit={() => setIsModalOpen(true)}
isLogout={handleLogout} isLogout={handleLogout}
user={user} user={user}
showProfile={true}
setModal={setModal}
/> />
{user && user.roleId < 2 && ( {user && user.roleId < 2 && (
<div className={styles.dashboard}> <div className={styles.dashboard}>

2
src/pages/LoginPage.js
View File

@@ -42,7 +42,7 @@ const LoginPage = () => {
} }
// navigate(destination, { replace: true }); // navigate(destination, { replace: true });
window.location.href = window.location.hostname + destination; window.location.href = destination;
} }
} else { } else {
console.error("Login failed"); console.error("Login failed");

12
src/pages/SearchResult.js
View File

@@ -1,15 +1,18 @@
// src/CafePage.js // src/CafePage.js
import React, { useState } from "react"; import React, { useState } from "react";
import { useParams, useSearchParams } from "react-router-dom"; import { useParams, useSearchParams, useNavigate } from "react-router-dom";
import "../App.css"; import "../App.css";
import SearchInput from "../components/SearchInput"; import SearchInput from "../components/SearchInput";
import ItemLister from "../components/ItemLister"; import ItemLister from "../components/ItemLister";
import Header from "../components/Header"; import Header from "../components/Header";
import { updateLocalStorage } from "../helpers/localStorageHelpers";
function SearchResult({ user, shopItems, sendParam }) { function SearchResult({ user, shopItems, sendParam }) {
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const { shopId, tableId } = useParams(); const { shopId, tableId } = useParams();
const navigate = useNavigate();
sendParam({ shopId, tableId }); sendParam({ shopId, tableId });
const [searchValue, setSearchValue] = useState( const [searchValue, setSearchValue] = useState(
@@ -40,12 +43,7 @@ function SearchResult({ user, shopItems, sendParam }) {
return ( return (
<div className="App"> <div className="App">
<header className="App-header"> <header className="App-header">
<Header <Header HeaderText={"Search"} />
HeaderText={"Search"}
shopId={shopId}
tableId={tableId}
user={user}
/>
<div style={{ marginTop: "5px" }}></div> <div style={{ marginTop: "5px" }}></div>
<SearchInput <SearchInput
shopId={shopId} shopId={shopId}