254 lines
15 KiB
PHP
254 lines
15 KiB
PHP
|
|
<div x-data dusk="new_group_modal">
|
|
|
|
<div
|
|
class="relative w-full border items-center justify-center border-[var(--wc-light-border)] dark:border-[var(--wc-dark-border)] overflow-visible bg-[var(--wc-light-primary)] dark:bg-[var(--wc-dark-primary)] dark:text-white sm:max-w-lg sm:rounded-lg">
|
|
|
|
{{-- Group Details --}}
|
|
<section x-show="$wire.showAddMembers==false"
|
|
x-transition:enter="ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 -translate-x-full" x-transition:enter-end="opacity-100 translate-x-0"
|
|
x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-x-0"
|
|
x-transition:leave-end="opacity-0 -translate-x-full"
|
|
>
|
|
|
|
<form wire:submit="validateDetails()" class="flex flex-col p-12">
|
|
|
|
<header>
|
|
|
|
<div class="flex gap-10 w-full">
|
|
|
|
@if ($photo)
|
|
<div class="relative w-28 h-28 overflow-clip rounded-full">
|
|
<x-wirechat::avatar :src="$photo->temporaryUrl()" class="w-28 h-28" />
|
|
<button
|
|
type="button"
|
|
class="bottom-0 inset-x-0 bg-white/40 text-red-800 flex items-center justify-center absolute "
|
|
wire:click="deletePhoto">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke-width="1.5" stroke="currentColor" class="size-6 w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
@else
|
|
<label class="cursor-pointer">
|
|
<x-wirechat::avatar wire:loading.class="animate-pulse" wire:target="photo" :group="true" class="w-28 h-28" />
|
|
<input wire:model="photo" dusk="add_photo_field" type="file" hidden accept=".jpg,.jpeg,.png,.webp">
|
|
</label>
|
|
@endif
|
|
|
|
<div class=" my-auto">
|
|
|
|
<label for="name">@lang('wirechat::new.group.inputs.name.label')</label>
|
|
|
|
<input id='name' type="text" wire:model='name' autofocus placeholder="{{__('wirechat::new.group.inputs.name.placeholder') }}"
|
|
class=" w-full border-0 px-0 bg-inherit dark:text-white outline-hidden w-full focus:outline-hidden focus:ring-0 hover:ring-0">
|
|
|
|
<span class="text-red-500 text-sm ">
|
|
@error('name')
|
|
{{ $message }}
|
|
@enderror
|
|
</span>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<span class="text-red-500 text-sm ">
|
|
@error('photo')
|
|
{{ $message }}
|
|
@enderror
|
|
</span>
|
|
|
|
</header>
|
|
|
|
<main class="my-5">
|
|
<div class=" my-auto flex flex-col gap-y-2">
|
|
|
|
<label class="my-2" for="description">@lang('wirechat::new.group.inputs.description.label')</label>
|
|
|
|
<textarea id='description' type="text" wire:model='description' placeholder="{{__('wirechat::new.group.inputs.description.placeholder')}}" rows="4"
|
|
class=" w-full resize-none rounded-lg border-[var(--wc-light-border)] dark:border-[var(--wc-dark-border)] bg-inherit dark:text-white outline-hidden w-full focus:outline-hidden focus:ring-0 hover:ring-0">
|
|
</textarea>
|
|
|
|
|
|
<span class="text-red-500 text-sm ">
|
|
@error('description')
|
|
{{ $message }}
|
|
@enderror
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<footer class="flex gap-4 justify-end mt-auto">
|
|
<x-wirechat::actions.close-modal>
|
|
<x-jetstream.secondary-button type="button" dusk="cancel_create_new_group_button">
|
|
@lang('wirechat::new.group.actions.cancel.label')
|
|
</x-jetstream.secondary-button>
|
|
</x-wirechat::actions.close-modal>
|
|
|
|
<x-jetstream.button type="submit" x-bind:disabled="!$wire.name || !$wire.name.trim().length" dusk="next_button">
|
|
@lang('wirechat::new.group.actions.next.label')
|
|
</x-jetstream.button>
|
|
</footer>
|
|
</form>
|
|
|
|
</section>
|
|
|
|
{{-- Add members --}}
|
|
<section dusk="add_members_section" x-cloak x-show="$wire.showAddMembers==true"
|
|
x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-x-full"
|
|
x-transition:enter-end="opacity-100 translate-x-0" x-transition:leave="ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 translate-x-0" x-transition:leave-end="opacity-0 translate-x-full"
|
|
class="p-12 relative h-full overflow-x-hidden ">
|
|
|
|
<header class=" sticky top-0 bg-[var(--wc-light-primary)] dark:bg-[var(--wc-dark-primary)] z-10 py-2">
|
|
<div class="flex items-center pb-2">
|
|
|
|
<button @click="$wire.showAddMembers=false"
|
|
class="p-2 ml-0 text-gray-600 dark:hover:bg-[var(--wc-dark-secondary)] dark:hover:text-white rounded-full hover:text-gray-800 hover:bg-[var(--wc-light-secondary)]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class=" w-5 w-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
|
|
</svg>
|
|
|
|
</button>
|
|
|
|
<h3 class="text-sm mx-auto font-semibold "><span>@lang('wirechat::new.group.labels.add_members')</span> {{count($selectedMembers)}} / {{$maxGroupMembers}}</h3>
|
|
|
|
<x-jetstream.button
|
|
wire:click="create"
|
|
wire:loading.attr="disabled"
|
|
wire:target='create'
|
|
type="button"
|
|
class="text-xs py-1.5 px-3">
|
|
@lang('wirechat::new.group.actions.create.label')
|
|
</x-jetstream.button>
|
|
|
|
</div>
|
|
|
|
{{-- Member limit error --}}
|
|
<div
|
|
x-data="{ showError:false }"
|
|
x-on:show-member-limit-error.window="
|
|
showError=true;
|
|
setTimeout(()=>{ showError=false; },1500);
|
|
"
|
|
class="text-red-500 text-sm mx-auto ">
|
|
<span x-transition x-show="showError">
|
|
@lang('wirechat::new.group.messages.members_limit_error',['count'=>$maxGroupMembers])
|
|
</span>
|
|
</div>
|
|
{{-- Search input --}}
|
|
<section class="flex flex-wrap items-center px-0 border-b border-[var(--wc-light-secondary)] dark:border-[var(--wc-dark-secondary)]">
|
|
<input type="search" id="users-search-field" wire:model.live.debounce='search' autocomplete="off"
|
|
placeholder="{{__('wirechat::new.group.inputs.search.placeholder')}}"
|
|
class=" w-full border-0 w-auto dark:bg-[var(--wc-dark-primary)] outline-hidden focus:outline-hidden bg-[var(--wc-light-primary)] bg-none rounded-lg focus:ring-0 hover:ring-0">
|
|
</section>
|
|
|
|
|
|
<section class=" overflow-x-hidden my-2 ">
|
|
<ul
|
|
style="
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
"
|
|
class="flex w-full overflow-x-auto gap-3">
|
|
|
|
@if ($selectedMembers)
|
|
|
|
@foreach ($selectedMembers as $key => $member)
|
|
<li class="flex items-center text-nowrap min-w-fit px-2 py-1 text-sm font-medium text-gray-800 bg-[var(--wc-light-secondary)] dark:bg-[var(--wc-dark-secondary)] rounded-sm dark:text-gray-300"
|
|
wire:key="selected-member-{{ $member->id }}">
|
|
{{ $member->display_name }}
|
|
<button type="button"
|
|
wire:click="toggleMember('{{ $member->id }}',{{ json_encode(get_class($member)) }})"
|
|
class="flex items-center p-1 ms-2 text-sm text-gray-400 bg-transparent rounded-xs hover:bg-[var(--wc-light-secondary)] dark:hover:bg-[var(--wc-dark-secondary)] hover:text-gray-900 dark:hover:text-gray-300"
|
|
aria-label="Remove">
|
|
<svg class="w-2 h-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
|
|
fill="none" viewBox="0 0 14 14">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
|
|
</svg>
|
|
<span class="sr-only">Remove badge</span>
|
|
|
|
</button>
|
|
</li>
|
|
@endforeach
|
|
@endif
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</section>
|
|
|
|
</header>
|
|
|
|
|
|
{{-- Search --}}
|
|
<div class="relative w-full">
|
|
{{-- <h5 class="text font-semibold text-gray-800 dark:text-gray-100">Recent Chats</h5> --}}
|
|
<section class="my-4 grid">
|
|
@if (count($users)!=0)
|
|
<ul class="overflow-auto flex flex-col">
|
|
@foreach ($users as $key => $user)
|
|
<li class="flex cursor-pointer group gap-2 items-center p-2">
|
|
|
|
<label
|
|
wire:click="toggleMember('{{ $user->id }}',{{ json_encode(get_class($user)) }})"
|
|
class="flex cursor-pointer gap-2 items-center w-full">
|
|
<x-wirechat::avatar src="{{ $user->cover_url }}" class="w-10 h-10" />
|
|
|
|
<div class="flex flex-col flex-1 min-w-0">
|
|
<p class="group-hover:underline transition-all truncate">
|
|
{{ $user->display_name }}</p>
|
|
@php
|
|
$location = $user->getLocationFirst();
|
|
@endphp
|
|
@if ($location && isset($location['name_short']))
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">
|
|
{{ $location['name_short'] }}
|
|
</span>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="ml-auto">
|
|
@if ($selectedMembers->contains(fn($member) => $member->id == $user->id && get_class($member) == get_class($user)))
|
|
<div class="w-6 h-6 bg-theme-brand rounded flex items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-theme-background">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
</div>
|
|
@else
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
|
|
fill="currentColor" class="bi bi-plus-square-dotted w-6 h-6 text-gray-400"
|
|
viewBox="0 0 16 16">
|
|
<path
|
|
d="M2.5 0q-.25 0-.487.048l.194.98A1.5 1.5 0 0 1 2.5 1h.458V0zm2.292 0h-.917v1h.917zm1.833 0h-.917v1h.917zm1.833 0h-.916v1h.916zm1.834 0h-.917v1h.917zm1.833 0h-.917v1h.917zM13.5 0h-.458v1h.458q.151 0 .293.029l.194-.981A2.5 2.5 0 0 0 13.5 0m2.079 1.11a2.5 2.5 0 0 0-.69-.689l-.556.831q.248.167.415.415l.83-.556zM1.11.421a2.5 2.5 0 0 0-.689.69l.831.556c.11-.164.251-.305.415-.415zM16 2.5q0-.25-.048-.487l-.98.194q.027.141.028.293v.458h1zM.048 2.013A2.5 2.5 0 0 0 0 2.5v.458h1V2.5q0-.151.029-.293zM0 3.875v.917h1v-.917zm16 .917v-.917h-1v.917zM0 5.708v.917h1v-.917zm16 .917v-.917h-1v.917zM0 7.542v.916h1v-.916zm15 .916h1v-.916h-1zM0 9.375v.917h1v-.917zm16 .917v-.917h-1v.917zm-16 .916v.917h1v-.917zm16 .917v-.917h-1v.917zm-16 .917v.458q0 .25.048.487l.98-.194A1.5 1.5 0 0 1 1 13.5v-.458zm16 .458v-.458h-1v.458q0 .151-.029.293l.981.194Q16 13.75 16 13.5M.421 14.89c.183.272.417.506.69.689l.556-.831a1.5 1.5 0 0 1-.415-.415zm14.469.689c.272-.183.506-.417.689-.69l-.831-.556c-.11.164-.251.305-.415.415l.556.83zm-12.877.373Q2.25 16 2.5 16h.458v-1H2.5q-.151 0-.293-.029zM13.5 16q.25 0 .487-.048l-.194-.98A1.5 1.5 0 0 1 13.5 15h-.458v1zm-9.625 0h.917v-1h-.917zm1.833 0h.917v-1h-.917zm1.834-1v1h.916v-1zm1.833 1h.917v-1h-.917zm1.833 0h.917v-1h-.917zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z" />
|
|
</svg>
|
|
@endif
|
|
</div>
|
|
</label>
|
|
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
@else
|
|
@if (!empty($search))
|
|
<span class="m-auto">@lang('wirechat::new.group.messages.empty_search_result')</span>
|
|
@endif
|
|
@endif
|
|
</section>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|