diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index 0b4d635..e69366b 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -628,6 +628,7 @@ "choose_year": "انتخاب سال", "provinces": "استان های", "province": "استان", + "all_provinces": "تمامی استان ها", "year": "سال", "years": "سال های", "text_field_loading_provinces_list": "درحال دریافت استان ها", diff --git a/src/components/dashboard/reports/Filter/ProvinceFilter.jsx b/src/components/dashboard/reports/Filter/ProvinceFilter.jsx index 7dacacc..f96cc84 100644 --- a/src/components/dashboard/reports/Filter/ProvinceFilter.jsx +++ b/src/components/dashboard/reports/Filter/ProvinceFilter.jsx @@ -24,22 +24,21 @@ const ProvinceFilter = ({formik, multiple, setFilteredText}) => { const t = useTranslations(); const provinceChange = (event) => { const {target: {value}} = event; - formik.handleChange(event); formik.setFieldValue('province_id', value); if (Array.isArray(value)) { - const province_names = [] + const province_names = []; value.map((item) => { province_names.push(provinceList.find(province => province.id === item).name) }) setFilteredText(prevState => ({ ...prevState, - province: province_names.length !== 0 ? `| ${t("filters.provinces")}: ${province_names.join(' , ')}` : "" + province: province_names.length !== 0 ? `${t("filters.provinces")}: ${province_names.join(' , ')}` : "" })); } else { const selectedProvince = provinceList.find(province => province.id === value); setFilteredText(prevState => ({ ...prevState, - province: `| ${t("filters.province")}: ${selectedProvince.name}` + province: `${t("filters.province")}: ${selectedProvince.name}` })); } }; @@ -78,10 +77,10 @@ const ProvinceFilter = ({formik, multiple, setFilteredText}) => { !needAdorment ? multiple - ? formik.setFieldValue('province_id', []) - : formik.setFieldValue('province_id', "") - } + onClick={() => { + multiple ? formik.setFieldValue('province_id', []) : formik.setFieldValue('province_id', "") + setFilteredText(prevState => ({...prevState, province: t("filters.all_provinces")})) + }} size="small"> diff --git a/src/components/dashboard/reports/Filter/index.jsx b/src/components/dashboard/reports/Filter/index.jsx index 3a84d2f..2486533 100644 --- a/src/components/dashboard/reports/Filter/index.jsx +++ b/src/components/dashboard/reports/Filter/index.jsx @@ -25,8 +25,12 @@ const Filter = ({title, filterItem, setFilterOption, isLoadingReportList, mutate const t = useTranslations(); const filter_by_province = filterItem.find((item) => item.type === "province"); const filter_by_year = filterItem.find((item) => item.type === "year"); - const [expanded, setExpanded] = useState(false); - const [filteredText, setFilteredText] = useState({province: "", year: ""}); + const [expanded, setExpanded] = useState(true); + const [filteredText, setFilteredText] = useState({ + ...(filter_by_province ? {province: t("filters.all_provinces")} : {}), + ...(filter_by_year ? {year: ""} : {}) + }); + const [textFilter, setTextFilter] = useState() const [stepValue, setStepValue] = useState({ ...(filter_by_year && { date: filter_by_year.multiple ? [] : `${moment().format('jYYYY')}` @@ -55,10 +59,15 @@ const Filter = ({title, filterItem, setFilterOption, isLoadingReportList, mutate : [] ), ].filter(Boolean); - setFilterOption(fields) + setFilterOption(fields); + textMaker(); }, }); + const textMaker = (() => { + setTextFilter(`| ${Object.values(filteredText).join(", ")}`) + }); + useEffect(() => { const province = formik.values.province_id; const fields = [ @@ -73,6 +82,7 @@ const Filter = ({title, filterItem, setFilterOption, isLoadingReportList, mutate : [] ), ].filter(Boolean); + setTextFilter(`| ${Object.values(filteredText).join(", ")}`) }, []); return ( @@ -89,7 +99,7 @@ const Filter = ({title, filterItem, setFilterOption, isLoadingReportList, mutate {title} - {filteredText.province} {filteredText.year} + {textFilter}