Enhancement#553 multilingual annotation

src/component/multilingual/EditLanguageSelector.tsx

@@ -1,10 +1,8 @@
 import * as React from "react";
-import ISO6391 from "iso-639-1";
 import classNames from "classnames";
 // @ts-ignore
 import { IntelligentTreeSelect } from "intelligent-tree-select";
-import Constants from "../../util/Constants";
-import { getShortLocale } from "../../util/IntlUtil";
+import { getLanguageOptions, Language } from "../../util/IntlUtil";
 import { renderLanguages } from "./LanguageSelector";
 import { Nav, NavItem, NavLink } from "reactstrap";
 import { FaPlusCircle } from "react-icons/fa";
@@ -18,29 +16,6 @@ interface EditLanguageSelectorProps {
   onRemove: (lang: string) => void;
 }
 
-interface Language {
-  code: string;
-  name: string;
-  nativeName: string;
-}
-
-function prioritizeLanguages(options: Language[], languages: string[]) {
-  languages.forEach((lang) => {
-    const ind = options.findIndex((v) => v.code === lang);
-    const option = options[ind];
-    options.splice(ind, 1);
-    options.unshift(option);
-  });
-  return options;
-}
-
-const OPTIONS = prioritizeLanguages(
-  ISO6391.getLanguages(ISO6391.getAllCodes()),
-  Object.getOwnPropertyNames(Constants.LANG).map((lang) =>
-    getShortLocale(Constants.LANG[lang].locale)
-  )
-);
-
 const EditLanguageSelector: React.FC<EditLanguageSelectorProps> = (props) => {
   const { language, existingLanguages, onSelect, onRemove } = props;
   const { i18n, formatMessage } = useI18n();
@@ -51,7 +26,7 @@ const EditLanguageSelector: React.FC<EditLanguageSelectorProps> = (props) => {
   if (existingLanguages.indexOf(language) === -1) {
     existingLanguages.push(language);
   }
-  const options = OPTIONS.slice();
+  const options = getLanguageOptions().slice();
   for (const existing of existingLanguages) {
     const toRemove = options.findIndex((o) => o.code === existing);
     options.splice(toRemove, 1);

src/component/resource/document/Files.tsx

@@ -1,7 +1,7 @@
 import TermItFile from "../../../model/File";
 import File from "../../../model/File";
 import Utils from "../../../util/Utils";
-import { ButtonToolbar, Label, Table } from "reactstrap";
+import { Badge, ButtonToolbar, Label, Table } from "reactstrap";
 import { useI18n } from "../../hook/useI18n";
 
 interface FilesProps {
@@ -20,7 +20,7 @@ const Files = (props: FilesProps) => {
       <Table>
         <tbody>
           <tr>
-            <td>
+            <td className="align-middle">
               <Label className="attribute-label mb-3">
                 {" "}
                 {i18n("vocabulary.detail.files")}
@@ -33,11 +33,22 @@ const Files = (props: FilesProps) => {
         </tbody>
       </Table>
       {files.length > 0 ? (
-        <Table striped={true} bordered={true}>
+        <Table striped={true} bordered={false}>
           <tbody>
             {files.map((v: File) => (
               <tr key={v.label}>
-                <td className="align-middle">{v.label}</td>
+                <td className="align-middle">
+                  {v.language && (
+                    <Badge
+                      color="primary"
+                      className="mr-1 align-bottom"
+                      title={i18n("file.language")}
+                    >
+                      {v.language}
+                    </Badge>
+                  )}
+                  {v.label}
+                </td>
                 <td className="align-middle">
                   <ButtonToolbar className="float-right">
                     {props.itemActions(v)}

src/component/resource/file/CreateFileMetadata.tsx

@@ -1,101 +1,105 @@
-import * as React from "react";
-import { injectIntl } from "react-intl";
-import withI18n, { HasI18n } from "../../hoc/withI18n";
-import { Button, ButtonToolbar, Col, Form, Row } from "reactstrap";
+import React from "react";
+import {
+  Button,
+  ButtonToolbar,
+  Col,
+  Form,
+  FormGroup,
+  Label,
+  Row,
+} from "reactstrap";
 import UploadFile from "./UploadFile";
 import TermItFile from "../../../model/File";
 import CustomInput from "../../misc/CustomInput";
-import { AssetData } from "../../../model/Asset";
+import { useI18n } from "../../hook/useI18n";
+import { useSelector } from "react-redux";
+import TermItState from "../../../model/TermItState";
+import LanguageSelector from "./LanguageSelector";
 
-interface CreateFileMetadataProps extends HasI18n {
+interface CreateFileMetadataProps {
   onCreate: (termItFile: TermItFile, file: File) => any;
   onCancel: () => void;
 }
 
-interface CreateFileMetadataState extends AssetData {
-  iri: string;
-  label: string;
-  file?: File;
-  dragActive: boolean;
-}
-
-export class CreateFileMetadata extends React.Component<
-  CreateFileMetadataProps,
-  CreateFileMetadataState
-> {
-  constructor(props: CreateFileMetadataProps) {
-    super(props);
-    this.state = {
-      iri: "",
-      label: "",
-      file: undefined,
-      dragActive: false,
-    };
-  }
+const CreateFileMetadata: React.FC<CreateFileMetadataProps> = ({
+  onCreate,
+  onCancel,
+}) => {
+  const { i18n } = useI18n();
+  const [label, setLabel] = React.useState("");
+  const [file, setFile] = React.useState<File>();
+  const lang = useSelector(
+    (state: TermItState) => state.configuration.language
+  );
+  const [language, setLanguage] = React.useState(lang);
 
-  protected onLabelChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-    const label = e.currentTarget.value;
-    this.setState({ label });
+  const onFileSelected = (file: File) => {
+    setFile(file);
+    setLabel(file.name);
   };
-
-  public onCreate = () => {
-    const { file, dragActive, ...data } = this.state;
+  const onSubmit = () => {
     if (file) {
-      this.props.onCreate(new TermItFile(data), file);
+      onCreate(
+        new TermItFile({
+          iri: "",
+          label,
+          language,
+        }),
+        file
+      );
     }
   };
-
-  public setFile = (file: File) => {
-    this.setState({ file, label: file.name, dragActive: false });
-  };
-
-  public cannotSubmit = () => {
-    return !this.state.file || this.state.label.trim().length === 0;
+  const cannotSubmit = () => {
+    return !file || label.trim().length === 0;
   };
 
-  public render() {
-    const i18n = this.props.i18n;
-
-    return (
-      <Form>
-        <UploadFile setFile={this.setFile} />
-        <Row>
-          <Col xs={12}>
-            <CustomInput
-              name="create-resource-label"
-              label={i18n("asset.label")}
-              value={this.state.label}
-              onChange={this.onLabelChange}
-              hint={i18n("required")}
-            />
-          </Col>
-        </Row>
-        <Row>
-          <Col xs={12}>
-            <ButtonToolbar className="d-flex justify-content-center mt-4">
-              <Button
-                id="create-resource-submit"
-                onClick={this.onCreate}
-                color="success"
-                size="sm"
-                disabled={this.cannotSubmit()}
-              >
-                {i18n("file.upload")}
-              </Button>
-              <Button
-                id="create-resource-cancel"
-                onClick={this.props.onCancel}
-                color="outline-dark"
-                size="sm"
-              >
-                {i18n("cancel")}
-              </Button>
-            </ButtonToolbar>
-          </Col>
-        </Row>
-      </Form>
-    );
-  }
-}
+  return (
+    <Form>
+      <UploadFile setFile={onFileSelected} />
+      <Row>
+        <Col xs={12}>
+          <CustomInput
+            name="create-resource-label"
+            label={i18n("asset.label")}
+            value={label}
+            onChange={(e) => setLabel(e.target.value)}
+            hint={i18n("required")}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={12}>
+          <FormGroup>
+            <Label className="attribute-label">{i18n("file.language")}</Label>
+            <LanguageSelector onChange={setLanguage} value={language} />
+          </FormGroup>
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={12}>
+          <ButtonToolbar className="d-flex justify-content-center mt-4">
+            <Button
+              id="create-resource-submit"
+              onClick={onSubmit}
+              color="success"
+              size="sm"
+              disabled={cannotSubmit()}
+            >
+              {i18n("file.upload")}
+            </Button>
+            <Button
+              id="create-resource-cancel"
+              onClick={onCancel}
+              color="outline-dark"
+              size="sm"
+            >
+              {i18n("cancel")}
+            </Button>
+          </ButtonToolbar>
+        </Col>
+      </Row>
+    </Form>
+  );
+};
 
-export default injectIntl(withI18n(CreateFileMetadata));
+export default CreateFileMetadata;

src/component/resource/file/LanguageSelector.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+// @ts-ignore
+import { IntelligentTreeSelect } from "intelligent-tree-select";
+import { getLanguageOptions, Language } from "../../../util/IntlUtil";
+import { useI18n } from "../../hook/useI18n";
+
+const LanguageSelector: React.FC<{
+  onChange: (lang: string) => void;
+  value: string;
+}> = ({ onChange, value }) => {
+  const options = getLanguageOptions();
+  const { i18n } = useI18n();
+  return (
+    <IntelligentTreeSelect
+      onChange={(item: Language) => onChange(item.code)}
+      options={options}
+      maxHeight={200}
+      multi={false}
+      labelKey="nativeName"
+      valueKey="code"
+      classNamePrefix="react-select"
+      simpleTreeData={true}
+      renderAsTree={false}
+      showSettings={false}
+      isClearable={false}
+      placeholder=""
+      noResultsText={i18n("search.no-results")}
+      value={options.find((o) => o.code === value)}
+    />
+  );
+};
+
+export default LanguageSelector;

src/component/resource/file/__tests__/CreateFileMetadata.test.tsx

@@ -1,11 +1,9 @@
 import Resource from "../../../../model/Resource";
 import Ajax from "../../../../util/Ajax";
-import {
-  flushPromises,
-  mountWithIntl,
-} from "../../../../__tests__/environment/Environment";
-import { CreateFileMetadata } from "../CreateFileMetadata";
+import { mountWithIntl } from "../../../../__tests__/environment/Environment";
+import CreateFileMetadata from "../CreateFileMetadata";
 import { intlFunctions } from "../../../../__tests__/environment/IntlUtil";
+import UploadFile from "../UploadFile";
 
 jest.mock("../../../../util/Ajax", () => {
   const originalModule = jest.requireActual("../../../../util/Ajax");
@@ -43,9 +41,10 @@ describe("CreateFileMetadata", () => {
         {...intlFunctions()}
       />
     );
-    (wrapper.find(CreateFileMetadata).instance() as CreateFileMetadata).setFile(
-      file as File
-    );
+    wrapper
+      .find(UploadFile)
+      .props()
+      .setFile(file as File);
     const labelInput = wrapper.find('input[name="create-resource-label"]');
     expect((labelInput.getDOMNode() as HTMLInputElement).value).toEqual(
       fileName

src/i18n/cs.ts

@@ -622,6 +622,7 @@ const cs = {
     "file.upload.hint":
       "Maximální velikost souboru: {maxUploadFileSize}. Má-li být soubor použit pro extrakci pojmů do slovníku, musí být ve formátu UTF-8, nebo validní MS Excel.",
     "file.upload.size.exceeded": "Soubor je příliš velký.",
+    "file.language": "Jazyk obsahu souboru",
 
     "dataset.license": "Licence",
     "dataset.format": "Formát",
@@ -814,6 +815,11 @@ const cs = {
       'Neplatný identifikátor: "{uri}", neočekávaný znak "{char}" na pozici {index}.',
     "error.invalidIdentifier": 'Neplatný identifikátor: "{uri}"',
 
+    "error.annotation.file.unsupportedLanguage":
+      "Služba textové analýza nepodporuje jazyk obsahu souboru.",
+    "error.annotation.term.unsupportedLanguage":
+      "Služba textové analýza nepodporuje jazyk definice pojmu.",
+
     "history.label": "Historie změn",
     "history.loading": "Načítám historii...",
     "history.empty": "Zaznamenaná historie je prázdná.",

src/i18n/en.ts

@@ -613,6 +613,7 @@ const en = {
     "file.upload.hint":
       "Maximum file size: {maxUploadFileSize}. To use the file for term extraction, it must be in UTF-8 or a valid MS Excel file.",
     "file.upload.size.exceeded": "File is too large.",
+    "file.language": "File content language",
 
     "dataset.license": "License",
     "dataset.format": "Format",
@@ -806,6 +807,11 @@ const en = {
       'Invalid identifier: "{uri}", unexpected character "{char}" at {index}.',
     "error.invalidIdentifier": 'Invalid identifier: "{uri}"',
 
+    "error.annotation.file.unsupportedLanguage":
+      "Text analysis service does not support the language of this file.",
+    "error.annotation.term.unsupportedLanguage":
+      "Text analysis service does not support the language of this term's definition.",
+
     "history.label": "Change history",
     "history.loading": "Loading history...",
     "history.empty": "The recorded history of this asset is empty.",