|
|
|
@@ -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<PickerCardListProps> = ({ |
|
|
|
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<PickerCardListProps> = ({ |
|
|
|
const [sectionDescriptionOptions, setSectionDescriptionOptions] = useState<string[]>([]); |
|
|
|
const [stockTakeSectionOptions, setStockTakeSectionOptions] = useState<string[]>([]); |
|
|
|
const [storeIdOptions, setStoreIdOptions] = useState<string[]>(["2F", "4F"]); |
|
|
|
const [searchSectionDescription, setSearchSectionDescription] = useState<string>("All"); |
|
|
|
const [searchStockTakeSession, setSearchStockTakeSession] = useState<string>(""); |
|
|
|
const [searchStatus, setSearchStatus] = useState<string>("All"); |
|
|
|
const [searchArea, setSearchArea] = useState<string>(""); |
|
|
|
const [searchStoreId, setSearchStoreId] = useState<string>("All"); |
|
|
|
|
|
|
|
const [filterSectionDescription, setFilterSectionDescription] = useState<string>("All"); |
|
|
|
const [filterStockTakeSession, setFilterStockTakeSession] = useState<string>(""); |
|
|
|
const [filterStatus, setFilterStatus] = useState<string>("All"); |
|
|
|
const [filterArea, setFilterArea] = useState<string>(""); |
|
|
|
const [filterStoreId, setFilterStoreId] = useState<string>("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<PickerCardListProps> = ({ |
|
|
|
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<PickerCardListProps> = ({ |
|
|
|
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<PickerCardListProps> = ({ |
|
|
|
<FormControl fullWidth> |
|
|
|
<InputLabel>{t("Stock Take Section")}</InputLabel> |
|
|
|
<Select |
|
|
|
value={searchSectionDescription} |
|
|
|
value={searchFilters.sectionDescription} |
|
|
|
label={t("Stock Take Section")} |
|
|
|
onChange={(e) => setSearchSectionDescription(e.target.value)} |
|
|
|
onChange={(e) => |
|
|
|
onSearchFiltersChange({ |
|
|
|
...searchFilters, |
|
|
|
sectionDescription: e.target.value, |
|
|
|
}) |
|
|
|
} |
|
|
|
> |
|
|
|
<MenuItem value="All">{t("All")}</MenuItem> |
|
|
|
{sectionDescriptionOptions.map((desc) => ( |
|
|
|
@@ -315,8 +326,19 @@ const PickerCardList: React.FC<PickerCardListProps> = ({ |
|
|
|
<Autocomplete |
|
|
|
freeSolo |
|
|
|
options={stockTakeSectionOptions} |
|
|
|
value={searchStockTakeSession} |
|
|
|
onInputChange={(_, newValue) => setSearchStockTakeSession(newValue)} |
|
|
|
value={searchFilters.stockTakeSession} |
|
|
|
onChange={(_, newValue) => |
|
|
|
onSearchFiltersChange({ |
|
|
|
...searchFilters, |
|
|
|
stockTakeSession: newValue || "", |
|
|
|
}) |
|
|
|
} |
|
|
|
onInputChange={(_, newValue) => |
|
|
|
onSearchFiltersChange({ |
|
|
|
...searchFilters, |
|
|
|
stockTakeSession: newValue, |
|
|
|
}) |
|
|
|
} |
|
|
|
renderInput={(params) => ( |
|
|
|
<TextField |
|
|
|
{...params} |
|
|
|
@@ -330,9 +352,14 @@ const PickerCardList: React.FC<PickerCardListProps> = ({ |
|
|
|
<FormControl fullWidth> |
|
|
|
<InputLabel>{t("Status")}</InputLabel> |
|
|
|
<Select |
|
|
|
value={searchStatus} |
|
|
|
value={searchFilters.status} |
|
|
|
label={t("Status")} |
|
|
|
onChange={(e) => setSearchStatus(e.target.value)} |
|
|
|
onChange={(e) => |
|
|
|
onSearchFiltersChange({ |
|
|
|
...searchFilters, |
|
|
|
status: e.target.value, |
|
|
|
}) |
|
|
|
} |
|
|
|
> |
|
|
|
<MenuItem value="All">{t("All")}</MenuItem> |
|
|
|
{statusOptions.map((status) => ( |
|
|
|
@@ -347,17 +374,27 @@ const PickerCardList: React.FC<PickerCardListProps> = ({ |
|
|
|
<TextField |
|
|
|
fullWidth |
|
|
|
label={t("Area")} |
|
|
|
value={searchArea} |
|
|
|
onChange={(e) => setSearchArea(e.target.value)} |
|
|
|
value={searchFilters.area} |
|
|
|
onChange={(e) => |
|
|
|
onSearchFiltersChange({ |
|
|
|
...searchFilters, |
|
|
|
area: e.target.value, |
|
|
|
}) |
|
|
|
} |
|
|
|
/> |
|
|
|
</Grid> |
|
|
|
<Grid item xs={12} md={6}> |
|
|
|
<FormControl fullWidth> |
|
|
|
<InputLabel>{t("Store ID")}</InputLabel> |
|
|
|
<Select |
|
|
|
value={searchStoreId} |
|
|
|
value={searchFilters.storeId} |
|
|
|
label={t("Store ID")} |
|
|
|
onChange={(e) => setSearchStoreId(e.target.value)} |
|
|
|
onChange={(e) => |
|
|
|
onSearchFiltersChange({ |
|
|
|
...searchFilters, |
|
|
|
storeId: e.target.value, |
|
|
|
}) |
|
|
|
} |
|
|
|
> |
|
|
|
<MenuItem value="All">{t("All")}</MenuItem> |
|
|
|
{storeIdOptions.map((storeId) => ( |
|
|
|
@@ -449,7 +486,7 @@ const PickerCardList: React.FC<PickerCardListProps> = ({ |
|
|
|
<Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}> |
|
|
|
{t("Control Time")}: <TimeDisplay startTime={session.startTime} endTime={session.endTime} /> |
|
|
|
</Typography> |
|
|
|
<Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>{t("Total Item Number")}: {session.totalItemNumber}</Typography> |
|
|
|
<Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>{t("Total Item Kind Number")}: {session.totalItemNumber}</Typography> |
|
|
|
|
|
|
|
</CardContent> |
|
|
|
|
|
|
|
|