Aanhef & Profiel Service Changes

Author: TijmenVDBrink

dependencies/profiel-service/openapi.yaml

@@ -2,15 +2,15 @@
 openapi: 3.1.0
 components:
   schemas:
-    AfdelingRequest:
+    DienstRequest:
       type: object
       required:
         - beschrijving
-      description: Request object voor het toevoegen van een afdeling aan een dienstverlener
+      description: Request object voor het toevoegen van een dienst aan een dienstverlener
       properties:
         beschrijving:
           type: string
-    AfdelingResponse:
+    DienstResponse:
       type: object
       properties:
         id:
@@ -24,6 +24,34 @@ components:
         - Email
         - Telefoonnummer
         - Adres
+    Taal:
+      type: string
+      enum:
+        - Nederlands
+        - Engels
+        - Fries
+        - Papiaments
+        - Nedersaksisch
+        - Limburgs
+    ScopeRequest:
+      type: object
+      description: Scope waarop een contactgegeven of voorkeur betrekking heeft
+      properties:
+        scopeIdentificatieType:
+          $ref: "#/components/schemas/IdentificatieType"
+        scopeIdentificatieNummer:
+          type: string
+        dienstId:
+          type: integer
+          format: int64
+    ScopeResponse:
+      type: object
+      description: Scope waarop een contactgegeven of voorkeur betrekking heeft
+      properties:
+        partij:
+          $ref: "#/components/schemas/IdentificatieResponse"
+        dienst:
+          $ref: "#/components/schemas/DienstResponse"
     ContactgegevenRequest:
       type: object
       required:
@@ -33,13 +61,16 @@ components:
         Request object voor het toevoegen van een contactgegeven aan een
         partij
       properties:
-        afdelingId:
-          type: integer
-          format: int64
         type:
           $ref: "#/components/schemas/ContactType"
         waarde:
           type: string
+        taal:
+          $ref: "#/components/schemas/Taal"
+        terAttentieVan:
+          type: string
+        scope:
+          $ref: "#/components/schemas/ScopeRequest"
     ContactgegevenResponse:
       type: object
       properties:
@@ -50,23 +81,30 @@ components:
           $ref: "#/components/schemas/ContactType"
         waarde:
           type: string
+        taal:
+          $ref: "#/components/schemas/Taal"
+        terAttentieVan:
+          type: string
         isGeverifieerd:
           type: boolean
-        afdeling:
-          $ref: "#/components/schemas/AfdelingResponse"
+        scope:
+          $ref: "#/components/schemas/ScopeResponse"
     ContactgegevenUpdateRequest:
       type: object
       required:
         - type
         - waarde
       properties:
-        afdelingId:
-          type: integer
-          format: int64
         type:
           $ref: "#/components/schemas/ContactType"
         waarde:
           type: string
+        taal:
+          $ref: "#/components/schemas/Taal"
+        terAttentieVan:
+          type: string
+        scope:
+          $ref: "#/components/schemas/ScopeRequest"
         id:
           type: integer
           format: int64
@@ -119,7 +157,7 @@ components:
           type: string
         dienstverlenerOin:
           type: string
-        afdelingBeschrijving:
+        dienstBeschrijving:
           type: string
     PartijResponse:
       type: object
@@ -149,6 +187,8 @@ components:
           $ref: "#/components/schemas/VoorkeurType"
         waarde:
           type: string
+        scope:
+          $ref: "#/components/schemas/ScopeRequest"
     VoorkeurResponse:
       type: object
       properties:
@@ -159,6 +199,8 @@ components:
           $ref: "#/components/schemas/VoorkeurType"
         waarde:
           type: string
+        scope:
+          $ref: "#/components/schemas/ScopeResponse"
     VoorkeurType:
       type: string
       enum:
@@ -167,6 +209,7 @@ components:
         - WebsiteThema
         - PostcodeInUwBuurt
         - ActueleOnderwerpVoorkeur
+        - Aanhef
     VoorkeurUpdateRequest:
       type: object
       required:
@@ -177,12 +220,14 @@ components:
           $ref: "#/components/schemas/VoorkeurType"
         waarde:
           type: string
+        scope:
+          $ref: "#/components/schemas/ScopeRequest"
         id:
           type: integer
           format: int64
 tags:
   - name: Dienstverlener
-    description: Endpoints voor het beheren van dienstverleners en afdelingen
+    description: Endpoints voor het beheren van dienstverleners en diensten
   - name: EmailVerificatie
     description: Endpoints voor het verifiëren van emails
   - name: Profiel
@@ -192,7 +237,7 @@ paths:
     put:
       summary: Update contactgegeven van een partij
       description:
-        "Werk type, waarde en afdeling van een contactgegeven bij. Identificatie\
+        "Werk type, waarde en scope van een contactgegeven bij. Identificatie\
         \ kan niet aangepast worden."
       tags:
         - Profiel
@@ -299,10 +344,10 @@ paths:
         "400":
           description: Bad Request
       summary: Add Dienstverlener
-  /api/profielservice/v1/dienstverlener/{DienstverlenerNaam}/afdelingen:
+  /api/profielservice/v1/dienstverlener/{DienstverlenerNaam}/diensten:
     post:
-      summary: Voegt een afdeling toe aan een dienstverlener
-      description: Voegt een nieuwe afdeling toe met beschrijving
+      summary: Voegt een dienst toe aan een dienstverlener
+      description: Voegt een nieuwe dienst toe met beschrijving
       tags:
         - Dienstverlener
       parameters:
@@ -315,11 +360,11 @@ paths:
         content:
           application/json:
             schema:
-              $ref: "#/components/schemas/AfdelingRequest"
+              $ref: "#/components/schemas/DienstRequest"
         required: true
       responses:
         "201":
-          description: Afdeling succesvol toegevoegd
+          description: Dienst succesvol toegevoegd
         "404":
           description: Dienstverlener niet gevonden
         "400":
@@ -340,7 +385,7 @@ paths:
           content:
             application/json:
               schema: {}
-      summary: Get Afdelingen Dienstverlener
+      summary: Get Diensten Dienstverlener
   /api/profielservice/v1/emailverificatie:
     post:
       tags:
@@ -364,7 +409,7 @@ paths:
     put:
       summary: Update voorkeur van een partij
       description:
-        "Werk type, waarde en afdeling van een voorkeur bij. Identificatie\
+        "Werk type, waarde en scope van een voorkeur bij. Identificatie\
         \ kan niet aangepast worden."
       tags:
         - Profiel
@@ -469,7 +514,7 @@ paths:
           required: true
           schema:
             $ref: "#/components/schemas/IdentificatieType"
-        - name: afdelingBeschrijving
+        - name: dienstBeschrijving
           in: query
           schema:
             type: string

src/app/(private)/contactgegevens/[type]/_aanhefEditBox.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { components } from "@/network/profiel/generated";
+import { useUpdateVoorkeur } from "@/network/profiel/hooks/updateAanhefVoorkeur/useUpdateAanhefVoorkeur";
+import { EditIcon } from "@/components/icons/editIcon";
+import { useQueryClient } from "@tanstack/react-query";
+
+export const AanhefEditBox = ({
+  idenType,
+  idenValue,
+  voorkeur,
+}: {
+  idenType: "KVK" | "BSN";
+  idenValue: string;
+  voorkeur?: components["schemas"]["VoorkeurResponse"];
+}) => {
+  const [fieldState, setFieldState] = useState<"view" | "edit">("view");
+  const [errorMessage, setErrorMessage] = useState<string | undefined>();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { mutate } = useUpdateVoorkeur();
+  const queryClient = useQueryClient();
+
+  const [newValue, setNewValue] = useState(voorkeur?.waarde || "");
+
+  return (
+    <form
+      className="flex flex-col gap-3"
+      noValidate
+      onSubmit={(e) => {
+        e.preventDefault();
+
+        if (fieldState !== "edit") return;
+
+        setErrorMessage(undefined);
+        mutate(
+          {
+            identificatieNummer: idenValue,
+            identificatieType: idenType,
+            voorkeurType: "Aanhef",
+            waarde: newValue,
+            id: voorkeur?.id,
+          },
+          {
+            onSuccess: () => {
+              setFieldState("view");
+              queryClient.invalidateQueries({
+                queryKey: ["profiel", idenType, idenValue],
+              });
+            },
+            onError: () => {
+              setErrorMessage(
+                "Er is een fout opgetreden bij het opslaan. Probeer het opnieuw.",
+              );
+            },
+          },
+        );
+      }}
+    >
+      <div className="grid grid-cols-[2fr_3fr_100px] items-start gap-4">
+        <label htmlFor="field-aanhef" className="font-bold">
+          Aanhef
+        </label>
+        <div>
+          {fieldState === "edit" ? (
+            <div className="flex flex-col gap-2">
+              <input
+                ref={inputRef}
+                className="w-full border border-gray-300 bg-white p-1"
+                id="field-aanhef"
+                type="text"
+                placeholder="bv: Dhr. Jansen"
+                value={newValue}
+                onChange={(e) => setNewValue(e.target.value)}
+              />
+              {errorMessage && (
+                <span className="text-sm text-red-500">{errorMessage}</span>
+              )}
+            </div>
+          ) : newValue ? (
+            <span>{newValue}</span>
+          ) : (
+            <span className="text-neutral-500 italic">Niet opgegeven</span>
+          )}
+        </div>
+        <div>
+          {fieldState !== "edit" ? (
+            <button
+              type="button"
+              onClick={() => {
+                setFieldState("edit");
+                requestAnimationFrame(() => inputRef.current?.focus());
+              }}
+              className="text-primary ml-auto flex cursor-pointer items-center gap-2 hover:underline"
+            >
+              <EditIcon />
+              Aanpassen
+            </button>
+          ) : (
+            <div className="flex flex-col gap-0">
+              <button
+                type="submit"
+                className="text-primary ml-auto flex cursor-pointer items-center gap-2 hover:underline"
+              >
+                Opslaan
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  setFieldState("view");
+                  setErrorMessage(undefined);
+                  setNewValue(voorkeur?.waarde || "");
+                }}
+                className="text-primary ml-auto flex cursor-pointer items-center gap-2 hover:underline"
+              >
+                Annuleren
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </form>
+  );
+};