|
2
|
1 <x-app-layout>
|
|
|
2 <x-slot name="header">
|
|
|
3 <h2 class="fw-semibold fs-4 text-dark">
|
|
|
4 All {{ Str::plural(ucfirst('client')) }}
|
|
|
5 </h2>
|
|
|
6 </x-slot>
|
|
|
7
|
|
|
8 <div class="py-5">
|
|
|
9 <div class="container">
|
|
|
10 <div class="bg-white shadow-sm rounded p-4">
|
|
|
11 <div class="d-flex align-items-center justify-content-between mb-3">
|
|
|
12 <a href="{{ route('clients.create') }}" class="btn btn-primary">
|
|
|
13 + New {{ ucfirst('client') }}
|
|
|
14 </a>
|
|
|
15 </div>
|
|
|
16 <div id="my-table"></div>
|
|
|
17 </div>
|
|
|
18 </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: '/clients/get_data',
|
|
|
31 columns: [
|
|
|
32 {
|
|
|
33 name: 'name',
|
|
|
34 label: 'Name',
|
|
|
35 class: 'p-2'
|
|
|
36 },
|
|
|
37
|
|
|
38 {
|
|
|
39 name: 'email',
|
|
|
40 label: 'Email',
|
|
|
41 class: 'p-2'
|
|
|
42 },
|
|
|
43
|
|
|
44 {
|
|
|
45 name: 'phone_number',
|
|
|
46 label: 'Phone Number',
|
|
|
47 class: 'p-2'
|
|
|
48 },
|
|
|
49
|
|
|
50 {
|
|
|
51 name: 'address',
|
|
|
52 label: 'Address',
|
|
|
53 class: 'p-2'
|
|
|
54 },
|
|
|
55
|
|
|
56 {
|
|
|
57 name: 'notes',
|
|
|
58 label: 'Notes',
|
|
|
59 class: 'p-2'
|
|
|
60 },
|
|
|
61
|
|
|
62 {
|
|
|
63 name: 'actions',
|
|
|
64 label: ' ',
|
|
|
65 render: function(row, col, i) {
|
|
|
66 let actions = `
|
|
|
67 <div class="d-flex gap-2">
|
|
|
68 <a href="{{ route('clients.show', 'PLACEHOLDER') }}" class="text-primary">View</a>
|
|
|
69 <a href="{{ route('clients.edit', 'PLACEHOLDER') }}" class="text-warning">Edit</a>
|
|
|
70 <form action="{{ route('clients.destroy', 'PLACEHOLDER') }}" method="POST"
|
|
|
71 class="d-inline">
|
|
|
72 @csrf
|
|
|
73 @method('DELETE')
|
|
|
74 <button type="submit" class="btn btn-link text-danger p-0"
|
|
|
75 onclick="return confirm('Delete?')">Delete</button>
|
|
|
76 </form>
|
|
|
77 </div>
|
|
|
78 `;
|
|
|
79 actions = actions.split('PLACEHOLDER').join(row.id);
|
|
|
80 return actions;
|
|
|
81 }
|
|
|
82 }
|
|
|
83 ],
|
|
|
84 pageSize: 10,
|
|
|
85 initialSort: [{
|
|
|
86 col: 'created_at',
|
|
|
87 dir: 'desc'
|
|
|
88 }],
|
|
|
89 headers: {
|
|
|
90 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
|
|
|
91 'content')
|
|
|
92 },
|
|
|
93 skeleton: `
|
|
|
94 <div class="st-table-container">
|
|
|
95 <table class="table table-hover">
|
|
|
96 <thead>
|
|
|
97 </thead>
|
|
|
98 <tbody>
|
|
|
99 <!-- Data rows will go here -->
|
|
|
100 </tbody>
|
|
|
101 </table>
|
|
|
102 <div class="st-controls">
|
|
|
103 <span class="st-pagination"></span>
|
|
|
104 <span class="st-status"></span>
|
|
|
105 </div>
|
|
|
106 </div>
|
|
|
107 `
|
|
|
108 });
|
|
|
109 }
|
|
|
110 });
|
|
|
111 </script>
|
|
|
112 </x-app-layout>
|
