BFLOWS/bflows-bandi-fe
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- added spreadsheet form element;

Browse Source
This commit is contained in:
Vitalii Kiiko
2026-03-25 12:28:34 +01:00
parent d36f73a068
commit 61e03f304b
16 changed files with 382 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/assets/scss/components/formBuilder.scss
View File

@@ -176,6 +176,19 @@
width: 40rem;
}
.formBuilder__elementSettings--wide {
width: 90%;
}
// Univer renders context menus / popups with position:fixed and z-index:1070,
// but PrimeReact Sidebar (modal type) sits at z-index ~1100, hiding them.
// Raise all Univer popup/floating layers above the sidebar.
.univer-popup,
.univer-z-\[1020\],
.univer-z-\[1080\] {
z-index: 9999 !important;
}
.formElementSettings {
display: flex;
flex-direction: column;

84
src/components/FormField/components/Spreadsheet/index.js Normal file
View File

@@ -0,0 +1,84 @@
import React, { useEffect, useRef } from 'react';
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets';
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core';
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US';
import '@univerjs/preset-sheets-core/lib/index.css';
const parseWorkbook = (val) => {
if (!val) return null;
if (typeof val === 'object' && val.sheets) return val;
if (typeof val === 'string') {
try {
const parsed = JSON.parse(val);
return parsed && parsed.sheets ? parsed : null;
} catch {
return null;
}
}
return null;
};
const Spreadsheet = ({ fieldName, defaultValue, setDataFn, template }) => {
const containerRef = useRef(null);
const univerRef = useRef(null);
const univerAPIRef = useRef(null);
const saveTimerRef = useRef(null);
useEffect(() => {
if (!containerRef.current) return;
const { univer, univerAPI } = createUniver({
locale: LocaleType.EN_US,
locales: {
[LocaleType.EN_US]: mergeLocales(UniverPresetSheetsCoreEnUS),
},
presets: [
UniverSheetsCorePreset({
container: containerRef.current,
}),
],
});
univerRef.current = univer;
univerAPIRef.current = univerAPI;
const initialData = parseWorkbook(defaultValue) || parseWorkbook(template) || { name: 'Sheet' };
univerAPI.createWorkbook(initialData);
univerAPI.addEvent(univerAPI.Event.BeforeCommandExecute, () => {
clearTimeout(saveTimerRef.current);
saveTimerRef.current = setTimeout(() => {
const wb = univerAPIRef.current?.getActiveWorkbook();
if (wb) {
setDataFn(fieldName, wb.save());
}
}, 300);
});
return () => {
clearTimeout(saveTimerRef.current);
if (univerRef.current) {
univerRef.current.dispose();
univerRef.current = null;
univerAPIRef.current = null;
}
};
}, []); // eslint-disable-line react-hooks/exhaustive-deps
useEffect(() => {
const el = containerRef.current;
if (!el) return;
const handler = (e) => { e.stopPropagation(); e.preventDefault(); };
el.addEventListener('wheel', handler, { passive: false });
return () => el.removeEventListener('wheel', handler);
}, []);
return (
<div
ref={containerRef}
style={{ width: '100%', height: '500px' }}
/>
);
};
export default Spreadsheet;

2
src/components/FormField/index.js
View File

@@ -19,6 +19,7 @@ import Table from './components/Table';
import PasswordField from './components/PasswordField';
import CriteriaTable from './components/CriteriaTable';
import FileSelect from './components/FileSelect';
import Spreadsheet from './components/Spreadsheet';
const FormField = (props) => {
const fields = {
@@ -38,6 +39,7 @@ const FormField = (props) => {
criteria_table: CriteriaTable,
password: PasswordField,
fileselect: FileSelect,
spreadsheet: Spreadsheet,
}
const Comp = !isNil(fields[props.type]) ? fields[props.type] : null;

2
src/pages/BandoApplication/index.js
View File

@@ -730,6 +730,7 @@ const BandoApplication = () => {
if (!tableColumns) {
tableColumns = head(o.settings.filter(o => o.name === 'criteria_table_columns'));
}
const template = head(o.settings.filter(s => s.name === 'template'));
const step = head(o.settings.filter(o => o.name === 'step'));
const mime = head(o.settings.filter(o => o.name === 'mime'));
const documentCategories = head(o.settings.filter(o => o.name === 'documentCategories'));
@@ -794,6 +795,7 @@ const BandoApplication = () => {
sourceId={getApplicationId()}
useGrouping={false}
tableColumns={tableColumns ? tableColumns.value : {}}
template={template ? template.value : null}
/>
})
: null}

2
src/pages/BandoApplicationPreview/index.js
View File

@@ -378,6 +378,7 @@ const BandoApplicationPreview = () => {
if (!tableColumns) {
tableColumns = head(o.settings.filter(o => o.name === 'criteria_table_columns'));
}
const template = head(o.settings.filter(s => s.name === 'template'));
const step = head(o.settings.filter(o => o.name === 'step'));
const mime = head(o.settings.filter(o => o.name === 'mime'));
const formula = head(o.settings.filter(o => o.name === 'formula'));
@@ -435,6 +436,7 @@ const BandoApplicationPreview = () => {
sourceId={getApplicationId()}
useGrouping={false}
tableColumns={tableColumns ? tableColumns.value : {}}
template={template ? template.value : null}
/>
})}

25
src/pages/BandoEdit/components/BandoEditFormStep3/index.js
View File

@@ -92,6 +92,29 @@ const BandoEditFormStep3 = forwardRef(function () {
storeSet('unsetAsyncRequest');
}
const getFormsCallback = (resp) => {
if (resp.status === 'SUCCESS') {
const EXCLUDED_TYPES = new Set(['fileupload', 'fileselect', 'table', 'criteria_table', 'spreadsheet']);
const raw = (resp.data ?? []).flatMap(form =>
(form.content ?? [])
.filter(f => !EXCLUDED_TYPES.has(f.name))
.map(f => ({
id: f.id,
label: f.label,
placeholder: f.settings?.find(s => s.name === 'placeholder')?.value ?? ''
}))
);
const byLabel = new Map();
raw.forEach(f => {
if (!byLabel.has(f.label)) byLabel.set(f.label, { label: f.label, ids: [], placeholder: f.placeholder });
byLabel.get(f.label).ids.push(f.id);
});
storeSet('callFormFields', Array.from(byLabel.values()));
}
}
const errGetFormsCallback = () => {}
const getFormCallback = (resp) => {
if (resp.status === 'SUCCESS') {
storeSet('formId', resp.data.id);
@@ -117,12 +140,14 @@ const BandoEditFormStep3 = forwardRef(function () {
useEffect(() => {
storeSet('setAsyncRequest');
FormsService.getElementItems(getElementItemsCallback, errGetElementItemsCallbacks);
FormsService.getFormsForCall(id, getFormsCallback, errGetFormsCallback);
return () => {
storeSet('formId', 0);
storeSet('formElements', []);
storeSet('activeElement', '');
storeSet('selectedElement', '');
storeSet('callFormFields', []);
}
}, []);

7
src/pages/BandoEdit/index.js
View File

@@ -23,8 +23,8 @@ import BandoEditFormStep2 from './components/BandoEditFormStep2';
import { Messages } from 'primereact/messages';
import BlockingOverlay from '../../components/BlockingOverlay';
import { Toast } from 'primereact/toast';
import BandoEditFormStep3Excel from './components/BandoEditFormStep3Excel';
import { ConfirmPopup, confirmPopup } from 'primereact/confirmpopup';
import BandoEditFormStep3 from './components/BandoEditFormStep3';
const BandoEdit = () => {
const isAsyncRequest = useStoreValue('isAsyncRequest');
@@ -375,11 +375,8 @@ const BandoEdit = () => {
? <BandoEditFormStep2 initialData={data} setInitialData={setData} ref={formRef}
status={data.status}/>
: null}
{/*{activeStep === 2 && data.evaluationVersion === 'V2'
? <BandoEditFormStep3/>
: null}*/}
{activeStep === 2 && data.evaluationVersion === 'V2'
? <BandoEditFormStep3Excel/>
? <BandoEditFormStep3/>
: null}
<div className="appPageSection">

9
src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js
View File

@@ -18,6 +18,7 @@ import { InputSwitch } from 'primereact/inputswitch';
import ElementSettingChips from '../ElementSettingChips';
import ElementSettingCriteriaTableColumns from '../ElementSettingCriteriaTableColumns';
import ElementSettingTableColumnsForCsv from '../ElementSettingTableColumnsForCsv';
import ElementSettingSpreadsheet from '../ElementSettingSpreadsheet';
import { mimeTypes } from '../../../../../../configData';
import ElementSettingReportHeader from '../ElementSettingReportHeader';
@@ -47,7 +48,8 @@ const ElementSetting = ({ setting, changeFn, updateDataFn, bandoStatus }) => {
isChecklistItem: __('Fa parte di "checklist"?', 'gepafin'),
reportEnable: __('Aggiungere nel report CSV?', 'gepafin'),
reportHeader: __('Nome della colonna nel CSV', 'gepafin'),
reportColumns: __('', 'gepafin')
reportColumns: __('', 'gepafin'),
template: __('Template foglio', 'gepafin')
}
const settingDescription = {
@@ -156,6 +158,11 @@ const ElementSetting = ({ setting, changeFn, updateDataFn, bandoStatus }) => {
name={setting.name}
bandoStatus={bandoStatus}
setDataFn={updateDataFn}/>
} else if (setting.name === 'template') {
return <ElementSettingSpreadsheet
value={setting.value}
name={setting.name}
setDataFn={updateDataFn}/>;
} else if (setting.name === 'formula') {
const isInvalid = invalidFormula(setting.value);
return <>

215
src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingSpreadsheet/index.js Normal file
View File

@@ -0,0 +1,215 @@
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { __ } from '@wordpress/i18n';
import { isEmpty } from 'ramda';
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets';
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core';
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US';
import '@univerjs/preset-sheets-core/lib/index.css';
// store
import { useStoreValue } from '../../../../../../store';
// tools
import { xlsxToWorkbookData } from '../../../../../BandoEdit/components/BandoEditFormStep3Excel/xlsxToWorkbookData';
const ElementSettingSpreadsheet = ({ value, name, setDataFn }) => {
const callFormFields = useStoreValue('callFormFields');
const [tagTooltip, setTagTooltip] = useState(null);
const containerRef = useRef(null);
const univerRef = useRef(null);
const univerAPIRef = useRef(null);
const formFieldsRef = useRef([]);
const mousePos = useRef({ x: 0, y: 0 });
const fileInputRef = useRef(null);
const insertFieldTag = (ids, type, field) => {
const api = univerAPIRef.current;
if (!api) return;
const range = api.getActiveWorkbook()?.getActiveSheet()?.getActiveRange();
if (!range) return;
const displayValue = type === 'value' ? (field.placeholder || '') : field.label;
range.setValues([[{
v: displayValue,
f: `{{gepafin_field:${ids.join(',')}|${type}}}`
}]]);
range.setBackground('#dbeafe');
};
const initializeUniver = useCallback((workbookData) => {
if (univerRef.current) {
univerRef.current.dispose();
univerRef.current = null;
univerAPIRef.current = null;
}
if (!containerRef.current) return;
const { univer, univerAPI } = createUniver({
locale: LocaleType.EN_US,
locales: {
[LocaleType.EN_US]: mergeLocales(UniverPresetSheetsCoreEnUS),
},
presets: [
UniverSheetsCorePreset({
container: containerRef.current,
}),
],
});
univerAPI.createWorkbook(workbookData || { name: 'Sheet' });
univerRef.current = univer;
univerAPIRef.current = univerAPI;
// Disable adding new sheets
univerAPI.addEvent(univerAPI.Event.BeforeCommandExecute, (event) => {
if (event.id === 'sheet.command.insert-sheet') {
event.cancel = true;
}
});
// Context menu: "Inserisci variabile GEPAFIN"
const fields = formFieldsRef.current;
if (fields.length > 0) {
const submenu = univerAPI.createSubmenu({
id: 'gepafin-insert-variable',
title: 'Inserisci variabile GEPAFIN',
});
fields.forEach((field, index) => {
if (index > 0) submenu.addSeparator();
const menuKey = field.ids[0];
const countLabel = field.ids.length > 1 ? ` [${field.ids.length}]` : '';
submenu.addSubmenu(univerAPI.createMenu({
id: `gepafin-field-${menuKey}-label`,
title: `${field.label}${countLabel} (etichetta)`,
action: () => insertFieldTag(field.ids, 'label', field),
}));
submenu.addSubmenu(univerAPI.createMenu({
id: `gepafin-field-${menuKey}-value`,
title: `${field.label}${countLabel} (valore)`,
action: () => insertFieldTag(field.ids, 'value', field),
}));
});
submenu.appendTo(['contextMenu.mainArea', 'contextMenu.others']);
}
// Tooltip on hover over tagged cells — read formula field to detect tag
univerAPI.addEvent(univerAPI.Event.CellHover, (params) => {
const { row, column, worksheet } = params;
const formula = worksheet?.getRange(row, column)?.getFormulas()?.[0]?.[0];
if (typeof formula === 'string' && formula.startsWith('{{gepafin_field:')) {
const match = formula.match(/\{\{gepafin_field:([^|]+)\|([^}]+)\}\}/);
if (match) {
const tagIds = match[1].split(',');
const field = formFieldsRef.current.find(f => f.ids.some(fid => tagIds.includes(fid)));
const countSuffix = tagIds.length > 1 ? ` — ${tagIds.length} moduli` : '';
setTagTooltip({ label: `${field ? field.label : match[1]} (${match[2]})${countSuffix}` });
}
} else {
setTagTooltip(null);
}
});
}, []); // refs are stable
// Keep formFieldsRef in sync with store value
useEffect(() => {
formFieldsRef.current = callFormFields;
}, [callFormFields]);
// Initialize Univer on mount
useEffect(() => {
const workbook = value && !isEmpty(value) && value.sheets ? value : null;
initializeUniver(workbook);
return () => {
if (univerRef.current) {
univerRef.current.dispose();
univerRef.current = null;
univerAPIRef.current = null;
}
};
}, []); // run once on mount
// Prevent page scroll while hovering over the spreadsheet
useEffect(() => {
const el = containerRef.current;
if (!el) return;
const handler = (e) => { e.stopPropagation(); e.preventDefault(); };
el.addEventListener('wheel', handler, { passive: false });
return () => el.removeEventListener('wheel', handler);
}, []);
const handleImport = (e) => {
const file = e.target.files?.[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (ev) => {
const data = xlsxToWorkbookData(ev.target.result);
initializeUniver(data);
};
reader.readAsArrayBuffer(file);
e.target.value = '';
};
const handleSave = () => {
const workbookData = univerAPIRef.current?.getActiveWorkbook()?.save() ?? {};
setDataFn(name, workbookData);
};
return (
<div style={{ width: '100%' }}>
<div style={{ marginBottom: '8px', display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
<input
ref={fileInputRef}
type="file"
accept=".xlsx,.xls,.csv,.ods"
style={{ display: 'none' }}
onChange={handleImport}
/>
<button
type="button"
className="p-button p-button-outlined p-button-sm"
onClick={() => fileInputRef.current?.click()}
>
{__('Importa foglio', 'gepafin')}
</button>
<button
type="button"
className="p-button p-button-sm"
onClick={handleSave}
>
{__('Salva template', 'gepafin')}
</button>
</div>
<div
ref={containerRef}
style={{ width: '100%', height: '500px' }}
onMouseMove={(e) => { mousePos.current = { x: e.clientX, y: e.clientY }; }}
onMouseLeave={() => setTagTooltip(null)}
/>
{tagTooltip && (
<div style={{
position: 'fixed',
top: mousePos.current.y - 36,
left: mousePos.current.x + 12,
background: '#1e293b',
color: '#fff',
padding: '4px 8px',
borderRadius: '4px',
fontSize: '12px',
pointerEvents: 'none',
zIndex: 9999,
whiteSpace: 'nowrap',
}}>
{tagTooltip.label}
</div>
)}
</div>
);
};
export default ElementSettingSpreadsheet;

3
src/pages/BandoFormsEdit/components/FormBuilder/index.js
View File

@@ -18,6 +18,7 @@ const FormBuilder = ({ callStatus, context }) => {
const elementItems = useStoreValue('elementItems');
const activeElement = useStoreValue('activeElement');
const isAsyncRequest = useStoreValue('isAsyncRequest');
const isSpreadsheetActive = elements.find(el => el.id === activeElement)?.name === 'spreadsheet';
const renderField = useCallback((field, index) => {
return (
@@ -56,7 +57,7 @@ const FormBuilder = ({ callStatus, context }) => {
return (
<>
<Sidebar visible={!isEmpty(activeElement)} onHide={closeSettings} dismissable={false} className="formBuilder__elementSettings">
<Sidebar visible={!isEmpty(activeElement)} onHide={closeSettings} dismissable={false} className={`formBuilder__elementSettings${isSpreadsheetActive ? ' formBuilder__elementSettings--wide' : ''}`}>
<h2>{__('Impostazioni del campo modulo', 'gepafin')}</h2>
{!isEmpty(activeElement)
? <BuilderElementSettings closeSettingsFn={closeSettings} callStatus={callStatus} context={context}/>

2
src/pages/DomandaEditInstructorManager/index.js
View File

@@ -1586,6 +1586,7 @@ const DomandaEditInstructorManager = () => {
if (!tableColumns) {
tableColumns = head(o.settings.filter(o => o.name === 'criteria_table_columns'));
}
const template = head(o.settings.filter(s => s.name === 'template'));
const step = head(o.settings.filter(o => o.name === 'step'));
const mime = head(o.settings.filter(o => o.name === 'mime'));
const formula = head(o.settings.filter(o => o.name === 'formula'));
@@ -1645,6 +1646,7 @@ const DomandaEditInstructorManager = () => {
sourceId={id}
useGrouping={false}
tableColumns={tableColumns ? tableColumns.value : {}}
template={template ? template.value : null}
/>
})}
</form>

6
src/pages/DomandaEditPreInstructor/index.js
View File

@@ -822,7 +822,7 @@ const DomandaEditPreInstructor = () => {
storeSet('unsetAsyncRequest');
}
const doCreateAppointment = () => {
/*const doCreateAppointment = () => {
setAppointmentData({
title: '',
text: '',
@@ -830,7 +830,7 @@ const DomandaEditPreInstructor = () => {
amount: 0
});
setIsVisibleAppointmentDialog(true);
}
}*/
const setAppointmentFieldValue = (name, value) => {
const newData = wrap(appointmentData).set(name, value).value();
@@ -1493,6 +1493,7 @@ const DomandaEditPreInstructor = () => {
if (!tableColumns) {
tableColumns = head(o.settings.filter(o => o.name === 'criteria_table_columns'));
}
const template = head(o.settings.filter(s => s.name === 'template'));
const step = head(o.settings.filter(o => o.name === 'step'));
const mime = head(o.settings.filter(o => o.name === 'mime'));
const formula = head(o.settings.filter(o => o.name === 'formula'));
@@ -1552,6 +1553,7 @@ const DomandaEditPreInstructor = () => {
sourceId={id}
useGrouping={false}
tableColumns={tableColumns ? tableColumns.value : {}}
template={template ? template.value : null}
/>
})}
</form>

2
src/pages/LoginConfidi/index.js
View File

@@ -73,7 +73,7 @@ const LoginConfidi = () => {
}
useEffect(() => {
if (!isEmpty(token)) {
if (!isEmpty(token) && !AuthenticationService.isExpired()) {
setLoading(true);
window.location.replace('/')
}

2
src/service/network-service.js
View File

@@ -1,4 +1,4 @@
import { storeGet, storeSet } from '../store';
import { storeGet } from '../store';
import logMsgWithSentry from '../helpers/logMsgWithSentry';
import { isEmpty } from 'ramda';

1
src/store/initial.js
View File

@@ -17,6 +17,7 @@ const initialStore = {
formLabel: '',
formElements: [],
elementItems: [],
callFormFields: [],
activeElement: '',
selectedElement: '',
draggingElementId: 0,

18
src/tempData.js
View File

@@ -675,5 +675,23 @@ export const elementItems = [
validators: {
isRequired: false
}
},
{
id: 24,
sortOrder: 24,
name: 'spreadsheet',
label: 'Foglio di Calcolo',
description: 'Modello di foglio di calcolo con variabili dinamiche',
settings: [
{
name: "label",
value: "Foglio di Calcolo"
},
{
name: "template",
value: {}
}
],
validators: {}
}
]