Mercurial > packages > magicforger

comparison src/Generator/View/stubs/index.stub @ 32:45f384a24553 codex

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
31:8dd668020310 32:45f384a24553
6 </x-slot> 6 </x-slot>
7 7
8 <div class="py-5"> 8 <div class="py-5">
9 <div class="container"> 9 <div class="container">
10 <div class="bg-white shadow-sm rounded p-4"> 10 <div class="bg-white shadow-sm rounded p-4">
11 <div class="d-flex align-items-center justify-content-between mb-3"> 11 <div class="d-flex align-items-center justify-content-between mb-3">
12 <span></span> 12 <a href="{{ route('{{ tableName }}.create') }}" class="btn btn-primary">
13 <a href="{{ route('{{ tableName }}.create') }}" class="btn btn-primary"> 13 + New {{ ucfirst('{{ modelVariable }}') }}
14 + New {{ ucfirst('{{ modelVariable }}') }} 14 </a>
15 </a>
16 </div>
17 <table class="table table-hover">
18 <thead>
19 <tr>
20 {{ headerInsertPoint }}
21 <th scope="col">Actions</th>
22 </tr>
23 </thead>
24 <tbody>
25 @forelse ($items as $item)
26 <tr>
27 {{ valueInsertPoint }}
28 <td>
29 <div class="d-flex gap-2">
30 <a href="{{ route('{{ tableName }}.show', $item) }}" class="text-primary">View</a>
31 <a href="{{ route('{{ tableName }}.edit', $item) }}" class="text-warning">Edit</a>
32 <form action="{{ route('{{ tableName }}.destroy', $item) }}" method="POST" class="d-inline">
33 @csrf
34 @method('DELETE')
35 <button type="submit" class="btn btn-link text-danger p-0" onclick="return confirm('Delete?')">Delete</button>
36 </form>
37 </div>
38 </td>
39 </tr>
40 @empty
41 <tr>
42 <td colspan="{{ colCount }}">No {{ tableName }} found.</td>
43 </tr>
44 @endforelse
45 </tbody>
46 </table>
47 </div> 15 </div>
16 <div id="my-table"></div>
17 </div>
48 </div> 18 </div>
49 </div> 19 </div>
20
21 @include('includes.ServerTable')
22 @pushOnce('scripts')
23 <meta name="csrf-token" content="{{ csrf_token() }}">
24 @endpushOnce
25 <script>
26 document.addEventListener('DOMContentLoaded', function() {
27 const el = document.getElementById('my-table');
28 if (el) {
29 new ServerTable(el, {
30 endpoint: '/{{ tableName }}/get_data',
31 columns: [
32 {{ columnInsertPoint }}
33 {
34 name: 'actions',
35 label: ' ',
36 render: function(row, col, i) {
37 let actions = `
38 <div class="d-flex gap-2">
39 <a href="{{ route('{{ tableName }}.show', 'PLACEHOLDER') }}" class="text-primary">View</a>
40 <a href="{{ route('{{ tableName }}.edit', 'PLACEHOLDER') }}" class="text-warning">Edit</a>
41 <form action="{{ route('{{ tableName }}.destroy', 'PLACEHOLDER') }}" method="POST"
42 class="d-inline">
43 @csrf
44 @method('DELETE')
45 <button type="submit" class="btn btn-link text-danger p-0"
46 onclick="return confirm('Delete?')">Delete</button>
47 </form>
48 </div>
49 `;
50 actions = actions.split('PLACEHOLDER').join(row.id);
51 return actions;
52 }
53 }
54 ],
55 pageSize: 10,
56 initialSort: [{
57 col: 'created_at',
58 dir: 'desc'
59 }],
60 headers: {
61 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
62 'content')
63 },
64 skeleton: `
65 <div class="st-table-container">
66 <table class="table table-hover">
67 <thead>
68 </thead>
69 <tbody>
70 <!-- Data rows will go here -->
71 </tbody>
72 </table>
73 <div class="st-controls">
74 <span class="st-pagination"></span>
75 <span class="st-status"></span>
76 </div>
77 </div>
78 `
79 });
80 }
81 });
82 </script>
50 </x-app-layout> 83 </x-app-layout>