Skip to content
This repository was archived by the owner on Jan 3, 2023. It is now read-only.

Commit 0d95895

Browse files
ctf0ctf0
committed
add table sorting option
correction for tsort …
1 parent d5aa87d commit 0d95895

File tree

10 files changed

+97
-72
lines changed

10 files changed

+97
-72
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,9 @@ class User extends Authenticatable
5858
- install JS dependencies
5959

6060
```bash
61-
yarn add vue axios vue-tippy@v1 vuedraggable vue-notif
61+
yarn add vue axios vue-tippy@v1 vuedraggable vue-notif list.js
6262
# or
63-
npm install vue axios vue-tippy@v1 vuedraggable vue-notif --save
63+
npm install vue axios vue-tippy@v1 vuedraggable vue-notif list.js --save
6464
```
6565

6666
- add this one liner to your main js file and run `npm run watch` to compile your `js/css` files.

‎src/resources/assets/js/bulma/index-comp.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,22 @@ export default {
77
itemsCount: this.count
88
}
99
},
10+
mounted() {
11+
new ListJS('table', {
12+
valueNames: [
13+
'data-sort-name',
14+
'data-sort-email',
15+
'data-sort-roles',
16+
'data-sort-permissions',
17+
'data-sort-title',
18+
'data-sort-route',
19+
'data-sort-url',
20+
'data-sort-menus',
21+
'data-sort-locals',
22+
'data-sort-template'
23+
]
24+
})
25+
},
1026
methods: {
1127
DelItem(event, name) {
1228

‎src/resources/assets/js/manager.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* Packages */
12
window.Vue = require('vue')
23
window.EventHub = require('vuemit')
34
Vue.use(require('vue-tippy'), {
@@ -18,6 +19,9 @@ Vue.use(require('vue-tippy'), {
1819
}
1920
})
2021

22+
// table sort
23+
window.ListJS = require('list.js')
24+
2125
// axios
2226
window.axios = require('axios')
2327
axios.defaults.headers.common = {
@@ -30,6 +34,7 @@ axios.interceptors.response.use((response) => {
3034
return Promise.reject(error.response)
3135
})
3236

37+
/* Component */
3338
Vue.component('SmPage', require('./' + process.env.MIX_SM_FRAMEWORK + '/page-comp.vue'))
3439
Vue.component('SmMenu', require('./' + process.env.MIX_SM_FRAMEWORK + '/menu-comp.vue'))
3540
Vue.component('SmIndex', require('./' + process.env.MIX_SM_FRAMEWORK + '/index-comp.vue'))

‎src/resources/assets/sass/style.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,13 @@ td {
66
cursor: pointer;
77
}
88

9+
thead th {
10+
position: sticky;
11+
z-index: 1;
12+
top: 0;
13+
background-color: white;
14+
}
15+
916
// select2
1017
.select2 {
1118
width: 100% !important;

‎src/resources/views/admin/bulma/menus/index.blade.php‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,18 @@ class="button is-success">
1616
</div>
1717
</div>
1818

19-
<table class="table is-hoverable is-fullwidth is-bordered">
19+
<table class="table is-hoverable is-fullwidth is-bordered" id="table">
2020
<thead>
2121
<tr>
22-
<th>{{ trans('SimpleMenu::messages.name') }}</th>
23-
<th>{{ trans('SimpleMenu::messages.ops') }}</th>
22+
<th class="is-dark sort link" data-sort="data-sort-name">{{ trans('SimpleMenu::messages.name') }}</th>
23+
<th class="is-dark">{{ trans('SimpleMenu::messages.ops') }}</th>
2424
</tr>
2525
</thead>
2626

27-
<tbody>
27+
<tbody class="list">
2828
@foreach ($menus as $menu)
2929
<tr id="menu-{{ $menu->id }}">
30-
<td>{{ $menu->name }}</td>
30+
<td class="data-sort-name">{{ $menu->name }}</td>
3131
<td>
3232
<a href="{{ route($crud_prefix.'.menus.edit',[$menu->id]) }}" class="button is-link is-inline-block">
3333
{{ trans('SimpleMenu::messages.app_edit') }}

‎src/resources/views/admin/bulma/pages/edit.blade.php‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -93,11 +93,7 @@ class="input toggle-pad"
9393
@if (count($templates))
9494
<span class="help">
9595
@foreach ($templates as $one)
96-
<code class="link"
97-
@click="$refs.template.value = $event.target.dataset.value"
98-
data-value="{{ $one }}">
99-
{{ $one }}
100-
</code>
96+
<code class="link" data-value="{{ $one }}" @click="$refs.template.value = $event.target.dataset.value">{{ $one }}</code>
10197
@endforeach
10298
</span>
10399
@endif

‎src/resources/views/admin/bulma/pages/index.blade.php‎

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -18,62 +18,62 @@ class="button is-success">
1818
</div>
1919
</div>
2020

21-
<table class="table is-hoverable is-fullwidth is-bordered">
21+
<table class="table is-hoverable is-fullwidth is-bordered" id="table">
2222
<thead>
2323
<tr>
24-
<th>{{ trans('SimpleMenu::messages.title') }}</th>
25-
<th>{{ trans('SimpleMenu::messages.route') }}</th>
26-
<th>{{ trans('SimpleMenu::messages.url') }}</th>
27-
<th>{{ trans('SimpleMenu::messages.roles') }}</th>
28-
<th>{{ trans('SimpleMenu::messages.permissions') }}</th>
29-
<th>{{ trans('SimpleMenu::messages.menus') }}</th>
30-
<th>{{ trans('SimpleMenu::messages.locals') }}</th>
31-
<th>{{ trans('SimpleMenu::messages.template') }}</th>
32-
<th>{{ trans('SimpleMenu::messages.ops') }}</th>
24+
<th class="is-dark sort link" data-sort="data-sort-title">{{ trans('SimpleMenu::messages.title') }}</th>
25+
<th class="is-dark sort link" data-sort="data-sort-route">{{ trans('SimpleMenu::messages.route') }}</th>
26+
<th class="is-dark sort link" data-sort="data-sort-url">{{ trans('SimpleMenu::messages.url') }}</th>
27+
<th class="is-dark sort link" data-sort="data-sort-roles">{{ trans('SimpleMenu::messages.roles') }}</th>
28+
<th class="is-dark sort link" data-sort="data-sort-permissions">{{ trans('SimpleMenu::messages.permissions') }}</th>
29+
<th class="is-dark sort link" data-sort="data-sort-menus">{{ trans('SimpleMenu::messages.menus') }}</th>
30+
<th class="is-dark sort link" data-sort="data-sort-locals">{{ trans('SimpleMenu::messages.locals') }}</th>
31+
<th class="is-dark sort link" data-sort="data-sort-template">{{ trans('SimpleMenu::messages.template') }}</th>
32+
<th class="is-dark">{{ trans('SimpleMenu::messages.ops') }}</th>
3333
</tr>
3434
</thead>
3535

36-
<tbody>
36+
<tbody class="list">
3737
@foreach ($pages as $page)
3838
@include('SimpleMenu::menu.partials.r_params')
3939

4040
<tr id="item-{{ $page->id }}">
4141
<td>
4242
@if (in_array(LaravelLocalization::getCurrentLocale(), $page->getTranslatedLocales('title')))
43-
<a href="{{ SimpleMenu::routeUrl() }}">{{ $page->title }}</a>
43+
<a class="data-sort-title" href="{{ SimpleMenu::routeUrl() }}">{{ $page->title }}</a>
4444
@else
45-
{{ empty($page->title) ? collect($page->getTranslations('title'))->first() : $page->title }}
45+
<span class="data-sort-title">{{ empty($page->title) ? collect($page->getTranslations('title'))->first() : $page->title }}</span>
4646
@endif
4747
</td>
48-
<td>{{ $page->route_name }}</td>
49-
<td>{{ $page->prefix ? "$page->prefix/$page->url" : $page->url }}</td>
50-
<td>
48+
<td class="data-sort-route">{{ $page->route_name }}</td>
49+
<td class="data-sort-url">{{ $page->prefix ? "$page->prefix/$page->url" : $page->url }}</td>
50+
<td class="data-sort-roles">
5151
@foreach ($page->roles as $role)
5252
<span class="tag is-rounded is-medium is-link">
5353
<a href="{{ route($crud_prefix.'.roles.edit',[$role->id]) }}" class="is-white">{{ $role->name }}</a>
5454
</span>
5555
@endforeach
5656
</td>
57-
<td>
57+
<td class="data-sort-permissions">
5858
@foreach ($page->permissions as $perm)
5959
<span class="tag is-rounded is-medium is-link">
6060
<a href="{{ route($crud_prefix.'.permissions.edit',[$perm->id]) }}" class="is-white">{{ $perm->name }}</a>
6161
</span>
6262
@endforeach
6363
</td>
64-
<td>
64+
<td class="data-sort-menus">
6565
@foreach ($page->menus as $menu)
6666
<span class="tag is-rounded is-medium is-link">
6767
<a href="{{ route($crud_prefix.'.menus.edit',[$menu->id]) }}" class="is-white">{{ $menu->name }}</a>
6868
</span>
6969
@endforeach
7070
</td>
71-
<td>
71+
<td class="data-sort-locals">
7272
@foreach ($page->getTranslatedLocales('title') as $locale)
7373
<span class="tag is-rounded is-medium is-warning">{{ $locale }}</span>
7474
@endforeach
7575
</td>
76-
<td>
76+
<td class="data-sort-template">
7777
@if ($page->template)
7878
<span class="tag is-rounded is-medium is-primary">{{ $page->template }}</span>
7979
@endif
@@ -86,7 +86,9 @@ class="button is-link is-inline-block">
8686
<a class="is-inline-block">
8787
@if (config('simpleMenu.deletePageAndNests'))
8888
{{ Form::open(['method' => 'DELETE', 'route' => [$crud_prefix.'.pages.destroy', $page->id]]) }}
89-
{{ Form::submit(trans('SimpleMenu::messages.app_delete'), ['class' => 'button is-danger']) }}
89+
<button type="submit" class="button is-danger">
90+
{{ trans('SimpleMenu::messages.app_delete') }}
91+
</button>
9092
{{ Form::close() }}
9193
@else
9294
{{ Form::open([
@@ -95,7 +97,9 @@ class="button is-link is-inline-block">
9597
'data-id'=>'item-'.$page->id,
9698
'@submit.prevent'=>'DelItem($event,"'.$page->title.'")'
9799
]) }}
98-
{{ Form::submit(trans('SimpleMenu::messages.app_delete'), ['class' => 'button is-danger']) }}
100+
<button type="submit" class="button is-danger">
101+
{{ trans('SimpleMenu::messages.app_delete') }}
102+
</button>
99103
{{ Form::close() }}
100104
@endif
101105
</a>

‎src/resources/views/admin/bulma/permissions/index.blade.php‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,26 +18,26 @@ class="button is-success">
1818
</div>
1919
</div>
2020

21-
<table class="table is-hoverable is-fullwidth is-bordered">
21+
<table class="table is-hoverable is-fullwidth is-bordered" id="table">
2222
<thead>
2323
<tr>
24-
<th>{{ trans('SimpleMenu::messages.name') }}</th>
25-
<th>{{ trans('SimpleMenu::messages.ops') }}</th>
24+
<th class="is-dark sort link" data-sort="data-sort-name">{{ trans('SimpleMenu::messages.name') }}</th>
25+
<th class="is-dark">{{ trans('SimpleMenu::messages.ops') }}</th>
2626
</tr>
2727
</thead>
2828

29-
<tbody>
29+
<tbody class="list">
3030
@foreach ($permissions as $permission)
3131
<tr id="item-{{ $permission->id }}">
32-
<td>{{ $permission->name }}</td>
32+
<td class="data-sort-name">{{ $permission->name }}</td>
3333
<td>
3434
<a href="{{ route($crud_prefix.'.permissions.edit',[$permission->id]) }}"
3535
class="button is-link is-inline-block">
3636
{{ trans('SimpleMenu::messages.app_edit') }}
3737
</a>
3838

3939
@php
40-
$check = in_array($permission->name, auth()->user()->permissions->pluck('name')->toArray()) ? true : false;
40+
$check = in_array($permission->name, auth()->user()->permissions->pluck('name')->toArray()) ? 'disabled' : '';
4141
@endphp
4242

4343
<a class="is-inline-block">
@@ -47,10 +47,9 @@ class="button is-link is-inline-block">
4747
'data-id'=>'item-'.$permission->id,
4848
'@submit.prevent'=>'DelItem($event,"'.$permission->name.'")'
4949
]) }}
50-
{{ Form::submit(
51-
trans('SimpleMenu::messages.app_delete'),
52-
['class' => 'button is-danger', 'disabled' => $check])
53-
}}
50+
<button type="submit" class="button is-danger" {{ $check }}>
51+
{{ trans('SimpleMenu::messages.app_delete') }}
52+
</button>
5453
{{ Form::close() }}
5554
</a>
5655
</td>

‎src/resources/views/admin/bulma/roles/index.blade.php‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,20 +18,20 @@ class="button is-success">
1818
</div>
1919
</div>
2020

21-
<table class="table is-hoverable is-fullwidth is-bordered">
21+
<table class="table is-hoverable is-fullwidth is-bordered" id="table">
2222
<thead>
2323
<tr>
24-
<th>{{ trans('SimpleMenu::messages.name') }}</th>
25-
<th>{{ trans('SimpleMenu::messages.permissions') }}</th>
26-
<th>{{ trans('SimpleMenu::messages.ops') }}</th>
24+
<th class="is-dark sort link" data-sort="data-sort-name">{{ trans('SimpleMenu::messages.name') }}</th>
25+
<th class="is-dark sort link" data-sort="data-sort-permissions">{{ trans('SimpleMenu::messages.permissions') }}</th>
26+
<th class="is-dark">{{ trans('SimpleMenu::messages.ops') }}</th>
2727
</tr>
2828
</thead>
2929

30-
<tbody>
30+
<tbody class="list">
3131
@foreach ($roles as $role)
3232
<tr id="item-{{ $role->id }}">
33-
<td>{{ $role->name }}</td>
34-
<td>
33+
<td class="data-sort-name">{{ $role->name }}</td>
34+
<td class="data-sort-permissions">
3535
@foreach ($role->permissions as $perm)
3636
<span class="tag is-rounded is-medium is-link">
3737
<a href="{{ route($crud_prefix.'.permissions.edit',[$perm->id]) }}" class="is-white">{{ $perm->name }}</a>
@@ -45,7 +45,7 @@ class="button is-link is-inline-block">
4545
</a>
4646

4747
@php
48-
$check = in_array($role->name, auth()->user()->roles->pluck('name')->toArray()) ? true : false;
48+
$check = in_array($role->name, auth()->user()->roles->pluck('name')->toArray()) ? 'disabled' : '';
4949
@endphp
5050

5151
<a class="is-inline-block">
@@ -55,10 +55,9 @@ class="button is-link is-inline-block">
5555
'data-id'=>'item-'.$role->id,
5656
'@submit.prevent'=>'DelItem($event,"'.$role->name.'")'
5757
]) }}
58-
{{ Form::submit(
59-
trans('SimpleMenu::messages.app_delete'),
60-
['class' => 'button is-danger', 'disabled' => $check]
61-
) }}
58+
<button type="submit" class="button is-danger" {{ $check }}>
59+
{{ trans('SimpleMenu::messages.app_delete') }}
60+
</button>
6261
{{ Form::close() }}
6362
</a>
6463
</td>

0 commit comments

Comments
 (0)