Added ability to tie organizer to integration

app/Domain/Integrations/Controllers/IntegrationController.php

@@ -16,6 +16,7 @@
 use App\Domain\Integrations\FormRequests\StoreIntegrationRequest;
 use App\Domain\Integrations\FormRequests\StoreIntegrationUrlRequest;
 use App\Domain\Integrations\FormRequests\UpdateContactInfoRequest;
+use App\Domain\Integrations\FormRequests\UpdateIntegrationOrganizersRequest;
 use App\Domain\Integrations\FormRequests\UpdateIntegrationRequest;
 use App\Domain\Integrations\FormRequests\UpdateIntegrationUrlsRequest;
 use App\Domain\Integrations\FormRequests\UpdateOrganizationRequest;
@@ -292,12 +293,26 @@ public function updateOrganization(string $id, UpdateOrganizationRequest $reques
         );
     }
 
+    public function updateOrganizers(string $integrationId, UpdateIntegrationOrganizersRequest $request): RedirectResponse
+    {
+        $integration = $this->integrationRepository->getById(Uuid::fromString($integrationId));
+
+        $organizerIds = collect($integration->organizers())->map(fn (Organizer $organizer) => $organizer->organizerId);
+        $newOrganizers = array_filter(OrganizerMapper::map($request, $integrationId), static function (Organizer $organizer) use ($organizerIds) {
+            return !in_array($organizer->organizerId, $organizerIds->toArray(), true);
+        });
+
+        $this->organizerRepository->create(...$newOrganizers);
+
+        return Redirect::back();
+    }
+
     public function deleteOrganizer(string $integrationId, string $organizerId): RedirectResponse
     {
         $this->organizerRepository->delete(new Organizer(
             Uuid::uuid4(),
             Uuid::fromString($integrationId),
-            Uuid::fromString($organizerId)
+            $organizerId
         ));
 
         return Redirect::back();
@@ -388,7 +403,7 @@ private function guardUserIsContact(Request $request, string $integrationId): ?R
 
     public function getIntegrationOrganizersWithTestOrganizer(Integration $integration): Collection
     {
-        $organizerIds = collect($integration->organizers())->map(fn (Organizer $organizer) => $organizer->organizerId->toString());
+        $organizerIds = collect($integration->organizers())->map(fn (Organizer $organizer) => $organizer->organizerId);
         $uitpasOrganizers = $this->searchClient->findUiTPASOrganizers(...$organizerIds)->getMember()?->getItems();
 
         $organizers = collect($uitpasOrganizers)->map(function (SapiOrganizer $organizer) {

app/Domain/Integrations/FormRequests/RequestActivationRequest.php

@@ -24,10 +24,8 @@ public function rules(): array
     {
         $rules = collect([
             ...(new CreateOrganizationRequest())->rules(),
+            ...(new UpdateIntegrationOrganizersRequest())->rules(),
             'coupon' => ['nullable', 'string', 'max:255'],
-            'organizers' => ['required','array'],
-            'organizers.*.name' => ['required', 'string'],
-            'organizers.*.id' => ['required', 'string'],
         ]);
 
         if (!$this->isAccountingInfoRequired() || $this->isUITPAS()) {

app/Domain/Integrations/FormRequests/UpdateIntegrationOrganizersRequest.php

@@ -0,0 +1,19 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Domain\Integrations\FormRequests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+final class UpdateIntegrationOrganizersRequest extends FormRequest
+{
+    public function rules(): array
+    {
+        return [
+            'organizers' => ['required', 'array'],
+            'organizers.*.name' => ['required', 'string'],
+            'organizers.*.id' => ['required', 'string'],
+        ];
+    }
+}

app/Domain/Integrations/Mappers/OrganizerMapper.php

@@ -5,6 +5,7 @@
 namespace App\Domain\Integrations\Mappers;
 
 use App\Domain\Integrations\FormRequests\RequestActivationRequest;
+use App\Domain\Integrations\FormRequests\UpdateIntegrationOrganizersRequest;
 use App\Domain\Integrations\Organizer;
 use Ramsey\Uuid\Uuid;
 
@@ -13,7 +14,7 @@ final class OrganizerMapper
     /**
      * @return Organizer[]
      */
-    public static function map(RequestActivationRequest $request, string $id): array
+    public static function map(RequestActivationRequest|UpdateIntegrationOrganizersRequest $request, string $id): array
     {
         /**
          * @var Organizer[] $organizers
@@ -24,7 +25,7 @@ public static function map(RequestActivationRequest $request, string $id): array
             $organizers[] = new Organizer(
                 Uuid::uuid4(),
                 Uuid::fromString($id),
-                Uuid::fromString($organizer['id'])
+                $organizer['id']
             );
         }
 

app/Domain/Integrations/Models/OrganizerModel.php

@@ -23,7 +23,7 @@ public function toDomain(): Organizer
         return new Organizer(
             Uuid::fromString($this->id),
             Uuid::fromString($this->integration_id),
-            Uuid::fromString($this->organizer_id),
+            $this->organizer_id,
         );
     }
 }

app/Domain/Integrations/Organizer.php

@@ -11,7 +11,7 @@
     public function __construct(
         public UuidInterface $id,
         public UuidInterface $integrationId,
-        public UuidInterface $organizerId
+        public string $organizerId
     ) {
     }
 }

app/Domain/Integrations/Repositories/EloquentOrganizerRepository.php

@@ -17,7 +17,7 @@ public function create(Organizer ...$organizers): void
                 OrganizerModel::query()->create([
                     'id' => $organizer->id->toString(),
                     'integration_id' => $organizer->integrationId->toString(),
-                    'organizer_id' => $organizer->organizerId->toString(),
+                    'organizer_id' => $organizer->organizerId,
                 ]);
             }
         });
@@ -26,7 +26,7 @@ public function create(Organizer ...$organizers): void
     public function delete(Organizer $organizer): void
     {
         OrganizerModel::query()
-            ->where('organizer_id', $organizer->organizerId->toString())
+            ->where('organizer_id', $organizer->organizerId)
             ->where('integration_id', $organizer->integrationId->toString())
             ->delete();
     }

app/Nova/Actions/ActivateUitpasIntegration.php

@@ -45,12 +45,11 @@ public function handle(ActionFields $fields, Collection $integrations): ActionRe
         $organizerArray = array_map('trim', explode(',', $organizers));
 
         foreach ($organizerArray as $organizer) {
-            $organizerId = Uuid::fromString($organizer);
             $this->organizerRepository->create(
                 new Organizer(
                     Uuid::uuid4(),
                     Uuid::fromString($integration->id),
-                    $organizerId
+                    $organizer
                 )
             );
         }

app/Nova/Actions/AddOrganizer.php

@@ -35,13 +35,12 @@ public function handle(ActionFields $fields, Collection $integrations): ActionRe
 
         /** @var string $organizationIdAsString */
         $organizationIdAsString = $fields->get('organizer_id');
-        $organizationId = Uuid::fromString($organizationIdAsString);
 
         $this->organizerRepository->create(
             new Organizer(
                 Uuid::uuid4(),
                 Uuid::fromString($integration->id),
-                $organizationId
+                $organizationIdAsString
             )
         );
 

database/migrations/2024_07_10_120617_update_organizer_id_to_text.php

@@ -0,0 +1,29 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class () extends Migration {
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('organizers', function (Blueprint $table) {
+            $table->char('organizer_id', 36)->change();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('organizers', function (Blueprint $table) {
+            $table->uuid('organizer_id')->change();
+        });
+    }
+};

resources/translations/en.json

@@ -233,6 +233,9 @@
       "title": "Organizers",
       "description": "Below you see an overview of the UiTdatabank organizers for which you can execute actions in the UiTPAS API.",
       "add": "Add organizer",
+      "update_dialog": {
+        "question": "Select the UiTdatabank organizers for which you can execute actions in UiTPAS."
+      },
       "delete_dialog": {
         "title": "Remove organizer",
         "question": "Are you sure you want to remove {{name}} from your integration?"

resources/translations/nl.json

@@ -233,6 +233,9 @@
       "title": "Organisaties",
       "description": "Hieronder vind je een overzicht van de UiTdatabank organisaties waarvoor je acties kan uitvoeren in de UiTPAS API.",
       "add": "Organisatie toevoegen",
+      "update_dialog": {
+        "question": "Geef de UiTdatabank-organisaties op waarvoor je acties in UiTPAS wilt uitvoeren."
+      },
       "delete_dialog": {
         "title": "Organisatie verwijderen",
         "question": "Ben je zeker dat je {{name}} wilt verwijderen van je integratie?"

resources/ts/Components/ActivationDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useRef, useState } from "react";
+import React, { useContext } from "react";
 import { Dialog } from "./Dialog";
 import { ButtonSecondary } from "./ButtonSecondary";
 import { ButtonPrimary } from "./ButtonPrimary";
@@ -13,12 +13,9 @@ import type { PricingPlan } from "../hooks/useGetPricingPlans";
 import { formatCurrency } from "../utils/formatCurrency";
 import { Heading } from "./Heading";
 import { CouponInfoContext } from "../Context/CouponInfo";
-import { faTrash } from "@fortawesome/free-solid-svg-icons";
-import { ButtonIcon } from "./ButtonIcon";
-import { debounce } from "lodash";
 import type { Organization } from "../types/Organization";
 import type { UiTPASOrganizer } from "../types/UiTPASOrganizer";
-import { Alert } from "./Alert";
+import { OrganizersDatalist } from "./Integrations/Detail/OrganizersDatalist";
 
 const PriceOverview = ({
   coupon,
@@ -137,87 +134,10 @@ export const ActivationDialog = ({
   const isBillingInfoAndPriceOverviewVisible =
     type !== IntegrationType.EntryApi && type !== IntegrationType.UiTPAS;
 
-  const [isSearchListVisible, setIsSearchListVisible] = useState(false);
-  const [organizerList, setOrganizerList] = useState<UiTPASOrganizer[]>([]);
-  const [organizerError, setOrganizerError] = useState(false);
-
-  const organizersInputRef = useRef<HTMLInputElement>(null);
-
-  const handleGetOrganizers = debounce(
-    async (e: React.ChangeEvent<HTMLInputElement>) => {
-      const response = await fetch(`/organizers?name=${e.target.value}`);
-      const data = await response.json();
-      if ("exception" in data) {
-        setOrganizerError(true);
-        return;
-      }
-      const organizers = data.map(
-        (organizer: { name: string | { nl: string }; id: string }) => {
-          if (typeof organizer.name === "object" && "nl" in organizer.name) {
-            return { name: organizer.name.nl, id: organizer.id };
-          }
-          return organizer;
-        }
-      );
-      setOrganizerList(organizers);
-      if (organizerError) {
-        setOrganizerError(false);
-      }
-    },
-    750
-  );
-
-  const handleAddOrganizers = (organizer: UiTPASOrganizer) => {
-    const isDuplicate =
-      organizationForm.data.organizers.length > 0 &&
-      organizationForm.data.organizers.some(
-        (existingOrganizer) => existingOrganizer.id === organizer.id
-      );
-    if (!isDuplicate) {
-      organizationForm.setData("organizers", [
-        ...organizationForm.data.organizers,
-        organizer,
-      ]);
-      setIsSearchListVisible(false);
-      setOrganizerList([]);
-      if (organizersInputRef.current) {
-        organizersInputRef.current.value = "";
-      }
-    }
-  };
-
-  const handleDeleteOrganizer = (deletedOrganizer: string) => {
-    const updatedOrganizers = organizationForm.data.organizers.filter(
-      (organizer) => organizer.name !== deletedOrganizer
-    );
-    organizationForm.setData("organizers", updatedOrganizers);
-  };
-
   if (!isVisible) {
     return null;
   }
 
-  const handleInputOnChange = async (
-    e: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    if (e.target.value !== "") {
-      await handleGetOrganizers(e);
-      setIsSearchListVisible(true);
-    } else {
-      setIsSearchListVisible(false);
-      setOrganizerList([]);
-    }
-  };
-
-  const handleKeyDown = (
-    event: React.KeyboardEvent<HTMLLIElement>,
-    organizer: UiTPASOrganizer
-  ) => {
-    if (event.key === "Enter") {
-      handleAddOrganizers(organizer);
-    }
-  };
-
   return (
     <Dialog
       title={t("integrations.activation_dialog.title")}
@@ -343,61 +263,14 @@ export const ActivationDialog = ({
                 {t("integrations.activation_dialog.uitpas.organizers.info")}
               </Heading>
             </div>
-            <div className="flex gap-2 flex-wrap">
-              {organizationForm.data.organizers.length > 0 &&
-                organizationForm.data.organizers.map((organizer, index) => (
-                  <div
-                    key={`${organizer}${index}`}
-                    className="border rounded px-2 py-1 flex gap-1"
-                  >
-                    <p>{organizer.name}</p>
-                    <ButtonIcon
-                      icon={faTrash}
-                      size="sm"
-                      className="text-icon-gray"
-                      onClick={() => handleDeleteOrganizer(organizer.name)}
-                    />
-                  </div>
-                ))}
-            </div>
-            {organizerError && (
-              <Alert variant="error">{t("dialog.invite_error")}</Alert>
-            )}
-            <FormElement
+            <OrganizersDatalist
               label={t(
                 "integrations.activation_dialog.uitpas.organizers.label"
               )}
-              required
               error={organizationFormErrors["organizers"]}
-              className="w-full relative"
-              component={
-                <>
-                  <Input
-                    type="text"
-                    name="organizers"
-                    ref={organizersInputRef}
-                    onChange={async (e) => {
-                      await handleInputOnChange(e);
-                    }}
-                  />
-                  {organizerList &&
-                    organizerList.length > 0 &&
-                    isSearchListVisible && (
-                      <ul className="border rounded absolute bg-white w-full z-50">
-                        {organizerList.map((organizer) => (
-                          <li
-                            tabIndex={0}
-                            key={`${organizer.id}`}
-                            onClick={() => handleAddOrganizers(organizer)}
-                            onKeyDown={(e) => handleKeyDown(e, organizer)}
-                            className="border-b px-3 py-1 hover:bg-gray-100"
-                          >
-                            {organizer.name}
-                          </li>
-                        ))}
-                      </ul>
-                    )}
-                </>
+              value={organizationForm.data.organizers}
+              onChange={(organizers) =>
+                organizationForm.setData("organizers", organizers)
               }
             />
           </>