Fix: Display Class Name instead of value on RCV

src/modules/resource/components/resource-page/FilesView.vue

@@ -136,7 +136,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, reactive } from "vue";
+import { defineComponent, type PropType, reactive } from "vue";
 
 // import the store for current module
 import useResourceStore from "../../store";
@@ -163,7 +163,8 @@ import { FileUtil } from "../../utils/FileUtil";
 import { v4 as uuidv4 } from "uuid";
 import { parseRDFDefinition } from "../../utils/linkedData";
 import factory from "rdf-ext";
-import type { Dataset, Literal, Quad } from "@rdfjs/types";
+import type { Dataset, Literal } from "@rdfjs/types";
+import type { BilingualLabels } from "@coscine/api-client/dist/types/Coscine.Api.Metadata";
 
 interface CustomTableField extends BvTableField {
   key: string;
@@ -218,6 +219,9 @@ export default defineComponent({
       return this.resourceStore.currentResource;
     },
 
+    classes(): { [className: string]: BilingualLabels } {
+      return this.resourceStore.classes;
+    },
     resourceTypeInformation(): null | undefined | ResourceTypeInformation {
       if (this.resourceStore.resourceTypes && this.resource) {
         return this.resourceStore.resourceTypes.find(
@@ -373,21 +377,39 @@ export default defineComponent({
                   const metadata = item.metadata;
                   const entries = metadata.match(undefined, path.object);
                   if (entries.size) {
+                    const returnList: string[] = [];
                     for (const entry of entries) {
                       const entryObject = entry.object;
+                      let entryValue = entryObject.value;
                       if (entryObject.termType === "Literal") {
                         if (entryObject.datatype.value.endsWith("date")) {
                           const date = entryObject.value;
                           const dateObject = new Date(date);
-                          return dateObject.toLocaleDateString(
+                          entryValue = dateObject.toLocaleDateString(
                             this.$i18n.locale
                           );
                         }
+                      } else if (entryObject.termType === "NamedNode") {
+                        for (const classValue of Object.values(this.classes)) {
+                          const langClassList =
+                            this.$i18n.locale === "de"
+                              ? classValue.de
+                              : classValue.en;
+                          if (langClassList) {
+                            const foundEntry = langClassList.find(
+                              (langClassEntry) =>
+                                langClassEntry.value === entryValue
+                            );
+                            if (foundEntry && foundEntry.name) {
+                              entryValue = foundEntry.name;
+                              break;
+                            }
+                          }
+                        }
                       }
+                      returnList.push(entryValue);
                     }
-                    return Array.from(entries)
-                      .map((entry: Quad) => entry.object.value)
-                      .join("<br>");
+                    return returnList.join("<br>");
                   }
                   return "";
                 },