Merge pull request #26 from protonemedia/table-header-cell-component

Author: pascalbaljet

__tests__/InteractsWithQueryBuilder.test.js

@@ -89,6 +89,52 @@ describe('InteractsWithQueryBuilder.vue', () => {
         );
     });
 
+    it('it provides helper method for table header cells', () => {
+        const queryBuilderProps = {
+            sort: "name",
+            columns: {
+                name: { key: "name", enabled: true },
+                email: { key: "email", enabled: false },
+                country: { key: "country", enabled: false },
+            },
+        };
+
+        const component = mount(InteractsWithQueryBuilder, {
+            propsData: {
+                queryBuilderProps,
+            },
+
+            render() { }
+        });
+
+        expect(component.vm.sortableHeader('name').sortable).toBeTruthy();
+        expect(component.vm.staticHeader('name').sortable).toBeFalsy();
+
+        expect(component.vm.sortableHeader('name').sort).toEqual('asc');
+        expect(component.vm.sortableHeader('email').sort).toBeFalsy();
+        expect(component.vm.sortableHeader('country').sort).toBeFalsy();
+    });
+
+    it('it provides helper method for table header cells to switch to sort order', () => {
+        const queryBuilderProps = {
+            sort: "name",
+            columns: {
+                name: { key: "name", enabled: true },
+            },
+        };
+
+        const component = mount(InteractsWithQueryBuilder, {
+            propsData: {
+                queryBuilderProps,
+            },
+
+            render() { }
+        });
+
+        component.vm.sortableHeader('name').onSort('name');
+        expect(component.vm.sortableHeader('name').sort).toEqual('desc');
+    });
+
     it('it toggles a column without changing the page', () => {
         const queryBuilderProps = {
             columns: {

js/Components/HeaderCell.vue

@@ -0,0 +1,16 @@
+<script>
+export default {
+  props: {
+    cell: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  methods: {
+    onClick() {
+      this.cell.onSort(this.cell.key);
+    },
+  },
+};
+</script>

js/InteractsWithQueryBuilder.vue

@@ -57,6 +57,40 @@ export default {
       });
     },
 
+    staticHeader(columnKey) {
+      return this._headerCellData(columnKey, false);
+    },
+
+    sortableHeader(columnKey) {
+      return this._headerCellData(columnKey, true);
+    },
+
+    _headerCellData(columnKey, sortable) {
+      let sort = false;
+
+      if (this.queryBuilderData.sort === columnKey) {
+        sort = "asc";
+      } else if (this.queryBuilderData.sort === `-${columnKey}`) {
+        sort = "desc";
+      }
+
+      let show = true;
+
+      if (this.queryBuilderProps.columns) {
+        const columnData = this.queryBuilderProps.columns[columnKey];
+
+        show = columnData ? columnData.enabled : true;
+      }
+
+      return {
+        key: columnKey,
+        sort,
+        show,
+        sortable,
+        onSort: this.sortBy,
+      };
+    },
+
     sortBy(column) {
       this.queryBuilderData.page = 1;
       this.queryBuilderData.sort =

js/Tailwind2/HeaderCell.vue

@@ -0,0 +1,42 @@
+<template>
+  <th v-show="cell.show" :class="{'cursor-pointer': cell.sortable }" @click.prevent="onClick">
+    <span class="flex flex-row items-center">
+      <slot />
+
+      <svg
+        aria-hidden="true"
+        class="w-3 h-3 ml-2"
+        :class="{ 'text-gray-400': !cell.sort, 'text-green-500': cell.sort }"
+        v-if="cell.sortable"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 320 512"
+      >
+        <path
+          v-if="!cell.sort"
+          fill="currentColor"
+          d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z"
+        />
+
+        <path
+          v-if="cell.sort === 'asc'"
+          fill="currentColor"
+          d="M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z"
+        />
+
+        <path
+          v-if="cell.sort === 'desc'"
+          fill="currentColor"
+          d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z"
+        />
+      </svg>
+    </span>
+  </th>
+</template>
+
+<script>
+import HeaderCell from "./../Components/HeaderCell.vue";
+
+export default {
+  mixins: [HeaderCell],
+};
+</script>

js/index.js

@@ -2,6 +2,7 @@ import iwqb from './InteractsWithQueryBuilder.vue';
 export const InteractsWithQueryBuilder = iwqb;
 
 import ButtonWithDropdownComponent from './Components/ButtonWithDropdown.vue';
+import HeaderCellComponent from './Components/HeaderCell.vue';
 import OnClickOutsideComponent from './Components/OnClickOutside.vue';
 import PaginationComponent from './Components/Pagination.vue';
 import TableAddSearchRowComponent from './Components/TableAddSearchRow.vue';
@@ -13,6 +14,7 @@ import TableSearchRowsComponent from './Components/TableSearchRows.vue';
 
 export const Components = {
     ButtonWithDropdown: ButtonWithDropdownComponent,
+    HeaderCell: HeaderCellComponent,
     OnClickOutside: OnClickOutsideComponent,
     Pagination: PaginationComponent,
     Table: TableComponent,
@@ -24,6 +26,7 @@ export const Components = {
 };
 
 import Tailwind2ButtonWithDropdown from './Tailwind2/ButtonWithDropdown.vue';
+import Tailwind2HeaderCell from './Tailwind2/HeaderCell.vue';
 import Tailwind2Pagination from './Tailwind2/Pagination.vue';
 import Tailwind2Table from './Tailwind2/Table.vue';
 import Tailwind2TableAddSearchRow from './Tailwind2/TableAddSearchRow.vue';
@@ -35,6 +38,7 @@ import Tailwind2TableWrapper from './Tailwind2/TableWrapper.vue';
 
 export const Tailwind2 = {
     ButtonWithDropdown: Tailwind2ButtonWithDropdown,
+    HeaderCell: Tailwind2HeaderCell,
     Pagination: Tailwind2Pagination,
     Table: Tailwind2Table,
     TableAddSearchRow: Tailwind2TableAddSearchRow,