Skip to content

Commit

Permalink
Betere publicatie flow
Browse files Browse the repository at this point in the history
  • Loading branch information
@rubenvdlinde
rubenvdlinde committed Aug 13, 2024
1 parent 9e75311 commit 685dab3
Show file tree
Hide file tree
Showing 2 changed files with 154 additions and 122 deletions.
231 changes: 138 additions & 93 deletions src/modals/publication/AddPublicationModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,116 +2,151 @@
import { navigationStore, publicationStore } from '../../store/store.js'
</script>
<template>
<NcModal v-if="navigationStore.modal === 'publicationAdd'"
ref="modalRef"
label-id="addPublicationModal"
@close="closeModal">
<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 :disabled="(!publication.title || !catalogi?.value?.id || !metaData?.value?.id || !publication.summary) || loading"
class="apm-submit-button"
<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()">
@click="updatePublication()">
<template #icon>
<NcLoadingIcon v-if="loading" :size="20" />
<Plus v-if="!loading" :size="20" />
</template>
Toevoegen
</NcButton>
</template>
<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 class="formContainer">
<div v-if="catalogi?.value?.id">
<b>Catalogus:</b> {{ catalogi.value.label }}
<NcButton @click="catalogi.value = null">
Catalogus wijzigen
</NcButton>
</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" />
</div>
<div v-if=" metaData.value?.id">
<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,
Expand All @@ -120,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,
Expand All @@ -136,6 +175,9 @@ export default {
NcDateTimePicker,
// Icons
Plus,
Help,
Cancel,
ArrowLeft,
},
data() {
return {
Expand Down Expand Up @@ -310,6 +352,9 @@ export default {
this.metaData = {}
this.hasUpdated = false
},
openLink(url, type = '') {
window.open(url, type)
},
},
}
</script>
Expand Down
45 changes: 16 additions & 29 deletions src/modals/publication/EditPublicationModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,13 +57,18 @@ import { navigationStore, publicationStore } from '../../store/store.js'
</div>
<template #actions>
<NcButton
:disabled="loading"
icon=""
@click="navigationStore.setModal(false)">
<template #icon>
<Cancel :size="20" />
</template>
{{ succes ? 'Sluiten' : 'Annuleer' }}
{{ 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="!publicationItem.title || !publicationItem.summary"
Expand Down Expand Up @@ -92,6 +97,7 @@ import {
} from '@nextcloud/vue'
import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
import Cancel from 'vue-material-design-icons/Cancel.vue'
import Help from 'vue-material-design-icons/Help.vue'
export default {
name: 'EditPublicationModal',
Expand All @@ -107,6 +113,7 @@ export default {
// Icons
ContentSaveOutline,
Cancel,
Help,
},
data() {
return {
Expand Down Expand Up @@ -213,37 +220,17 @@ export default {
this.loading = false
})
},
openLink(url, type = '') {
window.open(url, type)
},
},
}
</script>

<style>
.modal__content {
margin: var(--OC-margin-50);
text-align: center;
.dialog__content {
padding-top: 12px;
padding-bottom: 12px;
}
.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;
}
.EPM-horizontal {
display: flex;
gap: 4px;
align-items: flex-end;
flex-wrap: wrap;
}
.wrapper {
display: flex;
gap: 4px;
align-items: flex-end;
flex-wrap: wrap;
}
</style>

0 comments on commit 685dab3

Please sign in to comment.