edit and delete button added in mobile view for address list | 20

temp
mahdi 2 years ago
parent 800f85613c
commit 654e2e2eb4
  1. 24
      src/views/Address/index.js
  2. 21
      src/views/DeliveryForm/Address/index.js

@ -12,7 +12,8 @@ import Loading from "../../components/Loading";
import Radio from "../../components/Radio"; import Radio from "../../components/Radio";
//assets //assets
import dropdownIcon from "../../assets/icons/dropdown-blue.svg"; import dropdownIcon from "../../assets/icons/white-dropdown.svg";
import arrowBlueIcon from "../../assets/icons/arrow-right-blue.svg"; import arrowBlueIcon from "../../assets/icons/arrow-right-blue.svg";
import arrowWhiteIcon from "../../assets/icons/arrow-left-white.svg"; import arrowWhiteIcon from "../../assets/icons/arrow-left-white.svg";
@ -328,16 +329,27 @@ export const Address = ({
onClick={() => submit()} onClick={() => submit()}
/> />
<button <button
className="bg-transparent mt-4 text-tiny py-3 flex flex-row justify-center items-center border border-solid border-blueC0 text-green7B rounded-full" className="bg-transparent mt-4 text-base lg:text-tiny border bg-blueC0 text-white font-bold rounded-md py-3.5 lg:py-4 flex flex-row justify-center items-center"
onClick={() => setPhase("deliveryForm")} onClick={() => setPhase("deliveryForm")}
> >
بازگشت بازگشت
<img <img
src={dropdownIcon} src={dropdownIcon}
alt="" alt=""
className="w-3.5 transform rotate-90" className="w-4 transform rotate-90"
/> />
</button> </button>
{/* <button
className="bg-transparent mt-4 text-tiny py-3 flex flex-row justify-center items-center border border-solid border-blueC0 text-green7B rounded-full"
onClick={() => setPhase("deliveryForm")}
>
fsddsf
<img
src={dropdownIcon}
alt=""
className="w-3.5 transform rotate-90"
/>
</button> */}
</div> </div>
</div> </div>
</div> </div>
@ -348,6 +360,7 @@ export const Address = ({
profilePage ? "mx-auto" : "" profilePage ? "mx-auto" : ""
}`} }`}
> >
{!profilePage && (
<div <div
className={`flex flex-row items-center mb-7 cursor-pointer className={`flex flex-row items-center mb-7 cursor-pointer
`} `}
@ -369,8 +382,9 @@ export const Address = ({
</span> </span>
</p> </p>
</div> </div>
{console.log(activeCheckbox)} )}
{activeCheckbox === false ? (
{activeCheckbox === false && !profilePage ? (
<> <>
<Header <Header
title="اطلاعات هویتی" title="اطلاعات هویتی"

@ -22,7 +22,7 @@ function Address({
const Location = ({ address, active }) => { const Location = ({ address, active }) => {
return isMobile ? ( return isMobile ? (
<button <button
className={`flex flex-row border-2 border-solid items-center w-full px-3 py-2 rounded-md mt-2 transition-all duration-500 dark:bg-opacity-5 ${ className={`flex flex-col border-2 border-solid items-center w-full px-3 py-2 rounded-md mt-2 transition-all duration-500 dark:bg-opacity-5 ${
userAddressId === address?.id userAddressId === address?.id
? "bg-blueC0 bg-opacity-5 border-blueC0" ? "bg-blueC0 bg-opacity-5 border-blueC0"
: "bg-grayF9 border-gray-200 dark:border-gray-500" : "bg-grayF9 border-gray-200 dark:border-gray-500"
@ -33,6 +33,7 @@ function Address({
: update({ userAddressId: address.id, userId }) : update({ userAddressId: address.id, userId })
} }
> >
<div className="flex items-center">
{loading && userAddressId !== address?.id ? ( {loading && userAddressId !== address?.id ? (
<Loading size={2} color="bg-gray-400" /> <Loading size={2} color="bg-gray-400" />
) : ( ) : (
@ -49,6 +50,24 @@ function Address({
{address.address} {address.address}
</li> </li>
</div> </div>
</div>
{/* edit / delete button */}
<div className="flex items-center gap-x-4 mt-4">
<div
style={{ border: "solid 1px #fca5a5" }}
class="w-full flex flex-row items-center justify-between px-2 py-1 rounded-sm cursor-pointer"
>
<button class="text-sm">حذف</button>
<img src={trash} alt="delete-address" className="w-5 mr-3" />
</div>
<div
style={{ border: "solid 1px #12CF7F" }}
class="w-full flex flex-row items-center justify-between px-2 py-1 rounded-sm cursor-pointer"
>
<button class="text-sm">ویرایش</button>
<img src={editButton} alt="edit-address" className="w-5 mr-3 " />
</div>
</div>
</button> </button>
) : ( ) : (
<button <button

Loading…
Cancel
Save