diff --git a/package-lock.json b/package-lock.json index aa9dd9f..c60e774 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,11 +10,13 @@ "dependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@babel/preset-react": "^7.24.7", + "@date-fns/tz": "^1.0.2", "@emotion/react": "11.13.0", "@emotion/styled": "11.13.0", "@wordpress/i18n": "^5.5.0", "@wordpress/react-i18n": "^4.5.0", "@xyflow/react": "^12.2.0", + "codice-fiscale-js": "^2.3.22", "deep-object-diff": "^1.1.9", "dompurify": "3.1.6", "fast-deep-equal": "^3.1.3", @@ -33,6 +35,7 @@ "react-hook-form": "7.52.2", "react-router-dom": "6.26.0", "react-scripts": "^5.0.1", + "validate.js": "^0.13.1", "zustand": "4.5.4", "zustand-x": "3.0.4" }, @@ -2295,6 +2298,11 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@date-fns/tz": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.0.2.tgz", + "integrity": "sha512-iKxj0kXMy7Qe6vjK+flz33cpy2j0dnTKT5i54p3fFlB411J47aSs6HBg7LOO5X9LjDi2iNlctD9rFn738ySOGQ==" + }, "node_modules/@emotion/babel-plugin": { "version": "11.12.0", "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz", @@ -6062,6 +6070,11 @@ "node": ">= 4.0" } }, + "node_modules/codice-fiscale-js": { + "version": "2.3.22", + "resolved": "https://registry.npmjs.org/codice-fiscale-js/-/codice-fiscale-js-2.3.22.tgz", + "integrity": "sha512-at+XQ3kTgIq0qMoBmP4UtrSlYvHp5X5KGEB0ZKykydMnYC28zBAbdbFDu7CsatlfoOa1vH4qBpNkOCXp/YqMmA==" + }, "node_modules/collect-v8-coverage": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz", @@ -18103,6 +18116,11 @@ "node": ">= 8" } }, + "node_modules/validate.js": { + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/validate.js/-/validate.js-0.13.1.tgz", + "integrity": "sha512-PnFM3xiZ+kYmLyTiMgTYmU7ZHkjBZz2/+F0DaALc/uUtVzdCt1wAosvYJ5hFQi/hz8O4zb52FQhHZRC+uVkJ+g==" + }, "node_modules/vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index 59b74c2..9c6f448 100644 --- a/package.json +++ b/package.json @@ -5,11 +5,13 @@ "dependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@babel/preset-react": "^7.24.7", + "@date-fns/tz": "^1.0.2", "@emotion/react": "11.13.0", "@emotion/styled": "11.13.0", "@wordpress/i18n": "^5.5.0", "@wordpress/react-i18n": "^4.5.0", "@xyflow/react": "^12.2.0", + "codice-fiscale-js": "^2.3.22", "deep-object-diff": "^1.1.9", "dompurify": "3.1.6", "fast-deep-equal": "^3.1.3", @@ -28,6 +30,7 @@ "react-hook-form": "7.52.2", "react-router-dom": "6.26.0", "react-scripts": "^5.0.1", + "validate.js": "^0.13.1", "zustand": "4.5.4", "zustand-x": "3.0.4" }, diff --git a/src/assets/scss/components/appForm.scss b/src/assets/scss/components/appForm.scss index 7d77686..142c6df 100644 --- a/src/assets/scss/components/appForm.scss +++ b/src/assets/scss/components/appForm.scss @@ -77,7 +77,7 @@ align-items: center; } -.appForm__oneCol { +.appForm__col { display: flex; flex-direction: column; gap: 7px; @@ -87,18 +87,13 @@ } } -.appForm__twoCols { - display: flex; - gap: 1rem; - justify-content: space-between; - flex-wrap: wrap; - container-name: form_two_cols; - container-type: inline-size; +.appForm__cols { + display: grid; + gap: 0.5rem; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + width: 100%; > div { - flex: 1 1 auto; - min-width: 300px; - max-width: 48%; display: flex; flex-direction: column; gap: 14px; @@ -111,14 +106,6 @@ } } -@container form_two_cols (max-width: 620px) { - .appForm__twoCols { - > div { - max-width: 100%; - } - } -} - .appForm__repeaterItem { padding: 0.5rem 0.5rem 0.5rem 1rem; border-left: 3px solid #dadada; diff --git a/src/assets/scss/components/appPage.scss b/src/assets/scss/components/appPage.scss index 5ae1937..f5e3ca4 100644 --- a/src/assets/scss/components/appPage.scss +++ b/src/assets/scss/components/appPage.scss @@ -1,4 +1,5 @@ .appPage { + position: relative; display: flex; flex-direction: column; flex-grow: 2; @@ -9,6 +10,7 @@ font-style: normal; font-weight: 600; line-height: normal; + text-align: center; } } @@ -132,6 +134,9 @@ &.rowContent { padding: 7px 0; + flex-direction: column; + align-items: flex-start; + gap: 0.3rem; } p { diff --git a/src/assets/scss/components/formBuilder.scss b/src/assets/scss/components/formBuilder.scss index 8289733..9e0d482 100644 --- a/src/assets/scss/components/formBuilder.scss +++ b/src/assets/scss/components/formBuilder.scss @@ -3,7 +3,7 @@ display: flex; gap: 20px; width: 100%; - min-height: 500px; + height: 600px; } .formBuilder__main { @@ -21,6 +21,8 @@ } .formBuilder__content { + height: 100%; + overflow-y: scroll; flex-grow: 2; display: flex; flex-direction: column; @@ -84,6 +86,8 @@ list-style: none; padding: 0; margin: 0; + height: 100%; + overflow-y: scroll; } .formBuilder__elementItem { display: flex; diff --git a/src/assets/scss/components/login.scss b/src/assets/scss/components/login.scss index ad84979..9aad814 100644 --- a/src/assets/scss/components/login.scss +++ b/src/assets/scss/components/login.scss @@ -11,4 +11,30 @@ width: 100%; max-width: 540px; padding: 24px; + + .appForm { + width: 100%; + } +} + +.appPageLogin__spidBtn.appPageLogin__spidBtn { + display: flex; + align-items: center; + width: 100%; + padding: 8px; + gap: 11px; + background: #06C; + border: none; + + &:hover { + cursor: pointer; + } + + span { + color: #FFF; + font-size: 17.25px; + font-style: normal; + font-weight: 600; + line-height: 15px; + } } \ No newline at end of file diff --git a/src/assets/scss/components/misc.scss b/src/assets/scss/components/misc.scss index bf17896..0bf2216 100644 --- a/src/assets/scss/components/misc.scss +++ b/src/assets/scss/components/misc.scss @@ -91,10 +91,14 @@ padding: 0.5rem; } -.p-message-detail { +.p-message-detail, .p-progressbar-label { color: white; } +.p-dialog-content { + padding: 1rem 1.5rem; +} + .blockingOverlay { position: absolute; z-index: 999; diff --git a/src/components/FlowBuilder/components/NodeInitialForm/index.js b/src/components/FlowBuilder/components/NodeInitialForm/index.js index 1573ba4..20f6ace 100644 --- a/src/components/FlowBuilder/components/NodeInitialForm/index.js +++ b/src/components/FlowBuilder/components/NodeInitialForm/index.js @@ -4,12 +4,14 @@ import { isEmpty, head } from 'ramda'; // store import { storeGet, storeSet } from '../../../../store'; +import { __ } from '@wordpress/i18n'; const NodeInitialForm = ({ data: { id, label = '' } }) => { - const [options, setOptions] = useState([]); + const flowData = storeGet.main.flowData(); + //const [options, setOptions] = useState([]); const [value, setValue] = useState(''); - const onChangeFn = (e) => { + /*const onChangeFn = (e) => { const { value } = e.target; const data = { formId: String(id), @@ -18,12 +20,14 @@ const NodeInitialForm = ({ data: { id, label = '' } }) => { } setValue(value); storeSet.main.addFlowData(data); - } + }*/ - useEffect(() => { - const forms = storeGet.main.flowForms(); - if (forms.length > 2) { - const form = head(forms.filter(o => String(o.id) === String(id))) + /*useEffect(() => { + const flowForms = storeGet.main.flowForms(); + const flowData = storeGet.main.flowData(); + + if (flowForms.length > 2) { + const form = head(flowForms.filter(o => String(o.id) === String(id))) const relevantFields = form ? form.content .filter(o => ['radio', 'select'].includes(o.name)) @@ -31,20 +35,42 @@ const NodeInitialForm = ({ data: { id, label = '' } }) => { : []; setOptions(relevantFields); } - }, [id]); + + const flowDataForm = head(flowData.filter(o => String(o.formId) === String(id))); + + if (flowDataForm) { + setValue(flowDataForm.chosenField); + } + }, [id]);*/ + + useEffect(() => { + const flowForms = storeGet.main.flowForms(); + const form = head(flowForms.filter(o => String(o.id) === String(id))); + const flowDataItem = head(flowData.filter(o => String(o.formId) === String(id))); + + if (form && flowDataItem) { + const field = head(form.content.filter(o => o.id === flowDataItem.chosenField)); + + if (field) { + const label = head(field.settings.filter(o => o.name === 'label')); + setValue(label ? label.value : field.label); + } + } + }, [flowData]); return (
- {options && !isEmpty(options) + {value} + {/*{options && !isEmpty(options) ? : null} + : null}*/} { const edge = head(flowEdges.filter(o => o.target === String(id))); if (edge) { const sourceForm = edge.source; - const sourceFormData = head(flowData.filter(o => o.formId === sourceForm)); + const sourceFormData = head(flowData.filter(o => String(o.formId) === sourceForm)); const flowForms = storeGet.main.flowForms(); const form = head(flowForms.filter(o => String(o.id) === String(sourceForm))); + if (form && sourceFormData) { const { chosenField } = sourceFormData; const field = head(form.content.filter(o => o.id === chosenField)); @@ -38,7 +40,12 @@ const NodeIntermediateForm = ({ data: { id, label = '' } }) => { } } } + } + const flowDataForm = head(flowData.filter(o => String(o.formId) === String(id))); + + if (flowDataForm) { + setValue(flowDataForm.chosenValue); } }, [flowEdges, flowData]); @@ -54,7 +61,7 @@ const NodeIntermediateForm = ({ data: { id, label = '' } }) => { {options && !isEmpty(options) ?