From 56776960f3791a0ee19813d75e481465a205d5ce Mon Sep 17 00:00:00 2001 From: Thijn Date: Thu, 28 Nov 2024 14:21:30 +0100 Subject: [PATCH 1/3] PC108-84: added tabs back and fixed the tabs --- src/entities/rol/rol.mock.ts | 1 + src/entities/rol/rol.ts | 3 + src/entities/rol/rol.types.ts | 1 + src/store/modules/rol.js | 125 ------------- .../modules/{rol.spec.js => rol.spec.ts} | 72 +++---- src/store/modules/rol.ts | 176 ++++++++++++++++++ src/store/store.js | 2 +- src/views/berichten/ZaakBerichten.vue | 42 +++-- src/views/besluiten/ZaakBesluiten.vue | 41 ++-- src/views/documenten/ZaakDocumenten.vue | 41 ++-- src/views/eigenschappen/ZaakEigenschappen.vue | 34 ++-- src/views/rollen/ZaakRollen.vue | 38 ++-- src/views/taken/ZaakTaken.vue | 26 +-- src/views/zaken/ZaakDetails.vue | 6 +- src/views/zaken/ZakenZaken.vue | 50 +++-- 15 files changed, 364 insertions(+), 294 deletions(-) delete mode 100644 src/store/modules/rol.js rename src/store/modules/{rol.spec.js => rol.spec.ts} (96%) create mode 100644 src/store/modules/rol.ts diff --git a/src/entities/rol/rol.mock.ts b/src/entities/rol/rol.mock.ts index 0711729..736750e 100644 --- a/src/entities/rol/rol.mock.ts +++ b/src/entities/rol/rol.mock.ts @@ -3,6 +3,7 @@ import { TRol } from './rol.types' export const mockRolData = (): TRol[] => [ { + id: '1', uuid: '15551d6f-44e3-43f3-a9d2-59e583c91eb0', omschrijving: 'Zaak 3', omschrijvingGeneriek: 'Zaak 3', diff --git a/src/entities/rol/rol.ts b/src/entities/rol/rol.ts index 04692b0..a76fb23 100644 --- a/src/entities/rol/rol.ts +++ b/src/entities/rol/rol.ts @@ -3,6 +3,7 @@ import { TRol } from './rol.types' export class Rol implements TRol { + public id: string public uuid: string public omschrijving: string public omschrijvingGeneriek: string @@ -37,6 +38,7 @@ export class Rol implements TRol { } constructor(source: TRol) { + this.id = source.id || null this.uuid = source.uuid || '' this.omschrijving = source.omschrijving || '' this.omschrijvingGeneriek = source.omschrijvingGeneriek || '' @@ -57,6 +59,7 @@ export class Rol implements TRol { public validate(): SafeParseReturnType { const schema = z.object({ + id: z.string().optional(), uuid: z.string().optional(), omschrijving: z.string().min(1), omschrijvingGeneriek: z.string(), diff --git a/src/entities/rol/rol.types.ts b/src/entities/rol/rol.types.ts index a97aacc..e0fbff9 100644 --- a/src/entities/rol/rol.types.ts +++ b/src/entities/rol/rol.types.ts @@ -1,4 +1,5 @@ export type TRol = { + id?: string; uuid: string; omschrijving: string; omschrijvingGeneriek: string; diff --git a/src/store/modules/rol.js b/src/store/modules/rol.js deleted file mode 100644 index 9fbc0d9..0000000 --- a/src/store/modules/rol.js +++ /dev/null @@ -1,125 +0,0 @@ -/* eslint-disable no-console */ -import { defineStore } from 'pinia' -import { Rol } from '../../entities/index.js' - -const apiEndpoint = '/index.php/apps/zaakafhandelapp/api/zrc/rollen' - -export const useRolStore = defineStore('rollen', { - state: () => ({ - rolItem: false, - rollenList: [], - }), - actions: { - setRolItem(rolItem) { - this.rolItem = rolItem && new Rol(rolItem) - console.log('Active rol item set to ' + rolItem) - }, - setRollenList(rollenList) { - this.rollenList = rollenList.map( - (rolItem) => new Rol(rolItem), - ) - console.log('Rollen list set to ' + rollenList.length + ' items') - }, - /* istanbul ignore next */ // ignore this for Jest until moved into a service - async refreshRollenList(search = null) { - let endpoint = apiEndpoint - - if (search !== null && search !== '') { - endpoint = endpoint + '?_search=' + search - } - - const response = await fetch(endpoint, { - method: 'GET', - }) - - if (!response.ok) { - console.log(response) - throw new Error(`HTTP error! status: ${response.status}`) - } - - const data = (await response.json()).results - const entities = data.map((rolItem) => new Rol(rolItem)) - - this.setRollenList(data) - - return { response, data, entities } - }, - // New function to get a single rol - async getRol(id) { - const endpoint = `${apiEndpoint}/${id}` - - const response = await fetch(endpoint, { - method: 'GET', - }) - - if (!response.ok) { - console.log(response) - throw new Error(`HTTP error! status: ${response.status}`) - } - - const data = await response.json() - const entity = new Rol(data) - - this.setRolItem(data) - - return { response, data, entity } - }, - // Delete a rol - async deleteRol(rolItem) { - if (!rolItem.id) { - throw new Error('No rol item to delete') - } - - const endpoint = `${apiEndpoint}/${rolItem.id}` - - const response = await fetch(endpoint, { - method: 'DELETE', - }) - - if (!response.ok) { - console.log(response) - throw new Error(`HTTP error! status: ${response.status}`) - } - - this.refreshRollenList() - - return { response } - }, - // Create or save a rol from store - async saveRol(rolItem) { - if (!rolItem) { - throw new Error('No rol item to save') - } - - const isNewRol = !rolItem.id - const endpoint = isNewRol - ? `${apiEndpoint}` - : `${apiEndpoint}/${rolItem.id}` - const method = isNewRol ? 'POST' : 'PUT' - - const response = await fetch( - endpoint, - { - method, - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify(rolItem), - }, - ) - - if (!response.ok) { - console.log(response) - throw new Error(`HTTP error! status: ${response.status}`) - } - - const data = await response.json() - const entity = new Rol(data) - - this.setRolItem(data) - this.refreshRollenList() - - return { response, data, entity } - }, - }, -}) diff --git a/src/store/modules/rol.spec.js b/src/store/modules/rol.spec.ts similarity index 96% rename from src/store/modules/rol.spec.js rename to src/store/modules/rol.spec.ts index 4a1afcb..c797683 100644 --- a/src/store/modules/rol.spec.js +++ b/src/store/modules/rol.spec.ts @@ -1,36 +1,36 @@ -/* eslint-disable no-console */ -import { setActivePinia, createPinia } from 'pinia' - -import { useZaakStore } from './zaken.js' -import { Zaak, mockZaak } from '../../entities/index.js' - -describe('Zaak Store', () => { - beforeEach(() => { - setActivePinia(createPinia()) - }) - - it('sets zaak item correctly', () => { - const store = useZaakStore() - - store.setZaakItem(mockZaak()[0]) - - expect(store.zaakItem).toBeInstanceOf(Zaak) - expect(store.zaakItem).toEqual(mockZaak()[0]) - - expect(store.zaakItem.validate().success).toBe(true) - }) - - it('sets zaken list correctly', () => { - const store = useZaakStore() - - store.setZakenList(mockZaak()) - - expect(store.zakenList).toHaveLength(mockZaak().length) - - store.zakenList.forEach((item, index) => { - expect(item).toBeInstanceOf(Zaak) - expect(item).toEqual(mockZaak()[index]) - expect(item.validate().success).toBe(true) - }) - }) -}) +/* eslint-disable no-console */ +import { setActivePinia, createPinia } from 'pinia' + +import { useZaakStore } from './zaken.js' +import { Zaak, mockZaak } from '../../entities/index.js' + +describe('Zaak Store', () => { + beforeEach(() => { + setActivePinia(createPinia()) + }) + + it('sets zaak item correctly', () => { + const store = useZaakStore() + + store.setZaakItem(mockZaak()[0]) + + expect(store.zaakItem).toBeInstanceOf(Zaak) + expect(store.zaakItem).toEqual(mockZaak()[0]) + + expect(store.zaakItem.validate().success).toBe(true) + }) + + it('sets zaken list correctly', () => { + const store = useZaakStore() + + store.setZakenList(mockZaak()) + + expect(store.zakenList).toHaveLength(mockZaak().length) + + store.zakenList.forEach((item, index) => { + expect(item).toBeInstanceOf(Zaak) + expect(item).toEqual(mockZaak()[index]) + expect(item.validate().success).toBe(true) + }) + }) +}) diff --git a/src/store/modules/rol.ts b/src/store/modules/rol.ts new file mode 100644 index 0000000..6b68442 --- /dev/null +++ b/src/store/modules/rol.ts @@ -0,0 +1,176 @@ +import { defineStore } from 'pinia' +import { TRol, Rol } from '../../entities/index.js' + +const apiEndpoint = '/index.php/apps/zaakafhandelapp/api/zrc/rollen' + +type TOptions = { + /** + * Save the rol item to the store in 'rolItem' + */ + setItem?: boolean +} + +export const useRolStore = defineStore('rollen', { + state: () => ({ + rolItem: null as Rol, + rollenList: [] as Rol[], + }), + actions: { + setRolItem(rolItem: Rol | TRol) { + this.rolItem = rolItem && new Rol(rolItem) + console.info('Active rol item set to ' + rolItem) + }, + setRollenList(rollenList: Rol[] | TRol[]) { + this.rollenList = rollenList.map( + (rolItem) => new Rol(rolItem), + ) + console.info('Rollen list set to ' + rollenList.length + ' items') + }, + /** + * Refresh the list of rollen items. + * + * @param search - Optional search query to filter the rollen list. (default: `null`) + * @throws If the HTTP request fails. + * @return {Promise<{ response: Response, data: TRol[], entities: Rol[] }>} The response, raw data, and entities. + */ + async refreshRollenList(search: string = null): Promise<{ response: Response, data: TRol[], entities: Rol[] }> { + let endpoint = apiEndpoint + + if (search !== null && search !== '') { + endpoint = endpoint + '?_search=' + search + } + + console.info('Refreshing rollen list with search: ' + search) + + const response = await fetch(endpoint, { + method: 'GET', + }) + + if (!response.ok) { + console.error(response) + throw new Error(`HTTP error! status: ${response.status}`) + } + + const data = (await response.json()).results as TRol[] + const entities = data.map((rolItem: TRol) => new Rol(rolItem)) + + this.setRollenList(data) + + return { response, data, entities } + }, + /** + * Fetch a single rol item by its ID. + * + * @param id - The ID of the rol item to fetch. + * @param options - Options for fetching the rol item. (default: `{}`) + * @throws If the HTTP request fails. + * @return {Promise<{ response: Response, data: TRol, entity: Rol }>} The response, raw data, and entity. + */ + async getRol( + id: string, + options: TOptions = {}, + ): Promise<{ response: Response, data: TRol, entity: Rol }> { + const endpoint = `${apiEndpoint}/${id}` + + console.info('Fetching rol item with id: ' + id) + + const response = await fetch(endpoint, { + method: 'GET', + }) + + if (!response.ok) { + console.error(response) + throw new Error(`HTTP error! status: ${response.status}`) + } + + const data = await response.json() + const entity = new Rol(data) + + options.setItem && this.setRolItem(data) + + return { response, data, entity } + }, + /** + * Delete a rol item from the database. + * + * @param rolItem - The rol item to delete. + * @throws If there is no rol item to delete or if the rol item does not have an id. + * @throws If the HTTP request fails. + * @return {Promise<{ response: Response }>} The response from the delete request. + */ + async deleteRol(rolItem: Rol | TRol): Promise<{ response: Response }> { + if (!rolItem) { + throw new Error('No rol item to delete') + } + if (!rolItem.id) { + throw new Error('No id for rol item to delete') + } + + const endpoint = `${apiEndpoint}/${rolItem.id}` + + console.info('Deleting rol item with id: ' + rolItem.id) + + const response = await fetch(endpoint, { + method: 'DELETE', + }) + + if (!response.ok) { + console.error(response) + throw new Error(`HTTP error! status: ${response.status}`) + } + + this.refreshRollenList() + + return { response } + }, + /** + * Save a rol item to the database. If the rol item does not have an id, it will be created. + * Otherwise, it will be updated. + * + * @param rolItem - The rol item to save. + * @param options - Options for saving the rol item. (default: `{ setItem: true }`) + * @throws If there is no rol item to save or if the HTTP request fails. + * @return {Promise<{ response: Response, data: TRol, entity: Rol }>} The response, raw data, and entity. + */ + async saveRol( + rolItem: Rol | TRol, + options: TOptions = { setItem: true }, + ): Promise<{ response: Response, data: TRol, entity: Rol }> { + if (!rolItem) { + throw new Error('No rol item to save') + } + + const isNewRol = !rolItem.id + const endpoint = isNewRol + ? `${apiEndpoint}` + : `${apiEndpoint}/${rolItem.id}` + const method = isNewRol ? 'POST' : 'PUT' + + console.info('Saving rol item with id: ' + rolItem.id) + + const response = await fetch( + endpoint, + { + method, + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(rolItem), + }, + ) + + if (!response.ok) { + console.error(response) + throw new Error(`HTTP error! status: ${response.status}`) + } + + const data = await response.json() as TRol + const entity = new Rol(data) + + options.setItem && this.setRolItem(data) + this.refreshRollenList() + + return { response, data, entity } + }, + }, +}) diff --git a/src/store/store.js b/src/store/store.js index 4009d31..dc8d64b 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -5,7 +5,7 @@ import { useZaakStore } from './modules/zaken.ts' import { useZaakTypeStore } from './modules/zaakTypen.ts' import { useBerichtStore } from './modules/berichten.js' import { useKlantStore } from './modules/klanten.js' -import { useRolStore } from './modules/rol.js' +import { useRolStore } from './modules/rol.ts' import { useTaakStore } from './modules/taak.js' import { useSearchStore } from './modules/search.ts' import { useContactMomentStore } from './modules/contactmoment.js' diff --git a/src/views/berichten/ZaakBerichten.vue b/src/views/berichten/ZaakBerichten.vue index 711294e..c885e50 100644 --- a/src/views/berichten/ZaakBerichten.vue +++ b/src/views/berichten/ZaakBerichten.vue @@ -1,20 +1,20 @@ - + - +