335 lines
12 KiB
JavaScript
335 lines
12 KiB
JavaScript
import { useEffect, useMemo, useState } from 'react';
|
|
import { useSearchParams } from 'react-router';
|
|
import { Controller } from 'react-hook-form';
|
|
import { Button, Dropdown, Form } from 'react-bootstrap';
|
|
import { closestCenter, DndContext, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
|
|
import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
|
import { CSS } from '@dnd-kit/utilities';
|
|
import { signedGet, isSuccess } from '@/api/client';
|
|
|
|
const DEFAULT_HIERARCHY_LEVELS = ['Country', 'Zone', 'Region', 'Area', 'Territory'];
|
|
const MANAGER_LEVELS = [
|
|
['l1', 'L1'],
|
|
['l2', 'L2'],
|
|
['l3', 'L3'],
|
|
];
|
|
const MANAGER_KEYS = [
|
|
['name', 'Name'],
|
|
['email', 'Email'],
|
|
['employee_code', 'Employee Code'],
|
|
['position_name', 'Position Name'],
|
|
];
|
|
|
|
function emptyDesigner() {
|
|
return { fields: [] };
|
|
}
|
|
|
|
function asDesigner(raw) {
|
|
let value = raw;
|
|
if (typeof raw === 'string' && raw.trim()) {
|
|
try {
|
|
value = JSON.parse(raw);
|
|
} catch {
|
|
value = null;
|
|
}
|
|
}
|
|
const fields = Array.isArray(value?.fields) ? value.fields : [];
|
|
return {
|
|
fields: fields
|
|
.filter((row) => row && row.id && row.source && row.key)
|
|
.map((row) => ({
|
|
id: String(row.id),
|
|
source: String(row.source),
|
|
key: String(row.key),
|
|
label: row.label || String(row.key),
|
|
level: row.level || undefined,
|
|
show_in_export: row.show_in_export !== false,
|
|
show_in_view: Boolean(row.show_in_view),
|
|
})),
|
|
};
|
|
}
|
|
|
|
export function normalizeDataDesigner(raw) {
|
|
return asDesigner(raw);
|
|
}
|
|
|
|
const SOURCE_LABELS = {
|
|
user: 'User attributes',
|
|
hierarchy: 'Hierarchy',
|
|
manager: 'Manager info',
|
|
question: 'Form questions',
|
|
manual: 'Manual',
|
|
};
|
|
|
|
function managerStoredId(level, key) {
|
|
const number = String(level || '').replace('l', '');
|
|
const suffix = key === 'employee_code' ? 'code' : key === 'position_name' ? 'position' : key;
|
|
return `manager${number}_${suffix}`;
|
|
}
|
|
|
|
function option(id, source, key, label, extra = {}) {
|
|
return { value: id, label, row: { id, source, key, label, show_in_export: true, show_in_view: false, ...extra } };
|
|
}
|
|
|
|
function CheckDropdown({ title, count, options, taken, onToggle, emptyText, disabled, disabledText }) {
|
|
return (
|
|
<Dropdown autoClose="outside">
|
|
<Dropdown.Toggle variant="outline-dark" disabled={disabled}>
|
|
{disabled ? disabledText : `${title} (${count})`}
|
|
</Dropdown.Toggle>
|
|
<Dropdown.Menu className="p-2 border shadow-sm" style={{ maxHeight: 280, overflowY: 'auto' }}>
|
|
{options.length ? options.map((item) => (
|
|
<Dropdown.Item key={item.value} as="div" className="px-1">
|
|
<Form.Check
|
|
type="checkbox"
|
|
label={item.label}
|
|
checked={taken.has(item.value)}
|
|
onChange={(event) => onToggle(item, event.target.checked)}
|
|
/>
|
|
</Dropdown.Item>
|
|
)) : <div className="text-muted small px-2">{emptyText}</div>}
|
|
</Dropdown.Menu>
|
|
</Dropdown>
|
|
);
|
|
}
|
|
|
|
function DesignerRow({ row, onPatch, onRemove }) {
|
|
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: row.id });
|
|
const style = {
|
|
transform: CSS.Transform.toString(transform),
|
|
transition,
|
|
opacity: isDragging ? 0.6 : 1,
|
|
};
|
|
return (
|
|
<div ref={setNodeRef} style={style} className="d-flex align-items-center gap-2 border rounded px-2 py-2 mb-2 bg-white">
|
|
<button type="button" className="btn btn-light btn-sm" aria-label="Reorder" {...attributes} {...listeners}>
|
|
::
|
|
</button>
|
|
<div className="flex-grow-1">
|
|
<div className="fw-semibold">{row.label}</div>
|
|
<div className="text-muted small">{SOURCE_LABELS[row.source] || row.source}</div>
|
|
</div>
|
|
<Form.Check
|
|
type="checkbox"
|
|
label="Form Data Export"
|
|
checked={row.show_in_export !== false}
|
|
onChange={(event) => onPatch(row.id, { show_in_export: event.target.checked })}
|
|
/>
|
|
<Form.Check
|
|
type="checkbox"
|
|
label="Form Data View"
|
|
checked={Boolean(row.show_in_view)}
|
|
onChange={(event) => onPatch(row.id, { show_in_view: event.target.checked })}
|
|
/>
|
|
<Button type="button" variant="outline-danger" size="sm" onClick={() => onRemove(row.id)}>
|
|
Remove
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function DataDesignerEditor({ value, onChange, userAttributes = {} }) {
|
|
const [searchParams] = useSearchParams();
|
|
const formId = searchParams.get('id') || '';
|
|
const [open, setOpen] = useState(false);
|
|
const [questions, setQuestions] = useState([]);
|
|
const [hierarchyLevels, setHierarchyLevels] = useState([]);
|
|
const [manualOpen, setManualOpen] = useState(false);
|
|
const [manualKey, setManualKey] = useState('');
|
|
const [manualLabel, setManualLabel] = useState('');
|
|
const designer = asDesigner(value);
|
|
const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));
|
|
|
|
useEffect(() => {
|
|
if (!formId) {
|
|
setQuestions([]);
|
|
return undefined;
|
|
}
|
|
let cancelled = false;
|
|
signedGet('form', 'formquestion/get_all', { entity_id: formId }).then((response) => {
|
|
if (cancelled || !isSuccess(response)) return;
|
|
const items = response.data?.items || [];
|
|
setQuestions(Array.isArray(items) ? items : Object.values(items));
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [formId]);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
signedGet('ums', 'domain/get_one').then((response) => {
|
|
if (cancelled) return;
|
|
const types = isSuccess(response) ? response.data?.item?.territory_types : [];
|
|
const levels = Array.isArray(types) ? types.map((type) => String(type || '').trim()).filter(Boolean) : [];
|
|
setHierarchyLevels(levels.length ? levels : DEFAULT_HIERARCHY_LEVELS);
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, []);
|
|
|
|
const taken = useMemo(() => new Set(designer.fields.map((row) => row.id)), [designer.fields]);
|
|
|
|
const userOptions = useMemo(() => {
|
|
const fixed = [
|
|
['name', 'Name'],
|
|
['email', 'Email'],
|
|
['employee_code', 'Employee Code'],
|
|
];
|
|
const attributes = Object.entries(userAttributes);
|
|
const labelKey = (label) => String(label || '').trim().toLowerCase();
|
|
const usedCodes = new Set();
|
|
const usedLabels = new Set();
|
|
const rows = [];
|
|
const addRow = (key, label) => {
|
|
const normalized = labelKey(label);
|
|
if (!key || usedCodes.has(key) || usedLabels.has(normalized)) return;
|
|
usedCodes.add(key);
|
|
usedLabels.add(normalized);
|
|
rows.push(option(key, 'user', key, label));
|
|
};
|
|
fixed.forEach(([key, label]) => {
|
|
const match = attributes.find(([code, attrLabel]) => code === key || labelKey(attrLabel) === labelKey(label));
|
|
if (match) addRow(match[0], match[1]);
|
|
else addRow(key, label);
|
|
});
|
|
attributes.forEach(([code, label]) => addRow(code, label));
|
|
return rows;
|
|
}, [userAttributes]);
|
|
|
|
const hierarchyOptions = hierarchyLevels.map((level) => option(String(level).trim().toLowerCase(), 'hierarchy', level, level));
|
|
|
|
const managerOptions = MANAGER_LEVELS.flatMap(([level, title]) =>
|
|
MANAGER_KEYS.map(([key, name]) =>
|
|
option(managerStoredId(level, key), 'manager', key, `${title} Manager ${name}`, { level }),
|
|
),
|
|
);
|
|
|
|
const questionOptions = [
|
|
...questions
|
|
.filter((question) => question?.id && question.status !== 'disabled')
|
|
.map((question) =>
|
|
option(question.code || String(question.id), 'question', question.code || String(question.id), question.question || question.code || question.id),
|
|
),
|
|
option('submission_id', 'question', 'submission_id', 'Submission ID'),
|
|
option('rec_date', 'question', 'rec_date', 'Record Date'),
|
|
option('created_date', 'question', 'created_date', 'Submitted Date'),
|
|
option('updated_date', 'question', 'updated_date', 'Last Updated Date'),
|
|
option('workflow_status', 'question', 'workflow_status', 'Workflow Status'),
|
|
];
|
|
|
|
const appendRows = (picked) => {
|
|
const rows = (picked || []).map((item) => item.row).filter((row) => row && !taken.has(row.id));
|
|
if (!rows.length) return;
|
|
onChange({ fields: [...designer.fields, ...rows] });
|
|
};
|
|
|
|
const patchRow = (id, patch) => {
|
|
onChange({
|
|
fields: designer.fields.map((row) => (row.id === id ? { ...row, ...patch } : row)),
|
|
});
|
|
};
|
|
|
|
const removeRow = (id) => {
|
|
onChange({ fields: designer.fields.filter((row) => row.id !== id) });
|
|
};
|
|
|
|
const onDragEnd = (event) => {
|
|
const { active, over } = event;
|
|
if (!over || active.id === over.id) return;
|
|
const from = designer.fields.findIndex((row) => row.id === active.id);
|
|
const to = designer.fields.findIndex((row) => row.id === over.id);
|
|
if (from < 0 || to < 0) return;
|
|
onChange({ fields: arrayMove(designer.fields, from, to) });
|
|
};
|
|
|
|
const toggleOption = (item, checked) => {
|
|
if (checked) appendRows([item]);
|
|
else removeRow(item.value);
|
|
};
|
|
|
|
const countFor = (source) => designer.fields.filter((row) => row.source === source).length;
|
|
|
|
const addManual = () => {
|
|
const key = manualKey.trim();
|
|
const label = manualLabel.trim();
|
|
if (!key || !label) return;
|
|
const id = key;
|
|
if (taken.has(id)) return;
|
|
onChange({
|
|
fields: [...designer.fields, { id, source: 'manual', key, label, show_in_export: true, show_in_view: false }],
|
|
});
|
|
setManualKey('');
|
|
setManualLabel('');
|
|
};
|
|
|
|
return (
|
|
<div className="border rounded p-3">
|
|
<div className="d-flex justify-content-between align-items-center mb-2">
|
|
<strong>Data Designer</strong>
|
|
<Button type="button" variant="dark" size="sm" onClick={() => setOpen((current) => !current)}>
|
|
Add
|
|
</Button>
|
|
</div>
|
|
{open ? (
|
|
<div className="mb-3">
|
|
<div className="d-flex flex-wrap gap-2 align-items-start mb-3">
|
|
<CheckDropdown title="User attributes" count={countFor('user')} options={userOptions} taken={taken} onToggle={toggleOption} emptyText="No user fields." />
|
|
<CheckDropdown title="Hierarchy" count={countFor('hierarchy')} options={hierarchyOptions} taken={taken} onToggle={toggleOption} emptyText="No hierarchy levels." />
|
|
<CheckDropdown title="Manager info" count={countFor('manager')} options={managerOptions} taken={taken} onToggle={toggleOption} emptyText="No manager fields." />
|
|
<CheckDropdown
|
|
title="Form questions"
|
|
count={countFor('question')}
|
|
options={questionOptions}
|
|
taken={taken}
|
|
onToggle={toggleOption}
|
|
emptyText="No questions."
|
|
disabled={!formId}
|
|
disabledText="Save the form before choosing questions"
|
|
/>
|
|
<Button type="button" variant={manualOpen ? 'dark' : 'outline-dark'} onClick={() => setManualOpen((current) => !current)}>
|
|
Manual ({countFor('manual')})
|
|
</Button>
|
|
</div>
|
|
{manualOpen ? (
|
|
<div className="d-flex flex-wrap gap-2 align-items-end">
|
|
<Form.Group>
|
|
<Form.Label>Field name</Form.Label>
|
|
<Form.Control value={manualKey} onChange={(event) => setManualKey(event.target.value)} placeholder="erdostyne_capsule_value" />
|
|
</Form.Group>
|
|
<Form.Group>
|
|
<Form.Label>Column title</Form.Label>
|
|
<Form.Control value={manualLabel} onChange={(event) => setManualLabel(event.target.value)} placeholder="ERDOSTYNE CAPSULE 10s Value" />
|
|
</Form.Group>
|
|
<Button type="button" variant="outline-dark" onClick={addManual}>
|
|
Add manual field
|
|
</Button>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
|
|
<SortableContext items={designer.fields.map((row) => row.id)} strategy={verticalListSortingStrategy}>
|
|
{designer.fields.map((row) => (
|
|
<DesignerRow key={row.id} row={row} onPatch={patchRow} onRemove={removeRow} />
|
|
))}
|
|
</SortableContext>
|
|
</DndContext>
|
|
{!designer.fields.length ? <p className="text-muted mb-0">No fields selected.</p> : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function DataDesignerField({ field, control }) {
|
|
return (
|
|
<Controller
|
|
name={field.key}
|
|
control={control}
|
|
render={({ field: rhf }) => (
|
|
<DataDesignerEditor value={rhf.value} onChange={rhf.onChange} userAttributes={field.userAttributes || {}} />
|
|
)}
|
|
/>
|
|
);
|
|
}
|