From b72f69dea5e08eb680ec6c2e81c9131cc99c00d3 Mon Sep 17 00:00:00 2001
From: mahdi <andalibmahdi45@gmail.com>
Date: Tue, 21 Jun 2022 15:54:33 +0430
Subject: [PATCH] address list fixed | 90

---
 src/assets/icons/white-dropdown.svg           |   2 +-
 src/views/Address/index.js                    |  16 +-
 .../Dashboard/layouts/Main/Addresses/index.js | 186 +++++++++++++-----
 .../layouts/Mobile/ProfileAddress/index.js    |   7 +-
 src/views/DeliveryForm/Address/index.js       |   4 +-
 5 files changed, 149 insertions(+), 66 deletions(-)

diff --git a/src/assets/icons/white-dropdown.svg b/src/assets/icons/white-dropdown.svg
index 1af44c5..71323cd 100644
--- a/src/assets/icons/white-dropdown.svg
+++ b/src/assets/icons/white-dropdown.svg
@@ -1,6 +1,6 @@
 <svg id="vuesax_linear_arrow-down" data-name="vuesax/linear/arrow-down" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
   <g id="arrow-down">
-    <path id="Vector" d="M15.84,0,9.32,6.52a1.986,1.986,0,0,1-2.8,0L0,0" transform="translate(4.08 8.95)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector" d="M15.84,0,9.32,6.52a1.986,1.986,0,0,1-2.8,0L0,0" transform="translate(4.08 8.95)" fill="none" stroke="#12CF7F" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
     <path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(24 24) rotate(180)" fill="none" opacity="0"/>
   </g>
 </svg>
diff --git a/src/views/Address/index.js b/src/views/Address/index.js
index c23d643..c102d68 100644
--- a/src/views/Address/index.js
+++ b/src/views/Address/index.js
@@ -292,11 +292,12 @@ export const Address = ({
       </div>
     );
   };
+  console.log({ state: location?.state });
 
   return (
     <div
       className={`flex flex-col lg:flex-row-reverse px-4 flex-1 lg:pt-0 pb-20 gap-5 lg:divide-x lg:divide-solid lg:divide-gray-200 ${
-        location?.state?.panel ? "mt-2" : "pt-0"
+        location?.state?.panel === isMobile ? "mt-2" : "mt-32 px-10"
       } `}
       // style={{ minHeight: "calc(100vh - 500px)" }}
     >
@@ -330,7 +331,7 @@ export const Address = ({
                 onClick={() => submit()}
               />
               <button
-                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"
+                className="bg-transparent mt-4 text-base lg:text-tiny border border-blueC0 text-blueC0 font-bold rounded-md py-3.5 lg:py-4 flex flex-row justify-center items-center"
                 onClick={() => setPhase("deliveryForm")}
               >
                 بازگشت
@@ -340,17 +341,6 @@ export const Address = ({
                   className="w-4 transform rotate-90"
                 />
               </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>
diff --git a/src/views/Dashboard/layouts/Main/Addresses/index.js b/src/views/Dashboard/layouts/Main/Addresses/index.js
index d2373e4..026d632 100644
--- a/src/views/Dashboard/layouts/Main/Addresses/index.js
+++ b/src/views/Dashboard/layouts/Main/Addresses/index.js
@@ -1,16 +1,17 @@
 import React from "react";
 import { connect } from "react-redux";
-import { userAddress, userFactor } from "../../../../../redux/actions";
+import {
+  userAddress,
+  userFactor,
+  dialog,
+  menu,
+} from "../../../../../redux/actions";
 
 //components
 import Button from "../../../../../components/Button";
-import FloatingButton from "../../../../../components/FloatingButton";
 
 import { Link, useNavigate } from "react-router-dom";
 
-//assets
-import menuIcon from "./menu.svg";
-
 const ProfileAddress = ({
   addresses,
   update,
@@ -64,56 +65,142 @@ const ProfileAddress = ({
   );
 };
 
-const Location = ({ address, active, userId, isDark, update }) => {
+const Location = ({
+  address,
+  active,
+  userId,
+  isDark,
+  update,
+  setMenu,
+  setDialog,
+  deleteAddress,
+}) => {
+  const [locationMenu, setLocationMenu] = React.useState(false);
+
+  React.useEffect(() => {
+    if (locationMenu) {
+      setMenu();
+    }
+  }, [locationMenu]);
+
+  React.useEffect(() => {
+    if (!menu) {
+      setLocationMenu(false);
+    }
+  }, [menu]);
+
+  const delAddress = (id) => {
+    setMenu();
+    setDialog({
+      text: "آدرس رو حذف کنیم؟",
+      type: "confirm",
+      accept: () => deleteAddress({ id }),
+      open: true,
+    });
+  };
+
+  const clickOnMenu = (e) => {
+    setLocationMenu(true);
+    e.stopPropagation();
+  };
+
   return (
-    <>
+    <div
+      className={`flex items-center w-full px-3 py-4 rounded-md my-4 border-2 border-solid ${
+        active
+          ? "border-green-400 bg-blueC0 bg-opacity-5"
+          : "border-gray-300 bg-white"
+      }`}
+      onClick={() =>
+        active ? {} : update({ userAddressId: address.id, userId })
+      }
+    >
       <div
-        className={`flex items-center w-full px-3 py-4 rounded-md my-4 border-2 border-solid ${
-          active
-            ? "border-gray-300 bg-blueC0 bg-opacity-5"
-            : "border-green-400 bg-white"
-        }`}
-        onClick={() =>
-          active ? {} : update({ userAddressId: address.id, userId })
-        }
+        className={`absolute left-8 top-0 transform transition-all origin-bottom-left ${
+          locationMenu ? "scale-100" : "scale-0"
+        } -translate-y-1/2 bg-white roundd-md flex flex-col gap-1 p-1 shadow-all divide-y divide-solid divide-gray-200`}
+        style={{ zIndex: 70 }}
+        onClick={(e) => e.stopPropagation()}
       >
-        <div className="flex flex-1 flex-col  mr-2">
-          {active && (
-            <div className="w-full flex justify-between mb-3">
-              <div className="flex items-center">
-                <strong className="text-base">آدرس انتخابی شما</strong>
-                <span className="mr-4 text-sm">فعال</span>
-              </div>
-              <img src={menuIcon} alt="" className="w-6" />
-            </div>
-          )}
-          <div className="flex w-full">
-            <div className="flex flex-col flex-1 mb-4">
-              <span className="mb-2 leading-6">
-                {"آدرس:" + " " + address.address}
-              </span>
-              <span className="mb-2 leading-6">
-                {"نام:" + " " + address.firstName + " " + address.lastName}
-              </span>
-              <span className="mb-2 leading-6">
-                {"کد پستی:" + " " + address.postalCode}
-              </span>
-              <span className="mb-2 leading-6">
-                {"شماره تماس:" + " " + address.cellphone}
-              </span>
+        <Link
+          to={"/editAddress/" + address.id}
+          className="py-3 pr-2 pl-10 text-sm font-bold"
+          onClick={() => setMenu()}
+        >
+          ویرایش
+        </Link>
+        <button
+          className="py-3 pr-2 pl-10 border-none m-0 text-sm text-red19 font-bold"
+          onClick={() => delAddress(address.id)}
+        >
+          حذف
+        </button>
+      </div>
+      <div className="flex flex-col flex-1 mr-2">
+        {active && (
+          <div className="w-full flex justify-between mb-3">
+            <div className="flex items-center">
+              <strong className="text-base">آدرس انتخابی شما</strong>
+              <span className="mr-4 text-sm">فعال</span>
             </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>
-          <Button
-            title="مشاهده روی نقشه"
-            backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"}
-            border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "0px" }}
-            width="100%"
-            color={"text-white"}
-            onClick={() => {}}
-          />
+        )}
+        <div className={`flex w-full ${active ? "" : "flex-row"}`}>
+          <div className="flex flex-col flex-1 mb-4">
+            <span className="mb-2 leading-6">
+              {"آدرس:" + " " + address.address}
+            </span>
+            <span className="mb-2 leading-6">
+              {"نام:" + " " + address.firstName + " " + address.lastName}
+            </span>
+            <span className="mb-2 leading-6">
+              {"کد پستی:" + " " + address.postalCode}
+            </span>
+            <span className="mb-2 leading-6">
+              {"شماره تماس:" + " " + address.cellphone}
+            </span>
+          </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>
+        <Button
+          title="مشاهده روی نقشه"
+          backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"}
+          border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "0px" }}
+          width="100%"
+          color={"text-white"}
+          onClick={() => {}}
+        />
       </div>
-    </>
+    </div>
   );
 };
 
@@ -129,6 +216,9 @@ const mapDispatchToProps = {
   getFactorInfo: userFactor.info,
   update: userFactor.update,
   getList: userAddress.list,
+  deleteAddress: userAddress.del,
+  setMenu: menu.set,
+  setDialog: dialog.set,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(ProfileAddress);
diff --git a/src/views/Dashboard/layouts/Mobile/ProfileAddress/index.js b/src/views/Dashboard/layouts/Mobile/ProfileAddress/index.js
index 041c90c..55a954c 100644
--- a/src/views/Dashboard/layouts/Mobile/ProfileAddress/index.js
+++ b/src/views/Dashboard/layouts/Mobile/ProfileAddress/index.js
@@ -15,6 +15,7 @@ import { Link, useNavigate } from "react-router-dom";
 import Empty from "../../../../../components/Empty";
 import Button from "../../../../../components/Button";
 import FloatingButton from "../../../../../components/FloatingButton";
+
 import { add } from "lodash";
 
 const ProfileAddress = ({
@@ -48,7 +49,7 @@ const ProfileAddress = ({
     <div className="flex-1 flex flex-col relative">
       {addresses.length > 0 ? (
         <div className="w-full mt-2 px-4">
-          <div className="p-0 m-0 flex flex-col">
+          <div className="p-0 m-0 flex flex-col gap-y-5 pb-20">
             {addresses.map((address, index) => (
               <Location
                 address={address}
@@ -86,6 +87,7 @@ const Location = ({
   menu,
   deleteAddress,
   setDialog,
+  isMobile,
 }) => {
   const [locationMenu, setLocationMenu] = React.useState(false);
 
@@ -118,7 +120,7 @@ const Location = ({
 
   return (
     <div
-      className={`bg-opacity-5 border border-solid flex flex-row 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"
       }`}
       onClick={() =>
@@ -225,6 +227,7 @@ const mapStateToProps = (state) => ({
   loading: state.userFactor.loading,
   addresses: state.userAddress.list,
   mobile: state.publicApi.mobile,
+  isMobile: state.publicApi.isMobile,
   isDark: state.publicApi.isDark,
   menu: state.menu.open,
 });
diff --git a/src/views/DeliveryForm/Address/index.js b/src/views/DeliveryForm/Address/index.js
index 1a97c34..de70352 100644
--- a/src/views/DeliveryForm/Address/index.js
+++ b/src/views/DeliveryForm/Address/index.js
@@ -125,7 +125,7 @@ function Address({
       </button>
     );
   };
-  
+
   return isMobile ? (
     <section className="mt-2 w-full">
       <strong className="font-bold text-green7B dark:text-white lg:text-tiny">
@@ -158,7 +158,7 @@ function Address({
   ) : (
     <section className="mt-0.5 w-full">
       <strong className="font-medium dark:text-white">انتخاب آدرس</strong>
-      <ul className="list-none p-0 m-0 flex flex-col">
+      <ul className="list-none p-0 m-0 flex flex-col gap-y-10">
         {addresses.map((address, index) => (
           <Location
             address={address}