From f2f844d3889f87621898a8a0b79dc4a5a11b1ac4 Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Fri, 10 Jan 2025 12:18:53 +0100 Subject: [PATCH] - 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]); - } } });