-
Notifications
You must be signed in to change notification settings - Fork 1
/
ToolBar.vue
154 lines (110 loc) · 5.71 KB
/
ToolBar.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<template>
<div >
<div class="flex flex-row">
<!-- button group -->
<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">
<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>
<!-- <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>-->
<!-- <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>-->
</div>
<!-- per page selection -->
<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">
<div class="w-full ">Per Page </div>
<div class=" relative w-full">
<select @change="rowsChange()" v-model="perPage" class="focus:ring-blue-400 focus:border-blue-400 block appearance-none w-max 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">
<option v-for="page in $parent.perPage.counts" :value="page">{{ page }}</option>
</select>
</div>
</div>
</div>
<!-- select filtration -->
<div v-if="this.$parent.$props.filters && this.$parent.$props.filters.selection && this.$parent.$props.filters.selection.show != false" class="flex flex-row justify-start items-center">
<div v-for="select in this.$parent.$props.filters.selection.data" class="my-2 ml-2 bg-gray-100 w-48 p-2 rounded-lg flex flex-row justify-center items-center">
<div class="w-full ">{{ select.label }} </div>
<div class=" relative w-full">
<select v-model="filtration.selectVal[select.label]"
@change="filter().select( {
type : select.type || 'normal',
relation : select.relation || null,
searchColumn : select.searchColumn || null,
value : filtration.selectVal[select.label],
}, select.label)"
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">
<option selected value=""> All </option>
<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>
</select>
</div>
</div>
</div>
<!-- End select filtration -->
</div>
</template>
<script>
export default {
props: ['list'],
data: function(){
return {
language: {
ar: {
perPage: "كل صفحة",
},
en: {
perPage: "Per Pae",
},
},
perPage: 10,
filtration:{
select: {},
selectVal : {}
}
}
},
methods:{
deleteElements: function(){
if(this.checkList()) return;
this.destroy();
this.removeAllSelection();
},
destroy:function(){
axios.delete(this.$parent.$props.config.toolbar.delete.url, {data: {list: this.list}})
.then(response => {
// handle success
this.$parent.$data.dataAlert.setShow().setStatus('success').setMessage( 'your list deleted successfully').hide(5000);
this.$parent.selectedList = [];
this.$parent.all();
}).catch( (error) => {
// this.errors = error.response.data.errors;
});
},
edit:function(){
if(this.checkList()) return;
},
exportElements:function(){
if(this.checkList()) return;
},
rowsChange: function(){
this.$parent.$data.requests.perPage = this.perPage;
this.$parent.all();
},
filter: function(){
return {
select: (model, label)=> {
this.filtration.select[label] = model;
this.$parent.$data.requests.select = this.filtration.select;
this.$parent.all();
}
};
},
checkList: function(){
if(!this.list.length){
this.$parent.$data.dataAlert.setShow().setStatus('error').setMessage( 'you didn\'t Selected any element').hide(5000);
return true;
}
return false;
},
removeAllSelection: function(){
this.$parent.selectedAll ? this.$parent.removeSelection() : '';
},
}
}
</script>