/* ctor-checklists.jsx — Tab «Чек-листы» (sidebar + builder + executor preview dialog) */
const { useState: clUseState, useEffect: clUseEffect, useRef: clUseRef } = React;
const clCreatePortal = ReactDOM.createPortal;
// Сид и загрузка чек-листов — в constructor-data.js (CD.CHECKLISTS_SEED / loadChecklists / saveChecklists):
// их читают и store при handoff, и карточка исполнителя.
const CL_SEED = window.ConstructorData.CHECKLISTS_SEED;
const loadChecklists = () => window.ConstructorData.loadChecklists();
const saveChecklists = (cls) => window.ConstructorData.saveChecklists(cls);
const TYPE_META = {
check: { label:'Чекбокс', icon:'☑', color:'#e8793a' },
photo: { label:'Фото', icon:'📷', color:'#ec4899' },
check_photo: { label:'Чекбокс + Фото', icon:'☑📷', color:'#f97316' },
number: { label:'Число', icon:'#', color:'#8b5cf6' },
text: { label:'Текст', icon:'T', color:'#5aad6e' },
};
const ClIconEye = (
);
function TypePicker({ value, onChange }) {
return (
{Object.entries(TYPE_META).map(([k, m]) => (
))}
);
}
function PhotoSettings({ item, onChange }) {
if (!['photo','check_photo'].includes(item.type)) return null;
return (
Фото
);
}
function ExecutorPreviewItem({ item, variant }) {
const isStep = variant === 'step';
const isPhoto = item.type === 'photo' || item.type === 'check_photo';
const hasCheck = item.type === 'check' || item.type === 'check_photo';
const minP = item.minPhotos || 1;
const maxP = item.maxPhotos || 3;
return (
{hasCheck &&
}
{item.label || 'Без названия'}
{item.hint &&
{item.hint}
}
{item.required &&
обяз.}
{isPhoto && (
<>
{Array.from({ length: minP }).map((_, i) => (
Фото
))}
{minP < maxP && (
+
)}
{item.photoHint &&
{item.photoHint}
}
)}
{item.type === 'number' && (
)}
{item.type === 'text' && (
)}
);
}
function ChecklistExecutorStepFlow({ items, title, desc }) {
const [idx, setIdx] = clUseState(0);
const total = items.length;
const current = items[idx];
const next = items[idx + 1];
const req = items.filter((i) => i.required).length;
clUseEffect(() => {
setIdx(0);
}, [items.length, title]);
if (!total) {
return Добавьте пункты в шаблон, чтобы увидеть превью
;
}
const pct = Math.round(((idx + 1) / total) * 100);
return (
{title || 'Чек-лист'}
{desc &&
{desc}
}
{idx + 1} / {total}
{next && (
Следующий пункт
{next.label || 'Без названия'}
{next.hint && {next.hint}}
)}
{req}/{total} обяз.
);
}
function ChecklistExecutorPreviewDialog({ cl, open, onClose }) {
const dlgRef = clUseRef(null);
const [viewMode, setViewMode] = clUseState('list');
const titleId = 'cl-executor-preview-' + (cl?.id || 'draft');
clUseEffect(() => {
const dlg = dlgRef.current;
if (!dlg) return;
if (open) { if (!dlg.open) dlg.showModal(); }
else if (dlg.open) dlg.close();
}, [open]);
clUseEffect(() => {
if (open) setViewMode('list');
}, [open, cl?.id]);
if (!cl || typeof document === 'undefined') return null;
const req = cl.items.filter(i => i.required).length;
const items = cl.items || [];
return clCreatePortal(
,
document.body
);
}
function ChecklistEditor({ cl, onChange }) {
const [previewOpen, setPreviewOpen] = clUseState(false);
const uid = () => 'i-' + Math.random().toString(36).slice(2,7);
const setItems = fn => onChange({...cl, items: fn(cl.items)});
const addItem = () => setItems(items => [...items, { id:uid(), type:'check', label:'', hint:'', required:false }]);
const delItem = id => setItems(items => items.filter(i => i.id !== id));
const patchItem = (id, patch) => setItems(items => items.map(i => i.id === id ? {...i,...patch} : i));
const move = (id, dir) => setItems(items => {
const idx = items.findIndex(i => i.id === id);
if (idx < 0) return items;
const next = [...items];
const swap = idx+dir;
if (swap < 0 || swap >= next.length) return items;
[next[idx], next[swap]] = [next[swap], next[idx]];
return next;
});
const reqCount = cl.items.filter(i => i.required).length;
return (
<>
{cl.items.map((item, idx) => (
patchItem(item.id, {type:t})} />
patchItem(item.id,{label:e.target.value})} placeholder="Текст пункта" style={insStyles.field} />
patchItem(item.id,{hint:e.target.value})} placeholder="Подсказка" style={insStyles.field} />
patchItem(item.id, patched)} />
))}
setPreviewOpen(false)} />
);
}
function ChecklistsPanel({ checklists, setChecklists }) {
const [activeId, setActiveId] = clUseState(checklists[0]?.id || null);
const uid = () => 'cl-' + Math.random().toString(36).slice(2,7);
const active = checklists.find(c => c.id === activeId) || null;
const update = (updated) => {
const next = checklists.map(c => c.id === updated.id ? updated : c);
setChecklists(next); saveChecklists(next);
};
const add = () => {
const nc = { id:uid(), name:'Новый шаблон', desc:'', items:[] };
const next = [...checklists, nc];
setChecklists(next); saveChecklists(next);
setActiveId(nc.id);
};
const del = (id) => {
if (!confirm('Удалить шаблон?')) return;
const next = checklists.filter(c => c.id !== id);
setChecklists(next); saveChecklists(next);
if (activeId === id) setActiveId(next[0]?.id || null);
};
const dup = (id) => {
const src = checklists.find(c => c.id === id);
if (!src) return;
const copy = {
...src,
id: uid(),
name: (src.name || 'Шаблон') + ' (копия)',
items: src.items.map(i => ({ ...i, id: 'i-' + Math.random().toString(36).slice(2,7) })),
};
const next = [...checklists, copy];
setChecklists(next); saveChecklists(next);
setActiveId(copy.id);
};
const itemCount = (cl) => cl.items.length;
const reqCount = (cl) => cl.items.filter(i => i.required).length;
return (
Чек-листы
{checklists.map(cl => {
const isActive = cl.id === activeId;
return (
setActiveId(cl.id)}
className={'dp-sidebar-list-item' + (isActive ? ' is-active' : '')}
role="listitem"
>
{cl.name || 'Без названия'}
{itemCount(cl)} пункт. · {reqCount(cl)} обяз.
);
})}
{!checklists.length && (
)}
{active ?
: (
📋
Выберите шаблон
Соберите пункты и откройте вид исполнителя, чтобы проверить форму на объекте.
)}
);
}
Object.assign(window, { ChecklistsPanel, loadChecklists, CL_SEED });