BFLOWS/bflows-bandi-fe
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- updated version;

Browse Source
This commit is contained in:
Vitalii Kiiko
2024-09-05 17:15:57 +02:00
parent d2a28bea1b
commit 4054745695
33 changed files with 516 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/FlowBuilder/components/NodeInitialForm/index.js Normal file
View File

@@ -0,0 +1,55 @@
import React, { useEffect, useState } from 'react';
import { Handle, Position } from '@xyflow/react';
import { isEmpty, head } from 'ramda';
// store
import { storeGet, storeSet } from '../../../../store';
const NodeInitialForm = ({ data: { id, label = '' } }) => {
const [options, setOptions] = useState([]);
const [value, setValue] = useState('');
const onChangeFn = (e) => {
const { value } = e.target;
const data = {
formId: String(id),
chosenField: value,
chosenValue: ''
}
setValue(value);
storeSet.main.addFlowData(data);
}
useEffect(() => {
const forms = storeGet.main.flowForms();
const form = head(forms.filter(o => String(o.id) === String(id)))
const relevantFields = form
? form.content
.filter(o => ['radio', 'select'].includes(o.name))
.map(o => ({ name: o.id, label: o.label }))
: [];
setOptions(relevantFields);
}, [id]);
return (
<div className="nodeInitialForm">
<label>
{label}
</label>
{options && !isEmpty(options)
? <select onChange={onChangeFn} value={value}>
<option value="">Choose form</option>
{options.map(o => <option key={o.name} value={o.name}>
{o.label}
</option>)}
</select> : null}
<Handle
type="source"
position={Position.Bottom}
isConnectable={true}
/>
</div>
);
}
export default NodeInitialForm;

71
src/components/FlowBuilder/components/NodeIntermediateForm/index.js Normal file
View File

@@ -0,0 +1,71 @@
import React, { useEffect, useState } from 'react';
import { Handle, Position } from '@xyflow/react';
import { head, isEmpty } from 'ramda';
import { useStore, storeSet, storeGet } from '../../../../store';
const NodeIntermediateForm = ({ data: { id, label = '' } }) => {
const flowEdges = useStore().main.flowEdges();
const flowData = useStore().main.flowData();
const [options, setOptions] = useState([]);
const [value, setValue] = useState('');
const onChangeFn = (e) => {
const { value } = e.target;
const data = {
formId: String(id),
chosenField: '',
chosenValue: value
}
setValue(value);
storeSet.main.addFlowData(data);
}
useEffect(() => {
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 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));
if (field) {
const options = head(field.settings.filter(o => o.name === 'options'));
if (options) {
setOptions(options.value);
}
}
}
}
}, [flowEdges, flowData]);
return (
<div className="nodeInitialForm">
<Handle
type="target"
position={Position.Top}
isConnectable={true}
/>
<label>
{label}
</label>
{options && !isEmpty(options)
? <select onChange={onChangeFn} value={value}>
<option value="">Choose form</option>
{options.map(o => <option key={o.name} value={o.name}>
{o.label}
</option>)}
</select> : null}
<Handle
type="source"
position={Position.Bottom}
isConnectable={true}
/>
</div>
);
}
export default NodeIntermediateForm;

41
src/components/FlowBuilder/index.js
View File

@@ -1,19 +1,26 @@
import React, { useEffect, useState } from 'react';
import {
ReactFlow,
Background,
useNodesState,
useEdgesState,
addEdge,
getIncomers,
getOutgoers,
getConnectedEdges,
Background
} from '@xyflow/react';
import { isEmpty } from 'ramda';
import '@xyflow/react/dist/style.css';
const FlowBuilder = ({ initialForm = 0, finalForm = 0, forms = [], updateFn }) => {
// store
import { useStore, storeSet } from '../../store';
// nodes
import NodeInitialForm from './components/NodeInitialForm';
import NodeIntermediateForm from './components/NodeIntermediateForm';
const nodeTypes = {
initialForm: NodeInitialForm,
intermediateForm: NodeIntermediateForm
};
const FlowBuilder = ({ initialForm = 0, finalForm = 0 }) => {
const forms = useStore().main.flowForms();
const [nodes, setNodes] = useState([]);
const [edges, setEdges] = useState([]);
@@ -35,22 +42,23 @@ const FlowBuilder = ({ initialForm = 0, finalForm = 0, forms = [], updateFn }) =
if (o.id === initialForm) {
obj = {
id: String(o.id),
type: 'input',
data: { label: o.label },
type: 'initialForm',
data: { label: o.label, id: o.id },
position: { x: 0, y: 0 },
}
} else if (o.id === finalForm) {
obj = {
id: String(o.id),
type: 'output',
data: { label: o.label },
data: { label: o.label, id: o.id },
position: { x: 0, y: 300 },
}
} else {
const x = coordinates.splice(0, 1);
obj = {
id: String(o.id),
data: { label: o.label },
type: 'intermediateForm',
data: { label: o.label, id: o.id },
position: { x, y: 150 },
}
}
@@ -60,14 +68,14 @@ const FlowBuilder = ({ initialForm = 0, finalForm = 0, forms = [], updateFn }) =
let edges = [];
forms.map(o => {
if (o.id !== initialForm && o.id !== finalForm) {
edges.push({ id: `${initialForm}->${o.id}`, source: String(initialForm), target: String(o.id) });
edges.push({ id: `${o.id}->${finalForm}`, source: String(o.id), target: String(finalForm) });
edges.push({ id: `${initialForm}->${o.id}`, source: String(initialForm), target: String(o.id), type: 'smoothstep' });
edges.push({ id: `${o.id}->${finalForm}`, source: String(o.id), target: String(finalForm), type: 'smoothstep' });
}
});
setNodes(initialNodes);
setEdges(edges);
updateFn(edges);
storeSet.main.flowEdges(edges);
} else {
setNodes([]);
setEdges([]);
@@ -76,13 +84,14 @@ const FlowBuilder = ({ initialForm = 0, finalForm = 0, forms = [], updateFn }) =
return (
!isEmpty(nodes) && !isEmpty(edges)
? <div className="reactFlow__wrapper">
? <div className="flowBuilder__wrapper">
<ReactFlow
nodes={nodes}
edges={edges}
nodesDraggable={false}
nodesConnectable={false}
fitView
nodeTypes={nodeTypes}
attributionPosition="top-right"
>
<Background variant="dots" gap={12} size={1}/>

38
src/components/FormFieldRepeaterFaq/index.js
View File

@@ -27,6 +27,7 @@ const FormFieldRepeaterFaq = ({
const [stateOptionsData, setStateOptionsData] = useState([]);
const [question, setQuestion] = useState('');
const [answer, setAnswer] = useState('');
const [title, setTitle] = useState('');
const [editDataIndex, setEditDataIndex] = useState(null);
const [isVisibleEditDialog, setIsVisibleEditDialog] = useState(false);
@@ -37,14 +38,13 @@ const FormFieldRepeaterFaq = ({
const selectItem = (e) => {
const targetedOption = head(stateOptionsData.filter(o => o.value === e.value));
console.log('selected:', e, stateOptionsData, targetedOption)
if (targetedOption) {
setStateFieldData([...stateFieldData, targetedOption]);
setStateFieldData([...stateFieldData, {...targetedOption, isVisible: true}]);
}
}
const addNewItem = () => {
const newItem = { id: null, lookUpDataId: null, title: '', value: '', isVisible: true };
const newItem = { id: null, lookUpDataId: null, title: '', value: '', response: '', isVisible: true };
setStateFieldData([...stateFieldData, newItem]);
}
@@ -76,6 +76,8 @@ const FormFieldRepeaterFaq = ({
const onChangeEditItem = (value, key) => {
if (key === 'title') {
setTitle(value);
} else if (key === 'value') {
setQuestion(value);
} else {
setAnswer(value)
@@ -85,8 +87,9 @@ const FormFieldRepeaterFaq = ({
const saveEditDialog = () => {
const newData = stateFieldData.map((o, i) => {
if (i === editDataIndex) {
o.title = question;
o.value = answer;
o.title = title;
o.value = question;
o.response = answer;
return o
} else {
return o;
@@ -106,7 +109,10 @@ const FormFieldRepeaterFaq = ({
const footerEditDialog = () => {
return <div>
<Button type="button" label={__('Anulla', 'gepafin')} onClick={hideEditDialog} outlined/>
<Button type="button" label={__('Salva', 'gepafin')} onClick={saveEditDialog}/>
<Button
type="button"
disabled={isEmpty(title) || isEmpty(question) || isEmpty(answer)}
label={__('Salva', 'gepafin')} onClick={saveEditDialog}/>
</div>
}
@@ -151,6 +157,7 @@ const FormFieldRepeaterFaq = ({
<Dropdown onChange={(e) => selectItem(e)}
optionDisabled={(opt) => usedExistingValues().includes(opt.title)}
options={stateOptionsData}
placeholder={__('Scegli tra quelli pre-creati', 'gepafin')}
optionLabel="title"/>
</div>
<Accordion activeIndex={0}>
@@ -164,8 +171,13 @@ const FormFieldRepeaterFaq = ({
onLabel=""
offLabel=""
checked={o.isVisible}
onChange={(e) => setChecked(e, i)}/>
{o.title}
onChange={(e) => {
console.log('e', e);
e.preventDefault();
e.stopPropagation();
setChecked(e, i);
}}/>
{o.value}
</div>
<div className="appForm__faqTabItem">
<Button icon="pi pi-pencil" severity="success"
@@ -179,7 +191,7 @@ const FormFieldRepeaterFaq = ({
}
>
<p className="m-0">
{o.value}
{o.response}
</p>
</AccordionTab>)}
</Accordion>
@@ -192,11 +204,15 @@ const FormFieldRepeaterFaq = ({
<div className="appPage__spacer"></div>
<div className="appForm__field">
<label>{__('Titolo FAQ', 'gepafin')}</label>
<InputText value={question} onChange={(e) => onChangeEditItem(e.target.value, 'title')}/>
<InputText value={title} onChange={(e) => onChangeEditItem(e.target.value, 'title')}/>
</div>
<div className="appForm__field">
<label>{__('Domanda', 'gepafin')}</label>
<InputText value={question} onChange={(e) => onChangeEditItem(e.target.value, 'value')}/>
</div>
<div className="appForm__field">
<label>{__('Risposta', 'gepafin')}</label>
<InputTextarea value={answer} onChange={(e) => onChangeEditItem(e.target.value, 'value')}
<InputTextarea value={answer} onChange={(e) => onChangeEditItem(e.target.value, 'response')}
rows={5}
cols={30}/>
</div>

31
src/components/UnsavedChangesDetector/index.js
View File

@@ -1,36 +1,29 @@
import { useEffect, useState, useCallback } from 'react';
import { useEffect } from 'react';
import { __ } from '@wordpress/i18n';
import equal from 'fast-deep-equal';
// tools
// store
import { storeGet } from '../../store';
const UnsavedChangesDetector = ({ initialData, getValuesFn }) => {
const [initial, setInitial] = useState(initialData);
const warnIfUnsavedChanges = useCallback((event) => {
const updatedData = getValuesFn();
const isEqual = equal(initial, updatedData);
const UnsavedChangesDetector = ({ getValuesFn }) => {
const warnIfUnsavedChanges = (event) => {
const formData = getValuesFn();
const initial = storeGet.main.formInitialData();
const isEqual = equal(initial, formData);
console.log(initial, formData);
if (!isEqual) {
event.returnValue = __('You have unsaved changes. If you proceed, they will be lost.', 'gepafin');
}
return event.returnValue;
}, [initialData]);
};
useEffect(() => {
setInitial(initialData);
}, [initialData])
useEffect(() => {
window.addEventListener('beforeunload', (e) => {
warnIfUnsavedChanges(e);
});
window.addEventListener('beforeunload', warnIfUnsavedChanges);
return () => {
window.removeEventListener('beforeunload', (e) => {
warnIfUnsavedChanges(e);
});
window.removeEventListener('beforeunload', warnIfUnsavedChanges);
}
}, []);
}