From 19d60a92251dd0dedefe2e80c3aac99e4a13fade Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Wed, 17 Jun 2026 16:40:08 +0330 Subject: [PATCH] update style default modal + added date in modal --- src/components/DefaulModal.tsx | 6 ++-- src/langs/fa.json | 1 + .../task-detail/TaskDetailMetadataPreview.tsx | 35 +++++++++++++++---- .../task-detail/TaskDetailToolbar.tsx | 14 ++++++-- .../task-detail/date/TaskDetailDateForm.tsx | 6 +--- .../components/task-detail/date/constants.ts | 8 +++++ .../components/task-detail/date/utils.ts | 16 +++++++++ 7 files changed, 70 insertions(+), 16 deletions(-) create mode 100644 src/pages/taskmanager/components/task-detail/date/constants.ts create mode 100644 src/pages/taskmanager/components/task-detail/date/utils.ts diff --git a/src/components/DefaulModal.tsx b/src/components/DefaulModal.tsx index 0344049..9fb8969 100644 --- a/src/components/DefaulModal.tsx +++ b/src/components/DefaulModal.tsx @@ -26,9 +26,9 @@ const DefaulModal: FC = (props: Props) => { { props.open && ( -
-
-
+
+
+
{ diff --git a/src/langs/fa.json b/src/langs/fa.json index 9c4c615..c6e956a 100644 --- a/src/langs/fa.json +++ b/src/langs/fa.json @@ -995,6 +995,7 @@ "user_management": "مدیریت کاربران", "checklist": "چک لیست", "attachment": "ضمیمه", + "date": "تاریخ", "date_settings": "تنظیمات تاریخ", "description": "توضیحات", "description_placeholder": "توضیحات خود را اضافه کنید", diff --git a/src/pages/taskmanager/components/task-detail/TaskDetailMetadataPreview.tsx b/src/pages/taskmanager/components/task-detail/TaskDetailMetadataPreview.tsx index 474b08e..fcaf69b 100644 --- a/src/pages/taskmanager/components/task-detail/TaskDetailMetadataPreview.tsx +++ b/src/pages/taskmanager/components/task-detail/TaskDetailMetadataPreview.tsx @@ -1,20 +1,25 @@ import { Add } from "iconsax-react"; import { type FC } from "react"; +import type DateObject from "react-date-object"; import { useTranslation } from "react-i18next"; import AvatarImage from "../../../../assets/images/avatar_image.png"; +import { formatDateRange } from "./date/utils"; import type { TaskLabel } from "./labels/types"; import type { TaskUser } from "./users/types"; type Props = { selectedLabels: TaskLabel[]; selectedUsers: TaskUser[]; + startDate: DateObject | null; + endDate: DateObject | null; }; -const TaskDetailMetadataPreview: FC = ({ selectedLabels, selectedUsers }) => { +const TaskDetailMetadataPreview: FC = ({ selectedLabels, selectedUsers, startDate, endDate }) => { const { t } = useTranslation("global"); + const dateLabel = formatDateRange(startDate, endDate); return ( -
+
{t("taskmanager.task_detail.labels")}
@@ -32,7 +37,10 @@ const TaskDetailMetadataPreview: FC = ({ selectedLabels, selectedUsers }) className="size-7 rounded-lg border border-[#D0D0D0] bg-white/60 flex items-center justify-center cursor-pointer" aria-label={t("taskmanager.task_detail.new_label")} > - +
@@ -41,8 +49,15 @@ const TaskDetailMetadataPreview: FC = ({ selectedLabels, selectedUsers })
{t("taskmanager.users")}
{selectedUsers.map((user) => ( -
- {user.name} +
+ {user.name}
))}
+ +
+
{t("taskmanager.task_detail.date")}
+ {dateLabel ? {dateLabel} : null} +
); }; diff --git a/src/pages/taskmanager/components/task-detail/TaskDetailToolbar.tsx b/src/pages/taskmanager/components/task-detail/TaskDetailToolbar.tsx index 1aa7b76..bb6e03b 100644 --- a/src/pages/taskmanager/components/task-detail/TaskDetailToolbar.tsx +++ b/src/pages/taskmanager/components/task-detail/TaskDetailToolbar.tsx @@ -1,5 +1,6 @@ import { type FC, useState } from "react"; import TaskDetailAttachmentPopover from "./attachment/TaskDetailAttachmentPopover"; +import { DEFAULT_DATE_RANGE } from "./date/constants"; import TaskDetailDatePopover from "./date/TaskDetailDatePopover"; import type DateObject from "react-date-object"; import { DEFAULT_CHECKLISTS } from "./checklist/constants"; @@ -25,6 +26,8 @@ const TaskDetailToolbar: FC = ({ activeTab, onTabChange }) => { const [selectedLabelIds, setSelectedLabelIds] = useState>(new Set(["1"])); const [selectedUserIds, setSelectedUserIds] = useState>(new Set(["1"])); const [checklists, setChecklists] = useState(DEFAULT_CHECKLISTS); + const [startDate, setStartDate] = useState(DEFAULT_DATE_RANGE.startDate); + const [endDate, setEndDate] = useState(DEFAULT_DATE_RANGE.endDate); const selectedLabels = labels.filter((label) => selectedLabelIds.has(label.id)); const selectedUsers = DEFAULT_USERS.filter((user) => selectedUserIds.has(user.id)); @@ -101,7 +104,9 @@ const TaskDetailToolbar: FC = ({ activeTab, onTabChange }) => { if (isDateOpen) onTabChange("date"); }; - const handleDateSubmit = (_data: { startDate: DateObject | null; endDate: DateObject | null }) => { + const handleDateSubmit = (data: { startDate: DateObject | null; endDate: DateObject | null }) => { + setStartDate(data.startDate); + setEndDate(data.endDate); handleDateClose(); }; @@ -148,7 +153,12 @@ const TaskDetailToolbar: FC = ({ activeTab, onTabChange }) => { } /> - +
); }; diff --git a/src/pages/taskmanager/components/task-detail/date/TaskDetailDateForm.tsx b/src/pages/taskmanager/components/task-detail/date/TaskDetailDateForm.tsx index bca4a54..6073c9c 100644 --- a/src/pages/taskmanager/components/task-detail/date/TaskDetailDateForm.tsx +++ b/src/pages/taskmanager/components/task-detail/date/TaskDetailDateForm.tsx @@ -7,17 +7,13 @@ import { Calendar } from "react-multi-date-picker"; import Button from "../../../../../components/Button"; import TaskDetailLabelCheckbox from "../labels/TaskDetailLabelCheckbox"; import type { TaskDateField } from "./types"; +import { formatDateLabel } from "./utils"; type Props = { onClose: () => void; onSubmit: (data: { startDate: DateObject | null; endDate: DateObject | null }) => void; }; -const formatDateLabel = (date: DateObject | null) => { - if (!date) return ""; - return date.convert(persian, persian_fa).format("D MMMM"); -}; - const TaskDetailDateForm: FC = ({ onClose, onSubmit }) => { const { t } = useTranslation("global"); const [startDate, setStartDate] = useState(null); diff --git a/src/pages/taskmanager/components/task-detail/date/constants.ts b/src/pages/taskmanager/components/task-detail/date/constants.ts new file mode 100644 index 0000000..c27e5fd --- /dev/null +++ b/src/pages/taskmanager/components/task-detail/date/constants.ts @@ -0,0 +1,8 @@ +import DateObject from "react-date-object"; +import persian from "react-date-object/calendars/persian"; +import persian_fa from "react-date-object/locales/persian_fa"; + +export const DEFAULT_DATE_RANGE = { + startDate: new DateObject({ calendar: persian, locale: persian_fa, year: 1404, month: 2, day: 1 }), + endDate: new DateObject({ calendar: persian, locale: persian_fa, year: 1404, month: 2, day: 20 }), +}; diff --git a/src/pages/taskmanager/components/task-detail/date/utils.ts b/src/pages/taskmanager/components/task-detail/date/utils.ts new file mode 100644 index 0000000..e2fe4a4 --- /dev/null +++ b/src/pages/taskmanager/components/task-detail/date/utils.ts @@ -0,0 +1,16 @@ +import DateObject from "react-date-object"; +import persian from "react-date-object/calendars/persian"; +import persian_fa from "react-date-object/locales/persian_fa"; + +export const formatDateLabel = (date: DateObject | null) => { + if (!date) return ""; + return date.convert(persian, persian_fa).format("D MMMM"); +}; + +export const formatDateRange = (startDate: DateObject | null, endDate: DateObject | null) => { + const start = formatDateLabel(startDate); + const end = formatDateLabel(endDate); + + if (start && end) return `${start} - ${end}`; + return start || end; +};