From ebb3b7d07982a33abb4615de19400b5e3bf34caf Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Sat, 14 Feb 2026 10:20:16 +0330 Subject: [PATCH] fix modal filter --- .../(Main)/components/MenuFilterDrawer.tsx | 76 ++++--------------- src/app/[name]/(Main)/page.tsx | 48 +++++------- src/locales/fa/menu.json | 64 +++++++--------- 3 files changed, 62 insertions(+), 126 deletions(-) diff --git a/src/app/[name]/(Main)/components/MenuFilterDrawer.tsx b/src/app/[name]/(Main)/components/MenuFilterDrawer.tsx index 8f086f3..6616073 100644 --- a/src/app/[name]/(Main)/components/MenuFilterDrawer.tsx +++ b/src/app/[name]/(Main)/components/MenuFilterDrawer.tsx @@ -1,19 +1,16 @@ 'use client'; -import React, { useState, useEffect, useMemo } from "react"; +import React, { useState, useEffect } from "react"; import Button from "@/components/button/PrimaryButton"; import AnimatedBottomSheet from "@/components/bottomsheet/AnimatedBottomSheet"; -import ComboBox, { ComboboxOption } from "@/components/combobox/Combobox"; import { Switch } from "@/components/ui/switch"; import { TicketPercentIcon } from "lucide-react"; type MenuFilterDrawerProps = { visible: boolean; onClose: () => void; - selectedIngredients: string; - selectedDeliveryId: string; - onIngredientsChange: (value: string) => void; - onDeliveryChange: (value: string) => void; + searchQuery: string; + onSearchChange: (value: string) => void; onApply: () => void; tMenu: (key: string) => string; }; @@ -21,67 +18,31 @@ type MenuFilterDrawerProps = { const MenuFilterDrawer = ({ visible, onClose, - selectedIngredients, - selectedDeliveryId, - onIngredientsChange, - onDeliveryChange, + searchQuery, + onSearchChange, onApply, tMenu, }: MenuFilterDrawerProps) => { - const [tempIngredients, setTempIngredients] = useState(selectedIngredients); - const [tempDeliveryId, setTempDeliveryId] = useState(selectedDeliveryId); + const [tempQuery, setTempQuery] = useState(searchQuery); useEffect(() => { if (visible) { - setTempIngredients(selectedIngredients); - setTempDeliveryId(selectedDeliveryId); + setTempQuery(searchQuery); } - }, [visible, selectedIngredients, selectedDeliveryId]); + }, [visible, searchQuery]); - const serviceOptions: Array = useMemo(() => { - return [ - { - id: "0", - title: tMenu("MenuFilterDrawer.SelectDelivery.Options.All") || "همه", - label: "", - }, - { - id: "pickup", - title: "بیرون بر", - label: "", - }, - { - id: "inPlace", - title: "سرو در فروشگاه", - label: "", - }, - ]; - }, [tMenu]); - - const handleIngredientsChange = ( - e: React.ChangeEvent - ) => { - setTempIngredients(e.target.value); - }; - - const handleDeliveryChange = ( - e: React.MouseEvent, - index: number - ) => { - e.stopPropagation(); - setTempDeliveryId(serviceOptions[index]?.id ?? serviceOptions[0].id); + const handleSearchChange = (e: React.ChangeEvent) => { + setTempQuery(e.target.value); }; const handleApply = () => { - onIngredientsChange(tempIngredients); - onDeliveryChange(tempDeliveryId); + onSearchChange(tempQuery); onApply(); onClose(); }; const handleCancel = () => { - setTempIngredients(selectedIngredients); - setTempDeliveryId(selectedDeliveryId); + setTempQuery(searchQuery); onClose(); }; @@ -99,19 +60,12 @@ const MenuFilterDrawer = ({ -
diff --git a/src/app/[name]/(Main)/page.tsx b/src/app/[name]/(Main)/page.tsx index 4222c94..4cb6d85 100644 --- a/src/app/[name]/(Main)/page.tsx +++ b/src/app/[name]/(Main)/page.tsx @@ -34,8 +34,7 @@ const MenuIndex = () => { const [sorting, setSorting] = useQueryState('sortBy', { defaultValue: '0' }); const [search, setSearch] = useQueryState("q", { defaultValue: '' }); const [selectedCategory, setSelectedCategory] = useQueryState('category', { defaultValue: '0' }); - const [selectedIngredients, setSelectedIngredients] = useQueryState('ingredients', { defaultValue: '' }); - const [selectedDeliveryId, setSelectedDeliveryId] = useQueryState('delivery', { defaultValue: '0' }); + const [filterSearch, setFilterSearch] = useQueryState('ingredients', { defaultValue: '' }); const smallCategoriesRef: React.RefObject = useRef(null); const wrapperRef: React.RefObject = useRef(null); const [smallCategoriesVisible, setSmallCategoriesVisibility] = useState(false); @@ -46,12 +45,11 @@ const MenuIndex = () => { setSearch(null); // category را نگه می‌داریم تا در بک زدن حفظ شود // setSelectedCategory(null); - setSelectedIngredients(null); - setSelectedDeliveryId(null); + setFilterSearch(null); setSorting(null); setIsInitialMount(false); } - }, [isInitialMount, setSearch, setSelectedIngredients, setSelectedDeliveryId, setSorting]); + }, [isInitialMount, setSearch, setFilterSearch, setSorting]); const onScroll = useCallback(() => { if (!wrapperRef?.current?.parentElement?.parentElement?.scrollTop || !smallCategoriesRef.current?.offsetTop) return; @@ -95,18 +93,14 @@ const MenuIndex = () => { toggleSortingModal(); }; - const changeSelectedIngredients = useCallback((value: string) => { - setSelectedIngredients(value); - }, [setSelectedIngredients]); - - const changeSelectedDelivery = useCallback((value: string) => { - setSelectedDeliveryId(() => value); - }, [setSelectedDeliveryId]); + const changeFilterSearch = useCallback((value: string) => { + setFilterSearch(value); + }, [setFilterSearch]); const filteredReceiptItems = useMemo(() => { if (!products.length) return []; const lowerSearch = search.toLowerCase(); - const lowerIngredients = selectedIngredients ? selectedIngredients.toLowerCase() : ""; + const lowerFilterQuery = filterSearch ? filterSearch.toLowerCase() : ""; const selectedCatId = selectedCategory === '0' ? null : selectedCategory; const filtered = products.filter((item) => { @@ -115,24 +109,22 @@ const MenuIndex = () => { const matchesSearch = !search || itemName.toLowerCase().includes(lowerSearch); - const matchesIngredients = !selectedIngredients || + // جستجو در عنوان و توضیحات (و در صورت وجود در محتویات) + const matchesFilterSearch = !filterSearch || (() => { - // ابتدا در محتویات جستجو می‌کنیم + const titleMatch = itemName.toLowerCase().includes(lowerFilterQuery); + const description = item.description || item.desc || ""; + const descMatch = description.toLowerCase().includes(lowerFilterQuery); + if (titleMatch || descMatch) return true; if (item.content && Array.isArray(item.content) && item.content.length > 0) { return item.content.some((content: string) => - content.toLowerCase().includes(lowerIngredients) + content.toLowerCase().includes(lowerFilterQuery) ); } - // اگر محتویات وجود نداشت یا خالی بود، در توضیحات جستجو می‌کنیم - const description = item.description || item.desc || ""; - return description.toLowerCase().includes(lowerIngredients); + return false; })(); - const matchesDelivery = selectedDeliveryId === "0" || - (selectedDeliveryId === "pickup" && item.pickupServe) || - (selectedDeliveryId === "inPlace" && item.inPlaceServe); - - return matchesCategory && matchesSearch && matchesIngredients && matchesDelivery; + return matchesCategory && matchesSearch && matchesFilterSearch; }); const sortingKey = sortings[Number(sorting)] || sortings[0]; @@ -151,7 +143,7 @@ const MenuIndex = () => { return 0; } }); - }, [selectedCategory, search, selectedIngredients, selectedDeliveryId, products, sorting]); + }, [selectedCategory, search, filterSearch, products, sorting]); if (isLoading) { return ; @@ -222,10 +214,8 @@ const MenuIndex = () => { { }} tMenu={tMenu} /> diff --git a/src/locales/fa/menu.json b/src/locales/fa/menu.json index 13c0159..7a4a92e 100644 --- a/src/locales/fa/menu.json +++ b/src/locales/fa/menu.json @@ -1,39 +1,31 @@ { - "Menu": { - "MenuFilterDrawer": { - "Label": "فیلتر بر اساس", - "Heading": "فیلتر ها", - "SelectContent": { - "Label": "محتویات", - "SearchLabel": "جستجو ...", - "Placeholder": "محتویات را وارد کنید...", - "Options": { - "Normal": "معمولی", - "Vegan": "گیاهی" - } - }, - "SelectDelivery": { - "Label": "روش ارسال", - "SearchLabel": "جستجو ...", - "Options": { - "All": "همه", - "Courier": "ارسال با پیک" - } - }, - "PlusPoint": "دارای امتیاز پس از خرید", - "DiscountState": "دارای کد تخفیف", - "ButtonOk": "اعمال فیلتر", - "ButtonCancel": "حذف فیلتر" - }, - "MenuSortingDrawer": { - "Label": "", - "Heading": "مرتب کردن بر اساس", - "Options": { - "PopularityDescending": "محبوب ترین", - "RateDescending": "بالاترین امتیاز", - "PriceAscending": "ارزان ترین", - "PriceDescending": "گران ترین" - } + "Menu": { + "MenuFilterDrawer": { + "Label": "فیلتر بر اساس", + "Heading": "فیلتر ها", + "SelectContent": { + "Label": "جستجو", + "SearchLabel": "جستجو ...", + "Placeholder": "جستجوی پیشرفته...", + "Options": { + "Normal": "معمولی", + "Vegan": "گیاهی" } + }, + "PlusPoint": "دارای امتیاز پس از خرید", + "DiscountState": "دارای کد تخفیف", + "ButtonOk": "اعمال فیلتر", + "ButtonCancel": "حذف فیلتر" + }, + "MenuSortingDrawer": { + "Label": "", + "Heading": "مرتب کردن بر اساس", + "Options": { + "PopularityDescending": "محبوب ترین", + "RateDescending": "بالاترین امتیاز", + "PriceAscending": "ارزان ترین", + "PriceDescending": "گران ترین" + } } -} \ No newline at end of file + } +}