Skip to content

Commit 8f987f9

Browse files
mckenzieartsmckenziearts
committed
feat: update thread card and create computed methods for user data
1 parent ddaa40b commit 8f987f9

File tree

8 files changed

+175
-156
lines changed

8 files changed

+175
-156
lines changed

‎app/Livewire/Pages/Account/Profile.php

Lines changed: 39 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,55 @@
44

55
namespace App\Livewire\Pages\Account;
66

7+
use App\Models\Article;
8+
use App\Models\Discussion;
9+
use App\Models\Thread;
710
use App\Models\User;
811
use Illuminate\Contracts\View\View;
12+
use Illuminate\Support\Collection;
13+
use Livewire\Attributes\Computed;
914
use Livewire\Component;
1015

1116
final class Profile extends Component
1217
{
1318
public User $user;
1419

20+
#[Computed(persist: true)]
21+
public function articles(): Collection
22+
{
23+
return Article::with('media', 'tags')
24+
->select('id', 'title', 'slug', 'body', 'published_at')
25+
->whereBelongsTo($this->user)
26+
->published()
27+
->recent()
28+
->limit(5)
29+
->get();
30+
}
31+
32+
#[Computed(persist: true)]
33+
public function threads(): Collection
34+
{
35+
return Thread::with('channels')
36+
->withCount('replies')
37+
->whereBelongsTo($this->user)
38+
->orderByDesc('created_at')
39+
->limit(5)
40+
->get();
41+
}
42+
43+
#[Computed(persist: true)]
44+
public function discussions(): Collection
45+
{
46+
return Discussion::with('tags')
47+
->withCount('replies', 'reactions')
48+
->whereBelongsTo($this->user)
49+
->limit(5)
50+
->get();
51+
}
52+
1553
public function render(): View
1654
{
17-
return view('livewire.pages.account.profile', [
18-
'articles' => $this->user->articles() // @phpstan-ignore-line
19-
->recent()
20-
->published()
21-
->limit(5)
22-
->get(),
23-
'threads' => $this->user->threads()
24-
->orderByDesc('created_at')
25-
->limit(5)
26-
->get(),
27-
'discussions' => $this->user->discussions()
28-
->limit(5)
29-
->get(),
30-
])
55+
return view('livewire.pages.account.profile')
3156
->title($this->user->username.' ( '.$this->user->name.')');
3257
}
3358
}

‎resources/views/components/forum/thread.blade.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<article class="rounded-xl p-4 bg-white ring-1 ring-gray-200/50 transition duration-200 ease-in-out dark:bg-gray-800 dark:ring-white/10 dark:hover:bg-white/10 lg:p-5" aria-labelledby="{{ $thread->slug }}">
66
<x-forum.thread-channels :thread="$thread" />
77

8-
<div class="flex fle-wrap items-center gap-4">
9-
<h2 id="question-title-{{ $thread->id }}" class="text-xl font-heading/7 font-semibold text-gray-900 dark:text-white">
8+
<div class="flex items-center gap-4">
9+
<h2 id="question-title-{{ $thread->id }}" class="truncate text-lg font-heading/7 font-semibold text-gray-900 dark:text-white lg:text-xl">
1010
<x-link :href="route('forum.show', $thread)" class="hover:underline">
1111
{{ $thread->subject() }}
1212
</x-link>

‎resources/views/components/user/articles.blade.php

Lines changed: 45 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -3,56 +3,54 @@
33
'articles',
44
])
55

6-
<div>
7-
@if ($articles->isNotEmpty())
8-
<div class="-mt-6 divide-y divide-gray-200 dark:divide-white/20">
9-
@foreach ($articles as $article)
10-
<div class="py-6">
11-
<x-articles.card :article="$article" is-summary />
12-
</div>
13-
@endforeach
14-
</div>
15-
@else
16-
<x-empty-state>
6+
@if ($articles->isNotEmpty())
7+
<div class="-mt-6 divide-y divide-gray-200 dark:divide-white/20">
8+
@foreach ($articles as $article)
9+
<div class="py-6">
10+
<x-articles.card :article="$article" is-summary />
11+
</div>
12+
@endforeach
13+
</div>
14+
@else
15+
<x-empty-state>
16+
<div class="relative">
17+
<div class="absolute scale-90 shadow inset-x-0 -top-4 flex items-start -z-10 bg-white gap-3 p-3 rounded-lg ring-1 ring-gray-200/50 dark:bg-gray-900 dark:ring-white/10">
18+
</div>
1719
<div class="relative">
18-
<div class="absolute scale-90 shadow inset-x-0 -top-4 flex items-start -z-10 bg-white gap-3 p-3 rounded-lg ring-1 ring-gray-200/50 dark:bg-gray-900 dark:ring-white/10">
19-
</div>
20-
<div class="relative">
21-
<div class="absolute -inset-1 bg-gradient-to-r from-flag-green to-flag-red rounded-lg blur opacity-25"></div>
22-
<div class="relative flex items-start z-20 bg-white gap-3 p-3 rounded-lg ring-1 ring-gray-200/50 dark:bg-gray-900 dark:ring-white/10">
23-
<div class="w-1/4 h-20 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded-lg dark:bg-gray-800"></div>
24-
<div class="w-3/4 pt-2 space-y-2">
25-
<div class="grid grid-cols-3 gap-2 w-2/3">
26-
<div class="h-3 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded dark:bg-gray-800"></div>
27-
<div class="h-3 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded dark:bg-gray-800"></div>
28-
<div class="h-3 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded dark:bg-gray-800"></div>
29-
</div>
30-
<div class="h-4 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded-md dark:bg-gray-800"></div>
31-
<div class="h-6 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded-md dark:bg-gray-800"></div>
20+
<div class="absolute -inset-1 bg-gradient-to-r from-flag-green to-flag-red rounded-lg blur opacity-25"></div>
21+
<div class="relative flex items-start z-20 bg-white gap-3 p-3 rounded-lg ring-1 ring-gray-200/50 dark:bg-gray-900 dark:ring-white/10">
22+
<div class="w-1/4 h-20 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded-lg dark:bg-gray-800"></div>
23+
<div class="w-3/4 pt-2 space-y-2">
24+
<div class="grid grid-cols-3 gap-2 w-2/3">
25+
<div class="h-3 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded dark:bg-gray-800"></div>
26+
<div class="h-3 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded dark:bg-gray-800"></div>
27+
<div class="h-3 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded dark:bg-gray-800"></div>
3228
</div>
29+
<div class="h-4 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded-md dark:bg-gray-800"></div>
30+
<div class="h-6 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded-md dark:bg-gray-800"></div>
3331
</div>
3432
</div>
35-
<div class="absolute scale-[0.8] inset-x-0 -z-10 shadow -bottom-3 flex items-start bg-white gap-3 p-3 rounded-lg ring-1 ring-gray-200/50 dark:bg-gray-900 dark:ring-white/10">
36-
</div>
3733
</div>
38-
<div class="mt-8 space-y-4">
39-
<p class="mt-8 text-base text-gray-500 dark:text-gray-400">
40-
<span class="font-medium text-gray-700 dark:text-gray-300">{{ $user->name }}</span>
41-
{{ __('pages/account.activities.empty_articles') }}
42-
</p>
43-
44-
@if ($user->isLoggedInUser())
45-
@can('create', \App\Models\Article::class)
46-
<x-buttons.primary
47-
type="button"
48-
onclick="Livewire.dispatch('openPanel', { component: 'components.slideovers.article-form' })"
49-
>
50-
<x-untitledui-file-06 class="size-5" aria-hidden="true" />
51-
{{ __('global.launch_modal.article_action') }}
52-
</x-buttons.primary>
53-
@endcan
54-
@endif
34+
<div class="absolute scale-[0.8] inset-x-0 -z-10 shadow -bottom-3 flex items-start bg-white gap-3 p-3 rounded-lg ring-1 ring-gray-200/50 dark:bg-gray-900 dark:ring-white/10">
5535
</div>
56-
</x-empty-state>
57-
@endif
58-
</div>
36+
</div>
37+
<div class="mt-8 space-y-4">
38+
<p class="mt-8 text-base text-gray-500 dark:text-gray-400">
39+
<span class="font-medium text-gray-700 dark:text-gray-300">{{ $user->name }}</span>
40+
{{ __('pages/account.activities.empty_articles') }}
41+
</p>
42+
43+
@if ($user->isLoggedInUser())
44+
@can('create', \App\Models\Article::class)
45+
<x-buttons.primary
46+
type="button"
47+
onclick="Livewire.dispatch('openPanel', { component: 'components.slideovers.article-form' })"
48+
>
49+
<x-untitledui-file-06 class="size-5" aria-hidden="true" />
50+
{{ __('global.launch_modal.article_action') }}
51+
</x-buttons.primary>
52+
@endcan
53+
@endif
54+
</div>
55+
</x-empty-state>
56+
@endif

‎resources/views/components/user/discussions.blade.php

Lines changed: 43 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,58 +3,56 @@
33
'discussions',
44
])
55

6-
<div>
7-
@if ($discussions->isNotEmpty())
8-
<div class="relative -mt-6 divide-y divide-gray-200 dark:divide-white/20">
9-
@foreach ($discussions as $discussion)
10-
<x-discussions.overview :discussion="$discussion" />
11-
@endforeach
12-
</div>
13-
@else
14-
<x-empty-state>
6+
@if ($discussions->isNotEmpty())
7+
<div class="relative -mt-6 divide-y divide-gray-200 dark:divide-white/20">
8+
@foreach ($discussions as $discussion)
9+
<x-discussions.overview :discussion="$discussion" />
10+
@endforeach
11+
</div>
12+
@else
13+
<x-empty-state>
14+
<div class="relative">
1515
<div class="relative">
16-
<div class="relative">
17-
<div class="absolute -inset-1 bg-gradient-to-r rotate-3 w-72 from-flag-green to-flag-red rounded-lg blur opacity-25"></div>
18-
<div class="relative z-20 bg-white gap-3 rotate-3 p-3 w-72 rounded-lg shadow ring-1 ring-gray-200/50 dark:bg-gray-900 dark:ring-white/10">
19-
<div class="space-y-2">
20-
<div class="grid grid-cols-3 gap-2 w-1/3">
21-
<div class="h-3 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded dark:bg-gray-800"></div>
22-
<div class="h-3 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded dark:bg-gray-800"></div>
23-
</div>
24-
<div class="h-4 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded-md dark:bg-gray-800"></div>
25-
<div class="h-6 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded-md dark:bg-gray-800"></div>
26-
</div>
27-
</div>
28-
</div>
29-
<div class="absolute transform scale-[0.8] bottom-10 right-2 shadow w-40 -rotate-6 z-20 bg-white gap-3 p-3 rounded-lg ring-1 ring-gray-200/50 dark:bg-gray-900 dark:ring-white/10">
16+
<div class="absolute -inset-1 bg-gradient-to-r rotate-3 w-72 from-flag-green to-flag-red rounded-lg blur opacity-25"></div>
17+
<div class="relative z-20 bg-white gap-3 rotate-3 p-3 w-72 rounded-lg shadow ring-1 ring-gray-200/50 dark:bg-gray-900 dark:ring-white/10">
3018
<div class="space-y-2">
31-
<div class="grid grid-cols-3 gap-2 w-2/3">
19+
<div class="grid grid-cols-3 gap-2 w-1/3">
3220
<div class="h-3 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded dark:bg-gray-800"></div>
3321
<div class="h-3 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded dark:bg-gray-800"></div>
3422
</div>
35-
<div class="h-2 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded-md dark:bg-gray-800"></div>
23+
<div class="h-4 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded-md dark:bg-gray-800"></div>
3624
<div class="h-6 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded-md dark:bg-gray-800"></div>
3725
</div>
3826
</div>
3927
</div>
40-
<div class="mt-8 space-y-4">
41-
<p class="mt-8 text-base text-gray-500 dark:text-gray-400">
42-
<span class="font-medium text-gray-700 dark:text-gray-300">{{ $user->name }}</span>
43-
{{ __('pages/account.activities.empty_discussions') }}
44-
</p>
45-
46-
@if ($user->isLoggedInUser())
47-
@can('create', \App\Models\Discussion::class)
48-
<x-buttons.primary
49-
type="button"
50-
onclick="Livewire.dispatch('openPanel', { component: 'components.slideovers.thread-form' })"
51-
>
52-
<x-untitledui-message-text-square class="size-5" aria-hidden="true" />
53-
{{ __('global.launch_modal.discussion_action') }}
54-
</x-buttons.primary>
55-
@endcan
56-
@endif
28+
<div class="absolute transform scale-[0.8] bottom-10 right-2 shadow w-40 -rotate-6 z-20 bg-white gap-3 p-3 rounded-lg ring-1 ring-gray-200/50 dark:bg-gray-900 dark:ring-white/10">
29+
<div class="space-y-2">
30+
<div class="grid grid-cols-3 gap-2 w-2/3">
31+
<div class="h-3 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded dark:bg-gray-800"></div>
32+
<div class="h-3 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded dark:bg-gray-800"></div>
33+
</div>
34+
<div class="h-2 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded-md dark:bg-gray-800"></div>
35+
<div class="h-6 bg-gray-50 ring-1 ring-gray-200/50 dark:ring-white/20 rounded-md dark:bg-gray-800"></div>
36+
</div>
5737
</div>
58-
</x-empty-state>
59-
@endif
60-
</div>
38+
</div>
39+
<div class="mt-8 space-y-4">
40+
<p class="mt-8 text-base text-gray-500 dark:text-gray-400">
41+
<span class="font-medium text-gray-700 dark:text-gray-300">{{ $user->name }}</span>
42+
{{ __('pages/account.activities.empty_discussions') }}
43+
</p>
44+
45+
@if ($user->isLoggedInUser())
46+
@can('create', \App\Models\Discussion::class)
47+
<x-buttons.primary
48+
type="button"
49+
onclick="Livewire.dispatch('openPanel', { component: 'components.slideovers.thread-form' })"
50+
>
51+
<x-untitledui-message-text-square class="size-5" aria-hidden="true" />
52+
{{ __('global.launch_modal.discussion_action') }}
53+
</x-buttons.primary>
54+
@endcan
55+
@endif
56+
</div>
57+
</x-empty-state>
58+
@endif

0 commit comments

Comments
 (0)