team members and invitations
This commit is contained in:
Doar Mihai
@@ -0,0 +1,189 @@
|
||||
<x-app-layout>
|
||||
@php($currentProject = $project)
|
||||
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">{{ $project->name }} — Team Members</h2>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-8">
|
||||
<div class="max-w-5xl mx-auto sm:px-6 lg:px-8 space-y-6">
|
||||
|
||||
@if(session('success'))
|
||||
<div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md text-sm">
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($errors->any())
|
||||
<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm">
|
||||
<ul class="list-disc list-inside">
|
||||
@foreach($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Invite Member --}}
|
||||
@can('manageMembers', $project)
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-4">Invite Team Member</h3>
|
||||
<form method="POST" action="{{ route('projects.members.invite', $project) }}" class="flex gap-3">
|
||||
@csrf
|
||||
<div class="flex-1">
|
||||
<x-text-input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
class="w-full"
|
||||
placeholder="email@example.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="w-40">
|
||||
<select
|
||||
id="role"
|
||||
name="role"
|
||||
class="w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
||||
required
|
||||
>
|
||||
<option value="member">Member</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
<x-primary-button>Send Invite</x-primary-button>
|
||||
</form>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
<strong>Member:</strong> Can view issues and events.
|
||||
<strong>Admin:</strong> Can also manage team members and project settings.
|
||||
</p>
|
||||
</div>
|
||||
@endcan
|
||||
|
||||
{{-- Pending Invitations --}}
|
||||
@if($pendingInvitations->isNotEmpty())
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
||||
<div class="p-6 border-b border-gray-200">
|
||||
<h3 class="text-lg font-medium text-gray-900">Pending Invitations</h3>
|
||||
</div>
|
||||
<div class="divide-y divide-gray-200">
|
||||
@foreach($pendingInvitations as $invitation)
|
||||
<div class="p-4 flex items-center justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="font-medium text-gray-900">{{ $invitation->email }}</div>
|
||||
<div class="text-sm text-gray-500">
|
||||
Invited by {{ $invitation->inviter->name }}
|
||||
· {{ $invitation->created_at->diffForHumans() }}
|
||||
· Expires {{ $invitation->expires_at->diffForHumans() }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
||||
{{ ucfirst($invitation->role) }}
|
||||
</span>
|
||||
@can('manageMembers', $project)
|
||||
<form method="POST" action="{{ route('projects.members.cancel-invitation', [$project, $invitation]) }}" class="inline">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button
|
||||
type="submit"
|
||||
class="text-sm text-red-600 hover:text-red-800"
|
||||
onclick="return confirm('Cancel this invitation?')"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</form>
|
||||
@endcan
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Current Members --}}
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
||||
<div class="p-6 border-b border-gray-200">
|
||||
<h3 class="text-lg font-medium text-gray-900">Team Members ({{ $members->count() }})</h3>
|
||||
</div>
|
||||
<div class="divide-y divide-gray-200">
|
||||
@foreach($members as $member)
|
||||
<div class="p-4 flex items-center justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="font-medium text-gray-900">
|
||||
{{ $member->name }}
|
||||
@if($member->id === auth()->id())
|
||||
<span class="text-sm text-gray-500">(you)</span>
|
||||
@endif
|
||||
</div>
|
||||
<div class="text-sm text-gray-500">{{ $member->email }}</div>
|
||||
<div class="text-xs text-gray-400 mt-1">
|
||||
Joined {{ $member->pivot->created_at->diffForHumans() }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
@can('manageMembers', $project)
|
||||
@if($member->id !== auth()->id())
|
||||
<form method="POST" action="{{ route('projects.members.update-role', [$project, $member]) }}" class="inline">
|
||||
@csrf
|
||||
@method('PATCH')
|
||||
<select
|
||||
name="role"
|
||||
class="text-sm border-gray-300 rounded-md"
|
||||
onchange="this.form.submit()"
|
||||
>
|
||||
<option value="member" {{ $member->pivot->role === 'member' ? 'selected' : '' }}>Member</option>
|
||||
<option value="admin" {{ $member->pivot->role === 'admin' ? 'selected' : '' }}>Admin</option>
|
||||
<option value="owner" {{ $member->pivot->role === 'owner' ? 'selected' : '' }}>Owner</option>
|
||||
</select>
|
||||
</form>
|
||||
@else
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
|
||||
{{ ucfirst($member->pivot->role) }}
|
||||
</span>
|
||||
@endif
|
||||
@else
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
|
||||
{{ ucfirst($member->pivot->role) }}
|
||||
</span>
|
||||
@endcan
|
||||
|
||||
@can('manageMembers', $project)
|
||||
@if($member->id !== auth()->id())
|
||||
<form method="POST" action="{{ route('projects.members.destroy', [$project, $member]) }}" class="inline">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button
|
||||
type="submit"
|
||||
class="text-sm text-red-600 hover:text-red-800"
|
||||
onclick="return confirm('Remove {{ $member->name }} from this project?')"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
@endcan
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Role Descriptions --}}
|
||||
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<h4 class="font-medium text-blue-900 mb-2">Permission Levels</h4>
|
||||
<dl class="text-sm space-y-1">
|
||||
<dt class="font-medium text-blue-800">Owner</dt>
|
||||
<dd class="text-blue-700 ml-4">Full access including project deletion</dd>
|
||||
|
||||
<dt class="font-medium text-blue-800 mt-2">Admin</dt>
|
||||
<dd class="text-blue-700 ml-4">Manage team members, project settings, and all issues</dd>
|
||||
|
||||
<dt class="font-medium text-blue-800 mt-2">Member</dt>
|
||||
<dd class="text-blue-700 ml-4">View and manage issues and events</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
Reference in New Issue
Block a user