@usssa/component-library 1.0.0-alpha.4 → 1.0.0-alpha.41

package/src/components/core/UTableStd.vue

@@ -0,0 +1,636 @@
+<script setup>
+import UTd from './UTable/UTd.vue'
+import UTh from './UTable/UTh.vue'
+import UTr from './UTable/UTr.vue'
+import UTable from './UTable/UTable.vue'
+import { computed, ref } from 'vue'
+import UCheckboxStd from './UCheckboxStd.vue'
+import UChip from './UChip.vue'
+import UAvatar from './UAvatar.vue'
+import UBtnStd from './UBtnStd.vue'
+import UTooltip from './UTooltip.vue'
+import UPagination from './UPagination.vue'
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  tableRowHover: {
+    type: Boolean,
+    default: false,
+  },
+  separator: {
+    type: String,
+    default: 'horizontal',
+  },
+  multiSelection: {
+    type: Boolean,
+    default: false,
+  },
+  flat: {
+    type: Boolean,
+    default: false,
+  },
+  bordered: {
+    type: Boolean,
+    default: false,
+  },
+  grid: {
+    type: Boolean,
+    default: false,
+  },
+  virtualScroll: {
+    type: Boolean,
+    default: false,
+  },
+  stickyHeader: {
+    type: Boolean,
+    default: false,
+  },
+  isCustomSort: {
+    type: Boolean,
+    default: false,
+  },
+  customClass: {
+    type: String,
+    default: '',
+  },
+  showPagination: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const selectedRows = defineModel('selectedRows', {
+  default: () => [],
+  type: Array,
+})
+const rows = defineModel('rows', {
+  default: () => [],
+  type: Array,
+})
+const columns = defineModel('columns', {
+  default: () => [],
+  type: Array,
+})
+const pagination = defineModel('pagination', {
+  default: { page: 1, rowsPerPage: 15 },
+  type: Object,
+})
+const loading = defineModel('loading', {
+  default: () => {},
+  type: Boolean,
+})
+const customLoading = ref(false)
+const rowsPerPageOptions = ref([
+  { label: '5 / per page', value: 5 },
+  { label: '10 / per page', value: 10 },
+  { label: '15 / per page', value: 15 },
+  { label: '20 / per page', value: 20 },
+  { label: '25 / per page', value: 25 },
+])
+
+const tableDataChip = ref(true) // this is required to show chip
+
+//adding a new row to selectedRows
+const handleToSelectRow = (row) => {
+  if (row) {
+    const index = selectedRows.value.findIndex((item) => item._id === row._id)
+    if (index === -1) {
+      selectedRows.value.push(row)
+    } else {
+      selectedRows.value.splice(index, 1)
+    }
+  }
+}
+// if virtual scroll is enbaled then adding large rows per page to view in virtual scroll
+const getRowsPerPageOptions = computed(() => {
+  if (props.virtualScroll) {
+    return [
+      ...rowsPerPageOptions.value,
+      { label: '100 / per page', value: 100 },
+      { label: '500 / per page', value: 500 },
+      { label: '1000 / per page', value: 1000 },
+    ]
+  } else {
+    return rowsPerPageOptions.value
+  }
+})
+
+//getting the sorted icon according the order
+const getSortingIcon = (col) => {
+  if (col) {
+    if (col.sortOrder === 'asc') {
+      return 'fa-kit fa-ascending'
+    } else {
+      return 'fa-kit fa-descending'
+    }
+  }
+}
+
+// it is giving the selected row and setting the new selection
+const isRowSelected = (row) => {
+  if (row) {
+    const index = selectedRows.value.findIndex((item) => item._id === row._id)
+    return computed({
+      get: () => {
+        return index === -1 ? false : true
+      },
+      set: () => {
+        if (index === -1) {
+          selectedRows.value.push(row)
+        } else {
+          selectedRows.value.splice(index, 1)
+        }
+      },
+    })
+  } else {
+    return computed({
+      get: () => {
+        let dataLength = props.rows.length
+        return selectedRows.value.length === dataLength
+          ? true
+          : selectedRows.value.length === 0
+          ? false
+          : null
+      },
+      set: (value) => {
+        if (value !== null) {
+          selectedRows.value.splice(0, selectedRows.value.length)
+        } else {
+          handleSelectAllData().then((res) => {
+            if (res === 200) {
+              customLoading.value = false
+            }
+          })
+        }
+      },
+    })
+  }
+}
+
+// handling the large selection data in chunks
+const handleSelectAllData = () => {
+  customLoading.value = true
+  return new Promise((resolve, reject) => {
+    let index = 0
+    function processChunk() {
+      if (index >= rows.value.length) {
+        resolve(200)
+        return
+      }
+      const chunk = props.rows.slice(index, index + 25)
+      chunk.forEach((element) => {
+        if (
+          selectedRows.value.findIndex((item) => item._id === element._id) ===
+          -1
+        ) {
+          selectedRows.value.push(element)
+        }
+      })
+      index += 25
+      setTimeout(processChunk, 10)
+    }
+    try {
+      processChunk()
+    } catch {
+      reject('error')
+    }
+  })
+}
+
+const emit = defineEmits(['onCustomSort'])
+
+// sorting funtion to handle text and number type of data
+const dataSort = (data, key, order, type) => {
+  if (type === 'text') {
+    return data.sort((a, b) =>
+      order === 'asc'
+        ? a[key].localeCompare(b[key])
+        : b[key].localeCompare(a[key])
+    )
+  } else {
+    return data.sort((a, b) =>
+      order === 'asc' ? a[key] - b[key] : b[key] - a[key]
+    )
+  }
+}
+
+//it is sorting the data according to type like text or number type of data
+const handleSort = (key, sortOrder, type) => {
+  rows.value = dataSort(rows.value, key, sortOrder, type)
+  columns.value.forEach((col) => {
+    if (key === col.field) {
+      col.sortOrder = sortOrder === 'asc' ? 'desc' : 'asc'
+    }
+  })
+}
+
+//if user want to add custom sort on data
+const handleCustomSort = (key, sortOrder, type) => {
+  emit('onCustomSort', key, sortOrder, type)
+}
+
+//adding a new row to selectedRows
+const onRowClick = (event, row) => {
+  if (props.multiSelection) {
+    event.stopPropagation()
+    handleToSelectRow(row)
+  }
+}
+
+//getting the chip color accroding to value of chip from row
+const getChipColor = (data, value) => {
+  const foundObject = data.find((chip) => chip.value === value)
+  if (foundObject) {
+    return foundObject['color']
+  } else {
+    return 'neutral-3'
+  }
+}
+
+// handle to change the page, and if virtual scroll is enabled and user scrolled to bottom it will take user to the top
+const onPageChange = (value) => {
+  pagination.value.page = value
+}
+
+//handle to change the rows per page
+const onRowPerPageChange = (value) => {
+  pagination.value.rowsPerPage = value
+}
+</script>
+
+<template>
+  <UTable
+    :title="title"
+    v-model:rows="rows"
+    v-model:columns="columns"
+    :separator="separator"
+    :loading="loading"
+    :flat="flat"
+    :bordered="bordered"
+    v-model:pagination="pagination"
+    :grid="grid"
+    :virtualScroll="virtualScroll"
+    :stickyHeader="stickyHeader"
+    :class="customClass"
+    :showPagination="showPagination"
+  >
+    <!-- custom header slot to add customized header -->
+    <template v-slot:header="props">
+      <UTr :props="props" :tableRowHover="tableRowHover">
+        <UTh
+          v-if="multiSelection"
+          style="width: 3% !important"
+          :tableHeaderAutoWidth="false"
+          tableHeadAlignment="left"
+          :separator="separator"
+        >
+          <UCheckboxStd
+            :id="`u-checkbox-table-header`"
+            v-model="isRowSelected(null).value"
+            name="Table Header"
+            :indeterminate="true"
+          />
+        </UTh>
+        <UTh
+          v-for="(col, key) in props.cols"
+          :class="`${col.sortable ? 'cursor-pointer' : ''} ${
+            col.headerClasses
+          }`"
+          :key="key"
+          :tableHeaderAutoWidth="col.autoWidth"
+          :tableHeadAlignment="col.field === 'action' ? col.align : col.align"
+          @click="
+            col.sortable
+              ? isCustomSort
+                ? handleCustomSort(col.field, col.sortOrder, col.type)
+                : handleSort(col.field, col.sortOrder, col.type)
+              : null
+          "
+          :separator="separator"
+          :style="col.headerStyle"
+        >
+          <span
+            :class="`${col.field === 'action' ? 'hidden-header-label' : ''}`"
+          >
+            {{ col.field === 'action' ? 'Action' : col.label }}
+          </span>
+
+          <span v-if="col.sortable && col.field !== 'action'">
+            <q-btn label="Sorting Button" :ripple="false" class="u-sorting-btn">
+              <q-icon
+                size="xs"
+                :class="`${getSortingIcon(col)} sorting-icon`"
+                :aria-label="col.label"
+                alt="sort-desc"
+                tabindex="0"
+              ></q-icon>
+            </q-btn>
+          </span>
+        </UTh>
+      </UTr>
+    </template>
+    <!-- custom body slots to add customized cell data -->
+    <template v-slot:body="props">
+      <UTr
+        :props="props"
+        @click="onRowClick($event, props.row)"
+        :tableRowHover="tableRowHover"
+        :class="`${isRowSelected(props.row).value ? 'selected-data-row' : ''}`"
+      >
+        <UTd
+          v-if="multiSelection"
+          :index="-1"
+          tableDataAlignment="left"
+          :tableHeaderAutoWidth="false"
+          :separator="separator"
+        >
+          <UCheckboxStd
+            :id="`u-checkbox-${props.row._id}`"
+            v-model="isRowSelected(props.row).value"
+            :name="props.row._id"
+          />
+        </UTd>
+        <template v-for="(col, index) in props.cols" :key="index">
+          <!-- to show the cell data without the action cell -->
+          <UTd
+            v-if="col.field !== 'action'"
+            :row="props.row"
+            :col="col"
+            :index="index"
+            :tableDataAlignment="col.align"
+            :tableDataAutoWidth="col.autoWidth"
+            :separator="separator"
+            :style="col.style"
+            :class="col.classes"
+          >
+            <!-- to show the chips with different variant -->
+            <template v-if="col.chipValues && col.chipValues.length > 0">
+              <UChip
+                v-model="tableDataChip"
+                :type="getChipColor(col.chipValues, props.row[col.field])"
+                avatarLabel=""
+                :chipLabel="props.row[col.field].toString()"
+                :removable="false"
+                class="u-table-chip"
+                :is-show-tooltip="col.showChipTooltip"
+                :offset="col.offset"
+                :anchor="col.anchor"
+              />
+            </template>
+            <!-- to show the avatar of user image with name and other details -->
+            <template v-else-if="col.avatarKey">
+              <div class="flex justify-start items-center">
+                <div
+                  v-if="
+                    props.row[col.avatarKey] &&
+                    typeof props.row[col.avatarKey] === 'object'
+                  "
+                  class="table-data-avatar"
+                >
+                  <UAvatar
+                    v-if="props.row[col.avatarKey]?.type === 'initials'"
+                    size="md"
+                    :name="`${props.row[col.avatarKey]?.value}`"
+                  />
+                  <UAvatar
+                    v-else-if="props.row[col.avatarKey]?.type === 'image'"
+                    size="md"
+                    :name="
+                      props.row[col.avatarKey]?.name ??
+                      props.row[col.avatarKey]?.value
+                    "
+                    :image="`${props.row[col.avatarKey]?.value}`"
+                  />
+                </div>
+                <div v-else class="table-data-avatar">
+                  <UAvatar
+                    size="md"
+                    :name="`${props.row[col.avatarKey]}`"
+                    :image="`${props.row[col.avatarKey]}`"
+                  />
+                </div>
+                <div class="td-grid-content">
+                  <div>{{ props.row[col.field] }}</div>
+                  <div class="td-caption text-body-xs" v-if="col.captionKey">
+                    {{ props.row[col.captionKey] }}
+                  </div>
+                </div>
+              </div>
+            </template>
+            <!-- to show other cell data -->
+            <template v-else>
+              <div class="td-grid-content">
+                <div>{{ props.row[col.field] }}</div>
+                <div class="td-caption text-body-xs" v-if="col.captionKey">
+                  {{ props.row[col.captionKey] }}
+                </div>
+              </div>
+            </template>
+          </UTd>
+          <!-- to the action cell, it can have single and multiple  -->
+          <UTd
+            v-else
+            :index="index"
+            :tableDataAlignment="col.align"
+            :tableDataAutoWidth="false"
+            style="width: 3%"
+            :separator="separator"
+            :style="col.style"
+            :class="col.classes"
+          >
+            <template v-if="col.actions && col.actions.length === 1">
+              <UBtnStd
+                v-for="(action, key) in col.actions"
+                :key="key"
+                :size="action.size"
+                :flat="action.flat"
+                :label="action.label"
+                :color="action.color"
+                :leftIcon="action.icon"
+                @onClick="action.handler(props.row)"
+              />
+            </template>
+            <!-- to show the actions list if the actions are multiple -->
+            <template v-else>
+              <q-icon
+                size="xs"
+                class="fa-kit fa-ellipsis-vertical action-icon cursor-pointer"
+                aria-label="more-action-icon"
+                alt="action-icon-more"
+                tabindex="0"
+              >
+                <UTooltip description="More Actions" />
+                <q-menu
+                  transition-show="slide-left"
+                  transition-hide="slide-right"
+                  anchor="center start"
+                  self="center left"
+                >
+                  <div
+                    class="flex justify-end items-center more-action-wrapper"
+                  >
+                    <template v-for="(action, key) in col.actions" :key="key">
+                      <UTooltip
+                        :target="`#more-action-${key}`"
+                        :description="action.tooltip"
+                      />
+                      <q-icon
+                        :size="action.size"
+                        :id="`more-action-${key}`"
+                        :class="`more-action-icon ${
+                          action.icon
+                        } cursor-pointer ${key > 0 ? 'q-ml-sm' : ''}`"
+                        :aria-label="action.label"
+                        :alt="`${action.label}-key`"
+                        @click="action.handler(props.row)"
+                        tabindex="0"
+                      />
+                    </template>
+                  </div>
+                </q-menu>
+              </q-icon>
+            </template>
+          </UTd>
+        </template>
+      </UTr>
+    </template>
+    <!-- slot to show if there is no data in rows -->
+    <template v-slot:no-data>
+      <div class="full-width row flex-center text-accent q-gutter-sm">
+        <span> No Data Found </span>
+      </div>
+    </template>
+    <!-- to add the custom loading state -->
+    <!-- <template v-slot:loading>
+      <q-inner-loading v-if="customLoading" showing color="primary" />
+    </template> -->
+  </UTable>
+  <!-- customized pagination with the vitual scroll functionality and rows per page selection -->
+  <div
+    v-if="showPagination"
+    class="row justify-end items-center pagination-wrapper"
+  >
+    <UPagination
+      v-if="rows.length >= 6"
+      v-model="pagination.page"
+      :rowPerPage="pagination.rowsPerPage"
+      :perPageOptions="getRowsPerPageOptions"
+      @onPageChange="onPageChange"
+      @onRowChange="onRowPerPageChange"
+      :maxPageLink="
+        Number(Math.ceil(rows.length / pagination.rowsPerPage > 10 ? 6 : 3))
+      "
+      :maxPages="Number(Math.ceil(rows.length / pagination.rowsPerPage))"
+    />
+  </div>
+  <q-inner-loading :showing="customLoading" class="custom-table-loader" />
+</template>
+
+<style lang="sass">
+.action-icon
+  height: $md
+  width: $md
+  color: $neutral-9
+
+.table-data-avatar
+  padding: $xs
+  padding-left: 0px
+
+.td-caption
+  color: $description
+
+.more-action-wrapper
+  min-width: 3.125rem
+  padding: $xs
+  min-height: $xl
+  gap: $xs
+  border-bottom: 1.5px solid $neutral-4
+  background: $surface-bg-1
+  box-shadow: 0px 0px 4px 0px rgba(16, 17, 20, 0.08)
+
+.more-action-icon
+  color: $neutral-9
+
+.sorting-icon
+  color: $description
+  padding-left: $xs
+  font-size: $ba !important
+
+.selected-data-row
+  background: #F7F7F7
+
+.rows-per-page-dropdown
+  margin-right: 0.5rem
+
+.u-table
+  height: auto
+
+  .q-table__progress
+    .q-linear-progress
+      color: $primary !important
+      height: 0.145rem
+
+.force-auto-height-table
+  height: auto !important
+
+.u-virtualscroll-table
+  height: 50rem
+
+.u-virtualscroll-grid-table
+  max-height: 50rem
+  overflow: auto
+
+.u-sticky-table-header
+  .q-table__top,
+  .q-table__bottom,
+  thead tr:first-child th
+    background-color: #FFFFFF
+
+  thead tr th
+    position: sticky
+    z-index: 1
+
+  thead tr:first-child th
+    top: 0
+
+  &.q-table--loading thead tr:last-child th
+    top: 48px
+
+  tbody
+    scroll-margin-top: 48px
+
+.u-sorting-btn
+  padding: 0
+  min-height: auto
+  .block
+    display: none !important
+
+  .q-focus-helper
+    background: none !important
+
+.u-sorting-btn:before
+  box-shadow: none !important
+
+.u-table-chip
+  .q-icon
+    display: none
+
+.no-border-bottom-cell
+  border-bottom: none !important
+
+.pagination-wrapper
+  margin-top: $ba
+
+.custom-table-loader
+  .q-spinner
+    color: $primary
+
+.td-grid-content
+  text-wrap: balance
+  word-break: break-all
+
+.hidden-header-label
+  visibility: hidden
+</style>