Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature/PC108-127/contactmoment-bekijken-binnen-modal #144

Merged
merged 3 commits into from
Jan 13, 2025
Merged

feature/PC108-127/contactmoment-bekijken-binnen-modal #144

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8cad092
hopefully finished open contactmoment in new tab
Sudo-Thijn Jan 8, 2025
f3383ed
fixed a comment
Sudo-Thijn Jan 8, 2025
1eeb537
Merge remote-tracking branch 'origin/development' into feature/PC108-…
remko48 Jan 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 50 additions & 27 deletions src/modals/contactMomenten/ContactMomentenForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ import { contactMomentStore, navigationStore, taakStore, zaakStore } from '../..
{{ new Date(klantContactmoment.startDate).toLocaleString() }}
</template>
<template #actions>
<NcButton @click="viewContactMoment(klantContactmoment.id)">
<NcButton @click="viewContactMoment(klantContactmoment)">
<template #icon>
<Eye :size="20" />
</template>
Expand Down Expand Up @@ -758,12 +758,12 @@ export default {
this.isEdit = !!contactMomentId

if (this.isEdit) {
this.fetchData(contactMomentId)
this.fetchData(contactMomentId, this.tabCounter)
} else if (this.klantId) {
// if it is not an edit modal but a klantId is provided, fetch the klant data
this.fetchKlantData(this.klantId)
} else {
this.fetchMedewerkers()
this.fetchMedewerkers(null, this.tabCounter)
}
},
methods: {
Expand All @@ -778,8 +778,16 @@ export default {
}
this.selectedContactMoment = this.tabs[0]
},
newTab() {
/**
* Creates a new tab with the given tabData. If no tabData is provided, it creates a new tab with default data.
* @param {object} tabData - The data for the new tab.
*/
newTab(tabData = null) {
const index = this.tabCounter + 1
this.tabs.push(index)
this.tabCounter = this.tabCounter + 1
this.selectedContactMoment = index

this.contactMomenten = {
...this.contactMomenten,
[index]: {
Expand All @@ -798,12 +806,13 @@ export default {
addedTaken: [],
},
}
this.tabs.push(index)
this.tabCounter = this.tabCounter + 1
this.selectedContactMoment = index

if (tabData) {
this.fetchData(tabData.id, index)
}
},

async fetchData(id) {
async fetchData(id, index) {
this.fetchLoading = true

const { data } = await contactMomentStore.getContactMoment(id)
Expand All @@ -816,22 +825,31 @@ export default {
startDate: data.startDate ?? null,
}

this.contactMomenten[index] = {
...this.contactMomenten[index],
...data,
selectedZaak: data.zaak ?? null,
selectedTaak: data.taak ?? null,
selectedProduct: data.product ?? null,
selectedKlantContactMoment: data.contactmoment ?? null,
}

this.channels.values[index - 1] = this.channels.options.find(channel => channel.value === data.kanaal) ?? null

this.selectedZaak = data.zaak
this.selectedKlantContactMoment = data.contactmoment
this.selectedTaak = data.taak
this.selectedProduct = data.product

this.channels.values[0] = this.channels.options.find(channel => channel.value === data.kanaal)

await Promise.all([
this.fetchKlantData(data.klant),
this.fetchMedewerkers(data.medewerker),
this.fetchMedewerkers(data.medewerker, index),
])

this.fetchLoading = false
},

async fetchMedewerkers(medewerkerId = null) {
async fetchMedewerkers(medewerkerId = null, index) {
return Promise.all([
fetch('/ocs/v1.php/cloud/users/details', {
method: 'GET',
Expand All @@ -845,24 +863,32 @@ export default {
.then(([usersData, { user: currentUser }]) => {
const users = Object.values(usersData.ocs.data.users)

const medewerkerToSelect = medewerkerId ?? users.find(medewerker => medewerker.id === currentUser.id)?.id
const medewerkerToSelect = medewerkerId || currentUser.id
const selectedMedewerker = users.find(medewerker => medewerker.id === medewerkerToSelect) || null

this.medewerkers = {
options: Object.values(users).map((medewerker) => ({
id: medewerker.email,
id: medewerker.id,
displayName: medewerker.displayname,
subname: medewerker.email,
user: medewerker.id,
})),
values: [selectedMedewerker
? {
id: selectedMedewerker?.email,
displayName: selectedMedewerker.displayname,
subname: selectedMedewerker.email,
user: selectedMedewerker.id,
}
: null],
values: [
// I hate this code...
// This code sets the selected medewerker for the current tab based on the index.
// to ensure this works with other tabs it'll spread the values array and then add the selected medewerker
// and then spread the values array again to add the rest of the values. (if there are any values ahead)
...(this.medewerkers.values).slice(0, index - 1),
selectedMedewerker
? {
id: selectedMedewerker?.id,
displayName: selectedMedewerker.displayname,
subname: selectedMedewerker.email,
user: selectedMedewerker.id,
}
: null,
...(this.medewerkers.values).slice(index),
],
}
})
.catch((err) => {
Expand Down Expand Up @@ -992,11 +1018,8 @@ export default {
this.taakFormOpen = false
},

viewContactMoment(id) {
this.isContactMomentFormOpen = true
this.viewContactMomentIsView = true
this.viewContactMomentId = id
navigationStore.setViewModal('viewContactMoment')
viewContactMoment(contactMoment) {
this.newTab(contactMoment)
},

viewZaak(id) {
Expand Down
Loading