[Enhancement #528] Allow user to select additional vocabularies to us…

…e to open for modeling

src/component/misc/ConfirmCancelDialog.tsx

@@ -22,7 +22,8 @@ interface ConfirmCancelDialogProps {
   confirmDisabled?: boolean;
   cancelKey?: string;
   cancelColor?: string;
-  size?: string;
+  size?: "lg" | "sm";
+  className?: string;
 }
 
 /**
@@ -37,6 +38,7 @@ const ConfirmCancelDialog: React.FC<ConfirmCancelDialogProps> = (props) => {
       isOpen={props.show}
       toggle={props.onClose}
       size={props.size}
+      className={props.className}
     >
       <ModalHeader toggle={props.onClose}>{props.title}</ModalHeader>
       <ModalBody>{props.children}</ModalBody>

src/component/vocabulary/modeling/OpenModelingToolDialog.scss

@@ -0,0 +1,9 @@
+.modeling-vocabulary-select-dialog {
+  max-width: 80%;
+}
+
+input.vocabulary-checkbox {
+  position: relative;
+  margin-left: 0;
+  margin-right: 0.5rem;
+}

src/component/vocabulary/modeling/OpenModelingToolDialog.tsx

@@ -8,6 +8,12 @@ import { useDispatch, useSelector } from "react-redux";
 import { loadRelatedVocabularies } from "../../../action/AsyncVocabularyActions";
 import VocabularyUtils from "../../../util/VocabularyUtils";
 import TermItState from "../../../model/TermItState";
+import { loadVocabularies } from "../../../action/AsyncActions";
+import { Col, Input, Row } from "reactstrap";
+import { getShortLocale } from "../../../util/IntlUtil";
+import "./OpenModelingToolDialog.scss";
+
+const COLUMN_COUNT = 3;
 
 interface OpenModelingToolDialogProps {
   open: boolean;
@@ -20,29 +26,80 @@ const OpenModelingToolDialog: React.FC<OpenModelingToolDialogProps> = ({
   onClose,
   vocabulary,
 }) => {
-  const { formatMessage } = useI18n();
+  const { formatMessage, i18n, locale } = useI18n();
   const dispatch: ThunkDispatch = useDispatch();
   const [relatedVocabularies, setRelatedVocabularies] = React.useState<
     string[]
   >([]);
+  const [selectedVocabularies, setSelectedVocabularies] = React.useState<
+    string[]
+  >([]);
   const modelingToolUrl = useSelector(
     (state: TermItState) => state.configuration
   ).modelingToolUrl;
+  const vocabularies = useSelector((state: TermItState) => state.vocabularies);
+  const vocabularyIris = Object.keys(vocabularies);
   React.useEffect(() => {
     if (open) {
       dispatch(
         loadRelatedVocabularies(VocabularyUtils.create(vocabulary.iri))
-      ).then((data) => setRelatedVocabularies(data));
+      ).then((data) => {
+        setRelatedVocabularies(data);
+        // The vocabulary is also among the related vocabularies loaded from the server
+        setSelectedVocabularies(data);
+      });
+      if (Object.keys(vocabularies).length === 0) {
+        dispatch(loadVocabularies());
+      }
+    }
+  }, [open, vocabulary.iri, vocabularies, dispatch]);
+
+  const onSelect = (vIri: string) => {
+    if (selectedVocabularies.includes(vIri)) {
+      setSelectedVocabularies(selectedVocabularies.filter((v) => v !== vIri));
+    } else {
+      setSelectedVocabularies([...selectedVocabularies, vIri]);
     }
-  }, [open, vocabulary.iri, dispatch]);
+  };
   const onOpen = () => {
-    const vocabularyList = [vocabulary.iri, ...relatedVocabularies];
-    let params = vocabularyList
+    let params = selectedVocabularies
       .map((v) => encodeURIComponent(v))
       .join("&vocabulary=");
     window.location.href = modelingToolUrl + "?vocabulary=" + params;
   };
 
+  const rowCount = Math.ceil(vocabularyIris.length / COLUMN_COUNT);
+  const rows = [];
+  for (let i = 0; i < rowCount; i++) {
+    const cols = [];
+    for (let j = 0; j < COLUMN_COUNT; j++) {
+      const index = i * COLUMN_COUNT + j;
+      if (index >= vocabularyIris.length) {
+        break;
+      }
+      cols.push(
+        <Col key={index} md={12 / COLUMN_COUNT}>
+          <Input
+            type="checkbox"
+            checked={selectedVocabularies.includes(vocabularyIris[index])}
+            disabled={relatedVocabularies.includes(vocabularyIris[index])}
+            onChange={() => onSelect(vocabularyIris[index])}
+            className="vocabulary-checkbox"
+          />
+          {getLocalized(
+            vocabularies[vocabularyIris[index]].label,
+            getShortLocale(locale)
+          )}
+        </Col>
+      );
+    }
+    rows.push(
+      <Row key={i} className="mb-2">
+        {cols}
+      </Row>
+    );
+  }
+
   return (
     <ConfirmCancelDialog
       id="vocabulary-model-dialog"
@@ -53,7 +110,12 @@ const OpenModelingToolDialog: React.FC<OpenModelingToolDialogProps> = ({
       title={formatMessage("vocabulary.summary.model.dialog.title", {
         vocabulary: getLocalized(vocabulary.label),
       })}
-    ></ConfirmCancelDialog>
+      size="lg"
+      className="modeling-vocabulary-select-dialog"
+    >
+      <p className="mb-4">{i18n("vocabulary.summary.model.dialog.text")}</p>
+      {rows}
+    </ConfirmCancelDialog>
   );
 };
 

src/i18n/cs.ts

@@ -341,6 +341,8 @@ const cs = {
     "vocabulary.summary.model.open": "Otevřít",
     "vocabulary.summary.model.dialog.title":
       "Modelovat vztahy pojmů slovníku {vocabulary}",
+    "vocabulary.summary.model.dialog.text":
+      "Vyberte slovníky, které chcete pro modelování otevřít. Předvybrány jsou slovníky, které s otevíraným slovníkem souvisí a musí být v seznamy zahrnuty.",
     "vocabulary.updated.message": "Slovník úspěšně uložen.",
     "vocabulary.created.message": "Slovník úspěšně vytvořen.",
     "vocabulary.detail.subtitle": "Vytvořen autorem {author} ",

src/i18n/en.ts

@@ -333,6 +333,8 @@ const en = {
     "vocabulary.summary.model.open": "Open",
     "vocabulary.summary.model.dialog.title":
       "Model relationships of terms in {vocabulary}",
+    "vocabulary.summary.model.dialog.text":
+      "Select vocabularies you want to open for modeling. Vocabularies related to the one being open are pre-selected as they are required by the modeling tool.",
     "vocabulary.updated.message": "Vocabulary successfully updated.",
     "vocabulary.created.message": "Vocabulary successfully created.",
     "vocabulary.detail.subtitle": "Created by {author} on ",