[Enhancement #553] Show content language in document file list.

kbss-cvut · Nov 11, 2024 · 10e230d · 10e230d
1 parent 629637a
commit 10e230d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/src/component/resource/document/Files.tsx b/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)}

diff --git a/src/util/IntlUtil.ts b/src/util/IntlUtil.ts
@@ -90,6 +90,9 @@ export function removeTranslation(
   });
 }
 
+/**
+ * Type representing language data in an asset language selector.
+ */
 export interface Language {
   code: string;
   name: string;
@@ -113,6 +116,11 @@ const LANGUAGE_OPTIONS = prioritizeLanguages(
   )
 );
 
+/**
+ * Gets a list of all possible languages.
+ *
+ * The languages are retrieved using the iso-639-1 JS library.
+ */
 export function getLanguageOptions(): Language[] {
   return LANGUAGE_OPTIONS;
 }