Merge branch '6-display-of-all-resources-in-a-category' into 'dev'

Resolve "Display of all resources in a category"

Closes #6

See merge request hmc/hmc/cct-1-mapping/information-portal/frontend!15

components/MappingItemList.vue

+<template>
+  <BorderBox>
+    <table class="min-w-full">
+      <thead class="text-xl font-black">
+        <tr class="border-b-2 border-black">
+          <td>Name</td>
+          <td class="w-1/4">
+            Keywords
+          </td>
+        </tr>
+      </thead>
+      <tbody class="text-base align-top">
+        <tr v-for="listItem in categoryList" :key="listItem._id" class="border-b">
+          <td class="pr-5 pt-2">
+            <div v-if="listItem.resourceUri">
+              <ExternalLink :href="listItem.resourceUri[0]">
+                {{ listItem.resourceName[0].name }}
+              </ExternalLink>
+              <InternalLink class="mx-4 text-sm" :to="'../MappingItem/' + listItem._id">
+                Details
+              </InternalLink>
+            </div>
+            <div v-else>
+              {{ listItem.resourceName[0].name }}
+              <InternalLink class="mx-4 text-sm" :to="'../MappingItem/' + listItem._id">
+                Details
+              </InternalLink>
+            </div>
+            <div v-if="listItem.resourceDescription" class="text-sm pb-2">
+              {{ listItem.resourceDescription }}
+            </div>
+          </td>
+          <td class="pt-2">
+            {{ listItem.keyword?.join() }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </BorderBox>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from "vue";
+import { IPBaseObject } from "~/utils/types/CommonProperties";
+
+defineProps({
+  categoryList: {
+    type: Array as PropType<IPBaseObject[]>,
+    required: true,
+  }
+});
+</script>
+

lang/de.yaml

@@ -11,4 +11,5 @@ lnk_txt_contact: Kontakt
 helmholtz_slogan: Spitzenforschung für große Herausforderungen.
 btn_txt_logout: Log out
 btn_txt_sync_to_gitlab: Sync to GitLab
-btn_txt_search: Suche
\ No newline at end of file
+btn_txt_search: Suche
+no_category_content: Kategorie ohne Inhalt…
\ No newline at end of file

lang/en.yaml

@@ -11,4 +11,5 @@ lnk_txt_contact: Contact
 helmholtz_slogan: Research for grant challenges.
 btn_txt_logout: Log out
 btn_txt_sync_to_gitlab: Sync to GitLab
-btn_txt_search: Search
\ No newline at end of file
+btn_txt_search: Search
+no_category_content: Nothing to see here…
\ No newline at end of file

pages/MappingItem/[id].vue

+<template>
+  <NuxtLayout name="main">
+    <BorderBox>
+      Dummy Page for MappingItem {{ route.params.id }}
+    </BorderBox>
+  </NuxtLayout>
+</template>
+
+<script lang="ts" setup>
+const route = useRoute();
+</script>

pages/MappingItemList/[category].vue

+<template>
+  <NuxtLayout name="main">
+    <MappingItemList v-if="result" :category-list="result" />
+    <BorderBox v-else>
+      {{ $t('no_category_content') }}
+    </BorderBox>
+  </NuxtLayout>
+</template>
+
+<script  lang="ts" setup>
+import MappingItemList from "~/components/MappingItemList.vue";
+import { getCategory } from "~/composables/api";
+import { isMappingCategoryKey, MappingCategory } from "~/utils/types/MappingCategory";
+const route = useRoute();
+const category = route.params.category.toString();
+
+let result;
+
+if (isMappingCategoryKey(category)) {
+  const { data } = await getCategory(MappingCategory[category]);
+  result = data;
+}
+</script>

utils/types/MappingCategory.ts

 export enum MappingCategory {
- Repositories = "repository",
- DataStandards = "metadata_standard",
- Terminologies = "terminology",
- Software = "software",
- DataSources = "data_source",
- Identifiers = "pid_system",
+  Repositories = "repository",
+  DataStandards = "metadata_standard",
+  Terminologies = "terminology",
+  Software = "software",
+  DataSources = "data_source",
+  Identifiers = "pid_system",
   DataFormats = "data_format",
   Licenses = "license",
   Organizations = "organization",
@@ -13,3 +13,7 @@ export enum MappingCategory {
   SchemaCrosswalks = "schema_crosswalk",
   Methods = "method",
 }
+
+export function isMappingCategoryKey(entry: string): entry is keyof typeof MappingCategory {
+  return (entry in MappingCategory);
+}