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

Commit 20bf18c

Browse files
ctf0ctf0
committed
add search
…
1 parent 8f5d529 commit 20bf18c

File tree

9 files changed

+208
-46
lines changed

9 files changed

+208
-46
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 vue-multi-ref list.js
61+
yarn add vue axios vue-tippy@v1 vuedraggable vue-notif vue-multi-ref vue-awesome list.js
6262
# or
63-
npm install vue axios vue-tippy@v1 vuedraggable vue-notif vue-multi-ref list.js --save
63+
npm install vue axios vue-tippy@v1 vuedraggable vue-notif vue-multi-ref vue-awesome 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: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,36 @@
11
<script>
2+
import 'vue-awesome/icons/search'
3+
import 'vue-awesome/icons/times'
4+
Vue.component('icon', require('vue-awesome/components/Icon'))
5+
6+
import Search from './mixins/search'
7+
28
export default {
39
name: 'index-comp',
410
props: ['count'],
11+
mixins: [Search],
512
data() {
613
return {
714
itemsCount: this.count,
8-
ids: []
9-
}
10-
},
11-
mounted() {
12-
new ListJS('table', {
13-
valueNames: [
15+
ids: [],
16+
sorter: null,
17+
searchColName: 'data-sort-name',
18+
sortableList: [
1419
'data-sort-name',
1520
'data-sort-email',
1621
'data-sort-roles',
1722
'data-sort-permissions',
18-
'data-sort-title',
1923
'data-sort-route',
2024
'data-sort-url',
2125
'data-sort-menus',
2226
'data-sort-locals',
2327
'data-sort-template'
2428
]
29+
}
30+
},
31+
mounted() {
32+
this.sorter = new ListJS('table', {
33+
valueNames: this.sortableList
2534
})
2635
},
2736
methods: {
@@ -32,10 +41,14 @@ export default {
3241
}
3342
3443
// add
35-
this.$refs['sm-ids'].map((e) => {
36-
this.ids.push(e.value)
44+
this.$refs['sm-ids'].filter((e) => {
45+
document.getElementById(e.id) ? this.ids.push(e.value) : false
3746
})
3847
},
48+
updateCounter(val) {
49+
return this.itemsCount = val
50+
},
51+
3952
DelItem(event, name) {
4053
4154
let id = event.target.dataset.id
@@ -55,6 +68,7 @@ export default {
5568
5669
// remove item
5770
document.getElementById(`${id}`).remove()
71+
this.sorter.remove(this.searchColName, name)
5872
5973
// for sidebar menu
6074
let item = document.querySelector(`li[data-id="${id}"]`)

‎src/resources/assets/js/bulma/mixins/search.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export default {
2+
data() {
3+
return {
4+
searchFor: null
5+
}
6+
},
7+
methods: {
8+
resetSearch() {
9+
this.searchFor = null
10+
}
11+
},
12+
watch: {
13+
searchFor(val) {
14+
let res = this.sorter.search(val, this.searchColName)
15+
this.updateCounter(res.length)
16+
}
17+
}
18+
}

‎src/resources/lang/en/messages.php

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@
2323
'locals' => 'Title Available In',
2424
'menus' => 'Menus',
2525
'meta' => 'Meta Keywords',
26+
'model_created' => 'Model Created !',
27+
'model_deleted' => 'Model Deleted !',
28+
'model_updated' => 'Model Updated !',
29+
'models_deleted' => 'Models Deleted !',
2630
'name' => 'Name',
2731
'no_entries' => 'No entries in table',
2832
'ops' => 'Operations',
@@ -46,8 +50,5 @@
4650
'url' => 'Url',
4751
'url_prefix' => 'Url Prefix',
4852
'users' => 'Users',
49-
'model_updated' => 'Model Updated !',
50-
'model_deleted' => 'Model Deleted !',
51-
'model_created' => 'Model Created !',
52-
'models_deleted' => 'Models Deleted !',
53+
'find' => 'Find',
5354
);

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

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@
55
<sm-index inline-template :count="{{ count($menus) }}">
66
<div>
77
<div class="level">
8-
<div class="level-left">
9-
<h3 class="title">{{ trans('SimpleMenu::messages.menus') }} "<span>@{{ itemsCount }}</span>"</h3>
10-
</div>
8+
<div class="level-left"></div>
119
<div class="level-right">
1210
{{-- delete multi --}}
1311
<div class="level-item">
@@ -31,6 +29,34 @@ class="button is-success">
3129
</div>
3230
</div>
3331

32+
<div class="level">
33+
<div class="level-left">
34+
<h3 class="title">{{ trans('SimpleMenu::messages.menus') }} "<span>@{{ itemsCount }}</span>"</h3>
35+
</div>
36+
<div class="level-right">
37+
{{-- search --}}
38+
<div class="level-right">
39+
<div class="field has-addons">
40+
<p class="control has-icons-left">
41+
<input class="input"
42+
type="text"
43+
v-model="searchFor"
44+
placeholder="{{ trans('SimpleMenu::messages.find') }}">
45+
<span class="icon is-left">
46+
<icon name="search"></icon>
47+
</span>
48+
</p>
49+
<p class="control">
50+
<button class="button is-black" :disabled="!searchFor"
51+
@click="resetSearch()">
52+
<span class="icon"><icon name="times"></icon></span>
53+
</button>
54+
</p>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
3460
<table class="table is-hoverable is-fullwidth is-bordered" id="table">
3561
<thead>
3662
<tr>
@@ -76,7 +102,7 @@ class="cbx-checkbox"
76102
</tr>
77103
@endforeach
78104

79-
<tr v-show="itemsCount == 0">
105+
<tr v-if="itemsCount == 0">
80106
<td colspan="2">{{ trans('SimpleMenu::messages.no_entries') }}</td>
81107
</tr>
82108
</tbody>

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

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,7 @@
55
<sm-index inline-template :count="{{ count($pages) }}">
66
<div>
77
<div class="level">
8-
<div class="level-left">
9-
<h3 class="title">
10-
{{ trans('SimpleMenu::messages.pages') }} "<span>@{{ itemsCount }}</span>"
11-
</h3>
12-
</div>
8+
<div class="level-left"></div>
139
<div class="level-right">
1410
{{-- delete multi --}}
1511
<div class="level-item">
@@ -33,6 +29,36 @@ class="button is-success">
3329
</div>
3430
</div>
3531

32+
<div class="level">
33+
<div class="level-left">
34+
<h3 class="title">
35+
{{ trans('SimpleMenu::messages.pages') }} "<span>@{{ itemsCount }}</span>"
36+
</h3>
37+
</div>
38+
<div class="level-right">
39+
{{-- search --}}
40+
<div class="level-right">
41+
<div class="field has-addons">
42+
<p class="control has-icons-left">
43+
<input class="input"
44+
type="text"
45+
v-model="searchFor"
46+
placeholder="{{ trans('SimpleMenu::messages.find') }}">
47+
<span class="icon is-left">
48+
<icon name="search"></icon>
49+
</span>
50+
</p>
51+
<p class="control">
52+
<button class="button is-black" :disabled="!searchFor"
53+
@click="resetSearch()">
54+
<span class="icon"><icon name="times"></icon></span>
55+
</button>
56+
</p>
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
3662
<table class="table is-hoverable is-fullwidth is-bordered" id="table">
3763
<thead>
3864
<tr>
@@ -41,7 +67,7 @@ class="button is-success">
4167
v-text="ids.length > 0
4268
? '{{ trans('SimpleMenu::messages.select_non') }}'
4369
: '{{ trans('SimpleMenu::messages.select_all') }}'"></th>
44-
<th class="is-dark sort link" data-sort="data-sort-title">{{ trans('SimpleMenu::messages.title') }}</th>
70+
<th class="is-dark sort link" data-sort="data-sort-name">{{ trans('SimpleMenu::messages.title') }}</th>
4571
<th class="is-dark sort link" data-sort="data-sort-route">{{ trans('SimpleMenu::messages.route') }}</th>
4672
<th class="is-dark sort link" data-sort="data-sort-url">{{ trans('SimpleMenu::messages.url') }}</th>
4773
<th class="is-dark sort link" data-sort="data-sort-roles">{{ trans('SimpleMenu::messages.roles') }}</th>
@@ -70,9 +96,9 @@ class="cbx-checkbox"
7096
</td>
7197
<td>
7298
@if (in_array(LaravelLocalization::getCurrentLocale(), $page->getTranslatedLocales('title')))
73-
<a class="data-sort-title" href="{{ SimpleMenu::routeUrl() }}">{{ $page->title }}</a>
99+
<a class="data-sort-name" href="{{ SimpleMenu::routeUrl() }}">{{ $page->title }}</a>
74100
@else
75-
<span class="data-sort-title">{{ empty($page->title) ? collect($page->getTranslations('title'))->first() : $page->title }}</span>
101+
<span class="data-sort-name">{{ empty($page->title) ? collect($page->getTranslations('title'))->first() : $page->title }}</span>
76102
@endif
77103
</td>
78104
<td class="data-sort-route">{{ $page->route_name }}</td>
@@ -137,7 +163,7 @@ class="button is-link is-inline-block">
137163
</tr>
138164
@endforeach
139165

140-
<tr v-show="itemsCount == 0">
166+
<tr v-if="itemsCount == 0">
141167
<td colspan="7">{{ trans('SimpleMenu::messages.no_entries') }}</td>
142168
</tr>
143169
</tbody>

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

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,7 @@
55
<sm-index inline-template :count="{{ count($permissions) }}">
66
<div>
77
<div class="level">
8-
<div class="level-left">
9-
<h3 class="title">
10-
{{ trans('SimpleMenu::messages.permissions') }} "<span>@{{ itemsCount }}</span>"
11-
</h3>
12-
</div>
8+
<div class="level-left"></div>
139
<div class="level-right">
1410
{{-- delete multi --}}
1511
<div class="level-item">
@@ -32,6 +28,35 @@ class="button is-success">
3228
</div>
3329
</div>
3430
</div>
31+
<div class="level">
32+
<div class="level-left">
33+
<h3 class="title">
34+
{{ trans('SimpleMenu::messages.permissions') }} "<span>@{{ itemsCount }}</span>"
35+
</h3>
36+
</div>
37+
<div class="level-right">
38+
{{-- search --}}
39+
<div class="level-right">
40+
<div class="field has-addons">
41+
<p class="control has-icons-left">
42+
<input class="input"
43+
type="text"
44+
v-model="searchFor"
45+
placeholder="{{ trans('SimpleMenu::messages.find') }}">
46+
<span class="icon is-left">
47+
<icon name="search"></icon>
48+
</span>
49+
</p>
50+
<p class="control">
51+
<button class="button is-black" :disabled="!searchFor"
52+
@click="resetSearch()">
53+
<span class="icon"><icon name="times"></icon></span>
54+
</button>
55+
</p>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
3560

3661
<table class="table is-hoverable is-fullwidth is-bordered" id="table">
3762
<thead>
@@ -86,7 +111,7 @@ class="button is-link is-inline-block">
86111
</tr>
87112
@endforeach
88113

89-
<tr v-show="itemsCount == 0">
114+
<tr v-if="itemsCount == 0">
90115
<td colspan="2">{{ trans('SimpleMenu::messages.no_entries') }}</td>
91116
</tr>
92117
</tbody>

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

Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,7 @@
55
<sm-index inline-template :count="{{ count($roles) }}">
66
<div>
77
<div class="level">
8-
<div class="level-left">
9-
<h3 class="title">
10-
{{ trans('SimpleMenu::messages.roles') }} "<span>@{{ itemsCount }}</span>"
11-
</h3>
12-
</div>
8+
<div class="level-left"></div>
139
<div class="level-right">
1410
{{-- delete multi --}}
1511
<div class="level-item">
@@ -33,6 +29,36 @@ class="button is-success">
3329
</div>
3430
</div>
3531

32+
<div class="level">
33+
<div class="level-left">
34+
<h3 class="title">
35+
{{ trans('SimpleMenu::messages.roles') }} "<span>@{{ itemsCount }}</span>"
36+
</h3>
37+
</div>
38+
<div class="level-right">
39+
{{-- search --}}
40+
<div class="level-right">
41+
<div class="field has-addons">
42+
<p class="control has-icons-left">
43+
<input class="input"
44+
type="text"
45+
v-model="searchFor"
46+
placeholder="{{ trans('SimpleMenu::messages.find') }}">
47+
<span class="icon is-left">
48+
<icon name="search"></icon>
49+
</span>
50+
</p>
51+
<p class="control">
52+
<button class="button is-black" :disabled="!searchFor"
53+
@click="resetSearch()">
54+
<span class="icon"><icon name="times"></icon></span>
55+
</button>
56+
</p>
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
3662
<table class="table is-hoverable is-fullwidth is-bordered" id="table">
3763
<thead>
3864
<tr>
@@ -94,7 +120,7 @@ class="button is-link is-inline-block">
94120
</tr>
95121
@endforeach
96122

97-
<tr v-show="itemsCount == 0">
123+
<tr v-if="itemsCount == 0">
98124
<td colspan="3">{{ trans('SimpleMenu::messages.no_entries') }}</td>
99125
</tr>
100126
</tbody>

0 commit comments

Comments
 (0)