From 9fd41dd69ef347c7b5e6b60668b51026a85692d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=2E=20Nagy=20Gerg=C5=91?= <hello@iamgergo.com>
Date: Tue, 28 Nov 2023 10:36:59 +0100
Subject: [PATCH] refactor relation table

---
 resources/views/resources/index.blade.php    |   2 +-
 resources/views/resources/relation.blade.php |  27 ++++-
 resources/views/table/body.blade.php         | 110 ++++++++++++++++++
 resources/views/table/table.blade.php        | 111 +------------------
 4 files changed, 138 insertions(+), 112 deletions(-)
 create mode 100644 resources/views/table/body.blade.php

diff --git a/resources/views/resources/index.blade.php b/resources/views/resources/index.blade.php
index c438ce68..69101599 100644
--- a/resources/views/resources/index.blade.php
+++ b/resources/views/resources/index.blade.php
@@ -8,7 +8,7 @@
     @can('create', $model)
         <a href="{{ $url }}/create" class="btn btn--primary btn--icon">
             <x-root::icon name="plus" class="btn__icon" />
-            {{ __('Add :model', ['model' => $modelName]) }}
+            {{ __('Add :resource', ['resource' => $modelName]) }}
         </a>
     @endcan
 @endsection
diff --git a/resources/views/resources/relation.blade.php b/resources/views/resources/relation.blade.php
index 7372df7d..3b52f632 100644
--- a/resources/views/resources/relation.blade.php
+++ b/resources/views/resources/relation.blade.php
@@ -1,3 +1,28 @@
 <turbo-frame id="relation-{{ $attribute }}">
-    @include('root::table.table')
+    <div class="app-card" x-data="table()">
+        <div class="app-card__header">
+            <h2 class="app-card__title">
+                <a href="{{ $url }}" data-turbo-frame="_top">{{ $title }}</a>
+            </h2>
+            <div class="app-card__actions">
+                @can('create', $model)
+                    <a href="{{ $url }}/create" class="btn btn--primary btn--icon" data-turbo-frame="_top">
+                        <x-root::icon name="plus" class="btn__icon" />
+                        {{ __('Add :resource', ['resource' => $modelName]) }}
+                    </a>
+                @endcan
+                @include('root::table.filters')
+            </div>
+        </div>
+        @include('root::table.body')
+    </div>
+
+    {{-- Script --}}
+    @pushOnce('scripts')
+        {{
+            Vite::withEntryPoints('resources/js/table.js')
+                ->useBuildDirectory('vendor/root/build')
+                ->useHotFile(public_path('vendor/root/hot'))
+        }}
+    @endpushOnce
 </turbo-frame>
diff --git a/resources/views/table/body.blade.php b/resources/views/table/body.blade.php
new file mode 100644
index 00000000..eaaee96d
--- /dev/null
+++ b/resources/views/table/body.blade.php
@@ -0,0 +1,110 @@
+<div class="app-card__body">
+    <div class="data-table">
+        @includeWhen(! empty($actions), 'root::table.actions')
+        @if($data->isNotEmpty())
+            <div class="table-responsive">
+                <table class="table table--hover">
+                    <thead>
+                        <tr>
+                            @if(! empty($actions))
+                                <th style="inline-size: 3.25rem;" scope="col">
+                                    <span class="sr-only">{{ __('Select') }}</span>
+                                    <label class="form-check" aria-label="{{ __('Select all items') }}">
+                                        <input
+                                            class="form-check__control"
+                                            type="checkbox"
+                                            x-on:change="selection = event.target.checked ? {{ $data->pluck('id')->toJson() }} : []"
+                                        >
+                                    </label>
+                                </th>
+                            @endif
+                            @foreach($data[0]['fields'] as $column)
+                                @include('root::table.column', $column)
+                            @endforeach
+                            <th scope="col">
+                                <span class="sr-only">{{ __('Actions') }}</span>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        @foreach($data as $row)
+                            <tr>
+                                @if(! empty($actions))
+                                    <td>
+                                        <label class="form-check" aria-label="">
+                                            <input
+                                                class="form-check__control"
+                                                type="checkbox"
+                                                value="{{ $row['id'] }}"
+                                                x-model="selection"
+                                            >
+                                        </label>
+                                    </td>
+                                @endif
+                                @foreach($row['fields'] as $cell)
+                                    @include('root::table.cell', $cell)
+                                @endforeach
+                                <td>
+                                    <div class="data-table__actions">
+                                        @can('view', $row['model'])
+                                            <a href="{{ $row['url'] }}" class="btn btn--light btn--sm btn--icon" aria-label="{{ __('View') }}" data-turbo-frame="_top">
+                                                <x-root::icon name="eye" class="btn__icon" />
+                                            </a>
+                                        @endcan
+                                        @can('update', $row['model'])
+                                            <a href="{{ $row['url'] }}/edit" class="btn btn--light btn--sm btn--icon" aria-label="{{ __('Edit') }}" data-turbo-frame="_top">
+                                                <x-root::icon name="edit" class="btn__icon" />
+                                            </a>
+                                        @endcan
+                                        @can('delete', $row['model'])
+                                            <form action="{{ $row['url'] }}" method="POST" onsubmit="return window.confirm('{{ __('Are you sure?') }}');">
+                                                @csrf
+                                                @method('DELETE')
+                                                <button type="submit" class="btn btn--delete btn--sm btn--icon" aria-label="{{ __('Delete') }}">
+                                                    <x-root::icon name="trash" class="btn__icon" />
+                                                </button>
+                                            </form>
+                                        @endcan
+                                    </div>
+                                </td>
+                            </tr>
+                        @endforeach
+                    </tbody>
+                </table>
+            </div>
+            <div class="data-table__footer">
+                <div class="data-table__footer-column">
+                    <div class="form-group">
+                        <label class="sr-only" for="per_page">
+                            {{ __('Number of results') }}
+                        </label>
+                        <select
+                            form="{{ $key }}"
+                            class="form-control form-control--sm"
+                            id="per_page"
+                            name="{{ $perPageKey }}"
+                            onchange="this.form.requestSubmit()"
+                        >
+                            @foreach($perPageOptions as $option)
+                                <option value="{{ $option }}" @selected($option === $data->perPage())>
+                                    {{ $option }}
+                                </option>
+                            @endforeach
+                            @if(! in_array($data->perPage(), $perPageOptions))
+                                <option value="{{ $data->perPage() }}" selected>
+                                    {{ __('Custom (:perPage)', ['perPage' => $data->perPage()]) }}
+                                </option>
+                            @endif
+                        </select>
+                    </div>
+                    <p>{{ __('Showing :from to :to of :total results', ['from' => $data->firstItem(), 'to' => $data->lastItem(), 'total' => $data->total()]) }}</p>
+                </div>
+                {!! $data->links('root::table.pagination') !!}
+            </div>
+        @else
+            <x-root::alert>
+                {{ __('No results found.') }}
+            </x-root::alert>
+        @endif
+    </div>
+</div>
diff --git a/resources/views/table/table.blade.php b/resources/views/table/table.blade.php
index 6a82332f..d41eca50 100644
--- a/resources/views/table/table.blade.php
+++ b/resources/views/table/table.blade.php
@@ -5,116 +5,7 @@
             @include('root::table.filters')
         </div>
     </div>
-    <div class="app-card__body">
-        <div class="data-table">
-            @includeWhen(! empty($actions), 'root::table.actions')
-            @if($data->isNotEmpty())
-                <div class="table-responsive">
-                    <table class="table table--hover">
-                        <thead>
-                            <tr>
-                                @if(! empty($actions))
-                                    <th style="inline-size: 3.25rem;" scope="col">
-                                        <span class="sr-only">{{ __('Select') }}</span>
-                                        <label class="form-check" aria-label="{{ __('Select all items') }}">
-                                            <input
-                                                class="form-check__control"
-                                                type="checkbox"
-                                                x-on:change="selection = event.target.checked ? {{ $data->pluck('id')->toJson() }} : []"
-                                            >
-                                        </label>
-                                    </th>
-                                @endif
-                                @foreach($data[0]['fields'] as $column)
-                                    @include('root::table.column', $column)
-                                @endforeach
-                                <th scope="col">
-                                    <span class="sr-only">{{ __('Actions') }}</span>
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            @foreach($data as $row)
-                                <tr>
-                                    @if(! empty($actions))
-                                        <td>
-                                            <label class="form-check" aria-label="">
-                                                <input
-                                                    class="form-check__control"
-                                                    type="checkbox"
-                                                    value="{{ $row['id'] }}"
-                                                    x-model="selection"
-                                                >
-                                            </label>
-                                        </td>
-                                    @endif
-                                    @foreach($row['fields'] as $cell)
-                                        @include('root::table.cell', $cell)
-                                    @endforeach
-                                    <td>
-                                        <div class="data-table__actions">
-                                            @can('view', $row['model'])
-                                                <a href="{{ $row['url'] }}" class="btn btn--light btn--sm btn--icon" aria-label="{{ __('View') }}" data-turbo-frame="_top">
-                                                    <x-root::icon name="eye" class="btn__icon" />
-                                                </a>
-                                            @endcan
-                                            @can('update', $row['model'])
-                                                <a href="{{ $row['url'] }}/edit" class="btn btn--light btn--sm btn--icon" aria-label="{{ __('Edit') }}" data-turbo-frame="_top">
-                                                    <x-root::icon name="edit" class="btn__icon" />
-                                                </a>
-                                            @endcan
-                                            @can('delete', $row['model'])
-                                                <form action="{{ $row['url'] }}" method="POST" onsubmit="return window.confirm('{{ __('Are you sure?') }}');">
-                                                    @csrf
-                                                    @method('DELETE')
-                                                    <button type="submit" class="btn btn--delete btn--sm btn--icon" aria-label="{{ __('Delete') }}">
-                                                        <x-root::icon name="trash" class="btn__icon" />
-                                                    </button>
-                                                </form>
-                                            @endcan
-                                        </div>
-                                    </td>
-                                </tr>
-                            @endforeach
-                        </tbody>
-                    </table>
-                </div>
-                <div class="data-table__footer">
-                    <div class="data-table__footer-column">
-                        <div class="form-group">
-                            <label class="sr-only" for="per_page">
-                                {{ __('Number of results') }}
-                            </label>
-                            <select
-                                form="{{ $key }}"
-                                class="form-control form-control--sm"
-                                id="per_page"
-                                name="{{ $perPageKey }}"
-                                onchange="this.form.requestSubmit()"
-                            >
-                                @foreach($perPageOptions as $option)
-                                    <option value="{{ $option }}" @selected($option === $data->perPage())>
-                                        {{ $option }}
-                                    </option>
-                                @endforeach
-                                @if(! in_array($data->perPage(), $perPageOptions))
-                                    <option value="{{ $data->perPage() }}" selected>
-                                        {{ __('Custom (:perPage)', ['perPage' => $data->perPage()]) }}
-                                    </option>
-                                @endif
-                            </select>
-                        </div>
-                        <p>{{ __('Showing :from to :to of :total results', ['from' => $data->firstItem(), 'to' => $data->lastItem(), 'total' => $data->total()]) }}</p>
-                    </div>
-                    {!! $data->links('root::table.pagination') !!}
-                </div>
-            @else
-                <x-root::alert>
-                    {{ __('No results found.') }}
-                </x-root::alert>
-            @endif
-        </div>
-    </div>
+    @include('root::table.body')
 </div>
 
 {{-- Script --}}