Skip to content

Commit e41c984

Browse files
joedixonjoedixon
committed
Refactor modal to blade component
1 parent 78daaf7 commit e41c984

File tree

13 files changed

+178
-142
lines changed

13 files changed

+178
-142
lines changed

‎app/View/Components/Modal.php

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<?php
2+
3+
namespace App\View\Components;
4+
5+
use Illuminate\View\Component;
6+
7+
class Modal extends Component
8+
{
9+
public $identifier;
10+
11+
public $title;
12+
13+
public $action;
14+
15+
public $type;
16+
17+
public $submitLabel;
18+
19+
public function __construct(string $identifier, string $title, string $action, string $type = 'delete', string $submitLabel = null)
20+
{
21+
$this->identifier = $identifier;
22+
$this->title = $title;
23+
$this->action = $action;
24+
$this->type = $type;
25+
$this->submitLabel = $submitLabel ?: $this->title;
26+
}
27+
28+
public function render()
29+
{
30+
return view('components.modal');
31+
}
32+
33+
public function method()
34+
{
35+
switch ($this->type) {
36+
case 'delete':
37+
return 'delete';
38+
case 'update':
39+
return 'put';
40+
default:
41+
return 'post';
42+
}
43+
}
44+
}

‎resources/views/_partials/_delete_modal.blade.php

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎resources/views/articles/show.blade.php

Lines changed: 43 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -158,52 +158,65 @@ class="prose prose-lg text-gray-800 prose-lio"
158158

159159
@can(App\Policies\ArticlePolicy::APPROVE, $article)
160160
@if ($article->isAwaitingApproval())
161-
@include('_partials._update_modal', [
162-
'identifier' => 'approveArticle',
163-
'route' => ['admin.articles.approve', $article->slug()],
164-
'title' => "Approve article",
165-
'body' => '<p>Are you sure you want to approve this article?</p>',
166-
])
161+
<x-modal
162+
identifier="approveArticle"
163+
:action="route('admin.articles.approve', $article->slug())"
164+
title="Approve article"
165+
type="update"
166+
>
167+
<p>Are you sure you want to approve this article?</p>
168+
</x-modal>
167169
@endif
168170
@endcan
169171

170172
@can(App\Policies\ArticlePolicy::DISAPPROVE, $article)
171173
@if ($article->isPublished())
172-
@include('_partials._update_modal', [
173-
'identifier' => 'disapproveArticle',
174-
'route' => ['admin.articles.disapprove', $article->slug()],
175-
'title' => "Disapprove article",
176-
'body' => '<p>Are you sure you want to disapprove this article? Doing so will mean it is no longer live on the site.</p>',
177-
])
174+
<x-modal
175+
identifier="unpublishArticle"
176+
:action="route('admin.articles.disapprove', $article->slug())"
177+
title="Unpublish article"
178+
type="update"
179+
>
180+
<p>Are you sure you want to unpublish this article? Doing so will mean it is no longer live on the site.</p>
181+
</x-modal>
178182
@endif
179183
@endcan
180184

181185
@can(App\Policies\ArticlePolicy::DECLINE, $article)
182186
@if ($article->isNotDeclined())
183-
@include('_partials._update_modal', [
184-
'identifier' => 'declineArticle',
185-
'route' => ['admin.articles.decline', $article->slug()],
186-
'title' => "Decline article",
187-
'body' => '<p>Are you sure you want to decline this article? Doing so will permanently remove it from the review queue.</p>',
188-
])
187+
<x-modal
188+
identifier="declineArticle"
189+
:action="route('admin.articles.decline', $article->slug())"
190+
title="Decline article"
191+
type="update"
192+
>
193+
<p>Are you sure you want to decline this article? Doing so will permanently remove it from the review queue.</p>
194+
</x-modal>
189195
@endif
190196
@endcan
191197

192198
@can(App\Policies\ArticlePolicy::DELETE, $article)
193-
@include('_partials._delete_modal', [
194-
'identifier' => 'deleteArticle',
195-
'route' => ['articles.delete', $article->slug()],
196-
'title' => "Delete article",
197-
'body' => '<p>Are you sure you want to delete this article? Doing so will mean it is permanently removed from the site.</p>',
198-
])
199+
<x-modal
200+
identifier="deleteArticle"
201+
:action="route('articles.delete', $article->slug())"
202+
title="Delete article"
203+
>
204+
<p>Are you sure you want to delete this article? Doing so will mean it is permanently removed from the site.</p>
205+
</x-modal>
199206
@endcan
200207

201208
@can(App\Policies\ArticlePolicy::PINNED, $article)
202-
@include('_partials._update_modal', [
203-
'identifier' => 'togglePinnedStatus',
204-
'route' => ['admin.articles.pinned', $article->slug()],
205-
'title' => $article->isPinned() ? "Unpin article" : "Pin article",
206-
'body' => $article->isPinned() ? '<p>Are you sure you want to unpin this article?</p>' : '<p>Are you sure you want to pin this article?</p>',
207-
])
209+
<x-modal
210+
identifier="togglePinnedStatus"
211+
:action="route('admin.articles.pinned', $article->slug())"
212+
:title="$article->isPinned() ? 'Unpin article' : 'Pin article'"
213+
type="update"
214+
>
215+
@if ($article->isPinned())
216+
<p>Are you sure you want to unpin this article?</p>
217+
@else
218+
<p>Are you sure you want to pin this article?</p>
219+
@endif
220+
</x-modal>
208221
@endcan
209222
@endsection

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ class="w-full"
2121
@can(App\Policies\ArticlePolicy::APPROVE, $article)
2222
<x-buttons.secondary-button
2323
tag="button"
24-
@click.prevent="$dispatch('open-modal', 'approveArticle')"
24+
@click.prevent="activeModal = 'approveArticle'"
2525
@mouseover="hovered = 'publish'"
2626
@mouseleave="hovered = false"
2727
class="w-full"
@@ -36,7 +36,7 @@ class="w-full"
3636
@can(App\Policies\ArticlePolicy::DECLINE, $article)
3737
<x-buttons.secondary-button
3838
tag="button"
39-
@click.prevent="$dispatch('open-modal', 'declineArticle')"
39+
@click.prevent="activeModal = 'declineArticle'"
4040
@mouseover="hovered = 'decline'"
4141
@mouseleave="hovered = false"
4242
class="w-full"
@@ -51,7 +51,7 @@ class="w-full"
5151
@can(App\Policies\ArticlePolicy::DISAPPROVE, $article)
5252
<x-buttons.secondary-button
5353
tag="button"
54-
@click.prevent="$dispatch('open-modal', 'disapproveArticle')"
54+
@click.prevent="activeModal = 'unpublishArticle'"
5555
@mouseover="hovered = 'unpublish'"
5656
@mouseleave="hovered = false"
5757
class="w-full"
@@ -67,7 +67,7 @@ class="w-full"
6767
@can(App\Policies\ArticlePolicy::PINNED, $article)
6868
<x-buttons.secondary-button
6969
tag="button"
70-
@click.prevent="$dispatch('open-modal', 'togglePinnedStatus')"
70+
@click.prevent="activeModal = 'togglePinnedStatus'"
7171
@mouseover="hovered = 'pin'"
7272
@mouseleave="hovered = false"
7373
:selected="$article->isPinned()"
@@ -84,7 +84,7 @@ class="w-full"
8484
@can(App\Policies\ArticlePolicy::DELETE, $article)
8585
<x-buttons.danger-button
8686
tag="button"
87-
@click.prevent="$dispatch('open-modal', 'deleteArticle')"
87+
@click.prevent="activeModal = 'deleteArticle'"
8888
@mouseover="hovered = 'delete'"
8989
@mouseleave="hovered = false"
9090
class="w-full"

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@
55
class="w-full flex justify-center font-medium rounded-l px-5 py-2 border {{ $selectedFilter === 'recent' ? 'bg-gray-900 text-white border-gray-900 hover:bg-gray-800' : 'bg-white text-gray-800 border-gray-200 hover:bg-gray-100' }}"
66
>
77
Recent
8-
</button>
8+
</a>
99

1010
<a
1111
href="{{ route('articles', ['filter' => 'popular', 'tag' => $activeTag?->name()]) . '#articles' }}"
1212
aria-current="{{ $selectedFilter === 'popular' ? 'page' : 'false' }}"
1313
class="w-full flex justify-center font-medium px-5 py-2 border-t border-b {{ $selectedFilter === 'popular' ? 'bg-gray-900 text-white border-gray-900 hover:bg-gray-800' : 'bg-white text-gray-800 border-gray-200 hover:bg-gray-100' }}"
1414
>
1515
Popular
16-
</button>
16+
</a>
1717

1818
<a
1919
href="{{ route('articles', ['filter' => 'trending', 'tag' => $activeTag?->name()]) . '#articles' }}"
@@ -22,5 +22,5 @@ class="w-full flex items-center gap-x-2 justify-center font-medium rounded-r px-
2222
>
2323
Trending
2424
<x-heroicon-o-fire class="w-5 h-5" />
25-
</button>
25+
</a>
2626
</div>

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -133,15 +133,15 @@ class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:t
133133
</span>
134134
@endif
135135
</div>
136-
137-
@unless (Auth::user()->twitter())
138-
<span class="text-gray-600 text-sm mt-4 block">
139-
Articles will be shared on Twitter.
140-
<a href="{{ route('settings.profile') }}" class="text-green-darker">Add your Twitter handle</a>
141-
and we'll include that too.
142-
</span>
143-
@endunless
144136
</div>
137+
138+
@unless (Auth::user()->twitter())
139+
<span class="text-gray-600 text-sm mt-4 block">
140+
Articles will be shared on Twitter.
141+
<a href="{{ route('settings.profile') }}" class="text-green-darker">Add your Twitter handle</a>
142+
and we'll include that too.
143+
</span>
144+
@endunless
145145
</div>
146146
</div>
147147
</x-buk-form>

‎resources/views/_partials/_update_modal.blade.php renamed to ‎resources/views/components/modal.blade.php

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
@push('modals')
22
<div class="modal" x-show="activeModal == '{{ $identifier }}'" x-cloak>
3-
<div class="modal-content">
4-
<form action="{{ route(...$route) }}" method="POST">
5-
@csrf
6-
@method('PUT')
7-
3+
<div class="modal-content" @click.outside="activeModal = false">
4+
<x-buk-form :action="$action" :method="$method()">
85
<div class="flex flex-col justify-between h-full">
96
<div class="overflow-auto">
107
<div class="modal-header">
@@ -14,17 +11,17 @@
1411
</div>
1512

1613
<div class="modal-body">
17-
{!! $body !!}
14+
{{ $slot }}
1815
</div>
1916
</div>
2017

2118
<div class="modal-footer">
2219
<button type="button" class="text-gray-600 mr-4" @click.prevent="activeModal = false">Cancel</button>
2320

24-
<button type="submit" class="button button-primary">{{ $submit ?? $title }}</button>
21+
<button type="submit" class="button {{ $type === 'delete' ? 'button-danger' : 'button-primary' }}">{{ $submit ?? $title }}</button>
2522
</div>
2623
</div>
27-
</form>
24+
</x-buk-form>
2825
</div>
2926
</div>
30-
@endpush
27+
@endpush

‎resources/views/components/tag-filter.blade.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ class="flex flex-col bg-white rounded-md shadow max-h-full"
1717
<div class="flex justify-between items-center mb-2" x-cloak>
1818
<h3 class="text-3xl font-semibold">Filter tag</h3>
1919

20-
<button @click="$dispatch('close-modal')">
20+
<button @click="activeModal = false">
2121
<x-heroicon-o-x class="w-6 h-6" />
2222
</button>
2323
</div>
@@ -64,7 +64,7 @@ class="ml-3 w-6 h-6 text-lio-500"
6464
</div>
6565

6666
<div class="flex gap-x-2 justify-end p-4">
67-
<x-buttons.secondary-button @click="$dispatch('close-modal')">
67+
<x-buttons.secondary-button @click="activeModal = false">
6868
Cancel
6969
</x-buttons.secondary-button>
7070

‎resources/views/components/threads/reply-menu.blade.php

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,33 +11,37 @@
1111
@if ($thread->isSolutionReply($reply))
1212
<button
1313
class="flex items-center gap-x-2 font-medium text-lio-500 hover:text-gray-300"
14-
@click="$dispatch('open-modal', 'unmark-solution-{{ $thread->id }}')"
14+
@click="activeModal = 'unmarkSolution-{{ $thread->id }}'"
1515
>
1616
<x-heroicon-o-badge-check class="w-6 h-6" />
1717
<span class="hidden lg:block">Unmark Solution</span>
1818
</button>
1919

20-
@include('_partials._update_modal', [
21-
'identifier' => "unmark-solution-{$thread->id}",
22-
'route' => ['threads.solution.unmark', $thread->slug()],
23-
'title' => 'Unmark As Solution',
24-
'body' => '<p>Confirm to unmark this reply as the solution for <strong>"'.e($thread->subject()).'"</strong>.</p>',
25-
])
20+
<x-modal
21+
identifier="unmarkSolution-{{ $thread->id }}"
22+
:action="route('threads.solution.unmark', $thread->slug())"
23+
title="Unmark As Solution"
24+
type="update"
25+
>
26+
<p>Confirm to unmark this reply as the solution for <strong>"{{ $thread->subject() }}"</strong>.</p>
27+
</x-modal>
2628
@else
2729
<button
2830
class="flex items-center gap-x-2 font-medium text-gray-300 hover:text-lio-500"
29-
@click="$dispatch('open-modal', 'mark-solution-{{ $reply->id }}')"
31+
@click="activeModal = 'markSolution-{{ $reply->id }}'"
3032
>
3133
<x-heroicon-o-badge-check class="w-6 h-6" />
3234
<span class="hidden lg:block">Mark Solution</span>
3335
</button>
3436

35-
@include('_partials._update_modal', [
36-
'identifier' => "mark-solution-{$reply->id}",
37-
'route' => ['threads.solution.mark', [$thread->slug(), $reply->id()]],
38-
'title' => 'Mark As Solution',
39-
'body' => '<p>Confirm to mark this reply as the solution for <strong>"'.e($thread->subject()).'"</strong>.</p>',
40-
])
37+
<x-modal
38+
identifier="markSolution-{{ $reply->id }}"
39+
:action="route('threads.solution.mark', [$thread->slug(), $reply->id()])"
40+
title="Mark As Solution"
41+
type="update"
42+
>
43+
<p>Confirm to mark this reply as the solution for <strong>"{{ $thread->subject() }}"</strong>.</p>
44+
</x-modal>
4145
@endif
4246
@else
4347
@if ($thread->isSolutionReply($reply))
@@ -69,18 +73,19 @@ class="absolute top-12 right-1 flex flex-col bg-white rounded shadow w-48"
6973
Edit
7074
</a>
7175

72-
<button class="flex gap-x-2 p-3 rounded hover:bg-gray-100" @click="$dispatch('open-modal', 'delete-reply-{{ $reply->id }}')">
76+
<button class="flex gap-x-2 p-3 rounded hover:bg-gray-100" @click="activeModal = 'deleteReply-{{ $reply->id }}'">
7377
<x-heroicon-o-trash class="w-6 h-6 text-red-500"/>
7478
Delete
7579
</button>
7680
</div>
7781
</div>
7882

79-
@include('_partials._delete_modal', [
80-
'identifier' => "delete-reply-{$reply->id}",
81-
'route' => ['replies.delete', $reply->id()],
82-
'title' => 'Delete Reply',
83-
'body' => '<p>Are you sure you want to delete this reply? This cannot be undone.</p>',
84-
])
83+
<x-modal
84+
identifier="deleteReply-{{ $reply->id }}"
85+
:action="route('replies.delete', $reply->id())"
86+
title="Delete Reply"
87+
>
88+
<p>Are you sure you want to delete this reply? This cannot be undone.</p>
89+
</x-modal>
8590
@endcan
8691
</div>

0 commit comments

Comments
 (0)