From 9bd6c053e37f29dbdb2f73f5a64b99f7792541ba Mon Sep 17 00:00:00 2001 From: Vanderhaegen Cedrik Date: Thu, 8 Feb 2024 08:37:39 +0100 Subject: [PATCH 1/6] set next dev version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 561f67a..b6d2551 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "main": "./dist/vue-components.umd.js", "module": "./dist/vue-components.es.js", "typings": "./dist/src/main.d.ts", - "version": "1.3.0", + "version": "1.4.0", "exports": { ".": { "import": "./dist/vue-components.es.js", From f90e57671a579dd709a0ffe958312471c9abb27e Mon Sep 17 00:00:00 2001 From: yannickkuypers Date: Mon, 19 Feb 2024 15:00:38 +0100 Subject: [PATCH 2/6] #217 inventaris waarneming gebeurtenis koppeling component + storybook + cypress testing (#218) * #217 inventaris waarneming gebeurtenis koppeling component + storybook + cypress testing --------- Co-authored-by: Axel Verstappen --- package.json | 1 + src/__tests__/OEInventarisLink.cy.ts | 62 ++++++++++++ src/__tests__/OEInventarisLoadedLink.cy.ts | 51 ++++++++++ .../dumb/OeInventarisLoadedLink.vue | 49 ++++++++++ src/components/dumb/index.ts | 2 + src/components/smart/OeInventarisLink.vue | 46 +++++++++ src/components/smart/index.ts | 2 + src/models/index.ts | 1 + src/models/links.ts | 24 +++++ .../oe-inventaris-loaded-link.stories.ts | 68 ++++++++++++++ .../oe-inventaris-link.stories.ts | 94 +++++++++++++++++++ yarn.lock | 11 ++- 12 files changed, 410 insertions(+), 1 deletion(-) create mode 100644 src/__tests__/OEInventarisLink.cy.ts create mode 100644 src/__tests__/OEInventarisLoadedLink.cy.ts create mode 100644 src/components/dumb/OeInventarisLoadedLink.vue create mode 100644 src/components/smart/OeInventarisLink.vue create mode 100644 src/models/links.ts create mode 100644 src/stories/dumb-components/oe-inventaris-loaded-link.stories.ts create mode 100644 src/stories/smart-components/oe-inventaris-link.stories.ts diff --git a/package.json b/package.json index b6d2551..4a239fd 100644 --- a/package.json +++ b/package.json @@ -64,6 +64,7 @@ "ag-grid-community": "^29.3.5", "ag-grid-vue3": "^29.3.5", "axios": "^1.4.0", + "axios-mock-adapter": "^1.22.0", "date-fns": "^2.30.0", "libphonenumber-js": "^1.10.37", "lodash": "^4.17.21", diff --git a/src/__tests__/OEInventarisLink.cy.ts b/src/__tests__/OEInventarisLink.cy.ts new file mode 100644 index 0000000..973599b --- /dev/null +++ b/src/__tests__/OEInventarisLink.cy.ts @@ -0,0 +1,62 @@ +import axios from 'axios'; +import MockAdapter from 'axios-mock-adapter'; +import { mount } from 'cypress/vue'; +import { defineComponent, useAttrs } from 'vue'; +import OeInventarisLink from '@components/smart/OeInventarisLink.vue'; +import type { IInventarisLinkGebeurtenis, IInventarisLinkWaarneming, ILinks } from '@models/links'; + +const WAARNEMING_API = + 'https://dev-inventaris.onroerenderfgoed.be/gebeurtenissen?bron_referentie_uri=https://dev-id.erfgoed.net/dossiers/158226'; +const GEBEURTENIS_API = + 'https://dev-inventaris.onroerenderfgoed.be/waarnemingsobjecten?bron_referentie_uri=https://dev-id.erfgoed.net/dossiers/158226'; + +const mock = new MockAdapter(axios); + +const TestComponent = defineComponent({ + components: { OeInventarisLink }, + setup() { + const attrs = useAttrs(); + return { attrs }; + }, + template: '', +}); + +describe('OEInventarisLink - no data', () => { + const getSsoToken = async () => 1; + it('renders', () => { + mount(TestComponent, { props: { links: undefined, getSsoToken: getSsoToken } }); + }); + + it('shows the links when urls are available', () => { + mock.onGet(WAARNEMING_API).reply(200, [ + { id: 1, naam: 'Kardinaal Mercierlaan 66, Leuven', uri: 'https://dev-id.erfgoed.net/waarnemingen/1' }, + { id: 2, naam: 'Kardinaal Mercierlaan 67, Leuven', uri: 'https://dev-id.erfgoed.net/waarnemingen/2' }, + ] as IInventarisLinkWaarneming[]); + mock.onGet(GEBEURTENIS_API).reply(200, [ + { + id: 1, + titel: 'Toevalsvondst Kardinaal Mercierlaan 66, Leuven', + uri: 'https://dev-id.erfgoed.net/gebeurtenissen/1', + }, + { + id: 2, + titel: 'Toevalsvondst Kardinaal Mercierlaan 67, Leuven', + uri: 'https://dev-id.erfgoed.net/gebeurtenissen/2', + }, + ] as IInventarisLinkGebeurtenis[]); + const links = { + relaties: { + waarnemingen: { + href: WAARNEMING_API, + }, + gebeurtenissen: { + href: GEBEURTENIS_API, + }, + }, + } as ILinks; + mount(TestComponent, { props: { links: links, getSsoToken: getSsoToken } }); + + cy.dataCy('gekoppelde-waarnemingen-title').should('have.text', 'Gekoppelde waarnemingen'); + cy.dataCy('gekoppelde-gebeurtenissen-title').should('have.text', 'Gekoppelde gebeurtenissen'); + }); +}); diff --git a/src/__tests__/OEInventarisLoadedLink.cy.ts b/src/__tests__/OEInventarisLoadedLink.cy.ts new file mode 100644 index 0000000..80aeb96 --- /dev/null +++ b/src/__tests__/OEInventarisLoadedLink.cy.ts @@ -0,0 +1,51 @@ +import { mount } from 'cypress/vue'; +import { defineComponent, useAttrs } from 'vue'; +import OeInventarisLoadedLink from '@components/dumb/OeInventarisLoadedLink.vue'; + +const TestComponent = defineComponent({ + components: { OeInventarisLoadedLink }, + setup() { + const attrs = useAttrs(); + return { attrs }; + }, + template: '', +}); + +describe('OEInventarisLoadedLink - no data', () => { + it('renders', () => { + mount(TestComponent, { props: { gebeurtenissen: undefined, waarnemingen: undefined } }); + }); + + it('shows the correct no data shown text', () => { + mount(TestComponent, { props: { gebeurtenissen: undefined, waarnemingen: undefined } }); + cy.dataCy('geen-gekoppelde-waarnemingen').should('have.text', 'Geen gekoppelde waarnemingen beschikbaar.'); + cy.dataCy('geen-gekoppelde-gebeurtenissen').should('have.text', 'Geen gekoppelde gebeurtenissen beschikbaar.'); + }); + + it('shows the gebeurtenissen and waarnemingen', () => { + const gebeurtenissen = [ + { + id: 1, + titel: 'Toevalsvondst Kardinaal Mercierlaan 66, Leuven', + uri: 'https://dev-id.erfgoed.net/gebeurtenissen/1', + }, + { + id: 2, + titel: 'Toevalsvondst Kardinaal Mercierlaan 67, Leuven', + uri: 'https://dev-id.erfgoed.net/gebeurtenissen/2', + }, + ]; + const waarnemingen = [ + { id: 1, naam: 'Kardinaal Mercierlaan 66, Leuven', uri: 'https://dev-id.erfgoed.net/waarnemingen/1' }, + { id: 2, naam: 'Kardinaal Mercierlaan 67, Leuven', uri: 'https://dev-id.erfgoed.net/waarnemingen/2' }, + ]; + mount(TestComponent, { props: { gebeurtenissen: gebeurtenissen, waarnemingen: waarnemingen } }); + + cy.dataCy('gekoppelde-waarnemingen-title').should('have.text', 'Gekoppelde waarnemingen'); + cy.dataCy('gekoppelde-gebeurtenissen-title').should('have.text', 'Gekoppelde gebeurtenissen'); + cy.dataCy('waarneming-link-1').should('have.text', 'Kardinaal Mercierlaan 66, Leuven (1)'); + cy.dataCy('gebeurtenis-link-1').should('have.text', 'Toevalsvondst Kardinaal Mercierlaan 66, Leuven (1)'); + cy.dataCy('waarneming-link-2').should('have.text', 'Kardinaal Mercierlaan 67, Leuven (2)'); + cy.dataCy('gebeurtenis-link-2').should('have.text', 'Toevalsvondst Kardinaal Mercierlaan 67, Leuven (2)'); + }); +}); diff --git a/src/components/dumb/OeInventarisLoadedLink.vue b/src/components/dumb/OeInventarisLoadedLink.vue new file mode 100644 index 0000000..971587c --- /dev/null +++ b/src/components/dumb/OeInventarisLoadedLink.vue @@ -0,0 +1,49 @@ + + diff --git a/src/components/dumb/index.ts b/src/components/dumb/index.ts index e8e8fc9..3d59e65 100644 --- a/src/components/dumb/index.ts +++ b/src/components/dumb/index.ts @@ -11,6 +11,7 @@ import OeButton from './OeButton.vue'; import OeContainer from './OeContainer.vue'; import OeGrid from './OeGrid.vue'; import OeHeader from './OeHeader.vue'; +import OeInventarisLoadedLink from './OeInventarisLoadedLink.vue'; import OeLoader from './OeLoader.vue'; import OeSelect from './OeSelect.vue'; import OeTinyMce from './OeTinyMCE.vue'; @@ -31,6 +32,7 @@ export { OeContainer, OeGrid, OeHeader, + OeInventarisLoadedLink, OeLoader, OeSelect, OeTinyMce, diff --git a/src/components/smart/OeInventarisLink.vue b/src/components/smart/OeInventarisLink.vue new file mode 100644 index 0000000..5a7cf05 --- /dev/null +++ b/src/components/smart/OeInventarisLink.vue @@ -0,0 +1,46 @@ + + diff --git a/src/components/smart/index.ts b/src/components/smart/index.ts index 1c841d7..a802570 100644 --- a/src/components/smart/index.ts +++ b/src/components/smart/index.ts @@ -4,6 +4,7 @@ import FilterGemeente from './FilterGemeente.vue'; import FilterProvincie from './FilterProvincie.vue'; import OeActorWidget from './OeActorWidget.vue'; import OeAdres from './OeAdres.vue'; +import OeInventarisLink from './OeInventarisLink.vue'; import OeZoneerder from './OeZoneerder.vue'; export { @@ -14,4 +15,5 @@ export { FilterProvincie, OeActorWidget, OeZoneerder, + OeInventarisLink, }; diff --git a/src/models/index.ts b/src/models/index.ts index de32d26..870e4af 100644 --- a/src/models/index.ts +++ b/src/models/index.ts @@ -9,6 +9,7 @@ export * from './grid'; export * from './header'; export * from './input-phone'; export * from './layerType.enum'; +export * from './links'; export * from './locatie'; export * from './niscode.enum'; export * from './oe-openlayers'; diff --git a/src/models/links.ts b/src/models/links.ts new file mode 100644 index 0000000..fb8e410 --- /dev/null +++ b/src/models/links.ts @@ -0,0 +1,24 @@ +export interface ILinks { + relaties: ILinkRelatie; +} + +export interface ILinkRelatie { + gebeurtenissen: ILinkRelatieHref; + waarnemingen: ILinkRelatieHref; +} + +export interface ILinkRelatieHref { + href: string; +} + +export interface IInventarisLinkWaarneming { + naam: string; + uri: string; + id: number; +} + +export interface IInventarisLinkGebeurtenis { + titel: string; + uri: string; + id: number; +} diff --git a/src/stories/dumb-components/oe-inventaris-loaded-link.stories.ts b/src/stories/dumb-components/oe-inventaris-loaded-link.stories.ts new file mode 100644 index 0000000..5ee35bc --- /dev/null +++ b/src/stories/dumb-components/oe-inventaris-loaded-link.stories.ts @@ -0,0 +1,68 @@ +import '@/scss/main.scss'; +import OeInventarisLoadedLink from '@components/dumb/OeInventarisLoadedLink.vue'; +import type { Meta, StoryObj } from '@storybook/vue3'; +import type { IInventarisLinkGebeurtenis, IInventarisLinkWaarneming } from '@models/links'; + +// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction +const meta: Meta = { + title: 'Dumb components/OeInventarisLoadedLink', + component: OeInventarisLoadedLink, + parameters: { + docs: { + description: { + component: `Component to show loaded inventaris waarnemingen/gebeurtenissen`, + }, + }, + }, + tags: ['autodocs'], + argTypes: { + gebeurtenissen: { + description: 'Array of gebeurtenissen', + table: { + type: { summary: 'Array of gebeurtenissen' }, + }, + }, + waarnemingen: { + description: 'Array of waarnemingen', + table: { + type: { summary: 'Array of waarnemingen' }, + }, + }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ({ + components: { + OeInventarisLoadedLink, + }, + setup() { + const gebeurtenissen: IInventarisLinkGebeurtenis[] = []; + const waarnemingen: IInventarisLinkWaarneming[] = []; + return { gebeurtenissen, waarnemingen }; + }, + template: ` +
+ +
+ `, + }), +}; + +export const GebeurtenissenAndWaarnemingen: Story = { + args: { + waarnemingen: [ + { id: 1, naam: 'Kardinaal Mercierlaan 66, Leuven', uri: 'https://dev-id.erfgoed.net/waarnemingen/1' }, + ] as IInventarisLinkWaarneming[], + gebeurtenissen: [ + { + id: 1, + titel: 'Toevalsvondst Kardinaal Mercierlaan 66, Leuven', + uri: 'https://dev-id.erfgoed.net/gebeurtenissen/1', + }, + ] as IInventarisLinkGebeurtenis[], + }, +}; diff --git a/src/stories/smart-components/oe-inventaris-link.stories.ts b/src/stories/smart-components/oe-inventaris-link.stories.ts new file mode 100644 index 0000000..a3fe63a --- /dev/null +++ b/src/stories/smart-components/oe-inventaris-link.stories.ts @@ -0,0 +1,94 @@ +import '@/scss/main.scss'; +import axios from 'axios'; +import MockAdapter from 'axios-mock-adapter'; +import { OeInventarisLink } from '@/components'; +import type { Meta, StoryObj } from '@storybook/vue3'; +import type { IInventarisLinkGebeurtenis, IInventarisLinkWaarneming, ILinks } from '@models/links'; + +const WAARNEMING_API = + 'https://dev-inventaris.onroerenderfgoed.be/gebeurtenissen?bron_referentie_uri=https://dev-id.erfgoed.net/dossiers/158226'; +const GEBEURTENIS_API = + 'https://dev-inventaris.onroerenderfgoed.be/waarnemingsobjecten?bron_referentie_uri=https://dev-id.erfgoed.net/dossiers/158226'; + +const mock = new MockAdapter(axios); +// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction +const meta: Meta = { + title: 'Smart components/OeInventarisLink', + component: OeInventarisLink, + parameters: { + docs: { + description: { + component: `Component to show inventaris waarnemingen/gebeurtenissen if the link property is available`, + }, + }, + }, + tags: ['autodocs'], + argTypes: { + links: { + description: 'property that will contain the waarneming/gebeurtenis urls', + table: { + type: { summary: 'links' }, + }, + }, + getSsoToken: { + description: 'Method that gets authentication token', + table: { + type: { summary: 'getSsoToken' }, + }, + }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ({ + components: { + OeInventarisLink, + }, + setup() { + mock.onGet(WAARNEMING_API).reply(200, [ + { id: 1, naam: 'Kardinaal Mercierlaan 66, Leuven', uri: 'https://dev-id.erfgoed.net/waarnemingen/1' }, + { id: 2, naam: 'Kardinaal Mercierlaan 67, Leuven', uri: 'https://dev-id.erfgoed.net/waarnemingen/2' }, + ] as IInventarisLinkWaarneming[]); + mock.onGet(GEBEURTENIS_API).reply(200, [ + { + id: 1, + titel: 'Toevalsvondst Kardinaal Mercierlaan 66, Leuven', + uri: 'https://dev-id.erfgoed.net/gebeurtenissen/1', + }, + { + id: 2, + titel: 'Toevalsvondst Kardinaal Mercierlaan 67, Leuven', + uri: 'https://dev-id.erfgoed.net/gebeurtenissen/2', + }, + ] as IInventarisLinkGebeurtenis[]); + + const links = { + relaties: { + waarnemingen: { + href: WAARNEMING_API, + }, + gebeurtenissen: { + href: GEBEURTENIS_API, + }, + }, + } as ILinks; + const getSsoToken = async () => 1; + return { links, getSsoToken }; + }, + template: ` +
+ +
+ `, + }), +}; + +export const NoLinksPresent: Story = { + args: { + links: undefined, + getSsoToken: async () => '1', + }, +}; diff --git a/yarn.lock b/yarn.lock index a0c251d..0313754 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3858,6 +3858,14 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.12.0.tgz#ce1c9d143389679e253b314241ea9aa5cec980d3" integrity sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg== +axios-mock-adapter@^1.22.0: + version "1.22.0" + resolved "https://registry.yarnpkg.com/axios-mock-adapter/-/axios-mock-adapter-1.22.0.tgz#0f3e6be0fc9b55baab06f2d49c0b71157e7c053d" + integrity sha512-dmI0KbkyAhntUR05YY96qg2H6gg0XMl2+qTW0xmYg6Up+BFBAJYRLROMXRdDEL06/Wqwa0TJThAYvFtSFdRCZw== + dependencies: + fast-deep-equal "^3.1.3" + is-buffer "^2.0.5" + axios@^1.4.0, axios@^1.6.1: version "1.6.7" resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.7.tgz#7b48c2e27c96f9c68a2f8f31e2ab19f59b06b0a7" @@ -6390,7 +6398,7 @@ is-boolean-object@^1.1.0: call-bind "^1.0.2" has-tostringtag "^1.0.0" -is-buffer@^2.0.0: +is-buffer@^2.0.0, is-buffer@^2.0.5: version "2.0.5" resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191" integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ== @@ -10740,6 +10748,7 @@ wordwrap@^1.0.0: integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q== "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: + name wrap-ansi-cjs version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== From f5e62ed0474514488f4d7f38799ddd7284d7fdfa Mon Sep 17 00:00:00 2001 From: Yannick Kuypers Date: Mon, 19 Feb 2024 15:54:24 +0100 Subject: [PATCH 3/6] Change OE => Oe --- .../{OEInventarisLink.cy.ts => OeInventarisLink.cy.ts} | 2 +- ...EInventarisLoadedLink.cy.ts => OeInventarisLoadedLink.cy.ts} | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename src/__tests__/{OEInventarisLink.cy.ts => OeInventarisLink.cy.ts} (97%) rename src/__tests__/{OEInventarisLoadedLink.cy.ts => OeInventarisLoadedLink.cy.ts} (97%) diff --git a/src/__tests__/OEInventarisLink.cy.ts b/src/__tests__/OeInventarisLink.cy.ts similarity index 97% rename from src/__tests__/OEInventarisLink.cy.ts rename to src/__tests__/OeInventarisLink.cy.ts index 973599b..0669355 100644 --- a/src/__tests__/OEInventarisLink.cy.ts +++ b/src/__tests__/OeInventarisLink.cy.ts @@ -21,7 +21,7 @@ const TestComponent = defineComponent({ template: '', }); -describe('OEInventarisLink - no data', () => { +describe('OeInventarisLink - no data', () => { const getSsoToken = async () => 1; it('renders', () => { mount(TestComponent, { props: { links: undefined, getSsoToken: getSsoToken } }); diff --git a/src/__tests__/OEInventarisLoadedLink.cy.ts b/src/__tests__/OeInventarisLoadedLink.cy.ts similarity index 97% rename from src/__tests__/OEInventarisLoadedLink.cy.ts rename to src/__tests__/OeInventarisLoadedLink.cy.ts index 80aeb96..a4a4fe6 100644 --- a/src/__tests__/OEInventarisLoadedLink.cy.ts +++ b/src/__tests__/OeInventarisLoadedLink.cy.ts @@ -11,7 +11,7 @@ const TestComponent = defineComponent({ template: '', }); -describe('OEInventarisLoadedLink - no data', () => { +describe('OeInventarisLoadedLink - no data', () => { it('renders', () => { mount(TestComponent, { props: { gebeurtenissen: undefined, waarnemingen: undefined } }); }); From 82da089fbfd1ec5a67b9259b624e54784a61da33 Mon Sep 17 00:00:00 2001 From: wouter-adriaens <69460082+wouter-adriaens@users.noreply.github.com> Date: Mon, 19 Feb 2024 16:14:12 +0100 Subject: [PATCH 4/6] Feature/215 import common code (#216) * #215 Import dossier models * #215 Import auth service * #215 Import util store * #215 Import app toaster * #215 Extend dossierquery model * more dossier models --------- Co-authored-by: pegahmoh --- .storybook/preview.ts | 2 + package.json | 2 + src/components/dumb/OeToaster.vue | 36 +++++++ src/components/dumb/index.ts | 2 + src/composables/index.ts | 1 + src/composables/util.store.ts | 36 +++++++ src/main.ts | 1 + src/models/dossier.ts | 30 ++++++ src/models/index.ts | 1 + src/services/auth.service.ts | 101 ++++++++++++++++++ src/services/index.ts | 1 + .../dumb-components/toaster.stories.ts | 68 ++++++++++++ vite.config.ts | 2 +- yarn.lock | 15 ++- 14 files changed, 296 insertions(+), 2 deletions(-) create mode 100644 src/components/dumb/OeToaster.vue create mode 100644 src/composables/index.ts create mode 100644 src/composables/util.store.ts create mode 100644 src/models/dossier.ts create mode 100644 src/services/auth.service.ts create mode 100644 src/stories/dumb-components/toaster.stories.ts diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 2633860..e73d72a 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -5,6 +5,7 @@ import { far } from '@fortawesome/free-regular-svg-icons'; import { fas } from '@fortawesome/free-solid-svg-icons'; import { VlUiCore, VlUiUtil } from '@govflanders/vl-ui-design-system-vue3'; import { setup } from '@storybook/vue3'; +import { createPinia } from 'pinia'; import type { Preview } from '@storybook/vue3'; library.add(fas); @@ -14,6 +15,7 @@ library.add(fab); setup((app) => { app.use(VlUiCore); app.use(VlUiUtil); + app.use(createPinia()); }); const preview: Preview = { diff --git a/package.json b/package.json index 4a239fd..88ae18c 100644 --- a/package.json +++ b/package.json @@ -66,11 +66,13 @@ "axios": "^1.4.0", "axios-mock-adapter": "^1.22.0", "date-fns": "^2.30.0", + "guid-typescript": "^1.0.9", "libphonenumber-js": "^1.10.37", "lodash": "^4.17.21", "ol": "^7.4.0", "ol-contextmenu": "^5.2.1", "ol-ext": "^4.0.10", + "pinia": "^2.1.7", "proj4": "^2.9.0", "pyoes": "https://gitpkg.now.sh/OnroerendErfgoed/pyoes/npm-packages/pyoes?0.18.0", "uuid": "^9.0.0", diff --git a/src/components/dumb/OeToaster.vue b/src/components/dumb/OeToaster.vue new file mode 100644 index 0000000..51c7cb6 --- /dev/null +++ b/src/components/dumb/OeToaster.vue @@ -0,0 +1,36 @@ + + + diff --git a/src/components/dumb/index.ts b/src/components/dumb/index.ts index 3d59e65..97cf77b 100644 --- a/src/components/dumb/index.ts +++ b/src/components/dumb/index.ts @@ -15,6 +15,7 @@ import OeInventarisLoadedLink from './OeInventarisLoadedLink.vue'; import OeLoader from './OeLoader.vue'; import OeSelect from './OeSelect.vue'; import OeTinyMce from './OeTinyMCE.vue'; +import OeToaster from './OeToaster.vue'; import OeWizard from './OeWizard.vue'; import SystemFields from './SystemFields.vue'; @@ -36,6 +37,7 @@ export { OeLoader, OeSelect, OeTinyMce, + OeToaster, OeWizard, SystemFields, }; diff --git a/src/composables/index.ts b/src/composables/index.ts new file mode 100644 index 0000000..7ce6b3e --- /dev/null +++ b/src/composables/index.ts @@ -0,0 +1 @@ +export * from './util.store'; diff --git a/src/composables/util.store.ts b/src/composables/util.store.ts new file mode 100644 index 0000000..f51ea22 --- /dev/null +++ b/src/composables/util.store.ts @@ -0,0 +1,36 @@ +import { Guid } from 'guid-typescript'; +import { remove } from 'lodash'; +import { defineStore } from 'pinia'; +import { computed, ref } from 'vue'; +import type { IToast } from '@models/toast'; + +export const useUtilStore = defineStore('util', () => { + // Loading + const loading = ref([]); + const isLoading = computed(() => !!loading.value.length); + + const startLoading = (reference: string) => loading.value.push(reference); + const stopLoading = (reference: string) => remove(loading.value, (l) => l === reference); + + // Toasts + const toasts = ref([]); + const addToast = (toast: IToast, duration?: number) => { + const id = Guid.create().toString(); + toasts.value.push({ ...toast, id }); + + if (duration) { + setTimeout(() => removeToast(id), duration); + } + }; + const removeToast = (id: string) => remove(toasts.value, (e) => e.id === id); + + return { + toasts, + addToast, + removeToast, + loading, + isLoading, + startLoading, + stopLoading, + }; +}); diff --git a/src/main.ts b/src/main.ts index e114179..9c63a3c 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,3 +2,4 @@ export * from './components'; export * from './services'; export * from './models'; export * from './utils'; +export * from './composables'; diff --git a/src/models/dossier.ts b/src/models/dossier.ts new file mode 100644 index 0000000..52e0ca1 --- /dev/null +++ b/src/models/dossier.ts @@ -0,0 +1,30 @@ +export interface IMenuTab { + index: number; + id: string; + class: string; +} + +export interface IDossierQuery { + sort?: string; + eigenaar?: string; + state?: number | string; + dringend?: number; + tekst?: string; +} + +export interface IDossierTabs { + [k: string]: IDossierTab; +} + +export interface IDossierTab { + index: number; + label: string; + id: string; + invalid: boolean; + class?: string; +} + +export interface IEnumType { + naam: string; + id: number; +} diff --git a/src/models/index.ts b/src/models/index.ts index 870e4af..cf1f13f 100644 --- a/src/models/index.ts +++ b/src/models/index.ts @@ -19,3 +19,4 @@ export * from './system-fields'; export * from './toast'; export * from './user'; export * from './wizard'; +export * from './dossier'; diff --git a/src/services/auth.service.ts b/src/services/auth.service.ts new file mode 100644 index 0000000..3b3c683 --- /dev/null +++ b/src/services/auth.service.ts @@ -0,0 +1,101 @@ +import { HttpService } from './http.service'; +import type { IUser, User } from '@models/user'; + +export class AuthService extends HttpService { + private readonly API_URL: string; + private readonly ROLE_PREFIX: string; + private _user!: User; + private refreshToken = true; + + constructor(apiUrl: string, user: User, rolePrefix: string) { + super(); + this.API_URL = apiUrl; + this.ROLE_PREFIX = rolePrefix; + this.user = user; + this.watchTokenTimeout(); + } + + get user(): User { + return this._user; + } + + set user(value: User) { + this._user = value; + } + + isBeheerder() { + if (this.user) { + return this.user.hasRole(this.ROLE_PREFIX + 'beheerder'); + } + return false; + } + + isInvoerder() { + if (this.user) { + return this.user.hasRole(this.ROLE_PREFIX + 'invoerder'); + } + return false; + } + + isToevoeger() { + if (this.user) { + return this.user.hasRole(this.ROLE_PREFIX + 'toevoeger'); + } + return false; + } + + isLezer() { + if (this.user) { + return this.user.hasRole(this.ROLE_PREFIX + 'lezer'); + } + return false; + } + + getHighestRole(): string { + if (this.isBeheerder()) { + return 'Beheerder'; + } + if (this.isInvoerder()) { + return 'Invoerder'; + } + if (this.isToevoeger()) { + return 'Toevoeger'; + } + if (this.isLezer()) { + return 'Lezer'; + } + return 'Ongekende rol'; + } + + canEdit() { + if (this.isBeheerder()) return true; + return false; + } + + async getSsoToken(hardRefresh = false) { + if (this.refreshToken || hardRefresh) { + await this.refreshSession(); + } + if (this.user) { + return this.user.ssoToken; + } + return null; + } + + async refreshSession() { + const sessionUser = (await this.get(`${this.API_URL}user`, { headers: { Accept: 'application/json' } })) + .data; + + if (this.user) { + this.user.ssoToken = sessionUser.sso_token; + this.refreshToken = false; + } + } + + watchTokenTimeout() { + const minutes = 2; + window.setInterval(() => { + this.refreshToken = true; + }, minutes * 60000); + } +} diff --git a/src/services/index.ts b/src/services/index.ts index 940099f..f4c9312 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -1,3 +1,4 @@ export * from './crab-api.service'; export * from './inventaris-api.service'; export * from './http.service'; +export * from './auth.service'; diff --git a/src/stories/dumb-components/toaster.stories.ts b/src/stories/dumb-components/toaster.stories.ts new file mode 100644 index 0000000..e1e302a --- /dev/null +++ b/src/stories/dumb-components/toaster.stories.ts @@ -0,0 +1,68 @@ +import '@/scss/main.scss'; +import { useUtilStore } from '@/composables'; +import { OeButton } from '@components/dumb'; +import OeToaster from '@components/dumb/OeToaster.vue'; +import type { Meta, StoryObj } from '@storybook/vue3'; +import type { ToastType } from '@models/toast'; + +// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction +const meta: Meta = { + title: 'Dumb components/Toaster', + component: OeToaster, + // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs + tags: ['autodocs'], + + parameters: { + layout: 'fullscreen', + docs: { + story: { + height: '250px', + }, + }, + }, +}; + +export default meta; +type Story = StoryObj; +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/vue/api/csf + * to learn how to use render functions. + */ +export const Tabs: Story = { + parameters: { + docs: { + story: { + height: '500px', + }, + description: { + story: 'The component displays all toasts that are pushed to the `UtilStore` in the upper right corner.', + }, + }, + }, + render: () => ({ + components: { + OeToaster, + OeButton, + }, + setup: () => { + const utilStore = useUtilStore(); + const showToast = (type: ToastType) => { + utilStore.addToast({ + title: 'Title', + content: 'Content', + type, + }); + }; + + return { showToast }; + }, + template: ` + Push error toast to util store
+ Push success toast to util store
+ Push warning toast to util store
+ Push default toast to util store
+ + `, + }), +}; diff --git a/vite.config.ts b/vite.config.ts index 73ec3e1..1354342 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -16,7 +16,7 @@ export default defineConfig({ }, sourcemap: true, rollupOptions: { - external: ['vue'], + external: ['vue', 'pinia'], output: { exports: 'named', assetFileNames: (assetInfo) => { diff --git a/yarn.lock b/yarn.lock index 0313754..dcd3492 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6086,6 +6086,11 @@ graphemer@^1.4.0: resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6" integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag== +guid-typescript@^1.0.9: + version "1.0.9" + resolved "https://registry.yarnpkg.com/guid-typescript/-/guid-typescript-1.0.9.tgz#e35f77003535b0297ea08548f5ace6adb1480ddc" + integrity sha512-Y8T4vYhEfwJOTbouREvG+3XDsjr8E3kIr7uf+JZ0BYloFsttiHU0WfvANVsR7TxNUJa/WpCnw/Ino/p+DeBhBQ== + gunzip-maybe@^1.4.2: version "1.4.2" resolved "https://registry.yarnpkg.com/gunzip-maybe/-/gunzip-maybe-1.4.2.tgz#b913564ae3be0eda6f3de36464837a9cd94b98ac" @@ -8430,6 +8435,14 @@ pify@^4.0.1: resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231" integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g== +pinia@^2.1.7: + version "2.1.7" + resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.1.7.tgz#4cf5420d9324ca00b7b4984d3fbf693222115bbc" + integrity sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ== + dependencies: + "@vue/devtools-api" "^6.5.0" + vue-demi ">=0.14.5" + pirates@^4.0.4, pirates@^4.0.6: version "4.0.6" resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9" @@ -10507,7 +10520,7 @@ vue-component-type-helpers@^1.8.21, vue-component-type-helpers@latest: resolved "https://registry.yarnpkg.com/vue-component-type-helpers/-/vue-component-type-helpers-1.8.27.tgz#e816c82dcffac8bca58833c120ba395c325dfa68" integrity sha512-0vOfAtI67UjeO1G6UiX5Kd76CqaQ67wrRZiOe7UAb9Jm6GzlUr/fC7CV90XfwapJRjpCMaZFhv1V0ajWRmE9Dg== -vue-demi@>=0.14.6: +vue-demi@>=0.14.5, vue-demi@>=0.14.6: version "0.14.7" resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.7.tgz#8317536b3ef74c5b09f268f7782e70194567d8f2" integrity sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA== From dc5dbd75c82363ba16f21ba82341de871bc2b7ce Mon Sep 17 00:00:00 2001 From: yannickkuypers Date: Tue, 20 Feb 2024 10:00:24 +0100 Subject: [PATCH 5/6] #221 yarn lint + format (#223) * #221 yarn lint + format * #221 Align pre-commit lint and format with scripts --------- Co-authored-by: wouter-adriaens --- .pre-commit-config.yaml | 31 +++++++------------ src/__tests__/InputPhone.cy.ts | 2 +- src/__tests__/OeZoneerder.cy.ts | 2 +- .../dumb/OeInventarisLoadedLink.vue | 8 ++--- src/components/smart/FilterAOEActor.vue | 2 +- .../smart/FilterAanduidingsobject.vue | 2 +- src/components/smart/FilterGemeente.vue | 2 +- src/components/smart/FilterProvincie.vue | 2 +- src/components/smart/OeActorWidget.vue | 2 +- src/components/smart/OeActorWidgetGrid.vue | 4 +-- src/components/smart/OeZoneerder.vue | 12 +++---- .../smart/OeZoneerderLayerswitcher.vue | 6 ++-- src/components/smart/OeZoneerderZonePanel.vue | 8 ++--- src/models/aanduidingsobject.ts | 2 +- src/scss/_override-fonts.scss | 12 +++---- src/services/crab-api.service.ts | 4 +-- .../dumb-components/autocomplete.stories.ts | 2 +- src/stories/dumb-components/button.stories.ts | 2 +- .../dumb-components/container.stories.ts | 2 +- .../dumb-components/filter-radio.stories.ts | 2 +- src/stories/dumb-components/grid.stories.ts | 2 +- src/stories/dumb-components/header.stories.ts | 2 +- .../dumb-components/input-phone.stories.ts | 2 +- src/stories/dumb-components/loader.stories.ts | 2 +- .../no-rows-overlay.stories.ts | 2 +- src/stories/dumb-components/select.stories.ts | 2 +- .../dumb-components/system-fields.stories.ts | 2 +- .../dumb-components/tiny-mce.stories.ts | 2 +- src/stories/dumb-components/wizard.stories.ts | 2 +- src/stories/smart-components/adres.stories.ts | 2 +- .../oe-actor-widget.stories.ts | 2 +- .../smart-components/oe-zoneerder.stories.ts | 2 +- src/utils/openlayers/oe-ol-geolocate.ts | 8 ++--- 33 files changed, 65 insertions(+), 76 deletions(-) diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index df47aa9..407ca25 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -5,26 +5,19 @@ repos: - id: check-yaml - id: end-of-file-fixer - id: trailing-whitespace - - repo: https://github.com/pre-commit/mirrors-prettier - rev: v3.0.0-alpha.9-for-vscode + - repo: local hooks: - id: prettier - additional_dependencies: - - prettier@3.2.3 + name: run format + language: system + entry: bash -c 'yarn format' + pass_filenames: false types_or: [ts, javascript, scss, css, yaml, json, vue] - - repo: https://github.com/pre-commit/mirrors-eslint - rev: v8.56.0 + - repo: local hooks: - - id: eslint - additional_dependencies: - - eslint@8.56.0 - - eslint-config-prettier@8.8.0 - - eslint-import-resolver-typescript@3.5.5 - - eslint-plugin-cypress@2.12.1 - - eslint-plugin-import@2.27.5 - - eslint-plugin-prettier@5.1.3 - - eslint-plugin-vue@9.11.0 - - '@vue/eslint-config-prettier@7.1.0' - - '@vue/eslint-config-typescript@11.0.2' - files: \.[jt]sx|\.vue?$ # *.js, *.jsx, *.ts, *.tsx and *.vue - types: [file] + - id: lint + name: run lint + language: system + entry: bash -c 'yarn lint' + pass_filenames: false + types_or: [ts, javascript, scss, css, yaml, json, vue] diff --git a/src/__tests__/InputPhone.cy.ts b/src/__tests__/InputPhone.cy.ts index 68189ba..6debdc6 100644 --- a/src/__tests__/InputPhone.cy.ts +++ b/src/__tests__/InputPhone.cy.ts @@ -1,6 +1,6 @@ -import type { CountryCode } from 'libphonenumber-js'; import { defineComponent, ref } from 'vue'; import InputPhone from '@components/dumb/InputPhone.vue'; +import type { CountryCode } from 'libphonenumber-js'; const TestComponent = defineComponent({ components: { InputPhone }, diff --git a/src/__tests__/OeZoneerder.cy.ts b/src/__tests__/OeZoneerder.cy.ts index 8bdd05a..fd9ac22 100644 --- a/src/__tests__/OeZoneerder.cy.ts +++ b/src/__tests__/OeZoneerder.cy.ts @@ -1,8 +1,8 @@ /* eslint-disable vue/one-component-per-file */ import { defineComponent } from 'vue'; import { LayerType } from '@/models'; -import type { OeZoneerderProps } from '@/models'; import { OeZoneerder } from '@components/smart'; +import type { OeZoneerderProps } from '@/models'; describe('OeZoneerder', () => { describe('default', () => { diff --git a/src/components/dumb/OeInventarisLoadedLink.vue b/src/components/dumb/OeInventarisLoadedLink.vue index 971587c..2510345 100644 --- a/src/components/dumb/OeInventarisLoadedLink.vue +++ b/src/components/dumb/OeInventarisLoadedLink.vue @@ -3,11 +3,11 @@