From 0abd11cea6b53e616e7515775db0d07e76e05108 Mon Sep 17 00:00:00 2001 From: nataliauvarova Date: Wed, 27 Nov 2024 14:51:16 +0000 Subject: [PATCH] add modal Join markups --- src/api/i18n.js | 1 + src/components/CorporaView/index.js | 381 +++++++++++--------- src/components/JoinMarkupsModal/index.js | 36 ++ src/components/JoinMarkupsModal/styles.scss | 0 4 files changed, 246 insertions(+), 172 deletions(-) create mode 100644 src/components/JoinMarkupsModal/index.js create mode 100644 src/components/JoinMarkupsModal/styles.scss diff --git a/src/api/i18n.js b/src/api/i18n.js index 8d06d4bb..2d5b4ad7 100644 --- a/src/api/i18n.js +++ b/src/api/i18n.js @@ -452,6 +452,7 @@ export const stringsToTranslate = [ "iterative", "Ivannikov Institute for System Programming of the Russian Academy of Sciences", "Join", + "Join markups", "Keep", "Keep skipped vowel interval characters", "Language", diff --git a/src/components/CorporaView/index.js b/src/components/CorporaView/index.js index 5b4e410e..70809a2c 100644 --- a/src/components/CorporaView/index.js +++ b/src/components/CorporaView/index.js @@ -5,7 +5,7 @@ import { connect } from "react-redux"; import { Button, Dimmer, Header, Icon, Table } from "semantic-ui-react"; import { gql } from "@apollo/client"; import { graphql } from "@apollo/client/react/hoc"; -import update from 'immutability-helper'; +import update from "immutability-helper"; import { drop, flow, isEqual, reverse, sortBy, take } from "lodash"; import PropTypes from "prop-types"; import { branch, compose, renderComponent } from "recompose"; @@ -13,6 +13,9 @@ import { bindActionCreators } from "redux"; import styled from "styled-components"; import ApproveModal from "components/ApproveModal"; +/* new!!!!!! */ +import JoinMarkupsModal from "components/JoinMarkupsModal"; +/* /new!!!!!! */ import Pagination from "components/Pagination"; import Placeholder from "components/Placeholder"; import { openModal } from "ducks/modals"; @@ -99,22 +102,16 @@ export const queryLexicalEntries = gql` `; const updateLexgraphMutation = gql` - mutation updateLexgraph($id: LingvodocID!, - $lexgraph_before: String!, - $lexgraph_after: String!) { - update_entity_content(id: $id, - lexgraph_before: $lexgraph_before, - lexgraph_after: $lexgraph_after) { + mutation updateLexgraph($id: LingvodocID!, $lexgraph_before: String!, $lexgraph_after: String!) { + update_entity_content(id: $id, lexgraph_before: $lexgraph_before, lexgraph_after: $lexgraph_after) { triumph } } `; const updateEntityParentMutation = gql` - mutation updateEntityParent($id: LingvodocID!, - $new_parent_id: LingvodocID!) { - update_entity(id: $id, - new_parent_id: $new_parent_id) { + mutation updateEntityParent($id: LingvodocID!, $new_parent_id: LingvodocID!) { + update_entity(id: $id, new_parent_id: $new_parent_id) { entity triumph } @@ -151,16 +148,8 @@ const createLexicalEntryMutation = gql` `; const createEntityMutation = gql` - mutation createEntity( - $parent_id: LingvodocID! - $field_id: LingvodocID! - $lexgraph_after: String - ) { - create_entity( - parent_id: $parent_id - field_id: $field_id - lexgraph_after: $lexgraph_after - ) { + mutation createEntity($parent_id: LingvodocID!, $field_id: LingvodocID!, $lexgraph_after: String) { + create_entity(parent_id: $parent_id, field_id: $field_id, lexgraph_after: $lexgraph_after) { entity { id parent_id @@ -224,7 +213,6 @@ const TableComponent = ({ /* eslint-enable react/prop-types */ actions }) => { - return (
@@ -243,7 +231,7 @@ const TableComponent = ({ selectDisabledIndeterminate={selectDisabledIndeterminate} disabled={disabledHeader} actions={actions} - mode={mode} + mode={mode} /> { const lexgraph_entity = get_lexgraph_entity(lexentry_id_source); - return lexgraph_entity ? lexgraph_entity.content || '' : ''; + return lexgraph_entity ? lexgraph_entity.content || "" : ""; }; const setSort = (field, order) => { setSortByField(field, order); - this.setState( - {dnd_enabled: false}, - () => console.log("dnd_enabled: ", this.state.dnd_enabled)); + this.setState({ dnd_enabled: false }, () => console.log("dnd_enabled: ", this.state.dnd_enabled)); }; const resetSort = () => { resetSortByField(); - this.setState( - {dnd_enabled: true}, - () => console.log("dnd_enabled: ", this.state.dnd_enabled)); + this.setState({ dnd_enabled: true }, () => console.log("dnd_enabled: ", this.state.dnd_enabled)); }; - const addEntry = (lexgraph_min) => { - + const addEntry = lexgraph_min => { /* Will need a valid ordering field and a valid minimal ordering marker. */ - if (!lexgraph_field_id) - { + if (!lexgraph_field_id) { window.logger.err(`Invalid ordering field id ${lexgraph_field_id}.`); return; } - if (!lexgraph_min && lexgraph_min !== "") - { + if (!lexgraph_min && lexgraph_min !== "") { window.logger.err(`Invalid minimal ordering marker ${lexgraph_min}.`); return; } @@ -452,19 +433,27 @@ class P extends React.Component { id, entitiesMode }, - update: (cache, { data: { create_lexicalentry: { lexicalentry }}}) => { - cache.updateQuery({ + update: ( + cache, + { + data: { + create_lexicalentry: { lexicalentry } + } + } + ) => { + cache.updateQuery( + { query: queryLexicalEntries, - variables: {id, entitiesMode} + variables: { id, entitiesMode } }, - (data) => ({ + data => ({ perspective: { ...data.perspective, lexical_entries: [lexicalentry, ...data.perspective.lexical_entries] } }) ); - }, + } }).then(({ data: d }) => { if (!d.loading && !d.error) { const { @@ -478,14 +467,24 @@ class P extends React.Component { field_id: lexgraph_field_id, lexgraph_after: lexgraph_min }, - update: (cache, { data: { create_entity: { entity }}}) => { - cache.updateQuery({ + update: ( + cache, + { + data: { + create_entity: { entity } + } + } + ) => { + cache.updateQuery( + { query: queryLexicalEntries, - variables: {id, entitiesMode} + variables: { id, entitiesMode } }, - (data) => { - const lexical_entries = data.perspective.lexical_entries.filter(le => !isEqual(le.id, lexicalentry.id)); - const lexicalentry_updated = {...lexicalentry, entities: [...lexicalentry.entities, entity]}; + data => { + const lexical_entries = data.perspective.lexical_entries.filter( + le => !isEqual(le.id, lexicalentry.id) + ); + const lexicalentry_updated = { ...lexicalentry, entities: [...lexicalentry.entities, entity] }; return { perspective: { ...data.perspective, @@ -494,7 +493,7 @@ class P extends React.Component { }; } ); - }, + } }); } }); @@ -526,21 +525,27 @@ class P extends React.Component { ids: selectedEntries }, update: (cache, { data }) => { - if (data.loading || data.error) {return;} - const { bulk_delete_lexicalentry: { deleted_entries }} = data; - cache.updateQuery({ + if (data.loading || data.error) { + return; + } + const { + bulk_delete_lexicalentry: { deleted_entries } + } = data; + cache.updateQuery( + { query: queryLexicalEntries, - variables: {id, entitiesMode} + variables: { id, entitiesMode } }, - (data) => ({ - perspective: - { ...data.perspective, - lexical_entries: data.perspective.lexical_entries.filter( - le => !deleted_entries.some(de => isEqual(le.id, de.id))) - } + data => ({ + perspective: { + ...data.perspective, + lexical_entries: data.perspective.lexical_entries.filter( + le => !deleted_entries.some(de => isEqual(le.id, de.id)) + ) + } }) ); - }, + } }).then(() => { resetSelection(); }); @@ -550,6 +555,12 @@ class P extends React.Component { openNewModal(ApproveModal, { perspectiveId: id, mode }); }; + /* new!!!! */ + const onJoinMarkups = () => { + openNewModal(JoinMarkupsModal, { perspectiveId: id, mode }); + }; + /* /new!!!! */ + /* Basic case-insensitive, case-sensitive compare. */ const ci_cs_compare = (str_a, str_b) => { const result = str_a.toLowerCase().localeCompare(str_b.toLowerCase(), undefined, { numeric: true }); @@ -557,8 +568,9 @@ class P extends React.Component { }; const orderEntries = es => { - if (!lexgraph_field_id) - {return es;} + if (!lexgraph_field_id) { + return es; + } const sortedEntries = sortBy(es, e => { const entities = e.entities.filter(entity => isEqual(entity.field_id, lexgraph_field_id)); @@ -587,16 +599,18 @@ class P extends React.Component { // apply sorting es => { // init - let [ field, order ] = [null, "a"]; + let [field, order] = [null, "a"]; // sort by 'Order' column or no sorting required if (!sortByField) { - if (lexgraph_field_id) - {[ field, order ] = [ lexgraph_field_id, "a" ];} - else - {return es;} + if (lexgraph_field_id) { + [field, order] = [lexgraph_field_id, "a"]; + } else { + return es; + } + } else { + ({ field, order } = sortByField); } - else {({ field, order } = sortByField);} if (!field) { field = lexgraph_field_id ? lexgraph_field_id : [66, 10]; @@ -645,25 +659,25 @@ class P extends React.Component { const entries = processEntries(lexicalEntries.slice()); const lexgraph_min = () => { - if (!lexgraph_field_id) - {return null;} + if (!lexgraph_field_id) { + return null; + } - let min_res = ''; - for (let i=0; i { - /* Need a valid source lexical entry and at least one of preceeding/succeeding entries. */ - - if (!lexentry_id_source || (!lexentry_id_before && !lexentry_id_after)) - { + + if (!lexentry_id_source || (!lexentry_id_before && !lexentry_id_after)) { this.setState({ cards: [] }); @@ -673,8 +687,7 @@ class P extends React.Component { /* Will need a valid ordering field. */ - if (!lexgraph_field_id) - { + if (!lexgraph_field_id) { window.logger.err(`Invalid ordering field id ${lexgraph_field_id}.`); this.setState({ @@ -693,8 +706,7 @@ class P extends React.Component { const current_lexgraph_min = lexgraph_min(); - if (!current_lexgraph_min && current_lexgraph_min !== '') - { + if (!current_lexgraph_min && current_lexgraph_min !== "") { window.logger.err(`Invalid minimal ordering marker "${current_lexgraph_min}".`); this.setState({ @@ -704,27 +716,33 @@ class P extends React.Component { return; } - if (lexgraph_after < current_lexgraph_min) - lexgraph_after = current_lexgraph_min; + if (lexgraph_after < current_lexgraph_min) lexgraph_after = current_lexgraph_min; /* If for some reason the entry being moved does not have an ordering marker, we create one. */ - if (!entity) - { + if (!entity) { createEntity({ variables: { parent_id: lexentry_id_source, field_id: lexgraph_field_id, lexgraph_after }, - update: (cache, { data: { create_entity: { entity }}}) => { - cache.updateQuery({ + update: ( + cache, + { + data: { + create_entity: { entity } + } + } + ) => { + cache.updateQuery( + { query: queryLexicalEntries, - variables: {id, entitiesMode} + variables: { id, entitiesMode } }, - (data) => { + data => { const lexical_entries = data.perspective.lexical_entries.filter(le => !isEqual(le.id, lexicalentry.id)); - const lexicalentry_updated = {...lexicalentry, entities: [...lexicalentry.entities, entity]}; + const lexicalentry_updated = { ...lexicalentry, entities: [...lexicalentry.entities, entity] }; return { perspective: { ...data.perspective, @@ -733,7 +751,7 @@ class P extends React.Component { }; } ); - }, + } }); this.setState({ @@ -753,7 +771,7 @@ class P extends React.Component { }, refetchQueries: [ { - query: queryLexicalEntries, + query: queryLexicalEntries, variables: { id, entitiesMode @@ -762,12 +780,12 @@ class P extends React.Component { ], awaitRefetchQueries: true }).then( - (data) => { + data => { this.setState({ cards: [] }); }, - (error) => { + error => { this.setState({ cards: [] }); @@ -823,7 +841,7 @@ class P extends React.Component { const selectedRows = []; const selectedColumns = []; - const items = this.state.move && pageEntries || e; + const items = (this.state.move && pageEntries) || e; const checkedRow = this.state.checkedRow; const checkedColumn = this.state.checkedColumn; @@ -912,18 +930,16 @@ class P extends React.Component { /* /isTableLanguagesPublish */ const moveListItem = (dragIndex, hoverIndex, prevCards) => { - this.setState({ cards: update(prevCards, { $splice: [ [dragIndex, 1], - [hoverIndex, 0, prevCards[dragIndex]], - ], + [hoverIndex, 0, prevCards[dragIndex]] + ] }) }); - this.setState({move: true}); - + this.setState({ move: true }); }; function* allEntriesGenerator() { @@ -936,11 +952,22 @@ class P extends React.Component { style={{ overflowY: "auto" }} className={(mode === "edit" && "lingvo-scrolling-tab lingvo-scrolling-tab_edit") || "lingvo-scrolling-tab"} > - - {((mode === "edit") || (mode === "publish" && isAuthenticated) || (mode === "contributions" && isAuthenticated)) && ( + {(mode === "edit" || + (mode === "publish" && isAuthenticated) || + (mode === "contributions" && isAuthenticated)) && (
+ {/* new!!!!! */} {mode === "edit" && ( -
- setSort(fieldId, order)} - onSortModeReset={() => resetSort()} - selectEntries={mode === "edit"} - entries={this.state.cards.length && this.state.cards || items} - checkEntries={isTableLanguagesPublish} - selectedRows={selectedRows} - selectedColumns={selectedColumns} - onCheckColumn={this.onCheckColumn} - onCheckAll={this.onCheckAll} - mode={mode} - dnd_enabled={this.state.dnd_enabled} - /> - -
- - } + {activeDndProvider && ( + + + setSort(fieldId, order)} + onSortModeReset={() => resetSort()} + selectEntries={mode === "edit"} + entries={(this.state.cards.length && this.state.cards) || items} + checkEntries={isTableLanguagesPublish} + selectedRows={selectedRows} + selectedColumns={selectedColumns} + onCheckColumn={this.onCheckColumn} + onCheckAll={this.onCheckAll} + mode={mode} + dnd_enabled={this.state.dnd_enabled} + /> + +
+ + )}
- - {!!_ROWS_PER_PAGE && - { - const scrollContainer = document.querySelector(".lingvo-scrolling-tab__table"); - smoothScroll(0, 0, null, scrollContainer); - if (isTableLanguagesPublish) { - this.resetCheckedColumn(); - this.resetCheckedAll(); - } - }} - className="lingvo-pagination-block_perspective" - />} + {!!_ROWS_PER_PAGE && ( + { + const scrollContainer = document.querySelector(".lingvo-scrolling-tab__table"); + smoothScroll(0, 0, null, scrollContainer); + if (isTableLanguagesPublish) { + this.resetCheckedColumn(); + this.resetCheckedAll(); + } + }} + className="lingvo-pagination-block_perspective" + /> + )} ); } @@ -1076,7 +1103,7 @@ P.propTypes = { createLexicalEntry: PropTypes.func.isRequired, mergeLexicalEntries: PropTypes.func.isRequired, removeLexicalEntries: PropTypes.func.isRequired, - updateLexgraph: PropTypes.func.isRequired, + updateLexgraph: PropTypes.func.isRequired, selectLexicalEntry: PropTypes.func.isRequired, resetEntriesSelection: PropTypes.func.isRequired, openModal: PropTypes.func.isRequired, @@ -1113,7 +1140,7 @@ const PerspectiveView = compose( dispatch ) ), - graphql(createEntityMutation, {name: "createEntity"}), + graphql(createEntityMutation, { name: "createEntity" }), graphql(createLexicalEntryMutation, { name: "createLexicalEntry" }), graphql(mergeLexicalEntriesMutation, { name: "mergeLexicalEntries" }), graphql(removeLexicalEntriesMutation, { name: "removeLexicalEntries" }), @@ -1362,7 +1389,17 @@ export const LexicalEntryByIds = compose( }) )(LexicalEntryViewBaseByIds); -const PerspectiveViewWrapper = ({ id, className, mode, entitiesMode, page, data, filter, sortByField, activeDndProvider }) => { +const PerspectiveViewWrapper = ({ + id, + className, + mode, + entitiesMode, + page, + data, + filter, + sortByField, + activeDndProvider +}) => { if (data.error) { return null; } @@ -1415,7 +1452,7 @@ PerspectiveViewWrapper.propTypes = { filter: PropTypes.string, data: PropTypes.object.isRequired, sortByField: PropTypes.object, - activeDndProvider: PropTypes.bool, + activeDndProvider: PropTypes.bool }; PerspectiveViewWrapper.defaultProps = { diff --git a/src/components/JoinMarkupsModal/index.js b/src/components/JoinMarkupsModal/index.js new file mode 100644 index 00000000..8939b9bc --- /dev/null +++ b/src/components/JoinMarkupsModal/index.js @@ -0,0 +1,36 @@ +import React, { useCallback, useContext, useState } from "react"; +import { Button, Modal } from "semantic-ui-react"; +import PropTypes from "prop-types"; + +import TranslationContext from "Layout/TranslationContext"; + +const JoinMarkupsModal = ({ perspectiveId, mode, onClose }) => { + const getTranslation = useContext(TranslationContext); + + console.log("perspectiveId===="); + console.log(perspectiveId); + + console.log("mode===="); + console.log(mode); + + console.log("onClose===="); + console.log(onClose); + + return ( + + {getTranslation("Join markups")} + !!!content!!! + +