885: fix, adds autocomplete operator edit in AgentOrganisationDetails

.gitignore

@@ -47,5 +47,8 @@ dev/
 dev.*
 .env.local
 
+# claude code local worktree scratch
+.claude/worktrees/
+
 # prettier
 .prettierignore

public/locales/de/translations.json

@@ -1250,8 +1250,14 @@
         "validation": {
           "required": "Dieses Feld ist erforderlich",
           "websiteInvalid": "Webseite muss mit http:// oder https:// beginnen",
+          "operatorRequired": "Es sind mindestens 3 Zeichen erforderlich.",
+          "operatorHint": "Geben Sie die ersten drei Buchstaben ein, damit die Liste angezeigt wird, und wählen Sie aus der Liste aus. Wenn die Liste nicht erscheint, ist der Träger ungültig.",
+          "operatorInvalid": "Ungültiger Träger. Bitte wählen Sie aus der Liste oder versuchen Sie es mit einem anderen Träger.",
           "clientLanguagesRequired": "Mindestens eine Sprache ist erforderlich"
         },
+        "placeholders": {
+          "operatorPlaceholder": "Geben Sie die ersten drei Buchstaben des Trägers ein"
+        },
         "addressStreet": "Straße",
         "addressPostcode": "PLZ"
       },

public/locales/en/translations.json

@@ -1238,8 +1238,14 @@
         "validation": {
           "required": "This field is required",
           "websiteInvalid": "Website must start with http:// or https://",
+          "operatorRequired": "A minimum of 3 characters is needed",
+          "operatorHint": "Type first three letters for the list to appear and select from the list. If the list doesn't appear, Operator is invalid.",
+          "operatorInvalid": "Operator invalid. Either select from the list or try another Operator",
           "clientLanguagesRequired": "At least one language is required"
         },
+        "placeholders": {
+          "operatorPlaceholder": "Type the first three letters of the operator"
+        },
         "addressStreet": "Street",
         "addressPostcode": "Postcode"
       },

src/components/Dashboard/Profile/sections/OrganisationDetails/OrganisationDetails.tsx

@@ -18,6 +18,7 @@ import { apiLanguagesToFormValues, toLanguagesForForm } from "./formatters";
 import { OrganisationDetailsDisplay } from "./OrganisationDetailsDisplay";
 import { OrganisationDetailsEdit } from "./OrganisationDetailsEdit";
 import { createOrganisationDetailsSchema, OrganisationDetailsFormData } from "./organisationDetailsSchema";
+import { useGetOrganization } from "@/hooks/useGetOrganization";
 
 type Props = {
   agent: ApiAgentProfileGet;
@@ -35,8 +36,10 @@ export const OrganisationDetails = forwardRef<EditableSectionRef, Props>(functio
   const { data: apiLanguages } = useApiLanguages();
   const { data: apiAgentTypes = [] } = useApiAgentTypes();
   const { data: apiServices = [] } = useApiServices();
+  const { data: organizations = [] } = useGetOrganization();
   const agentTypeMapping = useMemo(() => createMapping(apiAgentTypes), [apiAgentTypes]);
   const serviceMapping = useMemo(() => createMapping(apiServices), [apiServices]);
+  const organizationMapping = useMemo(() => createMapping(organizations), [organizations]);
 
   const details = agent.agentDetails;
   const languagesForForm = toLanguagesForForm(apiLanguages, i18n.language);
@@ -96,6 +99,7 @@ export const OrganisationDetails = forwardRef<EditableSectionRef, Props>(functio
     const serviceIds = values.services
       .map((title) => serviceMapping.titleToId[title])
       .filter((id): id is number => id !== undefined);
+    const organizationId = organizationMapping.titleToId[values.operator];
 
     updateOrganization(
       {
@@ -106,6 +110,7 @@ export const OrganisationDetails = forwardRef<EditableSectionRef, Props>(functio
         addressPostcode: values.addressPostcode,
         ...(typeId !== undefined && { typeId }),
         serviceIds,
+        ...(organizationId !== undefined && { organizationId }),
       },
       {
         onSuccess: () => {
@@ -124,6 +129,7 @@ export const OrganisationDetails = forwardRef<EditableSectionRef, Props>(functio
             languagesForForm={languagesForForm}
             organizationTypeOptions={apiAgentTypes.map((agentType) => agentType.title)}
             servicesOptions={apiServices.map((service) => service.title)}
+            operatorOptions={organizations?.map((org) => org.title)}
             onCancel={handleCancel}
             onSubmit={handleSubmit(onSubmit)}
           />

src/components/Dashboard/Profile/sections/OrganisationDetails/OrganisationDetailsDisplay.tsx

@@ -16,7 +16,6 @@ export const OrganisationDetailsDisplay = ({ rawClientLanguages, address }: Prop
   const { t } = useTranslation();
   const { watch } = useFormContext<OrganisationDetailsFormData>();
   const values = watch();
-
   return (
     <FormDetails data-testid="organisation-details-display">
       <EditableField

src/components/Dashboard/Profile/sections/OrganisationDetails/OrganisationDetailsEdit.tsx

@@ -7,13 +7,15 @@ import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { FormButtonRow, FormDetails } from "../shared/styles";
 import { OrganisationDetailsFormData } from "./organisationDetailsSchema";
+import { useCallback } from "react";
 
 const i18nPrefix = "dashboard.agentProfile.organisationDetails";
 
 type Props = {
   languagesForForm: Option[];
   organizationTypeOptions: string[];
   servicesOptions: string[];
+  operatorOptions: string[];
   onCancel: () => void;
   onSubmit: () => void;
 };
@@ -22,6 +24,7 @@ export const OrganisationDetailsEdit = ({
   languagesForForm,
   organizationTypeOptions,
   servicesOptions,
+  operatorOptions,
   onCancel,
   onSubmit,
 }: Props) => {
@@ -31,6 +34,16 @@ export const OrganisationDetailsEdit = ({
     formState: { errors, isDirty, isValid },
   } = useFormContext<OrganisationDetailsFormData>();
 
+  const displayOperators = useCallback(
+    (value: string) => {
+      if (value?.length >= 3) {
+        return operatorOptions.filter((op) => op.toLowerCase().includes(value.toLowerCase()));
+      } else {
+        return [];
+      }
+    },
+    [operatorOptions],
+  );
   return (
     <>
       <FormDetails data-testid="organisation-details-edit">
@@ -123,14 +136,19 @@ export const OrganisationDetailsEdit = ({
           name="operator"
           control={control}
           render={({ field }) => (
-            <EditableField
-              mode="edit"
-              type="text"
-              label={t(`${i18nPrefix}.operator`)}
-              value={field.value}
-              setValue={field.onChange}
-              errorMessage={errors.operator?.message}
-            />
+            <>
+              <EditableField
+                mode="edit"
+                type="autocomplete"
+                label={t(`${i18nPrefix}.operator`)}
+                value={field.value}
+                setValue={field.onChange}
+                errorMessage={errors.operator?.message}
+                options={displayOperators(field.value)}
+                placeholder={t(`${i18nPrefix}.placeholders.operatorPlaceholder`)}
+                hint={t(`dashboard.agentProfile.organisationDetails.validation.operatorHint`)}
+              />
+            </>
           )}
         />
         <Controller

src/components/Dashboard/common/statusMaps.ts

@@ -1,4 +1,3 @@
-import type React from "react";
 import {
   BinocularsIcon,
   ChartLineIcon,
@@ -12,6 +11,7 @@ import {
   StopCircleIcon,
 } from "@phosphor-icons/react";
 import { AgentEngagementStatusType, AgentTrustType, AgentVolunteerSearchType } from "need4deed-sdk";
+import type React from "react";
 
 export type StatusValue = AgentEngagementStatusType | AgentVolunteerSearchType | AgentTrustType;
 

src/components/EditableField/EditableField.tsx

@@ -264,7 +264,7 @@ const StepperValue = styled.span`
   user-select: none;
 `;
 
-type EditableFieldType = "text" | "textarea" | "number" | "stepper" | "checkbox-list" | "radio-list";
+type EditableFieldType = "text" | "textarea" | "number" | "stepper" | "checkbox-list" | "radio-list" | "autocomplete";
 
 export interface EditableFieldRef<T> {
   getValue: () => T;
@@ -559,6 +559,72 @@ export const EditableField = forwardRef(function EditableField<T extends string
             )}
           </DropdownWrapper>
         )}
+
+        {type === "autocomplete" && (
+          <DropdownWrapper ref={wrapperRef}>
+            <DropdownButton
+              $hasError={!!errorMessage}
+              onClick={() => {
+                if (localValue) setOpen((o) => !o);
+              }}
+            >
+              <InputWrapper>
+                <input
+                  type="text"
+                  value={localValue}
+                  placeholder={placeholder}
+                  onChange={(e) => {
+                    const v = e.target.value as T;
+                    setLocalValue(v);
+                    setValue(v);
+                    setOpen(true);
+                  }}
+                  onBlur={handleSubmit}
+                  onKeyDown={handleKeyDown}
+                  style={{ border: "none", padding: 0 }}
+                />
+                {Boolean(localValue) && (
+                  <ClearButton
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      const v = "" as T;
+                      setLocalValue(v);
+                      setValue(v);
+                      setOpen(false);
+                    }}
+                    style={{ alignSelf: "flex-start", marginTop: "0px", marginRight: "0px" }}
+                  >
+                    <XCircleIcon size={20} weight="bold" />
+                  </ClearButton>
+                )}
+              </InputWrapper>
+            </DropdownButton>
+
+            {open && (
+              <DropdownList>
+                {options.map((option) => {
+                  const isSelected = localValue === option;
+                  return (
+                    <OptionRow
+                      key={option}
+                      $isSelected={isSelected}
+                      onClick={() => {
+                        const v = option as T;
+                        setLocalValue(v);
+                        setValue(v);
+                        setOpen(false);
+                      }}
+                    >
+                      <input type="radio" name={label} value={option} checked={isSelected} onChange={() => {}} />
+                      <Text>{option}</Text>
+                    </OptionRow>
+                  );
+                })}
+              </DropdownList>
+            )}
+          </DropdownWrapper>
+        )}
       </FieldWrapper>
       {error && (
         <p style={{ color: "var(--editableField-error-color)", paddingLeft: "var(--editableField-error-paddingLeft)" }}>

src/hooks/useGetOrganization.ts

@@ -0,0 +1,19 @@
+import { ApiOrganizationGetList } from "need4deed-sdk";
+import { useGetQuery } from "./useGetQuery";
+import { apiPathOrganization, cacheTTL } from "@/config/constants";
+
+export const useGetOrganization = () => {
+  const { data, isLoading, isError, error } = useGetQuery<ApiOrganizationGetList[]>({
+    queryKey: ["organization"],
+    apiPath: `${apiPathOrganization}`,
+    staleTime: cacheTTL,
+    addLang: false,
+  });
+
+  return {
+    data,
+    isLoading,
+    isError,
+    error,
+  };
+};