diff --git a/src/components/StockTakeManagement/PickerCardList.tsx b/src/components/StockTakeManagement/PickerCardList.tsx index b24a629..3e6529a 100644 --- a/src/components/StockTakeManagement/PickerCardList.tsx +++ b/src/components/StockTakeManagement/PickerCardList.tsx @@ -47,14 +47,30 @@ interface PickerCardListProps { onListPageChange: (page: number) => void; onCardClick: (session: AllPickedStockTakeListReponse) => void; onReStockTakeClick: (session: AllPickedStockTakeListReponse) => void; + searchFilters: PickerCardListFilters; + appliedFilters: PickerCardListFilters; + onSearchFiltersChange: (next: PickerCardListFilters) => void; + onAppliedFiltersChange: (next: PickerCardListFilters) => void; } +export type PickerCardListFilters = { + sectionDescription: string; + stockTakeSession: string; + status: string; + area: string; + storeId: string; +}; + const PickerCardList: React.FC = ({ page, pageSize, onListPageChange, onCardClick, onReStockTakeClick, + searchFilters, + appliedFilters, + onSearchFiltersChange, + onAppliedFiltersChange, }) => { const { t } = useTranslation(["inventory", "common"]); dayjs.extend(duration); @@ -72,40 +88,30 @@ const PickerCardList: React.FC = ({ const [sectionDescriptionOptions, setSectionDescriptionOptions] = useState([]); const [stockTakeSectionOptions, setStockTakeSectionOptions] = useState([]); const [storeIdOptions, setStoreIdOptions] = useState(["2F", "4F"]); - const [searchSectionDescription, setSearchSectionDescription] = useState("All"); - const [searchStockTakeSession, setSearchStockTakeSession] = useState(""); - const [searchStatus, setSearchStatus] = useState("All"); - const [searchArea, setSearchArea] = useState(""); - const [searchStoreId, setSearchStoreId] = useState("All"); - - const [filterSectionDescription, setFilterSectionDescription] = useState("All"); - const [filterStockTakeSession, setFilterStockTakeSession] = useState(""); - const [filterStatus, setFilterStatus] = useState("All"); - const [filterArea, setFilterArea] = useState(""); - const [filterStoreId, setFilterStoreId] = useState("All"); const statusOptions = ["pending", "stockTaking", "approving", "completed"]; const handleSearch = () => { - setFilterSectionDescription(searchSectionDescription || "All"); - setFilterStockTakeSession(searchStockTakeSession || ""); - setFilterStatus(searchStatus || "All"); - setFilterArea(searchArea || ""); - setFilterStoreId(searchStoreId || "All"); + onAppliedFiltersChange({ + sectionDescription: searchFilters.sectionDescription || "All", + stockTakeSession: searchFilters.stockTakeSession || "", + status: searchFilters.status || "All", + area: searchFilters.area || "", + storeId: searchFilters.storeId || "All", + }); onListPageChange(0); }; const handleResetSearch = () => { - setSearchSectionDescription("All"); - setSearchStockTakeSession(""); - setSearchStatus("All"); - setSearchArea(""); - setSearchStoreId("All"); - setFilterSectionDescription("All"); - setFilterStockTakeSession(""); - setFilterStatus("All"); - setFilterArea(""); - setFilterStoreId("All"); + const resetFilters: PickerCardListFilters = { + sectionDescription: "All", + stockTakeSession: "", + status: "All", + area: "", + storeId: "All", + }; + onSearchFiltersChange(resetFilters); + onAppliedFiltersChange(resetFilters); onListPageChange(0); }; @@ -113,11 +119,11 @@ const PickerCardList: React.FC = ({ let cancelled = false; setLoading(true); getStockTakeRecordsPaged(page, pageSize, { - sectionDescription: filterSectionDescription, - stockTakeSections: filterStockTakeSession, - status: filterStatus, - area: filterArea, - storeId: filterStoreId, + sectionDescription: appliedFilters.sectionDescription, + stockTakeSections: appliedFilters.stockTakeSession, + status: appliedFilters.status, + area: appliedFilters.area, + storeId: appliedFilters.storeId, }) .then((res) => { if (cancelled) return; @@ -137,7 +143,7 @@ const PickerCardList: React.FC = ({ return () => { cancelled = true; }; - }, [page, pageSize, filterSectionDescription, filterStockTakeSession, filterStatus, filterArea, filterStoreId, listRefreshNonce]); + }, [page, pageSize, appliedFilters, listRefreshNonce]); //const startIdx = page * PER_PAGE; //const paged = stockTakeSessions.slice(startIdx, startIdx + PER_PAGE); @@ -298,9 +304,14 @@ const PickerCardList: React.FC = ({ {t("Stock Take Section")} setSearchStatus(e.target.value)} + onChange={(e) => + onSearchFiltersChange({ + ...searchFilters, + status: e.target.value, + }) + } > {t("All")} {statusOptions.map((status) => ( @@ -347,17 +374,27 @@ const PickerCardList: React.FC = ({ setSearchArea(e.target.value)} + value={searchFilters.area} + onChange={(e) => + onSearchFiltersChange({ + ...searchFilters, + area: e.target.value, + }) + } /> {t("Store ID")}