Mercurial > packages > magicforger
diff src/Generator/View/stubs/index.stub @ 32:45f384a24553 codex
Support for server side tables
| author | Luka Sitas <sitas.luka.97@gmail.com> |
|---|---|
| date | Tue, 19 Aug 2025 22:15:50 -0400 |
| parents | 8dd668020310 |
| children |
line wrap: on
line diff
--- a/src/Generator/View/stubs/index.stub Tue Aug 19 20:34:53 2025 -0400 +++ b/src/Generator/View/stubs/index.stub Tue Aug 19 22:15:50 2025 -0400 @@ -8,43 +8,76 @@ <div class="py-5"> <div class="container"> <div class="bg-white shadow-sm rounded p-4"> - <div class="d-flex align-items-center justify-content-between mb-3"> - <span></span> - <a href="{{ route('{{ tableName }}.create') }}" class="btn btn-primary"> - + New {{ ucfirst('{{ modelVariable }}') }} - </a> - </div> - <table class="table table-hover"> - <thead> - <tr> - {{ headerInsertPoint }} - <th scope="col">Actions</th> - </tr> - </thead> - <tbody> - @forelse ($items as $item) - <tr> - {{ valueInsertPoint }} - <td> - <div class="d-flex gap-2"> - <a href="{{ route('{{ tableName }}.show', $item) }}" class="text-primary">View</a> - <a href="{{ route('{{ tableName }}.edit', $item) }}" class="text-warning">Edit</a> - <form action="{{ route('{{ tableName }}.destroy', $item) }}" method="POST" class="d-inline"> - @csrf - @method('DELETE') - <button type="submit" class="btn btn-link text-danger p-0" onclick="return confirm('Delete?')">Delete</button> - </form> - </div> - </td> - </tr> - @empty - <tr> - <td colspan="{{ colCount }}">No {{ tableName }} found.</td> - </tr> - @endforelse - </tbody> - </table> + <div class="d-flex align-items-center justify-content-between mb-3"> + <a href="{{ route('{{ tableName }}.create') }}" class="btn btn-primary"> + + New {{ ucfirst('{{ modelVariable }}') }} + </a> </div> + <div id="my-table"></div> + </div> </div> </div> + + @include('includes.ServerTable') + @pushOnce('scripts') + <meta name="csrf-token" content="{{ csrf_token() }}"> + @endpushOnce + <script> + document.addEventListener('DOMContentLoaded', function() { + const el = document.getElementById('my-table'); + if (el) { + new ServerTable(el, { + endpoint: '/{{ tableName }}/get_data', + columns: [ + {{ columnInsertPoint }} + { + name: 'actions', + label: ' ', + render: function(row, col, i) { + let actions = ` + <div class="d-flex gap-2"> + <a href="{{ route('{{ tableName }}.show', 'PLACEHOLDER') }}" class="text-primary">View</a> + <a href="{{ route('{{ tableName }}.edit', 'PLACEHOLDER') }}" class="text-warning">Edit</a> + <form action="{{ route('{{ tableName }}.destroy', 'PLACEHOLDER') }}" method="POST" + class="d-inline"> + @csrf + @method('DELETE') + <button type="submit" class="btn btn-link text-danger p-0" + onclick="return confirm('Delete?')">Delete</button> + </form> + </div> + `; + actions = actions.split('PLACEHOLDER').join(row.id); + return actions; + } + } + ], + pageSize: 10, + initialSort: [{ + col: 'created_at', + dir: 'desc' + }], + headers: { + 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute( + 'content') + }, + skeleton: ` + <div class="st-table-container"> + <table class="table table-hover"> + <thead> + </thead> + <tbody> + <!-- Data rows will go here --> + </tbody> + </table> + <div class="st-controls"> + <span class="st-pagination"></span> + <span class="st-status"></span> + </div> + </div> + ` + }); + } + }); + </script> </x-app-layout>