Merge pull request #127 from ConductionNL/feature/PC108-90/zaaktype-z…

…aak-fix added view zaaktype button
ConductionNL · Dec 31, 2024 · ab784ee · ab784ee
2 parents d80627c + 119213a
commit ab784ee
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 11 deletions.
diff --git a/src/modals/zaken/ZaakForm.vue b/src/modals/zaken/ZaakForm.vue
@@ -203,12 +203,12 @@ export default {
 					this.zaakType = {
 						options: entities.map((zaakType) => ({
 							id: zaakType.id,
-							label: zaakType.name,
+							label: zaakType.identificatie,
 						})),
 						value: selectedZaakType
 							? {
 								id: selectedZaakType.id,
-								label: selectedZaakType.name,
+								label: selectedZaakType.identificatie,
 							  }
 							: null,
 					}

diff --git a/src/views/zaken/ZaakDetails.vue b/src/views/zaken/ZaakDetails.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { navigationStore, zaakStore, resultaatStore, besluitStore, documentStore } from '../../store/store.js'
+import { navigationStore, zaakStore, zaakTypeStore, resultaatStore, besluitStore, documentStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -77,7 +77,15 @@ import { navigationStore, zaakStore, resultaatStore, besluitStore, documentStore
 						<h4>
 							Zaaktype:
 						</h4>
-						<span>{{ zaakStore.zaakItem?.zaaktype }}</span>
+						<span v-if="zaakStore.zaakItem.zaaktype" class="zaakType">
+							{{ zaakType?.identificatie }}
+							<NcButton v-tooltip="'bekijken'" type="tertiary-no-background" @click="goToZaakType(zaakType)">
+								<template #icon>
+									<OpenInApp :size="20" />
+								</template>
+							</NcButton>
+						</span>
+						<span v-else>geen zaaktype gevonden</span>
 					</div>
 					<div>
 						<div>
@@ -186,7 +194,7 @@ import { navigationStore, zaakStore, resultaatStore, besluitStore, documentStore
 <script>
 // Components
 import { BTabs, BTab } from 'bootstrap-vue'
-import { NcActions, NcActionButton, NcListItem, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcButton, NcListItem, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
 
 // Icons
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
@@ -198,6 +206,7 @@ import FileDocumentPlusOutline from 'vue-material-design-icons/FileDocumentPlusO
 import VectorPolylineEdit from 'vue-material-design-icons/VectorPolylineEdit.vue'
 import Eye from 'vue-material-design-icons/Eye.vue'
 import TimelineQuestionOutline from 'vue-material-design-icons/TimelineQuestionOutline.vue'
+import OpenInApp from 'vue-material-design-icons/OpenInApp.vue'
 import FileChartCheckOutline from 'vue-material-design-icons/FileChartCheckOutline.vue'
 import BriefcaseAccountOutline from 'vue-material-design-icons/BriefcaseAccountOutline.vue'
 
@@ -217,6 +226,7 @@ export default {
 		// Components
 		NcActions,
 		NcActionButton,
+		NcButton,
 		BTabs,
 		BTab,
 		NcLoadingIcon,
@@ -252,13 +262,19 @@ export default {
 			zaak: [],
 		}
 	},
+	computed: {
+		zaakType() {
+			return zaakTypeStore.zaakTypeList.find((zaakType) => zaakType.id === zaakStore.zaakItem.zaaktype || Symbol('no zaaktype id'))
+		},
+	},
 	watch: {
 		id(newId) {
 			this.fetchData(newId)
 		},
 	},
 	mounted() {
 		this.fetchData(this.id)
+		zaakTypeStore.refreshZaakTypenList()
 	},
 	methods: {
 		fetchData(id) {
@@ -283,6 +299,10 @@ export default {
 				.finally(() => {
 				})
 		},
+		goToZaakType(zaakType) {
+			zaakTypeStore.setZaakTypeItem(zaakType)
+			this.$router.push({ name: 'dynamic-view', params: { view: 'zaaktypen', id: zaakType.id } })
+		},
 	},
 }
 </script>
@@ -319,3 +339,10 @@ h4 {
 }
 
 </style>
+
+<style scoped>
+.zaakType {
+	display: flex;
+	align-items: center;
+}
+</style>
diff --git a/src/views/zaken/ZakenList.vue b/src/views/zaken/ZakenList.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { navigationStore, zaakStore } from '../../store/store.js'
+import { navigationStore, zaakStore, zaakTypeStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -46,7 +46,7 @@ import { navigationStore, zaakStore } from '../../store/store.js'
 							:size="44" />
 					</template>
 					<template #subname>
-						{{ zaak?.zaaktype }}
+						{{ zaakTypeStore.zaakTypeList.find(zaakType => zaakType.id === zaak.zaaktype)?.identificatie ?? zaak.zaaktype }}
 					</template>
 					<template #actions>
 						<NcActionButton @click="zaakStore.setZaakItem(zaak); navigationStore.setModal('zaakForm')">
@@ -116,10 +116,12 @@ export default {
 	mounted() {
 		this.loading = true
 
-		zaakStore.refreshZakenList()
-			.then(() => {
-				this.loading = false
-			})
+		Promise.all([
+			zaakStore.refreshZakenList(),
+			zaakTypeStore.refreshZaakTypenList(),
+		]).then(() => {
+			this.loading = false
+		})
 	},
 	methods: {
 		clearText() {