Skip to content

Commit 0b0ef16

Browse files
szczepanmasnyszczepanmasny
committed
clear filters
1 parent f4ee26d commit 0b0ef16

File tree

8 files changed

+225
-189
lines changed

8 files changed

+225
-189
lines changed

‎src/crud/components/ChildrenTable.vue‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<v-card-title class="card-title table-controls">
44
<v-layout row wrap>
55

6-
<v-flex xs12 xl4>
6+
<v-flex xs12 xl2>
77
<!-- Dialog for creating item -->
88
<v-tooltip top v-if="createButton">
99
<v-btn fab small dark color="green" @click="create()" slot="activator">
@@ -20,7 +20,7 @@
2020
</v-tooltip>
2121
</v-flex>
2222

23-
<v-flex xs12 xl8 text-xs-left text-xl-right>
23+
<v-flex xs12 xl10 text-xs-left text-xl-right>
2424

2525
<!-- Search by fields -->
2626
<v-menu offset-y :close-on-content-click="false" style="margin-right:30px;">
@@ -55,6 +55,21 @@
5555
</span>
5656
</template>
5757

58+
<!-- Clear filters -->
59+
<v-tooltip top>
60+
<v-btn
61+
class="white--text"
62+
fab
63+
small
64+
color="red"
65+
@click="clearFilters()"
66+
slot="activator"
67+
>
68+
<v-icon>delete_sweep</v-icon>
69+
</v-btn>
70+
<span>{{ $t('global.datatable.buttons.clearFilters') }}</span>
71+
</v-tooltip>
72+
5873
<v-tooltip left>
5974
<v-btn class="white--text" fab small color="green darken-4" @click="exportToExcel()" slot="activator" :loading="excelLoading">
6075
<v-icon>save_alt</v-icon>

‎src/crud/components/DataTableClientSide.vue‎

Lines changed: 69 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,79 @@
11
<template>
22
<v-card>
3-
<v-card-title class="card-title table-controls">
4-
<v-layout row wrap>
5-
<v-flex xs12 lg4>
6-
<data-table-controls
7-
:deleteMode="deleteMode"
8-
@create="create"
9-
@editSelected="editSelected"
10-
@suspendSelected="suspendSelected"
11-
@restoreSelected="restoreSelected"
12-
@destroySelected="destroySelected"
13-
@refreshTable="refreshTable"
14-
></data-table-controls>
15-
</v-flex>
16-
17-
<v-flex xs12 lg8 text-xs-left text-lg-right>
18-
<!-- Search by fields -->
19-
<v-menu offset-y :close-on-content-click="false" style="margin-right:30px;">
20-
<v-btn small fab dark slot="activator" class="primary">
21-
<v-icon>filter_list</v-icon>
22-
</v-btn>
23-
<v-list style="overflow-y:false;">
24-
<v-list-tile v-for="(item, index) in filterColumns" :key="index">
25-
<v-autocomplete
26-
:items="filterModes"
27-
v-model="item.mode"
28-
item-text="text"
29-
item-value="name"
30-
:label="$t('global.datatable.filterModes.label')"
31-
hide-details
32-
@input="updateColumnFilterMode($event, index)"
33-
></v-autocomplete>
34-
<v-text-field
35-
v-model="item.value"
36-
hide-details
37-
:label="item.text"
38-
@input="updateFilterColumns($event, index)"
39-
></v-text-field>
40-
</v-list-tile>
41-
</v-list>
42-
</v-menu>
43-
44-
<!-- Search in table -->
45-
<span style="margin-right:30px;display:inline-block;width:250px;">
46-
<v-text-field
47-
append-icon="search"
48-
:label="$t('global.datatable.search')"
49-
single-line
50-
hide-details
51-
v-model="search"
52-
min-width="200"
53-
></v-text-field>
54-
</span>
55-
56-
<!-- Select statuses (active/inactive) -->
57-
<template v-if="['soft', 'both'].includes(deleteMode)">
58-
<span style="margin-right:30px;display:inline-block;width:250px;">
3+
<data-table-controls
4+
:deleteMode="deleteMode"
5+
@create="create"
6+
@editSelected="editSelected"
7+
@suspendSelected="suspendSelected"
8+
@restoreSelected="restoreSelected"
9+
@destroySelected="destroySelected"
10+
@refreshTable="refreshTable"
11+
@clearFilters="clearFilters"
12+
>
13+
<template slot="center">
14+
<!-- Search by fields -->
15+
<v-menu offset-y :close-on-content-click="false" style="margin-right:30px;">
16+
<v-btn small fab dark slot="activator" class="primary">
17+
<v-icon>filter_list</v-icon>
18+
</v-btn>
19+
<v-list style="overflow-y:false;">
20+
<v-list-tile v-for="(item, index) in filterColumns" :key="index">
5921
<v-autocomplete
60-
:label="$t('global.datatable.status.title')"
61-
v-bind:items="statuses"
62-
v-model="selectedStatuses"
63-
single-line
22+
:items="filterModes"
23+
v-model="item.mode"
6424
item-text="text"
65-
item-value="value"
66-
multiple
67-
chips
25+
item-value="name"
26+
:label="$t('global.datatable.filterModes.label')"
27+
hide-details
28+
@input="updateColumnFilterMode($event, index)"
6829
></v-autocomplete>
69-
</span>
70-
</template>
30+
<v-text-field
31+
v-model="item.value"
32+
hide-details
33+
:label="item.text"
34+
@input="updateFilterColumns($event, index)"
35+
></v-text-field>
36+
</v-list-tile>
37+
</v-list>
38+
</v-menu>
7139

72-
<v-tooltip left>
73-
<v-btn class="white--text" fab small color="green darken-4" @click="exportToExcel()" slot="activator" :loading="excelLoading">
74-
<v-icon>save_alt</v-icon>
75-
</v-btn>
76-
<span>{{ $t('global.datatable.buttons.copyToExcel') }}</span>
77-
</v-tooltip>
40+
<!-- Search in table -->
41+
<span style="margin-right:30px;display:inline-block;width:250px;">
42+
<v-text-field
43+
append-icon="search"
44+
:label="$t('global.datatable.search')"
45+
single-line
46+
hide-details
47+
v-model="search"
48+
min-width="200"
49+
></v-text-field>
50+
</span>
7851

79-
</v-flex>
80-
</v-layout>
81-
</v-card-title>
52+
<!-- Select statuses (active/inactive) -->
53+
<template v-if="['soft', 'both'].includes(deleteMode)">
54+
<span style="margin-right:30px;display:inline-block;width:250px;">
55+
<v-autocomplete
56+
:label="$t('global.datatable.status.title')"
57+
v-bind:items="statuses"
58+
v-model="selectedStatuses"
59+
single-line
60+
item-text="text"
61+
item-value="value"
62+
multiple
63+
chips
64+
></v-autocomplete>
65+
</span>
66+
</template>
67+
</template>
68+
<template slot="right">
69+
<v-tooltip left>
70+
<v-btn class="white--text" fab small color="green darken-4" @click="exportToExcel()" slot="activator" :loading="excelLoading">
71+
<v-icon>save_alt</v-icon>
72+
</v-btn>
73+
<span>{{ $t('global.datatable.buttons.copyToExcel') }}</span>
74+
</v-tooltip>
75+
</template>
76+
</data-table-controls>
8277
<!-- Table -->
8378
<v-data-table
8479
class="datatable"
@@ -164,5 +159,3 @@ export default {
164159
}
165160
};
166161
</script>
167-
<style scoped>
168-
</style>

‎src/crud/components/DataTableControls.vue‎

Lines changed: 79 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,82 @@
11
<template>
2-
<span>
3-
<!-- Dialog for creating item -->
4-
<v-tooltip top>
5-
<v-btn fab dark color="green" @click="create()" slot="activator">
6-
<v-icon>add</v-icon>
7-
</v-btn>
8-
<span>{{ $t('global.datatable.add') }}</span>
9-
</v-tooltip>
10-
<!-- Multiple edit -->
11-
<v-tooltip top>
12-
<v-btn fab small dark color="orange" @click="editSelected()" slot="activator">
13-
<v-icon>edit</v-icon>
14-
</v-btn>
15-
<span>{{ $t('global.datatable.buttons.editSelected') }}</span>
16-
</v-tooltip>
17-
<!-- suspend/restore record (if soft deletes are enabled) -->
18-
<template v-if="['soft', 'both'].includes(deleteMode)">
19-
<v-tooltip top>
20-
<v-btn outline class="white--text" fab small color="red" @click="suspendSelected()" slot="activator">
21-
<v-icon>undo</v-icon>
22-
</v-btn>
23-
<span>{{ $t('global.datatable.buttons.suspendSelected') }}</span>
24-
</v-tooltip>
25-
<v-tooltip top>
26-
<v-btn outline class="white--text" fab small color="green" @click="restoreSelected()" slot="activator">
27-
<v-icon>redo</v-icon>
28-
</v-btn>
29-
<span>{{ $t('global.datatable.buttons.restoreSelected') }}</span>
30-
</v-tooltip>
31-
</template>
32-
<!-- hard delete -->
33-
<v-tooltip top v-if="['hard', 'both'].includes(deleteMode)">
34-
<v-btn outline class="white--text" fab small color="red" @click="destroySelected()" slot="activator">
35-
<v-icon>delete</v-icon>
36-
</v-btn>
37-
<span>{{ $t('global.datatable.buttons.deleteSelected') }}</span>
38-
</v-tooltip>
39-
<!-- Refresh table -->
40-
<v-tooltip top>
41-
<v-btn
42-
outline
43-
class="white--text"
44-
fab
45-
small
46-
color="blue"
47-
@click="refreshTable()"
48-
slot="activator"
49-
>
50-
<v-icon>refresh</v-icon>
51-
</v-btn>
52-
<span>{{ $t('global.datatable.buttons.refreshTable') }}</span>
53-
</v-tooltip>
54-
</span>
2+
<v-card-title class="card-title table-controls">
3+
<v-layout row wrap>
4+
<v-flex xs12 lg3>
5+
<!-- Dialog for creating item -->
6+
<v-tooltip top>
7+
<v-btn fab dark color="green" @click="create()" slot="activator">
8+
<v-icon>add</v-icon>
9+
</v-btn>
10+
<span>{{ $t('global.datatable.add') }}</span>
11+
</v-tooltip>
12+
<!-- Multiple edit -->
13+
<v-tooltip top>
14+
<v-btn fab small dark color="orange" @click="editSelected()" slot="activator">
15+
<v-icon>edit</v-icon>
16+
</v-btn>
17+
<span>{{ $t('global.datatable.buttons.editSelected') }}</span>
18+
</v-tooltip>
19+
<!-- suspend/restore record (if soft deletes are enabled) -->
20+
<template v-if="['soft', 'both'].includes(deleteMode)">
21+
<v-tooltip top>
22+
<v-btn outline class="white--text" fab small color="red" @click="suspendSelected()" slot="activator">
23+
<v-icon>undo</v-icon>
24+
</v-btn>
25+
<span>{{ $t('global.datatable.buttons.suspendSelected') }}</span>
26+
</v-tooltip>
27+
<v-tooltip top>
28+
<v-btn outline class="white--text" fab small color="green" @click="restoreSelected()" slot="activator">
29+
<v-icon>redo</v-icon>
30+
</v-btn>
31+
<span>{{ $t('global.datatable.buttons.restoreSelected') }}</span>
32+
</v-tooltip>
33+
</template>
34+
<!-- hard delete -->
35+
<v-tooltip top v-if="['hard', 'both'].includes(deleteMode)">
36+
<v-btn outline class="white--text" fab small color="red" @click="destroySelected()" slot="activator">
37+
<v-icon>delete</v-icon>
38+
</v-btn>
39+
<span>{{ $t('global.datatable.buttons.deleteSelected') }}</span>
40+
</v-tooltip>
41+
<slot name="left"></slot>
42+
</v-flex>
43+
<v-flex xs12 lg6 text-xs-left text-lg-center>
44+
<slot name="center"></slot>
45+
</v-flex>
46+
<v-flex xs12 lg3 text-xs-left text-lg-right>
47+
<!-- Refresh table -->
48+
<v-tooltip top>
49+
<v-btn
50+
class="white--text"
51+
fab
52+
small
53+
color="blue"
54+
@click="refreshTable()"
55+
slot="activator"
56+
>
57+
<v-icon>refresh</v-icon>
58+
</v-btn>
59+
<span>{{ $t('global.datatable.buttons.refreshTable') }}</span>
60+
</v-tooltip>
61+
<!-- Clear filters -->
62+
<v-tooltip top>
63+
<v-btn
64+
class="white--text"
65+
fab
66+
small
67+
color="red"
68+
@click="clearFilters()"
69+
slot="activator"
70+
>
71+
<v-icon>delete_sweep</v-icon>
72+
</v-btn>
73+
<span>{{ $t('global.datatable.buttons.clearFilters') }}</span>
74+
</v-tooltip>
75+
<slot name="right"></slot>
76+
</v-flex>
77+
</v-layout>
78+
</v-card-title>
79+
5580
</template>
5681

5782
<script>
@@ -66,6 +91,7 @@ export default {
6691
restoreSelected() {this.$emit('restoreSelected')},
6792
destroySelected() {this.$emit('destroySelected')},
6893
refreshTable() {this.$emit('refreshTable')},
94+
clearFilters() {this.$emit('clearFilters')},
6995
}
7096
};
7197
</script>

0 commit comments

Comments
 (0)