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

Commit aa41388

Browse files
ctf0ctf0
committed
updates & use vuedraggable
1 parent 8c05169 commit aa41388

File tree

12 files changed

+183
-86
lines changed

12 files changed

+183
-86
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
- Javascript
1313
+ [Vue](https://vuejs.org/)
1414
+ [jQuery](https://jquery.com/)
15-
+ [vue-sortable](https://github.com/sagalbot/vue-sortable/pull/17#issuecomment-260562645)
15+
+ [vuedraggable](https://github.com/SortableJS/Vue.Draggable)
1616

1717
## Installation
1818

‎src/Controllers/Admin/MenusController.php‎

Lines changed: 37 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ public function store(Request $request)
5959
*/
6060
public function edit($id)
6161
{
62-
$menu = Menu::findOrFail($id);
62+
$menu = Menu::findOrFail($id);
6363

6464
return view('SimpleMenu::admin.'.config('simpleMenu.framework').'.menus.edit', compact('menu'));
6565
}
@@ -78,11 +78,14 @@ public function update(Request $request, $id)
7878
'name' => 'required|unique:menus,name,'.$id,
7979
]);
8080

81+
$menu = Menu::findOrFail($id);
82+
8183
foreach (json_decode($request->saveList) as $item) {
84+
$menu->pages()->sync($item->id, false);
8285
DB::table('menu_page')->where('page_id', $item->id)->update(['order'=>$item->order]);
8386
}
8487

85-
Menu::findOrFail($id)->update($request->except('saveList'));
88+
$menu->update($request->except('saveList'));
8689

8790
// todo
8891
// page nest list
@@ -105,26 +108,47 @@ public function destroy($id)
105108
}
106109

107110
/**
108-
* remove page from menu with ajax.
111+
* get all menu pages for vuejs.
112+
*
113+
* @param Menu $id [description]
109114
*
110-
* @param mixed $id
115+
* @return [type] [description]
111116
*/
112-
public function removePage($id, Request $request)
117+
public function getMenuPages(Menu $id)
113118
{
114-
if (Menu::find($id)->pages()->detach($request->page_id)) {
115-
Menu::find($id)->touch();
119+
$pages = $id->pages()->orderBy('pivot_order', 'asc')->get();
116120

117-
return response()->json(['done'=>true]);
118-
}
121+
$pages->map(function ($item) {
122+
if (count($childs = $item->getDescendants()->toHierarchy())) {
123+
$item['children'] = $childs;
124+
}
125+
});
126+
127+
$allPages = Page::all()->diff($pages);
128+
129+
$allPages->map(function ($item) {
130+
if (count($childs = $item->getDescendants()->toHierarchy())) {
131+
$item['children'] = $childs;
132+
}
133+
});
134+
135+
return response()->json(compact('pages', 'allPages'));
119136
}
120137

121138
/**
122-
* get all menu pages for sorting with vuejs.
139+
* remove page from menu with ajax.
140+
*
141+
* @param [type] $id [description]
142+
* @param Request $request [description]
143+
*
144+
* @return [type] [description]
123145
*/
124-
public function getPages(Menu $id)
146+
public function removePage($id, Request $request)
125147
{
126-
$pages = $id->pages()->orderBy('pivot_order', 'asc')->where('url->'.app()->getLocale(), '!=', '')->get();
148+
if (Menu::find($id)->pages()->detach($request->page_id)) {
149+
Menu::find($id)->touch();
127150

128-
return response()->json(['data' => $pages]);
151+
return response()->json(['done'=>true]);
152+
}
129153
}
130154
}

‎src/Traits/MenusTrait.php‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,12 @@ public function viewComp($name)
5151
public function query($name)
5252
{
5353
Cache::rememberForever("{$name}Menu-".app()->getLocale().'Pages', function () use ($name) {
54-
return app(Menu::class)->where('name', $name)->first()->pages()->orderBy('pivot_order', 'asc')->where('url->'.app()->getLocale(), '!=', '')->get();
54+
return app(Menu::class)
55+
->where('name', $name)
56+
->first()->pages()
57+
->orderBy('pivot_order', 'asc')
58+
->where('url->'.app()->getLocale(), '!=', '')
59+
->get();
5560
});
5661

5762
return cache("{$name}Menu-".app()->getLocale().'Pages');

‎src/resources/assets/js/components/_nested.vue‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<ul>
3+
<li v-for="item in childs" :key="item.id" class="item">
4+
<div class="notification menu-item">
5+
<span class="icon is-small"><i class="fa fa-caret-right"></i></span>
6+
<span v-html="getTitle(item.title)"></span>
7+
</div>
8+
9+
<menu-child v-if="item.children.length > 0" :childs="item.children" :locale="locale"></menu-child>
10+
</li>
11+
</ul>
12+
</template>
13+
14+
<style scoped>
15+
ul {
16+
margin: 0 !important;
17+
border-left: none !important;
18+
}
19+
</style>
20+
21+
<script>
22+
import draggable from 'vuedraggable'
23+
24+
export default {
25+
props: ['childs','locale'],
26+
components: {
27+
draggable,
28+
},
29+
data() {
30+
return {
31+
}
32+
},
33+
methods: {
34+
getTitle(title){
35+
let locale = this.locale
36+
let v = Object.keys(title).indexOf(locale)
37+
return title.hasOwnProperty(locale) ? Object.values(title)[v] : Object.values(title)[0]
38+
},
39+
},
40+
}
41+
</script>

‎src/resources/assets/js/components/menus.vue‎

Lines changed: 36 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,72 @@
11
<template></template>
22

33
<script>
4-
import Sortable from 'vue-sortable'
5-
Vue.use(Sortable)
4+
import draggable from 'vuedraggable'
5+
Vue.component('MenuChild', require('./_nested.vue'));
66
77
export default {
8-
props: ['DelRoute', 'PagesRoute'],
8+
props: ['PagesRoute', 'DelRoute', 'locale'],
9+
components: {
10+
draggable,
11+
},
912
data() {
1013
return {
11-
list: [],
12-
saveList: []
13-
};
14+
pages: [],
15+
allPages: [],
16+
saveList: [],
17+
}
1418
},
1519
created() {
1620
$.ajaxSetup({
1721
cache: false,
1822
headers: {
1923
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
2024
}
21-
});
25+
})
2226
23-
this.getPages();
27+
this.getPages()
2428
},
2529
methods: {
26-
onUpdate(event) {
27-
this.list.splice(event.newIndex, 0, (this.list.splice(event.oldIndex, 1)[0]))
28-
},
2930
getPages(){
3031
$.get(this.PagesRoute, (res) => {
31-
this.list = res.data;
32-
});
32+
this.pages = res.pages
33+
this.allPages = res.allPages
34+
})
3335
},
3436
deleteItem(item){
3537
$.post(this.DelRoute,{
3638
page_id: item.id,
3739
}, (res) => {
3840
if (res.done) {
39-
this.list.splice(this.list.indexOf(item), 1)
41+
this.pages.splice(this.pages.indexOf(item), 1)
4042
}
41-
});
42-
}
43+
})
44+
},
45+
46+
// operations
47+
getTitle(title){
48+
let locale = this.locale
49+
let v = Object.keys(title).indexOf(locale)
50+
return title.hasOwnProperty(locale) ? Object.values(title)[v] : Object.values(title)[0]
51+
},
52+
checkAdded(evt){
53+
if (evt.added) {
54+
evt.added.element.updated_at = null
55+
}
56+
},
57+
undoItem(item){
58+
this.pages.splice(this.pages.indexOf(item),1)
59+
this.allPages.unshift(item)
60+
},
4361
},
4462
watch: {
45-
list(val) {
63+
pages(val) {
4664
this.saveList = []
4765
4866
val.map((item) => {
4967
return this.saveList.push({
5068
id: item.id,
51-
order: this.list.indexOf(item) + 1
69+
order: this.pages.indexOf(item) + 1
5270
})
5371
})
5472
}

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

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@
1818
opacity: 1;
1919
}
2020
&:after {
21-
display: none;
21+
display: none !important;
2222
}
2323
select {
24-
padding: 0.40rem 0.5rem 0.5rem;
24+
padding: 0.40rem 0.5rem 0.5rem !important;
2525
font-weight: bold;
2626
text-transform: capitalize;
2727
background-color: transparent;
@@ -39,10 +39,4 @@
3939
padding: 0.5em;
4040
margin-bottom: 0.5em !important;
4141
cursor: ns-resize;
42-
table {
43-
table-layout: fixed;
44-
.handler {
45-
width: 15px;
46-
}
47-
}
4842
}

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

Lines changed: 33 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@
66
<a href="{{ route('admin.menus.index') }}">Go Back</a>
77
</h3>
88

9-
<menu-comp
10-
inline-template
9+
<menu-comp inline-template
10+
pages-route="{{ route('admin.menus.getMenuPages',['id'=>$menu->id]) }}"
1111
del-route="{{ route('admin.menus.removePage',['id'=>$menu->id]) }}"
12-
pages-route="{{ route('admin.menus.getPages',['id'=>$menu->id]) }}">
12+
locale="{{ LaravelLocalization::getCurrentLocale() }}">
1313
<div>
1414
{{ Form::model($menu, ['method' => 'PUT', 'route' => ['admin.menus.update', $menu->id]]) }}
1515

@@ -31,25 +31,38 @@
3131
</div>
3232
</div>
3333

34-
{{-- pages --}}
35-
<div class="column is-4">
36-
<ul v-sortable="{ onUpdate: onUpdate }">
37-
<li v-for="item in list" :key="item.id">
38-
<div class="notification is-info menu-item">
39-
<table>
40-
<tr>
41-
<td class="handler">
42-
<span class="icon is-small">
43-
<i class="fa fa-caret-right"></i>
44-
</span>
45-
</td>
46-
<td v-html="item.title.{{ LaravelLocalization::getCurrentLocale() }}"></td>
47-
</tr>
48-
</table>
49-
<button class="delete" @click.prevent="deleteItem(item)"></button>
34+
<div class="columns">
35+
{{-- pages --}}
36+
<draggable v-model="pages"
37+
class="column is-4 menu-list"
38+
style="min-height: 35px; display: block"
39+
:options="{draggable:'.item', group:'pages'}"
40+
:element="'ul'"
41+
@change="checkAdded">
42+
<li v-for="item in pages" :key="item.id" class="item">
43+
<div class="notification is-info menu-item" :class="{'is-warning' : !item.updated_at}">
44+
<span class="icon is-small"><i class="fa fa-caret-right"></i></span>
45+
<span v-html="getTitle(item.title)"></span>
46+
47+
<button type="button" v-if="item.updated_at" class="delete" @click.prevent="deleteItem(item)"></button>
48+
<button type="button" v-else class="delete" @click="undoItem(item)"></button>
5049
</div>
50+
51+
{{-- childs --}}
52+
<menu-child v-if="item.children" :childs="item.children" :locale="locale"></menu-child>
53+
</li>
54+
</draggable>
55+
56+
{{-- all_pages --}}
57+
<draggable v-model="allPages"
58+
class="column"
59+
:element="'ul'"
60+
:options="{draggable:'.item', group:{name:'pages', put:false}, chosenClass:'is-warning'}">
61+
<li v-for="item in allPages" :key="item.id" class="item notification is-info menu-item" style="cursor: default">
62+
<span class="icon is-small"><i class="fa fa-caret-right"></i></span>
63+
<span v-html="getTitle(item.title)"></span>
5164
</li>
52-
</ul>
65+
</draggable>
5366
</div>
5467

5568
<input type="hidden" name="saveList" v-model="JSON.stringify(saveList)">

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@extends('SimpleMenu::admin.'.config('simpleMenu.framework').'.shared')
2-
@section('title'){{ "Edit '$page->title'" }}@endsection
2+
@section('title')
3+
Edit "{{ empty($page->title) ? collect($page->getTranslations('title'))->first() : $page->title }}"
4+
@endsection
35

46
@section('sub')
57
<h3 class="title">
@@ -96,4 +98,4 @@
9698
{{ Form::close() }}
9799
</div>
98100
</page-comp>
99-
@stop
101+
@stop

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
@if (count($pages) > 0)
2424
@foreach ($pages as $page)
2525
<tr>
26-
<td>{{ collect($page->getTranslations('title'))->first() }}</td>
26+
<td>{{ empty($page->title) ? collect($page->getTranslations('title'))->first() : $page->title }}</td>
2727
<td>
2828
@foreach ($page->roles()->pluck('name') as $role)
2929
<span class="tag is-medium is-info">{{ $role }}</span>
@@ -35,13 +35,13 @@
3535
@endforeach
3636
</td>
3737
<td>
38-
@foreach ($page->menuNames()->pluck('name') as $name)
39-
<span class="tag is-medium is-info">{{ $name }}</span>
38+
@foreach ($page->menuNames()->pluck('name') as $menu)
39+
<span class="tag is-medium is-info">{{ $menu }}</span>
4040
@endforeach
4141
</td>
4242
<td>
43-
@foreach ($page->getTranslatedLocales('title') as $name)
44-
<span class="tag is-medium is-warning">{{ $name }}</span>
43+
@foreach ($page->getTranslatedLocales('title') as $locale)
44+
<span class="tag is-medium is-warning">{{ $locale }}</span>
4545
@endforeach
4646
</td>
4747
<td>

‎src/resources/views/menu/example.blade.php‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,8 @@
77
<a href="{{ SimpleMenu::urlRoute() }}" class="{{ SimpleMenu::urlRouteCheck() ? 'is-active' : '' }}">{{ $page->title }}</a>
88

99
@if (count($childs = $page->getImmediateDescendants()))
10-
<ul>
11-
@include('SimpleMenu::menu.partials.nested', ['items' => $childs])
12-
</ul>
10+
@include('SimpleMenu::menu.partials.nested', ['items' => $childs])
1311
@endif
1412
</li>
1513
@endforeach
16-
</ul>
14+
</ul>

0 commit comments

Comments
 (0)