Merge pull request #4 from ConductionNL/feature/DIMOC-240

Publicatie dialogs en documentatie
ConductionNL · Aug 13, 2024 · 1a67f28 · 1a67f28
2 parents c8eee0c + 5ba3f62
commit 1a67f28
Show file tree

Hide file tree

Showing 19 changed files with 401 additions and 332 deletions.
diff --git a/docs/developers/feature_flow.puml b/docs/developers/feature_flow.puml
@@ -23,7 +23,7 @@ alt Feature-aanvraag goedgekeurd
     end note
 
     Ontwikkelingspartij -> Ontwikkelingspartij: Forkt de codebase
-    Ontwikkelingspartij -> Ontwikkelingspartij: Bouwt de feature
+    Ontwikkelingspartij -> Ontwikkelingspartij: Bouwt de feature op de fork
     Ontwikkelingspartij -> Beheerderspartij: Maakt PR met verwijzing naar het issue-nummer
     note right of Beheerderspartij
      Code wordt bij voorkeur terug geleverd aan de centrale codebase

diff --git a/src/modals/metaData/AddMetaDataModal.vue b/src/modals/metaData/AddMetaDataModal.vue
@@ -21,9 +21,21 @@ import { navigationStore, metadataStore } from '../../store/store.js'
 				</NcNoteCard>
 			</div>
 			<div v-if="success === null" class="form-group">
-				<NcTextField label="Titel" :value.sync="metaData.title" required="true" />
-				<NcTextField label="Versie" :value.sync="metaData.version" />
-				<NcTextArea label="Beschrijving" :disabled="loading" :value.sync="metaData.description" />
+				<NcTextField
+					label="Titel"
+					required="true"
+					value.sync="metaData.title" />
+				<NcTextField
+					label="Versie"
+					:value.sync="metaData.version" />
+				<NcTextField :disabled="loading"
+					label="Samenvatting *"
+					required="true"
+					:value.sync="metaData.summary" />
+				<NcTextArea
+					label="Beschrijving"
+					:disabled="loading"
+					:value.sync="metaData.description" />
 			</div>
 			<NcButton v-if="success === null"
 				:disabled="!metaData.title || loading"

diff --git a/src/modals/metaData/EditMetaDataModal.vue b/src/modals/metaData/EditMetaDataModal.vue
@@ -21,10 +21,23 @@ import { navigationStore, metadataStore } from '../../store/store.js'
 				</NcNoteCard>
 			</div>
 			<div v-if="success == null" class="form-group">
-				<NcTextField label="Titel" :disabled="loading" :value.sync="metadataStore.metaDataItem.title" />
-				<NcTextField label="Versie" :disabled="loading" :value.sync="metadataStore.metaDataItem.version" />
-				<NcTextArea label="Beschrijving" :disabled="loading" :value.sync="metadataStore.metaDataItem.description" />
-				<NcTextField label="vereisten (splits op ,)" :value.sync="metadataRequired" />
+				<NcTextField
+					label="Titel"
+					:disabled="loading"
+					:value.sync="metadataStore.metaDataItem.title" />
+				<NcTextField
+					label="Versie"
+					:disabled="loading"
+					:value.sync="metadataStore.metaDataItem.version" />
+				<NcTextField
+					label="Samenvatting *"
+					required="true"
+					:disabled="loading"
+					:value.sync="metadataStore.metaDataItem.summary" />
+				<NcTextArea
+					label="Beschrijving"
+					:disabled="loading"
+					:value.sync="metadataStore.metaDataItem.description" />
 			</div>
 			<NcButton
 				v-if="success == null"

diff --git a/src/modals/publication/AddPublicationModal.vue b/src/modals/publication/AddPublicationModal.vue
@@ -2,115 +2,151 @@
 import { navigationStore, publicationStore } from '../../store/store.js'
 </script>
 <template>
-	<NcModal v-if="navigationStore.modal === 'publicationAdd'"
-		ref="modalRef"
-		label-id="addPublicationModal"
-		@close="closeModal">
-		<div class="modal__content">
-			<h2>Publicatie toevoegen</h2>
-			<div v-if="success !== null || error">
-				<NcNoteCard v-if="success" type="success">
-					<p>Publicatie succesvol toegevoegd</p>
-				</NcNoteCard>
-				<NcNoteCard v-if="!success" type="error">
-					<p>Er is iets fout gegaan bij het toevoegen van Publicatie</p>
-				</NcNoteCard>
-				<NcNoteCard v-if="error" type="error">
-					<p>{{ error }}</p>
-				</NcNoteCard>
-			</div>
-			<div class="formContainer">
-				<div v-if="success === null" class="form-group">
-					<!-- 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="Publicatie type *"
-							: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 publicatie typen
-						</NcButton>
-						<NcTextField :disabled="loading"
-							label="Titel *"
-							required
-							:value.sync="publication.title" />
-						<NcTextField :disabled="loading"
-							label="Samenvatting *"
-							required
-							:value.sync="publication.summary" />
-						<NcTextArea :disabled="loading"
-							label="Beschrijving"
-							:value.sync="publication.description" />
-						<NcTextField :disabled="loading"
-							label="Reference"
-							:value.sync="publication.reference" />
-						<NcTextField :disabled="loading"
-							label="Categorie"
-							:value.sync="publication.category" />
-						<NcTextField :disabled="loading"
-							label="Portaal"
-							:value.sync="publication.portal" />
-						<span>
-							<p>Publicatie datum</p>
-							<NcDateTimePicker v-model="publication.published"
-								:disabled="loading"
-								label="Publicatie datum" />
-						</span>
-						<span class="APM-horizontal">
-							<NcCheckboxRadioSwitch :disabled="loading"
-								label="Featured"
-								:checked.sync="publication.featured">
-								Featured
-							</NcCheckboxRadioSwitch>
-						</span>
-						<NcTextField :disabled="loading"
-							label="Image"
-							:value.sync="publication.image" />
-						<b>Juridisch</b>
-						<NcTextField :disabled="loading"
-							label="Licentie"
-							:value.sync="publication.license" />
+	<NcDialog v-if="navigationStore.modal === 'publicationAdd'"
+		name="Publicatie toevoegen"
+		size="normal"
+		:can-close="false">
+		<div v-if="success !== null || error">
+			<NcNoteCard v-if="success" type="success">
+				<p>Publicatie succesvol aangemaakt</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="!success" type="error">
+				<p>Er is iets fout gegaan bij het aanmaken van Publicatie</p>
+			</NcNoteCard>
+			<NcNoteCard v-if="error" type="error">
+				<p>{{ error }}</p>
+			</NcNoteCard>
+		</div>
+
+		<template #actions>
+			<NcButton v-if="catalogi?.value?.id && !metaData?.value?.id"
+				:disabled="loading"
+				@click="catalogi.value = null">
+				<template #icon>
+					<ArrowLeft :size="20" />
+				</template>
+				Terug naar Catalogi
+			</NcButton>
+			<NcButton v-if="catalogi.value?.id && metaData.value?.id"
+				:disabled="loading"
+				@click="metaData.value = null">
+				<template #icon>
+					<ArrowLeft :size="20" />
+				</template>
+				Terug naar publicatie type
+			</NcButton>
+			<NcButton
+				@click="navigationStore.setModal(false)">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				{{ success ? 'Sluiten' : 'Annuleer' }}
+			</NcButton>
+			<NcButton
+				@click="openLink('https://conduction.gitbook.io/opencatalogi-nextcloud/gebruikers/publicaties', '_blank')">
+				<template #icon>
+					<Help :size="20" />
+				</template>
+				Help
+			</NcButton>
+			<NcButton v-if="success === null"
+				:disabled="!publication.title || !publication.summary"
+				type="primary"
+				@click="addPublication()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<Plus v-if="!loading" :size="20" />
+				</template>
+				Toevoegen
+			</NcButton>
+		</template>
 
-						<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 class="formContainer">
+			<div v-if="catalogi?.value?.id && success === null">
+				<b>Catalogus:</b> {{ catalogi.value.label }}
+				<NcButton @click="catalogi.value = null">
+					Catalogus wijzigen
+				</NcButton>
+			</div>
+			<div v-if=" metaData.value?.id && success === null">
+				<b>Publicatietype:</b> {{ metaData.value.label }}
+				<NcButton @click="metaData.value = null">
+					Publicatietype wijzigen
+				</NcButton>
+			</div>
+			<div v-if="success === null" class="form-group">
+				<!-- STAGE 1 -->
+				<div v-if="!catalogi?.value?.id">
+					<p>Publicaties horen in een <a @click="openLink('https://conduction.gitbook.io/opencatalogi-nextcloud/beheerders/catalogi', '_blank')">catalogus</a>, aan welke catlogus wilt u deze publicatie toevoegen?</p>
+					<NcSelect v-bind="catalogi"
+						v-model="catalogi.value"
+						input-label="Catalogus *"
+						:loading="catalogiLoading"
+						:disabled="publicationLoading"
+						required />
+				</div>
+				<!-- STAGE 2 -->
+				<div v-if="catalogi?.value?.id && !metaData?.value?.id">
+					<p>Publicaties worden gedefineerd door <a @click="openLink('https://conduction.gitbook.io/opencatalogi-nextcloud/beheerders/metadata', '_blank')">publicatie typen</a>, van welk publicatie type wit u een publicatie aanmaken?</p>
+					<NcSelect v-bind="metaData"
+						v-model="metaData.value"
+						input-label="Publicatie type *"
+						:loading="metaDataLoading"
+						:disabled="publicationLoading"
+						required />
+				</div>
+				<!-- STAGE 3 -->
+				<div v-if="catalogi.value?.id && metaData.value?.id">
+					<NcTextField :disabled="loading"
+						label="Titel *"
+						required
+						:value.sync="publication.title" />
+					<NcTextField :disabled="loading"
+						label="Samenvatting *"
+						required
+						:value.sync="publication.summary" />
+					<NcTextArea :disabled="loading"
+						label="Beschrijving"
+						:value.sync="publication.description" />
+					<NcTextField :disabled="loading"
+						label="Reference"
+						:value.sync="publication.reference" />
+					<NcTextField :disabled="loading"
+						label="Categorie"
+						:value.sync="publication.category" />
+					<NcTextField :disabled="loading"
+						label="Portaal"
+						:value.sync="publication.portal" />
+					<span>
+						<p>Publicatie datum</p>
+						<NcDateTimePicker v-model="publication.published"
+							:disabled="loading"
+							label="Publicatie datum" />
+					</span>
+					<span class="APM-horizontal">
+						<NcCheckboxRadioSwitch :disabled="loading"
+							label="Featured"
+							:checked.sync="publication.featured">
+							Featured
+						</NcCheckboxRadioSwitch>
+					</span>
+					<NcTextField :disabled="loading"
+						label="Image"
+						:value.sync="publication.image" />
+					<b>Juridisch</b>
+					<NcTextField :disabled="loading"
+						label="Licentie"
+						:value.sync="publication.license" />
 				</div>
 			</div>
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
 import {
 	NcButton,
-	NcModal,
+	NcDialog,
 	NcTextField,
 	NcTextArea,
 	NcSelect,
@@ -119,12 +155,16 @@ import {
 	NcNoteCard,
 	NcDateTimePicker,
 } from '@nextcloud/vue'
+
 import Plus from 'vue-material-design-icons/Plus.vue'
+import Help from 'vue-material-design-icons/Help.vue'
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 
 export default {
 	name: 'AddPublicationModal',
 	components: {
-		NcModal,
+		NcDialog,
 		NcTextField,
 		NcTextArea,
 		NcButton,
@@ -135,6 +175,9 @@ export default {
 		NcDateTimePicker,
 		// Icons
 		Plus,
+		Help,
+		Cancel,
+		ArrowLeft,
 	},
 	data() {
 		return {
@@ -309,6 +352,9 @@ export default {
 			this.metaData = {}
 			this.hasUpdated = false
 		},
+		openLink(url, type = '') {
+			window.open(url, type)
+		},
 	},
 }
 </script>