Danovin
/
application_17
5
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity

address list fixed | 90

Browse Source
temp
mahdi 2 years ago
parent b15c83ec9b
commit b72f69dea5
5 changed files with 149 additions and 66 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/assets/icons/white-dropdown.svg
  2. 16
      src/views/Address/index.js
  3. 186
      src/views/Dashboard/layouts/Main/Addresses/index.js
  4. 7
      src/views/Dashboard/layouts/Mobile/ProfileAddress/index.js
  5. 4
      src/views/DeliveryForm/Address/index.js

2
src/assets/icons/white-dropdown.svg
Unescape View File

@ -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>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 513 B

After

Width:  |  Height:  |  Size: 516 B

16
src/views/Address/index.js
Unescape View File

@ -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>

186
src/views/Dashboard/layouts/Main/Addresses/index.js
Unescape View File

@ -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);

7
src/views/Dashboard/layouts/Mobile/ProfileAddress/index.js
Unescape View File

@ -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,
});

4
src/views/DeliveryForm/Address/index.js
Unescape View File

@ -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}

Write Preview
Loading…
Cancel
Save