add: receipt store functionality to menu items
This commit is contained in:
Mahyar Khanbolooki
+96
-42
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { Fragment, useCallback, useState } from "react";
|
||||
import { Fragment, useCallback, useMemo, useState } from "react";
|
||||
import SearchBox from "@/components/input/SearchBox";
|
||||
import CategoryItemRenderer from "@/components/listview/CategoryItemRenderer";
|
||||
import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
|
||||
@@ -11,6 +11,7 @@ import PlusIcon from "@/components/icons/PlusIcon";
|
||||
import MinusIcon from "@/components/icons/MinusIcon";
|
||||
import VerticalScrollView from "@/components/listview/VerticalScrollView";
|
||||
import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
|
||||
import { useReceiptStore } from "@/zustand/receiptStore";
|
||||
|
||||
const categories = [
|
||||
{
|
||||
@@ -140,9 +141,8 @@ const foods = [
|
||||
contains: 'مرغ / کاهو / گوجه / خیار'
|
||||
},
|
||||
];
|
||||
|
||||
export default function MenuIndex() {
|
||||
const [search, setSearch] = useState('');
|
||||
const MenuIndex = () => {
|
||||
const [search, setSearch] = useState("");
|
||||
const [selectedCategory, setSelectedCategory] = useState(0);
|
||||
|
||||
const updateSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
@@ -153,32 +153,52 @@ export default function MenuIndex() {
|
||||
setSelectedCategory(id);
|
||||
}, []);
|
||||
|
||||
const incrementItem = useReceiptStore((state) => state.increment);
|
||||
const decrementItem = useReceiptStore((state) => state.decrement);
|
||||
const receiptItems = useReceiptStore((state) => state.items);
|
||||
|
||||
const filteredReceiptItems = useMemo(() => {
|
||||
return foods.filter((item) => item.category === selectedCategory);
|
||||
}, [selectedCategory]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 pt-4 items-center">
|
||||
<SearchBox value={search} onChange={updateSearch} />
|
||||
<HorizontalScrollView className="w-full noscrollbar py-4!" itemRenderer={(child, index) => {
|
||||
return <CategoryItemRenderer className={`${index === selectedCategory && 'bg-white!'}`} onClick={() => updateCategory(index)} key={index}>{child}</CategoryItemRenderer>
|
||||
}}>
|
||||
<HorizontalScrollView
|
||||
className="w-full noscrollbar py-4!"
|
||||
itemRenderer={(child, index) => {
|
||||
return (
|
||||
<CategoryItemRenderer
|
||||
className={`${index === selectedCategory && "bg-white!"}`}
|
||||
onClick={() => updateCategory(index)}
|
||||
key={index}
|
||||
>
|
||||
{child}
|
||||
</CategoryItemRenderer>
|
||||
);
|
||||
}}
|
||||
>
|
||||
{categories.map((item, index) => {
|
||||
return (
|
||||
<div key={index}>
|
||||
<Image
|
||||
priority
|
||||
src={'/assets/images/food-image.png'}
|
||||
src={"/assets/images/food-image.png"}
|
||||
width={32}
|
||||
height={32}
|
||||
alt="category image"
|
||||
/>
|
||||
<span className="text-xs text-black">{item.title}</span>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
})}
|
||||
</HorizontalScrollView>
|
||||
|
||||
<section className="w-full">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-base font-semibold">{categories[selectedCategory].title}</span>
|
||||
<span className="text-base font-semibold">
|
||||
{categories[selectedCategory].title}
|
||||
</span>
|
||||
<div className="inline-flex gap-2 justify-around items-center">
|
||||
<button className="rounded-xl h-8 bg-white ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
|
||||
<EqualizerIcon />
|
||||
@@ -195,44 +215,78 @@ export default function MenuIndex() {
|
||||
itemRenderer={(child, index) => {
|
||||
return (
|
||||
<MenuItemRenderer key={index}>{child}</MenuItemRenderer>
|
||||
)
|
||||
);
|
||||
}}
|
||||
>
|
||||
{foods.map((food, index) => {
|
||||
return (
|
||||
<Fragment key={index}>
|
||||
<Image
|
||||
className="rounded-xl w-28 h-28"
|
||||
src={'/assets/images/food-preview.png'}
|
||||
height={100}
|
||||
width={100}
|
||||
alt="Food image"
|
||||
/>
|
||||
<div className="w-full h-full inline-flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="text-sm2 font-semibold">{food.name}</div>
|
||||
<div className="text-[#7F7F7F] text-xs leading-5 font-normal mt-2">{food.contains}</div>
|
||||
</div>
|
||||
<div className="inline-flex justify-between w-full items-end">
|
||||
<span className="w-full" dir="ltr">{food.price} T</span>
|
||||
<div className="bg-background max-w-[115px] rounded-lg w-full h-8 inline-flex py-1 px-[5px] justify-between items-center gap-2">
|
||||
{/* <PlusIcon />
|
||||
<div className="text-sm2 pt-0.5 font-semibold" style={{verticalAlign: 'end'}}>افزودن</div> */}
|
||||
{filteredReceiptItems
|
||||
.filter((food) => food.category === selectedCategory)
|
||||
.map((food, index) => {
|
||||
const receiptItem = receiptItems.find(
|
||||
(item) => item.id === index
|
||||
);
|
||||
|
||||
<PlusIcon className="bg-white rounded-sm p-2" size={26} />
|
||||
<div className="text-sm2 pt-0.5 font-semibold" style={{ verticalAlign: 'end' }}>2</div>
|
||||
<MinusIcon className="bg-white rounded-sm p-2" size={26} />
|
||||
return (
|
||||
<Fragment key={index}>
|
||||
<Image
|
||||
className="rounded-xl w-28 h-28"
|
||||
src={"/assets/images/food-preview.png"}
|
||||
height={100}
|
||||
width={100}
|
||||
alt="Food image"
|
||||
/>
|
||||
<div className="w-full h-full inline-flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="text-sm2 font-semibold">
|
||||
{food.name}
|
||||
</div>
|
||||
<div className="text-[#7F7F7F] text-xs leading-5 font-normal mt-2">
|
||||
{food.contains}
|
||||
</div>
|
||||
</div>
|
||||
<div className="inline-flex justify-between w-full items-end">
|
||||
<span className="w-full" dir="ltr">
|
||||
{food.price} T
|
||||
</span>
|
||||
<div className="bg-background max-w-[115px] rounded-lg w-full h-8 inline-flex py-1 px-[5px] justify-between items-center gap-2">
|
||||
{(receiptItem?.quantity || 0) <= 0 ? (
|
||||
<button
|
||||
onClick={() => incrementItem(index)}
|
||||
className="inline-flex w-full justify-center items-center gap-2"
|
||||
>
|
||||
<PlusIcon />
|
||||
<div className="text-sm2 pt-0.5 font-semibold" style={{ verticalAlign: "end" }}>
|
||||
افزودن
|
||||
</div>
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
onClick={() => incrementItem(index)}
|
||||
className="bg-white rounded-sm p-2"
|
||||
>
|
||||
<PlusIcon />
|
||||
</button>
|
||||
<div className="text-sm2 pt-0.5 font-semibold" style={{ verticalAlign: "end" }}>
|
||||
{(receiptItem?.quantity || 0)}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => decrementItem(index)}
|
||||
className="bg-white rounded-sm p-2"
|
||||
>
|
||||
<MinusIcon />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</VerticalScrollView>
|
||||
|
||||
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default MenuIndex;
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
// zustand/userStore.ts
|
||||
import { create } from 'zustand'
|
||||
import { createJSONStorage, persist } from 'zustand/middleware'
|
||||
|
||||
type ReceiptItem = {
|
||||
id: number
|
||||
quantity: number
|
||||
}
|
||||
|
||||
type AuthStore = {
|
||||
items: Array<ReceiptItem>
|
||||
increment: (id: number) => void
|
||||
decrement: (id: number) => void
|
||||
clear: () => void
|
||||
}
|
||||
|
||||
export const useReceiptStore = create<AuthStore>()(
|
||||
persist(
|
||||
(set) => ({
|
||||
items: [],
|
||||
clear: () =>
|
||||
set(() => ({
|
||||
items: []
|
||||
})),
|
||||
increment: (id) =>
|
||||
set((state) => {
|
||||
if (state.items.find(x => x.id === id) === undefined) {
|
||||
return ({
|
||||
items: [...state.items, {id, quantity: 1}]
|
||||
})
|
||||
}
|
||||
return ({
|
||||
items: state.items.map((item) =>
|
||||
item.id === id ? { ...item, quantity: item.quantity + 1 } : item
|
||||
),
|
||||
})
|
||||
}),
|
||||
decrement: (id) =>
|
||||
set((state) => ({
|
||||
items: state.items.map((item) =>
|
||||
item.id === id && item.quantity > 0
|
||||
? { ...item, quantity: item.quantity - 1 }
|
||||
: item
|
||||
),
|
||||
})),
|
||||
}),
|
||||
{
|
||||
name: 'receipt-storage', // Key in localStorage
|
||||
storage: createJSONStorage(() => sessionStorage),
|
||||
}
|
||||
)
|
||||
)
|
||||
Reference in New Issue
Block a user