finished delete themes

ConductionNL · Nov 1, 2024 · 54e63a6 · 54e63a6
1 parent 11d4e46
commit 54e63a6
Show file tree

Hide file tree

Showing 4 changed files with 189 additions and 11 deletions.
diff --git a/src/dialogs/Dialogs.vue b/src/dialogs/Dialogs.vue
@@ -1,3 +1,7 @@
+<script setup>
+import { navigationStore } from '../store/store.js'
+</script>
+
 <template>
 	<!-- Placeholder div -->
 	<div>
@@ -15,6 +19,7 @@
 		<DeletePublicationDialog />
 		<DeletePublicationDataDialog />
 		<CopyPublicationDialog />
+		<DeletePublicationThemeDialog v-if="navigationStore.dialog === 'deletePublicationThemeDialog'" />
 		<PublishPublicationDialog />
 		<DepublishPublicationDialog />
 		<DeleteCatalogDialog />
@@ -49,6 +54,7 @@ import DeletePublicationDialog from './publication/DeletePublicationDialog.vue'
 import DepublishPublicationDialog from './publication/DepublishPublicationDialog.vue'
 import PublishPublicationDialog from './publication/PublishPublicationDialog.vue'
 import DeletePublicationDataDialog from './publicationData/DeletePublicationDataDialog.vue'
+import DeletePublicationThemeDialog from './publicationTheme/DeletePublicationThemeDialog.vue'
 import CopyThemeDialog from './theme/CopyThemeDialog.vue'
 import DeleteThemeDialog from './theme/DeleteThemeDialog.vue'
 import DownloadPublicationDialog from './publication/DownloadPublicationDialog.vue'
@@ -70,6 +76,7 @@ export default {
 		DeletePublicationDialog,
 		CopyPublicationDialog,
 		DeletePublicationDataDialog,
+		DeletePublicationThemeDialog,
 		PublishPublicationDialog,
 		DepublishPublicationDialog,
 		ArchivePublicationDialog,

diff --git a/src/dialogs/publicationTheme/DeletePublicationThemeDialog.vue b/src/dialogs/publicationTheme/DeletePublicationThemeDialog.vue
@@ -0,0 +1,115 @@
+<script setup>
+import { navigationStore, publicationStore, themeStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog name="Publicatie thema verwijderen"
+		:can-close="false">
+		<div v-if="success !== null || error">
+			<NcNoteCard v-if="success" type="success">
+				<p>Publicatie thema succesvol verwijderd</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="!success" type="error">
+				<p>Er is iets fout gegaan bij het verwijderen van Publicatie thema</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="error" type="error">
+				<p>{{ error }}</p>
+			</NcNoteCard>
+		</div>
+		<p v-if="success === null">
+			Wil je <b>{{ themeStore.themeItem.title }}</b> definitief verwijderen? Deze actie kan niet ongedaan worden gemaakt.
+		</p>
+		<template #actions>
+			<NcButton :disabled="loading" icon="" @click="navigationStore.setDialog(false)">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success !== null ? 'Sluiten' : 'Annuleer' }}
+			</NcButton>
+			<NcButton
+				v-if="success === null"
+				:disabled="loading"
+				icon="Delete"
+				type="error"
+				@click="DeleteTheme()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<Delete v-if="!loading" :size="20" />
+				</template>
+				Verwijderen
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import { NcButton, NcDialog, NcNoteCard, NcLoadingIcon } from '@nextcloud/vue'
+
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+import Delete from 'vue-material-design-icons/Delete.vue'
+import { Publication } from '../../entities/index.js'
+
+export default {
+	name: 'DeletePublicationThemeDialog',
+	components: {
+		NcDialog,
+		NcButton,
+		NcNoteCard,
+		NcLoadingIcon,
+		// Icons
+		Cancel,
+		Delete,
+	},
+	data() {
+		return {
+			loading: false,
+			success: null,
+			error: false,
+		}
+	},
+	methods: {
+		DeleteTheme() {
+			this.loading = true
+
+			const publicationClone = { ...publicationStore.publicationItem }
+			publicationClone.themes = publicationClone.themes.filter(themeId => themeId !== themeStore.themeItem.id)
+
+			const publicationItem = new Publication({
+				...publicationClone,
+			})
+
+			publicationStore.editPublication(publicationItem)
+				.then(({ response }) => {
+					this.loading = false
+					this.success = response.ok
+
+					// Wait for the user to read the feedback then close the model
+					setTimeout(() => {
+						navigationStore.setDialog(false)
+					}, 2000)
+				})
+				.catch((err) => {
+					this.error = err
+					this.loading = false
+				})
+		},
+	},
+}
+</script>
+
+<style>
+.modal__content {
+    margin: var(--OC-margin-50);
+    text-align: center;
+}
+
+.zaakDetailsContainer {
+    margin-block-start: var(--OC-margin-20);
+    margin-inline-start: var(--OC-margin-20);
+    margin-inline-end: var(--OC-margin-20);
+}
+
+.success {
+    color: green;
+}
+</style>
diff --git a/src/entities/publication/publication.ts b/src/entities/publication/publication.ts
@@ -74,29 +74,29 @@ export class Publication implements TPublication {
 		this.themes = data.themes || []
 		this.data = (!Array.isArray(data.data) && data.data) || {}
 
-		this.anonymization = data.anonymization || {
+		this.anonymization = (!Array.isArray(data.anonymization) && data.anonymization) || {
 			anonymized: false,
 			results: '',
 		}
 
-		this.language = data.language || {
+		this.language = (!Array.isArray(data.language) && data.language) || {
 			code: '',
 			level: '',
 		}
 
 		this.published = data.published || ''
 		this.modified = data.modified || ''
 		this.license = data.license || ''
-		this.archive = data.archive || {
+		this.archive = (!Array.isArray(data.archive) && data.archive) || {
 			date: '',
 		}
 
-		this.geo = data.geo || {
+		this.geo = (!Array.isArray(data.geo) && data.geo) || {
 			type: 'Point',
 			coordinates: [0, 0],
 		}
 
-		this.catalog = data.catalog || {}
+		this.catalog = (!Array.isArray(data.catalog) && data.catalog) || {}
 		this.publicationType = (data.publicationType ?? data.publicationType) || ''
 	}
 
@@ -116,7 +116,7 @@ export class Publication implements TPublication {
 			status: z.enum(['Concept', 'Published', 'Withdrawn', 'Archived', 'Revised', 'Rejected']),
 			attachments: z.union([z.string(), z.number()]).array(),
 			attachmentCount: z.number(),
-			themes: z.string().array(),
+			themes: z.array(z.union([z.string(), z.number()])),
 			data: z.record(z.string(), z.any()),
 			anonymization: z.object({
 				anonymized: z.boolean(),

diff --git a/src/views/publications/PublicationDetail.vue b/src/views/publications/PublicationDetail.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { catalogiStore, publicationTypeStore, navigationStore, publicationStore } from '../../store/store.js'
+import { catalogiStore, publicationTypeStore, navigationStore, publicationStore, themeStore } from '../../store/store.js'
 import { ref } from 'vue'
 
 </script>
@@ -120,10 +120,6 @@ import { ref } from 'vue'
 					<b>Afbeelding:</b>
 					<span>{{ publicationStore.publicationItem?.image }}</span>
 				</div>
-				<div>
-					<b>Thema's:</b>
-					<span>{{ publicationStore.publicationItem?.themes.join(", ") }}</span>
-				</div>
 				<div>
 					<b>Uitgelicht:</b>
 					<span>{{ publicationStore.publicationItem?.featured ? "Ja" : "Nee" }}</span>
@@ -332,6 +328,43 @@ import { ref } from 'vue'
 							Geen eigenschappen gevonden
 						</div>
 					</BTab>
+					<BTab title="Thema's">
+						<div v-if="filteredThemes?.length">
+							<NcListItem v-for="(value, key, i) in filteredThemes"
+								:key="`${value.id}${i}`"
+								:name="value.title"
+								:bold="false"
+								:force-display-actions="true"
+								:active="themeStore.themeItem?.id === value.id">
+								<template #icon>
+									<ShapeOutline
+										:class="themeStore.themeItem?.id === value.id && 'selectedZaakIcon'"
+										disable-menu
+										:size="44" />
+								</template>
+								<template #subname>
+									{{ value.summary }}
+								</template>
+								<template #actions>
+									<NcActionButton @click="themeStore.setThemeItem(value); navigationStore.setSelected('themes')">
+										<template #icon>
+											<OpenInApp :size="20" />
+										</template>
+										Bekijken
+									</NcActionButton>
+									<NcActionButton @click="themeStore.setThemeItem(value); navigationStore.setDialog('deletePublicationThemeDialog')">
+										<template #icon>
+											<Delete :size="20" />
+										</template>
+										Verwijderen
+									</NcActionButton>
+								</template>
+							</NcListItem>
+						</div>
+						<div v-if="!filteredThemes?.length" class="tabPanel">
+							Geen thema's gevonden
+						</div>
+					</BTab>
 					<BTab title="Logging">
 						<table width="100%">
 							<tr>
@@ -462,6 +495,7 @@ export default {
 			publication: [],
 			catalogi: [],
 			publicationType: [],
+			themes: [],
 			prive: false,
 			loading: false,
 			catalogiLoading: false,
@@ -490,6 +524,11 @@ export default {
 			upToDate: false,
 		}
 	},
+	computed: {
+		filteredThemes() {
+			return themeStore.themeList.filter((theme) => this.publication?.themes?.includes(theme.id))
+		},
+	},
 	watch: {
 		publicationItem: {
 			handler(newPublicationItem, oldPublicationItem) {
@@ -498,6 +537,7 @@ export default {
 					this.publication = publicationStore.publicationItem
 					this.fetchCatalogi(publicationStore.publicationItem?.catalog?.id ?? publicationStore.publicationItem.catalogi)
 					this.fetchPublicationType(publicationStore.publicationItem?.publicationType)
+					this.fetchThemes()
 					publicationStore.publicationItem?.id && this.fetchData(publicationStore.publicationItem.id)
 				}
 			},
@@ -510,6 +550,7 @@ export default {
 
 		this.fetchCatalogi(this.publication.catalog?.id ?? this.publication.catalog)
 		this.fetchPublicationType(publicationStore.publicationItem.publicationType)
+		this.fetchThemes()
 		publicationStore.publicationItem?.id && this.fetchData(publicationStore.publicationItem.id)
 
 	},
@@ -523,6 +564,7 @@ export default {
 					// this.oldZaakId = id
 					this.fetchCatalogi(data.catalog?.id ?? data.catalog)
 					this.fetchPublicationType(data.publicationType)
+					this.fetchThemes()
 					publicationStore.getPublicationAttachments(id)
 					// this.loading = false
 				})
@@ -583,6 +625,20 @@ export default {
 					})
 			}
 		},
+		fetchThemes(themes, loading) {
+			if (loading) { this.themesLoading = true }
+
+			themeStore.refreshThemeList()
+				.then(({ response, data }) => {
+					this.themes = data
+
+					if (loading) { this.themesLoading = false }
+				})
+				.catch((err) => {
+					console.error(err)
+					if (loading) { this.themesLoading = false }
+				})
+		},
 		validUrl(url) {
 			try {
 				const test = new URL(url)