Skip to content

Commit a9654d5

Browse files
woothuwoothu
committed
feat: CDataTable - table filter custom label and placeholder possibility
1 parent 405ea5f commit a9654d5

File tree

4 files changed

+62
-23
lines changed

4 files changed

+62
-23
lines changed

‎src/components/index.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -544,7 +544,7 @@ export declare class CDataTable extends Vue {
544544
footer: boolean
545545
sorter: [boolean, string]
546546
columnFilter: [boolean, string]
547-
tableFilter: [boolean, string]
547+
tableFilter: [boolean, object]
548548
sorterValue: object
549549
tableFilterValue: string
550550
columnFilterValue: object

‎src/components/table/CDataTable.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
class="col-sm-6 form-inline p-0"
66
v-if="tableFilter"
77
>
8-
<label class="mr-2">Filter:</label>
8+
<label class="mr-2">{{tableFilterData.label}}</label>
99
<input
1010
class="form-control table-filter"
1111
type="text"
12-
placeholder="type string..."
12+
:placeholder="tableFilterData.placeholder"
1313
@input="tableFilterChange($event.target.value)"
1414
@change="tableFilterChange($event.target.value, 'change')"
1515
:value="tableFilterState"
@@ -245,7 +245,7 @@ export default {
245245
outlined: Boolean,
246246
itemsPerPageSelect: Boolean,
247247
sorter: [Boolean, String],
248-
tableFilter: [Boolean, String],
248+
tableFilter: [Boolean, Object],
249249
columnFilter: [Boolean, String],
250250
sorterValue: {
251251
type: Object,
@@ -400,6 +400,12 @@ export default {
400400
},
401401
colspan () {
402402
return this.rawColumnNames.length
403+
},
404+
tableFilterData () {
405+
return {
406+
label: this.tableFilter.label || 'Filter:',
407+
placeholder: this.tableFilter.placeholder || 'type string...'
408+
}
403409
}
404410
},
405411
methods: {

‎src/components/table/tests/CDataTable.spec.js‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -75,16 +75,6 @@ describe(ComponentName, () => {
7575
customWrapper.setProps({ fields: undefined })
7676
expect(customWrapper.vm.columnNames[0]).toBe('Username')
7777
})
78-
// it('changes colspan when indexColumn is switched', () => {
79-
// const colspanWithIndexColumn = customWrapper.vm.colspan
80-
// customWrapper.setProps({ indexColumn: false })
81-
// expect(customWrapper.vm.colspan).toBe(colspanWithIndexColumn - 1)
82-
// })
83-
it('table filter works correctly', () => {
84-
customWrapper.setProps({ tableFilterValue: 'Yiorgos' })
85-
expect(customWrapper.vm.sortedItems.length).toBe(1)
86-
customWrapper.setProps({ tableFilterValue: null })
87-
})
8878
it('shows loading layer when loading prop is set', () => {
8979
customWrapper.setProps({ loading: true })
9080
expect(customWrapper.contains('.spinner-border')).toBe(true)
@@ -107,15 +97,6 @@ describe(ComponentName, () => {
10797
customWrapper.setProps({ items: newItems })
10898
expect(customWrapper.vm.sortedItems.length).toBe(4)
10999
})
110-
it('correctly filter by table filter after input or change event', () => {
111-
const input = customWrapper.find('input')
112-
const firstUsername = () => customWrapper.vm.sortedItems[0].username
113-
input.setValue('Estavan')
114-
expect(firstUsername()).toMatch('Estavan')
115-
input.element.value = "Chetan"
116-
input.trigger('change')
117-
expect(firstUsername()).toMatch('Chetan')
118-
})
119100
it('triggers proper events on column input change', () => {
120101
const input = customWrapper.findAll('tr').at(1).find('input')
121102
const changeEmmited = () => customWrapper.emitted()['update:column-filter-value']
@@ -128,4 +109,29 @@ describe(ComponentName, () => {
128109
input.trigger('input')
129110
expect(inputEmmited()).toBeTruthy()
130111
})
112+
it('correctly filter by table filter after input or change event', () => {
113+
const input = customWrapper.find('input')
114+
const firstUsername = () => customWrapper.vm.sortedItems[0].username
115+
input.setValue('Estavan')
116+
expect(firstUsername()).toMatch('Estavan')
117+
input.element.value = "Chetan"
118+
input.trigger('change')
119+
expect(firstUsername()).toMatch('Chetan')
120+
})
121+
it('table filter works correctly', () => {
122+
customWrapper.setProps({tableFilterValue: 'Yiorgos', tableFilter: false})
123+
expect(customWrapper.vm.sortedItems.length).toBe(1)
124+
})
125+
it('changes pagination number correctly', () => {
126+
customWrapper.setProps({
127+
itemsPerPage: 13
128+
})
129+
expect(customWrapper.vm.perPageItems).toBe(13)
130+
})
131+
// it('Sets table filter data correctly', () => {
132+
// customWrapper.setProps({
133+
// tableFilter: { label: 'label'}
134+
// })
135+
// expect(customWrapper.vm.tableFilterData.label).toBe('label')
136+
// })
131137
})

‎src/components/table/tests/__snapshots__/CDataTable.spec.js.snap‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@ exports[`CDataTable renders correctly 1`] = `
3737
width="30"
3838
xmlns="http://www.w3.org/2000/svg"
3939
>
40+
<title>
41+
icon
42+
</title>
4043
<path
4144
d="M19.955 4.045c-2.036-2.036-4.848-3.295-7.955-3.295-6.213 0-11.25 5.037-11.25 11.25 0 3.107 1.259 5.919 3.295 7.955v0c2.036 2.036 4.848 3.295 7.955 3.295 6.213 0 11.25-5.037 11.25-11.25 0-3.107-1.259-5.919-3.295-7.955v0zM12 2.25c0.003 0 0.006 0 0.009 0 2.431 0 4.653 0.894 6.356 2.37l-0.012-0.010-13.743 13.743c-1.466-1.691-2.36-3.913-2.36-6.344 0-0.003 0-0.006 0-0.009v0c0-5.376 4.374-9.75 9.75-9.75zM12 21.75c-0.002 0-0.005 0-0.008 0-2.419 0-4.632-0.885-6.332-2.349l0.013 0.011 13.739-13.739c1.453 1.687 2.338 3.9 2.338 6.319 0 0.003 0 0.006 0 0.009v-0c0 5.376-4.374 9.75-9.75 9.75z"
4245
/>
@@ -162,6 +165,9 @@ exports[`CDataTable renders correctly 2`] = `
162165
width="18"
163166
xmlns="http://www.w3.org/2000/svg"
164167
>
168+
<title>
169+
icon
170+
</title>
165171
<path
166172
d="M18.311 7.061l-6.311-6.311-6.31 6.311 1.061 1.061 4.5-4.5v19.593h1.5v-19.593l4.5 4.5 1.061-1.061z"
167173
/>
@@ -183,6 +189,9 @@ exports[`CDataTable renders correctly 2`] = `
183189
width="18"
184190
xmlns="http://www.w3.org/2000/svg"
185191
>
192+
<title>
193+
icon
194+
</title>
186195
<path
187196
d="M18.311 7.061l-6.311-6.311-6.31 6.311 1.061 1.061 4.5-4.5v19.593h1.5v-19.593l4.5 4.5 1.061-1.061z"
188197
/>
@@ -204,6 +213,9 @@ exports[`CDataTable renders correctly 2`] = `
204213
width="18"
205214
xmlns="http://www.w3.org/2000/svg"
206215
>
216+
<title>
217+
icon
218+
</title>
207219
<path
208220
d="M18.311 7.061l-6.311-6.311-6.31 6.311 1.061 1.061 4.5-4.5v19.593h1.5v-19.593l4.5 4.5 1.061-1.061z"
209221
/>
@@ -225,6 +237,9 @@ exports[`CDataTable renders correctly 2`] = `
225237
width="18"
226238
xmlns="http://www.w3.org/2000/svg"
227239
>
240+
<title>
241+
icon
242+
</title>
228243
<path
229244
d="M18.311 7.061l-6.311-6.311-6.31 6.311 1.061 1.061 4.5-4.5v19.593h1.5v-19.593l4.5 4.5 1.061-1.061z"
230245
/>
@@ -503,6 +518,9 @@ exports[`CDataTable renders correctly 2`] = `
503518
width="18"
504519
xmlns="http://www.w3.org/2000/svg"
505520
>
521+
<title>
522+
icon
523+
</title>
506524
<path
507525
d="M18.311 7.061l-6.311-6.311-6.31 6.311 1.061 1.061 4.5-4.5v19.593h1.5v-19.593l4.5 4.5 1.061-1.061z"
508526
/>
@@ -524,6 +542,9 @@ exports[`CDataTable renders correctly 2`] = `
524542
width="18"
525543
xmlns="http://www.w3.org/2000/svg"
526544
>
545+
<title>
546+
icon
547+
</title>
527548
<path
528549
d="M18.311 7.061l-6.311-6.311-6.31 6.311 1.061 1.061 4.5-4.5v19.593h1.5v-19.593l4.5 4.5 1.061-1.061z"
529550
/>
@@ -545,6 +566,9 @@ exports[`CDataTable renders correctly 2`] = `
545566
width="18"
546567
xmlns="http://www.w3.org/2000/svg"
547568
>
569+
<title>
570+
icon
571+
</title>
548572
<path
549573
d="M18.311 7.061l-6.311-6.311-6.31 6.311 1.061 1.061 4.5-4.5v19.593h1.5v-19.593l4.5 4.5 1.061-1.061z"
550574
/>
@@ -566,6 +590,9 @@ exports[`CDataTable renders correctly 2`] = `
566590
width="18"
567591
xmlns="http://www.w3.org/2000/svg"
568592
>
593+
<title>
594+
icon
595+
</title>
569596
<path
570597
d="M18.311 7.061l-6.311-6.311-6.31 6.311 1.061 1.061 4.5-4.5v19.593h1.5v-19.593l4.5 4.5 1.061-1.061z"
571598
/>

0 commit comments

Comments
 (0)