From 3b54f417f3d94ea46a4900a2b0a12e3e274702da Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Thu, 5 Dec 2024 10:00:53 +0100
Subject: [PATCH] Updated page

---
 src/entities/page/page.ts                     |  2 +-
 src/modals/page/AddPageModal.vue              | 61 +++++++++----------
 src/modals/page/EditPageModal.vue             | 59 +++++++++---------
 .../AddPublicationDataModal.vue               |  1 +
 .../EditPublicationDataModal.vue              |  1 +
 src/views/AdminSettings.vue                   |  2 +-
 src/views/pages/PageDetail.vue                | 28 ++++++---
 7 files changed, 83 insertions(+), 71 deletions(-)

diff --git a/src/entities/page/page.ts b/src/entities/page/page.ts
index 1a510c98..a58e1d78 100644
--- a/src/entities/page/page.ts
+++ b/src/entities/page/page.ts
@@ -41,7 +41,7 @@ export class Page implements TPage {
 	/* istanbul ignore next */
 	/**
 	 * Validates the page data against a schema
-	 * @returns SafeParseReturnType containing validation result
+	 * @return SafeParseReturnType containing validation result
 	 */
 	public validate(): SafeParseReturnType<TPage, unknown> {
 		// Schema validation for page data
diff --git a/src/modals/page/AddPageModal.vue b/src/modals/page/AddPageModal.vue
index 8f50fd34..3b7b2fc8 100644
--- a/src/modals/page/AddPageModal.vue
+++ b/src/modals/page/AddPageModal.vue
@@ -1,6 +1,8 @@
 <script setup>
 import { navigationStore, pageStore } from '../../store/store.js'
+import { getTheme } from '../../services/getTheme.js'
 </script>
+
 <template>
 	<NcModal
 		v-if="navigationStore.modal === 'pageAdd'"
@@ -34,13 +36,24 @@ import { navigationStore, pageStore } from '../../store/store.js'
 						:value.sync="page.slug"
 						:error="!!inputValidation.fieldErrors?.['slug']"
 						:helper-text="inputValidation.fieldErrors?.['slug']?.[0]" />
-					<NcTextArea
-						:disabled="loading"
-						label="Inhoud"
-						placeholder="{ &quot;key&quot;: &quot;value&quot; }"
-						:value.sync="page.contents"
-						:error="!verifyJsonValidity(page.contents)"
-						:helper-text="!verifyJsonValidity(page.contents) ? 'This is not valid JSON (optional)' : ''" />
+
+					<div :class="`codeMirrorContainer ${getTheme()}`">
+						<CodeMirror
+							v-model="page.contents"
+							:basic="true"
+							placeholder="{ &quot;key&quot;: &quot;value&quot; }"
+							:dark="getTheme() === 'dark'"
+							:tab="true"
+							:gutter="true"
+							:linter="jsonParseLinter()"
+							:lang="json()" />
+						<NcButton class="prettifyButton" :disabled="!page.contents || !verifyJsonValidity(page.contents)" @click="prettifyJson">
+							<template #icon>
+								<AutoFix :size="20" />
+							</template>
+							Prettify
+						</NcButton>
+					</div>
 				</div>
 			</div>
 			<NcButton v-if="success === null"
@@ -64,10 +77,13 @@ import {
 	NcLoadingIcon,
 	NcModal,
 	NcNoteCard,
-	NcTextArea,
 	NcTextField,
 } from '@nextcloud/vue'
+import CodeMirror from 'vue-codemirror6'
+import { json, jsonParseLinter } from '@codemirror/lang-json'
+
 import Plus from 'vue-material-design-icons/Plus.vue'
+import AutoFix from 'vue-material-design-icons/AutoFix.vue'
 
 import { Page } from '../../entities/index.js'
 
@@ -76,12 +92,13 @@ export default {
 	components: {
 		NcModal,
 		NcTextField,
-		NcTextArea,
 		NcButton,
 		NcLoadingIcon,
 		NcNoteCard,
+		CodeMirror,
 		// Icons
 		Plus,
+		AutoFix,
 	},
 	data() {
 		return {
@@ -90,9 +107,6 @@ export default {
 				slug: '',
 				contents: '',
 			},
-
-			errorCode: '',
-			pageLoading: false,
 			hasUpdated: false,
 			loading: false,
 			success: null,
@@ -128,12 +142,16 @@ export default {
 			}
 			return true
 		},
+		prettifyJson() {
+			this.page.contents = JSON.stringify(JSON.parse(this.page.contents), null, 2)
+		},
 		addPage() {
 			this.loading = true
 			this.error = false
 
 			const pageItem = new Page({
 				...this.page,
+				contents: JSON.stringify(JSON.parse(this.page.contents), null, 2),
 			})
 
 			pageStore.addPage(pageItem)
@@ -183,26 +201,7 @@ export default {
   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
index d5cc5a6b..c1d45ce3 100644
--- a/src/modals/page/EditPageModal.vue
+++ b/src/modals/page/EditPageModal.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { navigationStore, pageStore } from '../../store/store.js'
+import { getTheme } from '../../services/getTheme.js'
 </script>
 <template>
 	<NcModal
@@ -34,13 +35,22 @@ import { navigationStore, pageStore } from '../../store/store.js'
 						:value.sync="pageItem.slug"
 						:error="!!inputValidation.fieldErrors?.['slug']"
 						:helper-text="inputValidation.fieldErrors?.['slug']?.[0]" />
-					<NcTextArea
-						:disabled="loading"
-						label="Inhoud"
-						placeholder="{ &quot;key&quot;: &quot;value&quot; }"
-						:value.sync="pageItem.contents"
-						:error="!verifyJsonValidity(pageItem.contents)"
-						:helper-text="!verifyJsonValidity(pageItem.contents) ? 'This is not valid JSON (optional)' : ''" />
+					<div :class="`codeMirrorContainer ${getTheme()}`">
+						<CodeMirror
+							v-model="pageItem.contents"
+							:basic="true"
+							placeholder="{ &quot;key&quot;: &quot;value&quot; }"
+							:dark="getTheme() === 'dark'"
+							:gutter="true"
+							:linter="jsonParseLinter()"
+							:lang="json()" />
+						<NcButton class="prettifyButton" :disabled="!pageItem.contents || !verifyJsonValidity(pageItem.contents)" @click="prettifyJson">
+							<template #icon>
+								<AutoFix :size="20" />
+							</template>
+							Prettify
+						</NcButton>
+					</div>
 				</div>
 			</div>
 			<NcButton v-if="success === null"
@@ -64,10 +74,13 @@ import {
 	NcLoadingIcon,
 	NcModal,
 	NcNoteCard,
-	NcTextArea,
 	NcTextField,
 } from '@nextcloud/vue'
+import CodeMirror from 'vue-codemirror6'
+import { json, jsonParseLinter } from '@codemirror/lang-json'
+
 import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
+import AutoFix from 'vue-material-design-icons/AutoFix.vue'
 
 import { Page } from '../../entities/index.js'
 
@@ -76,12 +89,13 @@ export default {
 	components: {
 		NcModal,
 		NcTextField,
-		NcTextArea,
 		NcButton,
 		NcLoadingIcon,
 		NcNoteCard,
+		CodeMirror,
 		// Icons
 		ContentSaveOutline,
+		AutoFix,
 	},
 	data() {
 		return {
@@ -132,16 +146,19 @@ export default {
 			if (pageStore.pageItem?.id) {
 				this.pageItem = {
 					...pageStore.pageItem,
-					contents: pageStore.pageItem.contents || '{}'
+					contents: JSON.stringify(JSON.parse(pageStore.pageItem.contents), null, 2) || '',
 				}
 			}
 		},
+		prettifyJson() {
+			this.pageItem.contents = JSON.stringify(JSON.parse(this.pageItem.contents), null, 2)
+		},
 		editPage() {
 			this.loading = true
 			this.error = false
-
 			const pageItem = new Page({
 				...this.pageItem,
+				contents: JSON.stringify(JSON.parse(this.pageItem.contents), null, 2),
 			})
 
 			pageStore.editPage(pageItem)
@@ -184,27 +201,7 @@ export default {
 .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/publicationData/AddPublicationDataModal.vue b/src/modals/publicationData/AddPublicationDataModal.vue
index 33cf8f28..9d87b9f8 100644
--- a/src/modals/publicationData/AddPublicationDataModal.vue
+++ b/src/modals/publicationData/AddPublicationDataModal.vue
@@ -143,6 +143,7 @@ import { getTheme } from '../../services/getTheme.js'
 							v-model="value"
 							:basic="true"
 							:dark="getTheme() === 'dark'"
+							:tab="true"
 							:linter="jsonParseLinter()"
 							:lang="json()" />
 						<NcButton class="prettifyButton" @click="prettifyJson">
diff --git a/src/modals/publicationData/EditPublicationDataModal.vue b/src/modals/publicationData/EditPublicationDataModal.vue
index bfb71468..78447d88 100644
--- a/src/modals/publicationData/EditPublicationDataModal.vue
+++ b/src/modals/publicationData/EditPublicationDataModal.vue
@@ -141,6 +141,7 @@ import { getTheme } from '../../services/getTheme.js'
 							v-model="publication.data[publicationStore.publicationDataKey]"
 							:basic="true"
 							:dark="getTheme() === 'dark'"
+							:tab="true"
 							:linter="jsonParseLinter()"
 							:lang="json()" />
 						<NcButton class="prettifyButton" @click="prettifyJson">
diff --git a/src/views/AdminSettings.vue b/src/views/AdminSettings.vue
index fd731879..8aad2e58 100644
--- a/src/views/AdminSettings.vue
+++ b/src/views/AdminSettings.vue
@@ -19,7 +19,7 @@
 					</NcButton>
 				</div>
 
-				<div v-if="!openRegisterInstalled && (settingsData.publication_source === 'openregister' || settingsData.publicationtype_source === 'openregister' || settingsData.catalog_source === 'openregister' || settingsData.listing_source === 'openregister' || settingsData.attachment_source === 'openregister' || settingsData.organization_source === 'openregister' || settingsData.theme_source === 'openregister')">
+				<div v-if="!openRegisterInstalled && (settingsData.publication_source === 'openregister' || settingsData.publicationtype_source === 'openregister' || settingsData.catalog_source === 'openregister' || settingsData.listing_source === 'openregister' || settingsData.attachment_source === 'openregister' || settingsData.organization_source === 'openregister' || settingsData.theme_source === 'openregister' || settingsData.page_source === 'openregister')">
 					<NcNoteCard type="warning">
 						Het lijkt erop dat je een open register hebt geselecteerd maar dat deze nog niet geïnstalleerd is. Dit kan problemen geven. Wil je de instelling resetten?
 					</NcNoteCard>
diff --git a/src/views/pages/PageDetail.vue b/src/views/pages/PageDetail.vue
index a6d07cab..2debbbd3 100644
--- a/src/views/pages/PageDetail.vue
+++ b/src/views/pages/PageDetail.vue
@@ -1,5 +1,7 @@
 <script setup>
 import { navigationStore, pageStore } from '../../store/store.js'
+import { getTheme } from '../../services/getTheme.js'
+
 </script>
 
 <template>
@@ -70,9 +72,14 @@ import { navigationStore, pageStore } from '../../store/store.js'
 		<div class="tabContainer">
 			<BTabs content-class="mt-3" justified>
 				<BTab title="Data" active>
-					<pre class="json-display"><!-- do not remove this comment
-						-->{{ JSON.stringify(page.contents, null, 2) }}
-					</pre>
+					<div :class="`codeMirrorContainer ${getTheme()}`">
+						<CodeMirror
+							v-model="page.contents"
+							:basic="true"
+							:dark="getTheme() === 'dark'"
+							:readonly="true"
+							:lang="json()" />
+					</div>
 				</BTab>
 			</BTabs>
 		</div>
@@ -83,6 +90,8 @@ import { navigationStore, pageStore } from '../../store/store.js'
 // Components
 import { NcActionButton, NcActions, NcLoadingIcon } from '@nextcloud/vue'
 import { BTabs, BTab } from 'bootstrap-vue'
+import CodeMirror from 'vue-codemirror6'
+import { json } from '@codemirror/lang-json'
 
 // Icons
 import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
@@ -90,7 +99,6 @@ import Delete from 'vue-material-design-icons/Delete.vue'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import HelpCircleOutline from 'vue-material-design-icons/HelpCircleOutline.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
-import Web from 'vue-material-design-icons/Web.vue'
 
 /**
  * Component for displaying and managing page details
@@ -102,6 +110,7 @@ export default {
 		NcLoadingIcon,
 		NcActionButton,
 		NcActions,
+		CodeMirror,
 		// Bootstrap
 		BTabs,
 		BTab,
@@ -111,7 +120,6 @@ export default {
 		Delete,
 		ContentCopy,
 		HelpCircleOutline,
-		Web,
 	},
 	props: {
 		pageItem: {
@@ -141,7 +149,10 @@ export default {
 		},
 	},
 	mounted() {
-		this.page = pageStore.pageItem
+		this.page = {
+			...pageStore.pageItem,
+			contents: JSON.stringify(JSON.parse(pageStore.pageItem.contents), null, 2),
+		}
 		pageStore.pageItem && this.fetchData(pageStore.pageItem.id)
 	},
 	methods: {
@@ -151,7 +162,10 @@ export default {
 			})
 				.then((response) => {
 					response.json().then((data) => {
-						this.page = data
+						this.page = {
+							...data,
+							contents: JSON.stringify(JSON.parse(data.contents), null, 2),
+						}
 					})
 				})
 				.catch((err) => {