feat(dashboard): stepwise Jalali birthday picker + correct send direction
- JalaliDatePicker gains an opt-in `stepwise` mode (year → month → day): the year step is a scrollable list from the current Jalali year down to 1332, used by the birthday field. Default-off so appointment/panel pickers keep the month-grid behavior. Parse incoming Jalali string values safely (fixes NaN keys). - Birthday create path now converts Jalali→Unix on send (changeDateType true), matching the update path and the Unix-based backend contract. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
hamed
@@ -0,0 +1,107 @@
|
||||
# انتخاب تاریخ تولد بهصورت مرحلهای: سال ← ماه ← روز
|
||||
|
||||
## پروژه
|
||||
|
||||
`nobat724_front` (سایت عمومی، داشبورد کاربر).
|
||||
|
||||
> کاملاً frontend است. هیچ تغییری در بکاند یا قرارداد API لازم نیست؛ خروجی همان رشتهی جلالی فعلی است.
|
||||
|
||||
## زمینه
|
||||
|
||||
در داشبورد (`/dashboard` → اطلاعات کاربری)، فیلد «تاریخ تولد» از `components/common/JalaliDatePicker` استفاده میکند که فقط یک نمای **ماهانه** دارد: هدر فقط «ماه سال» را نشان میدهد و با فلشها فقط ماهبهماه جلو/عقب میرود. برای انتخاب سال تولد (مثلاً ۱۳۷۰) کاربر باید دهها بار فلش بزند — تجربهی بدی برای تاریخ تولد است.
|
||||
|
||||
خواسته: تقویمِ تاریخ تولد باید مرحلهای باشد — **اول سال، بعد ماه، بعد روز**.
|
||||
|
||||
## مشکل / هدف
|
||||
|
||||
افزودن یک حالتِ انتخابِ مرحلهای (year → month → day) به `JalaliDatePicker` بهصورت **opt-in با prop**، و فعالکردن آن فقط برای فیلد تاریخ تولد. سایر استفادهها (انتخاب تاریخ نوبت و پنل) باید **دستنخورده** بمانند.
|
||||
|
||||
## فایلهای مرتبط
|
||||
|
||||
| فایل | نقش |
|
||||
|------|-----|
|
||||
| `components/common/JalaliDatePicker.js` | date picker جلالیِ مشترک — افزودن حالت مرحلهای |
|
||||
| `components/dashboard/userAccount/detailUser/information/form/DateBirthday.js` | فیلد تاریخ تولد — فعالکردن حالت جدید با prop |
|
||||
|
||||
> **هشدار سازگاری:** `JalaliDatePicker` در این فایلها هم استفاده میشود و نباید رفتارشان تغییر کند:
|
||||
> `app/component/DatePickerContent.js`, `app/component/date/datePicker/date/FirstDatePicker.js`, `.../SecondDatePicker.js`, `components/layoutPanel/userDetail/Date.js`. پس حالت جدید باید پیشفرض **خاموش** باشد.
|
||||
|
||||
## وضعیت فعلی (کد واقعی)
|
||||
|
||||
`JalaliDatePicker.js` — فقط نمای ماهانه. هدر و ناوبری:
|
||||
```jsx
|
||||
const handlePrevMonth = () => setDisplayDate(moment(displayDate).subtract(1, "jMonth"));
|
||||
const handleNextMonth = () => setDisplayDate(moment(displayDate).add(1, "jMonth"));
|
||||
// ...
|
||||
// هدر: فقط ماه و سال + دو فلش ماه
|
||||
<Box sx={{ fontWeight: 600, fontSize: "14px" }}>
|
||||
{MONTHS[displayDate.jMonth()]} {displayDate.jYear()}
|
||||
</Box>
|
||||
// ... سپس گرید روزها
|
||||
```
|
||||
`MONTHS` (۱۲ ماه جلالی) از قبل در همین فایل تعریف شده. `moment` = `moment-jalaali`؛ متدها: `jYear()`, `jMonth()`, `jDate()`, `moment.jDaysInMonth(y, m)`.
|
||||
|
||||
`DateBirthday.js`:
|
||||
```jsx
|
||||
<JalaliDatePicker
|
||||
value={data}
|
||||
placeholder="تاریخ تولد"
|
||||
error={error}
|
||||
onChange={(e) => changeData(convertToJalali(e._d), "birthday")}
|
||||
textFieldProps={{ /* CalendarEdit icon */ }}
|
||||
/>
|
||||
```
|
||||
|
||||
## وظایف
|
||||
|
||||
### ۱. افزودن حالت مرحلهای به `JalaliDatePicker`
|
||||
|
||||
- یک prop جدید بگیر: `stepwise = false` (پیشفرض خاموش تا سازگاری حفظ شود).
|
||||
- یک state داخلی `viewMode` با مقادیر `"year" | "month" | "day"`. وقتی Popover با `stepwise=true` باز میشود، `viewMode` روی `"year"` شروع شود؛ در غیر این صورت رفتار فعلی (مستقیم نمای روز) حفظ شود.
|
||||
- **نمای سال:** یک گرید از سالها (مثلاً ۱۲ سال در هر صفحه، با دو فلش برای صفحهی قبل/بعدِ بازهی سالها). بازهی منطقی برای تولد: از `currentJalaliYear - 100` تا `currentJalaliYear`. انتخاب سال → `displayDate` با آن سال بهروز شود و `viewMode = "month"`.
|
||||
- **نمای ماه:** گرید ۱۲ ماه از `MONTHS`. انتخاب ماه → `displayDate` با آن ماه، و `viewMode = "day"`.
|
||||
- **نمای روز:** همان گرید روزهای فعلی (بدون تغییر). انتخاب روز → `onChange` صدا زده شود و Popover بسته شود (مثل حالا).
|
||||
- در هدرِ حالت مرحلهای، عنوان قابلکلیک باشد تا کاربر بتواند به مرحلهی بالاتر برگردد: در نمای ماه، کلیک روی سال → برگشت به نمای سال؛ در نمای روز، کلیک روی «ماه سال» → برگشت به نمای ماه. (ناوبری رو به عقب)
|
||||
- وقتی Popover بسته شد، `viewMode` برای بار بعد دوباره `"year"` شود.
|
||||
|
||||
طرح کلی:
|
||||
```jsx
|
||||
function JalaliDatePicker({ /* ...props */, stepwise = false }) {
|
||||
const [viewMode, setViewMode] = useState(stepwise ? "year" : "day");
|
||||
// باز شدن popover (stepwise): setViewMode("year")
|
||||
// بسته شدن: setViewMode(stepwise ? "year" : "day")
|
||||
|
||||
// نمای سال
|
||||
const renderYears = () => { /* گرید سالها currentYear-100..currentYear */ };
|
||||
// نمای ماه
|
||||
const renderMonths = () => { /* گرید MONTHS، onClick → setDisplayDate(jMonth) + setViewMode("day") */ };
|
||||
// نمای روز = همان رندر فعلی
|
||||
|
||||
// در بدنهی Popover:
|
||||
// stepwise ? (viewMode==="year" ? renderYears() : viewMode==="month" ? renderMonths() : renderDays())
|
||||
// : renderDays()
|
||||
}
|
||||
```
|
||||
- منطق `value`/`selectedDate`/`onChange` و خروجی (همان `moment` object که `DateBirthday` با `e._d` و `convertToJalali` مصرف میکند) **بدون تغییر** بماند.
|
||||
|
||||
### ۲. فعالکردن در `DateBirthday.js`
|
||||
فقط prop اضافه کن:
|
||||
```jsx
|
||||
<JalaliDatePicker
|
||||
value={data}
|
||||
placeholder="تاریخ تولد"
|
||||
error={error}
|
||||
stepwise
|
||||
onChange={(e) => changeData(convertToJalali(e._d), "birthday")}
|
||||
textFieldProps={{ /* بدون تغییر */ }}
|
||||
/>
|
||||
```
|
||||
|
||||
## نکات مهم
|
||||
|
||||
- **سازگاری عقبرو:** `stepwise` پیشفرض `false`؛ هیچیک از ۴ مصرفکنندهی دیگر (تاریخ نوبت/پنل) نباید رفتارشان عوض شود. این را با grep تأیید کن و دست به آن فایلها نزن.
|
||||
- خروجی `onChange` دقیقاً همان شیء `moment` فعلی باشد تا `convertToJalali(e._d)` در `DateBirthday` و مصرف بکاند (`birthday`/`date_of_birth`) نشکند.
|
||||
- بازهی سالها برای تولد: `[امسالِ جلالی - 100, امسالِ جلالی]`، نزولی (سالهای جدیدتر بالا) یا صعودی — هرکدام UX بهتری دارد؛ پیشفرض نزولی منطقیتر است.
|
||||
- RTL، فونت Vazir، MUI v5 (`Box`/`Popover`/`IconButton` که از قبل import شدهاند)؛ کتابخانهی جدید اضافه نکن. از `MONTHS` و `moment-jalaali` موجود در همان فایل استفاده کن.
|
||||
- اعداد فارسی/لاتین: مطابق رفتار فعلی فایل (`usePersianDigits: false`) نگهدار تا یکدست بماند.
|
||||
- بعد از تغییر: `npm run build` بدون خطا؛ دستی تست کن — در داشبورد فیلد تاریخ تولد: کلیک → ابتدا گرید سالها، انتخاب سال → ماهها، انتخاب ماه → روزها، انتخاب روز → مقدار در فیلد ست شود؛ و یک فیلد تاریخِ نوبت را هم چک کن که هنوز مثل قبل (مستقیم نمای روز) کار میکند.
|
||||
@@ -0,0 +1,57 @@
|
||||
# رفع جهت تبدیل تاریخ تولد هنگام ایجاد پروفایل
|
||||
|
||||
## پروژه
|
||||
|
||||
`nobat724_front` (سایت عمومی، داشبورد).
|
||||
|
||||
> **Cross-repo:** وابسته به پرامپت بکاند `clinicpro/.claude/prompt/profile-birthday-jalali-persist.md` (که `birthday` را بهصورت Unix ذخیره/برمیگرداند). آن **اول** اجرا شود.
|
||||
|
||||
## زمینه
|
||||
|
||||
تاریخ تولد در فرم داشبورد بهصورت رشتهی جلالی از `JalaliDatePicker` میآید (`information.birthday = "jYYYY/jM/jD"`). تابع `changeDateType(data, toTimeStamp)` در `helper/index.js` بین جلالیرشته و Unix تبدیل میکند:
|
||||
- `toTimeStamp=true` → `moment(birthday, "jYYYY/jMM/jDD").unix()` (جلالی → Unix، برای **ارسال**)
|
||||
- `toTimeStamp=false` → `moment.unix(birthday).format("jYYYY/jMM/jDD")` (Unix → جلالی، برای **نمایش**)
|
||||
|
||||
بکاند `birthday` را بهصورت **Unix** میپذیرد و برمیگرداند. مسیر بهروزرسانی (`patchData`) درست `changeDateType(usedKays, true)` میزند. اما مسیر ایجاد (`postData`) بهاشتباه `changeDateType(information, false)` میزند — یعنی هنگام **ارسال**، جهت تبدیل برعکس است و `moment.unix(جلالی-رشته)` یک مقدار بیمعنا تولید میکند. در نتیجه هنگام ایجاد پروفایل، تاریخ تولد خراب ذخیره میشود.
|
||||
|
||||
## مشکل / هدف
|
||||
|
||||
در `postData` جهت `changeDateType` باید `true` باشد (مثل `patchData`)، تا `birthday` جلالی به Unix تبدیل و سپس ارسال شود.
|
||||
|
||||
## فایلهای مرتبط
|
||||
|
||||
| فایل | نقش |
|
||||
|------|-----|
|
||||
| `components/dashboard/userAccount/detailUser/information/ButtonSendData.js` | `postData` (ایجاد) — جهت اشتباه |
|
||||
| `helper/index.js` | `changeDateType` (مرجع — تغییر نمیکند) |
|
||||
|
||||
## وضعیت فعلی (کد واقعی)
|
||||
|
||||
```js
|
||||
const postData = () => {
|
||||
request
|
||||
.postUserProfile(changeDateType(information, false)) // ❌ باید true باشد (مثل patchData)
|
||||
// ...
|
||||
};
|
||||
|
||||
const patchData = () => {
|
||||
const usedKays = removeAdditionalKeysDashboard(information);
|
||||
request
|
||||
.patchUserProfile(changeDateType(usedKays, true), information?.uuid, ...) // ✅ درست
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
## وظایف
|
||||
|
||||
### ۱. اصلاح جهت در `postData`
|
||||
```js
|
||||
request.postUserProfile(changeDateType(information, true))
|
||||
```
|
||||
- فقط `false` → `true`. بقیهی منطق `postData` بدون تغییر.
|
||||
|
||||
## نکات مهم
|
||||
|
||||
- `changeDateType` و `patchData` تغییر نمیکنند؛ فقط یک آرگومان در `postData` اصلاح میشود.
|
||||
- نمایش (load) از قبل با `changeDateType(changedData, false)` در `information/index.js` درست است و `birthday` که حالا بکاند بهصورت Unix میدهد را به جلالی تبدیل میکند — تغییری لازم ندارد.
|
||||
- بعد از تغییر: `npm run build` بدون خطا؛ تست دستی — ایجاد پروفایل جدید با تاریخ تولد → ذخیره و سپس نمایش درستِ همان تاریخ؛ و بهروزرسانی هم همچنان درست کار کند.
|
||||
Reference in New Issue
Block a user