Merge pull request #1477 from privy-open-source/feat/table-sortable-field

Feat/table sortable field

Author: adenvt

src/components/dropzone/Dropzone.vue

@@ -213,10 +213,10 @@ defineSlots<{
 
 <style lang="postcss">
 .dropzone {
-  @apply cursor-pointer block w-full;
+  @apply cursor-pointer block w-full relative;
 
   &__input {
-    @apply hidden;
+    @apply absolute w-[.1px] h-[.1px] opacity-0 overflow-hidden -z-1 bottom-0 right-0;
   }
 
   * {

src/components/table-static/TableStatic.spec.ts

@@ -1,7 +1,11 @@
 import Draggable from '../table/__mocks__/vuedraggable'
 import { vi } from 'vitest'
-import { fireEvent, render } from '@testing-library/vue'
-import { ref } from 'vue-demi'
+import {
+  render,
+  fireEvent,
+  queryByTestId,
+} from '@testing-library/vue'
+import { nextTick, ref } from 'vue-demi'
 import { defineTable } from '../table'
 import Table from './TableStatic.vue'
 
@@ -37,6 +41,54 @@ const items = ref([
   },
 ])
 
+const sortableFields = defineTable([
+  { key: 'id' },
+  { key: 'name' },
+  {
+    key     : 'gender',
+    sortable: false,
+  },
+  {
+    key     : 'age',
+    sortable: true,
+  },
+])
+
+function generateItems () {
+  return [
+    {
+      id    : 1,
+      name  : 'Dora',
+      gender: 'male',
+      age   : 27,
+    },
+    {
+      id    : 2,
+      name  : 'Emilly',
+      gender: 'male',
+      age   : 20,
+    },
+    {
+      id    : 3,
+      name  : 'Jane',
+      gender: 'female',
+      age   : 30,
+    },
+    {
+      id    : 4,
+      name  : 'Andi',
+      gender: 'male',
+      age   : 21,
+    },
+    {
+      id    : 5,
+      name  : 'Bella',
+      gender: 'female',
+      age   : 24,
+    },
+  ]
+}
+
 it('should render properly', () => {
   const screen = render({
     components: { Table },
@@ -305,3 +357,120 @@ it('should able to select all items (except disable one) in variant static', asy
 
   expect(selected.value).toHaveLength(0)
 })
+
+it('should X field header have sortable class if have `sortable` property with `true` value & `sortable` prop is provided', () => {
+  const items  = ref(generateItems())
+  const screen = render({
+    components: { Table },
+    template  : `
+      <Table
+        :fields="sortableFields"
+        :items="items"
+        sortable
+      />`,
+    setup () {
+      return {
+        sortableFields,
+        items,
+      }
+    },
+  })
+
+  const heads = screen.queryAllByTestId('table-static-header')
+
+  expect(heads.at(0)).toHaveClass('table-static__header--sortable')
+  expect(heads.at(2)).not.toHaveClass('table-static__header--sortable')
+})
+
+it('should able modify sort by header using v-model:sort-by', async () => {
+  const items  = ref(generateItems())
+  const sortBy = ref({})
+  const screen = render({
+    components: { Table },
+    template  : `
+      <Table
+        v-model:sort-by="sortBy"
+        :fields="sortableFields"
+        :items="items"
+        sortable
+      />`,
+    setup () {
+      return {
+        sortableFields,
+        items,
+        sortBy,
+      }
+    },
+  })
+
+  const heads = screen.queryAllByTestId('table-static-header')
+
+  expect(heads.at(0)).toHaveClass('table-static__header--sortable')
+  expect(heads.at(2)).not.toHaveClass('table-static__header--sortable')
+
+  await fireEvent.click(heads.at(0))
+
+  const icon = queryByTestId(heads[0], 'table-static-header-sort')
+
+  expect(icon).toHaveAttribute('active', 'asc')
+  expect(sortBy.value).toStrictEqual({ id: 'asc' })
+
+  await fireEvent.click(heads.at(0))
+
+  expect(icon).toHaveAttribute('active', 'desc')
+  expect(sortBy.value).toStrictEqual({ id: 'desc' })
+
+  await fireEvent.click(heads.at(0))
+
+  expect(icon).not.toHaveAttribute('active', 'desc')
+  expect(sortBy.value).toStrictEqual({ id: undefined })
+
+  sortBy.value = { name: 'desc' }
+  await nextTick()
+
+  const icon2 = queryByTestId(heads[1], 'table-static-header-sort')
+
+  expect(icon).not.toHaveAttribute('active', 'asc')
+  expect(icon2).toHaveAttribute('active', 'desc')
+})
+
+it('should have multiple value if sortable set to `multiple`', async () => {
+  const items  = ref(generateItems())
+  const sortBy = ref({})
+  const screen = render({
+    components: { Table },
+    template  : `
+      <Table
+        v-model:sort-by="sortBy"
+        :fields="sortableFields"
+        :items="items"
+        sortable="multiple"
+      />`,
+    setup () {
+      return {
+        sortableFields,
+        items,
+        sortBy,
+      }
+    },
+  })
+
+  const heads = screen.queryAllByTestId('table-static-header')
+
+  expect(heads.at(0)).toHaveClass('table-static__header--sortable')
+  expect(heads.at(2)).not.toHaveClass('table-static__header--sortable')
+
+  await fireEvent.click(heads.at(0))
+
+  const icon  = queryByTestId(heads[0], 'table-static-header-sort')
+  const icon2 = queryByTestId(heads[1], 'table-static-header-sort')
+
+  expect(icon).toHaveAttribute('active', 'asc')
+  expect(sortBy.value).toStrictEqual({ id: 'asc' })
+
+  await fireEvent.click(heads.at(1))
+
+  expect(icon).toHaveAttribute('active', 'asc')
+  expect(icon2).toHaveAttribute('active', 'asc')
+  expect(sortBy.value).toStrictEqual({ id: 'asc', name: 'asc' })
+})

src/components/table-static/TableStatic.vue

@@ -25,13 +25,20 @@
           class="table-static__header"
           data-testid="table-static-header"
           :style="field.width ? { width: withUnit(field.width) } : {}"
-          :class="field.thClass"
-          :data-header="field.key">
+          :class="[field.thClass, { 'table-static__header--sortable': isSortable(field) }]"
+          :data-header="field.key"
+          @click="setSortField(field)">
           <slot
             :name="`head(${field.key})`"
             :label="field.label"
-            :field="field">
-            {{ field.label }}
+            :field="field"
+            :sort="getSortField(field)">
+            <span class="table-static__header-label">
+              {{ field.label }}
+              <TableStaticSort
+                v-if="isSortable(field)"
+                :active="getSortField(field)" />
+            </span>
           </slot>
         </th>
       </tr>
@@ -113,6 +120,8 @@ import type {
   VNode,
 } from 'vue-demi'
 import {
+  ref,
+  watch,
   computed,
 } from 'vue-demi'
 import type {
@@ -130,6 +139,8 @@ import TableStaticRoot from './TableStaticRoot.vue'
 import { useVModel } from '../input'
 import IconDrag from '@privyid/persona-icon/vue/draggable/20.vue'
 import Draggable from 'vuedraggable'
+import type { SortValue } from '.'
+import TableStaticSort from './TableStaticSort.vue'
 
 const props = defineProps({
   apperance: {
@@ -184,12 +195,23 @@ const props = defineProps({
     type   : Boolean,
     default: true,
   },
+  sortable: {
+    type   : [Boolean, String] as PropType<boolean | 'single' | 'multiple'>,
+    default: false,
+  },
+  sortBy: {
+    type   : Object as PropType<Record<string, any>>,
+    default: () => ({}),
+  },
 })
 
-const model = useVModel(props)
-const emit  = defineEmits<{
+const model       = useVModel(props)
+const localSortBy = ref(props.sortBy)
+const emit        = defineEmits<{
   'update:modelValue': [T[]],
   'update:items': [T[]],
+  'update:sortBy': [Record<string, SortValue>],
+  'sort': [Record<string, SortValue>],
 }>()
 
 const rows = computed<T[]>({
@@ -249,15 +271,43 @@ const indeterminate = computed(() => {
     && model.value.length < selectableRows.value.length
 })
 
+watch(() => props.sortBy, (value) => {
+  localSortBy.value = value
+})
+
+function isSortable (field: TableField<T>) {
+  return props.sortable && field.sortable !== false
+}
+
+function getSortField (field: TableField<T>): SortValue {
+  return localSortBy.value[field.key as string]
+}
+
+function setSortField (field: TableField<T>) {
+  if (isSortable(field)) {
+    const oldValue: SortValue = getSortField(field)
+    const newValue: SortValue = oldValue === 'asc' ? 'desc' : (oldValue === 'desc' ? undefined : 'asc')
+
+    const value = props.sortable === 'multiple'
+      ? { ...localSortBy.value, [field.key]: newValue }
+      : { [field.key]: newValue }
+
+    localSortBy.value = value
+
+    emit('update:sortBy', value)
+    emit('sort', value)
+  }
+}
+
 defineSlots<{
   'empty'(): VNode[],
   'row'(props: { index: number, item: T }): VNode[],
   [K: `cell(${string})`]:(props: { index: number }) => VNode[],
-  [K: `head(${string})`]:(props: { field: TableField<T>, label: string }) => VNode[],
+  [K: `head(${string})`]:(props: { field: TableField<T>, label: string, sort?: 'asc' | 'desc' }) => VNode[],
 } & {
   [K in KeyType<T> as `cell(${K})`]:(props: { item: T, index: number }) => VNode[]
 } & {
-  [K in KeyType<T> as `head(${K})`]:(props: { field: TableField<T>, label: string }) => VNode[]
+  [K in KeyType<T> as `head(${K})`]:(props: { field: TableField<T>, label: string, sort?: 'asc' | 'desc' }) => VNode[]
 }>()
 </script>
 
@@ -303,10 +353,42 @@ defineSlots<{
     .table-static__header {
       @apply px-3 text-xs border-x-0;
 
+      &--sortable {
+        @apply cursor-pointer select-none;
+      }
+
       &.table-static__drag,
       &.table-static__checkbox {
         @apply w-[1%];
       }
+
+      &-label {
+        @apply inline-flex items-center;
+      }
+
+      &-sort {
+        @apply flex flex-col flex-shrink-0 items-center justify-center ml-1;
+        @apply text-muted;
+        @apply dark:text-dark-muted;
+
+        &[active="asc"] {
+          > .table-static__header-sort-down {
+            @apply text-default;
+            @apply dark:text-dark-default;
+          }
+        }
+
+        &[active="desc"] {
+          > .table-static__header-sort-up {
+            @apply text-default;
+            @apply dark:text-dark-default;
+          }
+        }
+      }
+
+      &-sort-down {
+        @apply -mt-2;
+      }
     }
 
     + .table-static__body {

src/components/table-static/TableStaticSort.vue

@@ -0,0 +1,23 @@
+<template>
+  <div
+    :active="active"
+    class="table-static__header-sort"
+    data-testid="table-static-header-sort">
+    <IconUp
+      class="table-static__header-sort-up" />
+    <IconDown
+      class="table-static__header-sort-down" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import IconUp from '@privyid/persona-icon/vue/caret-up/16.vue'
+import IconDown from '@privyid/persona-icon/vue/caret-down/16.vue'
+
+defineProps({
+  active: {
+    type   : String,
+    default: undefined,
+  },
+})
+</script>