From 5f75e764e463355f8866e53aa34ba9890ae7e510 Mon Sep 17 00:00:00 2001
From: Axel Verstappen <axel.verstappen@gmail.com>
Date: Wed, 29 Jan 2025 10:04:19 +0100
Subject: [PATCH] #358 added gewest prop to FilterGemeente component to limit
 gemeenten shown if needed

---
 .gitignore                                     |  3 +++
 src/components/smart/FilterGemeente.vue        | 18 ++++++++++++++++--
 src/models/filter-input.ts                     |  2 ++
 .../filter-gemeente.stories.ts                 | 18 +++++++++++++++++-
 4 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index e9b024d1..2ad52560 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,3 +24,6 @@ typings/
 dist/*
 .DS_Store
 storybook-static/*
+
+# cypress
+cypress/screenshots
diff --git a/src/components/smart/FilterGemeente.vue b/src/components/smart/FilterGemeente.vue
index 58e0e127..dc91b0c1 100644
--- a/src/components/smart/FilterGemeente.vue
+++ b/src/components/smart/FilterGemeente.vue
@@ -22,13 +22,14 @@
 <script setup lang="ts">
 import { VlMultiselect } from '@govflanders/vl-ui-design-system-vue3';
 import { computed, onBeforeMount, ref } from 'vue';
+import { type IFilterGemeenteProps, Niscode } from '@models/index';
 import { CrabApiService } from '@services/crab-api.service';
-import type { IFilterGemeenteProps } from '@models/index';
 import type { IGemeente } from '@models/locatie';
 
 const props = withDefaults(defineProps<IFilterGemeenteProps>(), {
   api: '',
   value: undefined,
+  gewest: undefined,
 });
 const emit = defineEmits(['update:value']);
 
@@ -42,6 +43,19 @@ const gemeenten = ref<IGemeente[]>([]);
 const customGemeenteLabel = (option: IGemeente) => option.naam;
 
 onBeforeMount(async () => {
-  gemeenten.value = await crabApiService.getGemeenten();
+  const data = await crabApiService.getGemeenten();
+  switch (props.gewest) {
+    case Niscode.VlaamsGewest:
+      gemeenten.value = crabApiService.vlaamseGemeenten;
+      break;
+    case Niscode.WaalsGewest:
+      gemeenten.value = crabApiService.waalseGemeenten;
+      break;
+    case Niscode.BrusselsHoofdstedelijkGewest:
+      gemeenten.value = crabApiService.brusselseGemeenten;
+      break;
+    default:
+      gemeenten.value = data;
+  }
 });
 </script>
diff --git a/src/models/filter-input.ts b/src/models/filter-input.ts
index 55247a98..0aea8383 100644
--- a/src/models/filter-input.ts
+++ b/src/models/filter-input.ts
@@ -1,4 +1,5 @@
 import type { IGemeente } from './locatie';
+import { Niscode } from './niscode.enum';
 
 export type TFilterInput = string | IGemeente;
 
@@ -43,6 +44,7 @@ export interface IFilterInputRadioProps {
 export interface IFilterGemeenteProps {
   api: string;
   value?: string;
+  gewest?: Niscode;
 }
 
 export interface IFilterActorProps {
diff --git a/src/stories/smart-components/filter-gemeente.stories.ts b/src/stories/smart-components/filter-gemeente.stories.ts
index a27ccb5e..3918ab49 100644
--- a/src/stories/smart-components/filter-gemeente.stories.ts
+++ b/src/stories/smart-components/filter-gemeente.stories.ts
@@ -2,6 +2,7 @@ import '@/scss/main.scss';
 import FilterGemeente from '@components/smart/FilterGemeente.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
 import type { IGemeente } from '@models/locatie';
+import { Niscode } from '@models/niscode.enum';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 const meta: Meta<typeof FilterGemeente> = {
@@ -20,12 +21,20 @@ const meta: Meta<typeof FilterGemeente> = {
   },
   tags: ['autodocs'],
   argTypes: {
+    gewest: {
+      control: 'text',
+      description: 'Gewest niscode',
+      table: {
+        type: { summary: 'Niscode' },
+        defaultValue: { summary: undefined },
+      },
+    },
     value: {
       control: 'text',
       description: 'Current niscode',
       table: {
         type: { summary: 'string' },
-        defaultValue: { summary: '' },
+        defaultValue: { summary: undefined },
       },
     },
     api: {
@@ -72,3 +81,10 @@ export const Default: Story = {
     api: 'https://test-geo.onroerenderfgoed.be/',
   },
 };
+
+export const WithGewestConstraint: Story = {
+  args: {
+    api: 'https://test-geo.onroerenderfgoed.be/',
+    gewest: Niscode.VlaamsGewest,
+  },
+};