Skip to content

Commit

Permalink
Coupling keywords to collection
Browse files Browse the repository at this point in the history
  • Loading branch information
grijzea committed Sep 9, 2024
1 parent 517d961 commit 2dba9f5
Show file tree
Hide file tree
Showing 6 changed files with 92 additions and 5 deletions.
44 changes: 40 additions & 4 deletions frontend/components/collections/CollectionCardForm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -57,30 +77,46 @@
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,
})
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
function emitChange() {
const newCollection: Collection = {
title: name.value,
description: description.value,
collectionType: selectedCollectionType.value,
collectionType: selectedCollectionTypeId.value,
keywordsFacility: selectedKeywordsFacilityId.value,
}
emit("update", newCollection)
}
Expand Down
1 change: 1 addition & 0 deletions frontend/lib/collection.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,5 @@ export interface Collection {
title: string
description: string
collectionType: string
keywordsFacility?: string
}
9 changes: 9 additions & 0 deletions frontend/pages/collections/create.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
@update="createCollection"
:errors="errors"
collectionType="experimentalFacility"
keywordFacility="No keywords"
/>
</div>
</template>
Expand Down Expand Up @@ -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", {
Expand Down
5 changes: 5 additions & 0 deletions frontend/pages/collections/delete/[id].vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
:title="title"
:description="description"
:collectionType="selectedCollectionType"
:keywordFacility="selectedKeywordsFacility"
readonly="true"
@update="updateCollection"
/>
Expand All @@ -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}", {
Expand All @@ -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 {
Expand Down
24 changes: 23 additions & 1 deletion frontend/pages/collections/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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 = []
Expand Down Expand Up @@ -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 }) => {
Expand Down
14 changes: 14 additions & 0 deletions frontend/pages/collections/update/[id].vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
:title="title"
:description="description"
:collectionType="selectedCollectionType"
:keywordFacility="selectedKeywordsFacility"
/>
</div>
</template>
Expand All @@ -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}", {
Expand All @@ -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",
Expand All @@ -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}", {
Expand Down

0 comments on commit 2dba9f5

Please sign in to comment.