added info alert

package.json

@@ -15,6 +15,7 @@
     "dompurify": "^2.3.8",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^3.1.2",
+    "lodash": "^4.17.21",
     "luxon": "^2.5.2",
     "moment": "^2.30.1",
     "nanoid": "^4.0.0",
@@ -29,6 +30,7 @@
     "@types/dompurify": "^2.3.3",
     "@types/js-cookie": "^3.0.3",
     "@types/jsdom": "^16.2.14",
+    "@types/lodash": "^4.14.202",
     "@types/node": "^16.11.27",
     "@utrecht/component-library-css": "1.0.0-alpha.361",
     "@utrecht/component-library-vue": "1.0.0-alpha.138",

src/assets/design-tokens.scss

@@ -12,6 +12,7 @@
     --color-error-hover: #f47171;
     --color-error-hover-text: var(--color-headings);
     --color-warning: orange;
+    --color-info: lightblue;
     --color-category-default: hsl(184, 54%, 70%);
     --color-category-website: hsl(285, 56%, 83%);
     --color-white: #fff;

src/components/ApplicationMessage.vue

@@ -10,9 +10,9 @@ import { defineProps, toRefs, onMounted, ref, type PropType } from "vue";
 const fade = ref(false);
 const props = defineProps({
   messageType: {
-    type: String as PropType<"error" | "confirm" | "warning">,
+    type: String as PropType<"error" | "confirm" | "warning" | "info">,
     validator: (value) => {
-      return value == "error" || value == "confirm" || value == "warning";
+      return value == "error" || value == "confirm" || value == "warning" || value == "info";
     },
     default: "confirm",
   },
@@ -48,6 +48,11 @@ article {
   background-color: var(--color-warning);
 }
 
+.info {
+  background-color: var(--color-info);
+  color: black
+}
+
 .fade {
   visibility: hidden;
   opacity: 0;

src/features/klant/bedrijf/BedrijfZoeker.vue

@@ -3,7 +3,7 @@
     <fieldset class="radio-group">
       <legend>Waar wil je op zoeken?</legend>
       <label v-for="(label, field) in labels" :key="field">
-        <input type="radio" :value="field" v-model="state.field" required />
+        <input type="radio" :value="field" v-model="state.field" required :disabled="label === 'E-mailadres' || label === 'Telefoonnummer' || label === 'Postcode + Huisnummer' "  />
         {{ label }}
       </label>
     </fieldset>
@@ -39,7 +39,12 @@
       />
     </template>
     <application-message
-      v-if="bedrijven.error"
+      v-if="bedrijven.error && bedrijven.error.message === 'Empty Results'"
+      messageType="info"
+      message="Geen resultaten gevonden"
+    />
+    <application-message
+      v-if="bedrijven.error && bedrijven.error.message !== 'Empty Results'"
       messageType="error"
       message="Er is een fout opgetreden"
     />

src/services/gateway.ts

@@ -1,4 +1,5 @@
 import type { Paginated } from "./pagination";
+import _ from "lodash"
 
 export async function parsePagination<T>(
   json: unknown,
@@ -7,6 +8,14 @@ export async function parsePagination<T>(
   const { results, limit, total, page, pages } = json as {
     [key: string]: unknown;
   };
+
+  if (
+    results === "" || _.isEmpty(results)
+  )
+    throw new Error(
+      "Empty Results"
+    );
+
   if (
     !Array.isArray(results) ||
     typeof limit !== "number" ||