Skip to content

Commit 583922b

Browse files
woothuwoothu
committed
refactor: CTable refactor:
- delete cleaner, - rename notResponsive prop to responsive, - rename noFilter and noSorting props to filterable and sortable, - apply loading styles by one additional node, add slot loading, - remove loading styles customization, - rename prop small to size - update test
1 parent 365ac0a commit 583922b

File tree

3 files changed

+34
-86
lines changed

3 files changed

+34
-86
lines changed

‎src/components/Table/CTable.vue‎

Lines changed: 29 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343

4444

4545
<slot name="over-table"/>
46-
<div :class="`position-relative ${notResponsive ? '' : 'table-responsive'}`">
46+
<div :class="`position-relative ${responsive ? 'table-responsive' : '' }`">
4747
<table :class="tableClasses">
4848
<thead>
4949
<tr>
@@ -74,21 +74,12 @@
7474
</tr>
7575

7676
<tr v-if="columnFilter" class="table-sm">
77-
<th v-if="indexColumn" class="pb-2 pl-2">
78-
<CIcon
79-
v-if="indexColumn !== 'noCleaner'"
80-
width="18"
81-
name="ban"
82-
@click.native="clear"
83-
:class="isFiltered ? 'text-danger' : 'text-secondary'"
84-
title="clear table"
85-
/>
86-
</th>
77+
<th v-if="indexColumn"></th>
8778
<template v-for="(colName, index) in rawColumnNames" >
8879
<th :class="headerClass(index)" :key="index">
8980
<slot :name="`${rawColumnNames[index]}-filter`">
9081
<input
91-
v-if="!fields || !fields[index].noFilter"
82+
v-if="!fields || !fields[index].filterable !== false"
9283
class="w-100 table-filter"
9384
@input="addColumnFilter(colName, $event.target.value)"
9485
:value="columnFilterVal[colName]"
@@ -118,7 +109,7 @@
118109
:index="firstItemIndex + itemIndex"
119110
>
120111
<td>
121-
{{indexColumn !== 'noIndexes' ? firstItemIndex + itemIndex + 1 : ''}}
112+
{{ firstItemIndex + itemIndex + 1 }}
122113
</td>
123114
</slot>
124115
<template v-for="(colName, index) in rawColumnNames" >
@@ -205,18 +196,14 @@
205196
<slot name="caption"/>
206197
</table>
207198

199+
<slot name="loading" v-if="loading">
200+
<div style="position:absolute;left:0;top:0;bottom:0;right:0;background-color:rgb(255,255,255,0.4);">
201+
<div style="position:absolute;bottom:50%;left:50%;transform:translateX(-50%);">
202+
<CSpinner color="success"/>
203+
</div>
204+
</div>
205+
</slot>
208206

209-
<div
210-
v-if="loading"
211-
:style="topLoadingPosition"
212-
style="position:absolute;left:50%;transform:translateX(-50%);"
213-
>
214-
<CSpinner
215-
color="success"
216-
:style="spinnerSize"
217-
role="status"
218-
/>
219-
</div>
220207
</div>
221208
<slot name="under-table"/>
222209

@@ -253,13 +240,16 @@ export default {
253240
default: 10
254241
},
255242
activePage: Number,
256-
indexColumn: [Boolean, String],
243+
indexColumn: Boolean,
257244
columnFilter: Boolean,
258245
pagination: [Boolean, Object],
259246
addTableClasses: [String, Array, Object],
260-
notResponsive: Boolean,
247+
responsive: {
248+
type: Boolean,
249+
default: true
250+
},
261251
sortable: Boolean,
262-
small: Boolean,
252+
size: String,
263253
dark: Boolean,
264254
striped: Boolean,
265255
fixed: Boolean,
@@ -371,8 +361,7 @@ export default {
371361
'table',
372362
this.addTableClasses,
373363
{
374-
'is-loading': this.loading,
375-
'table-sm': this.small,
364+
[`table-${this.size}`]: this.size,
376365
'table-dark': this.dark,
377366
'table-striped': this.striped,
378367
'b-table-fixed': this.fixed,
@@ -388,14 +377,6 @@ export default {
388377
colspan () {
389378
return this.rawColumnNames.length + (this.indexColumn ? 1 : 0)
390379
},
391-
topLoadingPosition () {
392-
const headerHeight = (this.columnFilter ? 38 : 0) + ( this.small ? 32 + 4 : 46 + 7)
393-
return `top:${headerHeight}px`
394-
},
395-
spinnerSize () {
396-
const size = this.small ? 1.4 : this.currentItems.length === 1 ? 2 : 3
397-
return `width:${size + 'rem'};height:${size + 'rem'}`
398-
},
399380
isFiltered () {
400381
return this.tableFilterVal || Object.values(this.columnFilterVal).join('')
401382
}
@@ -428,16 +409,16 @@ export default {
428409
addColumnFilter (colName, value) {
429410
this.$set(this.columnFilterVal, colName, value)
430411
},
431-
clear () {
432-
this.tableFilterVal = ''
433-
this.columnFilterVal = {}
434-
this.sorter.column = ''
435-
this.sorter.asc = true
436-
const inputs = this.$el.getElementsByClassName('table-filter')
437-
for (let input of inputs) {
438-
input.value = ''
439-
}
440-
},
412+
// clear () {
413+
// this.tableFilterVal = ''
414+
// this.columnFilterVal = {}
415+
// this.sorter.column = ''
416+
// this.sorter.asc = true
417+
// const inputs = this.$el.getElementsByClassName('table-filter')
418+
// for (let input of inputs) {
419+
// input.value = ''
420+
// }
421+
// },
441422
pretifyName (name) {
442423
return name.replace(/[-_.]/g, ' ')
443424
.replace(/ +/g, ' ')
@@ -457,7 +438,7 @@ export default {
457438
return classes
458439
},
459440
isSortable (index) {
460-
return this.sortable && (!this.fields || !this.fields[index].notSortable)
441+
return this.sortable && (!this.fields || this.fields[index].sortable !== false)
461442
},
462443
headerClass (index) {
463444
const fields = this.fields
@@ -505,9 +486,6 @@ export default {
505486
-webkit-transition: transform 0.3s;
506487
transition: transform 0.3s;
507488
}
508-
.is-loading {
509-
opacity: .4;
510-
}
511489
.arrow-position {
512490
right: 0;
513491
top: 50%;

‎src/components/Table/tests/CTable.spec.js‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const customWrapper = mount(Component, {
2626
'registered',
2727
{ key: 'role', _style:'width:20%;' },
2828
{ key: 'status', _style:'width:20%;' },
29-
{ key: 'show_details' , label:'', _style:'width:1%', notSortable: true, noFilter: true },
29+
{ key: 'show_details' , label:'', _style:'width:1%', sortable: false, filterable: false },
3030
],
3131

3232
indexColumn: true,
@@ -76,10 +76,6 @@ describe(ComponentName, () => {
7676
customWrapper.setProps({ fields: undefined })
7777
expect(customWrapper.vm.columnNames[0]).toBe('Username')
7878
})
79-
it('clear table filters', () => {
80-
customWrapper.findAll('tr').at(1).find('svg').trigger('click')
81-
expect(customWrapper.vm.sorter.column).toBe('')
82-
})
8379
it('changes colspan when indexColumn is switched', () => {
8480
const colspanWithIndexColumn = customWrapper.vm.colspan
8581
customWrapper.setProps({ indexColumn: false })
@@ -95,16 +91,6 @@ describe(ComponentName, () => {
9591
expect(customWrapper.contains('.spinner-border')).toBe(true)
9692
customWrapper.setProps({ loading: false })
9793
})
98-
it('emits event when items per page changes', () => {
99-
customWrapper.findAll('tr').at(1).find('input').setValue('Estavan')
100-
expect(customWrapper.vm.spinnerSize.includes('2')).toBe(true)
101-
102-
customWrapper.findAll('tr').at(1).find('input').setValue('')
103-
expect(customWrapper.vm.spinnerSize.includes('3')).toBe(true)
104-
105-
customWrapper.setProps({ small: true })
106-
expect(customWrapper.vm.spinnerSize.includes('1.4')).toBe(true)
107-
})
10894
it('emits event when items per page changes', () => {
10995
customWrapper.findAll('option').at(2).setSelected()
11096
expect(customWrapper.emitted()['pagination-change'][0][0]).toBe(10)

‎src/components/Table/tests/__snapshots__/CTable.spec.js.snap‎

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -273,25 +273,7 @@ exports[`CTable renders correctly 2`] = `
273273
<tr
274274
class="table-sm"
275275
>
276-
<th
277-
class="pb-2 pl-2"
278-
>
279-
<svg
280-
class="text-danger"
281-
style="fill: currentColor;"
282-
title="clear table"
283-
viewBox="0 0 64 64"
284-
width="18"
285-
xmlns="http://www.w3.org/2000/svg"
286-
>
287-
<title>
288-
ban
289-
</title>
290-
<path
291-
d="M53.213 10.787c-5.429-5.429-12.929-8.787-21.213-8.787-16.569 0-30 13.431-30 30 0 8.284 3.358 15.784 8.787 21.213v0c5.429 5.429 12.929 8.787 21.213 8.787 16.569 0 30-13.431 30-30 0-8.284-3.358-15.784-8.787-21.213v0zM32 6c0.007 0 0.015 0 0.023 0 6.483 0 12.409 2.383 16.951 6.32l-0.032-0.027-36.648 36.648c-3.91-4.509-6.293-10.435-6.293-16.918 0-0.008 0-0.016 0-0.024v0.001c0-14.336 11.664-26 26-26zM32 58c-0.007 0-0.014 0-0.022 0-6.452 0-12.352-2.36-16.885-6.264l0.034 0.028 36.637-36.637c3.876 4.499 6.236 10.399 6.236 16.851 0 0.008 0 0.016 0 0.024v-0.001c0 14.336-11.664 26-26 26z"
292-
/>
293-
</svg>
294-
</th>
276+
<th />
295277
296278
<th
297279
class="user-custom-class"
@@ -324,7 +306,9 @@ exports[`CTable renders correctly 2`] = `
324306
<th
325307
class=""
326308
>
327-
<!---->
309+
<input
310+
class="w-100 table-filter"
311+
/>
328312
</th>
329313
</tr>
330314
</thead>

0 commit comments

Comments
 (0)