whqreza
43ff048899
Wizard: - failed saves now route to the exact step+field: a new data-field attribute on every required section (supplier_id, line_items, termsheets, project, quote_date, expiry_date, notes, proforma) plus resolveErrorTarget() that maps ApiError.field / message keywords (supplier, line item/material/unit/quantity, termsheet/schedule/milestone, project, dates, notes, file) to the offending step — the «رفع خطا» toast action scrolls/focuses the right control instead of guessing - material records are no longer created on the fly while typing (rememberMaterial no longer fires addMaterial per blur); materials/specs/units are written once during the final save, avoiding half-created catalog rows Accept flow: - quote_service no longer rewrites LineItemProjects on accept — those candidate-project rows stay 100% untouched and only item_decisions.project_id is written, matching the per-item target-project model and the UI payload (item_projects: []) Dates/time: - JalaliDatePicker: hour/minute are now editable text fields (Persian digits, clamping, 3-digit retype handling) with a controlled useEffect that only rewrites the inputs when the numeric value actually changes — no more wiping in-progress typing; date-only detection tightened to a full YYYY-MM-DD match so datetime strings are not misread Also: /api validation logging (RequestValidationError) now includes the path and error list for faster diagnosis. Verified: api + frontend image builds (python, tsc, vite) clean on top of origin/production (incl. the team's mobile layout merges).
343 lines
14 KiB
TypeScript
343 lines
14 KiB
TypeScript
import { useEffect, useMemo, useState } from "react";
|
|
import type { Material } from "../../lib/types";
|
|
import { normalize } from "../../lib/normalize";
|
|
import { useMaterials } from "../../hooks";
|
|
import { specsKey } from "../../lib/quoteUtils";
|
|
import { Combobox } from "../../components/Combobox";
|
|
import { NumberInput } from "../../components/NumberInput";
|
|
import { MultiSelectCombobox } from "../../components/MultiSelectCombobox";
|
|
import { api, apiV26 } from "../../lib/api";
|
|
|
|
export interface ItemDraft {
|
|
tempId: string;
|
|
cat: string;
|
|
brand: string;
|
|
specs: string[];
|
|
qty: number | null;
|
|
unit: string;
|
|
price: number | null;
|
|
total: number | null;
|
|
}
|
|
|
|
export interface MaterialRec {
|
|
topic: string;
|
|
category: string;
|
|
brand: string;
|
|
specs: string[];
|
|
}
|
|
|
|
export interface Step2Props {
|
|
items: ItemDraft[];
|
|
onItemsChange: (items: ItemDraft[]) => void;
|
|
selectedTopic: string;
|
|
onRemember: (rec: MaterialRec) => void;
|
|
}
|
|
|
|
// برچسب انسانی یک قلم (برای termsheet، درگ‌اندروپ و بازبینی)
|
|
export function itemRowLabel(it: ItemDraft): string {
|
|
const parts = [it.cat, it.brand, it.specs.join(" - ")].filter(Boolean);
|
|
const name = parts.length ? parts.join(" - ") : "(قلم بدون‌نام)";
|
|
const qtyPart = it.qty != null && it.unit ? `${it.qty} ${it.unit}` : it.qty != null ? String(it.qty) : "";
|
|
return qtyPart ? `${name} -- ${qtyPart}` : name;
|
|
}
|
|
|
|
// نام پایه‌ی متریال از نامِ ذخیره‌شده.
|
|
// متریال‌های جدید فقط نامِ خودِ متریال را در name دارند (برند در brand_ids و
|
|
// مشخصه‌ها در attributes ذخیره می‌شوند) و دست‌نخورده برمی‌گردند. رکوردهای قدیمی
|
|
// name را به شکل «برند + دسته + مشخصه» ذخیره کرده‌اند؛ آن قطعات جدا می‌شوند تا
|
|
// نامِ پایه باقی بماند.
|
|
function materialBaseName(name: string, brand: string, specs: string[], category = ""): string {
|
|
const fallback = (name || "").trim();
|
|
if (!fallback) return "";
|
|
let base = fallback;
|
|
// بلندترین قطعه اول حذف می‌شود تا حذف‌های جزئی، رشته را ناقص نکنند
|
|
const parts = [brand, category, ...specs]
|
|
.map((p) => (p || "").trim())
|
|
.filter(Boolean)
|
|
.sort((a, b) => b.length - a.length);
|
|
for (const p of parts) {
|
|
if (!base.includes(p)) continue;
|
|
const next = base.split(p).join(" ").replace(/\s+/g, " ").trim();
|
|
// اگر حذفِ این قطعه کلِ نام را خالی کند، یعنی همان نامِ متریال بوده — نگهش دار
|
|
if (!next) continue;
|
|
base = next;
|
|
}
|
|
// شکلِ قدیمیِ خراب می‌تواند فقط یک مشخصه باقی بگذارد؛ آن دیگر نامِ متریال نیست
|
|
if (parts.some((p) => p === base)) return fallback;
|
|
return base || fallback;
|
|
}
|
|
|
|
// مقادیر مجزای category/brand/spec داخل تاپیک
|
|
export function materialOptions(
|
|
materials: Material[],
|
|
topic: string,
|
|
item: ItemDraft,
|
|
field: "cat" | "brand" | "spec",
|
|
allItems: ItemDraft[] = [],
|
|
apiBrands: string[] = [],
|
|
apiSpecs: string[] = [],
|
|
): string[] {
|
|
let list = materials.filter((m) => topic && normalize(m.topic) === normalize(topic));
|
|
const cat = item.cat.trim();
|
|
|
|
const fromRows = (sel: (it: ItemDraft) => string | string[]): string[] => {
|
|
const out = new Set<string>();
|
|
allItems.forEach((it) => {
|
|
if (it.tempId === item.tempId) return;
|
|
const v = sel(it);
|
|
if (Array.isArray(v)) v.forEach((x) => x && out.add(x));
|
|
else if (v) out.add(v);
|
|
});
|
|
return [...out];
|
|
};
|
|
|
|
if (field === "cat") {
|
|
const base = new Set(list.map((m) => m.category).filter(Boolean));
|
|
fromRows((it) => it.cat).forEach((c) => base.add(c));
|
|
return [...base].sort((a, b) => a.localeCompare(b, "fa"));
|
|
}
|
|
if (field === "brand") {
|
|
// برند سراسری است — مستقل از تاپیک و دسته
|
|
const allBrands = new Set(materials.map((m) => m.brand).filter(Boolean));
|
|
apiBrands.forEach((b) => b && allBrands.add(b));
|
|
fromRows((it) => it.brand).forEach((b) => allBrands.add(b));
|
|
return [...allBrands].sort((a, b) => a.localeCompare(b, "fa"));
|
|
}
|
|
if (cat) list = list.filter((m) => normalize(m.category) === normalize(cat));
|
|
// مشخصه‌ها سراسری هستند: رجیستری attribute-definitions + مشخصه‌های همه‌ی
|
|
// متریال‌ها + مشخصه‌های تایپ‌شده در سایر ردیف‌ها. به تاپیک/دسته/برندِ قلمِ
|
|
// فعلی گره نمی‌خورند تا هنگام افزودن پیشنهاد جدید همیشه در دسترس باشند.
|
|
const base = new Set<string>();
|
|
apiSpecs.forEach((s) => s && base.add(s));
|
|
materials.forEach((m) => (m.specs || []).forEach((s) => s && base.add(s)));
|
|
list.forEach((m) => (m.specs || []).forEach((s) => s && base.add(s)));
|
|
fromRows((it) => it.specs).forEach((s) => base.add(s));
|
|
return [...base].sort((a, b) => a.localeCompare(b, "fa"));
|
|
}
|
|
|
|
// مرحله ۲ — جدول پویای اقلام سفارش
|
|
export function Step2LineItems({ items, onItemsChange, selectedTopic, onRemember }: Step2Props) {
|
|
const materials = useMaterials();
|
|
|
|
const [unitOptions, setUnitOptions] = useState<string[]>(() => {
|
|
const all = new Set<string>();
|
|
items.forEach((it) => { if (it.unit) all.add(it.unit); });
|
|
return [...all];
|
|
});
|
|
|
|
const allUnits = useMemo(() => {
|
|
const out = new Set(unitOptions);
|
|
items.forEach((it) => { if (it.unit) out.add(it.unit); });
|
|
return [...out];
|
|
}, [items, unitOptions]);
|
|
|
|
const allMaterialNames = useMemo(() => {
|
|
const set = new Set<string>();
|
|
materials.forEach((m) => {
|
|
const base = materialBaseName(m.name, m.brand, m.specs, m.category);
|
|
if (base) set.add(base);
|
|
});
|
|
return [...set].sort((a, b) => a.localeCompare(b, "fa"));
|
|
}, [materials]);
|
|
|
|
const [brandOptions, setBrandOptions] = useState<string[]>([]);
|
|
const [specOptions, setSpecOptions] = useState<string[]>([]);
|
|
|
|
useEffect(() => {
|
|
let alive = true;
|
|
void api
|
|
.unitsList()
|
|
.then((list) => alive && setUnitOptions((prev) => {
|
|
const merged = new Set(prev);
|
|
list.forEach((u) => { if (u.name_fa || u.code) merged.add(u.name_fa || u.code); });
|
|
return [...merged];
|
|
}))
|
|
.catch(() => {});
|
|
void api
|
|
.brandsList()
|
|
.then((list) => alive && setBrandOptions(list.map((b) => b.name).filter(Boolean)))
|
|
.catch(() => {});
|
|
void api
|
|
.specsList()
|
|
.then((list) => alive && setSpecOptions(list))
|
|
.catch(() => {});
|
|
return () => { alive = false; };
|
|
}, []);
|
|
|
|
const patch = (tempId: string, p: Partial<ItemDraft>) => {
|
|
onItemsChange(items.map((it) => (it.tempId === tempId ? { ...it, ...p } : it)));
|
|
};
|
|
|
|
const remove = (tempId: string) => {
|
|
onItemsChange(items.filter((it) => it.tempId !== tempId));
|
|
};
|
|
|
|
const add = () => {
|
|
onItemsChange([
|
|
...items,
|
|
{ tempId: "it" + Date.now() + Math.random().toString(36).slice(2, 6), cat: "", brand: "", specs: [], qty: null, unit: "", price: null, total: null },
|
|
]);
|
|
};
|
|
|
|
const rememberField = (field: "i-cat" | "i-brand" | "i-spec", it: ItemDraft) => {
|
|
if (!selectedTopic) return;
|
|
let rec: MaterialRec;
|
|
if (field === "i-cat") {
|
|
if (!it.cat.trim()) return;
|
|
rec = { topic: selectedTopic, category: it.cat.trim(), brand: "", specs: [] };
|
|
} else if (field === "i-brand") {
|
|
if (!it.brand.trim()) return;
|
|
rec = { topic: selectedTopic, category: it.cat.trim(), brand: it.brand.trim(), specs: [] };
|
|
} else {
|
|
if (!it.specs.length) return;
|
|
rec = { topic: selectedTopic, category: it.cat.trim(), brand: it.brand.trim(), specs: it.specs };
|
|
}
|
|
const dup = materials.some(
|
|
(m) =>
|
|
normalize(m.topic) === normalize(rec.topic) &&
|
|
normalize(m.category) === normalize(rec.category) &&
|
|
normalize(m.brand) === normalize(rec.brand) &&
|
|
specsKey(m.specs) === specsKey(rec.specs),
|
|
);
|
|
if (dup) return;
|
|
onRemember(rec);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<h3 className="mb-1 text-[15px] font-bold">
|
|
<span className="me-1 inline-flex h-6 w-6 items-center justify-center rounded-full bg-blue-600 text-[12px] font-bold text-white">۲</span>
|
|
اقلام سفارش
|
|
</h3>
|
|
<div className="mb-3 text-[12px] text-gray-500" dangerouslySetInnerHTML={{ __html: 'هر سطر یک <b>قلم</b> است (متریال + برند + مشخصه + واحد + تعداد + قیمت). متریال، برند و مشخصه را می‌توان از گزینه‌ها انتخاب کرد یا تایپ کرد تا به‌عنوان گزینه‌ی جدید اضافه شود. شرایط پرداخت هر قلم را در مرحله‌ی بعد مشخص می‌کنید.' }} />
|
|
|
|
<div className="item-row wizard-item-row item-row-head mb-1 pe-7">
|
|
<span>متریال</span>
|
|
<span>برند</span>
|
|
<span>مشخصه</span>
|
|
<span>تعداد</span>
|
|
<span>واحد</span>
|
|
<span>قیمت واحد</span>
|
|
<span>قیمت کل</span>
|
|
</div>
|
|
|
|
<div data-field="line_items" className="flex flex-col gap-2">
|
|
{items.map((it) => (
|
|
<div key={it.tempId} className="item-row wizard-item-row items-center">
|
|
<Combobox
|
|
value={it.cat}
|
|
onChange={(x) => patch(it.tempId, { cat: x.label })}
|
|
items={allMaterialNames}
|
|
allowAdd
|
|
addSuffix="به عنوان متریال جدید"
|
|
placeholder="متریال"
|
|
onInputChange={(v) => patch(it.tempId, { cat: v })}
|
|
onBlur={() => rememberField("i-cat", it)}
|
|
inputClassName="!text-[12px] !h-9"
|
|
className="min-w-0"
|
|
/>
|
|
<Combobox
|
|
value={it.brand}
|
|
onChange={(x) => patch(it.tempId, { brand: x.label })}
|
|
items={materialOptions(materials, selectedTopic, it, "brand", items, brandOptions)}
|
|
allowAdd
|
|
addSuffix="به عنوان برند جدید"
|
|
placeholder="برند"
|
|
onInputChange={(v) => patch(it.tempId, { brand: v })}
|
|
onBlur={() => rememberField("i-brand", it)}
|
|
inputClassName="!text-[12px] !h-9"
|
|
className="min-w-0"
|
|
/>
|
|
<MultiSelectCombobox
|
|
values={it.specs}
|
|
onChange={(specs) => patch(it.tempId, { specs })}
|
|
options={materialOptions(materials, selectedTopic, it, "spec", items, [], specOptions)}
|
|
placeholder="مشخصه"
|
|
className="min-w-0"
|
|
/>
|
|
<NumberInput
|
|
value={it.qty}
|
|
onChange={(qty) => {
|
|
patch(it.tempId, {
|
|
qty,
|
|
total: qty != null && it.price != null ? Math.round(qty * it.price * 100) / 100 : it.total,
|
|
});
|
|
}}
|
|
placeholder="تعداد"
|
|
showWords
|
|
/>
|
|
<Combobox
|
|
value={it.unit}
|
|
onChange={(x) => patch(it.tempId, { unit: x.label })}
|
|
items={allUnits.filter((u) => normalize(u) !== normalize(it.unit))}
|
|
allowAdd
|
|
addSuffix="به عنوان واحد جدید"
|
|
placeholder="واحد"
|
|
onInputChange={(v) => patch(it.tempId, { unit: v })}
|
|
onAdd={(v) => {
|
|
const name = v.trim();
|
|
if (!name) return;
|
|
void apiV26.catalog
|
|
.createUnit(name)
|
|
.then(() => {
|
|
setUnitOptions((prev) =>
|
|
prev.some((u) => normalize(u) === normalize(name)) ? prev : [...prev, name],
|
|
);
|
|
})
|
|
.catch(() => {});
|
|
}}
|
|
inputClassName="!text-[12px] !h-9"
|
|
className="min-w-0"
|
|
/>
|
|
<NumberInput
|
|
value={it.price}
|
|
onChange={(price) => {
|
|
patch(it.tempId, {
|
|
price,
|
|
total: it.qty != null && price != null ? Math.round(it.qty * price * 100) / 100 : it.total,
|
|
});
|
|
}}
|
|
placeholder="قیمت واحد"
|
|
showWords
|
|
maxDecimals={2}
|
|
/>
|
|
<NumberInput
|
|
value={it.total}
|
|
onChange={(total) => {
|
|
patch(it.tempId, {
|
|
total,
|
|
price:
|
|
total != null && it.qty != null && it.qty > 0 ? Math.round((total / it.qty) * 100) / 100 : it.price,
|
|
});
|
|
}}
|
|
placeholder="قیمت کل"
|
|
showWords
|
|
/>
|
|
|
|
{/* دکمه حذف مدرن با آیکون سطل زباله */}
|
|
<button
|
|
type="button"
|
|
className="flex h-8 w-8 items-center justify-center rounded-lg text-gray-400 hover:bg-red-50 hover:text-red-500 transition-colors"
|
|
title="حذف قلم"
|
|
onClick={() => remove(it.tempId)}
|
|
>
|
|
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* دکمه افزودن قلم با استایل برجسته و خط‌چین */}
|
|
<button
|
|
type="button"
|
|
className="mt-3 flex w-full items-center justify-center gap-2 rounded-xl border-2 border-dashed border-blue-300 bg-blue-50/40 py-2.5 px-4 text-[13px] font-semibold text-blue-600 hover:border-blue-500 hover:bg-blue-100/70 transition-all duration-150"
|
|
onClick={add}
|
|
>
|
|
<span className="text-base font-bold leading-none">+</span>
|
|
<span>افزودن قلم جدید</span>
|
|
</button>
|
|
</div>
|
|
);
|
|
} |