Merge pull request #121 from ConductionNL/feature/DIMOC-209/publicati…

…on-add-flow publication modal flow and changed values
OpenCatalogi · Aug 8, 2024 · 4eac87d · 4eac87d
2 parents 1cba35a + 542b5b6
commit 4eac87d
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 102 deletions.
diff --git a/src/modals/publication/AddPublicationModal.vue b/src/modals/publication/AddPublicationModal.vue
@@ -21,19 +21,34 @@ import { navigationStore, publicationStore } from '../../store/store.js'
 			</div>
 			<div class="formContainer">
 				<div v-if="success === null" class="form-group">
-					<NcSelect v-bind="catalogi"
-						v-model="catalogi.value"
-						input-label="Catalogi *"
-						:loading="catalogiLoading"
-						:disabled="publicationLoading"
-						required />
-					<NcSelect v-bind="metaData"
-						v-model="metaData.value"
-						input-label="MetaData *"
-						:loading="metaDataLoading"
-						:disabled="publicationLoading"
-						required />
+					<!-- STAGE 1 -->
+					<div v-if="!catalogi?.value?.id">
+						<NcSelect v-bind="catalogi"
+							v-model="catalogi.value"
+							input-label="Catalogi *"
+							:loading="catalogiLoading"
+							:disabled="publicationLoading"
+							required />
+					</div>
+					<!-- STAGE 2 -->
+					<div v-if="catalogi?.value?.id && !metaData?.value?.id">
+						<NcButton :disabled="loading"
+							@click="catalogi.value = null">
+							Terug naar Catalogi
+						</NcButton>
+						<NcSelect v-bind="metaData"
+							v-model="metaData.value"
+							input-label="MetaData *"
+							:loading="metaDataLoading"
+							:disabled="publicationLoading"
+							required />
+					</div>
+					<!-- STAGE 3 -->
 					<div v-if="catalogi.value?.id && metaData.value?.id">
+						<NcButton :disabled="loading"
+							@click="metaData.value = null">
+							Terug naar Metadata
+						</NcButton>
 						<NcTextField :disabled="loading"
 							label="Titel *"
 							required
@@ -55,17 +70,11 @@ import { navigationStore, publicationStore } from '../../store/store.js'
 							label="Portaal"
 							:value.sync="publication.portal" />
 						<span>
-							<p>Published</p>
+							<p>Publicatie datum</p>
 							<NcDateTimePicker v-model="publication.published"
 								:disabled="loading"
 								label="Publicatie datum" />
 						</span>
-						<span>
-							<p>Modified</p>
-							<NcDateTimePicker v-model="publication.modified"
-								:disabled="loading"
-								label="Modified" />
-						</span>
 						<span class="APM-horizontal">
 							<NcCheckboxRadioSwitch :disabled="loading"
 								label="Featured"
@@ -80,19 +89,20 @@ import { navigationStore, publicationStore } from '../../store/store.js'
 						<NcTextField :disabled="loading"
 							label="Licentie"
 							:value.sync="publication.license" />
+
+						<NcButton :disabled="(!publication.title || !catalogi?.value?.id || !metaData?.value?.id || !publication.summary) || loading"
+							class="apm-submit-button"
+							type="primary"
+							@click="addPublication()">
+							<template #icon>
+								<NcLoadingIcon v-if="loading" :size="20" />
+								<Plus v-if="!loading" :size="20" />
+							</template>
+							Toevoegen
+						</NcButton>
 					</div>
 				</div>
 			</div>
-			<NcButton v-if="success === null"
-				:disabled="(!publication.title || !catalogi?.value?.id || !metaData?.value?.id || !publication.summary) || loading"
-				type="primary"
-				@click="addPublication()">
-				<template #icon>
-					<NcLoadingIcon v-if="loading" :size="20" />
-					<Plus v-if="!loading" :size="20" />
-				</template>
-				Toevoegen
-			</NcButton>
 		</div>
 	</NcModal>
 </template>
@@ -134,7 +144,6 @@ export default {
 				description: '',
 				reference: '',
 				license: '',
-				modified: new Date(),
 				featured: false,
 				portal: '',
 				category: '',
@@ -185,13 +194,19 @@ export default {
 			})
 				.then((response) => {
 					response.json().then((data) => {
+						const selectedCatalogus = data.results.filter((catalogus) => catalogus.id.toString() === navigationStore.selectedCatalogus.toString())[0]
 
 						this.catalogi = {
 							options: Object.entries(data.results).map((catalog) => ({
 								id: catalog[1].id,
 								label: catalog[1].title,
 							})),
-
+							value: navigationStore.selectedCatalogus
+								? {
+									id: selectedCatalogus.id,
+									label: selectedCatalogus.title,
+								}
+								: null,
 						}
 					})
 					this.catalogiLoading = false
@@ -269,7 +284,6 @@ export default {
 							description: '',
 							reference: '',
 							license: '',
-							modified: new Date(),
 							featured: false,
 							portal: '',
 							category: '',
@@ -324,4 +338,8 @@ export default {
     flex-direction: row;
     align-items: center;
 }
+
+.apm-submit-button {
+    margin-block-start: 1rem
+}
 </style>
diff --git a/src/modals/publication/EditPublicationModal.vue b/src/modals/publication/EditPublicationModal.vue
@@ -41,17 +41,11 @@ import { navigationStore, publicationStore } from '../../store/store.js'
 					label="Portaal"
 					:value.sync="publicationItem.portal" />
 				<span>
-					<p>Published</p>
+					<p>Publicatie datum</p>
 					<NcDateTimePicker v-model="publicationItem.published"
 						:disabled="loading"
 						label="Publicatie datum" />
 				</span>
-				<span>
-					<p>Modified</p>
-					<NcDateTimePicker v-model="publicationItem.modified"
-						:disabled="loading"
-						label="Modified" />
-				</span>
 				<span class="EPM-horizontal">
 					<NcCheckboxRadioSwitch :disabled="loading"
 						label="Featured"
@@ -121,7 +115,6 @@ export default {
 				portal: '',
 				featured: false,
 				published: '',
-				modified: '',
 				license: '',
 				catalogi: '',
 				metaData: '',
@@ -154,9 +147,6 @@ export default {
 		if (navigationStore.modal === 'editPublication' && !this.hasUpdated) {
 			publicationStore.publicationItem && (this.publicationItem = publicationStore.publicationItem)
 			this.fetchData(publicationStore.publicationItem.id)
-			// just incase we decide we want to be able to change catalogi and metadata
-			// this.fetchCatalogi()
-			// this.fetchMetaData()
 			this.hasUpdated = true
 		}
 	},
@@ -172,6 +162,7 @@ export default {
 				.then((response) => {
 					response.json().then((data) => {
 						publicationStore.setPublicationItem(data)
+						this.publicationItem = publicationStore.publicationItem
 					})
 					this.loading = false
 				})
@@ -180,65 +171,6 @@ export default {
 					this.loading = false
 				})
 		},
-		fetchCatalogi() {
-			this.catalogiLoading = true
-			fetch('/index.php/apps/opencatalogi/api/catalogi', {
-				method: 'GET',
-			})
-				.then((response) => {
-					response.json().then((data) => {
-
-						const selectedCatalogi = data.results.find((catalogi) => catalogi.id.toString() === this.publicationItem.catalogi.toString())
-
-						this.catalogi = {
-							inputLabel: 'Catalogi',
-							options: data.results.map((catalog) => ({
-								id: catalog.id,
-								label: catalog.title,
-							})),
-							// FIXME: for some reason the NcSelect uses the id instead of the label when displaying
-							value: [{
-								id: selectedCatalogi.id ?? '',
-								label: selectedCatalogi.title ?? '',
-							}],
-						}
-					})
-					this.catalogiLoading = false
-				})
-				.catch((err) => {
-					console.error(err)
-					this.catalogiLoading = false
-				})
-		},
-		fetchMetaData() {
-			this.metaDataLoading = true
-			fetch('/index.php/apps/opencatalogi/api/metadata', {
-				method: 'GET',
-			})
-				.then((response) => {
-					response.json().then((data) => {
-						const selectedMetaData = data.results.find((metadata) => metadata.id.toString() === this.publicationItem.metaData.toString())
-
-						this.metaData = {
-							inputLabel: 'MetaData',
-							options: data.results.map((metaData) => ({
-								id: metaData.id,
-								label: metaData.title,
-							})),
-							// FIXME: for some reason the NcSelect uses the id instead of the label when displaying
-							value: {
-								id: selectedMetaData.id,
-								label: selectedMetaData.title,
-							},
-						}
-					})
-					this.metaDataLoading = false
-				})
-				.catch((err) => {
-					console.error(err)
-					this.metaDataLoading = false
-				})
-		},
 		updatePublication() {
 			this.loading = true
 			fetch(