From 4e8bb166327391fe9c2a2c10f8a548008d368f7c Mon Sep 17 00:00:00 2001
From: Ruben van der Linde <rubenvdlinde@gmail.com>
Date: Fri, 29 Nov 2024 15:29:44 +0100
Subject: [PATCH] Forgot the modals

---
 src/modals/Modals.vue             |  10 +-
 src/modals/page/AddPageModal.vue  | 198 ++++++++++++++++++++++++++++++
 src/modals/page/EditPageModal.vue | 190 ++++++++++++++++++++++++++++
 3 files changed, 397 insertions(+), 1 deletion(-)
 create mode 100644 src/modals/page/AddPageModal.vue
 create mode 100644 src/modals/page/EditPageModal.vue

diff --git a/src/modals/Modals.vue b/src/modals/Modals.vue
index 498e7bf8..94482e76 100644
--- a/src/modals/Modals.vue
+++ b/src/modals/Modals.vue
@@ -25,11 +25,12 @@ import { publicationStore } from './../store/store.js'
 		<EditOrganizationModal />
 		<AddThemeModal />
 		<EditThemeModal />
+		<AddPageModal />
+		<EditPageModal />
 	</div>
 </template>
 
 <script>
-
 import AddAttachmentModal from './attachment/AddAttachmentModal.vue'
 import EditAttachmentModal from './attachment/EditAttachmentModal.vue'
 import AddPublicationTypeModal from './publicationType/AddPublicationTypeModal.vue'
@@ -52,7 +53,12 @@ import AddPublicationDataModal from './publicationData/AddPublicationDataModal.v
 import EditPublicationDataModal from './publicationData/EditPublicationDataModal.vue'
 import AddThemeModal from './theme/AddThemeModal.vue'
 import EditThemeModal from './theme/EditThemeModal.vue'
+import AddPageModal from './page/AddPageModal.vue'
+import EditPageModal from './page/EditPageModal.vue'
 
+/**
+ * Component that contains all modals used in the application
+ */
 export default {
 	name: 'Modals',
 	components: {
@@ -76,6 +82,8 @@ export default {
 		EditOrganizationModal,
 		AddThemeModal,
 		EditThemeModal,
+		AddPageModal,
+		EditPageModal,
 	},
 }
 </script>
diff --git a/src/modals/page/AddPageModal.vue b/src/modals/page/AddPageModal.vue
new file mode 100644
index 00000000..b002b86a
--- /dev/null
+++ b/src/modals/page/AddPageModal.vue
@@ -0,0 +1,198 @@
+<script setup>
+import { navigationStore, pageStore } from '../../store/store.js'
+</script>
+<template>
+	<NcModal
+		v-if="navigationStore.modal === 'pageAdd'"
+		ref="modalRef"
+		label-id="addPageModal"
+		@close="navigationStore.setModal(false)">
+		<div class="modal__content">
+			<h2>Pagina toevoegen</h2>
+			<div v-if="success !== null || error">
+				<NcNoteCard v-if="success" type="success">
+					<p>Pagina succesvol toegevoegd</p>
+				</NcNoteCard>
+				<NcNoteCard v-if="!success" type="error">
+					<p>Er is iets fout gegaan bij het toevoegen van Pagina</p>
+				</NcNoteCard>
+				<NcNoteCard v-if="error" type="error">
+					<p>{{ error }}</p>
+				</NcNoteCard>
+			</div>
+			<div class="formContainer">
+				<div v-if="success === null" class="form-group">
+					<NcTextField
+						:disabled="loading"
+						label="Naam"
+						:value.sync="page.name"
+						:error="!!inputValidation.fieldErrors?.['name']"
+						:helper-text="inputValidation.fieldErrors?.['name']?.[0]" />
+					<NcTextField
+						:disabled="loading"
+						label="Slug"
+						:value.sync="page.slug"
+						:error="!!inputValidation.fieldErrors?.['slug']"
+						:helper-text="inputValidation.fieldErrors?.['slug']?.[0]" />
+					<NcTextArea
+						:disabled="loading"
+						label="Inhoud"
+						:value.sync="page.contents"
+						:error="!!inputValidation.fieldErrors?.['contents']"
+						:helper-text="inputValidation.fieldErrors?.['contents']?.[0]" />
+				</div>
+			</div>
+			<NcButton v-if="success === null"
+				v-tooltip="inputValidation.errorMessages?.[0]"
+				:disabled="!inputValidation.success || loading"
+				type="primary"
+				@click="addPage()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<Plus v-if="!loading" :size="20" />
+				</template>
+				Toevoegen
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import {
+	NcButton,
+	NcLoadingIcon,
+	NcModal,
+	NcNoteCard,
+	NcTextArea,
+	NcTextField,
+} from '@nextcloud/vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+
+import { Page } from '../../entities/index.js'
+
+export default {
+	name: 'AddPageModal',
+	components: {
+		NcModal,
+		NcTextField,
+		NcTextArea,
+		NcButton,
+		NcLoadingIcon,
+		NcNoteCard,
+		// Icons
+		Plus,
+	},
+	data() {
+		return {
+			page: {
+				name: '',
+				slug: '',
+				contents: '',
+			},
+
+			errorCode: '',
+			pageLoading: false,
+			hasUpdated: false,
+			loading: false,
+			success: null,
+			error: false,
+		}
+	},
+	computed: {
+		inputValidation() {
+			const pageItem = new Page({
+				...this.page,
+			})
+
+			const result = pageItem.validate()
+
+			return {
+				success: result.success,
+				errorMessages: result?.error?.issues.map((issue) => `${issue.path.join('.')}: ${issue.message}`) || [],
+				fieldErrors: result?.error?.formErrors?.fieldErrors || {},
+			}
+		},
+	},
+	updated() {
+		if (navigationStore.modal === 'pageAdd' && !this.hasUpdated) {
+			this.hasUpdated = true
+		}
+	},
+	methods: {
+		isJsonString(str) {
+			try {
+				JSON.parse(str)
+			} catch (e) {
+				return false
+			}
+			return true
+		},
+		addPage() {
+			this.loading = true
+			this.error = false
+
+			const pageItem = new Page({
+				...this.page,
+			})
+
+			pageStore.addPage(pageItem)
+				.then(({ response }) => {
+					this.loading = false
+					this.success = response.ok
+
+					// Wait for the user to read the feedback then close the model
+					const self = this
+					setTimeout(function() {
+						navigationStore.setModal(false)
+						self.success = null
+						self.hasUpdated = false
+						self.page = {
+							name: '',
+							slug: '',
+							contents: '',
+						}
+					}, 2000)
+				})
+				.catch((err) => {
+					this.error = err
+					this.loading = false
+					self.hasUpdated = false
+				})
+		},
+	},
+}
+</script>
+
+<style>
+.modal__content {
+  margin: var(--OC-margin-50);
+  text-align: center;
+}
+
+.formContainer > * {
+  margin-block-end: 10px;
+}
+
+.selectGrid {
+  display: grid;
+  grid-gap: 5px;
+  grid-template-columns: 1fr 1fr;
+}
+
+.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;
+}
+
+.APM-horizontal {
+  display: flex;
+  gap: 4px;
+  flex-direction: row;
+  align-items: center;
+}
+</style>
diff --git a/src/modals/page/EditPageModal.vue b/src/modals/page/EditPageModal.vue
new file mode 100644
index 00000000..5328a160
--- /dev/null
+++ b/src/modals/page/EditPageModal.vue
@@ -0,0 +1,190 @@
+<script setup>
+import { navigationStore, pageStore } from '../../store/store.js'
+</script>
+<template>
+	<NcModal
+		v-if="navigationStore.modal === 'editPage'"
+		ref="modalRef"
+		label-id="editPageModal"
+		@close="navigationStore.setModal(false)">
+		<div class="modal__content">
+			<h2>Pagina bewerken</h2>
+			<div v-if="success !== null || error">
+				<NcNoteCard v-if="success" type="success">
+					<p>Pagina succesvol bewerkt</p>
+				</NcNoteCard>
+				<NcNoteCard v-if="!success" type="error">
+					<p>Er is iets fout gegaan bij het bewerken van Pagina</p>
+				</NcNoteCard>
+				<NcNoteCard v-if="error" type="error">
+					<p>{{ error }}</p>
+				</NcNoteCard>
+			</div>
+			<div class="formContainer">
+				<div v-if="success === null" class="form-group">
+					<NcTextField
+						:disabled="loading"
+						label="Naam"
+						:value.sync="pageItem.name"
+						:error="!!inputValidation.fieldErrors?.['name']"
+						:helper-text="inputValidation.fieldErrors?.['name']?.[0]" />
+					<NcTextField
+						:disabled="loading"
+						label="Slug"
+						:value.sync="pageItem.slug"
+						:error="!!inputValidation.fieldErrors?.['slug']"
+						:helper-text="inputValidation.fieldErrors?.['slug']?.[0]" />
+					<NcTextArea
+						:disabled="loading"
+						label="Inhoud"
+						:value.sync="pageItem.contents"
+						:error="!!inputValidation.fieldErrors?.['contents']"
+						:helper-text="inputValidation.fieldErrors?.['contents']?.[0]" />
+				</div>
+			</div>
+			<NcButton v-if="success === null"
+				v-tooltip="inputValidation.errorMessages?.[0]"
+				:disabled="!inputValidation.success || loading"
+				type="primary"
+				@click="editPage()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<ContentSaveOutline v-if="!loading" :size="20" />
+				</template>
+				Opslaan
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import {
+	NcButton,
+	NcLoadingIcon,
+	NcModal,
+	NcNoteCard,
+	NcTextArea,
+	NcTextField,
+} from '@nextcloud/vue'
+import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
+
+import { Page } from '../../entities/index.js'
+
+export default {
+	name: 'EditPageModal',
+	components: {
+		NcModal,
+		NcTextField,
+		NcTextArea,
+		NcButton,
+		NcLoadingIcon,
+		NcNoteCard,
+		// Icons
+		ContentSaveOutline,
+	},
+	data() {
+		return {
+			pageItem: {
+				name: '',
+				slug: '',
+				contents: '',
+			},
+			loading: false,
+			success: null,
+			error: false,
+			hasUpdated: false,
+		}
+	},
+	computed: {
+		inputValidation() {
+			const pageItem = new Page({
+				...this.pageItem,
+			})
+
+			const result = pageItem.validate()
+
+			return {
+				success: result.success,
+				errorMessages: result?.error?.issues.map((issue) => `${issue.path.join('.')}: ${issue.message}`) || [],
+				fieldErrors: result?.error?.formErrors?.fieldErrors || {},
+			}
+		},
+	},
+	mounted() {
+		// pageStore.pageItem can be false, so only assign pageStore.pageItem to pageItem if its NOT false
+		pageStore.pageItem && (this.pageItem = pageStore.pageItem)
+	},
+	updated() {
+		if (navigationStore.modal === 'editPage' && this.hasUpdated) {
+			if (this.pageItem.id === pageStore.pageItem.id) return
+			this.hasUpdated = false
+		}
+		if (navigationStore.modal === 'editPage' && !this.hasUpdated) {
+			pageStore.pageItem && (this.pageItem = pageStore.pageItem)
+			this.hasUpdated = true
+		}
+	},
+	methods: {
+		editPage() {
+			this.loading = true
+			this.error = false
+
+			const pageItem = new Page({
+				...this.pageItem,
+			})
+
+			pageStore.editPage(pageItem)
+				.then(({ response }) => {
+
+					this.loading = false
+					this.success = response.ok
+
+					// Wait for the user to read the feedback then close the model
+					const self = this
+					setTimeout(function() {
+						self.success = null
+						navigationStore.setModal(false)
+					}, 2000)
+				})
+				.catch((err) => {
+					this.error = err
+					this.loading = false
+				})
+		},
+	},
+}
+</script>
+
+<style>
+.modal__content {
+  margin: var(--OC-margin-50);
+  text-align: center;
+}
+
+.formContainer > * {
+  margin-block-end: 10px;
+}
+
+.selectGrid {
+  display: grid;
+  grid-gap: 5px;
+  grid-template-columns: 1fr 1fr;
+}
+
+.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;
+}
+
+.APM-horizontal {
+  display: flex;
+  gap: 4px;
+  flex-direction: row;
+  align-items: center;
+}
+</style>