mirror of
https://github.com/sp-tarkov/forge.git
synced 2025-02-12 20:20:41 -05:00
user stack and follows WIP
This commit is contained in:
parent
05f2dfc258
commit
239b10ca9d
@ -2,6 +2,7 @@
|
||||
|
||||
namespace App\Livewire;
|
||||
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Livewire\Component;
|
||||
|
||||
class UserStack extends Component
|
||||
@ -12,8 +13,20 @@ class UserStack extends Component
|
||||
|
||||
public int $limit = 5;
|
||||
|
||||
public bool $viewAll = false;
|
||||
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.user-stack');
|
||||
}
|
||||
|
||||
public function toggleViewAll()
|
||||
{
|
||||
$this->viewAll = ! $this->viewAll;
|
||||
}
|
||||
|
||||
public function followUser($user)
|
||||
{
|
||||
$user->followers->syncWithoutDetaching(Auth::id());
|
||||
}
|
||||
}
|
||||
|
||||
@ -66,6 +66,24 @@ class User extends Authenticatable implements MustVerifyEmail
|
||||
return $this->belongsToMany(User::class, 'user_follows', 'following_id', 'follower_id');
|
||||
}
|
||||
|
||||
public function isFollowing(User|int $user): bool
|
||||
{
|
||||
$userId = $user instanceof User ? $user->id : $user;
|
||||
return $this->following()->where('following_id', $userId)->exists();
|
||||
}
|
||||
|
||||
public function follow(User|int $user): void
|
||||
{
|
||||
$userId = $user instanceof User ? $user->id : $user;
|
||||
$this->following()->syncWithoutDetaching($userId);
|
||||
}
|
||||
|
||||
public function unfollow(User|int $user): void
|
||||
{
|
||||
$userId = $user instanceof User ? $user->id : $user;
|
||||
$this->following()->detach($userId);
|
||||
}
|
||||
|
||||
/**
|
||||
* The data that is searchable by Scout.
|
||||
*/
|
||||
|
||||
@ -2,22 +2,26 @@
|
||||
<div class="flex justify-center items-center">
|
||||
<h2 class="text-2xl">{{$label}}</h2>
|
||||
</div>
|
||||
<div class="flex ml-6 py-2">
|
||||
<div class="flex ml-6 py-2 justify-center items-center">
|
||||
@foreach($users->slice(0, $limit) as $user)
|
||||
<div class="relative group">
|
||||
<a href="{{$user->profileUrl()}}" class="rounded-full -ml-6 z-20 bg-[#ebf4ff] h-16 w-16 flex justify-center items-center border">
|
||||
<a href="{{$user->profileUrl()}}"
|
||||
class="rounded-full -ml-6 z-20 bg-[#ebf4ff] h-16 w-16 flex justify-center items-center border">
|
||||
<img class="h-full w-full rounded-full" src="{{$user->profile_photo_url}}"
|
||||
alt="{{$user->name[0]}}" />
|
||||
</a>
|
||||
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max px-2 py-1 text-sm text-white bg-gray-700 rounded shadow-lg opacity-0 group-hover:opacity-100">
|
||||
<div
|
||||
class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max px-2 py-1 text-sm text-white bg-gray-700 rounded shadow-lg opacity-0 group-hover:opacity-100">
|
||||
{{$user->name}}
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
@if($users->count() > $limit)
|
||||
<div class="relative group">
|
||||
<span class="rounded-full -ml-6 z-20 bg-cyan-500 dark:bg-cyan-700 h-16 w-16 flex justify-center items-center border text-white">+{{$users->count()-$limit}}</span>
|
||||
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max px-2 py-1 text-sm text-white bg-gray-700 rounded shadow-lg opacity-0 group-hover:opacity-100">
|
||||
<span
|
||||
class="rounded-full -ml-6 z-20 bg-cyan-500 dark:bg-cyan-700 h-16 w-16 flex justify-center items-center border text-white">+{{$users->count()-$limit}}</span>
|
||||
<div
|
||||
class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-max px-2 py-1 text-sm text-white bg-gray-700 rounded shadow-lg opacity-0 group-hover:opacity-100">
|
||||
{{$users->count()}} total
|
||||
</div>
|
||||
</div>
|
||||
@ -25,20 +29,38 @@
|
||||
</div>
|
||||
@if($users->count() > $limit)
|
||||
<div class="flex justify-center items-center">
|
||||
<button wire:click="$set('viewAll', false)">view all</button>
|
||||
<button wire:click="toggleViewAll">view all</button>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<x-dialog-modal wire:model.live="viewAll">
|
||||
<x-slot name="title">
|
||||
<h2 class="text-2xl">testing</h2>
|
||||
<h2 class="text-2xl">{{$user->name}}'s {{$label}}</h2>
|
||||
</x-slot>
|
||||
<x-slot name="content">
|
||||
<p>no u</p>
|
||||
<div class="h-96 overflow-y-auto divide-y">
|
||||
@foreach($users as $user)
|
||||
{{-- user tile --}}
|
||||
<div class="flex group/item">
|
||||
<img class="h-16 w-16 m-2 rounded-full" src="{{$user->profile_photo_url}}"
|
||||
alt="{{$user->name}}" />
|
||||
<div class="flex flex-col justify-center">
|
||||
<a class="no-underline text-2xl" href="{{$user->profileUrl()}}">{{$user->name}}</a>
|
||||
<span class="">{{__("Member Since")}} {{ $user->created_at->format("M d, h:m a") }}</span>
|
||||
</div>
|
||||
<div class="flex invisible group-hover/item:visible w-full justify-end items-center mr-10">
|
||||
<button class="p-2 h-fit text-white bg-cyan-500 hover:bg-cyan-700 rounded-lg"
|
||||
wire:click="followUser({{$user}})">
|
||||
{{__('Follow')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="footer">
|
||||
<x-button wire:click="$set('viewAll', false)">
|
||||
<x-button wire:click="toggleViewAll">
|
||||
{{__('Close')}}
|
||||
</x-button>
|
||||
</x-slot>
|
||||
|
||||
@ -17,20 +17,35 @@
|
||||
<p>{{__("Member Since")}} {{ $user->created_at->format("M d, h:m a") }}</p>
|
||||
</div>
|
||||
|
||||
@if(\Illuminate\Support\Facades\Auth::check())
|
||||
@if(\Illuminate\Support\Facades\Auth::id() != $user->id)
|
||||
<div
|
||||
class="mt-6 flex flex-col justify-stretch space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0">
|
||||
<button type="button"
|
||||
class="inline-flex justify-center rounded-md bg-white dark:bg-gray-700 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||
<svg class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400 dark:text-gray-300"
|
||||
viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
<path
|
||||
d="m12.82 5.58-.82.822-.824-.824a5.375 5.375 0 1 0-7.601 7.602l7.895 7.895a.75.75 0 0 0 1.06 0l7.902-7.897a5.376 5.376 0 0 0-.001-7.599 5.38 5.38 0 0 0-7.611 0Z" />
|
||||
</svg>
|
||||
<span>{{__("Follow")}}</span>
|
||||
</button>
|
||||
</div>
|
||||
@if(auth()->check())
|
||||
@if(auth()->id() != $user->id)
|
||||
@if(auth()->user()->isFollowing($user))
|
||||
<div
|
||||
class="mt-6 flex flex-col justify-stretch space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0">
|
||||
<button type="button"
|
||||
class="inline-flex justify-center rounded-md bg-white dark:bg-gray-700 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||
<svg class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400 dark:text-gray-300"
|
||||
viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
<path
|
||||
d="m12.82 5.58-.82.822-.824-.824a5.375 5.375 0 1 0-7.601 7.602l7.895 7.895a.75.75 0 0 0 1.06 0l7.902-7.897a5.376 5.376 0 0 0-.001-7.599 5.38 5.38 0 0 0-7.611 0Z" />
|
||||
</svg>
|
||||
<span>{{__("UnFollow")}}</span>
|
||||
</button>
|
||||
</div>
|
||||
@else
|
||||
<div
|
||||
class="mt-6 flex flex-col justify-stretch space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0">
|
||||
<button type="button"
|
||||
class="inline-flex justify-center rounded-md bg-white dark:bg-gray-700 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||
<svg class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400 dark:text-gray-300"
|
||||
viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
<path
|
||||
d="m12.82 5.58-.82.822-.824-.824a5.375 5.375 0 1 0-7.601 7.602l7.895 7.895a.75.75 0 0 0 1.06 0l7.902-7.897a5.376 5.376 0 0 0-.001-7.599 5.38 5.38 0 0 0-7.611 0Z" />
|
||||
</svg>
|
||||
<span>{{__("Follow")}}</span>
|
||||
</button>
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
<div class="mt-6 flex flex-col justify-stretch space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0">
|
||||
<button type="button"
|
||||
@ -58,13 +73,11 @@
|
||||
{{-- column 1 placeholder --}}
|
||||
</div>
|
||||
<div class="flex flex-col justify-center items-center">
|
||||
<div class="flex w-full">
|
||||
@livewire('user-stack', ['label' => 'Followers', 'users' => $user->followers]);
|
||||
{{-- <x-user-stack :label="__('Followers')" :users="$user->followers" />--}}
|
||||
<div class="flex w-full max-w-sm">
|
||||
@livewire('user-stack', ['label' => 'Followers', 'users' => $user->followers])
|
||||
</div>
|
||||
<div class="flex w-full">
|
||||
@livewire('user-stack', ['label' => 'Following', 'users' => $user->following]);
|
||||
{{-- <x-user-stack :label="__('Following')" :users="$user->following" />--}}
|
||||
<div class="flex w-full max-w-sm">
|
||||
@livewire('user-stack', ['label' => 'Following', 'users' => $user->following])
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user