Merge pull request #183 from ConductionNL/development

Development to main

src/dialogs/Dialogs.vue

@@ -30,6 +30,7 @@ import { navigationStore } from '../store/store.js'
 		<CopyOrganizationDialog />
 		<DeleteThemeDialog />
 		<CopyThemeDialog />
+		<CopyMenuDialog v-if="navigationStore.dialog === 'copyMenu'" />
 	</div>
 </template>
 
@@ -58,6 +59,7 @@ import DeletePublicationThemeDialog from './publicationTheme/DeletePublicationTh
 import CopyThemeDialog from './theme/CopyThemeDialog.vue'
 import DeleteThemeDialog from './theme/DeleteThemeDialog.vue'
 import DownloadPublicationDialog from './publication/DownloadPublicationDialog.vue'
+import CopyMenuDialog from './menu/CopyMenuDialog.vue'
 
 export default {
 	name: 'Dialogs',
@@ -86,6 +88,7 @@ export default {
 		DeleteThemeDialog,
 		CopyThemeDialog,
 		DownloadPublicationDialog,
+		CopyMenuDialog,
 	},
 }
 </script>

src/dialogs/menu/CopyMenuDialog.vue

@@ -0,0 +1,119 @@
+<script setup>
+import { navigationStore, menuStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog name="Menu kopieren"
+		:can-close="false">
+		<div v-if="success !== null || error">
+			<NcNoteCard v-if="success" type="success">
+				<p>Menu succesvol gekopieerd</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="!success" type="error">
+				<p>Er is iets fout gegaan bij het kopiëren van Menu</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="error" type="error">
+				<p>{{ error }}</p>
+			</NcNoteCard>
+		</div>
+
+		<p v-if="success === null">
+			Wil je <b>{{ menuStore.menuItem?.name }}</b> kopiëren?
+		</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"
+				type="primary"
+				@click="copyMenu()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<ContentCopy v-if="!loading" :size="20" />
+				</template>
+				Kopiëren
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import { NcButton, NcDialog, NcLoadingIcon, NcNoteCard } from '@nextcloud/vue'
+import _ from 'lodash'
+
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
+
+import { Menu } from '../../entities/index.js'
+
+export default {
+	name: 'CopyMenuDialog',
+	components: {
+		NcDialog,
+		NcButton,
+		NcNoteCard,
+		NcLoadingIcon,
+		// Icons
+		Cancel,
+		ContentCopy,
+	},
+	data() {
+		return {
+			loading: false,
+			success: null,
+			error: false,
+		}
+	},
+	methods: {
+		copyMenu() {
+			this.loading = true
+
+			const menuClone = _.cloneDeep(menuStore.menuItem)
+
+			menuClone.name = 'KOPIE: ' + menuClone.name
+			delete menuClone.id
+			delete menuClone.uuid
+
+			const menuItem = new Menu(menuClone)
+
+			menuStore.saveMenu(menuItem)
+				.then(({ response }) => {
+					this.loading = false
+					this.success = response.ok
+
+					navigationStore.setSelected('menus')
+					// 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>

src/entities/menu/menu.ts

@@ -48,7 +48,20 @@ export class Menu implements TMenu {
 		const schema = z.object({
 			name: z.string().min(1, 'naam is verplicht'),
 			position: z.number().min(0, 'positie moet 0 of hoger zijn'),
-			items: z.array(z.any()), // At least '[]'
+			items: z.array(z.object({
+				name: z.string().min(1, 'naam is verplicht'),
+				slug: z.string().min(1, 'slug is verplicht'),
+				link: z.string(),
+				description: z.string(),
+				icon: z.string(),
+				items: z.array(z.object({
+					name: z.string().min(1, 'naam is verplicht'),
+					slug: z.string().min(1, 'slug is verplicht'),
+					link: z.string(),
+					description: z.string(),
+					icon: z.string(),
+				})),
+			})), // At least '[]'
 		})
 
 		const result = schema.safeParse({

src/entities/page/page.ts

@@ -48,7 +48,9 @@ export class Page implements TPage {
 		// Schema validation for page data
 		const schema = z.object({
 			name: z.string().min(1, 'naam is verplicht'),
-			slug: z.string().min(1, 'slug is verplicht'),
+			slug: z.string()
+				.min(1, 'slug is verplicht')
+				.regex(/^[a-z0-9-]+$/g, 'een slug mag alleen kleine letters, cijfers en streepjes bevatten'),
 			contents: z.array(
 				z.object({
 					type: z.string().min(1, 'type is verplicht'),

src/eventBus.js

@@ -0,0 +1,2 @@
+import Vue from 'vue'
+export const EventBus = new Vue()

src/modals/Modals.vue

@@ -26,9 +26,13 @@ import { navigationStore, publicationStore } from './../store/store.js'
 		<AddThemeModal />
 		<EditThemeModal />
 		<PageForm v-if="navigationStore.modal === 'pageForm'" />
+		<DeletePage v-if="navigationStore.modal === 'deletePage'" />
 		<AddPageContentsModal v-if="navigationStore.modal === 'addPageContents'" />
-		<EditMenuModal />
+		<!-- Menu -->
+		<EditMenuModal v-if="navigationStore.modal === 'editMenu'" />
 		<DeleteMenuModal />
+		<EditMenuItemModal v-if="navigationStore.modal === 'editMenuItem'" />
+		<DeleteMenuItemModal v-if="navigationStore.modal === 'deleteMenuItem'" />
 	</div>
 </template>
 
@@ -56,9 +60,13 @@ import EditPublicationDataModal from './publicationData/EditPublicationDataModal
 import AddThemeModal from './theme/AddThemeModal.vue'
 import EditThemeModal from './theme/EditThemeModal.vue'
 import PageForm from './page/PageForm.vue'
+import DeletePage from './page/DeletePage.vue'
 import AddPageContentsModal from './pageContents/AddPageContents.vue'
+// menu
 import EditMenuModal from './menu/EditMenuModal.vue'
 import DeleteMenuModal from './menu/DeleteMenuModal.vue'
+import EditMenuItemModal from './menuItem/EditMenuItemModal.vue'
+import DeleteMenuItemModal from './menuItem/DeleteMenuItemModal.vue'
 
 /**
  * Component that contains all modals used in the application
@@ -87,9 +95,13 @@ export default {
 		AddThemeModal,
 		EditThemeModal,
 		PageForm,
+		DeletePage,
 		AddPageContentsModal,
+		// menu
 		EditMenuModal,
 		DeleteMenuModal,
+		EditMenuItemModal,
+		DeleteMenuItemModal,
 	},
 }
 </script>