Sort publications frontend added

OpenCatalogi · Aug 7, 2024 · 2bc227d · 2bc227d
1 parent d30c391
commit 2bc227d
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 29 deletions.
diff --git a/src/store/modules/publication.js b/src/store/modules/publication.js
@@ -23,12 +23,26 @@ export const usePublicationStore = defineStore(
 				this.publicationList = publicationList.map((publicationItem) => new Publication(publicationItem))
 				console.log('Active publication item set to ' + publicationList.length)
 			},
-			async refreshPublicationList(search = null) {
+			async refreshPublicationList(normalSearch = [], advancedSearch = null, sortField = null, sortDirection = null) {
 				// @todo this might belong in a service?
+				console.log(normalSearch)
 				let endpoint = '/index.php/apps/opencatalogi/api/publications'
-				if (search !== null && search !== '') {
-					endpoint = endpoint + '?_search=' + search
+				const params = new URLSearchParams()
+				for (const item of normalSearch) {
+					if (item.key && item.value !== undefined) {
+						params.append(item.key, item.value)
+					}
 				}
+				if (advancedSearch !== null && advancedSearch !== '') {
+					params.append('_search', advancedSearch)
+				}
+				if (sortField !== null && sortField.value !== null && sortDirection !== null && sortDirection !== '') {
+					params.append('_order[' + sortField.value + ']', sortDirection)
+				}
+				if (params.toString()) {
+					endpoint += '?' + params.toString()
+				}
+
 				return fetch(
 					endpoint,
 					{

diff --git a/src/views/publications/PublicationList.vue b/src/views/publications/PublicationList.vue
@@ -7,36 +7,55 @@ import { navigationStore, publicationStore } from '../../store/store.js'
 		<ul>
 			<div class="listHeader">
 				<NcTextField class="searchField"
-					:value.sync="search"
+					:value.sync="advancedSearch"
 					label="Zoeken"
 					trailing-button-icon="close"
-					:show-trailing-button="search !== ''"
-					@trailing-button-click="search = ''">
+					:show-trailing-button="advancedSearch !== ''"
+					@trailing-button-click="advancedSearch = ''">
 					<Magnify :size="20" />
 				</NcTextField>
 				<NcActions>
 					<NcActionCaption name="Zoeken" />
-					<NcActionCheckbox>
+					<NcActionCheckbox
+						:checked="conceptChecked"
+						:value="'concept'"
+						@change="handleCheckboxChange('concept', $event)">
 						Concept
 					</NcActionCheckbox>
-					<NcActionCheckbox>
+					<NcActionCheckbox
+						:checked="gepubliceerdChecked"
+						:value="'gepubliceerd'"
+						@change="handleCheckboxChange('gepubliceerd', $event)">
 						Gepubliceerd
 					</NcActionCheckbox>
 					<NcActionSeparator />
 					<NcActionCaption name="Sorteren" />
 					<NcActionInput
+						v-model="sortField"
 						type="multiselect"
 						input-label="Eigenschap"
-						:options="['Apple', 'Banana', 'Cherry']">
+						:options="[
+							{ label: 'Titel', value: 'title' },
+							{ label: 'Beschrijving', value: 'description' },
+							{ label: 'Samenvatting', value: 'summary' }
+						]">
 						<template #icon>
 							<Pencil :size="20" />
 						</template>
 						Kies een eigenschap
 					</NcActionInput>
-					<NcActionRadio name="Richting" value="Asc">
+					<NcActionRadio
+						:checked="sortDirection === 'asc'"
+						name="sortDirection"
+						value="asc"
+						@update:checked="updateSortOrder('asc')">
 						Oplopend
 					</NcActionRadio>
-					<NcActionRadio name="Richting" value="Desc">
+					<NcActionRadio
+						:checked="sortDirection === 'desc'"
+						name="sortDirection"
+						value="desc"
+						@update:checked="updateSortOrder('desc')">
 						Aflopend
 					</NcActionRadio>
 					<NcActionSeparator />
@@ -194,18 +213,18 @@ export default {
 		HelpCircleOutline,
 	},
 	beforeRouteLeave(to, from, next) {
-		search = ''
+		this.advancedSearch = ''
 		next()
 	},
-	props: {
-		search: {
-			type: String,
-			required: true,
-		},
-	},
 	data() {
 		return {
 			loading: false,
+			sortField: null,
+			sortDirection: 'desc',
+			normalSearch: [],
+			advancedSearch: '',
+			conceptChecked: false,
+			gepubliceerdChecked: false,
 		}
 	},
 	computed: {
@@ -217,28 +236,48 @@ export default {
 		},
 	},
 	watch: {
-		search: {
-			handler(search) {
-				this.debouncedFetchData(search)
-			},
-		},
+		advancedSearch: 'debouncedFetchData',
+		sortField: 'fetchData',
+		sortDirection: 'fetchData',
+		normalSearch: 'fetchData',
 	},
 	mounted() {
 		this.fetchData()
 	},
 	methods: {
-		fetchData(search = null) {
+		fetchData() {
 			this.loading = true
-			publicationStore.refreshPublicationList(search)
+			publicationStore.refreshPublicationList(this.normalSearch, this.advancedSearch, this.sortField, this.sortDirection)
 				.then(() => {
 					this.loading = false
 				})
 		},
-		debouncedFetchData: debounce(function(search) {
-			this.fetchData(search)
+		debouncedFetchData: debounce(function() {
+			this.fetchData()
 		}, 500),
-		openLink(url, type = '') {
-			window.open(url, type)
+		updateSortOrder(value) {
+			this.sortDirection = value
+		},
+		updateNormalSearch() {
+			console.log('test trigger')
+			this.normalSearch = []
+			if (this.conceptChecked) {
+				this.normalSearch.push({ key: 'concept', value: true })
+			}
+			if (this.gepubliceerdChecked) {
+				this.normalSearch.push({ key: 'published', value: true })
+			}
+		},
+		handleCheckboxChange(key, event) {
+			console.log('Event:', event)
+			const checked = event.target.checked
+
+			if (key === 'concept') {
+				this.conceptChecked = checked
+			} else if (key === 'gepubliceerd') {
+				this.gepubliceerdChecked = checked
+			}
+			this.updateNormalSearch()
 		},
 	},
 }