feat: product team members

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-17 16:04:25 +03:00
parent 768c814762
commit fbb4862454
11 changed files with 321 additions and 5 deletions
@@ -0,0 +1,60 @@
+@props(['members' => []])
+
+@php
+    $initial = collect(old('members', collect($members)->map(fn ($m) => [
+        'user_id' => $m->id,
+        'name' => $m->name,
+        'role' => $m->pivot->role,
+    ])->all()))->map(fn ($m) => [
+        'user_id' => $m['user_id'] ?? '',
+        'name' => $m['name'] ?? ('User #' . ($m['user_id'] ?? '')),
+        'role' => $m['role'] ?? '',
+    ])->values()->all();
+    $input = 'block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm';
+@endphp
+
+<!-- Team members -->
+<div x-data="{
+        members: @js($initial),
+        q: '',
+        results: [],
+        timer: null,
+        search() {
+            clearTimeout(this.timer);
+            if (this.q.trim().length < 2) { this.results = []; return; }
+            this.timer = setTimeout(async () => {
+                const res = await fetch(@js(route('users.search')) + '?q=' + encodeURIComponent(this.q.trim()), { headers: { 'Accept': 'application/json' } });
+                this.results = res.ok ? (await res.json()).filter(u => !this.members.some(m => String(m.user_id) === String(u.id))) : [];
+            }, 300);
+        },
+        add(u) {
+            this.members.push({ user_id: u.id, name: u.name, role: '' });
+            this.q = ''; this.results = [];
+        }
+    }">
+    <label class="block text-sm font-medium text-gray-700">Team members</label>
+    <div class="relative mt-2">
+        <input type="text" x-model="q" @input="search()" placeholder="Search users by name" autocomplete="off" class="{{ $input }}">
+        <ul x-show="results.length" x-cloak class="absolute z-10 mt-1 w-full bg-white border border-gray-200 rounded-md shadow-lg">
+            <template x-for="u in results" :key="u.id">
+                <li><button type="button" @click="add(u)" class="w-full text-left px-3 py-2 text-sm hover:bg-gray-50" x-text="u.name"></button></li>
+            </template>
+        </ul>
+    </div>
+    <div class="mt-3 space-y-3">
+        <template x-for="(member, i) in members" :key="member.user_id">
+            <div class="grid grid-cols-1 sm:grid-cols-12 gap-2 p-3 border border-gray-200 rounded-md items-center">
+                <input type="hidden" :name="`members[${i}][user_id]`" :value="member.user_id">
+                <span class="sm:col-span-4 text-sm text-gray-900" x-text="member.name"></span>
+                <input type="text" :name="`members[${i}][role]`" x-model="member.role" placeholder="Role (e.g. Designer)" maxlength="100" class="{{ $input }} sm:col-span-7">
+                <button type="button" @click="members.splice(i, 1)" class="sm:col-span-1 text-sm text-red-600 hover:text-red-800">Remove</button>
+            </div>
+        </template>
+    </div>
+    @foreach($errors->get('members.*') as $messages)
+        <p class="mt-2 text-sm text-red-600">{{ $messages[0] }}</p>
+    @endforeach
+    @error('members')
+        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+    @enderror
+</div>