From 949ff95933889ce6bdc2193e282deecbda859a7f Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Tue, 3 Sep 2024 17:24:41 +0200 Subject: [PATCH] - updates and fixes; --- src/assets/scss/components/appForm.scss | 18 ++- .../{Fileupload => FileuploadAsync}/index.js | 4 +- .../FormField/components/Radio/index.js | 41 +++++++ .../FormField/components/Select/index.js | 50 ++++++++ src/components/FormField/index.js | 10 +- src/components/FormFieldRepeater/index.js | 14 ++- src/components/FormFieldRepeaterFaq/index.js | 34 +++--- src/components/ProtectedRoute/index.js | 10 +- src/helpers/set404FromErrorResponse.js | 9 ++ src/layouts/DefaultLayout/index.js | 16 ++- .../Bandi/components/AllBandiTable/index.js | 5 - .../components/BandoEditFormStep1/index.js | 2 +- .../components/BandoEditFormStep2/index.js | 6 +- src/pages/BandoEdit/index.js | 26 ++++- src/pages/BandoForms/index.js | 39 +++++-- src/pages/BandoFormsEdit/index.js | 16 ++- src/pages/BandoFormsPreview/index.js | 109 ++++++++++-------- src/pages/BandoView/index.js | 2 + src/routes.js | 1 - src/store/initial.js | 1 + src/tempData.js | 46 +++++++- 21 files changed, 342 insertions(+), 117 deletions(-) rename src/components/FormField/components/{Fileupload => FileuploadAsync}/index.js (98%) create mode 100644 src/components/FormField/components/Radio/index.js create mode 100644 src/components/FormField/components/Select/index.js create mode 100644 src/helpers/set404FromErrorResponse.js diff --git a/src/assets/scss/components/appForm.scss b/src/assets/scss/components/appForm.scss index 8288a60..843e5b9 100644 --- a/src/assets/scss/components/appForm.scss +++ b/src/assets/scss/components/appForm.scss @@ -43,6 +43,11 @@ } } +.appForm__fieldItem { + display: flex; + gap: 0.5rem; +} + .appForm__fileUploadItem { display: flex; justify-content: space-between; @@ -73,11 +78,13 @@ gap: 1rem; justify-content: space-between; flex-wrap: wrap; + container-name: form_two_cols; + container-type: inline-size; > div { flex: 1 1 auto; min-width: 300px; - max-width: 700px; + max-width: 48%; display: flex; flex-direction: column; gap: 14px; @@ -87,6 +94,15 @@ } } } + +@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/components/FormField/components/Fileupload/index.js b/src/components/FormField/components/FileuploadAsync/index.js similarity index 98% rename from src/components/FormField/components/Fileupload/index.js rename to src/components/FormField/components/FileuploadAsync/index.js index 5604818..07ecc18 100644 --- a/src/components/FormField/components/Fileupload/index.js +++ b/src/components/FormField/components/FileuploadAsync/index.js @@ -8,7 +8,7 @@ import { FileUpload } from 'primereact/fileupload'; import { Tag } from 'primereact/tag'; import { Button } from 'primereact/button'; -const Fileupload = ({ +const FileuploadAsync = ({ fieldName, setDataFn, label, @@ -150,4 +150,4 @@ const Fileupload = ({ ) } -export default Fileupload; \ No newline at end of file +export default FileuploadAsync; \ No newline at end of file diff --git a/src/components/FormField/components/Radio/index.js b/src/components/FormField/components/Radio/index.js new file mode 100644 index 0000000..6606e0a --- /dev/null +++ b/src/components/FormField/components/Radio/index.js @@ -0,0 +1,41 @@ +import React from 'react'; +import { classNames } from 'primereact/utils'; +import { Controller } from 'react-hook-form'; +import { RadioButton } from 'primereact/radiobutton'; + +const Radio = ({ + fieldName, + label, + control, + errors, + defaultValue, + config = {}, + infoText = null, + options = [] + }) => { + const input = + options.map(o =>
+ field.onChange(e.value)} + checked={field.value === o.name}/> + +
)}/> + return ( + <> + + {input} + {infoText ? {infoText} : null} + ) +} + +export default Radio; \ No newline at end of file diff --git a/src/components/FormField/components/Select/index.js b/src/components/FormField/components/Select/index.js new file mode 100644 index 0000000..b1a40c6 --- /dev/null +++ b/src/components/FormField/components/Select/index.js @@ -0,0 +1,50 @@ +import React from 'react'; +import { classNames } from 'primereact/utils'; +import { Controller } from 'react-hook-form'; +import { Dropdown } from 'primereact/dropdown'; + +const Select = ({ + fieldName, + label, + control, + errors, + defaultValue, + config = {}, + infoText = null, + inputgroup = false, + icon = null, + placeholder = '', + options = [] + }) => { + const input = ( + field.onChange(e.value)} + options={options} + optionLabel="label" + placeholder={placeholder} + className={classNames({ 'p-invalid': fieldState.invalid })}/> + )}/> + return ( + <> + + {inputgroup + ?
+ + {icon} + + {input} +
+ : input} + {infoText ? {infoText} : null} + ) +} + +export default Select; \ No newline at end of file diff --git a/src/components/FormField/index.js b/src/components/FormField/index.js index 17692de..45adffa 100644 --- a/src/components/FormField/index.js +++ b/src/components/FormField/index.js @@ -7,9 +7,11 @@ import TextInput from './components/TextInput'; import TextArea from './components/TextArea'; import Datepicker from './components/Datepicker'; import DatepickerRange from './components/DatepickerRange'; -import Fileupload from './components/Fileupload'; +import FileuploadAsync from './components/FileuploadAsync'; import NumberInput from './components/NumberInput'; import Switch from './components/Switch'; +import Select from './components/Select'; +import Radio from './components/Radio'; const FormField = (props) => { const fields = { @@ -17,9 +19,11 @@ const FormField = (props) => { textarea: TextArea, datepicker: Datepicker, datepickerrange: DatepickerRange, - fileupload: Fileupload, + fileuploadasync: FileuploadAsync, numberinput: NumberInput, - switch: Switch + switch: Switch, + select: Select, + radio: Radio } const Comp = !isNil(fields[props.type]) ? fields[props.type] : null; diff --git a/src/components/FormFieldRepeater/index.js b/src/components/FormFieldRepeater/index.js index 6f4045e..e237fa1 100644 --- a/src/components/FormFieldRepeater/index.js +++ b/src/components/FormFieldRepeater/index.js @@ -1,13 +1,14 @@ import React, { useRef, useEffect, useState, useCallback } from 'react'; import { classNames } from 'primereact/utils'; import { __ } from '@wordpress/i18n'; -import { head, isNil, pluck } from 'ramda'; +import { head, isEmpty, isNil } from 'ramda'; // components import { InputText } from 'primereact/inputtext'; import { Button } from 'primereact/button'; import { Menu } from 'primereact/menu'; import { Dropdown } from 'primereact/dropdown'; +import { diff } from 'deep-object-diff'; const FormFieldRepeater = ({ data, @@ -84,11 +85,20 @@ const FormFieldRepeater = ({ }, [stateFieldData]); useEffect(() => { - const storeFieldData = data[fieldName] ?? []; + const storeFieldData = data ?? []; setStateFieldData(storeFieldData); register(fieldName, config); }, []); + useEffect(() => { + const diffData = diff(data, stateFieldData); + + if (!isEmpty(diffData)) { + const storeFieldData = data ?? []; + setStateFieldData(storeFieldData); + } + }, [data]); + useEffect(() => { setStateOptionsData([...options]); }, [options]); diff --git a/src/components/FormFieldRepeaterFaq/index.js b/src/components/FormFieldRepeaterFaq/index.js index 093a1b6..506e763 100644 --- a/src/components/FormFieldRepeaterFaq/index.js +++ b/src/components/FormFieldRepeaterFaq/index.js @@ -36,15 +36,15 @@ const FormFieldRepeaterFaq = ({ } const selectItem = (e) => { - const targetedOption = head(stateOptionsData.filter(o => o.question === e.value)); - + const targetedOption = head(stateOptionsData.filter(o => o.value === e.value)); + console.log('selected:', e, stateOptionsData, targetedOption) if (targetedOption) { setStateFieldData([...stateFieldData, targetedOption]); } } const addNewItem = () => { - const newItem = { id: null, lookUpDataId: null, question: '', response: '', visible: true }; + const newItem = { id: null, lookUpDataId: null, title: '', value: '', isVisible: true }; setStateFieldData([...stateFieldData, newItem]); } @@ -61,8 +61,8 @@ const FormFieldRepeaterFaq = ({ const editItem = (e, index) => { e.stopPropagation(); - setQuestion(stateFieldData[index].question); - setAnswer(stateFieldData[index].response); + setQuestion(stateFieldData[index].title); + setAnswer(stateFieldData[index].value); setEditDataIndex(index); setIsVisibleEditDialog(true); } @@ -75,7 +75,7 @@ const FormFieldRepeaterFaq = ({ } const onChangeEditItem = (value, key) => { - if (key === 'question') { + if (key === 'title') { setQuestion(value); } else { setAnswer(value) @@ -85,8 +85,8 @@ const FormFieldRepeaterFaq = ({ const saveEditDialog = () => { const newData = stateFieldData.map((o, i) => { if (i === editDataIndex) { - o.question = question; - o.response = answer; + o.title = question; + o.value = answer; return o } else { return o; @@ -113,7 +113,7 @@ const FormFieldRepeaterFaq = ({ const usedExistingValues = useCallback(() => { return stateFieldData .filter(o => o.lookUpDataId) - .map(o => o.question) + .map(o => o.title) }, [stateFieldData]); useEffect(() => { @@ -149,9 +149,9 @@ const FormFieldRepeaterFaq = ({