feat: searchable contacts on introductions form (#5632)

app/Http/Controllers/Contacts/IntroductionsController.php

@@ -7,6 +7,7 @@ use App\Models\Contact\Contact;
 use App\Http\Controllers\Controller;
 use App\Traits\JsonRespondController;
 use App\Services\Contact\Contact\UpdateContactIntroduction;
+use App\Http\Resources\Contact\ContactShort as ContactResource;
 
 class IntroductionsController extends Controller
 {
@@ -25,11 +26,17 @@ class IntroductionsController extends Controller
         $contacts = $contact->siblingContacts()
                         ->real()
                         ->active()
-                        ->get();
+                        ->paginate(20);
+
+        $introducer = $contact->getIntroducer();
+        if ($introducer !== null) {
+            $introducer = new ContactResource($introducer);
+        }
 
         return view('people.introductions.edit')
             ->withContact($contact)
-            ->withContacts($contacts);
+            ->withContacts(ContactResource::collection($contacts))
+            ->withIntroducer($introducer);
     }
 
     /**

resources/js/components/people/ContactSelect.vue

@@ -5,6 +5,7 @@
     </p>
     <input type="hidden" :name="name" :value="selected ? selected.id : ''" />
     <v-select
+      :id="id ? id : ''"
       :value="selected"
       :placeholder="placeholder"
       :label="'complete_name'"
@@ -28,6 +29,10 @@ export default {
     vSelect
   },
   props: {
+    id: {
+      type: String,
+      default: null,
+    },
     value: {
       type: Object,
       default: null,

resources/views/people/introductions/edit.blade.php

@@ -46,19 +46,16 @@
                 </div>
 
                 <div class="form-group">
-                  <label for="metThroughId">{{ trans('people.introductions_edit_met_through') }}</label>
-                  <select class="form-control" name="metThroughId" id="metThroughId">
-                    <option value="">{{ trans('people.introductions_no_met_through') }}</option>
-                    @foreach ($contacts as $metThroughContact)
-
-                      @if ($metThroughContact->id != $contact->id)
-                      <option value="{{ $metThroughContact->id }}" {{ (is_null($contact->first_met_through_contact_id)) ? '' : (($metThroughContact->id == $contact->first_met_through_contact_id) ? 'selected' : '') }}>
-                        {{ $metThroughContact->name }}
-                      </option>
-                      @endif
-
-                    @endforeach
-                  </select>
+                  <contact-select
+                    :id="'metThrough'"
+                    :required="false"
+                    :title="'{{ trans('people.introductions_edit_met_through') }}'"
+                    :name="'metThroughId'"
+                    :placeholder="'{{ trans('people.relationship_form_associate_dropdown_placeholder') }}'"
+                    :default-options="{{ \Safe\json_encode($contacts) }}"
+                    :user-contact-id="{{ $contact->id }}"
+                    :value="{{ $introducer !== null ? \Safe\json_encode($introducer) : 'null' }}">
+                  </contact-select>
                 </div>
 
                 <label>{{ trans('people.introductions_first_met_date') }}</label>

tests/cypress/integration/contacts/introductions_spec.js

@@ -0,0 +1,65 @@
+describe('Introduction', function () {
+  beforeEach(function () {
+    cy.login();
+    cy.createContact('John', 'Doe', 'Man');
+    cy.createContact('Jane', 'Doe', 'Woman');
+    cy.createContact('Joe', 'Shmoe', 'Man');
+  });
+
+  it('lets you fill first met without an introducer', function () {
+    cy.url().should('include', '/people/h:');
+
+    cy.get('.introductions a[href$="introductions/edit"]').click();
+    cy.url().should('include', '/introductions/edit');
+
+    cy.get('textarea[name=first_met_additional_info]').type('Lorem ipsum');
+    cy.get('button.btn-primary[type=submit]').click();
+
+    cy.url().should('include', '/people/h:');
+    cy.get('.alert-success');
+    cy.get('.introductions').contains('Lorem ipsum');
+  });
+
+  it('lets you save first met', function () {
+    cy.url().should('include', '/people/h:');
+
+    cy.get('.introductions a[href$="introductions/edit"]').click();
+    cy.url().should('include', '/introductions/edit');
+
+    cy.get('textarea[name=first_met_additional_info]').type('Lorem ipsum');
+    cy.get('#metThrough > .v-select input').click();
+    cy.get('#metThrough ul[role="listbox"]').contains('John Doe');
+    cy.get('#metThrough ul[role="listbox"]').contains('Jane Doe');
+    cy.get('#metThrough ul[role="listbox"]').contains('Joe Shmoe');
+
+    cy.get('#metThrough ul[role="listbox"]').contains('John Doe').click();
+
+    cy.get('button.btn-primary[type=submit]').click();
+
+    cy.url().should('include', '/people/h:');
+    cy.get('.alert-success');
+    cy.get('.introductions').contains('Lorem ipsum');
+    cy.get('.introductions').contains('John Doe');
+  });
+
+  it('lets you search first met', function () {
+    cy.url().should('include', '/people/h:');
+
+    cy.get('.introductions a[href$="introductions/edit"]').click();
+    cy.url().should('include', '/introductions/edit');
+
+    cy.get('textarea[name=first_met_additional_info]').type('Lorem ipsum');
+    cy.get('#metThrough input[type=search]').type('John');
+    cy.get('#metThrough ul[role="listbox"]').contains('John Doe');
+    cy.get('#metThrough ul[role="listbox"]').should('not.contain', 'Joe Shmoe');
+    cy.get('#metThrough ul[role="listbox"]').should('not.contain', 'Jane Doe');
+
+    cy.get('#metThrough ul[role="listbox"]').contains('John Doe').click();
+    cy.get('button.btn-primary[type=submit]').click();
+
+    cy.url().should('include', '/people/h:');
+    cy.get('.introductions').contains('Lorem ipsum');
+    cy.get('.introductions').contains('John Doe');
+  });
+
+});