From a79736db42aae371f89c48cfbfd0d3e44d92eb2e Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Tue, 26 Nov 2024 13:26:34 +0100
Subject: [PATCH] Added contact moment form

---
 .../contactMomenten/ContactMomentenForm.vue   | 431 ++++++++++++++++++
 src/modals/klanten/SearchKlantModal.vue       | 261 +++++++++++
 src/views/widgets/ContactMomentenWidget.vue   |  34 +-
 3 files changed, 711 insertions(+), 15 deletions(-)
 create mode 100644 src/modals/contactMomenten/ContactMomentenForm.vue
 create mode 100644 src/modals/klanten/SearchKlantModal.vue

diff --git a/src/modals/contactMomenten/ContactMomentenForm.vue b/src/modals/contactMomenten/ContactMomentenForm.vue
new file mode 100644
index 0000000..dfb5dec
--- /dev/null
+++ b/src/modals/contactMomenten/ContactMomentenForm.vue
@@ -0,0 +1,431 @@
+<script setup>
+import { navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog
+		name="Contactmoment"
+		size="large"
+		label-id="contactMomentenForm"
+		dialog-classes="ContactMomentenForm"
+		:close-on-click-outside="false"
+		@closing="closeModalFromButton()">
+		<NcNoteCard v-if="success" type="success">
+			<p>Contact moment succesvol opgeslagen</p>
+		</NcNoteCard>
+		<NcNoteCard v-if="error" type="error">
+			<p>{{ error }}</p>
+		</NcNoteCard>
+
+		<div v-if="!success">
+			<div class="headerContainer">
+				<NcNoteCard type="info" class="noteCard">
+					<template #default>
+						<div v-if="klant">
+							{{ getName(klant) }}
+						</div>
+						<div v-else>
+							Geen klant geselecteerd
+						</div>
+					</template>
+				</NcNoteCard>
+				<div class="buttonsContainer">
+					<div>
+						<NcButton
+							:disabled="loading"
+							type="primary"
+							@click="searchKlantModalOpen = true">
+							<template #icon>
+								<Plus :size="20" />
+							</template>
+							Persoon zoeken
+						</NcButton>
+					</div>
+					<div class="orContainer">
+						of
+					</div>
+					<div>
+						<NcButton
+							:disabled="loading"
+							type="primary"
+							@click="searchKlantModalOpen = true">
+							<template #icon>
+								<Plus :size="20" />
+							</template>
+							Organisatie zoeken
+						</NcButton>
+					</div>
+				</div>
+			</div>
+			<div v-if="!success" class="form-group">
+				<NcTextArea v-model="notitie"
+					label="Notitie"
+					:disabled="loading"
+					placeholder="Notitie" />
+				<NcTextField
+					:value.sync="titel"
+					label="Titel"
+					:disabled="loading" />
+			</div>
+			<div class="tabContainer">
+				<BTabs content-class="mt-3" justified>
+					<BTab :title="`Zaken ${klant ? (zaken.length ? `(${zaken.length})` : '(0)') : ''}`">
+						<div v-if="zaken.length">
+							<NcListItem v-for="(zaak, key) in zaken"
+								:key="key"
+								:name="zaak.identificatie"
+								:bold="false"
+								:details="zaak.startdatum"
+								:disabled="loading"
+								:active="selectedZaak === zaak.id"
+								:force-display-actions="true"
+								@click="setSelectedZaak(zaak.id)">
+								<template #icon>
+									<BriefcaseAccountOutline :size="44" />
+								</template>
+								<template #subname>
+									{{ zaak.omschrijving }}
+								</template>
+							</NcListItem>
+						</div>
+						<NcEmptyContent v-else icon="icon-folder" title="Geen zaken gevonden">
+							<template #description>
+								Er zijn geen zaken gevonden voor deze klant.
+							</template>
+						</NcEmptyContent>
+					</BTab>
+					<BTab :title="`Taken ${klant ? (taken.length ? `(${taken.length})` : '(0)') : ''}`">
+						<div v-if="taken.length">
+							<NcListItem v-for="(taak, key) in taken"
+								:key="key"
+								:name="taak.title"
+								:bold="false"
+								:details="taak.status"
+								:disabled="loading"
+								:active="selectedTaak === taak.id"
+								:force-display-actions="true"
+								@click="setSelectedTaak(taak.id)">
+								<template #icon>
+									<CalendarMonthOutline :size="44" />
+								</template>
+
+								<template #subname>
+									{{ taak.omschrijving }}
+								</template>
+							</NcListItem>
+						</div>
+						<NcEmptyContent v-else icon="icon-tasks" title="Geen taken gevonden">
+							<template #description>
+								Er zijn geen taken gevonden voor deze klant.
+							</template>
+						</NcEmptyContent>
+					</BTab>
+					<BTab :title="`Producten ${klant ? (klant?.producten?.length ? `(${klant?.producten?.length})` : '(0)') : ''}`">
+						<div v-if="klant?.producten?.length">
+							<NcListItem v-for="(product, key) in klant.producten"
+								:key="key"
+								:name="product.naam ?? 'N/A'"
+								:bold="false"
+								:details="product.omschrijving ?? 'N/A'"
+								:disabled="loading"
+								:active="selectedProduct === product.id"
+								:force-display-actions="true"
+								@click="setSelectedProduct(product.id)">
+								<template #icon>
+									<BriefcaseAccountOutline :size="44" />
+								</template>
+							</NcListItem>
+						</div>
+						<NcEmptyContent v-else icon="icon-folder" title="Geen producten gevonden">
+							<template #description>
+								Er zijn geen producten gevonden voor deze klant.
+							</template>
+						</NcEmptyContent>
+					</BTab>
+				</BTabs>
+			</div>
+
+			<SearchKlantModal v-if="searchKlantModalOpen"
+				:dashboard-widget="true"
+				@selected-klant="fetchKlantData($event)"
+				@close-modal="closeSearchKlantModal" />
+		</div>
+		<template #actions>
+			<NcButton
+				:disabled="loading || success"
+				type="secondary"
+				@click="closeModal()">
+				<template #icon>
+					<Cancel :size="20" />
+				</template>
+				Annuleer
+			</NcButton>
+			<NcActions :disabled="loading || success" :primary="true" menu-name="Acties">
+				<template #icon>
+					<DotsHorizontal :size="20" />
+				</template>
+				<NcActionButton @click="zaakStore.setZaakItem(); navigationStore.setModal('editZaak')">
+					<template #icon>
+						<BriefcaseAccountOutline :size="20" />
+					</template>
+					Zaak starten
+				</NcActionButton>
+				<NcActionButton @click="zaakStore.setZaakItem(); navigationStore.setModal('editZaak')">
+					<template #icon>
+						<BriefcaseAccountOutline :size="20" />
+					</template>
+					Zaak starten
+				</NcActionButton>
+			</NcActions>
+			<NcButton
+				type="primary"
+				:disabled="!klant || loading || success"
+				:loading="loading"
+				@click="addContactMoment()">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<ContentSaveOutline v-if="!loading" :size="20" />
+				</template>
+				Opslaan
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+// Components
+import { BTabs, BTab } from 'bootstrap-vue'
+import { NcButton, NcActions, NcLoadingIcon, NcDialog, NcTextArea, NcNoteCard, NcListItem, NcActionButton, NcEmptyContent, NcTextField } from '@nextcloud/vue'
+
+// Forms
+import SearchKlantModal from '../../modals/klanten/SearchKlantModal.vue'
+
+// Icons
+import Plus from 'vue-material-design-icons/Plus.vue'
+import BriefcaseAccountOutline from 'vue-material-design-icons/BriefcaseAccountOutline.vue'
+import CalendarMonthOutline from 'vue-material-design-icons/CalendarMonthOutline.vue'
+import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
+import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+
+export default {
+	name: 'ContactMomentenForm',
+	components: {
+		NcDialog,
+		NcTextArea,
+		NcButton,
+		NcLoadingIcon,
+		NcNoteCard,
+		NcListItem,
+		NcActionButton,
+		NcEmptyContent,
+		NcTextField,
+		// Icons
+		Plus,
+		BriefcaseAccountOutline,
+		CalendarMonthOutline,
+		DotsHorizontal,
+	},
+	props: {
+		dashboardWidget: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			success: false,
+			loading: false,
+			error: false,
+			titel: '',
+			notitie: '',
+			klantenLoading: false,
+			zaken: [],
+			taken: [],
+			berichten: [],
+			contactMomenten: [],
+			auditTrails: [],
+			klant: null,
+			searchKlantModalOpen: false,
+			selectedZaak: null,
+			selectedTaak: null,
+			selectedProduct: null,
+		}
+	},
+	mounted() {
+	},
+	methods: {
+		// Modal functions
+		closeModalFromButton() {
+			setTimeout(() => {
+				this.closeModal()
+			}, 300)
+		},
+		closeModal() {
+			navigationStore.setModal(false)
+			this.$emit('close-modal')
+		},
+
+		// Contact moment functions
+		addContactMoment() {
+			this.loading = true
+
+			fetch(
+				'/index.php/apps/zaakafhandelapp/api/contactmomenten',
+				{
+					method: 'POST',
+					headers: {
+						'Content-Type': 'application/json',
+					},
+					body: JSON.stringify({
+						titel: this.titel,
+						notitie: this.notitie,
+						klant: this.klant?.id ?? '',
+						zaak: this.selectedZaak ?? '',
+						taak: this.selectedTaak ?? '',
+						product: this.selectedProduct ?? '',
+						startDate: new Date().toISOString(),
+					}),
+				},
+			)
+				.then((response) => {
+					this.succesMessage = true
+					// Get the modal to self close
+					this.success = true
+					this.loading = false
+
+					setTimeout(this.closeModal, 2000)
+					if (this.dashboardWidget === true) {
+						this.$emit('save-success')
+					}
+				})
+				.catch((err) => {
+					console.error(err)
+				})
+		},
+
+		// Klant functions
+		closeSearchKlantModal() {
+			this.searchKlantModalOpen = false
+		},
+
+		fetchKlantData(id) {
+			fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}`)
+				.then(response => response.json())
+				.then(data => {
+					this.klant = data
+					return fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/zaken`)
+				})
+				.then(response => response.json())
+				.then(data => {
+					if (Array.isArray(data.results)) {
+						this.zaken = data.results
+					}
+					return fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/taken`)
+				})
+				.then(response => response.json())
+				.then(data => {
+					if (Array.isArray(data.results)) {
+						this.taken = data.results
+					}
+					return fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/berichten`)
+				})
+				.then(response => response.json())
+				.then(data => {
+					if (Array.isArray(data.results)) {
+						this.berichten = data.results
+					}
+					return fetch(`/index.php/apps/zaakafhandelapp/api/klanten/${id}/audit_trail`)
+				})
+				.then(response => response.json())
+				.then(data => {
+					if (Array.isArray(data)) {
+						this.auditTrails = data
+					}
+				})
+				.catch(error => {
+					console.error('Error fetching klant data:', error)
+				})
+		},
+
+		getName(klant) {
+			if (klant.type === 'persoon') {
+				return `${klant.voornaam} ${klant.tussenvoegsel} ${klant.achternaam}` ?? 'onbekend'
+			}
+			if (klant.type === 'organisatie') {
+				return klant?.bedrijfsnaam ?? 'onbekend'
+			}
+			return 'onbekend'
+		},
+
+		// Tabs
+		setSelectedZaak(zaak) {
+			if (this.selectedZaak === zaak) {
+				this.selectedZaak = null
+			} else { this.selectedZaak = zaak }
+		},
+
+		setSelectedTaak(taak) {
+			if (this.selectedTaak === taak) {
+				this.selectedTaak = null
+			} else { this.selectedTaak = taak }
+		},
+
+		setSelectedProduct(product) {
+			if (this.selectedProduct === product) {
+				this.selectedProduct = null
+			} else { this.selectedProduct = product }
+		},
+	},
+}
+</script>
+
+<style>
+div[class='modal-container']:has(.ContactMomentenForm) {
+	width: clamp(1000px, 100%, 1200px) !important;
+}
+</style>
+
+<style scoped>
+.rolDetailsContainer {
+    margin-block-start: var(--zaa-margin-20);
+    margin-inline-start: var(--zaa-margin-20);
+    margin-inline-end: var(--zaa-margin-20);
+}
+
+.success {
+    color: green;
+}
+
+.headerContainer {
+    display: flex;
+    gap: 200px;
+}
+
+.noteCard {
+    min-width: 350px;
+}
+
+.orContainer {
+    margin-inline: var(--zaa-margin-10);
+}
+
+.buttonsContainer {
+    display: flex;
+    align-items: center;
+}
+
+.form-group {
+    margin-block-end: 100px;
+}
+
+.tabContainer {
+    margin-block-end: var(--zaa-margin-20);
+}
+
+.modalButtonsContainer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--zaa-margin-10);
+}
+</style>
diff --git a/src/modals/klanten/SearchKlantModal.vue b/src/modals/klanten/SearchKlantModal.vue
new file mode 100644
index 0000000..d3e2a66
--- /dev/null
+++ b/src/modals/klanten/SearchKlantModal.vue
@@ -0,0 +1,261 @@
+<script setup>
+import { navigationStore, klantStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcDialog
+		name="Klanten zoeken"
+		size="normal"
+		label-id="searchKlantModal"
+		dialog-classes="SearchKlantModal"
+		:close-on-click-outside="false"
+		@closing="closeModalFromButton()">
+		<div class="listContainer">
+			<div v-if="klanten?.length && !loading">
+				<NcListItem v-for="(klant, i) in klanten"
+					:key="`${klant}${i}`"
+					:name="getName(klant)"
+					:active="selectedKlant === klant?.id"
+					:force-display-actions="true"
+					:details="_.upperFirst(klant.type)"
+					@click="setActive(klant.id)">
+					<template #icon>
+						<OfficeBuildingOutline v-if="klant.type === 'organisatie'"
+							:class="selectedKlant === klant.id && 'selectedZaakIcon'"
+							disable-menu
+							:size="44" />
+						<AccountOutline v-if="klant.type === 'persoon'"
+							:class="selectedKlant === klant.id && 'selectedZaakIcon'"
+							disable-menu
+							:size="44" />
+					</template>
+					<template #subname>
+						{{ getSubname(klant) }}
+					</template>
+				</NcListItem>
+			</div>
+
+			<div v-if="!klanten?.length && !loading">
+				Geen klanten gevonden.
+			</div>
+
+			<NcLoadingIcon v-if="loading"
+				class="loadingIcon"
+				:size="64"
+				appearance="dark"
+				name="Aan het zoeken" />
+		</div>
+
+		<div class="searchContainer">
+			<NcTextField :disabled="loading"
+				label="Zoeken op bedrijfsnaam"
+				maxlength="255"
+				class="searchField"
+				:value.sync="searchQuery" />
+
+			<NcButton type="primary"
+				:disabled="loading"
+				class="searchButton"
+				@click="searchFunction">
+				<template #icon>
+					<Search :size="20" />
+				</template>
+				Zoeken
+			</NcButton>
+		</div>
+		<template #actions>
+			<NcButton
+				type="secondary"
+				@click="closeModal()">
+				<template #icon>
+					<Cancel v-if="!loading" :size="20" />
+				</template>
+				Annuleer
+			</NcButton>
+			<NcButton
+				type="primary"
+				:disabled="!selectedKlant"
+				@click="addKlant()">
+				<template #icon>
+					<ContentSaveOutline v-if="!loading" :size="20" />
+				</template>
+				toevoegen
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+// Components
+import { NcButton, NcTextField, NcDialog, NcListItem, NcLoadingIcon } from '@nextcloud/vue'
+import { getTheme } from '../../services/getTheme.js'
+import _ from 'lodash'
+
+// Icons
+import OfficeBuildingOutline from 'vue-material-design-icons/OfficeBuildingOutline.vue'
+import AccountOutline from 'vue-material-design-icons/AccountOutline.vue'
+import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
+import Search from 'vue-material-design-icons/Magnify.vue'
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+export default {
+	name: 'SearchKlantModal',
+	components: {
+		NcDialog,
+		NcButton,
+		NcListItem,
+		OfficeBuildingOutline,
+		AccountOutline,
+		Search,
+	},
+	props: {
+		startingType: {
+			type: String,
+			required: false,
+			default: 'all',
+		},
+	},
+	data() {
+		return {
+			succes: false,
+			loading: false,
+			error: false,
+			hasUpdated: false,
+			klanten: [],
+			searchQuery: '',
+			selectedKlant: null,
+		}
+	},
+	mounted() {
+		this.searchFunction()
+	},
+	updated() {
+		if (navigationStore.modal === 'searchKlant' && !this.hasUpdated) {
+
+			switch (this.startingType) {
+			case 'organisatie':
+				this.searchOrganisations()
+				break
+			case 'persoon':
+				this.searchPersons()
+				break
+			default:
+				this.searchAll()
+			}
+
+			this.hasUpdated = true
+		}
+	},
+	methods: {
+		closeModalFromButton() {
+			setTimeout(() => {
+				this.closeModal()
+			}, 300)
+		},
+		closeModal() {
+			this.$emit('close-modal')
+
+		},
+		addKlant() {
+			// eslint-disable-next-line no-console
+			console.log('added')
+			this.$emit('selected-klant', this.selectedKlant)
+			this.closeModalFromButton()
+		},
+		searchFunction() {
+			switch (this.startingType) {
+			case 'organisatie':
+				this.searchOrganisations()
+				break
+			case 'persoon':
+				this.searchPersons()
+				break
+			default:
+				this.searchAll()
+			}
+		},
+		searchAll() {
+			this.loading = true
+			klantStore.refreshKlantenList(this.searchQuery)
+				.then(() => {
+					this.klanten = klantStore.klantenList
+					this.loading = false
+				})
+		},
+		searchOrganisations() {
+			this.loading = true
+			klantStore.searchOrganisations(this.searchQuery)
+				.then(() => {
+					this.klanten = klantStore.klantenList
+					this.loading = false
+				})
+				.finally(() => {
+					this.loading = false
+				})
+		},
+		searchPersons() {
+			this.loading = true
+			klantStore.searchPersons(this.searchQuery)
+				.then(() => {
+					this.klanten = klantStore.klantenList
+					this.loading = false
+				})
+		},
+		getItemIcon() {
+			const theme = getTheme()
+
+			let appLocation = '/custom_apps'
+
+			if (window.location.hostname === 'nextcloud.local') {
+				appLocation = '/apps-extra'
+			}
+
+			return theme === 'light' ? `${appLocation}/zaakafhandelapp/img/office-building-outline-dark.svg` : `${appLocation}/zaakafhandelapp/img/office-building-outline.svg`
+		},
+
+		getName(klant) {
+			if (klant.type === 'persoon') {
+				return klant?.voornaam ?? 'onbekend'
+			}
+			if (klant.type === 'organisatie') {
+				return klant?.bedrijfsnaam ?? 'onbekend'
+			}
+			return 'onbekend'
+		},
+		getSubname(klant) {
+			if (klant.type === 'persoon') {
+				return klant?.tussenvoegsel ? `${klant.tussenvoegsel} ${klant.achternaam}` : klant?.achternaam ? `${klant.achternaam}` : 'onbekend'
+			}
+			if (klant.type === 'organisatie') {
+				return klant?.websiteUrl ?? 'onbekend'
+			}
+			return 'onbekend'
+		},
+		setActive(klant) {
+			if (this.selectedKlant === klant) {
+				this.selectedKlant = null
+			} else { this.selectedKlant = klant }
+		},
+	},
+}
+</script>
+
+<style>
+
+</style>
+
+<style scoped>
+.listContainer {
+	margin-bottom: 10px;
+}
+.searchContainer {
+    display: flex;
+    align-items: end;
+    gap: 10px;
+  }
+  .searchField {
+    width: auto;
+  }
+  .searchButton {
+    min-width: min-content !important;
+  }
+</style>
diff --git a/src/views/widgets/ContactMomentenWidget.vue b/src/views/widgets/ContactMomentenWidget.vue
index 037623f..2dd4457 100644
--- a/src/views/widgets/ContactMomentenWidget.vue
+++ b/src/views/widgets/ContactMomentenWidget.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { berichtStore, navigationStore } from '../../store/store.js'
+import { navigationStore, contactMomentStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -25,9 +25,10 @@ import { berichtStore, navigationStore } from '../../store/store.js'
 			Contact moment starten
 		</NcButton>
 
-		<BerichtForm v-if="isModalOpen"
+		<ContactMomentenForm v-if="isModalOpen"
 			:dashboard-widget="true"
-			@save-success="fetchBerichtItems" />
+			@save-success="fetchContactMomentItems"
+			@close-modal="closeModal" />
 	</div>
 </template>
 
@@ -37,7 +38,7 @@ import { NcDashboardWidget, NcEmptyContent, NcButton } from '@nextcloud/vue'
 import { getTheme } from '../../services/getTheme.js'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import ChatOutline from 'vue-material-design-icons/ChatOutline.vue'
-import BerichtForm from '../../modals/berichten/EditBericht.vue'
+import ContactMomentenForm from '../../modals/contactMomenten/ContactMomentenForm.vue'
 
 export default {
 	name: 'ContactMomentenWidget',
@@ -47,35 +48,37 @@ export default {
 		NcEmptyContent,
 		NcButton,
 		Plus,
+		ContactMomentenForm,
 	},
 
 	data() {
 		return {
 			loading: false,
 			isModalOpen: false,
-			berichtItems: [],
+			searchKlantModalOpen: false,
+			contactMomentItems: [],
 		}
 	},
 
 	computed: {
 		items() {
-			return this.berichtItems
+			return this.contactMomentItems
 		},
 	},
 
 	mounted() {
-		this.fetchBerichtItems()
+		this.fetchContactMomentItems()
 	},
 
 	methods: {
-		fetchBerichtItems() {
+		fetchContactMomentItems() {
 			this.loading = true
-			berichtStore.refreshBerichtenList()
+			contactMomentStore.refreshContactMomentenList()
 				.then(() => {
-					this.berichtItems = berichtStore.berichtenList.map(bericht => ({
-						id: bericht.id,
-						mainText: bericht.title,
-						subText: bericht.aanmaakDatum,
+					this.contactMomentItems = contactMomentStore.contactMomentenList.map(contactMoment => ({
+						id: contactMoment.id,
+						mainText: contactMoment.titel,
+						subText: new Date(contactMoment.startDate).toLocaleString(),
 						avatarUrl: this.getItemIcon(),
 					}))
 
@@ -95,13 +98,14 @@ export default {
 		},
 		openModal() {
 			this.isModalOpen = true
-			berichtStore.setBerichtItem(null)
-			navigationStore.setModal('editBericht')
+			contactMomentStore.setContactMomentItem(null)
+			navigationStore.setModal('contactMomentenForm')
 		},
 		closeModal() {
 			this.isModalOpen = false
 			navigationStore.setModal(null)
 		},
+
 		onShow() {
 			window.open('/apps/opencatalogi/catalogi', '_self')
 		},