Merge pull request #40 from OpenWebconcept/feature/PC-108-43/ContactForm

feature/PC-108-43/ContactForm
OpenWebconcept · Mar 5, 2024 · d94516d · d94516d
2 parents a730597 + 9325151
commit d94516d
Show file tree

Hide file tree

Showing 24 changed files with 291 additions and 147 deletions.
diff --git a/src/components/ApplicationMessage.vue b/src/components/ApplicationMessage.vue
@@ -12,7 +12,12 @@ const props = defineProps({
   messageType: {
     type: String as PropType<"error" | "confirm" | "warning" | "info">,
     validator: (value) => {
-      return value == "error" || value == "confirm" || value == "warning" || value == "info";
+      return (
+        value == "error" ||
+        value == "confirm" ||
+        value == "warning" ||
+        value == "info"
+      );
     },
     default: "confirm",
   },
@@ -50,7 +55,7 @@ article {
 
 .info {
   background-color: var(--color-info);
-  color: black
+  color: black;
 }
 
 .fade {

diff --git a/src/components/SearchCombobox.vue b/src/components/SearchCombobox.vue
@@ -2,7 +2,6 @@
   <input
     v-bind="$attrs"
     :id="inputId"
-    :required="required"
     type="search"
     autocomplete="off"
     role="combobox"

diff --git a/src/features/contactmoment/service.ts b/src/features/contactmoment/service.ts
@@ -79,25 +79,30 @@ export async function koppelKlant({
     _klantId = await getAnonymousUserId(); // we're setting the "klant" to an anonymous one which is readily available in the data set
   }
 
-  return fetchLoggedIn(window.gatewayBaseUri + "/api/kic/v1/klantcontactmomenten", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      klant: _klantId,
-      contactmoment: contactmomentId,
-      rol: "gesprekspartner",
-    }),
-  }).then(throwIfNotOk) as Promise<void>;
+  return fetchLoggedIn(
+    window.gatewayBaseUri + "/api/kic/v1/klantcontactmomenten",
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        klant: _klantId,
+        contactmoment: contactmomentId,
+        rol: "gesprekspartner",
+      }),
+    }
+  ).then(throwIfNotOk) as Promise<void>;
 }
 
 export function useContactverzoekenByKlantId(
   id: Ref<string>,
   page: Ref<number>
 ) {
   function getUrl() {
-    const url = new URL(window.gatewayBaseUri + "/api/kic/v1/klantcontactmomenten");
+    const url = new URL(
+      window.gatewayBaseUri + "/api/kic/v1/klantcontactmomenten"
+    );
     url.searchParams.set(
       "_order[embedded.contactmoment.registratiedatum]",
       "desc"
@@ -110,7 +115,6 @@ export function useContactverzoekenByKlantId(
     url.searchParams.set("_page", page.value.toString());
     url.searchParams.set("embedded.klant._self.id", id.value);
     url.searchParams.set("embedded.contactmoment.todo", "IS NOT NULL");
-    url.searchParams.set("klant", "IS NOT NULL");
     url.searchParams.set("contactmoment", "IS NOT NULL");
     return url.toString();
   }
@@ -127,7 +131,9 @@ export function useContactverzoekenByUserId(
   page: Ref<number>
 ) {
   function getUrl() {
-    const url = new URL(window.gatewayBaseUri + "/api/kic/v1/klantcontactmomenten");
+    const url = new URL(
+      window.gatewayBaseUri + "/api/kic/v1/klantcontactmomenten"
+    );
     url.searchParams.set(
       "_order[embedded.contactmoment.registratiedatum]",
       "desc"
@@ -140,7 +146,6 @@ export function useContactverzoekenByUserId(
     url.searchParams.set("_page", page.value.toString());
     url.searchParams.set("_self.owner.id", id.value);
     url.searchParams.set("embedded.contactmoment.todo", "IS NOT NULL");
-    url.searchParams.set("klant", "IS NOT NULL");
     url.searchParams.set("contactmoment", "IS NOT NULL");
     return url.toString();
   }

diff --git a/src/features/contactverzoek/ContactverzoekFormulier.vue b/src/features/contactverzoek/ContactverzoekFormulier.vue
@@ -6,28 +6,29 @@
       class="utrecht-form-label"
       v-if="afdelingen.success && afdelingen.data.length"
     >
-      Afdeling
+      <span class="required"> Contactverzoek versturen naar afdeling </span>
       <select
         v-model="afdeling"
         name="afdeling"
         class="utrecht-select utrecht-select--html-select"
+        :required="true"
       >
         <option
           v-for="afdeling in afdelingen.data"
           :key="afdeling.id"
           :value="afdeling.id"
+          :required="true"
         >
-          {{ afdeling.name }}
+          {{ afdeling.email }} | {{ afdeling.name }}
         </option>
       </select>
     </label>
 
     <label class="utrecht-form-label">
-      <span class="required">Contactverzoek versturen naar</span>
+      <span>Bevestiging mail versturen naar medewerker</span>
       <medewerker-search
         class="utrecht-textbox utrecht-textbox--html-input"
         v-model="medewerker"
-        :defaultValue="medewerker"
       />
     </label>
 
@@ -55,15 +56,29 @@ import MedewerkerSearch from "@/features/search/MedewerkerSearch.vue";
 import { computed } from "@vue/reactivity";
 import { useAfdelingen } from "./service";
 import SimpleSpinner from "@/components/SimpleSpinner.vue";
+import { useCurrentUser } from "@/features/login/service.ts";
 
 const props = defineProps<{
   huidigeVraag: Vraag;
 }>();
 
 const contactmomentStore = useContactmomentStore();
 
+const user = JSON.parse(JSON.stringify(useCurrentUser()));
+
+function medewerkerInit() {
+  if (window.sessionStorage.getItem("medewerkerInit" === "true")) return;
+  window.sessionStorage.setItem("medewerkerInit", "true");
+  contactmomentStore.updateContactverzoek({
+    ...props.huidigeVraag.contactverzoek,
+    medewerker: user.data.email,
+  });
+}
+
+const callMedewerkerInit = medewerkerInit();
+
 const medewerker = computed({
-  get: () => props.huidigeVraag.contactverzoek.medewerker,
+  get: () => props.huidigeVraag.contactverzoek.medewerker || user.data.email,
   set(medewerker) {
     if (!medewerker) return;
 

diff --git a/src/features/klant/bedrijf/BedrijfZoeker.vue b/src/features/klant/bedrijf/BedrijfZoeker.vue
@@ -3,8 +3,26 @@
     <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 :disabled="label === 'E-mailadres' || label === 'Telefoonnummer' || label === 'Postcode + Huisnummer' "  />
-        <span :class="{disabled: label === 'E-mailadres' || label === 'Telefoonnummer' || label === 'Postcode + Huisnummer'}">{{ label }}</span>
+        <input
+          type="radio"
+          :value="field"
+          v-model="state.field"
+          required
+          :disabled="
+            label === 'E-mailadres' ||
+            label === 'Telefoonnummer' ||
+            label === 'Postcode + Huisnummer'
+          "
+        />
+        <span
+          :class="{
+            disabled:
+              label === 'E-mailadres' ||
+              label === 'Telefoonnummer' ||
+              label === 'Postcode + Huisnummer',
+          }"
+          >{{ label }}</span
+        >
       </label>
     </fieldset>
     <fieldset class="search-bar">
@@ -39,12 +57,19 @@
       />
     </template>
     <application-message
-      v-if="bedrijven.error && bedrijven.error.message === 'Empty Results' || bedrijven.error.message === '404'"
+      v-if="
+        (bedrijven.error && bedrijven.error.message === 'Empty Results') ||
+        bedrijven.error.message === '404'
+      "
       messageType="info"
       message="Geen resultaten gevonden"
     />
     <application-message
-      v-if="bedrijven.error && bedrijven.error.message !== 'Empty Results' && bedrijven.error.message !== '404'"
+      v-if="
+        bedrijven.error &&
+        bedrijven.error.message !== 'Empty Results' &&
+        bedrijven.error.message !== '404'
+      "
       messageType="error"
       message="Er is een fout opgetreden"
     />

diff --git a/src/features/klant/bedrijf/HandelsregisterGegevens.vue b/src/features/klant/bedrijf/HandelsregisterGegevens.vue
@@ -1,9 +1,9 @@
 <template>
   <article class="details-block">
     <utrecht-heading :level="2"> Gegevens Handelsregister</utrecht-heading>
-    
+
     <div v-for="(bedrijf, index) in bedrijven.page">
-      <dl  >
+      <dl>
         <dt>Bedrijfsnaam</dt>
         <dd>{{ bedrijf.bedrijfsnaam }}</dd>
         <dt>KvK-nummer</dt>
@@ -34,7 +34,10 @@
         <dt>Plaats</dt>
         <dd>{{ bedrijf.woonplaats }}</dd>
       </dl>
-      <hr v-if="index + 1 !== bedrijven?.page?.length" class="utrecht-separator separator"/>
+      <hr
+        v-if="index + 1 !== bedrijven?.page?.length"
+        class="utrecht-separator separator"
+      />
     </div>
   </article>
 </template>
@@ -47,10 +50,8 @@ defineProps<{ bedrijven: Bedrijf }>();
 </script>
 
 <style scoped lang="scss">
-
 .separator {
   margin-block-start: 15px;
   margin-block-end: 15px;
 }
-   
 </style>
diff --git a/src/features/klant/bedrijf/service.ts b/src/features/klant/bedrijf/service.ts
@@ -124,8 +124,7 @@ export const useBedrijfByVestigingsnummer = (
     return url && url + "_single";
   };
 
-  const fetcher = (url: string) =>
-    searchBedrijvenInHandelsRegister(url);
+  const fetcher = (url: string) => searchBedrijvenInHandelsRegister(url);
 
   return ServiceResult.fromFetcher(getUrl, fetcher, {
     getUniqueId,

diff --git a/src/features/klant/persoon/PersoonZoeker.vue b/src/features/klant/persoon/PersoonZoeker.vue
@@ -56,12 +56,19 @@
         />
       </template>
       <application-message
-        v-if="klanten.error && klanten.error.message === `Empty Results` || klanten.error.message === `404`"
+        v-if="
+          (klanten.error && klanten.error.message === `Empty Results`) ||
+          klanten.error.message === `404`
+        "
         messageType="info"
         message="Geen resultaten gevonden"
       />
       <application-message
-        v-if="klanten.error && klanten.error.message !== `Empty Results` && klanten.error.message !== '404'"
+        v-if="
+          klanten.error &&
+          klanten.error.message !== `Empty Results` &&
+          klanten.error.message !== '404'
+        "
         messageType="error"
         message="Er is een fout opgetreden"
       />
@@ -82,12 +89,19 @@
         />
       </template>
       <application-message
-        v-if="personen.error && personen.error.message === `Empty Results` || personen.error.message === `404`"
+        v-if="
+          (personen.error && personen.error.message === `Empty Results`) ||
+          personen.error.message === `404`
+        "
         messageType="info"
         message="Geen resultaten gevonden"
       />
       <application-message
-        v-if="personen.error && personen.error.message !== `Empty Results` && personen.error.message !== `404`"
+        v-if="
+          personen.error &&
+          personen.error.message !== `Empty Results` &&
+          personen.error.message !== `404`
+        "
         messageType="error"
         message="Er is een fout opgetreden"
       />

diff --git a/src/features/klant/persoon/service.ts b/src/features/klant/persoon/service.ts
@@ -16,7 +16,8 @@ import { mutate } from "swrv";
 import type { Ref } from "vue";
 import type { Persoon } from "./types";
 
-const personenRootUrl = window.gatewayBaseUri + "/api/brp_proxy/ingeschrevenpersonen";
+const personenRootUrl =
+  window.gatewayBaseUri + "/api/brp_proxy/ingeschrevenpersonen";
 
 type QueryParam = [string, string][];
 
@@ -48,17 +49,11 @@ export function persoonQuery<K extends PersoonSearchField>(
 const queryDictionary: PersoonQueryParams = {
   bsn: (search) => [["burgerservicenummer", search]],
   geboortedatumAchternaam: (search) => [
-    [
-      "geboorte__datum",
-      formatIsoDate(search.geboortedatum),
-    ],
+    ["geboorte__datum", formatIsoDate(search.geboortedatum)],
     ["naam__geslachtsnaam", search.achternaam],
   ],
   postcodeHuisnummer: ({ postcode, huisnummer }) => [
-    [
-      "verblijfplaats__postcode",
-      `${postcode.numbers}${postcode.digits}`,
-    ],
+    ["verblijfplaats__postcode", `${postcode.numbers}${postcode.digits}`],
 
     ["verblijfplaats__huisnummer", huisnummer],
   ],

diff --git a/src/features/login/service.ts b/src/features/login/service.ts
@@ -7,10 +7,12 @@ const anonymousUser = Object.freeze({
   isLoggedIn: false,
 });
 
-async function fetchUser(url: string): Promise<User> {
+export async function fetchUser(url: string): Promise<User> {
   const response = await fetch(url, {
     headers: {
-      Authorization: `Bearer ${Cookies.get("jwt") ?? window.sessionStorage.getItem("jwt")}`,
+      Authorization: `Bearer ${
+        Cookies.get("jwt") ?? window.sessionStorage.getItem("jwt")
+      }`,
     },
   });
 
@@ -45,6 +47,6 @@ export const logOut = () =>
     } else {
       Cookies.remove("jwt");
       Cookies.remove("userId");
-      window.sessionStorage.removeItem("jwt")
+      window.sessionStorage.removeItem("jwt");
     }
   });
diff --git a/src/features/search/MedewerkerSearch.vue b/src/features/search/MedewerkerSearch.vue
@@ -7,7 +7,6 @@
       :result="result"
       :list-items="datalistItems"
       :exact-match="true"
-      :required="true"
     />
   </div>
 </template>

diff --git a/src/features/shared/get-contactmomenten-service.ts b/src/features/shared/get-contactmomenten-service.ts
@@ -110,7 +110,9 @@ export function useContactmomentenByKlantId(
   page: Ref<number>
 ) {
   function getUrl() {
-    const url = new URL(window.gatewayBaseUri + "/api/kic/v1/klantcontactmomenten");
+    const url = new URL(
+      window.gatewayBaseUri + "/api/kic/v1/klantcontactmomenten"
+    );
     url.searchParams.set(
       "_order[embedded.contactmoment.registratiedatum]",
       "desc"
@@ -135,7 +137,9 @@ export function useContactmomentenByKlantId(
 
 export function useContactmomentenByUserId(id: Ref<string>, page: Ref<number>) {
   function getUrl() {
-    const url = new URL(window.gatewayBaseUri + "/api/kic/v1/klantcontactmomenten");
+    const url = new URL(
+      window.gatewayBaseUri + "/api/kic/v1/klantcontactmomenten"
+    );
 
     url.searchParams.set(
       "_order[embedded.contactmoment.registratiedatum]",