Skip to content

Commit 0ac5fc8

Browse files
yazan-alnugnughyazan-alnugnugh
committed
Upgrade to Vue3
1 parent 7442dcd commit 0ac5fc8

File tree

4 files changed

+145
-74
lines changed

4 files changed

+145
-74
lines changed

‎Pagination.vue‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,33 +12,34 @@
1212
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
1313
<div>
1414
<p class="text-sm text-gray-700">
15-
Showing
15+
{{trans('showing')}}
1616
{{ ' ' }}
1717
<span class="font-medium">{{ collection.from }}</span>
1818
{{ ' ' }}
19-
to
19+
{{trans('to')}}
2020
{{ ' ' }}
2121
<span class="font-medium">{{ collection.to }}</span>
2222
{{ ' ' }}
23-
of
23+
{{trans('of')}}
2424
{{ ' ' }}
2525
<span class="font-medium">{{ collection.total }}</span>
2626
{{ ' ' }}
27-
results
27+
{{trans('results')}}
2828
</p>
2929
</div>
3030
<div v-if="collection.total > collection.per_page">
3131
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
3232

33-
<!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
33+
<!-- Current: "z-10 bg-blue-50 border-blue-500 text-blue-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
3434
<a
3535
v-for="(link, index) in collection.links"
3636
aria-current="page"
3737
class=" relative inline-flex items-center px-4 py-2 border text-sm font-medium"
38-
:class="[link.active ? 'z-10 bg-indigo-50 border-indigo-500 text-indigo-600' : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50', {'cursor-pointer': link.url}]"
38+
:class="[link.active ? 'z-10 bg-blue-50 border-blue-500 text-blue-600' : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50', {'cursor-pointer': link.url}]"
3939
@click.prevent="current(link)"
4040
v-html="link.label"
4141
>
42+
4243
</a>
4344

4445
</nav>
@@ -53,6 +54,26 @@
5354
export default {
5455
5556
props: ['collection'],
57+
data: function (){
58+
return {
59+
language: {
60+
ar: {
61+
showing: "يظهر ",
62+
results: "نتيجة ",
63+
of: "من ",
64+
to: "إلى ",
65+
66+
},
67+
en: {
68+
showing: "Showing",
69+
results: "Results",
70+
of: "Of",
71+
to: "to ",
72+
73+
},
74+
},
75+
}
76+
},
5677
methods: {
5778
current: function(link){
5879

‎Search.vue‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<input @input="search()" v-model="value" class="form-input w-1/3 mx-auto mb-3 rounded-xl focus:ring-blue-400 focus:border-blue-400" type="text" placeholder="Search Here ...">
2+
<input @input="search()" v-model="value" class="form-input w-1/3 mx-auto mb-3 rounded-xl focus:ring-blue-400 focus:border-blue-400" type="text" :placeholder="trans('search')">
33
</template>
44

55
<script>
@@ -8,6 +8,15 @@ export default{
88
99
data: function(){
1010
return {
11+
language: {
12+
ar: {
13+
search: "البحث ...",
14+
15+
},
16+
en: {
17+
search: "Search ...",
18+
},
19+
},
1120
value: '',
1221
}
1322
},

‎ToolBar.vue‎

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,25 @@
33
<div >
44

55
<div class="flex flex-row">
6-
<!-- button group -->
7-
<div v-if="$parent.$props.config.toolbar && $parent.$props.config.toolbar.show != false" class="my-2 ml-2 bg-gray-100 w-38 p-2 rounded-lg flex flex-row justify-center items-center">
8-
<div v-if="!$parent.$props.config.toolbar.hasOwnProperty('delete') || $parent.$props.config.toolbar.delete.show != false"> <i @click="deleteElements()" class="confirm text-gray-500 far fa-trash-alt cursor-pointer hover:text-red-500 transition-colors duration-150 "></i></div>
9-
<!-- <div><i @click="edit()" class="ml-2 text-gray-500 far fa-edit cursor-pointer hover:text-blue-500 transition-colors duration-150 "></i></div>-->
10-
<!-- <div><i @click="exportElements()" class="ml-2 text-gray-500 fas fa-file-export cursor-pointer hover:text-green-500 transition-colors duration-150 "></i></div>-->
11-
</div>
6+
<!-- button group -->
7+
<div v-if="$parent.$props.config.toolbar && $parent.$props.config.toolbar.show != false" class=" my-2 ml-2 bg-gray-100 w-38 p-2 rounded-lg flex flex-row justify-center items-center">
8+
<div v-if="!$parent.$props.config.toolbar.hasOwnProperty('delete') || $parent.$props.config.toolbar.delete.show != false"> <i @click="deleteElements()" class="confirm text-gray-500 far fa-trash-alt cursor-pointer hover:text-red-500 transition-colors duration-150 "></i></div>
9+
<!-- <div><i @click="edit()" class="ml-2 text-gray-500 far fa-edit cursor-pointer hover:text-blue-500 transition-colors duration-150 "></i></div>-->
10+
<!-- <div><i @click="exportElements()" class="ml-2 text-gray-500 fas fa-file-export cursor-pointer hover:text-green-500 transition-colors duration-150 "></i></div>-->
11+
</div>
1212

1313

14-
<!-- per page selection -->
15-
<div v-if="!$parent.$props.hasOwnProperty('perPage') || $parent.$props.perPage.show != false" class="my-2 ml-2 bg-gray-100 w-40 p-2 rounded-lg flex flex-row justify-center items-center">
16-
<div class="w-full ">Per Page </div>
17-
<div class=" relative w-full">
18-
<select @change="rowsChange()" v-model="perPage" class="focus:ring-blue-400 focus:border-blue-400 block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline">
19-
<option v-for="page in $parent.perPage.counts" :value="page">{{ page }}</option>
14+
<!-- per page selection -->
15+
<div v-if="!$parent.$props.hasOwnProperty('perPage') || $parent.$props.perPage.show != false" class="my-2 ml-2 bg-gray-100 w-40 p-2 rounded-lg flex flex-row justify-center items-center shadow-lg">
16+
<div class="w-full ">{{trans('perPage')}} </div>
17+
<div class=" relative w-full">
18+
<select @change="rowsChange()" v-model="perPage" class="focus:ring-blue-400 focus:border-blue-400 block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline">
19+
<option v-for="page in $parent.perPage.counts" :value="page">{{ page }}</option>
2020

21-
</select>
21+
</select>
2222

23+
</div>
2324
</div>
24-
</div>
2525

2626
</div>
2727

@@ -35,13 +35,15 @@
3535
<select v-model="filtration.selectVal[select.label]"
3636

3737
@change="filter().select( {
38-
relation : select.relation,
38+
type : select.type || 'normal',
39+
relation : select.relation || null,
40+
searchColumn : select.searchColumn || null,
3941
value : filtration.selectVal[select.label],
4042
}, select.label)"
4143

42-
class="focus:ring-blue-400 focus:border-blue-400 block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline">
44+
class="focus:ring-blue-400 focus:border-blue-400 block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline">
4345
<option selected value=""> All </option>
44-
<option v-for="(model, index) in select.rows" :value="model['id']"> {{ model[select.column] }} </option>
46+
<option v-for="(model, index) in select.rows" :value="model[select.searchColumn.split('.').length > 1 ? select.searchColumn.split('.')[1] : select.searchColumn] ? model[select.searchColumn.split('.').length > 1 ? select.searchColumn.split('.')[1] : select.searchColumn] : model['id']"> {{ model[select.column] }} </option>
4547

4648
</select>
4749

@@ -65,6 +67,15 @@ export default {
6567
props: ['list'],
6668
data: function(){
6769
return {
70+
language: {
71+
ar: {
72+
perPage: "كل صفحة",
73+
74+
},
75+
en: {
76+
perPage: "Per Pae",
77+
},
78+
},
6879
perPage: 10,
6980
filtration:{
7081
select: {},
@@ -75,7 +86,7 @@ export default {
7586
7687
methods:{
7788
deleteElements: function(){
78-
if(this.checkList()) return;
89+
if(this.checkList()) return;
7990
8091
this.destroy();
8192
@@ -119,7 +130,7 @@ export default {
119130
return {
120131
select: (model, label)=> {
121132
this.filtration.select[label] = model;
122-
this.$parent.$data.requests.relations = this.filtration.select;
133+
this.$parent.$data.requests.select = this.filtration.select;
123134
this.$parent.all();
124135
}
125136
@@ -131,14 +142,13 @@ export default {
131142
this.$parent.$data.dataAlert.setShow().setStatus('error').setMessage( 'you didn\'t Selected any element').hide(5000);
132143
return true;
133144
}
134-
return false;
145+
return false;
135146
},
136147
removeAllSelection: function(){
137148
this.$parent.selectedAll ? this.$parent.removeSelection() : '';
138149
},
139150
140151
}
141152
142-
143153
}
144154
</script>

0 commit comments

Comments
 (0)