feat: CDataTable new functionalities:

woothu · woothu · commit 3ee6adfb47bc · 2020-01-14T18:04:35.000+01:00
- tableFIlter, columnFilter, sorter props now have configuration
objects (passing String is removed).
- scoped function classes added to sorting-icon slot
- delete 'table-filter-input' and 'column-filter-input' events
diff --git a/src/components/index.d.ts b/src/components/index.d.ts
@@ -540,8 +540,8 @@ export declare class CDataTable extends Vue {
   outlined: boolean
   optionsRow: [boolean, string]
   footer: boolean
-  sorter: [boolean, string]
-  columnFilter: [boolean, string]
+  sorter: [boolean, object]
+  columnFilter: [boolean, object]
   tableFilter: [boolean, object]
   sorterValue: object
   tableFilterValue: string
diff --git a/src/components/table/CDataTable.vue b/src/components/table/CDataTable.vue
@@ -10,7 +10,7 @@
           class="form-control table-filter"
           type="text"
           :placeholder="tableFilterData.placeholder"
-          @input="tableFilterChange($event.target.value)"
+          @input="tableFilterChange($event.target.value, 'input')"
           @change="tableFilterChange($event.target.value, 'change')"
           :value="tableFilterState"
         >
@@ -62,6 +62,7 @@
                   v-if="isSortable(index)"
                   name="sorting-icon"
                   :state="getIconState(index)"
+                  :classes="iconClasses(index)"
                 >
                   <CIcon
                     width="18"
@@ -244,9 +245,9 @@ export default {
     border: Boolean,
     outlined: Boolean,
     itemsPerPageSelect: Boolean,
-    sorter: [Boolean, String],
+    sorter: [Boolean, Object],
     tableFilter: [Boolean, Object],
-    columnFilter: [Boolean, String],
+    columnFilter: [Boolean, Object],
     sorterValue: {
       type: Object,
       default: () => { return {} }
@@ -308,9 +309,12 @@ export default {
   computed: {
     columnFiltered () {
       let items = this.passedItems.slice()
+      if (this.columnFilter && this.columnFilter.external) {
+        return items
+      }
       Object.entries(this.columnFilterState).forEach(([key, value]) => {
-        if (value && this.rawColumnNames.includes(key)) {
-          const columnFilter = String(value).toLowerCase()
+        const columnFilter = String(value).toLowerCase()
+        if (columnFilter && this.rawColumnNames.includes(key)) {
           items = items.filter(item => {
             return String(item[key]).toLowerCase().includes(columnFilter)
           })
@@ -325,18 +329,19 @@ export default {
     },
     tableFiltered () {
       let items = this.columnFiltered.slice()
-      if (this.tableFilterState) {
-        const filter = this.tableFilterState.toLowerCase()
-        const hasFilter = (item) => String(item).toLowerCase().includes(filter)
-        items = items.filter(item => {
-          return this.filterableCols.filter(key => hasFilter(item[key])).length
-        })
+      if (!this.tableFilterState || (this.tableFilter && this.tableFilter.external)) {
+        return items
       }
+      const filter = this.tableFilterState.toLowerCase()
+      const hasFilter = (item) => String(item).toLowerCase().includes(filter)
+      items = items.filter(item => {
+        return this.filterableCols.filter(key => hasFilter(item[key])).length
+      })
       return items
     },
     sortedItems () {
       const col = this.sorterState.column
-      if (!col || !this.rawColumnNames.includes(col)) {
+      if (!col || !this.rawColumnNames.includes(col) || this.sorter.external) {
         return this.tableFiltered
       }
       //if values in column are to be sorted by numeric value they all have to be type number
@@ -410,27 +415,35 @@ export default {
   },
   methods: {
     changeSort (column, index) {
-      if (column && !this.isSortable(index)) {
+      if (!this.isSortable(index)) {
         return
       }
       //if column changed or sort was descending change asc to true
       const state = this.sorterState
-      state.asc = state.column !== column || !state.asc
-      state.column = column
+      const columnRepeated = state.column === column 
+      if (!this.sorter || !this.sorter.resetable) {
+        state.column = column 
+      } else {
+        state.column = columnRepeated && state.asc === false ? undefined : column
+      }
+      state.asc = !(columnRepeated && state.asc)
       this.$emit('update:sorter-value', this.sorterState)
     },
     columnFilterEvent (colName, value, type) {
-      this.setColumnFilter(colName, value)
-      const e = type === 'input' ? 'column-filter-input' : 'update:column-filter-value'
-      this.$emit(e, this.columnFilterState)
-    },
-    setColumnFilter (colName, value) {
+      const isLazy = this.columnFilter && this.columnFilter.lazy === true
+      if (isLazy && type === 'input' || !isLazy && type === 'change') {
+        return
+      }
       this.$set(this.columnFilterState, colName, value)
+      this.$emit('update:column-filter-value', this.tableFilterState)
     },
-    tableFilterChange (value, type = 'input') {
+    tableFilterChange (value, type) {
+      const isLazy = this.tableFilter && this.tableFilter.lazy === true
+      if (isLazy && type === 'input' || !isLazy && type === 'change') {
+        return
+      }
       this.tableFilterState = value
-      const e = type === 'input' ? 'table-filter-input' : 'update:table-filter-value'
-      this.$emit(e, this.tableFilterState)
+      this.$emit('update:table-filter-value', this.tableFilterState)
     },
     pretifyName (name) {
       return name.replace(/[-_.]/g, ' ')
@@ -507,7 +520,7 @@ export default {
   transform: translateY(-50%);
 }
 .rotate-icon {
-  -ms-transform: translateY(-50%)  rotate(-180deg);
+  -ms-transform: translateY(-50%) rotate(-180deg);
   transform: translateY(-50%) rotate(-180deg);
 }
 </style>
diff --git a/src/components/table/tests/CDataTable.spec.js b/src/components/table/tests/CDataTable.spec.js
@@ -11,42 +11,45 @@ const items = [
   {username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
   {
     username: 'Friderik Dávid', 
-    registered: '2012/01/21',
+    registered: '2011/01/21',
     role: 'Staff', 
     status: 'Active',
     _cellClasses: { registered: 'custom-cell-class' }
   },
 ]
+const customWrapper = createCustomWrapper()
 
-const customWrapper = mount(Component, {
-  propsData: {
-    items,
-    fields: [
-      { key: 'username', _style:'width:40%', _classes: 'user-custom-class' },
-      'registered',
-      { key: 'role', _style:'width:20%;' },
-      { key: 'status', _style:'width:20%;' },
-      { key: 'show_details' , label:'', _style:'width:1%', sorter: false, filter: false },
-    ],
+function createCustomWrapper () {
+  return mount(Component, {
+    propsData: {
+      items,
+      fields: [
+        { key: 'username', _style:'width:40%', _classes: 'user-custom-class' },
+        'registered',
+        { key: 'role', _style:'width:20%;' },
+        { key: 'status', _style:'width:20%;' },
+        { key: 'show_details' , label:'', _style:'width:1%', sorter: false, filter: false },
+      ],
 
-    tableFilter: true,
-    itemsPerPageSelect: true,
-    addTableClasses: 'additional-table-class',
-    sorter: true,
-    small: false,
-    dark: true,
-    striped: true,
-    fixed: false,
-    hover: true,
-    border: true,
-    outlined: true,
-    columnFilter: true,
-    footer: true,
-    sorterValue: { column: 'username', asc: false },
-    columnFilterValue: { registered: '2012', 'non_existing': 'smh' },
-    pagination: true
-  }
-})
+      tableFilter: true,
+      itemsPerPageSelect: true,
+      addTableClasses: 'additional-table-class',
+      sorter: true,
+      small: false,
+      dark: true,
+      striped: true,
+      fixed: false,
+      hover: true,
+      border: true,
+      outlined: true,
+      columnFilter: true,
+      footer: true,
+      sorterValue: { column: 'username', asc: false },
+      columnFilterValue: { registered: '2012', 'non_existing': 'smh' },
+      pagination: true
+    }
+  })
+}
 
 describe(ComponentName, () => {
   it('has a name', () => {
@@ -90,31 +93,36 @@ describe(ComponentName, () => {
   })
   it('correctly updates items', () => {
     //test if watcher is not fired by coverage
-    customWrapper.setProps({ items: items.slice() })
-    expect(customWrapper.vm.sortedItems.length).toBe(5)
-
-    const newItems = items.slice(0, 4)
-    customWrapper.setProps({ items: newItems })
-    expect(customWrapper.vm.sortedItems.length).toBe(4)
-  })
-  it('triggers proper events on column input change', () => {
-    const input = customWrapper.findAll('tr').at(1).find('input')
-    const changeEmmited = () => customWrapper.emitted()['update:column-filter-value']
-    const inputEmmited = () => customWrapper.emitted()['column-filter-input']
+    const localWrapper = createCustomWrapper()
+    localWrapper.setProps({ items: items.slice() })
+    expect(localWrapper.vm.sortedItems.length).toBe(4)
 
-    expect(changeEmmited()).not.toBeTruthy()
-    expect(inputEmmited()).not.toBeTruthy()
-    input.trigger('change')
-    expect(changeEmmited()).toBeTruthy()
+    const newItems = items.slice(0, 2)
+    localWrapper.setProps({ items: newItems })
+    expect(localWrapper.vm.sortedItems.length).toBe(2)
+  })
+  it('updates column filter on events depending on lazy modifier', () => {
+    const localWrapper = createCustomWrapper()
+    const input = localWrapper.findAll('tr').at(1).find('input')
+    const updateEmmited = () => localWrapper.emitted()['update:column-filter-value']
+    localWrapper.setProps({ columnFilter: { lazy: true } })
     input.trigger('input')
-    expect(inputEmmited()).toBeTruthy()
+    expect(updateEmmited()).not.toBeTruthy()
+    localWrapper.setProps({ columnFilter: true })
+    input.trigger('input')
+    expect(updateEmmited()).toBeTruthy()
   })
-  it('correctly filter by table filter after input or change event', () => {
-    const input = customWrapper.find('input')
-    const firstUsername = () => customWrapper.vm.sortedItems[0].username
-    input.setValue('Estavan')
+  it('updates table filter on events depending on lazy modifier', () => {
+    const localWrapper = createCustomWrapper()
+    const input = localWrapper.find('input')
+    const firstUsername = () => localWrapper.vm.sortedItems[0].username
+    input.element.value = "Estavan"
+    input.trigger('input')
     expect(firstUsername()).toMatch('Estavan')
+    localWrapper.setProps({ tableFilter: { lazy: true } })
     input.element.value = "Chetan"
+    input.trigger('input')
+    expect(firstUsername()).toMatch('Estavan')
     input.trigger('change')
     expect(firstUsername()).toMatch('Chetan')
   })
@@ -128,10 +136,41 @@ describe(ComponentName, () => {
     })
     expect(customWrapper.vm.perPageItems).toBe(13)
   })
-  // it('Sets table filter data correctly', () => {
-  //   customWrapper.setProps({
-  //     tableFilter: { label: 'label'}
-  //   })
-  //   expect(customWrapper.vm.tableFilterData.label).toBe('label')
-  // })
+  it('Disable component sorting and filtering when using \'external\' keys', () => {
+    const localWrapper = createCustomWrapper()
+    localWrapper.setProps({
+      tableFilterValue: 'Yiorgos'
+    })
+    expect(localWrapper.vm.sortedItems.length).toBe(1)
+    localWrapper.setProps({
+      tableFilter: { external: true }
+    })
+    expect(localWrapper.vm.sortedItems.length).toBe(4)
+
+    localWrapper.setProps({
+      columnFilter: { external: true },
+    })
+    expect(localWrapper.vm.sortedItems.length).toBe(5)
+
+    expect(localWrapper.vm.sortedItems[0].username).toBe('Yiorgos Avraamu')
+    localWrapper.setProps({
+      sorter: { external: true }
+    })
+    expect(localWrapper.vm.sortedItems[0].username).toBe('Estavan Lykos')
+  })
+  it('Sorter reset mechanism is working properly', () => {
+    const localWrapper = createCustomWrapper()
+    const click = (clickCount = 1) => {
+      for (let i = 0; i < clickCount; i++) {
+        localWrapper.find('tr').findAll('th').at(2).trigger('click')
+      }
+    }
+    localWrapper.setProps({
+      sorter: { resetable : true }
+    })
+    click(3)
+    expect(localWrapper.vm.sorterState.column).toBe(undefined)
+    click(2)
+    expect(localWrapper.vm.sorterState.asc).toBe(false)
+  })
 })
diff --git a/src/components/table/tests/__snapshots__/CDataTable.spec.js.snap b/src/components/table/tests/__snapshots__/CDataTable.spec.js.snap
