From 362e767a75b91be20a2cc073ef124bfff3575646 Mon Sep 17 00:00:00 2001 From: vmonakhov Date: Sun, 15 Dec 2024 16:21:27 +0300 Subject: [PATCH] improved JoinMarkupModal --- src/components/JoinMarkupsModal/index.js | 391 ++++++++++++----------- 1 file changed, 205 insertions(+), 186 deletions(-) diff --git a/src/components/JoinMarkupsModal/index.js b/src/components/JoinMarkupsModal/index.js index 452f0d7e..a30d22ad 100644 --- a/src/components/JoinMarkupsModal/index.js +++ b/src/components/JoinMarkupsModal/index.js @@ -1,5 +1,5 @@ import React, { useCallback, useContext, useState } from "react"; -import { Button, Checkbox, Form, Modal, Table, Message, Label } from "semantic-ui-react"; +import { Button, Checkbox, Form, Modal, Table, Message, Icon } from "semantic-ui-react"; import { isEqual } from "lodash"; import PropTypes from "prop-types"; import { useMutation } from "hooks"; @@ -56,27 +56,22 @@ const JoinMarkupsModal = ({ perspectiveId, onCloseUpdate, onClose }) => { const [firstTextRelation, setFirstTextRelation] = useState(null); const [secondTextRelation, setSecondTextRelation] = useState(null); const [typeRelation, setTypeRelation] = useState(null); - - const joinActive = firstTextRelation && secondTextRelation && typeRelation; - const [deleteActive, setDeleteActive] = useState(false); + const [selectedRelations, setSelectedRelations] = useState(null); const [isDirty, setIsDirty] = useState(false); - const [selectedRelations, setSelectedRelations] = useState([]); + const joinActive = firstTextRelation && secondTextRelation && typeRelation; + const deleteActive = selectedRelations; + const onCleverClose = isDirty ? onCloseUpdate : onClose; const [markupDict, setMarkupDict] = useState({}); const [groupDict, setGroupDict] = useState({}); const [groupTotal, setGroupTotal] = useState(0); + const [selectedTotal, setSelectedTotal] = useState(0); const [warnMessage, setWarnMessage] = useState(null); const [errorMessage, setErrorMessage] = useState(null); const [successMessage, setSuccessMessage] = useState(null); - const {data, error, loading, refetch} = useQuery(getMarkupTreeQuery, { - variables: { perspectiveId }, - fetchPolicy: "network-only", - onCompleted: data => setRelationDict(data.markups) - }); - const [createMarkupGroup] = useMutation(createMarkupGroupMutation); const [deleteMarkupGroup] = useMutation(deleteMarkupGroupMutation); @@ -139,7 +134,7 @@ const JoinMarkupsModal = ({ perspectiveId, onCloseUpdate, onClose }) => { } const onAddRelation = useCallback(() => { - console.log("onAddRelation!!!!!!!"); + //console.log("onAddRelation!!!!!!!"); resetMessages(); @@ -173,25 +168,45 @@ const JoinMarkupsModal = ({ perspectiveId, onCloseUpdate, onClose }) => { setSuccessMessage("The group was successfully added."); - }, [firstTextRelation, secondTextRelation, typeRelation]); + }, [firstTextRelation, secondTextRelation, typeRelation, groupDict]); const onDeleteRelation = useCallback(() => { + + resetMessages(); + + const groupIds = (selectedRelations || []).map( + id => id.split('_')); + + const markups = []; + (selectedRelations || []).forEach(id => { + const group_markups = groupDict[id].markups.map(m => m.id.split('_')); + markups.push(...group_markups); + }); + + /* console.log("onDeleteRelation!!!!!!!"); console.log("Их будем удалять: selectedRelations===="); - console.log(selectedRelations); + console.log(groupIds); + console.log("Их будем удалять: selectedMarkups===="); + console.log(markups); + */ + + deleteMarkupGroup({ + variables: { groupIds, markups } + }).then(refetch); + + setSelectedRelations(null); + setSelectedTotal(0); setIsDirty(true); - }, []); - const onRelationSelect = useCallback((relation_id, checked) => { - console.log("onRelationSelect!!!!!!!"); - /*console.log("relation_id===="); - console.log(relation_id); - console.log("checked===="); - console.log(checked); - console.log("Начало функции: selectedRelations===="); - console.log(selectedRelations);*/ + setSuccessMessage("The group was successfully deleted."); + + }, [groupDict, selectedRelations]); - const selectedIds = selectedRelations; + const onRelationSelect = (relation_id, checked) => { + //console.log("onRelationSelect!!!!!!!"); + + const selectedIds = (selectedRelations || []); const position = selectedIds.indexOf(relation_id); @@ -201,14 +216,13 @@ const JoinMarkupsModal = ({ perspectiveId, onCloseUpdate, onClose }) => { selectedIds.splice(position, 1); } - console.log("onRelationSelect: selectedIds======"); - console.log(selectedIds); - - setSelectedRelations(selectedIds); - setDeleteActive(selectedIds.length > 0); - }, []); + //console.log("onRelationSelect: selectedIds======"); + //console.log(selectedIds); - const onCleverClose = isDirty ? onCloseUpdate : onClose; + const selectedTotal = selectedIds.length; + setSelectedRelations(selectedTotal ? selectedIds : null); + setSelectedTotal(selectedTotal); + }; /*console.log("perspectiveId===="); console.log(perspectiveId); @@ -239,169 +253,174 @@ const JoinMarkupsModal = ({ perspectiveId, onCloseUpdate, onClose }) => { {getTranslation("Join markups")} -
-
- {/* Table Markups */} -
-
- - - - - {firstField.split('_')[1]}: {firstTextRelation} - - - - - {markupDict[firstField].map(markup => { - return ( - - { setFirstTextRelation(markup.id); resetMessages(); }} - className={(markup.id === firstTextRelation && "selected-text-relation") || ""} - > - {markup.text} - - - ); - })} - -
-
- -
- - - - - {secondField.split('_')[1]}: {secondTextRelation} - - - - - {markupDict[secondField].map(markup => { - return ( - - { setSecondTextRelation(markup.id); resetMessages(); }} - className={(markup.id === secondTextRelation && "selected-text-relation") || ""} - > - {markup.text} - - - ); - })} - -
-
-
- {/*
- {statistics.map(stat => ( - - ))} - */} -
- { setTypeRelation(value); resetMessages(); }} - className="lingvo-radio" - /> - - { setTypeRelation(value); resetMessages(); }} - className="lingvo-radio" + { error || loading ? ( + + {`${getTranslation("Loading markups and groups data")}...`} + + ) : ( +
+
+ {/* Table Markups */} +
+
+ + + + + {firstField.split('_')[1]}: {firstTextRelation} + + + + + {markupDict[firstField].map(markup => { + return ( + + { setFirstTextRelation(markup.id); resetMessages(); }} + className={(markup.id === firstTextRelation && "selected-text-relation") || ""} + > + {markup.text} + + + ); + })} + +
+
+ +
+ + + + + {secondField.split('_')[1]}: {secondTextRelation} + + + + + {markupDict[secondField].map(markup => { + return ( + + { setSecondTextRelation(markup.id); resetMessages(); }} + className={(markup.id === secondTextRelation && "selected-text-relation") || ""} + > + {markup.text} + + + ); + })} + +
+
+
+ {/* + {statistics.map(stat => ( + + ))} + */} +
+ { setTypeRelation(value); resetMessages(); }} + className="lingvo-radio" + /> + + { setTypeRelation(value); resetMessages(); }} + className="lingvo-radio" + /> + + +
+ {/* /Table Markups */}
- {/* /Table Markups */} -
- { warnMessage && ( - - {getTranslation("Warning")} -

- {getTranslation(warnMessage)} -

- - )} - { successMessage && ( - - {getTranslation("Success")} -

- {getTranslation(successMessage)} -

- - )} - -
- {/* Table Relations */} - - - -   - {firstField.split('_')[1]} - {secondField.split('_')[1]} - {getTranslation("Type")} - {getTranslation("Author")} - - - - {Object.keys(groupDict).map(group_id => groupDict[group_id].markups.length > 1 && ( - - - isEqual(e, relation.id))} - onChange={(e, { checked }) => onRelationSelect(group_id, checked)} - /> - - {groupDict[group_id].markups[0].text} - {groupDict[group_id].markups[1].text} - {groupDict[group_id].type} - {groupDict[group_id].author_name} + { warnMessage && ( + + {getTranslation("Warning")} +

+ {getTranslation(warnMessage)} +

+ + )} + { successMessage && ( + + {getTranslation("Success")} +

+ {getTranslation(successMessage)} +

+ + )} + +
+ {/* Table Relations */} +
+ + +   + {firstField.split('_')[1]} + {secondField.split('_')[1]} + {getTranslation("Type")} + {getTranslation("Author")} - ))} - -
- {/* /Table Relations */} + + + {Object.keys(groupDict).map(group_id => groupDict[group_id].markups.length > 1 && ( + + + isEqual(e, relation.id))} + onChange={(e, { checked }) => onRelationSelect(group_id, checked)} + /> + + {groupDict[group_id].markups[0].text} + {groupDict[group_id].markups[1].text} + {groupDict[group_id].type} + {groupDict[group_id].author_name} + + ))} + + + {/* /Table Relations */} +
-
+ )} - +