@citizenplane/pimp 8.9.5 → 8.10.0

package/src/components/lists-and-table/CpTable.vue

@@ -0,0 +1,718 @@
+<template>
+  <div class="cpTable" :class="mainClasses">
+    <div
+      ref="cpTableContainer"
+      role="region"
+      :aria-labelledby="uniqueId"
+      tabindex="0"
+      class="cpTable__container"
+      :class="containerClasses"
+    >
+      <table class="cpTable__table">
+        <caption v-if="caption" :id="uniqueId" class="cpTable__caption">
+          {{
+            caption
+          }}
+        </caption>
+        <thead class="cpTable__header">
+          <tr class="cpTable__row cpTable__row--header">
+            <th
+              v-for="column in normalizedColumns"
+              :key="column.id"
+              class="cpTable__column"
+              :style="getColumnStyle(column)"
+            >
+              <slot name="column" :column="column">
+                {{ column.name }}
+              </slot>
+            </th>
+            <th v-show="enableRowOptions" class="cpTable__column cpTable__column--isOptions"><span /></th>
+          </tr>
+        </thead>
+        <tbody class="cpTable__body">
+          <tr
+            v-for="(rowData, rowIndex) in visibleRows"
+            :key="rowIndex"
+            class="cpTable__row cpTable__row--body"
+            :class="getRowClasses(rowData, rowIndex)"
+            :tabindex="getTabindex(rowData)"
+            @click="handleRowClick(rowData, rowIndex)"
+            @click.right="handleRowRightClick({ rowData, rowIndex }, $event)"
+            @keydown.enter="handleRowClick(rowData, rowIndex)"
+          >
+            <slot name="row" :row="rowData">
+              <td
+                v-for="(cellValue, cellKey, cellIndex) in rowData"
+                :key="`${cellKey}_${rowIndex}`"
+                class="cpTable__cell"
+                :class="getCellClasses(cellKey)"
+                :style="getCellStyle(cellKey, cellIndex)"
+                :colspan="getColspan(cellKey)"
+              >
+                <slot :name="cellKey" :cell="cellValue">
+                  <span v-if="isFullWidthRow(rowData)">{{ cellValue }}</span>
+                  <template v-else>{{ cellValue }}</template>
+                </slot>
+              </td>
+              <td v-show="areRowOptionsEnabled(rowData)" class="cpTable__cell cpTable__cell--isOptions">
+                <slot name="row-quick-actions" :row="rowData">
+                  <button type="button" @click.stop="handleRowRightClick({ rowData, rowIndex }, $event)">
+                    <cp-icon type="more-vertical" />
+                  </button>
+                </slot>
+              </td>
+            </slot>
+          </tr>
+        </tbody>
+      </table>
+      <cp-table-empty-state v-if="hasNoResult" :placeholder="noResultPlaceholder" class="cpTable__emptyState" />
+    </div>
+    <div v-if="hasPagination" class="cpTable__footer">
+      <div class="footer__details">
+        <p class="footer__results">
+          <slot v-if="!isLoading" name="footer-details">
+            <template v-if="numberOfResults">
+              <strong>
+                {{ paginationLabel }}
+              </strong>
+              <span class="footer__resultsCount"> on {{ paginationResultsDetails }}</span>
+            </template>
+            <template v-else> No results </template>
+          </slot>
+          <template v-else> Loading <cp-loader :color="LoaderColor" class="cpTable__loader--isSmall" /> </template>
+        </p>
+      </div>
+      <div class="footer__pagination">
+        <button :disabled="!isPreviousEnabled" type="button" @click="handleNavigationClick(false)">Prev.</button>
+        <button :disabled="!isNextEnabled" type="button" @click="handleNavigationClick()">Next</button>
+      </div>
+    </div>
+    <div class="cpTable__overlay" />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+import { camelize, decamelize } from '@/helpers/string'
+import { randomString } from '@/helpers'
+
+import CpTableEmptyState from '@/components/lists-and-table/CpTableEmptyState.vue'
+
+import { CpTableConfig } from '@/constants'
+
+const LoaderColor = '#5341F9'
+
+const props = defineProps({
+  caption: {
+    type: String,
+    default: '',
+    required: false,
+  },
+  columns: {
+    type: Array,
+    default: () => [],
+    required: false,
+  },
+  data: {
+    type: Array,
+    required: true,
+  },
+  pagination: {
+    type: [Boolean, Object],
+    default: false,
+    required: false,
+    validator: (value) => {
+      const isLimitValid = value.limit ? value.limit <= CpTableConfig.VISIBLE_ROWS_MAX : true
+      const isFooterDetailsFormatValid = value.format
+        ? Object.values(CpTableConfig.PAGINATION_FORMATS).includes(value.format)
+        : true
+
+      return isLimitValid && isFooterDetailsFormatValid
+    },
+  },
+  areRowsClickable: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+  emptyCellPlaceholder: {
+    type: String,
+    default: 'n/a',
+    required: false,
+  },
+  noResultPlaceholder: {
+    type: String,
+    default: 'No results found',
+    required: false,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+  enableRowOptions: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+})
+
+const emit = defineEmits(['onRowClick', 'onRowRightClick', 'onNextClick', 'onPreviousClick'])
+
+const uniqueId = ref(randomString())
+const pageNumber = ref(0)
+const cpTableContainer = ref(null)
+
+const containerDOMElement = computed(() => cpTableContainer.value)
+
+const mainClasses = computed(() => ({ 'cpTable--isLoading': props.isLoading }))
+const containerClasses = computed(() => ({ 'cpTable__container--hasPagination': hasPagination.value }))
+
+const normalizedColumns = computed(() => {
+  if (!props.columns) return []
+  const columns = props.columns.length ? [...props.columns] : [...columnsFromRows.value]
+
+  return columns.map((column) => {
+    if (typeof column === 'string') {
+      return {
+        id: camelize(column),
+        name: decamelize(column),
+      }
+    }
+
+    return {
+      id: column.id || camelize(column.name),
+      ...column,
+    }
+  })
+})
+
+const numberOfColumns = computed(() => normalizedColumns.value.length)
+
+const hasGroupBy = computed(() => {
+  if (!props.data.length) return false
+  return props.data.some((item) => CpTableConfig.RESERVED_KEYS.GROUP_BY in item)
+})
+
+const columnsFromRows = computed(() => {
+  if (!props.data.length) return []
+  const firstRow = hasGroupBy.value ? props.data[0].rows[0] : props.data[0]
+  return Object.keys(firstRow)
+})
+
+const numberOfResults = computed(() => {
+  return isServerSidePagination.value ? props.pagination.server.total : flattenedRows.value.length
+})
+
+const hasNoResult = computed(() => numberOfResults.value === 0)
+const rowsPerPageLimit = computed(() => props.pagination.limit || CpTableConfig.VISIBLE_ROWS_MAX)
+
+const flattenedRows = computed(() => {
+  if (!props.data) return []
+  if (!hasGroupBy.value) return props.data
+
+  // Transform groupBy key into a row and add it in between others
+  return props.data.reduce((flattenedRows, groupByItem) => {
+    const fullWidthRow = { [CpTableConfig.RESERVED_KEYS.FULL_WIDTH]: groupByItem.groupBy }
+    return [...flattenedRows, fullWidthRow, ...groupByItem.rows]
+  }, [])
+})
+
+const rawVisibleRows = computed(() => {
+  const dataCopy = [...flattenedRows.value]
+  if (isServerSidePagination.value) return dataCopy
+  return hasPagination.value ? dataCopy.splice(pagesStartIndex.value, rowsPerPageLimit.value) : dataCopy
+})
+
+const visibleRows = computed(() =>
+  rawVisibleRows.value.map((rawRow) => {
+    const normalizedRow = normalizeRowData({ rowPayload: rawRow })
+    return mapCellToColumn({ rowPayload: normalizedRow })
+  }),
+)
+
+const paginationState = computed(() => {
+  return typeof props.pagination === 'boolean' ? props.pagination : props.pagination.enabled
+})
+
+const hasPagination = computed(() => paginationState.value || numberOfResults.value > CpTableConfig.VISIBLE_ROWS_MAX)
+const paginationFormat = computed(() => props.pagination?.format || CpTableConfig.PAGINATION_FORMATS.PAGES)
+const hasRemainingPages = computed(() => numberOfPages.value > activePage.value)
+const isNextEnabled = computed(() => hasRemainingPages.value && !props.isLoading)
+
+const hasPreviousPages = computed(() => {
+  return isServerSidePagination.value ? serverActivePage.value > 0 : pagesStartIndex.value - rowsPerPageLimit.value >= 0
+})
+
+const isPreviousEnabled = computed(() => hasPreviousPages.value && !props.isLoading)
+const pagesStartIndex = computed(() => pageNumber.value * rowsPerPageLimit.value)
+const pagesEndIndex = computed(() => rowsPerPageLimit.value * (1 + pageNumber.value))
+const numberOfPages = computed(() => Math.ceil(numberOfResults.value / rowsPerPageLimit.value))
+const activePage = computed(() => {
+  return isServerSidePagination.value ? serverActivePage.value + 1 : pageNumber.value + 1
+})
+
+const isServerSidePagination = computed(() => {
+  if (typeof props.pagination === 'boolean') return false
+  return 'server' in props.pagination
+})
+
+const serverActivePage = computed(() => props.pagination.server.activePage)
+const serverPagesStartIndex = computed(() => serverActivePage.value * rowsPerPageLimit.value + 1)
+const serverPagesEndIndex = computed(() => rowsPerPageLimit.value * (1 + serverActivePage.value))
+
+const pageFirstResultIndex = computed(() => {
+  return isServerSidePagination.value ? serverPagesStartIndex.value : pagesStartIndex.value + 1
+})
+
+const pageLastResultIndex = computed(() => {
+  const endIndex = isServerSidePagination.value ? serverPagesEndIndex.value : pagesEndIndex.value
+  return hasRemainingPages.value ? endIndex : numberOfResults.value
+})
+
+const paginationLabel = computed(() => {
+  if (paginationFormat.value === CpTableConfig.PAGINATION_FORMATS.PAGES) {
+    const pluralizedCount = numberOfPages.value > 1 ? 'pages' : 'page'
+    return `${activePage.value}/${numberOfPages.value} ${pluralizedCount}`
+  }
+  return `${pageFirstResultIndex.value} – ${pageLastResultIndex.value}`
+})
+
+const paginationResultsDetails = computed(() => {
+  const formattedNumberOfResults = new Intl.NumberFormat('en-US').format(numberOfResults.value)
+  const pluralizedCount = numberOfResults.value > 1 ? 'results' : 'result'
+  return `${formattedNumberOfResults} ${pluralizedCount}`
+})
+
+const getRowPayload = (rowIndex) => rawVisibleRows.value[rowIndex]
+
+const handleRowClick = (rowData, rowIndex) => {
+  if (isFullWidthRow(rowData)) return
+
+  const data = getRowPayload(rowIndex)
+  emit('onRowClick', data)
+}
+
+const handleRowRightClick = ({ rowData, rowIndex }, event) => {
+  if (isFullWidthRow(rowData)) return
+
+  const data = getRowPayload(rowIndex)
+  emit('onRowRightClick', { data, event })
+}
+
+const handleNavigationClick = (isNext = true) => {
+  resetScrollPosition()
+
+  if (isNext) {
+    hasRemainingPages.value && augmentOffset()
+    emit('onNextClick')
+    return
+  }
+
+  hasPreviousPages.value && decreaseOffset()
+  emit('onPreviousClick')
+}
+
+const normalizeRowData = ({ columns = normalizedColumns.value, rowPayload }) => {
+  if (!Array.isArray(rowPayload)) {
+    return { ...rowPayload }
+  }
+
+  // from ['cell 1', 'cell 2', 'cell 3']
+  // to { column1: 'cell 1', column2: 'cell 2', column3: 'cell 3' }
+  return rowPayload.reduce((row, cell, cellIndex) => {
+    const normalizedCell = {
+      [columns[cellIndex]?.id]: cell,
+    }
+    return { ...row, ...normalizedCell }
+  }, {})
+}
+
+const mapCellToColumn = ({ columns = normalizedColumns.value, rowPayload }) => {
+  if (isFullWidthRow(rowPayload)) return rowPayload
+  // Bind column id with each row key
+  // and replace row missing keys with the emptyCellPlaceholder value
+  return columns.reduce((finalRow, currentColumn) => {
+    const correspondingColumn = currentColumn?.id || currentColumn
+    const correspondingValue = rowPayload[correspondingColumn] || props.emptyCellPlaceholder
+    const cellValue = { [correspondingColumn]: correspondingValue }
+
+    return { ...finalRow, ...cellValue }
+  }, {})
+}
+
+const augmentOffset = () => {
+  if (isNextEnabled.value) pageNumber.value++
+}
+
+const decreaseOffset = () => {
+  if (isPreviousEnabled.value) pageNumber.value--
+}
+
+const resetScrollPosition = () => (containerDOMElement.value.scrollTop = 0)
+
+const getColumnStyle = (columnPayload) => {
+  const formattedWidth = columnPayload?.width && `${columnPayload.width}px`
+
+  return {
+    width: formattedWidth,
+    textAlign: columnPayload.textAlign,
+  }
+}
+
+const getCellStyle = (cellKey, columnIndex) => {
+  if (cellKey === CpTableConfig.RESERVED_KEYS.FULL_WIDTH) return null
+  return {
+    textAlign: normalizedColumns.value[columnIndex]?.textAlign,
+  }
+}
+
+const getRowClasses = (rowData, rowIndex) => {
+  return {
+    'cpTable__row--isFullWidth': isFullWidthRow(rowData),
+    'cpTable__row--isClickable': !isFullWidthRow(rowData) && props.areRowsClickable,
+    'cpTable__row--isSelected': isRowSelected(rowIndex),
+  }
+}
+
+const getCellClasses = (cellKey) => {
+  return { 'cpTable__cell--isFullWidth': cellKey === CpTableConfig.RESERVED_KEYS.FULL_WIDTH }
+}
+
+const getColspan = (cellKey) => {
+  const numberOfColumnsValue = props.enableRowOptions ? numberOfColumns.value + 1 : numberOfColumns.value
+  return cellKey === CpTableConfig.RESERVED_KEYS.FULL_WIDTH ? numberOfColumnsValue : null
+}
+
+const getTabindex = (rowData) => (isFullWidthRow(rowData) ? -1 : 0)
+const isFullWidthRow = (rowData) => CpTableConfig.RESERVED_KEYS.FULL_WIDTH in rowData
+const isRowSelected = (rowIndex) => rawVisibleRows.value[rowIndex][CpTableConfig.RESERVED_KEYS.IS_SELECTED]
+const areRowOptionsEnabled = (rowData) => props.enableRowOptions && !isFullWidthRow(rowData)
+</script>
+
+<style lang="scss">
+.cpTable {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  &__container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    &--hasPagination {
+      border-bottom: fn.px-to-rem(1) solid colors.$border-color;
+    }
+  }
+
+  /* Standard Tables */
+  &__container[role='region'][aria-labelledby][tabindex] {
+    overflow: auto;
+  }
+
+  &__container[role='region'][aria-labelledby][tabindex]:focus {
+    border-radius: fn.px-to-rem(10);
+    box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$blue, $lightness: 70%);
+  }
+
+  &__container[role='region'][aria-labelledby][tabindex] &__table {
+    margin: 0;
+    border: none;
+  }
+
+  /* Scrolling Visual Cue */
+  &__container[role='region'][aria-labelledby][tabindex] {
+    background:
+      linear-gradient(to right, colors.$neutral-light 30%, rgba(255, 255, 255, 0)),
+      linear-gradient(to right, rgba(colors.$neutral-light, 0), colors.$neutral-light 70%) 0 100%,
+      radial-gradient(farthest-side at 0% 50%, rgba(colors.$neutral-dark, 0.2), rgba(colors.$neutral-dark, 0)),
+      radial-gradient(farthest-side at 100% 50%, rgba(colors.$neutral-dark, 0.2), rgba(colors.$neutral-dark, 0)) 0 100%;
+    background-repeat: no-repeat;
+    background-color: colors.$neutral-light;
+    background-size:
+      40px 100%,
+      40px 100%,
+      14px 100%,
+      14px 100%;
+    background-position:
+      0 0,
+      100%,
+      0 0,
+      100%;
+    background-attachment: local, local, scroll, scroll;
+  }
+
+  &__caption {
+    position: sticky;
+    left: 0;
+    margin-bottom: sp.$space-lg;
+    text-align: left;
+    font-size: fn.px-to-em(18);
+
+    &:first-letter {
+      text-transform: capitalize;
+    }
+  }
+
+  &__table {
+    border-collapse: collapse;
+    width: 100%;
+  }
+
+  &__row {
+    &--body:not(:last-of-type) {
+      border-bottom: fn.px-to-rem(1) solid colors.$border-color;
+    }
+
+    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):hover,
+    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus,
+    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus-within {
+      background-color: rgba(colors.$neutral-dark, 0.05);
+      transition: background-color 0.1s ease-in-out;
+    }
+
+    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus,
+    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus-within {
+      color: colors.$primary-color;
+    }
+
+    &--isFullWidth td {
+      padding: sp.$space;
+      background-color: rgba(colors.$neutral-dark, 0.03);
+    }
+
+    &--isClickable {
+      cursor: pointer;
+    }
+
+    &--isSelected {
+      background-color: rgba(colors.$primary-color, 0.1);
+      color: colors.$primary-color;
+    }
+
+    &--body td {
+      font-size: fn.px-to-em(14);
+    }
+  }
+
+  &__column {
+    position: sticky;
+    top: 0;
+    z-index: 3;
+    background-color: colors.$neutral-light;
+    padding: sp.$space sp.$space-md;
+    text-align: left;
+    white-space: nowrap;
+    font-size: fn.px-to-em(12);
+    font-weight: normal;
+    color: colors.$neutral-dark-1;
+
+    &:first-letter {
+      text-transform: capitalize;
+    }
+
+    /* Workaround for sticky header border-bottom */
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: fn.px-to-rem(1);
+      background-color: colors.$border-color;
+    }
+  }
+
+  &__body {
+    vertical-align: middle;
+  }
+
+  &__row--body,
+  &__cell {
+    vertical-align: inherit;
+  }
+
+  &__cell {
+    &:not(#{&}--isFullWidth):not(#{&}--isOptions) {
+      padding: sp.$space-lg sp.$space-md;
+      white-space: nowrap;
+    }
+
+    &--isFullWidth span,
+    &--isOptions {
+      position: sticky;
+    }
+
+    &--isFullWidth span {
+      left: 50%;
+      transform: translateX(-50%);
+      display: inline-block;
+    }
+
+    &--isOptions {
+      right: 0;
+      padding: 0 sp.$space-md;
+    }
+
+    &--isOptions button {
+      border: fn.px-to-rem(1) solid colors.$border-color;
+      border-radius: fn.px-to-rem(8);
+      background-color: colors.$neutral-light;
+      display: inline-flex;
+      padding: sp.$space-sm;
+      color: colors.$neutral-dark-1;
+
+      &:hover {
+        background-color: color.scale(colors.$neutral-dark, $lightness: 98%);
+        color: colors.$neutral-dark;
+      }
+
+      &:focus {
+        outline: none !important;
+        box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$secondary-color, $lightness: 80%);
+      }
+    }
+
+    &--isOptions i {
+      width: fn.px-to-rem(16);
+      height: fn.px-to-rem(16);
+    }
+  }
+
+  // On desktop devices, display options only on row focus or hover
+  @media (hover: hover) and (pointer: fine) {
+    &__cell--isOptions {
+      opacity: 0;
+      transition: opacity 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.175);
+    }
+
+    &__row:focus &__cell--isOptions,
+    &__row:focus-within &__cell--isOptions,
+    &__row:hover &__cell--isOptions {
+      opacity: 1;
+    }
+  }
+
+  &__emptyState {
+    flex: 1;
+  }
+
+  &--isLoading &__overlay {
+    opacity: 0.5;
+    pointer-events: all;
+  }
+
+  &__overlay {
+    position: absolute;
+    overflow: hidden;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    border-radius: fn.px-to-rem(10);
+    background-color: colors.$neutral-light;
+    z-index: 4;
+    opacity: 0;
+    transition: 0.15s opacity ease-in-out;
+    cursor: wait;
+    pointer-events: none;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      transform: translateX(-100%);
+      background-image: linear-gradient(
+        90deg,
+        rgba(colors.$neutral-dark-3, 0) 0,
+        rgba(colors.$neutral-dark-3, 0.2) 20%,
+        rgba(colors.$neutral-dark-3, 0.5) 60%,
+        rgba(colors.$neutral-dark-3, 0)
+      );
+      animation: shimmer 2s infinite;
+    }
+
+    @keyframes shimmer {
+      100% {
+        transform: translateX(100%);
+      }
+    }
+  }
+
+  &__loader {
+    width: fn.px-to-rem(32);
+    height: fn.px-to-rem(32);
+
+    &--isSmall {
+      display: inline-block;
+      vertical-align: middle;
+      width: fn.px-to-rem(24);
+      height: fn.px-to-rem(24);
+    }
+  }
+
+  &__footer {
+    padding: sp.$space-lg sp.$space-md 0;
+    display: flex;
+    align-items: center;
+    font-size: fn.px-to-em(14);
+  }
+
+  .footer {
+    &__details,
+    &__pagination {
+      flex: 1;
+    }
+
+    &__results {
+      font-variant-numeric: tabular-nums;
+      color: colors.$neutral-dark-1;
+    }
+
+    &__results strong {
+      color: colors.$neutral-dark;
+    }
+
+    &__pagination {
+      text-align: right;
+    }
+
+    &__pagination button {
+      box-shadow: 0 fn.px-to-rem(1) fn.px-to-rem(2) rgba(colors.$neutral-dark, 0.08);
+      border-radius: fn.px-to-rem(10);
+      border: fn.px-to-rem(1) solid colors.$border-color;
+      padding: fn.px-to-rem(6) fn.px-to-rem(10);
+      transition: background-color 0.15s;
+      background-color: colors.$neutral-light;
+
+      &:hover {
+        background-color: rgba(colors.$neutral-dark, 0.05);
+      }
+
+      &:focus {
+        outline: none !important;
+        box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$blue, $lightness: 70%);
+      }
+
+      &:disabled {
+        box-shadow: none;
+        border-color: colors.$neutral-light-1;
+        background-color: colors.$neutral-light-1;
+        color: colors.$neutral-dark-2;
+        cursor: not-allowed;
+        user-select: none;
+      }
+
+      &:last-of-type {
+        margin-left: sp.$space;
+      }
+    }
+  }
+}
+</style>