Make some call fields editable after publishing the call
- call form fields are editable (according to the list of keys); - some parts of the form are editable;
This commit is contained in:
@@ -5,14 +5,16 @@ import { isNil } from 'ramda';
|
||||
// components
|
||||
import { Button } from 'primereact/button';
|
||||
|
||||
const BandoEditFormActions = ({ id, openPreview, openPreviewEvaluation, submitFn }) => {
|
||||
const BandoEditFormActions = ({ id, openPreview, openPreviewEvaluation, submitFn, status }) => {
|
||||
return (
|
||||
<div className="appPageSection">
|
||||
<div className="appPageSection__actions">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={submitFn}
|
||||
label={__('Salva bozza', 'gepafin')} icon="pi pi-save" iconPos="right"/>
|
||||
label={status === 'PUBLISH'
|
||||
? __('Modifica', 'gepafin')
|
||||
: __('Salva bozza', 'gepafin')} icon="pi pi-save" iconPos="right"/>
|
||||
<Button
|
||||
type="button"
|
||||
disabled={isNil(id)}
|
||||
|
||||
@@ -180,7 +180,8 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors, st
|
||||
return values.status === 'PUBLISH' &&
|
||||
![
|
||||
'descriptionShort', 'descriptionLong', 'documentationRequested', 'threshold',
|
||||
'aimedTo', 'criteria', 'docs', 'checklist', 'faq'
|
||||
'aimedTo', 'criteria', 'docs', 'checklist', 'faq', 'amount', 'amountMin', 'amountMax',
|
||||
'email', 'phoneNumber', 'checkList', 'images'
|
||||
].includes(fieldName)
|
||||
}
|
||||
|
||||
|
||||
@@ -206,8 +206,13 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors, st
|
||||
}
|
||||
}, []);
|
||||
|
||||
const shouldDisableField = () => {
|
||||
return values.status === 'PUBLISH'
|
||||
const shouldDisableField = (fieldName) => {
|
||||
return values.status === 'PUBLISH' &&
|
||||
![
|
||||
'descriptionShort', 'descriptionLong', 'documentationRequested', 'threshold',
|
||||
'aimedTo', 'criteria', 'docs', 'checklist', 'faq', 'amount', 'amountMin', 'amountMax',
|
||||
'email', 'phoneNumber', 'checkList', 'images'
|
||||
].includes(fieldName)
|
||||
}
|
||||
|
||||
const acceptAllFormats = () => {
|
||||
@@ -219,7 +224,7 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors, st
|
||||
<UnsavedChangesDetector getValuesFn={getValues}/>
|
||||
<FormFieldRepeaterCriteria
|
||||
data={values}
|
||||
disabled={shouldDisableField()}
|
||||
disabled={shouldDisableField('criteria')}
|
||||
setDataFn={setValue}
|
||||
fieldName="criteria"
|
||||
options={criteriaOptions}
|
||||
@@ -238,7 +243,7 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors, st
|
||||
|
||||
<FormField
|
||||
type="fileuploadasync"
|
||||
disabled={shouldDisableField()}
|
||||
disabled={shouldDisableField('docs')}
|
||||
setDataFn={setValue}
|
||||
fieldName="docs"
|
||||
label={__('Documentazione', 'gepafin')}
|
||||
@@ -257,7 +262,7 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors, st
|
||||
|
||||
<FormField
|
||||
type="fileuploadasync"
|
||||
disabled={shouldDisableField()}
|
||||
disabled={shouldDisableField('images')}
|
||||
setDataFn={setValue}
|
||||
fieldName="images"
|
||||
label={__('Immagine del Bando', 'gepafin')}
|
||||
@@ -273,7 +278,7 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors, st
|
||||
|
||||
<FormFieldRepeater
|
||||
data={values['checkList']}
|
||||
disabled={shouldDisableField()}
|
||||
disabled={shouldDisableField('checkList')}
|
||||
setDataFn={setValue}
|
||||
fieldName="checkList"
|
||||
options={checklistOptions}
|
||||
|
||||
@@ -11,7 +11,7 @@ import { Button } from 'primereact/button';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import BuilderElementProperLabel from '../BuilderElementProperLabel';
|
||||
|
||||
const BuilderElement = ({ id, name, label, index }) => {
|
||||
const BuilderElement = ({ id, name, label, index, bandoStatus }) => {
|
||||
const draggingElementId = useStore().main.draggingElementId();
|
||||
const ref = useRef(null);
|
||||
|
||||
@@ -109,28 +109,10 @@ const BuilderElement = ({ id, name, label, index }) => {
|
||||
</div>
|
||||
<div className="actions">
|
||||
<Button icon="pi pi-cog" onClick={() => openSettings(id)} outlined severity="info"/>
|
||||
<Button icon="pi pi-trash" onClick={() => remove(id)} outlined severity="danger"/>
|
||||
<Button icon="pi pi-trash" disabled={bandoStatus === 'PUBLISH'} onClick={() => remove(id)} outlined severity="danger"/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
/*return (
|
||||
<div ref={ref} className="formBuilder__element" style={{ opacity }} data-handler-id={handlerId}>
|
||||
{draggingId === id
|
||||
? <div className="formBuilder__elementNew"></div>
|
||||
: <>
|
||||
<div className="meta">
|
||||
<Tag value={name} severity="info"/>
|
||||
<BuilderElementProperLabel id={id} defaultLabel={label}/>
|
||||
</div>
|
||||
<div className="actions">
|
||||
<Button icon="pi pi-cog" onClick={() => openSettings(id)} outlined severity="info"/>
|
||||
<Button icon="pi pi-trash" onClick={() => remove(id)} outlined severity="danger"/>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
)*/
|
||||
}
|
||||
|
||||
export default BuilderElement;
|
||||
@@ -11,7 +11,7 @@ import { Editor } from 'primereact/editor';
|
||||
import { mimeTypes } from '../../../../../../configData';
|
||||
import ElementSettingTableColumns from '../ElementSettingTableColumns';
|
||||
|
||||
const ElementSetting = ({ setting, changeFn, updateDataFn }) => {
|
||||
const ElementSetting = ({ setting, changeFn, updateDataFn, bandoStatus }) => {
|
||||
|
||||
const settingLabels = {
|
||||
label: __('Label', 'gepafin'),
|
||||
@@ -48,6 +48,7 @@ const ElementSetting = ({ setting, changeFn, updateDataFn }) => {
|
||||
return <ElementSettingRepeater
|
||||
value={is(Array, setting.value) ? setting.value : []}
|
||||
name={setting.name}
|
||||
bandoStatus={bandoStatus}
|
||||
setDataFn={updateDataFn}/>
|
||||
} else if (setting.name === 'mime') {
|
||||
return <MultiSelect
|
||||
@@ -75,6 +76,7 @@ const ElementSetting = ({ setting, changeFn, updateDataFn }) => {
|
||||
return <ElementSettingTableColumns
|
||||
value={is(Object, setting.value) ? setting.value : {}}
|
||||
name={setting.name}
|
||||
bandoStatus={bandoStatus}
|
||||
setDataFn={updateDataFn}/>
|
||||
} else {
|
||||
return <InputText id={setting.name} aria-describedby={`${setting.name}-help`}
|
||||
|
||||
@@ -11,7 +11,8 @@ import uniqid from '../../../../../../helpers/uniqid';
|
||||
const ElementSettingRepeater = ({
|
||||
value,
|
||||
name,
|
||||
setDataFn
|
||||
setDataFn,
|
||||
bandoStatus
|
||||
}) => {
|
||||
const [stateFieldData, setStateFieldData] = useState([]);
|
||||
|
||||
@@ -53,10 +54,10 @@ const ElementSettingRepeater = ({
|
||||
{stateFieldData.map((o, i) => <div key={i} className="formElementSettings__repeaterItem">
|
||||
<div className="p-inputgroup flex-1">
|
||||
{properField(o, i)}
|
||||
<Button icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
|
||||
<Button icon="pi pi-times" disabled={bandoStatus === 'PUBLISH'} className="p-button-danger" onClick={() => removeItem(i)}/>
|
||||
</div>
|
||||
</div>)}
|
||||
<Button type="button" outlined label={__('Aggiungi', 'gepafin')} onClick={addNewItem}/>
|
||||
<Button type="button" disabled={bandoStatus === 'PUBLISH'} outlined label={__('Aggiungi', 'gepafin')} onClick={addNewItem}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -14,7 +14,8 @@ import uniqid from '../../../../../../helpers/uniqid';
|
||||
const ElementSettingTableColumns = ({
|
||||
value,
|
||||
name,
|
||||
setDataFn
|
||||
setDataFn,
|
||||
bandoStatus
|
||||
}) => {
|
||||
const [stateFieldData, setStateFieldData] = useState([]);
|
||||
const [rowsData, setRowsData] = useState([]);
|
||||
@@ -34,7 +35,7 @@ const ElementSettingTableColumns = ({
|
||||
.reduce((acc, cur) => {
|
||||
acc[cur.name] = ''
|
||||
return acc;
|
||||
}, {});
|
||||
}, {});
|
||||
setRowsData([...rowsData, obj]);
|
||||
}
|
||||
|
||||
@@ -87,7 +88,10 @@ const ElementSettingTableColumns = ({
|
||||
<InputText value={item.label} onInput={(e) => onInputChange(e, i)}/>
|
||||
<div className="flex-1">
|
||||
<span>{__('Predefinito?', 'gepafin')}</span>
|
||||
<InputSwitch checked={item.predefined} onChange={(e) => setChecked(e.value, i)}/>
|
||||
<InputSwitch
|
||||
checked={item.predefined}
|
||||
disabled={bandoStatus === 'PUBLISH'}
|
||||
onChange={(e) => setChecked(e.value, i)}/>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
@@ -118,10 +122,10 @@ const ElementSettingTableColumns = ({
|
||||
{stateFieldData.map((o, i) => <div key={i} className="formElementSettings__repeaterItem">
|
||||
<div className="p-inputgroup flex-1">
|
||||
{properField(o, i)}
|
||||
<Button icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
|
||||
<Button icon="pi pi-times" disabled={bandoStatus === 'PUBLISH'} className="p-button-danger" onClick={() => removeItem(i)}/>
|
||||
</div>
|
||||
</div>)}
|
||||
<Button type="button" outlined label={__('Aggiungi', 'gepafin')} onClick={addNewItem}/>
|
||||
<Button type="button" disabled={bandoStatus === 'PUBLISH'} outlined label={__('Aggiungi', 'gepafin')} onClick={addNewItem}/>
|
||||
</div>
|
||||
{stateFieldData
|
||||
.filter(o => o.predefined)
|
||||
@@ -138,7 +142,9 @@ const ElementSettingTableColumns = ({
|
||||
</div>
|
||||
</div>
|
||||
})}
|
||||
<Button type="button" outlined
|
||||
<Button type="button"
|
||||
outlined
|
||||
disabled={bandoStatus === 'PUBLISH'}
|
||||
label={__('Aggiungi una righa', 'gepafin')}
|
||||
onClick={addNewRow}/>
|
||||
</div>
|
||||
|
||||
@@ -17,7 +17,7 @@ import ElementSetting from './components/ElementSetting';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { MultiSelect } from 'primereact/multiselect';
|
||||
|
||||
const BuilderElementSettings = ({ closeSettingsFn }) => {
|
||||
const BuilderElementSettings = ({ closeSettingsFn, bandoStatus }) => {
|
||||
const elements = useStore().main.formElements();
|
||||
const activeElement = useStore().main.activeElement();
|
||||
const criteriaOptions = useStore().main.bandoCriteria();
|
||||
@@ -162,6 +162,7 @@ const BuilderElementSettings = ({ closeSettingsFn }) => {
|
||||
? settings.map((o) => <ElementSetting
|
||||
key={o.name}
|
||||
setting={o}
|
||||
bandoStatus={bandoStatus}
|
||||
changeFn={onChange}
|
||||
updateDataFn={onUpdateOptions}/>)
|
||||
: null}
|
||||
|
||||
@@ -13,7 +13,7 @@ import BuilderElementSettings from '../BuilderElementSettings';
|
||||
import BuilderDropzone from '../BuilderDropzone';
|
||||
import BlockingOverlay from '../../../../components/BlockingOverlay';
|
||||
|
||||
const FormBuilder = () => {
|
||||
const FormBuilder = ({ bandoStatus }) => {
|
||||
const elements = useStore().main.formElements();
|
||||
const elementItems = useStore().main.elementItems();
|
||||
const activeElement = useStore().main.activeElement();
|
||||
@@ -27,9 +27,10 @@ const FormBuilder = () => {
|
||||
id={field.id}
|
||||
label={field.label}
|
||||
name={field.name}
|
||||
bandoStatus={bandoStatus}
|
||||
/>
|
||||
)
|
||||
}, []);
|
||||
}, [bandoStatus]);
|
||||
|
||||
const renderItem = useCallback((item) => {
|
||||
return (
|
||||
@@ -57,7 +58,7 @@ const FormBuilder = () => {
|
||||
<>
|
||||
<Sidebar visible={!isEmpty(activeElement)} onHide={closeSettings} className="formBuilder__elementSettings">
|
||||
<h2>{__('Impostazioni del campo modulo', 'gepafin')}</h2>
|
||||
{!isEmpty(activeElement) ? <BuilderElementSettings closeSettingsFn={closeSettings}/> : null}
|
||||
{!isEmpty(activeElement) ? <BuilderElementSettings closeSettingsFn={closeSettings} bandoStatus={bandoStatus}/> : null}
|
||||
</Sidebar>
|
||||
<div className="formBuilder">
|
||||
<div className="formBuilder__main">
|
||||
|
||||
@@ -210,7 +210,6 @@ const BandoFormsEdit = () => {
|
||||
}
|
||||
|
||||
const errFormDeleteCallback = (data) => {
|
||||
console.log('errFormDeleteCallback', data)
|
||||
storeSet.main.unsetAsyncRequest();
|
||||
}
|
||||
|
||||
@@ -223,7 +222,6 @@ const BandoFormsEdit = () => {
|
||||
}
|
||||
|
||||
const errGetElementItemsCallbacks = (data) => {
|
||||
console.log('errGetElementItemsCallbacks', data)
|
||||
storeSet.main.unsetAsyncRequest();
|
||||
}
|
||||
|
||||
@@ -246,9 +244,9 @@ const BandoFormsEdit = () => {
|
||||
|
||||
const getBandoCallback = (data) => {
|
||||
if (data.status === 'SUCCESS') {
|
||||
setBandoStatus(data.data.status);
|
||||
const criteria = pathOr([], ['data', 'criteria'], data);
|
||||
const criteriaOptions = criteria.map(o => ({value: o.id, label: o.value}));
|
||||
console.log('criteriaOptions', criteriaOptions);
|
||||
storeSet.main.bandoCriteria(criteriaOptions);
|
||||
}
|
||||
}
|
||||
@@ -319,7 +317,7 @@ const BandoFormsEdit = () => {
|
||||
|
||||
<div className="appPageSection">
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
<FormBuilder/>
|
||||
<FormBuilder bandoStatus={bandoStatus}/>
|
||||
</DndProvider>
|
||||
</div>
|
||||
|
||||
@@ -334,7 +332,7 @@ const BandoFormsEdit = () => {
|
||||
label={__('Indietro', 'gepafin')} icon="pi pi-arrow-left" iconPos="left"/>
|
||||
<Button
|
||||
onClick={() => doSave()}
|
||||
disabled={isAsyncRequest || 'PUBLISH' === bandoStatus}
|
||||
disabled={isAsyncRequest}
|
||||
label={__('Salva progressi', 'gepafin')} icon="pi pi-save" iconPos="right"/>
|
||||
<Button
|
||||
outlined
|
||||
|
||||
Reference in New Issue
Block a user