From 198fdb71b4453fd6545a6a148af91fb4279a33dd Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Mon, 25 Nov 2024 11:52:27 +0100 Subject: [PATCH 01/11] - saving progress; --- src/assets/scss/components/flowBuilder.scss | 5 +++++ src/pages/BandoFlowEdit/index.js | 13 +++++++++++++ 2 files changed, 18 insertions(+) diff --git a/src/assets/scss/components/flowBuilder.scss b/src/assets/scss/components/flowBuilder.scss index 04e3e83..8e4155c 100644 --- a/src/assets/scss/components/flowBuilder.scss +++ b/src/assets/scss/components/flowBuilder.scss @@ -32,4 +32,9 @@ font-size: 13px; text-align: center; } +} + +.flowContainer { + display: flex; + } \ No newline at end of file diff --git a/src/pages/BandoFlowEdit/index.js b/src/pages/BandoFlowEdit/index.js index e6b210d..8b94030 100644 --- a/src/pages/BandoFlowEdit/index.js +++ b/src/pages/BandoFlowEdit/index.js @@ -280,6 +280,19 @@ const BandoFlowEdit = () => {
+
+ {forms.length >= 2 && isFlowAllowed + ?
+
+
+ +
+
+
: null} +
+ +
+
From 3a4823bb7d8ad0f00bfd40d7afc1747a54b7b864 Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Wed, 27 Nov 2024 10:28:35 +0100 Subject: [PATCH 02/11] - saving progress; --- package.json | 1 + src/assets/scss/components/flowBuilder.scss | 19 +++ src/pages/BandoFlowEdit/index.js | 124 ++++++++++++++++---- 3 files changed, 124 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index c998aa0..c1d79c6 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "html-react-parser": "5.1.16", "jwt-decode": "4.0.0", "klona": "2.0.6", + "leader-line": "^1.0.7", "luxon": "3.5.0", "object-path-immutable": "4.1.2", "primeicons": "7.0.0", diff --git a/src/assets/scss/components/flowBuilder.scss b/src/assets/scss/components/flowBuilder.scss index 8e4155c..a4456ec 100644 --- a/src/assets/scss/components/flowBuilder.scss +++ b/src/assets/scss/components/flowBuilder.scss @@ -36,5 +36,24 @@ .flowContainer { display: flex; + flex-direction: column; + gap: 60px; + width: 100%; +} +.flowContainer__level { + display: flex; + justify-content: center; + gap: 20px; + width: 100%; +} + +.flowContainer__flowItem { + display: flex; + flex-direction: column; + gap: 20px; + width: 100%; + max-width: 250px; + padding: 7px; + border: 1px solid var(--table-border-color); } \ No newline at end of file diff --git a/src/pages/BandoFlowEdit/index.js b/src/pages/BandoFlowEdit/index.js index 8b94030..5efc13a 100644 --- a/src/pages/BandoFlowEdit/index.js +++ b/src/pages/BandoFlowEdit/index.js @@ -32,7 +32,7 @@ const BandoFlowEdit = () => { const [mainFieldOptions, setMainFieldOptions] = useState([]); const [mainField, setMainField] = useState(''); const [bandoStatus, setBandoStatus] = useState(''); - const [isFlowAllowed, setIsFlowAllowed] = useState(false); + const [isFlowAllowed, setIsFlowAllowed] = useState(true); const [finalForm, setFinalForm] = useState(0); const flowMsgs = useRef(null); const toast = useRef(null); @@ -56,7 +56,8 @@ const BandoFlowEdit = () => { defaultFocus: 'reject', acceptClassName: 'p-button-danger', accept: doDelete, - reject: () => {} + reject: () => { + } }); }; @@ -86,7 +87,7 @@ const BandoFlowEdit = () => { const shoudDisableSaving = useCallback(() => { return forms.length > 2 ? isEmpty(flowData) || isEmpty(flowEdges) || isEmpty(initialForm) || isEmpty(finalForm) - || flowData.length < forms.length - 1 || 'PUBLISH' === bandoStatus + || flowData.length < forms.length - 1 || 'PUBLISH' === bandoStatus : isEmpty(flowEdges) || isEmpty(initialForm) || 'PUBLISH' === bandoStatus; }, [flowData, flowEdges]); @@ -128,7 +129,7 @@ const BandoFlowEdit = () => { if (data.status === 'SUCCESS') { const formOptions = data.data.map(o => ({ label: o.label, value: o.id })) storeSet.main.flowForms(data.data); - setFormOptions([{label: '', value: ''}, ...formOptions]); + setFormOptions([{ label: '', value: '' }, ...formOptions]); const bandoId = getBandoId(); storeSet.main.setAsyncRequest(); FlowService.getFlow(bandoId, getFlowCallback, errGetFlowCallback); @@ -172,11 +173,15 @@ const BandoFlowEdit = () => { const field = form ? head(form.content.filter(o => o.id === mainField)) : null; let options = []; + if (initialForm === 0) { + return; + } + if (field) { options = head(field.settings.filter(o => o.name === 'options')); } - - if (field && options.value && options.value.length === flowForms.length - 2) { + console.log('isFlowAllowed', initialForm, mainField, field) + if (forms.length === 2 || (field && options.value && options.value.length === flowForms.length - 2)) { setIsFlowAllowed(true); const data = { formId: String(initialForm), @@ -212,10 +217,14 @@ const BandoFlowEdit = () => { useEffect(() => { setMainField(''); setMainFieldOptions([]); + storeSet.main.flowData([]); + const flowForms = storeGet.main.flowForms(); - const form = head(flowForms.filter(o => String(o.id) === String(initialForm))) - const relevantFields = form - ? form.content + const initialFormObj = head(flowForms.filter(o => String(o.id) === String(initialForm))); + let finalFormObj = null; + + const relevantFields = initialFormObj + ? initialFormObj.content .filter(o => ['radio', 'select'].includes(o.name)) .map(o => { const label = head(o.settings.filter(o => o.name === 'label')); @@ -223,15 +232,49 @@ const BandoFlowEdit = () => { }) : []; setMainFieldOptions([ - {label: isEmpty(relevantFields) ? __('Nessun scelta', 'gepafin') : '', value: ''}, + { label: isEmpty(relevantFields) ? __('Nessun scelta', 'gepafin') : '', value: '' }, ...relevantFields] ); + if (finalForm) { + finalFormObj = head(flowForms.filter(o => String(o.id) !== String(finalForm))); + } + + const flowItem1 = { + formId: String(initialFormObj.id), + chosenField: '', + chosenValue: '' + } + storeSet.main.addFlowData(flowItem1); + if (flowForms.length === 2) { - setIsFlowAllowed(true) + setIsFlowAllowed(true); + finalFormObj = head(flowForms.filter(o => String(o.id) !== String(initialForm))); + console.log('finalFormObj', finalFormObj); + setFinalForm(finalFormObj.id); + const flowItem2 = { + formId: String(finalFormObj.id), + chosenField: '', + chosenValue: '' + } + storeSet.main.addFlowData(flowItem2); + + const edge = { + id: `${initialFormObj.id}->${finalFormObj.id}`, + source: String(initialFormObj.id), + target: finalFormObj.id, + type: 'smoothstep' + } + storeSet.main.flowEdges([edge]); + } else if (flowForms.length > 2) { + } }, [initialForm]); + useEffect(() => { + + }, [finalForm]) + useEffect(() => { const bandoId = getBandoId(); storeSet.main.setAsyncRequest(); @@ -268,7 +311,7 @@ const BandoFlowEdit = () => { storeSet.main.flowEdges([]); } }, []); - + console.log('isFlowAllowed', isFlowAllowed, flowData, flowEdges) return (
@@ -284,16 +327,57 @@ const BandoFlowEdit = () => { {forms.length >= 2 && isFlowAllowed ?
-
- +
+ + updateInitialForm(e.value)} + optionDisabled={(opt) => finalForm === opt.value || isEmpty(opt.value)} + options={formOptions} + optionLabel="label" + optionValue="value" + placeholder={__('Scegli il form', 'gepafin')}/> + {initialForm && forms.length > 2 && mainFieldOptions + ?
+ + setMainField(e.value)} + optionDisabled={(opt) => isEmpty(opt.value)} + options={mainFieldOptions} + optionLabel="label" + optionValue="value" + placeholder={__('Scegli il campo', 'gepafin')}/> +
: null}
+ + {forms.length >= 2 && initialForm + ?
+
+ + setFinalForm(e.value)} + optionDisabled={(opt) => initialForm === opt.value || isEmpty(opt.value)} + options={formOptions} + optionLabel="label" + optionValue="value" + placeholder={__('Scegli il form', 'gepafin')}/> +
+
: null}
: null}
-
+ {/*
@@ -339,9 +423,9 @@ const BandoFlowEdit = () => { placeholder={__('Scegli il form', 'gepafin')}/>
: null}
-
+
*/} -
+ {/*
-
+
*/}
- {forms.length >= 2 && isFlowAllowed + {/*{forms.length >= 2 && isFlowAllowed ? : null} + mainField={mainField}/> : null}*/}
From 3759400f19464264207a1ec4c14804355a04f02a Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Mon, 2 Dec 2024 09:47:09 +0100 Subject: [PATCH 03/11] - saving progress; --- package.json | 49 ++++---- src/assets/scss/components/flowBuilder.scss | 33 ++++- src/assets/scss/theme.scss | 1 + src/components/FlowBuilder/index.js | 2 +- .../components/DatepickerRange/index.js | 2 +- src/pages/BandoApplicationPreview/index.js | 2 +- src/pages/BandoFlowEdit/index.js | 119 +++++++++--------- .../components/ArchiveDocument/index.js | 3 +- src/pages/DomandaEditPreInstructor/index.js | 7 +- 9 files changed, 124 insertions(+), 94 deletions(-) diff --git a/package.json b/package.json index 85e27d0..9baab70 100644 --- a/package.json +++ b/package.json @@ -4,52 +4,51 @@ "private": true, "dependencies": { "@babel/plugin-proposal-private-property-in-object": "7.21.11", - "@babel/preset-react": "7.24.7", - "@date-fns/tz": "1.1.2", - "@emailjs/browser": "^4.4.1", - "@emotion/styled": "11.13.0", - "@number-flow/react": "0.2.0", + "@babel/preset-react": "7.25.9", + "@date-fns/tz": "1.2.0", + "@emailjs/browser": "4.4.1", + "@emotion/styled": "11.13.5", + "@number-flow/react": "0.4.1", "@sentry/browser": "^8.41.0", "@tanstack/react-table": "^8.20.5", - "@wordpress/i18n": "5.8.0", - "@wordpress/react-i18n": "4.8.0", - "@xyflow/react": "12.3.1", + "@wordpress/i18n": "5.13.0", + "@wordpress/react-i18n": "4.13.0", "codice-fiscale-js": "2.3.22", - "copy-to-clipboard": "^3.3.3", - "deep-object-diff": "^1.1.9", - "dompurify": "3.1.7", + "copy-to-clipboard": "3.3.3", + "deep-object-diff": "1.1.9", + "dompurify": "3.2.2", "fast-deep-equal": "3.1.3", - "hotkeys-js": "^3.13.7", - "html-react-parser": "5.1.16", + "hotkeys-js": "3.13.7", + "html-react-parser": "5.1.18", "jwt-decode": "4.0.0", "klona": "2.0.6", - "leader-line": "^1.0.7", + "leader-line": "1.0.7", "luxon": "3.5.0", "object-path-immutable": "4.1.2", "primeicons": "7.0.0", - "primereact": "10.8.4", - "quill": "2.0.2", + "primereact": "10.8.5", + "quill": "2.0.3", "ramda": "0.30.1", "react": "18.3.1", "react-dnd": "16.0.1", "react-dnd-html5-backend": "16.0.1", "react-dom": "18.3.1", - "react-hook-form": "7.53.0", - "react-router-dom": "6.26.2", + "react-hook-form": "7.53.2", + "react-router-dom": "7.0.1", "react-scripts": "5.0.1", "validate.js": "0.13.1", "zustand": "4.5.4", "zustand-x": "3.0.4" }, "devDependencies": { - "@babel/cli": "7.25.6", - "@babel/core": "7.25.2", - "@babel/plugin-syntax-jsx": "7.24.7", - "@wordpress/babel-plugin-makepot": "6.8.0", + "@babel/cli": "7.25.9", + "@babel/core": "7.26.0", + "@babel/plugin-syntax-jsx": "7.25.9", + "@wordpress/babel-plugin-makepot": "6.13.0", "babel-plugin-macros": "3.1.0", - "node-wp-i18n": "^1.2.7", - "sass": "1.79.3", - "sass-loader": "16.0.2" + "node-wp-i18n": "1.2.7", + "sass": "1.81.0", + "sass-loader": "16.0.3" }, "scripts": { "start": "GENERATE_SOURCEMAP=false react-scripts start", diff --git a/src/assets/scss/components/flowBuilder.scss b/src/assets/scss/components/flowBuilder.scss index a4456ec..98c6d03 100644 --- a/src/assets/scss/components/flowBuilder.scss +++ b/src/assets/scss/components/flowBuilder.scss @@ -51,9 +51,36 @@ .flowContainer__flowItem { display: flex; flex-direction: column; - gap: 20px; + width: 100%; + max-width: 280px; + padding: 15px; + border: 1px solid var(--panel-content-borderColor); +} + +.flowContainer__flowItemInner { + display: flex; + flex-direction: column; + gap: 10px; width: 100%; max-width: 250px; - padding: 7px; - border: 1px solid var(--table-border-color); + border: 1px solid var(--panel-content-borderColor); + + label { + display: flex; + justify-content: center; + padding: 10px 0 5px; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 18px; + } + + &.initialForm, &.finalForm { + border-color: var(--card-full-background-color-3); + background-color: var(--card-full-background-color-3); + + label { + color: white; + } + } } \ No newline at end of file diff --git a/src/assets/scss/theme.scss b/src/assets/scss/theme.scss index 2bd1bad..42d7cfb 100644 --- a/src/assets/scss/theme.scss +++ b/src/assets/scss/theme.scss @@ -21,6 +21,7 @@ --message-warning-color: #cc8925; --message-info-background: rgba(183, 183, 183, 0.7); --message-info-color: #3B82F6; + --panel-content-borderColor: #E5E7EB; --card-full-background-color-2: #EEC137; --card-full-background-color-3: #FA8E42; diff --git a/src/components/FlowBuilder/index.js b/src/components/FlowBuilder/index.js index fdb2d7f..3bf66de 100644 --- a/src/components/FlowBuilder/index.js +++ b/src/components/FlowBuilder/index.js @@ -8,7 +8,7 @@ import { isEmpty } from 'ramda'; import '@xyflow/react/dist/style.css'; // store -import { useStore, storeSet, storeGet } from '../../store'; +import { useStore, storeSet } from '../../store'; // nodes import NodeInitialForm from './components/NodeInitialForm'; diff --git a/src/components/FormField/components/DatepickerRange/index.js b/src/components/FormField/components/DatepickerRange/index.js index 00d5394..5c9fa75 100644 --- a/src/components/FormField/components/DatepickerRange/index.js +++ b/src/components/FormField/components/DatepickerRange/index.js @@ -1,6 +1,6 @@ import React from 'react'; import { classNames } from 'primereact/utils'; -import { isEmpty, isNil } from 'ramda'; +import { isNil } from 'ramda'; // components import { Controller } from 'react-hook-form'; diff --git a/src/pages/BandoApplicationPreview/index.js b/src/pages/BandoApplicationPreview/index.js index 74b79d4..1fc5493 100644 --- a/src/pages/BandoApplicationPreview/index.js +++ b/src/pages/BandoApplicationPreview/index.js @@ -39,7 +39,7 @@ const BandoApplicationPreview = () => { const [formData, setFormData] = useState([]); const [formInitialData, setFormInitialData] = useState(null); const [bandoTitle, setBandoTitle] = useState(''); - const [bandoId, setBandoId] = useState(0); + const [, setBandoId] = useState(0); const [formId, setFormId] = useState(''); const [totalSteps, setTotalSteps] = useState(0); const [applicationStatus, setApplicationStatus] = useState(''); diff --git a/src/pages/BandoFlowEdit/index.js b/src/pages/BandoFlowEdit/index.js index 5efc13a..f730bab 100644 --- a/src/pages/BandoFlowEdit/index.js +++ b/src/pages/BandoFlowEdit/index.js @@ -15,7 +15,6 @@ import set404FromErrorResponse from '../../helpers/set404FromErrorResponse'; // components import { Button } from 'primereact/button'; import { Dropdown } from 'primereact/dropdown'; -import FlowBuilder from '../../components/FlowBuilder'; import { Messages } from 'primereact/messages'; import FlowService from '../../service/flow-service'; import { confirmPopup, ConfirmPopup } from 'primereact/confirmpopup'; @@ -223,6 +222,10 @@ const BandoFlowEdit = () => { const initialFormObj = head(flowForms.filter(o => String(o.id) === String(initialForm))); let finalFormObj = null; + if (!initialFormObj) { + return; + } + const relevantFields = initialFormObj ? initialFormObj.content .filter(o => ['radio', 'select'].includes(o.name)) @@ -323,60 +326,6 @@ const BandoFlowEdit = () => {
-
- {forms.length >= 2 && isFlowAllowed - ?
-
-
- - updateInitialForm(e.value)} - optionDisabled={(opt) => finalForm === opt.value || isEmpty(opt.value)} - options={formOptions} - optionLabel="label" - optionValue="value" - placeholder={__('Scegli il form', 'gepafin')}/> - {initialForm && forms.length > 2 && mainFieldOptions - ?
- - setMainField(e.value)} - optionDisabled={(opt) => isEmpty(opt.value)} - options={mainFieldOptions} - optionLabel="label" - optionValue="value" - placeholder={__('Scegli il campo', 'gepafin')}/> -
: null} -
-
- - {forms.length >= 2 && initialForm - ?
-
- - setFinalForm(e.value)} - optionDisabled={(opt) => initialForm === opt.value || isEmpty(opt.value)} - options={formOptions} - optionLabel="label" - optionValue="value" - placeholder={__('Scegli il form', 'gepafin')}/> -
-
: null} -
: null} -
- -
- {/*
@@ -440,11 +389,61 @@ const BandoFlowEdit = () => {
- {/*{forms.length >= 2 && isFlowAllowed - ? : null}*/} + + {forms.length >= 2 && isFlowAllowed + ?
+
+
+
+ + updateInitialForm(e.value)} + optionDisabled={(opt) => finalForm === opt.value || isEmpty(opt.value)} + options={formOptions} + optionLabel="label" + optionValue="value" + placeholder={__('Scegli il form', 'gepafin')}/> + {initialForm && forms.length > 2 && mainFieldOptions + ?
+ + setMainField(e.value)} + optionDisabled={(opt) => isEmpty(opt.value)} + options={mainFieldOptions} + optionLabel="label" + optionValue="value" + placeholder={__('Scegli il campo', 'gepafin')}/> +
: null} +
+
+
+ + {forms.length >= 2 && initialForm + ?
+
+
+ + setFinalForm(e.value)} + optionDisabled={(opt) => initialForm === opt.value || isEmpty(opt.value)} + options={formOptions} + optionLabel="label" + optionValue="value" + placeholder={__('Scegli il form', 'gepafin')}/> +
+
+
: null} +
: null}
diff --git a/src/pages/DomandaEditPreInstructor/components/ArchiveDocument/index.js b/src/pages/DomandaEditPreInstructor/components/ArchiveDocument/index.js index 4a093dd..e0124e5 100644 --- a/src/pages/DomandaEditPreInstructor/components/ArchiveDocument/index.js +++ b/src/pages/DomandaEditPreInstructor/components/ArchiveDocument/index.js @@ -50,7 +50,8 @@ const ArchiveDocument = ({ ndg = '', fileId = 0 }) => { } const submitData = () => { - console.log('submitData', modalData) + console.log('submitData', modalData); + //setLoading(true); } useEffect(() => { diff --git a/src/pages/DomandaEditPreInstructor/index.js b/src/pages/DomandaEditPreInstructor/index.js index ad8e506..c5ef10f 100644 --- a/src/pages/DomandaEditPreInstructor/index.js +++ b/src/pages/DomandaEditPreInstructor/index.js @@ -181,6 +181,7 @@ const DomandaEditPreInstructor = () => { motivation } + setLoading(true); ApplicationEvaluationService.updateEvaluation(data.assignedApplicationId, formData, updateStatusCallback, errUpdateStatusCallback); } @@ -194,6 +195,7 @@ const DomandaEditPreInstructor = () => { motivation } + setLoading(true); ApplicationEvaluationService.updateEvaluation(data.assignedApplicationId, formData, updateStatusCallback, errUpdateStatusCallback); } @@ -207,7 +209,7 @@ const DomandaEditPreInstructor = () => { }); } } - storeSet.main.unsetAsyncRequest(); + setLoading(false); } const errUpdateStatusCallback = (data) => { @@ -219,7 +221,7 @@ const DomandaEditPreInstructor = () => { }); } set404FromErrorResponse(data); - storeSet.main.unsetAsyncRequest(); + setLoading(false); } const displayCriterionData = (id) => { @@ -377,6 +379,7 @@ const DomandaEditPreInstructor = () => { && !isEmpty(appointmentData.duration) && appointmentData.duration !== 0 && appointmentData.amount !== 0 ) { console.log(appointmentData); + //setLoading(true); } } From e438447badd2eeed4194ebb182b299bb76cfc811 Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Mon, 2 Dec 2024 17:27:04 +0100 Subject: [PATCH 04/11] - saving progress; --- package.json | 2 +- src/assets/scss/components/flowBuilder.scss | 42 +++-- src/pages/BandoFlowEdit/index.js | 182 +++++++++++++++----- 3 files changed, 169 insertions(+), 57 deletions(-) diff --git a/package.json b/package.json index 9baab70..145700c 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "html-react-parser": "5.1.18", "jwt-decode": "4.0.0", "klona": "2.0.6", - "leader-line": "1.0.7", + "leader-line-new": "1.1.9", "luxon": "3.5.0", "object-path-immutable": "4.1.2", "primeicons": "7.0.0", diff --git a/src/assets/scss/components/flowBuilder.scss b/src/assets/scss/components/flowBuilder.scss index 98c6d03..4689c85 100644 --- a/src/assets/scss/components/flowBuilder.scss +++ b/src/assets/scss/components/flowBuilder.scss @@ -39,22 +39,39 @@ flex-direction: column; gap: 60px; width: 100%; + overflow-x: auto; } .flowContainer__level { display: flex; justify-content: center; gap: 20px; - width: 100%; + padding: 10px 0; + min-height: 240px; + margin: 0 auto; } .flowContainer__flowItem { display: flex; flex-direction: column; - width: 100%; - max-width: 280px; + width: 280px; + min-width: 280px; padding: 15px; border: 1px solid var(--panel-content-borderColor); + + .flowContainer__flowItemInner > label { + border-color: #757575; + background-color: #757575; + color: white; + } + + &.initialForm, &.finalForm { + .flowContainer__flowItemInner > label { + border-color: var(--card-full-background-color-3); + background-color: var(--card-full-background-color-3); + color: white; + } + } } .flowContainer__flowItemInner { @@ -65,22 +82,27 @@ max-width: 250px; border: 1px solid var(--panel-content-borderColor); - label { + > label { display: flex; justify-content: center; - padding: 10px 0 5px; + padding: 10px 0; font-size: 14px; font-style: normal; font-weight: 400; line-height: 18px; } +} - &.initialForm, &.finalForm { - border-color: var(--card-full-background-color-3); - background-color: var(--card-full-background-color-3); - +.flowContainer__flowItemContent { + padding: 5px; + display: flex; + flex-direction: column; + + .appForm__field { + margin-top: 10px; + label { - color: white; + text-align: center; } } } \ No newline at end of file diff --git a/src/pages/BandoFlowEdit/index.js b/src/pages/BandoFlowEdit/index.js index f730bab..4c4cb10 100644 --- a/src/pages/BandoFlowEdit/index.js +++ b/src/pages/BandoFlowEdit/index.js @@ -2,6 +2,7 @@ import React, { useEffect, useState, useCallback, useRef } from 'react'; import { __, sprintf } from '@wordpress/i18n'; import { useNavigate, useParams } from 'react-router-dom'; import { isEmpty, head } from 'ramda'; +import LeaderLine from 'leader-line-new'; // store import { storeGet, storeSet, useStore } from '../../store'; @@ -35,6 +36,8 @@ const BandoFlowEdit = () => { const [finalForm, setFinalForm] = useState(0); const flowMsgs = useRef(null); const toast = useRef(null); + const [lines, setLines] = useState([]); + const itemRefs = useRef({}); const getBandoId = () => { const parsed = parseInt(id) @@ -166,6 +169,10 @@ const BandoFlowEdit = () => { storeSet.main.unsetAsyncRequest(); } + const setItemRef = (id, element) => { + itemRefs.current[id] = element; + }; + useEffect(() => { const flowForms = storeGet.main.flowForms(); const form = head(flowForms.filter(o => String(o.id) === String(initialForm))) @@ -179,7 +186,7 @@ const BandoFlowEdit = () => { if (field) { options = head(field.settings.filter(o => o.name === 'options')); } - console.log('isFlowAllowed', initialForm, mainField, field) + //console.log('isFlowAllowed', initialForm, mainField, field) if (forms.length === 2 || (field && options.value && options.value.length === flowForms.length - 2)) { setIsFlowAllowed(true); const data = { @@ -253,7 +260,7 @@ const BandoFlowEdit = () => { if (flowForms.length === 2) { setIsFlowAllowed(true); finalFormObj = head(flowForms.filter(o => String(o.id) !== String(initialForm))); - console.log('finalFormObj', finalFormObj); + //console.log('finalFormObj', finalFormObj); setFinalForm(finalFormObj.id); const flowItem2 = { formId: String(finalFormObj.id), @@ -269,14 +276,74 @@ const BandoFlowEdit = () => { type: 'smoothstep' } storeSet.main.flowEdges([edge]); - } else if (flowForms.length > 2) { - } + + /*lines.forEach(line => line.remove()); + + // Create new lines between consecutive items + const newLines = []; + console.log('itemRefs.current', itemRefs.current); + for (let i = 0; i < forms.length - 1; i++) { + const startElement = itemRefs.current[forms[i].id]; + const endElement = itemRefs.current[forms[i + 1].id]; + console.log('startElement', startElement, endElement); + if (startElement && endElement) { + const line = new LeaderLine( + startElement, + endElement, + { + color: '#2196F3', + size: 1 + } + ); + newLines.push(line); + } + } + + setLines(newLines);*/ }, [initialForm]); useEffect(() => { + const flowForms = storeGet.main.flowForms(); + const finalFormObj = head(flowForms.filter(o => String(o.id) === String(finalForm))); - }, [finalForm]) + if (finalFormObj) { + const flowItem = { + formId: String(finalFormObj.id), + chosenField: '', + chosenValue: '' + } + storeSet.main.addFlowData(flowItem); + + const initialFormObj = head(flowForms.filter(o => String(o.id) === String(initialForm))); + const edge = { + id: `${initialFormObj.id}->${finalFormObj.id}`, + source: String(initialFormObj.id), + target: finalFormObj.id, + type: 'smoothstep' + } + storeSet.main.flowEdges([edge]); + + if (flowForms.length > 2) { + flowForms + .filter(o => ![initialForm, finalForm].includes(o.id)) + .map(o => { + const flowItem = { + formId: String(o.id), + chosenField: '', + chosenValue: '' + } + storeSet.main.addFlowData(flowItem); + }); + } + } + }, [finalForm]); + + useEffect(() => { + return () => { + lines.forEach(line => line.remove()); + }; + }, [lines]); useEffect(() => { const bandoId = getBandoId(); @@ -314,6 +381,9 @@ const BandoFlowEdit = () => { storeSet.main.flowEdges([]); } }, []); + + const levelForms = forms.filter(o => o.id !== initialForm && o.id !== finalForm); + console.log('isFlowAllowed', isFlowAllowed, flowData, flowEdges) return (
@@ -390,59 +460,79 @@ const BandoFlowEdit = () => {
- {forms.length >= 2 && isFlowAllowed + {forms.length >= 2 ?
-
-
+
initialForm ? setItemRef(initialForm, el) : null}> +
- updateInitialForm(e.value)} - optionDisabled={(opt) => finalForm === opt.value || isEmpty(opt.value)} - options={formOptions} - optionLabel="label" - optionValue="value" - placeholder={__('Scegli il form', 'gepafin')}/> - {initialForm && forms.length > 2 && mainFieldOptions - ?
- - setMainField(e.value)} - optionDisabled={(opt) => isEmpty(opt.value)} - options={mainFieldOptions} - optionLabel="label" - optionValue="value" - placeholder={__('Scegli il campo', 'gepafin')}/> -
: null} -
-
-
- - {forms.length >= 2 && initialForm - ?
-
-
- +
setFinalForm(e.value)} - optionDisabled={(opt) => initialForm === opt.value || isEmpty(opt.value)} + value={initialForm} + onChange={(e) => updateInitialForm(e.value)} + optionDisabled={(opt) => finalForm === opt.value || isEmpty(opt.value)} options={formOptions} optionLabel="label" optionValue="value" placeholder={__('Scegli il form', 'gepafin')}/> + {initialForm && forms.length > 2 && mainFieldOptions + ?
+ + setMainField(e.value)} + optionDisabled={(opt) => isEmpty(opt.value)} + options={mainFieldOptions} + optionLabel="label" + optionValue="value" + placeholder={__('Scegli il campo', 'gepafin')}/> +
: null}
+
+
+ + {initialForm && finalForm && levelForms.length + ?
+ {levelForms.map(o =>
setItemRef(o.id, el)} + className="flowContainer__flowItem levelForms" > +
+ +
+
+
+
)}
: null} + + {forms.length >= 2 && initialForm + ?
+
finalForm ? setItemRef(finalForm, el) : null}> +
+ +
+ setFinalForm(e.value)} + optionDisabled={(opt) => initialForm === opt.value || isEmpty(opt.value)} + options={formOptions} + optionLabel="label" + optionValue="value" + placeholder={__('Scegli il form', 'gepafin')}/> +
+
+
+
+ : null}
: null}
From ad3d4ade5fc8f60cfb0130c8799a3af277e60f5b Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Fri, 13 Dec 2024 08:13:54 +0100 Subject: [PATCH 05/11] - saving progress; --- src/assets/scss/components/flowBuilder.scss | 6 +- src/pages/BandoFlowEdit/index.js | 105 +++++++++++++++++--- 2 files changed, 94 insertions(+), 17 deletions(-) diff --git a/src/assets/scss/components/flowBuilder.scss b/src/assets/scss/components/flowBuilder.scss index 4689c85..c66987e 100644 --- a/src/assets/scss/components/flowBuilder.scss +++ b/src/assets/scss/components/flowBuilder.scss @@ -39,6 +39,7 @@ flex-direction: column; gap: 60px; width: 100%; + margin-top: 30px; overflow-x: auto; } @@ -47,7 +48,7 @@ justify-content: center; gap: 20px; padding: 10px 0; - min-height: 240px; + /*min-height: 240px;*/ margin: 0 auto; } @@ -85,11 +86,12 @@ > label { display: flex; justify-content: center; - padding: 10px 0; + padding: 10px; font-size: 14px; font-style: normal; font-weight: 400; line-height: 18px; + text-align: center; } } diff --git a/src/pages/BandoFlowEdit/index.js b/src/pages/BandoFlowEdit/index.js index 4c4cb10..d317aff 100644 --- a/src/pages/BandoFlowEdit/index.js +++ b/src/pages/BandoFlowEdit/index.js @@ -179,6 +179,72 @@ const BandoFlowEdit = () => { const field = form ? head(form.content.filter(o => o.id === mainField)) : null; let options = []; + if (field) { + options = head(field.settings.filter(o => o.name === 'options')); + } + + if (field && options.value && options.value.length === flowForms.length - 2) { + setIsFlowAllowed(true); + const data = { + formId: String(initialForm), + chosenField: mainField, + chosenValue: '' + } + storeSet.main.addFlowData(data); + } else { + setIsFlowAllowed(false); + let msg = 'Non è possibile creare il flusso. Il campo principale deve avere esattamente %s opzioni.'; + + if (flowForms.length - 2 === 1) { + msg = 'Non è possibile creare il flusso. Il campo principale deve avere esattamente %s opzione.'; + } + + if (flowMsgs.current && !isEmpty(mainField)) { + flowMsgs.current.clear(); + flowMsgs.current.show([ + { + id: '1', + sticky: true, severity: 'error', summary: '', + detail: sprintf( + __(msg, 'gepafin'), + flowForms.length - 2 + ), + closable: false + } + ]); + } + } + }, [mainField]); + + useEffect(() => { + setMainField(''); + setMainFieldOptions([]); + const flowForms = storeGet.main.flowForms(); + const form = head(flowForms.filter(o => String(o.id) === String(initialForm))) + const relevantFields = form + ? form.content + .filter(o => ['radio', 'select'].includes(o.name)) + .map(o => { + const label = head(o.settings.filter(o => o.name === 'label')); + return { value: o.id, label: label ? label.value : o.label }; + }) + : []; + setMainFieldOptions([ + {label: isEmpty(relevantFields) ? __('Nessun scelta', 'gepafin') : '', value: ''}, + ...relevantFields] + ); + + if (flowForms.length === 2) { + setIsFlowAllowed(true) + } + }, [initialForm]); + + /*useEffect(() => { + const flowForms = storeGet.main.flowForms(); + const form = head(flowForms.filter(o => String(o.id) === String(initialForm))) + const field = form ? head(form.content.filter(o => o.id === mainField)) : null; + let options = []; + if (initialForm === 0) { return; } @@ -278,7 +344,7 @@ const BandoFlowEdit = () => { storeSet.main.flowEdges([edge]); } - /*lines.forEach(line => line.remove()); + /!*lines.forEach(line => line.remove()); // Create new lines between consecutive items const newLines = []; @@ -300,7 +366,7 @@ const BandoFlowEdit = () => { } } - setLines(newLines);*/ + setLines(newLines);*!/ }, [initialForm]); useEffect(() => { @@ -343,7 +409,7 @@ const BandoFlowEdit = () => { return () => { lines.forEach(line => line.remove()); }; - }, [lines]); + }, [lines]);*/ useEffect(() => { const bandoId = getBandoId(); @@ -382,9 +448,12 @@ const BandoFlowEdit = () => { } }, []); + const initialFormData = head(forms.filter(o => o.id === initialForm)); + const finalFormData = head(forms.filter(o => o.id === finalForm)); const levelForms = forms.filter(o => o.id !== initialForm && o.id !== finalForm); - console.log('isFlowAllowed', isFlowAllowed, flowData, flowEdges) + console.log('isFlowAllowed', isFlowAllowed, flowData, flowEdges); + console.log('mainField', mainField) return (
@@ -396,7 +465,7 @@ const BandoFlowEdit = () => {
- {/*
+
@@ -442,7 +511,7 @@ const BandoFlowEdit = () => { placeholder={__('Scegli il form', 'gepafin')}/>
: null}
-
*/} +
{/*
@@ -460,14 +529,17 @@ const BandoFlowEdit = () => {
- {forms.length >= 2 + {forms.length >= 2 && initialForm && finalForm ?
initialForm ? setItemRef(initialForm, el) : null}>
- -
+ + {/*
{ optionValue="value" placeholder={__('Scegli il campo', 'gepafin')}/>
: null} -
+
*/}
- {initialForm && finalForm && levelForms.length + {levelForms.length && initialForm && finalForm ?
{levelForms.map(o =>
setItemRef(o.id, el)} @@ -511,13 +583,16 @@ const BandoFlowEdit = () => {
)}
: null} - {forms.length >= 2 && initialForm + {forms.length >= 2 && initialForm && finalForm ?
finalForm ? setItemRef(finalForm, el) : null}>
- -
+ + {/*
{ optionLabel="label" optionValue="value" placeholder={__('Scegli il form', 'gepafin')}/> -
+
*/}
From eadb5959b5aeadca4d4e9c15dfb9aeeba1d42b23 Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Thu, 19 Dec 2024 12:42:30 +0100 Subject: [PATCH 06/11] - saving progress; --- src/assets/scss/components/flowBuilder.scss | 18 +- src/pages/BandoFlowEdit/index.js | 450 +++++++++----------- 2 files changed, 203 insertions(+), 265 deletions(-) diff --git a/src/assets/scss/components/flowBuilder.scss b/src/assets/scss/components/flowBuilder.scss index c66987e..986665b 100644 --- a/src/assets/scss/components/flowBuilder.scss +++ b/src/assets/scss/components/flowBuilder.scss @@ -33,23 +33,26 @@ text-align: center; } } - .flowContainer { + width: 100%; + overflow-x: auto; + margin-top: 30px; +} + +.flowContainerInner { + position: relative; display: flex; flex-direction: column; - gap: 60px; - width: 100%; - margin-top: 30px; - overflow-x: auto; + width: max-content; } .flowContainer__level { display: flex; justify-content: center; gap: 20px; - padding: 10px 0; + padding: 0 0 60px; /*min-height: 240px;*/ - margin: 0 auto; + /*margin: 0 auto;*/ } .flowContainer__flowItem { @@ -82,6 +85,7 @@ width: 100%; max-width: 250px; border: 1px solid var(--panel-content-borderColor); + height: 100%; > label { display: flex; diff --git a/src/pages/BandoFlowEdit/index.js b/src/pages/BandoFlowEdit/index.js index d317aff..5a1b6a0 100644 --- a/src/pages/BandoFlowEdit/index.js +++ b/src/pages/BandoFlowEdit/index.js @@ -1,14 +1,14 @@ import React, { useEffect, useState, useCallback, useRef } from 'react'; import { __, sprintf } from '@wordpress/i18n'; import { useNavigate, useParams } from 'react-router-dom'; -import { isEmpty, head } from 'ramda'; -import LeaderLine from 'leader-line-new'; +import { isEmpty, head, pathOr } from 'ramda'; // store import { storeGet, storeSet, useStore } from '../../store'; // api import FormsService from '../../service/forms-service'; +import FlowService from '../../service/flow-service'; // tools import set404FromErrorResponse from '../../helpers/set404FromErrorResponse'; @@ -17,7 +17,6 @@ import set404FromErrorResponse from '../../helpers/set404FromErrorResponse'; import { Button } from 'primereact/button'; import { Dropdown } from 'primereact/dropdown'; import { Messages } from 'primereact/messages'; -import FlowService from '../../service/flow-service'; import { confirmPopup, ConfirmPopup } from 'primereact/confirmpopup'; import { Toast } from 'primereact/toast'; @@ -29,8 +28,9 @@ const BandoFlowEdit = () => { const flowEdges = useStore().main.flowEdges(); const [formOptions, setFormOptions] = useState([]); const [initialForm, setInitialForm] = useState(0); - const [mainFieldOptions, setMainFieldOptions] = useState([]); - const [mainField, setMainField] = useState(''); + const [chosenMainFieldOptions, setChosenMainFieldOptions] = useState([]); + const [chosenMainField, setChosenMainField] = useState(''); + const [mainFieldSuboptions, setMainFieldSubOptions] = useState([]); const [bandoStatus, setBandoStatus] = useState(''); const [isFlowAllowed, setIsFlowAllowed] = useState(true); const [finalForm, setFinalForm] = useState(0); @@ -38,6 +38,7 @@ const BandoFlowEdit = () => { const toast = useRef(null); const [lines, setLines] = useState([]); const itemRefs = useRef({}); + const itemContainerRef = useRef(null); const getBandoId = () => { const parsed = parseInt(id) @@ -70,27 +71,69 @@ const BandoFlowEdit = () => { storeSet.main.flowData([]); storeSet.main.flowEdges([]); setInitialForm(0); - setMainFieldOptions([]); - setMainField(''); + setChosenMainFieldOptions([]); + setChosenMainField(''); setIsFlowAllowed(false); setFinalForm(0); + lines.forEach(line => line.remove()); } const updateInitialForm = (value) => { - setInitialForm(value); - if (forms.length === 2) { - const finalForm = head(forms.filter(o => o.id !== value)); - if (finalForm) { - setFinalForm(finalForm.id); + if (value !== finalForm) { + setInitialForm(value); + if (forms.length === 2) { + const finalForm = head(forms.filter(o => o.id !== value)); + if (finalForm) { + setFinalForm(finalForm.id); + } } } } + const updateFinalForm = (value) => { + if (value !== initialForm) { + setFinalForm(value); + } + } + + const updateItermediateForm = (value, formId) => { + const isUsed = flowData.map(o => o.chosenValue).filter(v => !isEmpty(v)).includes(value); + if (!isUsed) { + const data = { + formId: parseInt(formId), + chosenField: '', + chosenValue: value + } + storeSet.main.addFlowData(data); + } + } + + const displayChosenOptionValue = (id) => { + const suboptionId = pathOr('', ['chosenValue'], head(flowData.filter(f => parseInt(f.formId) === parseInt(id)))); + return pathOr('', ['label'], head(mainFieldSuboptions.filter(o => o.name === suboptionId))); + } + + const disabledOptionForIntermediateForm = (opt) => { + return flowData.map(o => o.chosenValue).filter(v => !isEmpty(v)).includes(opt.name); + } + const shoudDisableSaving = useCallback(() => { - return forms.length > 2 - ? isEmpty(flowData) || isEmpty(flowEdges) || isEmpty(initialForm) || isEmpty(finalForm) - || flowData.length < forms.length - 1 || 'PUBLISH' === bandoStatus - : isEmpty(flowEdges) || isEmpty(initialForm) || 'PUBLISH' === bandoStatus; + const flowForms = storeGet.main.flowForms(); + const nonEmptyFlowItems = flowData.filter(o => isEmpty(o.chosenField)).filter(o => !isEmpty(o.chosenValue)); + + /*if (flowForms.length > 2) { + console.log('disable BTN:', nonEmptyFlowItems.length !== flowForms.length - 2, isEmpty(flowEdges), 'PUBLISH' === bandoStatus, + isEmpty(initialForm), isEmpty(finalForm)); + } else { + console.log('disable BTN:', nonEmptyFlowItems.length !== 1, isEmpty(flowEdges), 'PUBLISH' === bandoStatus, + isEmpty(initialForm), isEmpty(finalForm)); + }*/ + + return flowForms.length > 2 + ? nonEmptyFlowItems.length !== flowForms.length - 2 || isEmpty(flowEdges) || 'PUBLISH' === bandoStatus + || isEmpty(initialForm) || isEmpty(finalForm) + : nonEmptyFlowItems.length !== 1 || isEmpty(flowEdges) || 'PUBLISH' === bandoStatus + || isEmpty(initialForm) || isEmpty(finalForm); }, [flowData, flowEdges]); const doSave = () => { @@ -134,7 +177,7 @@ const BandoFlowEdit = () => { setFormOptions([{ label: '', value: '' }, ...formOptions]); const bandoId = getBandoId(); storeSet.main.setAsyncRequest(); - FlowService.getFlow(bandoId, getFlowCallback, errGetFlowCallback); + FlowService.getFlow(bandoId, (resp) => getFlowCallback(resp, data.data), errGetFlowCallback); } storeSet.main.unsetAsyncRequest(); } @@ -144,7 +187,7 @@ const BandoFlowEdit = () => { storeSet.main.unsetAsyncRequest(); } - const getFlowCallback = (data) => { + const getFlowCallback = (data, forms) => { if (data.status === 'SUCCESS' && data.data) { storeSet.main.flowData(data.data.flowData); storeSet.main.flowEdges(data.data.flowEdges); @@ -153,12 +196,27 @@ const BandoFlowEdit = () => { setBandoStatus(data.data.callStatus); const chosenFieldItem = head(data.data.flowData.filter(o => !isEmpty(o.chosenField))); if (chosenFieldItem) { - setMainField(chosenFieldItem.chosenField); + setChosenMainField(chosenFieldItem.chosenField); + const form = head(forms.filter(o => o.id === data.data.initialForm)); + const relevantFields = form + ? form.content + .filter(o => ['radio', 'select'].includes(o.name)) + .map(o => { + const label = head(o.settings.filter(o => o.name === 'label')); + return { value: o.id, label: label ? label.value : o.label }; + }) + : []; + setChosenMainFieldOptions(relevantFields); + const field = form ? head(form.content.filter(o => o.id === chosenFieldItem.chosenField)) : null; + if (field) { + const options = head(field.settings.filter(o => o.name === 'options')); + setMainFieldSubOptions(options.value); + } } const flowDataItem = head(data.data.flowData.filter(o => !isEmpty(o.chosenField))); if (flowDataItem) { - setMainField(flowDataItem.chosenField); + setChosenMainField(flowDataItem.chosenField); } } storeSet.main.unsetAsyncRequest(); @@ -173,10 +231,54 @@ const BandoFlowEdit = () => { itemRefs.current[id] = element; }; + const buildFlowEdges = () => { + if (!isEmpty(initialForm) && !isEmpty(finalForm)) { + const flowForms = storeGet.main.flowForms(); + let edges = []; + // eslint-disable-next-line + flowForms.map(o => { + const formId = String(o.id); + + if (formId !== String(initialForm) && formId !== String(finalForm)) { + edges.push({ + id: `${initialForm}->${formId}`, + source: String(initialForm), + target: formId, + type: 'smoothstep' + }); + } + if (formId !== String(initialForm) && formId !== String(finalForm) && String(finalForm) !== '0') { + edges.push({ + id: `${formId}->${finalForm}`, + source: formId, + target: String(finalForm), + type: 'smoothstep' + }); + } + }); + + if (flowForms.length === 2 && initialForm && finalForm) { + edges.push({ + id: `${initialForm}->${finalForm}`, + source: String(initialForm), + target: String(finalForm), + type: 'smoothstep' + }); + } + + //console.log('edges', edges); + storeSet.main.flowEdges(edges); + } + } + useEffect(() => { + if ('PUBLISH' === bandoStatus) { + return; + } + storeSet.main.flowData([]); const flowForms = storeGet.main.flowForms(); const form = head(flowForms.filter(o => String(o.id) === String(initialForm))) - const field = form ? head(form.content.filter(o => o.id === mainField)) : null; + const field = form ? head(form.content.filter(o => o.id === chosenMainField)) : null; let options = []; if (field) { @@ -185,21 +287,30 @@ const BandoFlowEdit = () => { if (field && options.value && options.value.length === flowForms.length - 2) { setIsFlowAllowed(true); + const suboptions = [ + { label: __('Nessun scelta', 'gepafin'), name: '' }, + ...options.value + ] + setMainFieldSubOptions(suboptions); const data = { - formId: String(initialForm), - chosenField: mainField, + formId: parseInt(initialForm), + chosenField: chosenMainField, chosenValue: '' } storeSet.main.addFlowData(data); + if (flowMsgs.current && !isEmpty(chosenMainField)) { + flowMsgs.current.clear(); + } } else { setIsFlowAllowed(false); + setFinalForm(''); let msg = 'Non è possibile creare il flusso. Il campo principale deve avere esattamente %s opzioni.'; if (flowForms.length - 2 === 1) { - msg = 'Non è possibile creare il flusso. Il campo principale deve avere esattamente %s opzione.'; + msg = 'Non è possibile creare il flusso. Il campo principale deve avere esattamente %s opzioni.'; } - if (flowMsgs.current && !isEmpty(mainField)) { + if (flowMsgs.current && !isEmpty(chosenMainField)) { flowMsgs.current.clear(); flowMsgs.current.show([ { @@ -214,11 +325,16 @@ const BandoFlowEdit = () => { ]); } } - }, [mainField]); + }, [chosenMainField]); useEffect(() => { - setMainField(''); - setMainFieldOptions([]); + if ('PUBLISH' === bandoStatus) { + return; + } + storeSet.main.flowData([]); + setChosenMainField(''); + setMainFieldSubOptions([]); + setChosenMainFieldOptions([]); const flowForms = storeGet.main.flowForms(); const form = head(flowForms.filter(o => String(o.id) === String(initialForm))) const relevantFields = form @@ -229,188 +345,27 @@ const BandoFlowEdit = () => { return { value: o.id, label: label ? label.value : o.label }; }) : []; - setMainFieldOptions([ - {label: isEmpty(relevantFields) ? __('Nessun scelta', 'gepafin') : '', value: ''}, + setChosenMainFieldOptions([ + { label: isEmpty(relevantFields) ? __('Nessun scelta', 'gepafin') : '', value: '' }, ...relevantFields] ); if (flowForms.length === 2) { setIsFlowAllowed(true) } + + buildFlowEdges(); }, [initialForm]); - /*useEffect(() => { - const flowForms = storeGet.main.flowForms(); - const form = head(flowForms.filter(o => String(o.id) === String(initialForm))) - const field = form ? head(form.content.filter(o => o.id === mainField)) : null; - let options = []; - - if (initialForm === 0) { - return; - } - - if (field) { - options = head(field.settings.filter(o => o.name === 'options')); - } - //console.log('isFlowAllowed', initialForm, mainField, field) - if (forms.length === 2 || (field && options.value && options.value.length === flowForms.length - 2)) { - setIsFlowAllowed(true); - const data = { - formId: String(initialForm), - chosenField: mainField, - chosenValue: '' - } - storeSet.main.addFlowData(data); + useEffect(() => { + if ('PUBLISH' === bandoStatus) { } else { - setIsFlowAllowed(false); - let msg = 'Non è possibile creare il flusso. Il campo principale deve avere esattamente %s opzioni.'; - - if (flowForms.length - 2 === 1) { - msg = 'Non è possibile creare il flusso. Il campo principale deve avere esattamente %s opzione.'; - } - - if (flowMsgs.current && !isEmpty(mainField)) { - flowMsgs.current.clear(); - flowMsgs.current.show([ - { - id: '1', - sticky: true, severity: 'error', summary: '', - detail: sprintf( - __(msg, 'gepafin'), - flowForms.length - 2 - ), - closable: false - } - ]); - } - } - }, [mainField]); - - useEffect(() => { - setMainField(''); - setMainFieldOptions([]); - storeSet.main.flowData([]); - - const flowForms = storeGet.main.flowForms(); - const initialFormObj = head(flowForms.filter(o => String(o.id) === String(initialForm))); - let finalFormObj = null; - - if (!initialFormObj) { - return; - } - - const relevantFields = initialFormObj - ? initialFormObj.content - .filter(o => ['radio', 'select'].includes(o.name)) - .map(o => { - const label = head(o.settings.filter(o => o.name === 'label')); - return { value: o.id, label: label ? label.value : o.label }; - }) - : []; - setMainFieldOptions([ - { label: isEmpty(relevantFields) ? __('Nessun scelta', 'gepafin') : '', value: '' }, - ...relevantFields] - ); - - if (finalForm) { - finalFormObj = head(flowForms.filter(o => String(o.id) !== String(finalForm))); - } - - const flowItem1 = { - formId: String(initialFormObj.id), - chosenField: '', - chosenValue: '' - } - storeSet.main.addFlowData(flowItem1); - - if (flowForms.length === 2) { - setIsFlowAllowed(true); - finalFormObj = head(flowForms.filter(o => String(o.id) !== String(initialForm))); - //console.log('finalFormObj', finalFormObj); - setFinalForm(finalFormObj.id); - const flowItem2 = { - formId: String(finalFormObj.id), - chosenField: '', - chosenValue: '' - } - storeSet.main.addFlowData(flowItem2); - - const edge = { - id: `${initialFormObj.id}->${finalFormObj.id}`, - source: String(initialFormObj.id), - target: finalFormObj.id, - type: 'smoothstep' - } - storeSet.main.flowEdges([edge]); - } - - /!*lines.forEach(line => line.remove()); - - // Create new lines between consecutive items - const newLines = []; - console.log('itemRefs.current', itemRefs.current); - for (let i = 0; i < forms.length - 1; i++) { - const startElement = itemRefs.current[forms[i].id]; - const endElement = itemRefs.current[forms[i + 1].id]; - console.log('startElement', startElement, endElement); - if (startElement && endElement) { - const line = new LeaderLine( - startElement, - endElement, - { - color: '#2196F3', - size: 1 - } - ); - newLines.push(line); - } - } - - setLines(newLines);*!/ - }, [initialForm]); - - useEffect(() => { - const flowForms = storeGet.main.flowForms(); - const finalFormObj = head(flowForms.filter(o => String(o.id) === String(finalForm))); - - if (finalFormObj) { - const flowItem = { - formId: String(finalFormObj.id), - chosenField: '', - chosenValue: '' - } - storeSet.main.addFlowData(flowItem); - - const initialFormObj = head(flowForms.filter(o => String(o.id) === String(initialForm))); - const edge = { - id: `${initialFormObj.id}->${finalFormObj.id}`, - source: String(initialFormObj.id), - target: finalFormObj.id, - type: 'smoothstep' - } - storeSet.main.flowEdges([edge]); - - if (flowForms.length > 2) { - flowForms - .filter(o => ![initialForm, finalForm].includes(o.id)) - .map(o => { - const flowItem = { - formId: String(o.id), - chosenField: '', - chosenValue: '' - } - storeSet.main.addFlowData(flowItem); - }); - } + const filtered = flowData.filter(o => o.formId === initialForm); + storeSet.main.flowData(filtered); + buildFlowEdges(); } }, [finalForm]); - useEffect(() => { - return () => { - lines.forEach(line => line.remove()); - }; - }, [lines]);*/ - useEffect(() => { const bandoId = getBandoId(); storeSet.main.setAsyncRequest(); @@ -418,6 +373,7 @@ const BandoFlowEdit = () => { }, [id]); useEffect(() => { + console.log(forms) if (flowMsgs.current && forms.length < 2) { flowMsgs.current.clear(); flowMsgs.current.show([ @@ -430,13 +386,16 @@ const BandoFlowEdit = () => { ]); } else { flowMsgs.current.clear(); + if (itemContainerRef.current) { + itemContainerRef.current.dispatchEvent(new Event('scroll')); + } } }, [forms]); useEffect(() => { const chosenFieldItem = head(flowData.filter(o => !isEmpty(o.chosenField))); if (chosenFieldItem) { - setMainField(chosenFieldItem.chosenField); + setChosenMainField(chosenFieldItem.chosenField); } }, [flowData]) @@ -452,8 +411,8 @@ const BandoFlowEdit = () => { const finalFormData = head(forms.filter(o => o.id === finalForm)); const levelForms = forms.filter(o => o.id !== initialForm && o.id !== finalForm); - console.log('isFlowAllowed', isFlowAllowed, flowData, flowEdges); - console.log('mainField', mainField) + //console.log('isFlowAllowed', isFlowAllowed, flowData, flowEdges); + //console.log('forms:', initialForm, finalForm, chosenMainField, chosenMainFieldOptions) return (
@@ -481,29 +440,29 @@ const BandoFlowEdit = () => { placeholder={__('Scegli il form', 'gepafin')}/>
- {forms.length > 2 && initialForm && mainFieldOptions + {forms.length > 2 && initialForm && chosenMainFieldOptions ?
- + setMainField(e.value)} + value={chosenMainField} + onChange={(e) => setChosenMainField(e.value)} optionDisabled={(opt) => isEmpty(opt.value)} - options={mainFieldOptions} + options={chosenMainFieldOptions} optionLabel="label" optionValue="value" placeholder={__('Scegli il campo', 'gepafin')}/>
: null} - {(forms.length > 2 && mainField && isFlowAllowed) || (forms.length === 2 && isFlowAllowed) + {(forms.length > 2 && chosenMainField && isFlowAllowed) || (forms.length === 2 && isFlowAllowed) ?
setFinalForm(e.value)} + onChange={(e) => updateFinalForm(e.value)} optionDisabled={(opt) => initialForm === opt.value || isEmpty(opt.value)} options={formOptions} optionLabel="label" @@ -513,7 +472,7 @@ const BandoFlowEdit = () => {
- {/*
+
-
*/} +
{forms.length >= 2 && initialForm && finalForm - ?
+ ?
+
-
initialForm ? setItemRef(initialForm, el) : null}>
-
@@ -574,10 +506,24 @@ const BandoFlowEdit = () => { ?
{levelForms.map(o =>
setItemRef(o.id, el)} - className="flowContainer__flowItem levelForms" > + className="flowContainer__flowItem levelForms">
- +
+ {mainFieldSuboptions && !isEmpty(mainFieldSuboptions) + ? 'PUBLISH' !== bandoStatus + ? f.formId === parseInt(o.id))))} + onChange={(e) => updateItermediateForm(e.value, o.id)} + options={mainFieldSuboptions} + optionDisabled={disabledOptionForIntermediateForm} + optionLabel="label" + optionValue="name" + placeholder={__('Scegli il valore', 'gepafin')}/> + : + + : null}
)} @@ -588,26 +534,14 @@ const BandoFlowEdit = () => {
finalForm ? setItemRef(finalForm, el) : null}>
-
: null} +
: null}
From ab7be49fc6adfc148cde24558705add5423ea3a8 Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Thu, 9 Jan 2025 11:00:42 +0100 Subject: [PATCH 07/11] - saving progress; --- src/assets/scss/components/flowBuilder.scss | 57 ++++++++++++++++++++- src/assets/scss/components/topBar.scss | 6 +++ src/pages/BandoFlowEdit/index.js | 17 +++--- 3 files changed, 72 insertions(+), 8 deletions(-) diff --git a/src/assets/scss/components/flowBuilder.scss b/src/assets/scss/components/flowBuilder.scss index 986665b..8916a7b 100644 --- a/src/assets/scss/components/flowBuilder.scss +++ b/src/assets/scss/components/flowBuilder.scss @@ -44,24 +44,39 @@ display: flex; flex-direction: column; width: max-content; + margin: 0 auto; } .flowContainer__level { display: flex; justify-content: center; gap: 20px; - padding: 0 0 60px; /*min-height: 240px;*/ /*margin: 0 auto;*/ + + &.initialLevel { + padding: 0 0 30px; + } + + &.intermediateLevel, &.finalLevel { + padding: 30px 0 30px; + } + + &.intermediateLevel { + border-bottom: 1px solid var(--table-border-color); + border-top: 1px solid var(--table-border-color); + } } .flowContainer__flowItem { + position: relative; display: flex; flex-direction: column; width: 280px; min-width: 280px; padding: 15px; - border: 1px solid var(--panel-content-borderColor); + border: 1px solid var(--table-border-color); + z-index: 9; .flowContainer__flowItemInner > label { border-color: #757575; @@ -76,6 +91,44 @@ color: white; } } + + &.levelForms, &.initialForm { + &:after { + position: absolute; + bottom: -31px; + left: 50%; + content: ''; + width: 1px; + height: 31px; + background-color: var(--table-border-color); + } + } + + &.levelForms, &.finalForm { + &:before { + position: absolute; + top: -31px; + left: 50%; + content: ''; + width: 1px; + height: 31px; + background-color: var(--table-border-color); + } + } +} + +.flowContainer__levelMaskStart, .flowContainer__levelMaskEnd { + position: absolute; + width: 140px; + height: 100% ; + top: -1px; + background-color: white; +} +.flowContainer__levelMaskStart { + left: 0; +} +.flowContainer__levelMaskEnd { + right: 0; } .flowContainer__flowItemInner { diff --git a/src/assets/scss/components/topBar.scss b/src/assets/scss/components/topBar.scss index fc73015..bb9c86d 100644 --- a/src/assets/scss/components/topBar.scss +++ b/src/assets/scss/components/topBar.scss @@ -72,4 +72,10 @@ i { margin-right: 7px; } +} + +@media (max-width: 500px) { + .topBar__endContent { + flex-wrap: wrap; + } } \ No newline at end of file diff --git a/src/pages/BandoFlowEdit/index.js b/src/pages/BandoFlowEdit/index.js index 5a1b6a0..0f7ffc6 100644 --- a/src/pages/BandoFlowEdit/index.js +++ b/src/pages/BandoFlowEdit/index.js @@ -210,6 +210,7 @@ const BandoFlowEdit = () => { const field = form ? head(form.content.filter(o => o.id === chosenFieldItem.chosenField)) : null; if (field) { const options = head(field.settings.filter(o => o.name === 'options')); + console.log('suboptions1', options.value) setMainFieldSubOptions(options.value); } } @@ -291,6 +292,7 @@ const BandoFlowEdit = () => { { label: __('Nessun scelta', 'gepafin'), name: '' }, ...options.value ] + console.log('suboptions2', suboptions) setMainFieldSubOptions(suboptions); const data = { formId: parseInt(initialForm), @@ -333,6 +335,7 @@ const BandoFlowEdit = () => { } storeSet.main.flowData([]); setChosenMainField(''); + console.log('suboptions3', [], initialForm) setMainFieldSubOptions([]); setChosenMainFieldOptions([]); const flowForms = storeGet.main.flowForms(); @@ -411,8 +414,7 @@ const BandoFlowEdit = () => { const finalFormData = head(forms.filter(o => o.id === finalForm)); const levelForms = forms.filter(o => o.id !== initialForm && o.id !== finalForm); - //console.log('isFlowAllowed', isFlowAllowed, flowData, flowEdges); - //console.log('forms:', initialForm, finalForm, chosenMainField, chosenMainFieldOptions) + console.log('mainFieldSuboptions', mainFieldSuboptions); return (
@@ -491,7 +493,7 @@ const BandoFlowEdit = () => { {forms.length >= 2 && initialForm && finalForm ?
-
+
initialForm ? setItemRef(initialForm, el) : null}>
@@ -503,8 +505,8 @@ const BandoFlowEdit = () => {
{levelForms.length && initialForm && finalForm - ?
- {levelForms.map(o =>
+ {levelForms.map((o, i) =>
setItemRef(o.id, el)} className="flowContainer__flowItem levelForms">
@@ -527,10 +529,13 @@ const BandoFlowEdit = () => {
)} + {levelForms.length > 1 + ? <>
+
: null}
: null} {forms.length >= 2 && initialForm && finalForm - ?
+ ?
finalForm ? setItemRef(finalForm, el) : null}>
From 3b7c8edb4c18fc6a00bd8c969c5b6cbfd33de0af Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Thu, 9 Jan 2025 12:14:36 +0100 Subject: [PATCH 08/11] - saving progress; --- src/pages/BandoFlowEdit/index.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/pages/BandoFlowEdit/index.js b/src/pages/BandoFlowEdit/index.js index 0f7ffc6..17b1365 100644 --- a/src/pages/BandoFlowEdit/index.js +++ b/src/pages/BandoFlowEdit/index.js @@ -273,6 +273,10 @@ const BandoFlowEdit = () => { } useEffect(() => { + const isAsyncRequest = storeGet.main.isAsyncRequest(); + if (isAsyncRequest) { + return; + } if ('PUBLISH' === bandoStatus) { return; } @@ -330,7 +334,8 @@ const BandoFlowEdit = () => { }, [chosenMainField]); useEffect(() => { - if ('PUBLISH' === bandoStatus) { + const isAsyncRequest = storeGet.main.isAsyncRequest(); + if ('PUBLISH' === bandoStatus || isAsyncRequest) { return; } storeSet.main.flowData([]); @@ -361,6 +366,10 @@ const BandoFlowEdit = () => { }, [initialForm]); useEffect(() => { + const isAsyncRequest = storeGet.main.isAsyncRequest(); + if (isAsyncRequest) { + return; + } if ('PUBLISH' === bandoStatus) { } else { const filtered = flowData.filter(o => o.formId === initialForm); @@ -396,6 +405,10 @@ const BandoFlowEdit = () => { }, [forms]); useEffect(() => { + const isAsyncRequest = storeGet.main.isAsyncRequest(); + if (isAsyncRequest) { + return; + } const chosenFieldItem = head(flowData.filter(o => !isEmpty(o.chosenField))); if (chosenFieldItem) { setChosenMainField(chosenFieldItem.chosenField); From 92aed030037acca1dd61f1424707c52200a4d593 Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Thu, 9 Jan 2025 12:52:52 +0100 Subject: [PATCH 09/11] - saving; --- src/pages/BandoFlowEdit/index.js | 80 ++++++++++++++++---------------- 1 file changed, 41 insertions(+), 39 deletions(-) diff --git a/src/pages/BandoFlowEdit/index.js b/src/pages/BandoFlowEdit/index.js index 17b1365..b579a1e 100644 --- a/src/pages/BandoFlowEdit/index.js +++ b/src/pages/BandoFlowEdit/index.js @@ -1,7 +1,7 @@ import React, { useEffect, useState, useCallback, useRef } from 'react'; import { __, sprintf } from '@wordpress/i18n'; import { useNavigate, useParams } from 'react-router-dom'; -import { isEmpty, head, pathOr } from 'ramda'; +import { isEmpty, head, pathOr, isNil } from 'ramda'; // store import { storeGet, storeSet, useStore } from '../../store'; @@ -27,13 +27,13 @@ const BandoFlowEdit = () => { const flowData = useStore().main.flowData(); const flowEdges = useStore().main.flowEdges(); const [formOptions, setFormOptions] = useState([]); - const [initialForm, setInitialForm] = useState(0); + const [initialForm, setInitialForm] = useState(null); const [chosenMainFieldOptions, setChosenMainFieldOptions] = useState([]); const [chosenMainField, setChosenMainField] = useState(''); const [mainFieldSuboptions, setMainFieldSubOptions] = useState([]); const [bandoStatus, setBandoStatus] = useState(''); const [isFlowAllowed, setIsFlowAllowed] = useState(true); - const [finalForm, setFinalForm] = useState(0); + const [finalForm, setFinalForm] = useState(null); const flowMsgs = useRef(null); const toast = useRef(null); const [lines, setLines] = useState([]); @@ -70,7 +70,7 @@ const BandoFlowEdit = () => { } storeSet.main.flowData([]); storeSet.main.flowEdges([]); - setInitialForm(0); + setInitialForm(null); setChosenMainFieldOptions([]); setChosenMainField(''); setIsFlowAllowed(false); @@ -80,6 +80,7 @@ const BandoFlowEdit = () => { const updateInitialForm = (value) => { if (value !== finalForm) { + console.log('setInitialForm1') setInitialForm(value); if (forms.length === 2) { const finalForm = head(forms.filter(o => o.id !== value)); @@ -191,6 +192,7 @@ const BandoFlowEdit = () => { if (data.status === 'SUCCESS' && data.data) { storeSet.main.flowData(data.data.flowData); storeSet.main.flowEdges(data.data.flowEdges); + console.log('setInitialForm2') setInitialForm(data.data.initialForm); setFinalForm(data.data.finalForm); setBandoStatus(data.data.callStatus); @@ -210,7 +212,7 @@ const BandoFlowEdit = () => { const field = form ? head(form.content.filter(o => o.id === chosenFieldItem.chosenField)) : null; if (field) { const options = head(field.settings.filter(o => o.name === 'options')); - console.log('suboptions1', options.value) + console.log('suboptions1', options.value, data.data.initialForm) setMainFieldSubOptions(options.value); } } @@ -272,6 +274,38 @@ const BandoFlowEdit = () => { } } + useEffect(() => { + const isAsyncRequest = storeGet.main.isAsyncRequest(); + if ('PUBLISH' === bandoStatus || isAsyncRequest || isNil(initialForm)) { + return; + } + storeSet.main.flowData([]); + setChosenMainField(''); + console.log('suboptions3', [], initialForm) + setMainFieldSubOptions([]); + setChosenMainFieldOptions([]); + const flowForms = storeGet.main.flowForms(); + const form = head(flowForms.filter(o => String(o.id) === String(initialForm))) + const relevantFields = form + ? form.content + .filter(o => ['radio', 'select'].includes(o.name)) + .map(o => { + const label = head(o.settings.filter(o => o.name === 'label')); + return { value: o.id, label: label ? label.value : o.label }; + }) + : []; + setChosenMainFieldOptions([ + { label: isEmpty(relevantFields) ? __('Nessun scelta', 'gepafin') : '', value: '' }, + ...relevantFields] + ); + + if (flowForms.length === 2) { + setIsFlowAllowed(true) + } + + buildFlowEdges(); + }, [initialForm]); + useEffect(() => { const isAsyncRequest = storeGet.main.isAsyncRequest(); if (isAsyncRequest) { @@ -296,7 +330,7 @@ const BandoFlowEdit = () => { { label: __('Nessun scelta', 'gepafin'), name: '' }, ...options.value ] - console.log('suboptions2', suboptions) + console.log('suboptions2', suboptions, initialForm) setMainFieldSubOptions(suboptions); const data = { formId: parseInt(initialForm), @@ -335,39 +369,7 @@ const BandoFlowEdit = () => { useEffect(() => { const isAsyncRequest = storeGet.main.isAsyncRequest(); - if ('PUBLISH' === bandoStatus || isAsyncRequest) { - return; - } - storeSet.main.flowData([]); - setChosenMainField(''); - console.log('suboptions3', [], initialForm) - setMainFieldSubOptions([]); - setChosenMainFieldOptions([]); - const flowForms = storeGet.main.flowForms(); - const form = head(flowForms.filter(o => String(o.id) === String(initialForm))) - const relevantFields = form - ? form.content - .filter(o => ['radio', 'select'].includes(o.name)) - .map(o => { - const label = head(o.settings.filter(o => o.name === 'label')); - return { value: o.id, label: label ? label.value : o.label }; - }) - : []; - setChosenMainFieldOptions([ - { label: isEmpty(relevantFields) ? __('Nessun scelta', 'gepafin') : '', value: '' }, - ...relevantFields] - ); - - if (flowForms.length === 2) { - setIsFlowAllowed(true) - } - - buildFlowEdges(); - }, [initialForm]); - - useEffect(() => { - const isAsyncRequest = storeGet.main.isAsyncRequest(); - if (isAsyncRequest) { + if (isAsyncRequest || isNil(finalForm)) { return; } if ('PUBLISH' === bandoStatus) { From 40e84c7d02e26449d46c526f955a95ce1d0a8845 Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Fri, 10 Jan 2025 09:57:12 +0100 Subject: [PATCH 10/11] - saving; --- src/pages/BandoFlowEdit/index.js | 409 +++++++++++++++++++------------ 1 file changed, 258 insertions(+), 151 deletions(-) diff --git a/src/pages/BandoFlowEdit/index.js b/src/pages/BandoFlowEdit/index.js index b579a1e..75152e9 100644 --- a/src/pages/BandoFlowEdit/index.js +++ b/src/pages/BandoFlowEdit/index.js @@ -23,20 +23,24 @@ import { Toast } from 'primereact/toast'; const BandoFlowEdit = () => { const { id } = useParams(); const navigate = useNavigate(); - const forms = useStore().main.flowForms(); - const flowData = useStore().main.flowData(); - const flowEdges = useStore().main.flowEdges(); + + const [flowStructure, setFlowStructure] = useState({ + initialForm: 0, + finalForm: 0, + flowData: [], + flowWdges: [], + chosenField: '' + }); + + const [forms, setForms] = useState([]); const [formOptions, setFormOptions] = useState([]); - const [initialForm, setInitialForm] = useState(null); const [chosenMainFieldOptions, setChosenMainFieldOptions] = useState([]); const [chosenMainField, setChosenMainField] = useState(''); const [mainFieldSuboptions, setMainFieldSubOptions] = useState([]); const [bandoStatus, setBandoStatus] = useState(''); const [isFlowAllowed, setIsFlowAllowed] = useState(true); - const [finalForm, setFinalForm] = useState(null); const flowMsgs = useRef(null); const toast = useRef(null); - const [lines, setLines] = useState([]); const itemRefs = useRef({}); const itemContainerRef = useRef(null); @@ -68,59 +72,88 @@ const BandoFlowEdit = () => { if (flowMsgs.current) { flowMsgs.current.clear(); } - storeSet.main.flowData([]); - storeSet.main.flowEdges([]); - setInitialForm(null); - setChosenMainFieldOptions([]); - setChosenMainField(''); + + setFlowStructure({ + initialForm: 0, + finalForm: 0, + flowData: [], + flowWdges: [], + chosenField: '' + }) + setIsFlowAllowed(false); - setFinalForm(0); - lines.forEach(line => line.remove()); + setChosenMainFieldOptions([]); } const updateInitialForm = (value) => { - if (value !== finalForm) { - console.log('setInitialForm1') - setInitialForm(value); - if (forms.length === 2) { - const finalForm = head(forms.filter(o => o.id !== value)); - if (finalForm) { - setFinalForm(finalForm.id); - } - } + const finalFormObj = head(forms.filter(o => o.id !== value)); + + if (forms.length === 2 && finalFormObj) { + setFlowStructure({ + ...flowStructure, + initialForm: value, + finalForm: finalFormObj.id + }); + } else { + setFlowStructure({ + ...flowStructure, + initialForm: value + }); } } const updateFinalForm = (value) => { - if (value !== initialForm) { - setFinalForm(value); - } + const filtered = flowStructure.flowData.filter(o => o.formId === flowStructure.initialForm); + const flowEdges = buildFlowEdges(flowStructure.initialForm, value); + + setFlowStructure({ + ...flowStructure, + flowEdges, + flowData: filtered, + finalForm: value + }); } + const addFlowData = useCallback((data) => { + const initial = flowStructure.flowData; + const exists = initial ? initial.filter(o => parseInt(o.formId) === parseInt(data.formId)) : []; + let final = []; + + if (exists.length) { + final = initial.map(o => parseInt(o.formId) === parseInt(data.formId) ? data : o); + } else { + final = [...initial, data]; + } + + setFlowStructure({ + ...flowStructure, + flowData: final + }); + }, [flowStructure]); + const updateItermediateForm = (value, formId) => { - const isUsed = flowData.map(o => o.chosenValue).filter(v => !isEmpty(v)).includes(value); + const isUsed = flowStructure.flowData.map(o => o.chosenValue).filter(v => !isEmpty(v)).includes(value); if (!isUsed) { const data = { formId: parseInt(formId), chosenField: '', chosenValue: value } - storeSet.main.addFlowData(data); + addFlowData(data); } } const displayChosenOptionValue = (id) => { - const suboptionId = pathOr('', ['chosenValue'], head(flowData.filter(f => parseInt(f.formId) === parseInt(id)))); + const suboptionId = pathOr('', ['chosenValue'], head(flowStructure.flowData.filter(f => parseInt(f.formId) === parseInt(id)))); return pathOr('', ['label'], head(mainFieldSuboptions.filter(o => o.name === suboptionId))); } const disabledOptionForIntermediateForm = (opt) => { - return flowData.map(o => o.chosenValue).filter(v => !isEmpty(v)).includes(opt.name); + return flowStructure.flowData.map(o => o.chosenValue).filter(v => !isEmpty(v)).includes(opt.name); } const shoudDisableSaving = useCallback(() => { - const flowForms = storeGet.main.flowForms(); - const nonEmptyFlowItems = flowData.filter(o => isEmpty(o.chosenField)).filter(o => !isEmpty(o.chosenValue)); + const nonEmptyFlowItems = flowStructure.flowData.filter(o => isEmpty(o.chosenField)).filter(o => !isEmpty(o.chosenValue)); /*if (flowForms.length > 2) { console.log('disable BTN:', nonEmptyFlowItems.length !== flowForms.length - 2, isEmpty(flowEdges), 'PUBLISH' === bandoStatus, @@ -130,27 +163,22 @@ const BandoFlowEdit = () => { isEmpty(initialForm), isEmpty(finalForm)); }*/ - return flowForms.length > 2 - ? nonEmptyFlowItems.length !== flowForms.length - 2 || isEmpty(flowEdges) || 'PUBLISH' === bandoStatus - || isEmpty(initialForm) || isEmpty(finalForm) - : nonEmptyFlowItems.length !== 1 || isEmpty(flowEdges) || 'PUBLISH' === bandoStatus - || isEmpty(initialForm) || isEmpty(finalForm); - }, [flowData, flowEdges]); + return forms.length > 2 + ? nonEmptyFlowItems.length !== forms.length - 2 || isEmpty(flowStructure.flowEdges) || 'PUBLISH' === bandoStatus + || isEmpty(flowStructure.initialForm) || isEmpty(flowStructure.finalForm) + : nonEmptyFlowItems.length !== 1 || isEmpty(flowStructure.flowEdges) || 'PUBLISH' === bandoStatus + || isEmpty(flowStructure.initialForm) || isEmpty(flowStructure.finalForm); + }, [flowStructure, forms]); const doSave = () => { storeSet.main.setAsyncRequest(); const bandoId = getBandoId(); - const body = { - initialForm, - finalForm, - flowData, - flowEdges - }; + if (flowMsgs.current) { flowMsgs.current.clear(); } - FlowService.createFlow(bandoId, body, getFlowCreateCallback, errGetFlowCreateCallback); + FlowService.createFlow(bandoId, flowStructure, getFlowCreateCallback, errGetFlowCreateCallback); } const getFlowCreateCallback = (data) => { @@ -173,10 +201,11 @@ const BandoFlowEdit = () => { const getFormsCallback = (data) => { if (data.status === 'SUCCESS') { + setForms(data.data); const formOptions = data.data.map(o => ({ label: o.label, value: o.id })) - storeSet.main.flowForms(data.data); setFormOptions([{ label: '', value: '' }, ...formOptions]); const bandoId = getBandoId(); + storeSet.main.setAsyncRequest(); FlowService.getFlow(bandoId, (resp) => getFlowCallback(resp, data.data), errGetFlowCallback); } @@ -190,15 +219,17 @@ const BandoFlowEdit = () => { const getFlowCallback = (data, forms) => { if (data.status === 'SUCCESS' && data.data) { - storeSet.main.flowData(data.data.flowData); - storeSet.main.flowEdges(data.data.flowEdges); - console.log('setInitialForm2') - setInitialForm(data.data.initialForm); - setFinalForm(data.data.finalForm); - setBandoStatus(data.data.callStatus); const chosenFieldItem = head(data.data.flowData.filter(o => !isEmpty(o.chosenField))); + setBandoStatus(data.data.callStatus); + if (chosenFieldItem) { - setChosenMainField(chosenFieldItem.chosenField); + setFlowStructure({ + initialForm: data.data.initialForm, + finalForm: data.data.finalForm, + flowData: data.data.flowData, + flowWdges: data.data.flowWdges, + chosenField: chosenFieldItem.chosenField + }); const form = head(forms.filter(o => o.id === data.data.initialForm)); const relevantFields = form ? form.content @@ -212,14 +243,16 @@ const BandoFlowEdit = () => { const field = form ? head(form.content.filter(o => o.id === chosenFieldItem.chosenField)) : null; if (field) { const options = head(field.settings.filter(o => o.name === 'options')); - console.log('suboptions1', options.value, data.data.initialForm) setMainFieldSubOptions(options.value); } - } - const flowDataItem = head(data.data.flowData.filter(o => !isEmpty(o.chosenField))); - - if (flowDataItem) { - setChosenMainField(flowDataItem.chosenField); + } else { + setFlowStructure({ + initialForm: data.data.initialForm, + finalForm: data.data.finalForm, + flowData: data.data.flowData, + flowWdges: data.data.flowWdges, + chosenField: '' + }); } } storeSet.main.unsetAsyncRequest(); @@ -234,12 +267,12 @@ const BandoFlowEdit = () => { itemRefs.current[id] = element; }; - const buildFlowEdges = () => { + const buildFlowEdges = (initialForm, finalForm) => { + let edges = []; + if (!isEmpty(initialForm) && !isEmpty(finalForm)) { - const flowForms = storeGet.main.flowForms(); - let edges = []; // eslint-disable-next-line - flowForms.map(o => { + forms.map(o => { const formId = String(o.id); if (formId !== String(initialForm) && formId !== String(finalForm)) { @@ -260,7 +293,7 @@ const BandoFlowEdit = () => { } }); - if (flowForms.length === 2 && initialForm && finalForm) { + if (forms.length === 2 && initialForm && finalForm) { edges.push({ id: `${initialForm}->${finalForm}`, source: String(initialForm), @@ -268,18 +301,123 @@ const BandoFlowEdit = () => { type: 'smoothstep' }); } - - //console.log('edges', edges); - storeSet.main.flowEdges(edges); } - } + + return edges; + }; useEffect(() => { + const bandoId = getBandoId(); + storeSet.main.setAsyncRequest(); + FormsService.getFormsForCall(bandoId, getFormsCallback, errGetFormsCallback); + }, [id]); + + useEffect(() => { + if (flowMsgs.current && forms.length < 2) { + flowMsgs.current.clear(); + flowMsgs.current.show([ + { + id: '1', + sticky: true, severity: 'info', summary: '', + detail: __('Devi creare almeno 2 form.', 'gepafin'), + closable: false + } + ]); + } else { + flowMsgs.current.clear(); + if (itemContainerRef.current) { + itemContainerRef.current.dispatchEvent(new Event('scroll')); + } + } + }, [forms]); + + useEffect(() => { + console.log('updated flowStructure:', flowStructure); + const { initialForm = 0, finalForm = 0, chosenField = '' } = flowStructure; + + if (!isEmpty(initialForm) && !isEmpty(finalForm)) { + const form = head(forms.filter(o => String(o.id) === String(initialForm))) + const relevantFields = form + ? form.content + .filter(o => ['radio', 'select'].includes(o.name)) + .map(o => { + const label = head(o.settings.filter(o => o.name === 'label')); + return { value: o.id, label: label ? label.value : o.label }; + }) + : []; + setChosenMainFieldOptions([ + { label: isEmpty(relevantFields) ? __('Nessun scelta', 'gepafin') : '', value: '' }, + ...relevantFields] + ); + + if (forms.length === 2) { + setIsFlowAllowed(true) + } + + const flowEdges = buildFlowEdges(initialForm, finalForm); + + if (!isEmpty(chosenField)) { + const field = form ? head(form.content.filter(o => o.id === chosenField)) : null; + let options = []; + + if (field) { + options = head(field.settings.filter(o => o.name === 'options')); + } + + if (field && options.value && options.value.length === forms.length - 2) { + setIsFlowAllowed(true); + const suboptions = [ + { label: __('Nessun scelta', 'gepafin'), name: '' }, + ...options.value + ] + + setMainFieldSubOptions(suboptions); + + const data = { + formId: parseInt(initialForm), + chosenField: chosenField, + chosenValue: '' + } + + addFlowData(data); + + if (flowMsgs.current && !isEmpty(chosenField)) { + flowMsgs.current.clear(); + } + } else { + setIsFlowAllowed(false); + + let msg = 'Non è possibile creare il flusso. Il campo principale deve avere esattamente %s opzioni.'; + + if (forms.length - 2 === 1) { + msg = 'Non è possibile creare il flusso. Il campo principale deve avere esattamente %s opzioni.'; + } + + if (flowMsgs.current && !isEmpty(chosenMainField)) { + flowMsgs.current.clear(); + flowMsgs.current.show([ + { + id: '1', + sticky: true, severity: 'error', summary: '', + detail: sprintf( + __(msg, 'gepafin'), + forms.length - 2 + ), + closable: false + } + ]); + } + } + } + } + }, [flowStructure]); + + /*useEffect(() => { const isAsyncRequest = storeGet.main.isAsyncRequest(); if ('PUBLISH' === bandoStatus || isAsyncRequest || isNil(initialForm)) { return; } - storeSet.main.flowData([]); + //storeSet.main.flowData([]); setChosenMainField(''); console.log('suboptions3', [], initialForm) setMainFieldSubOptions([]); @@ -380,32 +518,6 @@ const BandoFlowEdit = () => { } }, [finalForm]); - useEffect(() => { - const bandoId = getBandoId(); - storeSet.main.setAsyncRequest(); - FormsService.getFormsForCall(bandoId, getFormsCallback, errGetFormsCallback); - }, [id]); - - useEffect(() => { - console.log(forms) - if (flowMsgs.current && forms.length < 2) { - flowMsgs.current.clear(); - flowMsgs.current.show([ - { - id: '1', - sticky: true, severity: 'info', summary: '', - detail: __('Devi creare almeno 2 form.', 'gepafin'), - closable: false - } - ]); - } else { - flowMsgs.current.clear(); - if (itemContainerRef.current) { - itemContainerRef.current.dispatchEvent(new Event('scroll')); - } - } - }, [forms]); - useEffect(() => { const isAsyncRequest = storeGet.main.isAsyncRequest(); if (isAsyncRequest) { @@ -415,21 +527,14 @@ const BandoFlowEdit = () => { if (chosenFieldItem) { setChosenMainField(chosenFieldItem.chosenField); } - }, [flowData]) - - useEffect(() => { - return () => { - storeSet.main.flowForms([]); - storeSet.main.flowData([]); - storeSet.main.flowEdges([]); - } - }, []); + }, [flowData]);*/ + const { initialForm = 0, finalForm = 0, flowData = [] } = flowStructure; const initialFormData = head(forms.filter(o => o.id === initialForm)); const finalFormData = head(forms.filter(o => o.id === finalForm)); const levelForms = forms.filter(o => o.id !== initialForm && o.id !== finalForm); - console.log('mainFieldSuboptions', mainFieldSuboptions); + console.log('mainFieldSuboptions', mainFieldSuboptions, flowStructure); return (
@@ -508,59 +613,61 @@ const BandoFlowEdit = () => { {forms.length >= 2 && initialForm && finalForm ?
-
-
initialForm ? setItemRef(initialForm, el) : null}> -
- -
-
-
- - {levelForms.length && initialForm && finalForm - ?
- {levelForms.map((o, i) =>
setItemRef(o.id, el)} - className="flowContainer__flowItem levelForms"> -
- -
- {mainFieldSuboptions && !isEmpty(mainFieldSuboptions) - ? 'PUBLISH' !== bandoStatus - ? f.formId === parseInt(o.id))))} - onChange={(e) => updateItermediateForm(e.value, o.id)} - options={mainFieldSuboptions} - optionDisabled={disabledOptionForIntermediateForm} - optionLabel="label" - optionValue="name" - placeholder={__('Scegli il valore', 'gepafin')}/> - : - - : null} -
-
-
)} - {levelForms.length > 1 - ? <>
-
: null} -
: null} - - {forms.length >= 2 && initialForm && finalForm - ?
-
finalForm ? setItemRef(finalForm, el) : null}> +
+
initialForm ? setItemRef(initialForm, el) : null}>
- : null} + + {levelForms.length && initialForm && finalForm + ?
+ {levelForms.map((o, i) =>
setItemRef(o.id, el)} + className="flowContainer__flowItem levelForms"> +
+ +
+ {mainFieldSuboptions && !isEmpty(mainFieldSuboptions) + ? 'PUBLISH' !== bandoStatus + ? f.formId === parseInt(o.id))))} + onChange={(e) => updateItermediateForm(e.value, o.id)} + options={mainFieldSuboptions} + optionDisabled={disabledOptionForIntermediateForm} + optionLabel="label" + optionValue="name" + placeholder={__('Scegli il valore', 'gepafin')}/> + : + + : null} +
+
+
)} + {levelForms.length > 1 + ? <> +
+
+ : null} +
: null} + + {forms.length >= 2 && initialForm && finalForm + ?
+
finalForm ? setItemRef(finalForm, el) : null}> +
+ +
+
+
+ : null}
: null}
From f2f844d3889f87621898a8a0b79dc4a5a11b1ac4 Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Fri, 10 Jan 2025 12:18:53 +0100 Subject: [PATCH 11/11] - finished new flow builder UI; - fixed reset pass functionality; --- src/assets/scss/components/misc.scss | 8 + .../components/PasswordField/index.js | 54 ++++++ src/components/FormField/index.js | 4 +- src/pages/BandoFlowEdit/index.js | 170 ++++-------------- src/pages/ResetPassword/index.js | 55 ++++-- src/store/actions.js | 11 -- 6 files changed, 138 insertions(+), 164 deletions(-) create mode 100644 src/components/FormField/components/PasswordField/index.js diff --git a/src/assets/scss/components/misc.scss b/src/assets/scss/components/misc.scss index b809ae8..162068e 100644 --- a/src/assets/scss/components/misc.scss +++ b/src/assets/scss/components/misc.scss @@ -147,6 +147,14 @@ max-width: 100%; } +.p-password.p-inputwrapper { + width: 100%; + + > div, input { + width: 100%; + } +} + .p-inputgroup.flex-1 { align-items: center; } diff --git a/src/components/FormField/components/PasswordField/index.js b/src/components/FormField/components/PasswordField/index.js new file mode 100644 index 0000000..f214f9c --- /dev/null +++ b/src/components/FormField/components/PasswordField/index.js @@ -0,0 +1,54 @@ +import React from 'react'; +import { classNames } from 'primereact/utils'; +import { Controller } from 'react-hook-form'; +import { Password } from 'primereact/password'; + +const PasswordField = ({ + fieldName, + label, + control, + errors, + defaultValue, + config = {}, + infoText = null, + inputgroup = false, + icon = null, + placeholder = '', + disabled = false, + onBlurFn = () => { + } + }) => { + const input = ( + + )}/> + return ( + <> + + {inputgroup + ?
+ + {icon} + + {input} +
+ : input} + {infoText ? {infoText} : null} + ) +} + +export default PasswordField; \ No newline at end of file diff --git a/src/components/FormField/index.js b/src/components/FormField/index.js index bde12fb..c1559a7 100644 --- a/src/components/FormField/index.js +++ b/src/components/FormField/index.js @@ -16,6 +16,7 @@ import Wysiwyg from './components/Wysiwyg'; import Checkboxes from './components/Checkboxes'; import Fileupload from './components/Fileupload'; import Table from './components/Table'; +import PasswordField from './components/PasswordField'; const FormField = (props) => { const fields = { @@ -31,7 +32,8 @@ const FormField = (props) => { radio: Radio, wysiwyg: Wysiwyg, checkboxes: Checkboxes, - table: Table + table: Table, + password: PasswordField } const Comp = !isNil(fields[props.type]) ? fields[props.type] : null; diff --git a/src/pages/BandoFlowEdit/index.js b/src/pages/BandoFlowEdit/index.js index 75152e9..af64d22 100644 --- a/src/pages/BandoFlowEdit/index.js +++ b/src/pages/BandoFlowEdit/index.js @@ -1,10 +1,10 @@ import React, { useEffect, useState, useCallback, useRef } from 'react'; import { __, sprintf } from '@wordpress/i18n'; import { useNavigate, useParams } from 'react-router-dom'; -import { isEmpty, head, pathOr, isNil } from 'ramda'; +import { isEmpty, head, pathOr } from 'ramda'; // store -import { storeGet, storeSet, useStore } from '../../store'; +import { storeSet } from '../../store'; // api import FormsService from '../../service/forms-service'; @@ -28,14 +28,14 @@ const BandoFlowEdit = () => { initialForm: 0, finalForm: 0, flowData: [], - flowWdges: [], + flowEdges: [], chosenField: '' }); const [forms, setForms] = useState([]); const [formOptions, setFormOptions] = useState([]); const [chosenMainFieldOptions, setChosenMainFieldOptions] = useState([]); - const [chosenMainField, setChosenMainField] = useState(''); + //const [chosenMainField, setChosenMainField] = useState(''); const [mainFieldSuboptions, setMainFieldSubOptions] = useState([]); const [bandoStatus, setBandoStatus] = useState(''); const [isFlowAllowed, setIsFlowAllowed] = useState(true); @@ -77,7 +77,7 @@ const BandoFlowEdit = () => { initialForm: 0, finalForm: 0, flowData: [], - flowWdges: [], + flowEdges: [], chosenField: '' }) @@ -85,7 +85,7 @@ const BandoFlowEdit = () => { setChosenMainFieldOptions([]); } - const updateInitialForm = (value) => { + const updateInitialForm = useCallback((value) => { const finalFormObj = head(forms.filter(o => o.id !== value)); if (forms.length === 2 && finalFormObj) { @@ -100,9 +100,9 @@ const BandoFlowEdit = () => { initialForm: value }); } - } + }, [flowStructure]) - const updateFinalForm = (value) => { + const updateFinalForm = useCallback((value) => { const filtered = flowStructure.flowData.filter(o => o.formId === flowStructure.initialForm); const flowEdges = buildFlowEdges(flowStructure.initialForm, value); @@ -112,7 +112,14 @@ const BandoFlowEdit = () => { flowData: filtered, finalForm: value }); - } + }, [flowStructure]); + + const updateChosenField = useCallback((value) => { + setFlowStructure({ + ...flowStructure, + chosenField: value + }); + }, [flowStructure]); const addFlowData = useCallback((data) => { const initial = flowStructure.flowData; @@ -227,7 +234,7 @@ const BandoFlowEdit = () => { initialForm: data.data.initialForm, finalForm: data.data.finalForm, flowData: data.data.flowData, - flowWdges: data.data.flowWdges, + flowEdges: data.data.flowEdges, chosenField: chosenFieldItem.chosenField }); const form = head(forms.filter(o => o.id === data.data.initialForm)); @@ -250,7 +257,7 @@ const BandoFlowEdit = () => { initialForm: data.data.initialForm, finalForm: data.data.finalForm, flowData: data.data.flowData, - flowWdges: data.data.flowWdges, + flowEdges: data.data.flowEdges, chosenField: '' }); } @@ -332,8 +339,9 @@ const BandoFlowEdit = () => { }, [forms]); useEffect(() => { - console.log('updated flowStructure:', flowStructure); - const { initialForm = 0, finalForm = 0, chosenField = '' } = flowStructure; + const initialForm = flowStructure.initialForm; + const finalForm = flowStructure.finalForm; + const chosenField = flowStructure.chosenField; if (!isEmpty(initialForm) && !isEmpty(finalForm)) { const form = head(forms.filter(o => String(o.id) === String(initialForm))) @@ -351,10 +359,10 @@ const BandoFlowEdit = () => { ); if (forms.length === 2) { - setIsFlowAllowed(true) + setIsFlowAllowed(true); } - const flowEdges = buildFlowEdges(initialForm, finalForm); + //const flowEdges = buildFlowEdges(initialForm, finalForm); if (!isEmpty(chosenField)) { const field = form ? head(form.content.filter(o => o.id === chosenField)) : null; @@ -393,7 +401,7 @@ const BandoFlowEdit = () => { msg = 'Non è possibile creare il flusso. Il campo principale deve avere esattamente %s opzioni.'; } - if (flowMsgs.current && !isEmpty(chosenMainField)) { + if (flowMsgs.current && !isEmpty(chosenField)) { flowMsgs.current.clear(); flowMsgs.current.show([ { @@ -410,131 +418,13 @@ const BandoFlowEdit = () => { } } } - }, [flowStructure]); + }, [flowStructure.initialForm, flowStructure.finalForm, flowStructure.chosenField]); - /*useEffect(() => { - const isAsyncRequest = storeGet.main.isAsyncRequest(); - if ('PUBLISH' === bandoStatus || isAsyncRequest || isNil(initialForm)) { - return; - } - //storeSet.main.flowData([]); - setChosenMainField(''); - console.log('suboptions3', [], initialForm) - setMainFieldSubOptions([]); - setChosenMainFieldOptions([]); - const flowForms = storeGet.main.flowForms(); - const form = head(flowForms.filter(o => String(o.id) === String(initialForm))) - const relevantFields = form - ? form.content - .filter(o => ['radio', 'select'].includes(o.name)) - .map(o => { - const label = head(o.settings.filter(o => o.name === 'label')); - return { value: o.id, label: label ? label.value : o.label }; - }) - : []; - setChosenMainFieldOptions([ - { label: isEmpty(relevantFields) ? __('Nessun scelta', 'gepafin') : '', value: '' }, - ...relevantFields] - ); - - if (flowForms.length === 2) { - setIsFlowAllowed(true) - } - - buildFlowEdges(); - }, [initialForm]); - - useEffect(() => { - const isAsyncRequest = storeGet.main.isAsyncRequest(); - if (isAsyncRequest) { - return; - } - if ('PUBLISH' === bandoStatus) { - return; - } - storeSet.main.flowData([]); - const flowForms = storeGet.main.flowForms(); - const form = head(flowForms.filter(o => String(o.id) === String(initialForm))) - const field = form ? head(form.content.filter(o => o.id === chosenMainField)) : null; - let options = []; - - if (field) { - options = head(field.settings.filter(o => o.name === 'options')); - } - - if (field && options.value && options.value.length === flowForms.length - 2) { - setIsFlowAllowed(true); - const suboptions = [ - { label: __('Nessun scelta', 'gepafin'), name: '' }, - ...options.value - ] - console.log('suboptions2', suboptions, initialForm) - setMainFieldSubOptions(suboptions); - const data = { - formId: parseInt(initialForm), - chosenField: chosenMainField, - chosenValue: '' - } - storeSet.main.addFlowData(data); - if (flowMsgs.current && !isEmpty(chosenMainField)) { - flowMsgs.current.clear(); - } - } else { - setIsFlowAllowed(false); - setFinalForm(''); - let msg = 'Non è possibile creare il flusso. Il campo principale deve avere esattamente %s opzioni.'; - - if (flowForms.length - 2 === 1) { - msg = 'Non è possibile creare il flusso. Il campo principale deve avere esattamente %s opzioni.'; - } - - if (flowMsgs.current && !isEmpty(chosenMainField)) { - flowMsgs.current.clear(); - flowMsgs.current.show([ - { - id: '1', - sticky: true, severity: 'error', summary: '', - detail: sprintf( - __(msg, 'gepafin'), - flowForms.length - 2 - ), - closable: false - } - ]); - } - } - }, [chosenMainField]); - - useEffect(() => { - const isAsyncRequest = storeGet.main.isAsyncRequest(); - if (isAsyncRequest || isNil(finalForm)) { - return; - } - if ('PUBLISH' === bandoStatus) { - } else { - const filtered = flowData.filter(o => o.formId === initialForm); - storeSet.main.flowData(filtered); - buildFlowEdges(); - } - }, [finalForm]); - - useEffect(() => { - const isAsyncRequest = storeGet.main.isAsyncRequest(); - if (isAsyncRequest) { - return; - } - const chosenFieldItem = head(flowData.filter(o => !isEmpty(o.chosenField))); - if (chosenFieldItem) { - setChosenMainField(chosenFieldItem.chosenField); - } - }, [flowData]);*/ - - const { initialForm = 0, finalForm = 0, flowData = [] } = flowStructure; + const { initialForm = 0, finalForm = 0, flowData = [], chosenField = '' } = flowStructure; const initialFormData = head(forms.filter(o => o.id === initialForm)); const finalFormData = head(forms.filter(o => o.id === finalForm)); const levelForms = forms.filter(o => o.id !== initialForm && o.id !== finalForm); - console.log('mainFieldSuboptions', mainFieldSuboptions, flowStructure); return (
@@ -568,8 +458,8 @@ const BandoFlowEdit = () => { setChosenMainField(e.value)} + value={chosenField} + onChange={(e) => updateChosenField(e.value)} optionDisabled={(opt) => isEmpty(opt.value)} options={chosenMainFieldOptions} optionLabel="label" @@ -577,7 +467,7 @@ const BandoFlowEdit = () => { placeholder={__('Scegli il campo', 'gepafin')}/>
: null} - {(forms.length > 2 && chosenMainField && isFlowAllowed) || (forms.length === 2 && isFlowAllowed) + {(forms.length > 2 && chosenField && isFlowAllowed) || (forms.length === 2 && isFlowAllowed) ?
{
- {forms.length >= 2 && initialForm && finalForm + {forms.length >= 2 && initialForm && finalForm && isFlowAllowed ?
diff --git a/src/pages/ResetPassword/index.js b/src/pages/ResetPassword/index.js index 05a1438..a43724f 100644 --- a/src/pages/ResetPassword/index.js +++ b/src/pages/ResetPassword/index.js @@ -1,9 +1,9 @@ -import React, { useRef, useState, useEffect } from 'react'; +import React, { useRef, useState, useEffect, useMemo } from 'react'; import { __, sprintf } from '@wordpress/i18n'; import { useForm } from 'react-hook-form'; import { classNames } from 'primereact/utils'; -import { isEmpty } from 'ramda'; -import { useNavigate } from 'react-router-dom'; +import { isEmpty, isNil } from 'ramda'; +import { useNavigate, useSearchParams } from 'react-router-dom'; // tools import AuthenticationService from '../../service/authentication-service'; @@ -24,7 +24,9 @@ const ResetPassword = () => { const token = useStore().main.token(); const [loading, setLoading] = useState(false); const [resetPassToken, setResetPassToken] = useState(''); + const [resetPassEmail, setResetPassEmail] = useState(''); const errorMsgs = useRef(null); + let [searchParams] = useSearchParams(); const { control, handleSubmit, @@ -47,12 +49,33 @@ const ResetPassword = () => { } if (request.token && !isEmpty(request.token)) { - AuthenticationService.resetPassword(request, getCallback, errCallback); + AuthenticationService.resetPassword(request, getCallbackReset, errCallback); } else { AuthenticationService.forgotPassword(request, getCallback, errCallback); } }; + const getCallbackReset = (data) => { + if (data.status === 'SUCCESS') { + errorMsgs.current.show([ + { + sticky: true, severity: 'success', summary: '', + detail: data.message, + closable: true + } + ]); + } else { + errorMsgs.current.show([ + { + sticky: true, severity: 'error', summary: '', + detail: data.message, + closable: true + } + ]); + } + setLoading(false); + } + const getCallback = (data) => { if (data.status === 'SUCCESS') { setResetPassToken(data.data) @@ -87,9 +110,18 @@ const ResetPassword = () => { }, [token]); useEffect(() => { - setValue('token', resetPassToken); + console.log(resetPassToken, resetPassEmail); reset(); - }, [resetPassToken]) + setValue('token', resetPassToken); + setValue('email', resetPassEmail); + }, [resetPassToken, resetPassEmail]); + + useEffect(() => { + const token = searchParams.get('token'); + const email = searchParams.get('email'); + setResetPassToken(token); + setResetPassEmail(email); + }, [searchParams]); return (
@@ -113,7 +145,7 @@ const ResetPassword = () => { placeholder="sample@example.com" /> - {!isEmpty(resetPassToken) + {resetPassToken && !isEmpty(resetPassToken) ? { })} /> : null} - {!isEmpty(resetPassToken) + {resetPassToken && !isEmpty(resetPassToken) ? { }} /> : null} - {!isEmpty(resetPassToken) + {resetPassToken && !isEmpty(resetPassToken) ? ({ const newElements = newFields.toSpliced(hoverIndex, 0, prevFields[dragIndex]); set.formElements(newElements); } - }, - addFlowData: (data) => { - const initial = get.flowData(); - const exists = initial ? initial.filter(o => parseInt(o.formId) === parseInt(data.formId)) : []; - - if (exists.length) { - const newData = initial.map(o => parseInt(o.formId) === parseInt(data.formId) ? data : o); - set.flowData(newData); - } else { - set.flowData([...initial, data]); - } } });