#358 added gewest prop to FilterGemeente component to limit gemeenten…

… shown if needed

.gitignore

@@ -24,3 +24,6 @@ typings/
 dist/*
 .DS_Store
 storybook-static/*
+
+# cypress
+cypress/screenshots

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>

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 {

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,
+  },
+};