feat(QTable): add sortOrder & active header (#318)

altai-ui · Jul 4, 2022 · aeb3289 · aeb3289
1 parent ff8b40b
commit aeb3289
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 25 deletions.
diff --git a/src/qComponents/QTable/src/QTable.vue b/src/qComponents/QTable/src/QTable.vue
@@ -107,6 +107,7 @@ export default defineComponent({
      * Each column MAY contain:
      *  `isHidden`.
      *  `sortable`.
+     *  `sortOrder`. (MUST be an array of keywords - 'ascending', 'descending', null. Works with `sortable: true`)
      *  `draggable`.
      *  `slots`.
      *  `align` (left/right) - content's align.

diff --git a/src/qComponents/QTable/src/QTableTHead/QTableTHeadCell/QTableTHeadCell.vue b/src/qComponents/QTable/src/QTableTHead/QTableTHeadCell/QTableTHeadCell.vue
@@ -4,16 +4,18 @@ import type { PropType, StyleValue } from 'vue';
 
 import type { Nullable, Optional, ClassValue } from '#/helpers';
 
+import { DEFAULT_SORTING_ORDER } from '../../config';
 import { useSticky } from '../../hooks/sticky';
 import type { StickyConfig } from '../../hooks/sticky';
 import type { ExtendedColumn } from '../../QTableContainer/types';
 import type { QTableTProvider } from '../../QTableT/types';
-import type { QTableProvider } from '../../types';
+import type { QTableProvider, SortDirection } from '../../types';
 
 import type {
   QTableTHeadCellProps,
   QTableTHeadCellPropSortBy,
-  QTableTHeadCellInstance
+  QTableTHeadCellInstance,
+  QTableTHeadCellContainerAttrs
 } from './types';
 
 export default defineComponent({
@@ -95,7 +97,8 @@ export default defineComponent({
 
     const contentClasses = computed<ClassValue>(() => ({
       'q-table-t-head-cell__content': true,
-      'q-table-t-head-cell__content_ellipsis': !currentSlot.value
+      'q-table-t-head-cell__content_ellipsis': !currentSlot.value,
+      'q-table-t-head-cell__content_sortable': isSortable.value
     }));
 
     const content = computed<Nullable<VNode[] | string | number>>(() => {
@@ -120,27 +123,20 @@ export default defineComponent({
       };
     });
 
+    let sortCounter = 0;
     const handleSortArrowClick = (): void => {
-      const oldDirection = props.sortBy?.direction ?? null;
+      let newDirection: SortDirection = null;
+      const sortOrder = props.column.sortOrder ?? DEFAULT_SORTING_ORDER;
 
-      let direction: Nullable<'ascending' | 'descending'> = null;
-
-      switch (oldDirection) {
-        case null:
-          direction = 'descending';
-          break;
-
-        case 'descending':
-          direction = 'ascending';
-          break;
-
-        default:
-          break;
+      if (Array.isArray(sortOrder)) {
+        newDirection = sortOrder[sortCounter];
+        sortCounter =
+          sortOrder.length - 1 === sortCounter ? 0 : (sortCounter += 1);
       }
 
       qTable.updateSortBy({
         key: props.column.key,
-        direction
+        direction: newDirection
       });
     };
 
@@ -245,6 +241,12 @@ export default defineComponent({
       ];
     });
 
+    const cellContainerAttrs: QTableTHeadCellContainerAttrs = {
+      class: contentClasses.value
+    };
+
+    if (isSortable.value) cellContainerAttrs.onClick = handleSortArrowClick;
+
     return (): VNode =>
       h(
         'th',
@@ -253,7 +255,7 @@ export default defineComponent({
           dummyEl.value,
           dropZoneEls.value,
           h('div', { class: 'q-table-t-head-cell__container' }, [
-            h('div', { class: contentClasses.value }, [content.value]),
+            h('div', cellContainerAttrs, [content.value]),
             sortArrowEl.value,
             dragTriggerEl.value
           ])

diff --git a/src/qComponents/QTable/src/QTableTHead/QTableTHeadCell/q-table-t-head-cell.scss b/src/qComponents/QTable/src/QTableTHead/QTableTHeadCell/q-table-t-head-cell.scss
@@ -107,6 +107,11 @@
       -webkit-box-orient: vertical;
     }
 
+    &_sortable {
+      cursor: pointer;
+      user-select: none;
+    }
+
     &_checkbox {
       width: 100%;
     }

diff --git a/src/qComponents/QTable/src/QTableTHead/QTableTHeadCell/types.ts b/src/qComponents/QTable/src/QTableTHead/QTableTHeadCell/types.ts
@@ -1,12 +1,13 @@
 import type { VNode } from 'vue';
 
-import type { Nullable } from '#/helpers';
+import type { ClassValue, Nullable } from '#/helpers';
 
 import type { ExtendedColumn } from '../../QTableContainer/types';
+import type { SortDirection } from '../../types';
 
 export interface QTableTHeadCellPropSortBy {
   key: Nullable<string>;
-  direction: Nullable<'ascending' | 'descending'>;
+  direction: SortDirection;
 }
 
 export interface QTableTHeadCellProps {
@@ -17,3 +18,8 @@ export interface QTableTHeadCellProps {
 }
 
 export type QTableTHeadCellInstance = () => VNode;
+
+export interface QTableTHeadCellContainerAttrs {
+  class: ClassValue;
+  onClick?: () => void;
+}
diff --git a/src/qComponents/QTable/src/config.ts b/src/qComponents/QTable/src/config.ts
@@ -1,3 +1,10 @@
+import type { SortDirection } from './types';
+
 export const SELECTABLE_COLUMN_STICKY_INDEX = -1;
 export const TOTAL_CHECKED_INDEX = -1;
 export const CHECKBOX_COL_WIDTH = 56;
+export const DEFAULT_SORTING_ORDER: SortDirection[] = [
+  'ascending',
+  'descending',
+  null
+];
diff --git a/src/qComponents/QTable/src/types.ts b/src/qComponents/QTable/src/types.ts
@@ -14,6 +14,7 @@ export interface Column {
   value: Nullable<string | number>;
   isHidden?: boolean;
   sortable?: boolean;
+  sortOrder?: SortDirection[];
   draggable?: boolean;
   align?: 'left' | 'right';
   slots?: Record<string, string>;
@@ -39,9 +40,11 @@ export interface GroupOfColumns {
   draggable?: boolean;
 }
 
+export type SortDirection = Nullable<'ascending' | 'descending'>;
+
 export interface SortBy {
   key: Nullable<string>;
-  direction: Nullable<'ascending' | 'descending'>;
+  direction: SortDirection;
 }
 
 export type Row = Record<string, unknown>;

diff --git a/stories/components/QTable/args.ts b/stories/components/QTable/args.ts
@@ -1,6 +1,9 @@
-import type { QTablePropSortBy } from '@/qComponents/QTable';
+import type {
+  QTablePropGroupsOfColumns,
+  QTablePropSortBy
+} from '@/qComponents/QTable';
 
-const groupsOfColumns = [
+const groupsOfColumns: QTablePropGroupsOfColumns = [
   {
     key: 'one',
     columns: [
@@ -16,7 +19,8 @@ const groupsOfColumns = [
       {
         key: 'col3',
         value: 'Column 3',
-        sortable: true
+        sortable: true,
+        sortOrder: ['ascending', 'descending']
       },
       {
         key: 'col4',