diff --git a/src/assets/scss/components/fieldsRepeater.scss b/src/assets/scss/components/fieldsRepeater.scss index 2a28eda..dd4b4ba 100644 --- a/src/assets/scss/components/fieldsRepeater.scss +++ b/src/assets/scss/components/fieldsRepeater.scss @@ -2,12 +2,13 @@ display: flex; flex-direction: column; align-items: flex-start; - gap: 30px; + gap: 10px; width: 100%; } .fieldsRepeater form { display: contents; + } .fieldsRepeater__panel { @@ -18,6 +19,16 @@ align-items: center; display: flex; justify-content: space-between; + + > span { + width: 100%; + height: 100%; + + &:hover { + cursor: pointer; + color: var(--menuitem-active-background); + } + } } .fieldsRepeater__fields { diff --git a/src/pages/DomandaEditPreInstructor/components/RepeaterFields/index.js b/src/pages/DomandaEditPreInstructor/components/RepeaterFields/index.js index 384e4dc..a28d452 100644 --- a/src/pages/DomandaEditPreInstructor/components/RepeaterFields/index.js +++ b/src/pages/DomandaEditPreInstructor/components/RepeaterFields/index.js @@ -1,7 +1,6 @@ -import React, { useMemo, useState, useEffect } from 'react'; -import { klona } from 'klona'; +import React, { useMemo, useState, useEffect, useCallback } from 'react'; import { useForm } from 'react-hook-form'; -import { isEmpty } from 'ramda'; +import { isEmpty, head } from 'ramda'; import { __ } from '@wordpress/i18n'; // tools @@ -11,7 +10,12 @@ import uniqid from '../../../../helpers/uniqid'; import FormField from '../../../../components/FormField'; import { Button } from 'primereact/button'; -const RepeaterFields = ({ sourceId, sourceName }) => { +const RepeaterFields = ({ + sourceId, + sourceName, + updateFn = () => {}, + defaultValue = [] +}) => { const [items, setItems] = useState([]); const [chosen, setChosen] = useState(''); const [formInitialData, setFormInitialData] = useState({}); @@ -22,7 +26,7 @@ const RepeaterFields = ({ sourceId, sourceName }) => { setValue, register, trigger, - getValues, + reset, watch } = useForm({ defaultValues: useMemo(() => { @@ -35,32 +39,49 @@ const RepeaterFields = ({ sourceId, sourceName }) => { const onSubmit = () => { }; - const doUpdateAmendment = () => { + const doUpdateAfterFileUploaded = () => { trigger(); - let formValues = klona(getValues()); - console.log('formValues', formValues); } - const addNew = () => { + const addNew = useCallback(() => { setValue('nameValue', ''); - setValue('fileValue', {}); + setValue('fileValue', []); trigger(); const uid = uniqid('f'); const newItem = { fieldId: uid, - name: '', - file: {}, + nameValue: '', + fileValue: [], + valid: true } setItems([...items, newItem]); setChosen(uid); trigger(); - } + }, [items]); + + const setNewChosen = useCallback((id) => { + const chosenObj = head(items.filter(o => id === o.fieldId)); + setChosen(chosen === id ? '' : id); + reset(); + if (chosenObj) { + setValue('nameValue', chosenObj.nameValue); + setValue('fileValue', chosenObj.fileValue); + } + }, [items]); + + const removeItem = useCallback((id) => { + setItems([...items.filter(o => id !== o.fieldId)]); + if (chosen === id) { + setChosen(''); + reset(); + } + }, [items, chosen]); useEffect(() => { const updatedItems = items.map((o) => { return o.fieldId === chosen ? { ...o, - name: watchName + nameValue: watchName } : o; }) setItems([...updatedItems]); @@ -70,29 +91,35 @@ const RepeaterFields = ({ sourceId, sourceName }) => { const updatedItems = items.map((o) => { return o.fieldId === chosen ? { ...o, - file: watchFile + fileValue: watchFile } : o; }) setItems([...updatedItems]); }, [watchFile]); useEffect(() => { - console.log('items', items); + updateFn(items); }, [items]); - //console.log('items', items, chosen); + useEffect(() => { + setItems(defaultValue); + }, []) + + console.log('items', items, chosen); return (