hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

handle filter list city by url

Browse Source
This commit is contained in:
ehsan
2025-05-03 16:13:25 +03:30
parent 6a805bc627
commit 4c49090a5b
4 changed files with 100 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/component/modalSearchCity/Content.js
+74
View File
@@ -0,0 +1,74 @@
import { Button } from "@mui/material";
// Icon
import CloseModalD from "@/components/icons/CloseModalD";
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
import ArrowLeftM from "@/components/icons/ArrowLeftM";
function Content({
states,
selected,
updateData,
handleClose,
filteredCities,
provinceSelected,
isProvinceInclude,
}) {
const citySelected = selected.city;
return (
<div>
<div className="flex justify-end w-full">
<div className="cursor-pointer" onClick={handleClose}>
<CloseModalD />
</div>
</div>
<div className="md:p-[24px] pt-0">
<p className="text-[#525252] mt-[38px] md:mt-4 text-[16px] font-medium text-center">
شهر یا استان مورد نظر را انتخاب نمایید:
</p>
<div className="flex md:min-w-[344px] flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
<AutoCompleteSelect
updateData={updateData}
value={selected && provinceSelected}
disabled={isProvinceInclude}
list={states}
label="استان"
name="province"
/>
<AutoCompleteSelect
updateData={updateData}
value={
selected &&
citySelected &&
filteredCities.find((item) => item.label === citySelected) &&
citySelected
}
list={filteredCities}
name="city"
label="شهر"
disabled={
!isProvinceInclude ||
!provinceSelected ||
filteredCities.length === 0
}
/>
</div>
<div className="w-full flex justify-end">
<Button
className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
onClick={handleClose}
variant="contained"
color="primary"
disabled={!provinceSelected || !citySelected}
>
تایید و ادامه
<ArrowLeftM />
</Button>
</div>
</div>
</div>
);
}
export default Content;
app/component/modalSearchCity/index.js
+21 -49
View File
@@ -1,21 +1,21 @@
"use client";
import { useState, useEffect } from "react";
import { Box, Button, Modal } from "@mui/material";
// Icon
import { Modal, Box } from "@mui/material";
import { styleDefault } from "@/mui";
import CloseModalD from "@/components/icons/CloseModalD";
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
import ArrowLeftM from "@/components/icons/ArrowLeftM";
// Data
import statesData from "@/data/state.json";
import citiesData from "@/data/city.json";
import Content from "./Content";
function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
const provinceSelected = selected.province;
const citySelected = selected.city;
// const hostName = window.location.host;
const hostName = "urmia-nobat.ir";
const isProvinceInclude = citiesData.find(
(city) => city.domain !== "nobat724.com" && hostName.includes(city.domain)
);
const [states, setStates] = useState([]);
const [cities, setCities] = useState([]);
const [filteredCities, setFilteredCities] = useState([]);
@@ -54,6 +54,13 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
);
setFilteredCities(filteredCities);
}
} else if (isProvinceInclude) {
setSelected({
...selected,
province: statesData.find(
(state) => state.id === isProvinceInclude.province_id
)?.name,
});
} else {
setFilteredCities([]);
setSelected({ ...selected, city: "" });
@@ -77,50 +84,15 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
{/* Content Modal */}
<Modal open={open} onClose={handleClose}>
<Box sx={styleDefault} className="!w-full !h-full md:!w-fit md:!h-fit">
<div className="flex justify-end w-full">
<div className="cursor-pointer" onClick={handleClose}>
<CloseModalD />
</div>
</div>
<div className="md:p-[24px] pt-0">
<p className="text-[#525252] mt-[38px] md:mt-4 text-[16px] font-medium text-center">
شهر یا استان مورد نظر را انتخاب نمایید:
</p>
<div className="flex md:min-w-[344px] flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
<AutoCompleteSelect
<Content
states={states}
selected={selected}
updateData={updateData}
value={selected && provinceSelected}
list={states}
label="استان"
name="province"
handleClose={handleClose}
filteredCities={filteredCities}
provinceSelected={provinceSelected}
isProvinceInclude={isProvinceInclude}
/>
<AutoCompleteSelect
updateData={updateData}
value={
selected &&
citySelected &&
filteredCities.find((item) => item.label === citySelected) &&
citySelected
}
list={filteredCities}
name="city"
label="شهر"
disabled={!provinceSelected || filteredCities.length === 0}
/>
</div>
<div className="w-full flex justify-end">
<Button
className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
onClick={handleClose}
variant="contained"
color="primary"
disabled={!provinceSelected || !citySelected}
>
تایید و ادامه
<ArrowLeftM />
</Button>
</div>
</div>
</Box>
</Modal>
</>
package-lock.json
Generated
+1
View File
@@ -42,6 +42,7 @@
"universal-cookie": "^7.2.1"
},
"devDependencies": {
"cross-env": "^7.0.3",
"postcss": "^8",
"tailwindcss": "^3.4.1"
}
package.json
+2 -1
View File
@@ -3,7 +3,7 @@
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"dev": "cross-env HOST=nobat724.localhost PORT=3000 next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
@@ -43,6 +43,7 @@
"universal-cookie": "^7.2.1"
},
"devDependencies": {
"cross-env": "^7.0.3",
"postcss": "^8",
"tailwindcss": "^3.4.1"
}