implement creating new conversation
This commit is contained in:
@@ -8,9 +8,19 @@
|
||||
</flux:text>
|
||||
</div>
|
||||
|
||||
<flux:badge color="zinc" size="sm">
|
||||
{{ trans_choice(':count message|:count messages', $this->conversation->messages_count, ['count' => $this->conversation->messages_count]) }}
|
||||
</flux:badge>
|
||||
<div class="flex items-center gap-2">
|
||||
<flux:badge color="zinc" size="sm">
|
||||
{{ trans_choice(':count message|:count messages', $this->conversation->messages_count, ['count' => $this->conversation->messages_count]) }}
|
||||
</flux:badge>
|
||||
|
||||
<flux:button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
icon="x-mark"
|
||||
wire:click="closeDetails"
|
||||
aria-label="{{ __('Close details') }}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex flex-col items-center text-center">
|
||||
@@ -51,8 +61,22 @@
|
||||
|
||||
<section>
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<flux:heading size="sm">{{ __('Participants') }}</flux:heading>
|
||||
<flux:badge size="sm" color="zinc">{{ $this->conversation->participants->count() }}</flux:badge>
|
||||
<div class="flex items-center gap-2">
|
||||
<flux:heading size="sm">{{ __('Participants') }}</flux:heading>
|
||||
<flux:badge size="sm" color="zinc">{{ $this->conversation->participants->count() }}</flux:badge>
|
||||
</div>
|
||||
|
||||
@if ($this->canAddMembers())
|
||||
<flux:button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="filled"
|
||||
icon="user-plus"
|
||||
wire:click="openAddMembers"
|
||||
>
|
||||
{{ __('Add') }}
|
||||
</flux:button>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="mt-3 space-y-3">
|
||||
@@ -99,4 +123,116 @@
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<flux:modal wire:model="showAddMembersModal" class="w-full max-w-xl">
|
||||
<form wire:submit="addMembers" class="space-y-6">
|
||||
<div>
|
||||
<flux:heading size="lg">{{ __('Add people') }}</flux:heading>
|
||||
<flux:text class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
|
||||
@if ($this->conversation->isGroup())
|
||||
{{ __('Invite more teammates into this group conversation.') }}
|
||||
@else
|
||||
{{ __('Adding people will turn this direct chat into a group conversation.') }}
|
||||
@endif
|
||||
</flux:text>
|
||||
</div>
|
||||
|
||||
@unless ($this->conversation->isGroup())
|
||||
<flux:input
|
||||
wire:model="groupName"
|
||||
:label="__('Group name')"
|
||||
:placeholder="__('Name this group')"
|
||||
autocomplete="off"
|
||||
/>
|
||||
@endunless
|
||||
|
||||
<div class="space-y-3">
|
||||
<flux:input
|
||||
wire:model.live.debounce.250ms="memberSearch"
|
||||
icon="magnifying-glass"
|
||||
:label="__('People')"
|
||||
:placeholder="__('Search people not already here')"
|
||||
autocomplete="off"
|
||||
/>
|
||||
|
||||
@error('selectedMemberIds')
|
||||
<flux:text class="text-sm text-red-600 dark:text-red-400">{{ $message }}</flux:text>
|
||||
@enderror
|
||||
|
||||
@if ($this->selectedMembers->isNotEmpty())
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@foreach ($this->selectedMembers as $member)
|
||||
<button
|
||||
type="button"
|
||||
wire:key="add-selected-member-{{ $member->id }}"
|
||||
wire:click="removeSelectedMember({{ $member->id }})"
|
||||
class="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white py-1 pe-2 ps-1 text-sm text-zinc-700 shadow-sm transition hover:border-zinc-300 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:border-zinc-600"
|
||||
>
|
||||
<span class="flex size-6 items-center justify-center rounded-full bg-zinc-100 text-[10px] font-semibold dark:bg-zinc-800">
|
||||
{{ $member->initials() }}
|
||||
</span>
|
||||
<span>{{ $member->name }}</span>
|
||||
<flux:icon.x-mark class="size-3 text-zinc-400" />
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="max-h-72 overflow-y-auto rounded-lg border border-zinc-200 bg-zinc-50 p-1 dark:border-zinc-800 dark:bg-zinc-900/60">
|
||||
@forelse ($this->availableUsers as $candidate)
|
||||
<button
|
||||
type="button"
|
||||
wire:key="add-candidate-{{ $candidate->id }}"
|
||||
wire:click="toggleMember({{ $candidate->id }})"
|
||||
class="flex w-full items-center gap-3 rounded-md p-3 text-left transition hover:bg-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent dark:hover:bg-zinc-900"
|
||||
>
|
||||
<flux:avatar
|
||||
circle
|
||||
:name="$candidate->name"
|
||||
:initials="$candidate->initials()"
|
||||
/>
|
||||
|
||||
<span class="min-w-0 flex-1">
|
||||
<span class="block truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">{{ $candidate->name }}</span>
|
||||
<span class="block truncate text-xs text-zinc-500 dark:text-zinc-400">{{ $candidate->email }}</span>
|
||||
</span>
|
||||
|
||||
<span class="flex size-7 items-center justify-center rounded-full border border-zinc-200 bg-white text-zinc-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-300">
|
||||
<flux:icon.plus class="size-4" />
|
||||
</span>
|
||||
</button>
|
||||
@empty
|
||||
<div class="flex min-h-32 items-center justify-center p-6 text-center">
|
||||
<div>
|
||||
<div class="mx-auto mb-3 flex size-10 items-center justify-center rounded-lg border border-dashed border-zinc-300 text-zinc-400 dark:border-zinc-700">
|
||||
<flux:icon.user-plus class="size-5" />
|
||||
</div>
|
||||
<flux:heading size="sm">{{ __('No people available') }}</flux:heading>
|
||||
<flux:text class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
|
||||
{{ __('Everyone matching your search is already in this conversation.') }}
|
||||
</flux:text>
|
||||
</div>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end gap-3 border-t border-zinc-200 pt-4 dark:border-zinc-800">
|
||||
<flux:modal.close>
|
||||
<flux:button type="button" variant="ghost">{{ __('Cancel') }}</flux:button>
|
||||
</flux:modal.close>
|
||||
|
||||
<flux:button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
icon="user-plus"
|
||||
wire:loading.attr="disabled"
|
||||
wire:target="addMembers"
|
||||
:disabled="count($selectedMemberIds) === 0"
|
||||
>
|
||||
{{ __('Add selected') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</form>
|
||||
</flux:modal>
|
||||
</aside>
|
||||
|
||||
Reference in New Issue
Block a user