fix(discount): correct edit-form data + calendar clipping + input styling
- List endpoint returned camelCase keys (getArrayResult) so the edit modal read empty discount_type/target_*; return toArray() (snake_case) instead. - Portal the Persian date-picker calendar to body (fixed) so it no longer renders under the modal's overflow-scroll body. - Style the PriceInput/number fields with cp-input in the rule modal. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -239,8 +239,8 @@ function RuleModal({ initial, onClose, onSaved }: { initial: DiscountRule | null
|
||||
<div>
|
||||
<label style={labelStyle()}>{f.discount_type === 'percent' ? 'درصد تخفیف (۰ تا ۱۰۰)' : 'مبلغ تخفیف (تومان)'}</label>
|
||||
{f.discount_type === 'percent'
|
||||
? <input className="cp-input" type="number" inputMode="numeric" min={0} max={100} value={f.value} onChange={(e) => set('value', Number(e.target.value) || 0)} />
|
||||
: <PriceInput value={f.value} onChange={(v) => set('value', v)} />}
|
||||
? <input className="cp-input" style={{ width: '100%' }} type="number" inputMode="numeric" min={0} max={100} value={f.value} onChange={(e) => set('value', Number(e.target.value) || 0)} />
|
||||
: <PriceInput className="cp-input" style={{ width: '100%' }} value={f.value} onChange={(v) => set('value', v)} />}
|
||||
</div>
|
||||
<div>
|
||||
<label style={labelStyle()}>اولویت (بزرگتر = مهمتر)</label>
|
||||
@@ -262,7 +262,7 @@ function RuleModal({ initial, onClose, onSaved }: { initial: DiscountRule | null
|
||||
{f.type === 'invoice_amount' && (
|
||||
<div>
|
||||
<label style={labelStyle()}>حداقل مبلغ فاکتور (تومان)</label>
|
||||
<PriceInput value={f.min_amount_toman} onChange={(v) => set('min_amount_toman', v)} />
|
||||
<PriceInput className="cp-input" style={{ width: '100%' }} value={f.min_amount_toman} onChange={(v) => set('min_amount_toman', v)} />
|
||||
</div>
|
||||
)}
|
||||
{f.type === 'specific_patient' && (
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useState } from 'react';
|
||||
import { useRef, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { CalendarDaysIcon, XMarkIcon } from '@heroicons/react/24/outline';
|
||||
import { formatDate } from '../../lib/utils';
|
||||
import PersianCalendar from './PersianCalendar';
|
||||
@@ -15,11 +16,20 @@ interface Props {
|
||||
|
||||
export default function PersianDatePicker({ value, onChange, placeholder = 'انتخاب تاریخ', height = 38, minWidth = 148, enableYearPicker = false }: Props) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const triggerRef = useRef<HTMLDivElement>(null);
|
||||
const [pos, setPos] = useState<{ top: number; right: number } | null>(null);
|
||||
|
||||
// تقویم را به body پورت میکنیم تا داخل مودالهای overflow-scroll زیر کادر نرود.
|
||||
const toggle = () => {
|
||||
const r = triggerRef.current?.getBoundingClientRect();
|
||||
if (r) setPos({ top: r.bottom, right: window.innerWidth - r.right });
|
||||
setOpen((o) => !o);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ position: 'relative', display: 'inline-block' }}>
|
||||
<div ref={triggerRef} style={{ position: 'relative', display: 'inline-block' }}>
|
||||
<div
|
||||
onClick={() => setOpen((o) => !o)}
|
||||
onClick={toggle}
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', gap: 7,
|
||||
height, padding: '0 10px', borderRadius: 'var(--r-sm)',
|
||||
@@ -40,13 +50,16 @@ export default function PersianDatePicker({ value, onChange, placeholder = 'ان
|
||||
)}
|
||||
</div>
|
||||
|
||||
{open && (
|
||||
<PersianCalendar
|
||||
value={value}
|
||||
onChange={(v) => { onChange(v); setOpen(false); }}
|
||||
onClose={() => setOpen(false)}
|
||||
enableYearPicker={enableYearPicker}
|
||||
/>
|
||||
{open && pos && createPortal(
|
||||
<div style={{ position: 'fixed', top: pos.top, right: pos.right, zIndex: 3000 }}>
|
||||
<PersianCalendar
|
||||
value={value}
|
||||
onChange={(v) => { onChange(v); setOpen(false); }}
|
||||
onClose={() => setOpen(false)}
|
||||
enableYearPicker={enableYearPicker}
|
||||
/>
|
||||
</div>,
|
||||
document.body,
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user