From 2dba9f534f71ffec07abd839b824d7b109b5ff5f Mon Sep 17 00:00:00 2001
From: grijzea <andre.grijze@deltares.nl>
Date: Mon, 9 Sep 2024 17:40:49 +0200
Subject: [PATCH] Coupling keywords to collection

---
 .../collections/CollectionCardForm.vue        | 44 +++++++++++++++++--
 frontend/lib/collection.ts                    |  1 +
 frontend/pages/collections/create.vue         |  9 ++++
 frontend/pages/collections/delete/[id].vue    |  5 +++
 frontend/pages/collections/index.vue          | 24 +++++++++-
 frontend/pages/collections/update/[id].vue    | 14 ++++++
 6 files changed, 92 insertions(+), 5 deletions(-)

diff --git a/frontend/components/collections/CollectionCardForm.vue b/frontend/components/collections/CollectionCardForm.vue
index 14b0478..d15f4f3 100644
--- a/frontend/components/collections/CollectionCardForm.vue
+++ b/frontend/components/collections/CollectionCardForm.vue
@@ -32,12 +32,32 @@
             />
             <Textarea v-if="!readonly" id="description" v-model="description" />
             <div class="flex flex-col space-y-1.5">
-              <Label for="description">Collection type</Label>
+              <Label for="collectionType">Collection type</Label>
               <CustomDropDownComponent
+                v-if="!readonly"
                 id="collectionType"
                 :options="collectionType"
-                v-model="selectedCollectionType"
+                v-model="selectedCollectionTypeId"
               />
+              <Input
+                v-if="readonly"
+                readonly
+                :placeholder="selectedCollectionType.label"
+              ></Input>
+            </div>
+            <div class="flex flex-col space-y-1.5">
+              <Label for="keywordsFacility">Keywords</Label>
+              <CustomDropDownComponent
+                v-if="!readonly"
+                id="keywordsFacility"
+                :options="keywordsFacilities"
+                v-model="selectedKeywordsFacilityId"
+              />
+              <Input
+                v-if="readonly"
+                readonly
+                :placeholder="selectedKeywordFacility?.name"
+              ></Input>
             </div>
           </div>
         </div>
@@ -57,14 +77,22 @@
 import type { Collection } from "@/lib/collection"
 import { collectionTypes } from "@/lib/collectionTypes"
 import { ref } from "vue"
+import type { DropDownOption } from "@lib/lib/dropDownOption"
 
 const emit = defineEmits(["update"])
 
+let { data: keywords } = await useApi("/facilities")
+let keywordsFacilities: DropDownOption[] = keywords.value.map((item) => {
+  return { value: item.id, label: item.name }
+})
+keywordsFacilities.unshift({ value: "No keywords", label: "No keywords" })
+
 const props = defineProps({
   cardTitle: String,
   title: String,
   description: String,
   collectionType: String,
+  keywordFacility: String,
   buttonTitle: String,
   errors: String,
   readonly: Boolean,
@@ -72,7 +100,14 @@ const props = defineProps({
 
 const name = ref(props.title ?? "")
 const description = ref(props.description ?? "")
-const selectedCollectionType = ref(props.collectionType)
+const selectedCollectionTypeId = ref(props.collectionType)
+const selectedKeywordFacility = keywords.value.find(
+  (item) => item.id == props.keywordFacility,
+)
+const selectedCollectionType = collectionTypes.find(
+  (item) => item.value == props.collectionType,
+)
+const selectedKeywordsFacilityId = ref(props.keywordFacility)
 
 const collectionType = collectionTypes
 
@@ -80,7 +115,8 @@ function emitChange() {
   const newCollection: Collection = {
     title: name.value,
     description: description.value,
-    collectionType: selectedCollectionType.value,
+    collectionType: selectedCollectionTypeId.value,
+    keywordsFacility: selectedKeywordsFacilityId.value,
   }
   emit("update", newCollection)
 }
diff --git a/frontend/lib/collection.ts b/frontend/lib/collection.ts
index 310df31..a22cf21 100644
--- a/frontend/lib/collection.ts
+++ b/frontend/lib/collection.ts
@@ -2,4 +2,5 @@ export interface Collection {
   title: string
   description: string
   collectionType: string
+  keywordsFacility?: string
 }
diff --git a/frontend/pages/collections/create.vue b/frontend/pages/collections/create.vue
index c861c68..036de5b 100644
--- a/frontend/pages/collections/create.vue
+++ b/frontend/pages/collections/create.vue
@@ -6,6 +6,7 @@
       @update="createCollection"
       :errors="errors"
       collectionType="experimentalFacility"
+      keywordFacility="No keywords"
     />
   </div>
 </template>
@@ -40,6 +41,14 @@ async function createCollection(emitedCollection: Collection) {
     },
     links: [],
   }
+  if (emitedCollection.keywordsFacility !== "No keywords") {
+    newCollection.links.push({
+      rel: "keywords",
+      href: "/facilities/" + emitedCollection.keywordsFacility,
+      type: "application/json",
+      id: emitedCollection.keywordsFacility,
+    })
+  }
   try {
     errors.value = ""
     const data = await $api("/collections", {
diff --git a/frontend/pages/collections/delete/[id].vue b/frontend/pages/collections/delete/[id].vue
index dea3437..c6cdf2b 100644
--- a/frontend/pages/collections/delete/[id].vue
+++ b/frontend/pages/collections/delete/[id].vue
@@ -6,6 +6,7 @@
     :title="title"
     :description="description"
     :collectionType="selectedCollectionType"
+    :keywordFacility="selectedKeywordsFacility"
     readonly="true"
     @update="updateCollection"
   />
@@ -21,6 +22,7 @@ const errors = ref("")
 const title = ref("")
 const description = ref("")
 const selectedCollectionType = ref("")
+const selectedKeywordsFacility = ref("")
 
 const route = useRoute()
 const data = await $api("/collections/{collection_id}", {
@@ -31,6 +33,9 @@ const data = await $api("/collections/{collection_id}", {
 title.value = data.title
 description.value = data.description
 selectedCollectionType.value = data.keywords[0]
+const keywordsLink = data.links.find((item) => item.rel == "keywords")
+selectedKeywordsFacility.value =
+  keywordsLink !== undefined ? keywordsLink.id : "No Keywords"
 
 async function updateCollection() {
   try {
diff --git a/frontend/pages/collections/index.vue b/frontend/pages/collections/index.vue
index a4e9884..7cdadbd 100644
--- a/frontend/pages/collections/index.vue
+++ b/frontend/pages/collections/index.vue
@@ -30,7 +30,7 @@ import { collectionTypes } from "@/lib/collectionTypes"
 const router = useRouter()
 const { $api } = useNuxtApp()
 const collections = ref([])
-
+let { data: keywords } = await useApi("/facilities")
 onMounted(async () => {
   await new Promise((r) => setTimeout(r, 1000))
   let retrievedCollections = []
@@ -115,6 +115,28 @@ const collectionColumns: ColumnDef<
       return selectedItem.label
     },
   },
+  {
+    accessorKey: "links",
+    header: ({ column }) => {
+      return h(
+        Button,
+        {
+          variant: "ghost",
+          onClick: () => column.toggleSorting(column.getIsSorted() === "asc"),
+        },
+        () => ["Keywords", h(ArrowUpDown, { class: "ml-2 h-4 w-4" })],
+      )
+    },
+    cell: ({ row }) => {
+      const links = row.original.links.find((item) => item.rel == "keywords")
+      if (links === undefined) return "No keywords"
+      const keywordDescription = keywords.value.find(
+        (item) => item.id == links.id,
+      )
+      if (keywordDescription === undefined) return "No keywords"
+      return keywordDescription.name
+    },
+  },
   {
     id: "edit",
     cell: ({ row }) => {
diff --git a/frontend/pages/collections/update/[id].vue b/frontend/pages/collections/update/[id].vue
index 8d77a9b..ee54729 100644
--- a/frontend/pages/collections/update/[id].vue
+++ b/frontend/pages/collections/update/[id].vue
@@ -8,6 +8,7 @@
       :title="title"
       :description="description"
       :collectionType="selectedCollectionType"
+      :keywordFacility="selectedKeywordsFacility"
     />
   </div>
 </template>
@@ -24,6 +25,7 @@ const errors = ref("")
 const title = ref("")
 const description = ref("")
 const selectedCollectionType = ref("")
+const selectedKeywordsFacility = ref("")
 
 const route = useRoute()
 const data = await $api("/collections/{collection_id}", {
@@ -34,6 +36,10 @@ const data = await $api("/collections/{collection_id}", {
 title.value = data.title
 description.value = data.description
 selectedCollectionType.value = data.keywords[0]
+const keywordsLink = data.links.find((item) => item.rel == "keywords")
+selectedKeywordsFacility.value =
+  keywordsLink !== undefined ? keywordsLink.id : "No keywords"
+
 async function updateCollection(emitedCollection: Collection) {
   const updatedCollection = {
     type: "Collection",
@@ -53,6 +59,14 @@ async function updateCollection(emitedCollection: Collection) {
     },
     links: [],
   }
+  if (emitedCollection.keywordsFacility !== "No keywords") {
+    updatedCollection.links.push({
+      rel: "keywords",
+      href: "/facilities/" + emitedCollection.keywordsFacility,
+      type: "application/json",
+      id: emitedCollection.keywordsFacility,
+    })
+  }
   try {
     errors.value = ""
     const data = await $api("/collections/{id}", {