danak/dmail-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

default 1 column + header + ...

Browse Source
This commit is contained in:
hamid zarghami
2025-07-30 15:00:54 +03:30
parent b76be3815d
commit 25e00442d4
21 changed files with 835 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/avatar_image.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

src/components/StatusCircle.tsx
+15
View File
@@ -0,0 +1,15 @@
import { FC } from 'react'
type Props = {
color: string
}
const StatusCircle: FC<Props> = (props: Props) => {
return (
<div style={{ background: props.color }} className='size-1.5 rounded-full'>
</div>
)
}
export default StatusCircle
src/hooks/useOutSideClick.tsx
+24
View File
@@ -0,0 +1,24 @@
import { useEffect, useRef } from 'react';
export const useOutsideClick = (callback: () => void) => {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
const handleClickOutside = (event: MouseEvent | TouchEvent) => {
if (ref.current && !ref.current.contains(event.target as Node)) {
callback();
}
};
document.addEventListener('mouseup', handleClickOutside);
document.addEventListener('touchend', handleClickOutside);
return () => {
document.removeEventListener('mouseup', handleClickOutside);
document.removeEventListener('touchend', handleClickOutside);
};
}, [callback]);
return ref;
};
src/langs/fa.json
+7 -2
View File
@@ -71,9 +71,13 @@
"unread": "خوانده نشده",
"search": "جستجو"
},
"notif": {
"natification": "اعلان ها",
"all_read": "همه خوانده شده"
},
"setting": {
"title": "تنظیمات",
"personality": "قالب",
"personality": "قالب ها",
"mail_server": "تنظیمات میل سرور",
"domain": "تنظیمات دامنه",
"address": "نشانی ها",
@@ -81,6 +85,7 @@
"background": "رنگ زمینه",
"upload_background": "تصویر پس زمینه مورد نظر را آپلود کنید",
"size": "سایز",
"position": "موقعیت",
"horizontal_position": "موقعیت افقی",
"vertical_position": "موقعیت عمودی",
"text": "متن",
@@ -120,7 +125,7 @@
"email": "ایمیل",
"marketing": "بازاریابی",
"actions": "عملیات",
"delete": "حذف کردن ایمیل",
"delete_email": "حذف کردن ایمیل",
"active": "فعال",
"inactive": "غیرفعال",
"add_address": "اضافه کردن نشانی",
src/pages/notification/Notification.tsx
+172
View File
@@ -0,0 +1,172 @@
import { CloseCircle, Notification } from 'iconsax-react';
import { FC, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { clx } from '../../helpers/utils';
import StatusCircle from '../../components/StatusCircle';
import { useOutsideClick } from '../../hooks/useOutSideClick';
import { useGetNotification, useReadAll } from './hooks/useNotificationData';
import { NotificationItemType, NotificationTypeEnum } from './types/NotificationTypes';
import { timeAgo } from '../../config/func';
import InfiniteScroll from 'react-infinite-scroll-component';
import MoonLoader from "react-spinners/MoonLoader"
import Button from '../../components/Button';
import { toast } from '../../components/Toast';
// import { useNavigate } from 'react-router-dom';
import { ErrorType } from '../../helpers/types';
const Notifications: FC = () => {
// const navigate = useNavigate()
const { t } = useTranslation();
const ref = useOutsideClick(() => setShowModal(false));
const [activeTab, setActiveTab] = useState<'read' | 'unread'>('unread');
const [showModal, setShowModal] = useState<boolean>(false);
const { data, fetchNextPage, hasNextPage, refetch } = useGetNotification(activeTab);
const readAll = useReadAll()
const posts = data?.pages.flatMap((page) => page.data?.notifications) || [];
const handleAllRead = () => {
readAll.mutate(undefined, {
onSuccess: () => {
refetch()
toast(t('success'), 'success')
},
onError: (error: ErrorType) => {
toast(error.response?.data?.error?.message[0], 'error')
}
})
}
const handleRedirect = (type: NotificationTypeEnum) => {
switch (type) {
case NotificationTypeEnum.USER_LOGIN:
break;
// case NotificationTypeEnum.ANNOUNCEMENT:
// navigate(Pages.announcement.list)
// break;
// case NotificationTypeEnum.WALLET_CHARGE:
// navigate(Pages.transactions)
// break;
// case NotificationTypeEnum.WALLET_DEDUCTION:
// navigate(Pages.transactions)
// break;
// case NotificationTypeEnum.BILL_INVOICE_REMINDER:
// navigate(Pages.receipts.index)
// break;
// case NotificationTypeEnum.BILL_INVOICE:
// navigate(Pages.receipts.index)
// break;
// case NotificationTypeEnum.CREATE_INVOICE:
// navigate(Pages.receipts.index)
// break;
// case NotificationTypeEnum.CREATE_SERVICE:
// navigate(Pages.services.other)
// break;
// case NotificationTypeEnum.UNBLOCK_SERVICE:
// navigate(Pages.services.other)
// break;
// case NotificationTypeEnum.BLOCK_SERVICE:
// navigate(Pages.services.other)
// break;
// case NotificationTypeEnum.ANSWER_TICKET:
// navigate(Pages.ticket.list)
// break;
// case NotificationTypeEnum.CREATE_TICKET:
// navigate(Pages.ticket.list)
// break;
default:
break
}
setShowModal(false)
}
return (
<div ref={ref}>
<div onClick={() => setShowModal(!showModal)} className='relative cursor-pointer'>
<Notification size={18} color="black" />
<div className="absolute top-0 right-0 -mt-1 -mr-1 rounded-full bg-red-500 text-white text-[8px] size-3 flex pt-0.5 pl-[1px] justify-center items-center">
{data?.pages[0]?.data?.notificationCount}
</div>
</div>
{showModal && (
<div id='notificationsContainer' className="xl:h-[calc(100%-110px)] h-[70%] p-6 z-[300] xl:w-[300px] w-full xl:left-7 left-0 xl:top-[90px] top-0 overflow-y-auto xl:rounded-3xl rounded-b-3xl rounded-t-none fixed modalGlass3 ">
<div className="flex justify-between items-center">
<div>{t('notif.natification')}</div>
<div className="size-7 rounded-full bg-white/30 flex justify-center items-center">
<CloseCircle size={20} color="black" onClick={() => setShowModal(false)} />
</div>
</div>
<div className="mt-6 flex h-8 border border-white border-opacity-35 text-xs rounded-lg overflow-hidden">
<div
onClick={() => setActiveTab('unread')}
className={clx(
'flex-1 border-l cursor-pointer text-white border-white border-opacity-70 bg-transparent flex justify-center items-center',
activeTab === 'unread' ? 'bg-white/70 text-black' : ''
)}
>
خوانده نشده
</div>
<div
onClick={() => setActiveTab('read')}
className={clx(
'flex-1 cursor-pointer text-white border-white bg-transparent flex justify-center items-center',
activeTab === 'read' ? 'bg-white/70 text-black' : ''
)}
>
خوانده شده
</div>
</div>
<div className='flex mt-4 justify-end'>
<Button
loading={readAll.isPending}
onClick={handleAllRead}
className={clx(
'flex-1 border bg-transparent text-xs h-7 rounded-md cursor-pointer text-white border-white border-opacity-70 flex justify-center items-center',
)}
>
{t('notif.all_read')}
</Button>
</div>
<div className="mt-6 flex flex-col gap-4 text-xs overflow-auto">
<InfiniteScroll
dataLength={posts.length}
next={fetchNextPage}
hasMore={hasNextPage}
loader={<div className='flex justify-center'><MoonLoader color="black" size={20} /></div>}
scrollableTarget="notificationsContainer"
>
{
posts.map((item: NotificationItemType) => (
<div onClick={() => handleRedirect(item.type)} className="bg-white cursor-pointer h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 mb-4 flex" key={item.id}>
{
!item.isRead &&
<div className="mt-1">
<StatusCircle color="#00BA4B" />
</div>
}
<div>
<div className="truncate max-w-[200px]">{item.message}</div>
<div className="mt-2 flex gap-2 text-[10px] text-description">
<div>{timeAgo(item.createdAt)}</div>
<div className="flex gap-1 items-center">
<StatusCircle color="#8C90A3" />
<div>{item.title}</div>
</div>
</div>
</div>
</div>
))
}
</InfiniteScroll>
</div>
</div>
)}
</div>
);
};
export default Notifications;
src/pages/notification/hooks/useNotificationData.ts
+22
View File
@@ -0,0 +1,22 @@
import * as api from "../service/NotificationService";
import { useInfiniteQuery, useMutation } from "@tanstack/react-query";
export const useGetNotification = (status: "all" | "read" | "unread") => {
return useInfiniteQuery({
queryKey: ["notifications", status],
queryFn: ({ pageParam = 1 }) => api.getNotifications(pageParam, status), // فراخوانی API برای گرفتن داده‌ها
initialPageParam: 1, // صفحه اول به طور پیشفرض
getNextPageParam: (lastPage) => {
const currentPage = lastPage.data?.pager.page;
const totalPages = lastPage.data?.pager.totalPages;
return currentPage < totalPages ? currentPage + 1 : undefined;
},
});
};
export const useReadAll = () => {
return useMutation({
mutationFn: (_) => api.readAll(),
});
};
src/pages/notification/service/NotificationService.ts
+18
View File
@@ -0,0 +1,18 @@
import axios from "../../../config/axiosDanak";
export const getNotifications = async (
page: number,
status: "all" | "read" | "unread"
) => {
let query = ``;
if (status !== "all") {
query = `&isRead=${status === "read" ? 1 : 0}`;
}
const { data } = await axios.get(`/notifications?page=${page}${query}`);
return data;
};
export const readAll = async () => {
const { data } = await axios.patch(`/notifications/read-all`);
return data;
};
src/pages/notification/types/NotificationTypes.ts
+31
View File
@@ -0,0 +1,31 @@
export type NotificationItemType = {
id: string;
title: string;
message: string;
createdAt: string;
isRead: boolean;
type: NotificationTypeEnum;
};
export enum NotificationTypeEnum {
USER_LOGIN = "USER_LOGIN",
ANNOUNCEMENT = "ANNOUNCEMENT",
// Finance category
WALLET_CHARGE = "WALLET_CHARGE",
WALLET_DEDUCTION = "WALLET_DEDUCTION",
//Invoice
BILL_INVOICE_REMINDER = "BILL_INVOICE_REMINDER",
BILL_INVOICE = "BILL_INVOICE",
CREATE_INVOICE = "CREATE_INVOICE",
// Service category
CREATE_SERVICE = "CREATE_SERVICE",
UNBLOCK_SERVICE = "UNBLOCK_SERVICE",
BLOCK_SERVICE = "BLOCK_SERVICE",
// Support category
ANSWER_TICKET = "ANSWER_TICKET",
CREATE_TICKET = "CREATE_TICKET",
}
src/pages/profile/hooks/useProfileData.tsx
+9
View File
@@ -0,0 +1,9 @@
import { useQuery } from '@tanstack/react-query';
import * as api from '../service/ProfileService'
export const useGetProfile = () => {
return useQuery({
queryKey: ["profile"],
queryFn: () => api.getProfile(),
});
};
src/pages/profile/service/ProfileService.ts
+6
View File
@@ -0,0 +1,6 @@
import axios from "../../../config/axiosDanak";
export const getProfile = async () => {
const { data } = await axios.get(`/users/me`);
return data;
};
src/pages/setting/Setting.tsx
+1 -1
View File
@@ -158,7 +158,7 @@ const Setting: FC = () => {
return (
<div className='mt-2 md:mt-4 px-2 md:px-0'>
<div className='flex justify-between items-center'>
<div className='flex flex-col md:flex-row justify-between md:items-center'>
<h1 className='text-lg mb-4 md:mb-0'>{t('setting.title')}</h1>
{
activeTab === SettingTabEnum.SETTING_PERSONALITY &&
src/pages/setting/personality/SideBar.tsx
+39 -30
View File
@@ -9,13 +9,13 @@ import ImageSideBar from './components/ImageSideBar'
import SocialSidebar from './components/SocialSidebar'
import { clx } from '@/helpers/utils'
import { usePersonalityStore } from './store/Store'
import { ElementType } from './types/Types'
import { ElementType, SectionName } from './types/Types'
const PersonalitySidebar: FC = () => {
const [active, setActive] = useState<SideBarTab>(SideBarTab.SETTING)
const sidebarRef = useRef<HTMLDivElement>(null)
const { selectedElement } = usePersonalityStore()
const { selectedElement, activeSection } = usePersonalityStore()
// Auto-switch to relevant tab when element is selected
useEffect(() => {
@@ -39,6 +39,11 @@ const PersonalitySidebar: FC = () => {
}
}, [selectedElement])
// وقتی بین بخش‌ها (header, content, footer) جابجا می‌شود، تب را به تنظیمات تغییر بده
useEffect(() => {
setActive(SideBarTab.SETTING)
}, [activeSection])
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
// فقط در موبایل (عرض کمتر از 1280px) کار کند
@@ -88,34 +93,38 @@ const PersonalitySidebar: FC = () => {
onClick={() => setActive(SideBarTab.SETTING)}
className='cursor-pointer'
/>
<Text
size={22}
color={'black'}
variant={SideBarTab.TEXT === active ? 'Bold' : 'Outline'}
onClick={() => setActive(SideBarTab.TEXT)}
className='cursor-pointer'
/>
<LinkSquare
size={22}
color={'black'}
variant={SideBarTab.BUTTON === active ? 'Bold' : 'Outline'}
onClick={() => setActive(SideBarTab.BUTTON)}
className='cursor-pointer'
/>
<Gallery
size={22}
color={'black'}
variant={SideBarTab.IMAGE === active ? 'Bold' : 'Outline'}
onClick={() => setActive(SideBarTab.IMAGE)}
className='cursor-pointer'
/>
<Profile2User
size={22}
color={'black'}
variant={SideBarTab.SOCIAL === active ? 'Bold' : 'Outline'}
onClick={() => setActive(SideBarTab.SOCIAL)}
className='cursor-pointer'
/>
{
activeSection !== SectionName.CONTENT && <>
<Text
size={22}
color={'black'}
variant={SideBarTab.TEXT === active ? 'Bold' : 'Outline'}
onClick={() => setActive(SideBarTab.TEXT)}
className='cursor-pointer'
/>
<LinkSquare
size={22}
color={'black'}
variant={SideBarTab.BUTTON === active ? 'Bold' : 'Outline'}
onClick={() => setActive(SideBarTab.BUTTON)}
className='cursor-pointer'
/>
<Gallery
size={22}
color={'black'}
variant={SideBarTab.IMAGE === active ? 'Bold' : 'Outline'}
onClick={() => setActive(SideBarTab.IMAGE)}
className='cursor-pointer'
/>
<Profile2User
size={22}
color={'black'}
variant={SideBarTab.SOCIAL === active ? 'Bold' : 'Outline'}
onClick={() => setActive(SideBarTab.SOCIAL)}
className='cursor-pointer'
/>
</>
}
</div>
</div>
</div>
src/pages/setting/personality/components/ImageSideBar.tsx
+81 -1
View File
@@ -1,5 +1,6 @@
import Button from '@/components/Button'
import Select from '@/components/Select'
import Input from '@/components/Input'
import UploadBoxDraggble from '@/components/UploadBoxDraggble'
import { Add, AlignBottom, AlignHorizontally, AlignLeft, AlignRight, AlignTop, AlignVertically, Edit, Trash } from 'iconsax-react'
import { FC, useState, useEffect } from 'react'
@@ -26,6 +27,8 @@ const ImageSideBar: FC = () => {
const [imageSize, setImageSize] = useState<ImageSize>(ImageSize.COVER)
const [horizontalAlignment, setHorizontalAlignment] = useState<HorizontalAlignment>(HorizontalAlignment.CENTER)
const [verticalAlignment, setVerticalAlignment] = useState<VerticalAlignment>(VerticalAlignment.MIDDLE)
const [imageWidth, setImageWidth] = useState<string>('100%')
const [imageHeight, setImageHeight] = useState<string>('auto')
const [isLoading, setIsLoading] = useState<boolean>(false)
const [isReset, setIsReset] = useState<boolean>(false)
const [isUploading, setIsUploading] = useState<boolean>(false)
@@ -59,6 +62,8 @@ const ImageSideBar: FC = () => {
setImageSize(image.size);
setHorizontalAlignment(image.alignment || HorizontalAlignment.CENTER);
setVerticalAlignment(image.verticalAlignment || VerticalAlignment.MIDDLE);
setImageWidth(image.width || '100%');
setImageHeight(image.height || 'auto');
} else {
console.error('Image element not found');
}
@@ -71,6 +76,8 @@ const ImageSideBar: FC = () => {
setImageSize(ImageSize.COVER)
setHorizontalAlignment(HorizontalAlignment.CENTER)
setVerticalAlignment(VerticalAlignment.MIDDLE)
setImageWidth('100%')
setImageHeight('auto')
}
}, [selectedElement, isEditMode, data]);
@@ -138,6 +145,8 @@ const ImageSideBar: FC = () => {
size: imageSize,
alignment: horizontalAlignment,
verticalAlignment,
width: imageWidth,
height: imageHeight,
})
// Reset form after adding
@@ -145,6 +154,8 @@ const ImageSideBar: FC = () => {
setImageSize(ImageSize.COVER)
setHorizontalAlignment(HorizontalAlignment.CENTER)
setVerticalAlignment(VerticalAlignment.MIDDLE)
setImageWidth('100%')
setImageHeight('auto')
setIsReset(true)
setTimeout(() => {
setIsReset(false)
@@ -171,6 +182,8 @@ const ImageSideBar: FC = () => {
size: imageSize,
alignment: horizontalAlignment,
verticalAlignment,
width: imageWidth,
height: imageHeight,
}
);
@@ -239,6 +252,73 @@ const ImageSideBar: FC = () => {
/>
</div>
<div className='mt-5'>
<div className='text-sm mb-3'>اندازه سریع</div>
<div className='flex gap-2 flex-wrap'>
<button
type='button'
onClick={() => { setImageWidth('100%'); setImageHeight('auto'); }}
className='px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded transition-colors'
disabled={isUploading}
>
تمام عرض
</button>
<button
type='button'
onClick={() => { setImageWidth('50%'); setImageHeight('auto'); }}
className='px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded transition-colors'
disabled={isUploading}
>
نصف عرض
</button>
<button
type='button'
onClick={() => { setImageWidth('200px'); setImageHeight('150px'); }}
className='px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded transition-colors'
disabled={isUploading}
>
کوچک
</button>
<button
type='button'
onClick={() => { setImageWidth('300px'); setImageHeight('200px'); }}
className='px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded transition-colors'
disabled={isUploading}
>
متوسط
</button>
<button
type='button'
onClick={() => { setImageWidth('400px'); setImageHeight('300px'); }}
className='px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded transition-colors'
disabled={isUploading}
>
بزرگ
</button>
</div>
</div>
<div className='mt-5 grid grid-cols-2 gap-4'>
<div>
<Input
label='عرض (Width)'
value={imageWidth}
onChange={(e) => setImageWidth(e.target.value)}
placeholder='مثال: 100%, 200px'
disabled={isUploading}
/>
</div>
<div>
<Input
label='ارتفاع (Height)'
value={imageHeight}
onChange={(e) => setImageHeight(e.target.value)}
placeholder='مثال: auto, 150px'
disabled={isUploading}
/>
</div>
</div>
<div className='mt-5 flex justify-between'>
<div>
<div className='text-sm'>
@@ -292,7 +372,7 @@ const ImageSideBar: FC = () => {
<div className='space-y-3'>
<Button
onClick={handleUpdateImage}
className='bg-[#0038FF] text-white w-full'
className='w-full'
disabled={!imageSrc || isUploading}
loading={isLoading || isUploading}
>
src/pages/setting/personality/components/SettingSideBar.tsx
+54 -7
View File
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
import UploadBoxDraggble from '@/components/UploadBoxDraggble';
import ColorPicker from '@/components/ColorPicker';
import { usePersonalityStore } from '../store/Store';
import { SectionItemType, BackgroundSize, SectionName } from '../types/Types';
import { SectionItemType, BackgroundSize, BackgroundPosition, SectionName } from '../types/Types';
import Select from '@/components/Select';
import { useSingleUpload } from '../hooks/usePersonalityData';
import { toast } from '@/components/Toast';
@@ -13,6 +13,7 @@ const SettingSideBar: FC = () => {
const { activeSection, setColumnsCount, updateActiveItem, data, activeItemIndex } = usePersonalityStore()
const [color, setColor] = useState("#aabbcc");
const [backgroundSize, setBackgroundSize] = useState<BackgroundSize>(BackgroundSize.COVER)
const [backgroundPosition, setBackgroundPosition] = useState<BackgroundPosition>(BackgroundPosition.CENTER)
const [isUploading, setIsUploading] = useState<boolean>(false)
const { mutateAsync: singleUpload } = useSingleUpload()
@@ -32,19 +33,31 @@ const SettingSideBar: FC = () => {
return BackgroundSize.COVER
}
// تشخیص موقعیت background بر اساس style موجود
const getCurrentBackgroundPosition = (style?: SectionItemType['style']) => {
if (!style?.backgroundPosition) return BackgroundPosition.CENTER
return Object.values(BackgroundPosition).find(pos => pos === style.backgroundPosition) || BackgroundPosition.CENTER
}
// به‌روزرسانی state وقتی activeSection یا activeItem تغییر می‌کند
useEffect(() => {
if (activeSection && data[activeSection as keyof typeof data]) {
const currentItem = data[activeSection as keyof typeof data]?.items[activeItemIndex]
if (currentItem?.style) {
const currentType = getCurrentBackgroundSizeType(currentItem.style)
const currentPosition = getCurrentBackgroundPosition(currentItem.style)
setBackgroundSize(currentType)
setBackgroundPosition(currentPosition)
}
}
}, [activeSection, activeItemIndex, data])
const handleColumnClick = (columns: number) => {
if (activeSection) {
if (activeSection === SectionName.CONTENT && columns > 1) {
toast('این بخش فقط می تواند یک ستون داشته باشد', 'error')
return
}
setColumnsCount(activeSection as SectionName, columns);
}
}
@@ -70,7 +83,7 @@ const SettingSideBar: FC = () => {
...currentItem?.style,
backgroundSize: getBackgroundSize(backgroundSize),
backgroundRepeat: getBackgroundRepeat(backgroundSize),
backgroundPosition: 'center center'
backgroundPosition: backgroundPosition
}
})
toast('تصویر پس‌زمینه با موفقیت آپلود شد', 'success')
@@ -89,7 +102,7 @@ const SettingSideBar: FC = () => {
...currentItem?.style,
backgroundSize: getBackgroundSize(backgroundSize),
backgroundRepeat: getBackgroundRepeat(backgroundSize),
backgroundPosition: 'center center'
backgroundPosition: backgroundPosition
}
})
} finally {
@@ -123,9 +136,21 @@ const SettingSideBar: FC = () => {
}
const sizeOptions = [
{ label: 'کاور - تمام فضا را پوشش دهد (Cover)', value: BackgroundSize.COVER },
{ label: 'در مقیاس - در فضا جا شود (Contain)', value: BackgroundSize.CONTAIN },
{ label: 'گرد - عکس به صورت گرد تکرار شود (Round)', value: BackgroundSize.ROUND }
{ label: 'کاور', value: BackgroundSize.COVER },
{ label: 'در مقیاس', value: BackgroundSize.CONTAIN },
{ label: 'تکرار گرد', value: BackgroundSize.ROUND }
]
const positionOptions = [
{ label: 'وسط', value: BackgroundPosition.CENTER },
{ label: 'بالا چپ', value: BackgroundPosition.TOP_LEFT },
{ label: 'بالا وسط', value: BackgroundPosition.TOP_CENTER },
{ label: 'بالا راست', value: BackgroundPosition.TOP_RIGHT },
{ label: 'وسط چپ', value: BackgroundPosition.CENTER_LEFT },
{ label: 'وسط راست', value: BackgroundPosition.CENTER_RIGHT },
{ label: 'پایین چپ', value: BackgroundPosition.BOTTOM_LEFT },
{ label: 'پایین وسط', value: BackgroundPosition.BOTTOM_CENTER },
{ label: 'پایین راست', value: BackgroundPosition.BOTTOM_RIGHT }
]
if (!activeSection) {
@@ -204,7 +229,7 @@ const SettingSideBar: FC = () => {
...currentItem?.style,
backgroundSize: getBackgroundSize(newSize),
backgroundRepeat: getBackgroundRepeat(newSize),
backgroundPosition: 'center center'
backgroundPosition: backgroundPosition
}
})
}}
@@ -212,6 +237,28 @@ const SettingSideBar: FC = () => {
disabled={isUploading}
/>
</div>
<div className='mt-5'>
<Select
items={positionOptions}
label={t('setting.position')}
value={backgroundPosition}
onChange={(e) => {
const newPosition = e.target.value as BackgroundPosition
setBackgroundPosition(newPosition)
const currentItem = activeSection ? data[activeSection as keyof typeof data]?.items[activeItemIndex] : null
updateActiveItem({
style: {
...currentItem?.style,
backgroundPosition: newPosition
}
})
}}
placeholder={t('setting.position')}
disabled={isUploading}
/>
</div>
</div>
)
}
src/pages/setting/personality/store/Store.ts
+89 -19
View File
@@ -16,9 +16,9 @@ import {
export const usePersonalityStore = create<PersonalityStore>((set) => ({
data: {
header: { columnsCount: 0, items: [] },
content: { columnsCount: 0, items: [] },
footer: { columnsCount: 0, items: [] },
header: { columnsCount: 1, items: [] },
content: { columnsCount: 1, items: [] },
footer: { columnsCount: 1, items: [] },
},
activeSection: "",
@@ -32,7 +32,37 @@ export const usePersonalityStore = create<PersonalityStore>((set) => ({
})),
setActiveSection: (section: SectionName) =>
set(() => {
set((state) => {
const sectionData = state.data[section as keyof PersonalityDataType];
// اگر بخش آیتم ندارد و تعداد ستون‌ها بیشتر از صفر است، یک آیتم پیش‌فرض بساز
if (sectionData.items.length === 0 && sectionData.columnsCount > 0) {
const defaultItem = {
id: uuidv4(),
backgroundColor: "#ffffff",
texts: [],
buttons: [],
images: [],
socials: [],
alignment: HorizontalAlignment.CENTER,
verticalAlignment: VerticalAlignment.MIDDLE,
};
return {
activeSection: section,
activeItemIndex: 0,
selectedElement: null,
isEditMode: false,
data: {
...state.data,
[section]: {
...sectionData,
items: [defaultItem],
},
},
};
}
return {
activeSection: section,
activeItemIndex: 0,
@@ -61,20 +91,34 @@ export const usePersonalityStore = create<PersonalityStore>((set) => ({
) =>
set((state) => {
const currentItems = state.data[sectionKey].items;
const newItems = Array.from(
{ length: columnsCount },
(_, index) =>
currentItems[index] || {
id: uuidv4(),
backgroundColor: "#ffffff",
texts: [],
buttons: [],
images: [],
socials: [],
alignment: HorizontalAlignment.CENTER,
verticalAlignment: VerticalAlignment.MIDDLE,
}
);
const currentActiveItem = currentItems[state.activeItemIndex];
const newItems = Array.from({ length: columnsCount }, (_, index) => {
// اگر این آیتم در حال حاضر وجود دارد، آن را حفظ کن
if (currentItems[index]) {
return currentItems[index];
}
// اگر این اولین آیتم است و آیتم فعلی وجود دارد، از آن استفاده کن
if (index === 0 && currentActiveItem) {
return {
...currentActiveItem,
id: currentActiveItem.id || uuidv4(),
};
}
// در غیر این صورت، یک آیتم جدید بساز
return {
id: uuidv4(),
backgroundColor: "#ffffff",
texts: [],
buttons: [],
images: [],
socials: [],
alignment: HorizontalAlignment.CENTER,
verticalAlignment: VerticalAlignment.MIDDLE,
};
});
return {
data: {
@@ -121,7 +165,33 @@ export const usePersonalityStore = create<PersonalityStore>((set) => ({
const items = state.data[sectionKey].items;
const activeIndex = state.activeItemIndex;
if (activeIndex >= items.length) return state;
// اگر آیتم فعال وجود ندارد، یکی بساز
if (activeIndex >= items.length) {
const newItem = {
id: uuidv4(),
backgroundColor: "#ffffff",
texts: [],
buttons: [],
images: [],
socials: [],
alignment: HorizontalAlignment.CENTER,
verticalAlignment: VerticalAlignment.MIDDLE,
...updates,
};
const newItems = [...items];
newItems[activeIndex] = newItem;
return {
data: {
...state.data,
[sectionKey]: {
...state.data[sectionKey],
items: newItems,
},
},
};
}
const updatedItems = items.map((item, index) =>
index === activeIndex ? { ...item, ...updates } : item
src/pages/setting/personality/types/Types.ts
+12
View File
@@ -33,6 +33,18 @@ export enum BackgroundSize {
ROUND = "round",
}
export enum BackgroundPosition {
CENTER = "center center",
TOP_LEFT = "top left",
TOP_CENTER = "top center",
TOP_RIGHT = "top right",
CENTER_LEFT = "center left",
CENTER_RIGHT = "center right",
BOTTOM_LEFT = "bottom left",
BOTTOM_CENTER = "bottom center",
BOTTOM_RIGHT = "bottom right",
}
export enum SectionName {
HEADER = "header",
CONTENT = "content",
src/shared/Header.tsx
+49 -104
View File
@@ -1,56 +1,61 @@
import { FC } from 'react'
import Input from '../components/Input'
import { Element3, HambergerMenu, Wallet } from 'iconsax-react'
import { FC, useEffect, useState } from 'react'
// import Input from '../components/Input'
import { ArrowDown2, CloseCircle, Element4, HambergerMenu, Logout } from 'iconsax-react'
import AvatarImage from '../assets/images/avatar_image.png'
import { useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
import { Paths } from '@/utils/Paths'
// import Notifications from '../pages/notification/Notification'
import { Link, useLocation } from 'react-router-dom'
import Notifications from '../pages/notification/Notification'
import { useSharedStore } from './store/sharedStore'
// import { useGetProfile } from '../pages/profile/hooks/useProfileData'
// import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
// import { useGetWalletBalance } from '../pages/wallet/hooks/useWalletData'
// import { NumberFormat } from '../config/func'
import { useGetProfile } from '@/pages/profile/hooks/useProfileData'
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
import { removeRefreshToken, removeToken } from '../config/func'
import { clx } from '../helpers/utils'
const Header: FC = () => {
const location = useLocation();
const [popoverKey, setPopoverKey] = useState(0);
const { t } = useTranslation('global')
const { setOpenSidebar, openSidebar } = useSharedStore()
// const { data } = useGetProfile()
// const getWalletBalance = useGetWalletBalance()
const { setOpenSidebar, openSidebar, hasSubMenu } = useSharedStore()
const { data } = useGetProfile()
useEffect(() => {
setPopoverKey((prevKey) => prevKey + 1);
}, [location.pathname]);
const handleLogout = () => {
removeToken()
removeRefreshToken()
window.location.href = import.meta.env.VITE_LOGIN_URL
}
const hasSubMenuOpen = hasSubMenu && (openSidebar || window.innerWidth > 1139)
return (
<div className='fixed z-10 right-2 left-2 md:right-4 md:left-4 xl:right-[285px] top-2 md:top-4 xl:h-16 h-12 flex items-center px-3 md:px-6 bg-white justify-between rounded-[20px] md:rounded-[32px] xl:w-[calc(100%-305px)]'>
<div className={clx(
'fixed z-10 right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px] xl:w-[calc(100%-305px)]',
hasSubMenuOpen && '!right-[320px] !w-[calc(100%-340px)]'
)}>
<div className='min-w-[200px] md:min-w-[270px] hidden xl:block'>
<Input
<div className='min-w-[270px] hidden xl:block'>
{/* <Input
variant='search'
placeholder={t('header.search')}
className='bg-secondary border-none'
/>
/> */}
</div>
<div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>
<HambergerMenu size={24} color='black' />
</div>
{/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
<div className='flex xl:gap-6 gap-3 md:gap-4 items-center'>
<Link to={Paths.home}>
<Element3 color='black' className='size-4 md:size-[17px] xl:size-[18px]' />
</Link>
<Link className='xl:hidden' to={Paths.home}>
<Wallet className='size-4 md:size-[17px] xl:size-[18px]' color='black' />
</Link>
<Link className='hidden xl:block' to={Paths.home}>
<div className='flex items-center h-8 pl-2 rounded-full bg-[#EEF0F7]'>
<div className='px-3 text-xs'>
{/* {NumberFormat(getWalletBalance.data?.data?.balance) + ' ' + t('toman')} */}
</div>
<div className='size-[26px] flex justify-center items-center bg-white rounded-xl'>
<Wallet className='xl:size-[18px] size-[17px]' color='black' />
</div>
</div>
</Link>
{/* <Notifications /> */}
{/* {
<div className='flex xl:gap-6 gap-4 items-center'>
<a target='_blank' href={`https://console.danakcorp.com/services`}>
<Element4 size={19} color='black' />
</a>
{/* <Link className='xl:hidden' to={Pages.wallet}>
<Wallet className='xl:size-[18px] size-[17px]' color='black' />
</Link> */}
<Notifications />
{
data && (
<Popover className="relative" key={popoverKey}>
<PopoverButton >
@@ -71,7 +76,7 @@ const Header: FC = () => {
<div className='absolute xl:hidden top-6 left-6'>
<CloseCircle onClick={() => setPopoverKey((prevKey) => prevKey + 1)} size={20} color='black' />
</div>
<Link to={Pages.profile} className='flex flex-col gap-2 items-center justify-center border-b border-[#EAEDF5] pb-4'>
<Link to={'#'} className='flex flex-col gap-2 items-center justify-center border-b border-[#EAEDF5] pb-4'>
<div className='size-14 rounded-full overflow-hidden'>
<img src={data?.data?.user?.profilePic ? data?.data?.user?.profilePic : AvatarImage} className='size-full object-cover' />
</div>
@@ -85,79 +90,19 @@ const Header: FC = () => {
</div>
</Link>
<div className='pb-6 px-6 border-b border-[#EAEDF5]'>
<div className='flex justify-between items-center'>
<SideBarItem
icon={<Wallet size={20} color='black' />}
title={t('header.wallet')}
link={Pages.wallet}
isActive
isWithoutLine
/>
<div className='flex xl:hidden items-center mt-4 h-8 pl-2 rounded-full bg-[#EEF0F7]'>
<div className='ps-3'>{t('home.balance')}</div>
<div className='px-3 text-xs'>
{NumberFormat(getWalletBalance.data?.data?.balance) + ' ' + t('toman')}
</div>
<div className='px-6 mt-2'>
<div onClick={() => handleLogout()} className='flex gap-2 items-center cursor-pointer'>
<Logout size={20} color='black' />
<div>
{t('sidebar.logout')}
</div>
</div>
<SideBarItem
icon={<Card color={'black'} size={20} />}
title={t('sidebar.transactions')}
isActive
link={Pages.transactions}
isWithoutLine
/>
<SideBarItem
icon={<TicketDiscount color={'black'} size={20} />}
title={t('header.discounts')}
isActive
link={Pages.discounts}
isWithoutLine
/>
<SideBarItem
icon={<Receipt1 color={'black'} size={20} />}
title={t('header.financial_info')}
isActive
link={Pages.financial}
isWithoutLine
/>
<SideBarItem
icon={<ProfileCircle color={'black'} size={20} />}
title={t('header.profile')}
isActive
link={Pages.profile}
isWithoutLine
/>
<SideBarItem
icon={<Setting2 color={'black'} size={20} />}
title={t('header.setting')}
isActive
link={Pages.setting}
isWithoutLine
/>
</div>
<div className='px-6 -mt-[2px]'>
<SideBarItem
icon={<Logout color={'black'} size={20} />}
title={t('sidebar.logout')}
isActive
link={Pages.setting}
isWithoutLine
isLogout
/>
</div>
</PopoverPanel>
</Popover>
)
} */}
}
</div>
</div>
)
src/shared/store/sharedStore.ts
+2
View File
@@ -8,4 +8,6 @@ export const useSharedStore = create<SharedStoreType>((set) => ({
setOpenNewMessage: (value) => set({ openNewMessage: value }),
openBuySpace: false,
setOpenBuySpace: (value) => set({ openBuySpace: value }),
hasSubMenu: false,
setSubtMenu: (value: boolean) => set({ hasSubMenu: value }),
}));
src/shared/types/SharedTypes.ts
+2
View File
@@ -5,4 +5,6 @@ export type SharedStoreType = {
setOpenNewMessage: (value: boolean) => void;
openBuySpace: boolean;
setOpenBuySpace: (value: boolean) => void;
hasSubMenu: boolean;
setSubtMenu: (value: boolean) => void;
};