fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tables: update data source

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-10-18 09:25:13 +03:00
parent e0a5ce228c
commit 039bf64b46
2 changed files with 13 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
src/components/CustomBottomSheet/TablesBottomSheet.tsx
View File

@@ -1,212 +0,0 @@
import Circle4PeopleIcon from "components/Icons/tables/Circle4PeopleIcon";
import Rectangle6PeopleIcon from "components/Icons/tables/Rectangle6PeopleIcon";
import Square4PeopleIcon from "components/Icons/tables/Square4PeopleIcon";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
import styles from "./CustomBottomSheet.module.css";
interface TablesBottomSheetProps {
isOpen: boolean;
onClose: () => void;
initialValue: string;
onSave: (value: string) => void;
}
export function TablesBottomSheet({
isOpen,
onClose,
initialValue,
onSave,
}: TablesBottomSheetProps) {
const { t } = useTranslation();
const [value, setValue] = useState(initialValue);
useEffect(() => {
setValue(initialValue);
}, [initialValue]);
const handleSave = () => {
onSave(value);
onClose();
};
const handleCancel = () => {
setValue(initialValue);
onClose();
};
const tableList = [
{
id: 1,
name: "Table 1",
value: "table1",
shape: "rectangle",
number: 6,
is_booked: true,
},
{
id: 2,
name: "Table 2",
value: "table2",
shape: "square",
number: 4,
is_booked: false,
},
{
id: 3,
name: "Table 3",
value: "table3",
shape: "circle",
number: 4,
is_booked: false,
},
{
id: 4,
name: "Table 4",
value: "table4",
shape: "rectangle",
number: 6,
is_booked: false,
},
{
id: 5,
name: "Table 5",
value: "table5",
shape: "rectangle",
number: 6,
is_booked: false,
},
{
id: 6,
name: "Table 6",
value: "table6",
shape: "rectangle",
number: 6,
is_booked: false,
},
{
id: 7,
name: "Table 7",
value: "table7",
shape: "square",
number: 4,
is_booked: false,
},
{
id: 8,
name: "Table 8",
value: "table8",
shape: "square",
number: 4,
is_booked: false,
},
{
id: 9,
name: "Table 9",
value: "table9",
shape: "circle",
number: 4,
is_booked: false,
},
{
id: 10,
name: "Table 10",
value: "table10",
shape: "circle",
number: 4,
is_booked: false,
},
];
return (
<ProBottomSheet
isOpen={isOpen}
onClose={handleCancel}
title={t("cart.tables")}
showCloseButton={false}
initialSnap={1}
height={"70vh"}
snapPoints={["70vh"]}
>
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(4, 1fr)",
gap: 20,
columnGap: 20,
}}
>
{tableList.map((table) => {
if (table.shape === "rectangle") {
return (
<div
key={table.id}
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}
onClick={handleSave}
>
<Rectangle6PeopleIcon
title={table.name}
timer={
table.is_booked ? table.number.toFixed(2).toString() : ""
}
className={styles.bookedStyles}
fill={table.is_booked ? "#FFE299" : "#C8E6A9"}
/>
</div>
);
} else if (table.shape === "square") {
return (
<div
key={table.id}
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}
onClick={handleSave}
>
<Square4PeopleIcon
title={table.name}
timer={
table.is_booked ? table.number.toFixed(2).toString() : ""
}
className={styles.bookedStyles}
fill={table.is_booked ? "#FFE299" : "#5F6C7B"}
/>
</div>
);
} else if (table.shape === "circle") {
return (
<div
key={table.id}
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}
onClick={handleSave}
>
<Circle4PeopleIcon
title={table.name}
timer={
table.is_booked ? table.number.toFixed(2).toString() : ""
}
className={styles.bookedStyles}
fill={table.is_booked ? "#FFE299" : "#5F6C7B"}
/>
</div>
);
}
})}
</div>
</ProBottomSheet>
);
}

32
src/pages/cart/components/TableNumberCard.tsx
View File

@@ -5,28 +5,21 @@ import {
selectCart,
updateTables,
} from "features/order/orderSlice.ts";
import i18n from "i18n/i18n.ts";
import styles from "pages/cart/cart.module.css";
import { useTranslation } from "react-i18next";
import { useAppSelector } from "redux/hooks.ts";
// Function to get translated table names
export const getTableOptions = () => [
{ value: "1", label: `${i18n.t("checkout.table")} 1` },
{ value: "2", label: `${i18n.t("checkout.table")} 2` },
{ value: "3", label: `${i18n.t("checkout.table")} 3` },
{ value: "4", label: `${i18n.t("checkout.table")} 4` },
{ value: "5", label: `${i18n.t("checkout.table")} 5` },
{ value: "6", label: `${i18n.t("checkout.table")} 6` },
{ value: "7", label: `${i18n.t("checkout.table")} 7` },
{ value: "8", label: `${i18n.t("checkout.table")} 8` },
{ value: "9", label: `${i18n.t("checkout.table")} 9` },
{ value: "10", label: `${i18n.t("checkout.table")} 10` },
];
import { useGetTablesQuery } from "redux/api/others";
import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
export default function TableNumberCard() {
const { t } = useTranslation();
const { tables } = useAppSelector(selectCart);
const dispatch = useAppDispatch();
const { data: tableList } = useGetTablesQuery({
restaurantID: localStorage.getItem("restaurantID") || "",
tableType: "1",
}, {
skip: !localStorage.getItem("restaurantID"),
});
return (
<>
@@ -45,17 +38,18 @@ export default function TableNumberCard() {
mode="multiple"
placeholder={t("cart.tableNumber")}
size="large"
options={getTableOptions()}
options={tableList}
style={{
width: "100%",
height: 50,
fontSize: 12,
}}
onChange={(value) => {
updateTables(value);
console.log(value);
dispatch(updateTables(value));
}}
onClear={() => {
removeTable();
dispatch(removeTable());
}}
allowClear
/>