roye ye jozeyat kar kardam | 120

temp
mahdi andalib 2 years ago
parent 5c6c011e7d
commit c831931083
  1. 152
      src/views/Dashboard/layouts/Main/Addresses/index.js
  2. 11
      src/views/Dashboard/layouts/Mobile/ProfileAddress/index.js
  3. 4
      src/views/DeliveryForm/Address/index.js

@ -12,6 +12,9 @@ import Button from "../../../../../components/Button";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import editButton from "../../../../../assets/icons/edit.svg";
import trash from "../../../../../assets/icons/trash.svg";
const ProfileAddress = ({ const ProfileAddress = ({
addresses, addresses,
update, update,
@ -32,7 +35,11 @@ const ProfileAddress = ({
}, []); }, []);
return ( return (
<div className={`flex-1 ${isMobile ? "" : "w-1/2"} mx-auto`}> <div
className={`flex-1 ${isMobile ? "" : "w-full"} ${
isMobile ? "p-0" : "px-10"
} mx-auto`}
>
<div className="w-full flex flex-row justify-between items-center mt-4"> <div className="w-full flex flex-row justify-between items-center mt-4">
<button <button
className={`flex justify-center text-tiny lg:text-sm rounded-md py-3 bg-grayF9 dark:bg-blueC0 dark:bg-opacity-30 cursor:pointer ${ className={`flex justify-center text-tiny lg:text-sm rounded-md py-3 bg-grayF9 dark:bg-blueC0 dark:bg-opacity-30 cursor:pointer ${
@ -49,7 +56,7 @@ const ProfileAddress = ({
<strong className="text-lg transform translate-y-0.5 mr-1">+</strong> <strong className="text-lg transform translate-y-0.5 mr-1">+</strong>
</button> </button>
</div> </div>
<div className={`p-0 m-0 flex flex-col mb-4`}> <div className={`p-0 m-0 flex flex-col mb-4 w-full `}>
{addresses.map((address, index) => ( {addresses.map((address, index) => (
<Location <Location
address={address} address={address}
@ -106,100 +113,75 @@ const Location = ({
return ( return (
<div <div
className={`flex items-center w-full px-3 py-4 rounded-md my-4 border-2 border-solid ${ className={`flex flex-col items-center w-full px-3 py-4 rounded-md my-4 border-2 border-solid transition-all duration-500 dark:bg-opacity-5 ${
active active
? "border-green-400 bg-blueC0 bg-opacity-5" ? "bg-blueC0 bg-opacity-5 border-blueC0"
: "border-gray-300 bg-white" : "bg-grayF9 border-gray-200 dark:border-gray-500"
}`} }`}
onClick={() => onClick={() =>
active ? {} : update({ userAddressId: address.id, userId }) active ? {} : update({ userAddressId: address.id, userId })
} }
> >
<div <div className="w-full flex items-center justify-between ">
className={`absolute left-8 top-0 transform transition-all origin-bottom-left ${ <div className="w-4 h-4 flex flex-col items-center justify-center ml-1 bg-gray-200 rounded-full">
locationMenu ? "scale-100" : "scale-0" <div
} -translate-y-1/2 bg-white roundd-md flex flex-col gap-1 p-1 shadow-all divide-y divide-solid divide-gray-200`} className={`w-2 h-2 rounded-full ${
style={{ zIndex: 70 }} active === true ? "bg-blueC0" : ""
onClick={(e) => e.stopPropagation()} }`}
> ></div>
<Link </div>
to={"/editAddress/" + address.id} <div className="flex flex-col flex-1 mr-2">
className="py-3 pr-2 pl-10 text-sm font-bold" {active && (
onClick={() => setMenu()} <div className="w-full flex justify-between mb-3">
> <div className="flex items-center">
ویرایش <strong className="text-base">آدرس انتخابی شما</strong>
</Link> <span className="mr-4 text-sm">فعال</span>
<button </div>
className="py-3 pr-2 pl-10 border-none m-0 text-sm text-red19 font-bold" </div>
onClick={() => delAddress(address.id)} )}
> <div className={`flex w-full ${active ? "" : "flex-row"}`}>
حذف <div className="flex flex-col flex-1 mb-4">
</button> <span className="mb-2 leading-6">
</div> {"آدرس:" + " " + address.address}
<div className="flex flex-col flex-1 mr-2"> </span>
{active && ( <span className="mb-2 leading-6">
<div className="w-full flex justify-between mb-3"> {"نام:" + " " + address.firstName + " " + address.lastName}
<div className="flex items-center"> </span>
<strong className="text-base">آدرس انتخابی شما</strong> <span className="mb-2 leading-6">
<span className="mr-4 text-sm">فعال</span> {"کد پستی:" + " " + address.postalCode}
</span>
<span className="mb-2 leading-6">
{"شماره تماس:" + " " + address.cellphone}
</span>
</div> </div>
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
onClick={(e) => clickOnMenu(e)}
>
<g fill="#07612c" data-name="vuesax/linear/more">
<path d="M10 19a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z" />
<path
data-name="Vector"
d="M10 5a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2ZM10 12a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z"
/>
</g>
</svg>
</div> </div>
)} </div>
<div className={`flex w-full ${active ? "" : "flex-row"}`}> {/* edit / delete button */}
<div className="flex flex-col flex-1 mb-4"> <div className="flex flex-col items-center gap-y-2">
<span className="mb-2 leading-6"> <div
{"آدرس:" + " " + address.address} style={{ border: "solid 1px #fca5a5" }}
</span> class="w-full flex flex-row items-center justify-between px-2 py-1 rounded-sm cursor-pointer"
<span className="mb-2 leading-6"> >
{"نام:" + " " + address.firstName + " " + address.lastName} <button class="text-sm">حذف</button>
</span> <img src={trash} alt="delete-address" className="w-5 mr-3" />
<span className="mb-2 leading-6"> </div>
{"کد پستی:" + " " + address.postalCode} <div
</span> style={{ border: "solid 1px #12CF7F" }}
<span className="mb-2 leading-6"> class="w-full flex flex-row items-center justify-between px-2 py-1 rounded-sm cursor-pointer"
{"شماره تماس:" + " " + address.cellphone} >
</span> <button class="text-sm">ویرایش</button>
<img src={editButton} alt="edit-address" className="w-5 mr-3 " />
</div> </div>
{!active && (
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
onClick={(e) => clickOnMenu(e)}
>
<g fill={"#aaa"} data-name="vuesax/linear/more">
<path d="M10 19a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z" />
<path
data-name="Vector"
d="M10 5a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2ZM10 12a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z"
/>
</g>
</svg>
)}
</div> </div>
<Button
title="مشاهده روی نقشه"
backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "0px" }}
width="100%"
color={"text-white"}
onClick={() => {}}
/>
</div> </div>
<Button
title="مشاهده روی نقشه"
backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "0px" }}
width="100%"
color={"text-white"}
onClick={() => {}}
/>
</div> </div>
); );
}; };

@ -120,9 +120,14 @@ const Location = ({
return ( return (
<div <div
className={`bg-opacity-5 border border-solid flex items-center w-full px-3 py-2 rounded-md relative ${ className={`bg-opacity-5 border border-solid flex items-center w-full px-3 py-2 rounded-md relative
active ? "bg-blueC0 border-blueC0" : "bg-gray-300 border-gray-300" ${
}`} active
? "border-green-400 bg-blueC0 bg-opacity-5"
: "border-gray-300 bg-white"
}
`}
onClick={() => onClick={() =>
active ? {} : update({ userAddressId: address.id, userId }) active ? {} : update({ userAddressId: address.id, userId })
} }

@ -52,7 +52,7 @@ function Address({
</div> </div>
</div> </div>
{/* edit / delete button */} {/* edit / delete button */}
<div className="flex items-center gap-x-4 mt-4"> <div className="flex items-center gap-x-4 mt-2">
<div <div
style={{ border: "solid 1px #fca5a5" }} style={{ border: "solid 1px #fca5a5" }}
class="w-full flex flex-row items-center justify-between px-2 py-1 rounded-sm cursor-pointer" class="w-full flex flex-row items-center justify-between px-2 py-1 rounded-sm cursor-pointer"
@ -106,7 +106,7 @@ function Address({
شماره تماس:&nbsp;{address.cellphone} شماره تماس:&nbsp;{address.cellphone}
</li> </li>
</div> </div>
<div className="flex flex-col items-center gap-y-5"> <div className="flex flex-col items-center gap-y-2">
<div <div
style={{ border: "solid 1px #fca5a5" }} style={{ border: "solid 1px #fca5a5" }}
class="w-full flex flex-row items-center justify-between px-2 py-1 rounded-sm cursor-pointer" class="w-full flex flex-row items-center justify-between px-2 py-1 rounded-sm cursor-pointer"

Loading…
Cancel
Save