diff --git a/src/entities/contactmoment/contactmoment.mock.ts b/src/entities/contactmoment/contactmoment.mock.ts index e8cc740..f2a1383 100644 --- a/src/entities/contactmoment/contactmoment.mock.ts +++ b/src/entities/contactmoment/contactmoment.mock.ts @@ -13,6 +13,7 @@ export const mockContactMomentData = (): TContactMoment[] => [ startDate: new Date().toISOString(), status: 'open', contactmoment: 'Contactmoment 3', + medewerker: 'Medewerker 3', }, ] diff --git a/src/entities/contactmoment/contactmoment.ts b/src/entities/contactmoment/contactmoment.ts index 99efc21..dcf7cc9 100644 --- a/src/entities/contactmoment/contactmoment.ts +++ b/src/entities/contactmoment/contactmoment.ts @@ -13,6 +13,7 @@ export class ContactMoment implements TContactMoment { public startDate: string public status: string public contactmoment: string + public medewerker: string constructor(source: TContactMoment) { this.id = source.id || '' @@ -25,6 +26,7 @@ export class ContactMoment implements TContactMoment { this.startDate = source.startDate || '' this.status = source.status || 'open' this.contactmoment = source.contactmoment || '' + this.medewerker = source.medewerker || '' } public validate(): SafeParseReturnType { @@ -39,6 +41,7 @@ export class ContactMoment implements TContactMoment { startDate: z.string().min(1), status: z.string().min(1), contactmoment: z.string().min(1), + medewerker: z.string().min(1), }) return schema.safeParse(this) diff --git a/src/entities/contactmoment/contactmoment.types.ts b/src/entities/contactmoment/contactmoment.types.ts index e2444af..a3d53fa 100644 --- a/src/entities/contactmoment/contactmoment.types.ts +++ b/src/entities/contactmoment/contactmoment.types.ts @@ -9,4 +9,5 @@ export type TContactMoment = { startDate: string; status: string; contactmoment: string; + medewerker: string; } diff --git a/src/modals/contactMomenten/ContactMomentenForm.vue b/src/modals/contactMomenten/ContactMomentenForm.vue index 0f856de..0b987dd 100644 --- a/src/modals/contactMomenten/ContactMomentenForm.vue +++ b/src/modals/contactMomenten/ContactMomentenForm.vue @@ -1,1221 +1,1292 @@ - - - - - - - - - + + + + + + + + + diff --git a/src/store/modules/contactmoment.ts b/src/store/modules/contactmoment.ts index 73e3543..5b118bc 100644 --- a/src/store/modules/contactmoment.ts +++ b/src/store/modules/contactmoment.ts @@ -1,184 +1,188 @@ -/* eslint-disable no-console */ -import { defineStore } from 'pinia' -import { ContactMoment, TContactMoment } from '../../entities/index.js' -import router from '../../router/router' - -const apiEndpoint = '/index.php/apps/zaakafhandelapp/api/contactmomenten' - -export const useContactMomentStore = defineStore('contactmomenten', { - state: () => ({ - contactMomentItem: null as ContactMoment, - contactMomentenList: [] as ContactMoment[], - }), - actions: { - /** - * Set the active contact moment item. - * - * @param contactMomentItem - The contact moment item to set. - */ - setContactMomentItem(contactMomentItem: TContactMoment | ContactMoment) { - this.contactMomentItem = contactMomentItem && new ContactMoment(contactMomentItem) - console.info('Active contactmoment item set to ' + contactMomentItem) - }, - /** - * Set the list of contact moments. - * - * @param contactMomentenList - The list of contact moments to set. - */ - setContactMomentenList(contactMomentenList: TContactMoment[] | ContactMoment[]) { - this.contactMomentenList = contactMomentenList.map( - (contactMomentItem) => new ContactMoment(contactMomentItem), - ) - console.info('Contactmomenten list set to ' + contactMomentenList.length + ' items') - }, - /** - * Refresh the list of contact moments. - * - * @param search - Optional search query to filter the contact moments list. (default: `null`) - * @param notClosed - Optional boolean to filter out closed contact moments from the contact moments list. (default: `false`) - * @throws If the HTTP request fails. - * @return {Promise<{ response: Response, data: TContactMoment[], entities: ContactMoment[] }>} The response, raw data, and entities. - */ - async refreshContactMomentenList(search: string = null, notClosed: boolean = false): Promise<{ response: Response, data: TContactMoment[], entities: ContactMoment[] }> { - let endpoint = apiEndpoint - - if (search !== null && search !== '') { - endpoint = endpoint + '?_search=' + search - } - - if (notClosed) { - if (search !== null && search !== '') { - endpoint = endpoint + '&status=open' - } else { - endpoint = endpoint + '?status=open' - } - } - - const response = await fetch(endpoint, { - method: 'GET', - }) - - if (!response.ok) { - console.info(response) - throw new Error(`HTTP error! status: ${response.status}`) - } - - const data = (await response.json()).results as TContactMoment[] - const entities = data.map((contactMomentItem) => new ContactMoment(contactMomentItem)) - - this.setContactMomentenList(data) - - return { response, data, entities } - }, - /** - * Fetch a single contact moment by its ID. - * - * @param id - The ID of the contact moment to fetch. - * @throws If the ID is invalid or if the HTTP request fails. - * @return {Promise<{ response: Response, data: TContactMoment, entity: ContactMoment }>} The response, raw data, and entity. - */ - async getContactMoment(id: string | number): Promise<{ response: Response, data: TContactMoment, entity: ContactMoment }> { - if (!id || (typeof id !== 'string' && typeof id !== 'number') || (typeof id === 'string' && id.trim() === '')) { - throw new Error('Invalid ID provided for fetching contact moment') - } - - const endpoint = `${apiEndpoint}/${id}` - - const response = await fetch(endpoint, { - method: 'GET', - }) - - if (!response.ok) { - console.info(response) - throw new Error(`HTTP error! status: ${response.status}`) - } - - const data = await response.json() as TContactMoment - const entity = new ContactMoment(data) - - this.setContactMomentItem(data) - - return { response, data, entity } - }, - /** - * Delete a contact moment. - * - * @param contactMomentItem - The contact moment item to delete. - * @throws If there is no contact moment item to delete or if the contact moment item does not have an id. - * @throws If the HTTP request fails. - * @return {Promise<{ response: Response }>} The response from the delete request. - */ - async deleteContactMoment(contactMomentItem: ContactMoment): Promise<{ response: Response }> { - if (!contactMomentItem || !contactMomentItem.id) { - throw new Error('No contactmoment item to delete') - } - - const endpoint = `${apiEndpoint}/${contactMomentItem.id}` - - const response = await fetch(endpoint, { - method: 'DELETE', - }) - - if (!response.ok) { - console.info(response) - throw new Error(`HTTP error! status: ${response.status}`) - } - - this.refreshContactMomentenList() - router.push({ name: 'dynamic-view', params: { view: 'contactmomenten' } }) - - return { response } - }, - /** - * Save a contact moment to the database. If the contact moment does not have an id, it will be created. - * Otherwise, it will be updated. - * - * @param contactMomentItem - The contact moment item to save. - * @param options - The options to save the contact moment. - * @param options.redirect - Whether to redirect to the contact moment after saving. (default: `true`) - * @throws If there is no contact moment item to save or if the HTTP request fails. - * @return {Promise<{ response: Response, data: TContactMoment, entity: ContactMoment }>} The response, raw data, and entity. - */ - async saveContactMoment( - contactMomentItem: TContactMoment | ContactMoment, - options: { redirect?: boolean } = { redirect: true }, - ): Promise<{ response: Response, data: TContactMoment, entity: ContactMoment }> { - if (!contactMomentItem) { - throw new Error('No contactmoment item to save') - } - - const isNewContactMoment = !contactMomentItem.id - const endpoint = isNewContactMoment - ? `${apiEndpoint}` - : `${apiEndpoint}/${contactMomentItem.id}` - const method = isNewContactMoment ? 'POST' : 'PUT' - - const response = await fetch( - endpoint, - { - method, - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ ...contactMomentItem }), - }, - ) - - if (!response.ok) { - console.info(response) - throw new Error(`HTTP error! status: ${response.status}`) - } - - const data = await response.json() as TContactMoment - const entity = new ContactMoment(data) - - this.setContactMomentItem(data) - this.refreshContactMomentenList() - if (options.redirect) { - router.push({ name: 'dynamic-view', params: { view: 'contactmomenten', id: entity.id } }) - } - - return { response, data, entity } - }, - }, -}) +/* eslint-disable no-console */ +import { defineStore } from 'pinia' +import { ContactMoment, TContactMoment } from '../../entities/index.js' +import router from '../../router/router' + +const apiEndpoint = '/index.php/apps/zaakafhandelapp/api/contactmomenten' + +export const useContactMomentStore = defineStore('contactmomenten', { + state: () => ({ + contactMomentItem: null as ContactMoment, + contactMomentenList: [] as ContactMoment[], + }), + actions: { + /** + * Set the active contact moment item. + * + * @param contactMomentItem - The contact moment item to set. + */ + setContactMomentItem(contactMomentItem: TContactMoment | ContactMoment) { + this.contactMomentItem = contactMomentItem && new ContactMoment(contactMomentItem) + console.info('Active contactmoment item set to ' + contactMomentItem) + }, + /** + * Set the list of contact moments. + * + * @param contactMomentenList - The list of contact moments to set. + */ + setContactMomentenList(contactMomentenList: TContactMoment[] | ContactMoment[]) { + this.contactMomentenList = contactMomentenList.map( + (contactMomentItem) => new ContactMoment(contactMomentItem), + ) + console.info('Contactmomenten list set to ' + contactMomentenList.length + ' items') + }, + /** + * Refresh the list of contact moments. + * + * @param search - Optional search query to filter the contact moments list. (default: `null`) + * @param notClosed - Optional boolean to filter out closed contact moments from the contact moments list. (default: `false`) + * @param user + * @throws If the HTTP request fails. + * @return {Promise<{ response: Response, data: TContactMoment[], entities: ContactMoment[] }>} The response, raw data, and entities. + */ + async refreshContactMomentenList(search: string = null, notClosed: boolean = false, user: string = null): Promise<{ response: Response, data: TContactMoment[], entities: ContactMoment[] }> { + let endpoint = apiEndpoint + + const params = new URLSearchParams() + if (search) { + params.append('_search', search) + } + if (notClosed) { + params.append('status', 'open') + } + if (user) { + params.append('medewerker', user) + } + + if (params.toString()) { + endpoint += `?${params.toString()}` + } + + const response = await fetch(endpoint, { + method: 'GET', + }) + + if (!response.ok) { + console.info(response) + throw new Error(`HTTP error! status: ${response.status}`) + } + + const data = (await response.json()).results as TContactMoment[] + const entities = data.map((contactMomentItem) => new ContactMoment(contactMomentItem)) + + this.setContactMomentenList(data) + + return { response, data, entities } + }, + /** + * Fetch a single contact moment by its ID. + * + * @param id - The ID of the contact moment to fetch. + * @throws If the ID is invalid or if the HTTP request fails. + * @return {Promise<{ response: Response, data: TContactMoment, entity: ContactMoment }>} The response, raw data, and entity. + */ + async getContactMoment(id: string | number): Promise<{ response: Response, data: TContactMoment, entity: ContactMoment }> { + if (!id || (typeof id !== 'string' && typeof id !== 'number') || (typeof id === 'string' && id.trim() === '')) { + throw new Error('Invalid ID provided for fetching contact moment') + } + + const endpoint = `${apiEndpoint}/${id}` + + const response = await fetch(endpoint, { + method: 'GET', + }) + + if (!response.ok) { + console.info(response) + throw new Error(`HTTP error! status: ${response.status}`) + } + + const data = await response.json() as TContactMoment + const entity = new ContactMoment(data) + + this.setContactMomentItem(data) + + return { response, data, entity } + }, + /** + * Delete a contact moment. + * + * @param contactMomentItem - The contact moment item to delete. + * @throws If there is no contact moment item to delete or if the contact moment item does not have an id. + * @throws If the HTTP request fails. + * @return {Promise<{ response: Response }>} The response from the delete request. + */ + async deleteContactMoment(contactMomentItem: ContactMoment): Promise<{ response: Response }> { + if (!contactMomentItem || !contactMomentItem.id) { + throw new Error('No contactmoment item to delete') + } + + const endpoint = `${apiEndpoint}/${contactMomentItem.id}` + + const response = await fetch(endpoint, { + method: 'DELETE', + }) + + if (!response.ok) { + console.info(response) + throw new Error(`HTTP error! status: ${response.status}`) + } + + this.refreshContactMomentenList() + router.push({ name: 'dynamic-view', params: { view: 'contactmomenten' } }) + + return { response } + }, + /** + * Save a contact moment to the database. If the contact moment does not have an id, it will be created. + * Otherwise, it will be updated. + * + * @param contactMomentItem - The contact moment item to save. + * @param options - The options to save the contact moment. + * @param options.redirect - Whether to redirect to the contact moment after saving. (default: `true`) + * @throws If there is no contact moment item to save or if the HTTP request fails. + * @return {Promise<{ response: Response, data: TContactMoment, entity: ContactMoment }>} The response, raw data, and entity. + */ + async saveContactMoment( + contactMomentItem: TContactMoment | ContactMoment, + options: { redirect?: boolean } = { redirect: true }, + ): Promise<{ response: Response, data: TContactMoment, entity: ContactMoment }> { + if (!contactMomentItem) { + throw new Error('No contactmoment item to save') + } + + const isNewContactMoment = !contactMomentItem.id + const endpoint = isNewContactMoment + ? `${apiEndpoint}` + : `${apiEndpoint}/${contactMomentItem.id}` + const method = isNewContactMoment ? 'POST' : 'PUT' + + const response = await fetch( + endpoint, + { + method, + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ ...contactMomentItem }), + }, + ) + + if (!response.ok) { + console.info(response) + throw new Error(`HTTP error! status: ${response.status}`) + } + + const data = await response.json() as TContactMoment + const entity = new ContactMoment(data) + + this.setContactMomentItem(data) + this.refreshContactMomentenList() + if (options.redirect) { + router.push({ name: 'dynamic-view', params: { view: 'contactmomenten', id: entity.id } }) + } + + return { response, data, entity } + }, + }, +}) diff --git a/src/views/widgets/ContactMomentenWidget.vue b/src/views/widgets/ContactMomentenWidget.vue index 30f44da..b7887ef 100644 --- a/src/views/widgets/ContactMomentenWidget.vue +++ b/src/views/widgets/ContactMomentenWidget.vue @@ -71,6 +71,7 @@ export default { * determines if the contactmoment form modal is open */ isContactMomentFormOpen: false, + userEmail: null, contactMomentItems: [], // contactmoment form props contactMomentId: null, @@ -93,14 +94,28 @@ export default { } }, mounted() { - this.fetchContactMomentItems() + this.fetchUser() }, methods: { + async fetchUser() { + this.loading = true + + const getUser = await fetch('/index.php/apps/zaakafhandelapp/me') + const user = await getUser.json() + + const medewerkerList = await fetch('/index.php/apps/zaakafhandelapp/api/medewerkers') + const medewerkers = await medewerkerList.json() + + const medewerker = medewerkers.results.find((medewerker) => medewerker.email === user.user.email) + + this.userEmail = medewerker.email + this.fetchContactMomentItems() + }, fetchContactMomentItems() { this.loading = true Promise.all([ - contactMomentStore.refreshContactMomentenList(null, true), + contactMomentStore.refreshContactMomentenList(null, true, this.userEmail), klantStore.refreshKlantenList(), ]) .then(([contactMomentResponse, klantResponse]) => {