quasar-factory-lib 0.1.18 → 0.1.20

package/package.json

@@ -98,6 +98,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "author": ""
 }

package/src/components/Table/DraggableQTable.vue

@@ -0,0 +1,565 @@
+<template lang="">
+  <div>
+    <q-table
+      v-show="!showSkeleton"
+      ref="myTable"
+      v-model:selected="selected"
+      class="my-table"
+      :grid="smallDevice"
+      :style="tableStyle"
+      flat
+      :filter-method="customFilter"
+      bordered
+      :rows="rowsData"
+      :columns="columns"
+      :row-key="rowKey"
+      :rows-per-page-options="rowsPerPageOptions"
+      :selection="selectionType"
+      :visible-columns="visibleColumns"
+      table-class="text-grey-9"
+      table-header-class="main-color"
+      :filter="filterComputed"
+      :sort-method="customSortMethod"
+      separator="horizontal"
+      binary-state-sort
+      :selected-rows-label="getSelectedString"
+      :loading="loading"
+      pagination.sync="0"
+      :grid-header="showGridHeader"
+      @update:selected="(details) => {
+        $emit('onUpdateSelected', details)
+      }"
+    >
+      <template #top-right="props">
+        <q-separator />
+        <div
+          v-if="showIconAdvancedFilter"
+          class="q-pr-lg float-left cursor-pointer no-wrap row items-center"
+          data-cy="advanced-filters-button"
+          @click="() => {
+            showAdvancedFilter = !showAdvancedFilter
+          }"
+        >
+        <q-icon
+          :name="showAdvancedFilter ? 'filter_alt_off' : 'filter_alt'"
+          size="md"
+          class="cursor-pointer items-center"
+        />
+        <span v-if="!smallDevice">
+        {{ $t('table.advancedFilters') }}
+        </span>
+      </div>
+        <TableFilter
+          v-if="getTableInputSearchVisibility && !hideFilter"
+          ref="filterInput"
+          class="q-pl-xs"
+          :table-props="props"
+          :store="store"
+          @input-focus="filterInputFocus"
+        />
+        <TableColumnsSelector
+          v-if="getColumnsSelectorVisibility && !hideColumnsSelector "
+          class="q-pl-xs"
+          :table-props="props"
+          :columns="columns"
+          :visible-columns="visibleColumns"
+          @on-select-visible-columns="onSelectVisibleColumns"
+        />
+      </template>
+      <template #header="props">
+        <TableSlotHeader
+          :table-props="props"
+          :selection-type="selectionType"
+          :small-device="smallDevice"
+          :show-advanced-filter="showAdvancedFilter"
+          :advancedFilters="advancedFiltersData"
+          :filteredRowsLength="filteredRows.length"
+        />
+      </template>
+      <template #body="props">
+        <TableSlotBody
+          v-if="!showSkeleton"
+          :table-props="props"
+          :selection-type="selectionType"
+          :getCellClass="getCellClass"
+          @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
+          @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
+          @on-save-value-popup-edit="onSaveValuePopupEdit"
+          @on-click-button="onClickButton"
+          @on-click-icon-tool-tip="onClickIconToolTip"
+          @click="onRowClick(props.row)"
+        />
+      </template>
+      <template #item="props">
+        <TableSlotGrid
+          v-if="!showSkeleton"
+          :table-props="props"
+          :selection-type="selectionType"
+          :popup-edit-number-options="popupEditNumberOptions"
+          :getCellClass="getCellClass"
+          @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
+          @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
+          @on-save-value-popup-edit="onSaveValuePopupEdit"
+          @on-click-button="onClickButton"
+          @on-click-icon-tool-tip="onClickIconToolTip"
+          @click="onRowClick(props.row)"
+        />
+      </template>
+    </q-table>
+    <TableSkeleton
+      v-show="getTableSkeletonVisibility"
+      id="tableSkeleton"
+    />
+    <CardListSkeleton
+      v-show="getGridSkeletonVisibility"
+      id="cardListSkeleton"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import TableSlotHeader from './components/TableSlotHeader.vue'
+import TableColumnsSelector from './components/TableColumnsSelector.vue'
+import TableSlotBody from './components/TableSlotBody.vue'
+import TableSlotGrid from './components/TableSlotGrid.vue'
+import TableFilter from './components/TableFilter.vue'
+import TableSkeleton from './components/TableSkeleton.vue'
+import CardListSkeleton from './components/CardListSkeleton.vue'
+import {useDraggable} from 'vue-draggable-plus'
+
+export default defineComponent({
+  components: {
+    TableSlotHeader,
+    TableColumnsSelector,
+    TableSlotBody,
+    TableSlotGrid,
+    TableFilter,
+    TableSkeleton,
+    CardListSkeleton
+  },
+  props: {
+    columns: {
+      type: Array as () => object[],
+      required: true
+    },
+    rows: {
+      type: Array as () => object[],
+      required: true
+    },
+    visibleColumns: {
+      type: Array as () => string[],
+      required: true
+    },
+    selectionType: {
+      type: String as () => 'none' | 'single' | 'multiple',
+      default: 'none'
+    },
+    rowKey: {
+      type: String,
+      default: 'id'
+    },
+    tableStyle: {
+      type: String,
+      default: ''
+    },
+    popupEditNumberOptions: {
+      type: Array,
+      default: () => []
+    },
+    smallDevice: {
+      type: Boolean,
+      required: true
+    },
+    store: {
+      type: Object,
+      required: true
+    },
+    tableId: {
+      type: String,
+      default: ''
+    },
+    hideColumnsSelector: {
+      type: Boolean,
+      default: false
+    },
+    hideFilter: {
+      type: Boolean,
+      default: false
+    },
+    showSkeleton: {
+      type: Boolean
+    },
+    getCellClass: {
+      type: Function,
+      default: function () {}
+    },
+    // Needs to be used with additionalFilterConditions and additionalSortConditions
+    filterComputedOptions: {
+      type: Object,
+      default: {}
+    },
+    additionalFilterConditions: {
+      type: Function,
+      default: function () {}
+    },
+    additionalSortConditions: {
+      type: Function,
+      default: function () {}
+    },
+    showIconAdvancedFilter: {
+      type: Boolean,
+      default: false
+    },
+    rowsPerPageOptions: {
+      type: Array,
+       default: () => [0]
+
+    }
+  },
+  emits: [
+    'onSelectVisibleColumns',
+    'onUpdateBasicCheckboxValue',
+    'onUpdateCustomizedCheckboxValue',
+    'onSaveValuePopupEdit',
+    'onClickButton',
+    'storeUpdated',
+    'deleteItem',
+    'openModalWithTable',
+    'setItemNotFound',
+    'onClickSeeTaskDetails',
+    'startMaintenanceTicket',
+    'pauseMaintenanceTicket',
+    'finishMaintenanceTicket',
+    'onRowClick',
+    'onClickIconToolTip',
+    'onUpdateSelected',
+    'setLineRemainingQty',
+    'setLineNoStock',
+    'onDoneLineMaintenanceTasks',
+    'reprintSULabel',
+    'onDragStart',
+    'onDragUpdate',
+    'onDragEnd',
+    'modifyPriorityOrder',
+    'onClickRowBtnPrintOP',
+    'getPOFromWorkCenter',
+    'getProductionTimesMachineCenter',
+    'operatorMachineAssignmentAssignMachine',
+    'operatorMachineAssignmentSetDate',
+    'operatorMachineAssignmentSetPartialMachineCenter',
+    'operatorMachineAssignmentSeeDetail',
+    'onClickOpenDialogOperators'
+
+  ],
+  data () {
+    return {
+      selected: [],
+      filter: '',
+      rowsData: [] as object[],
+      gridRowsSelected: false,
+      selectedRows: [] as number[],
+      showColumnsSelector: false,
+      showSearch: false,
+      loading: false,
+      forceRender: false,
+      totalPage: 0,
+      pageSize: 20,
+      filteredRows: [] as object [] | [],
+      showAdvancedFilter: false,
+      advancedFiltersData: {},
+      tableRef: null,
+      draggableInstance: null,
+      disabled: false,
+      enableDragAndDrop: false,
+      dragAndDropDelay: 0
+    }
+  },
+  computed: {
+    getColumnsSelectorVisibility () {
+      return !this.smallDevice || this.showColumnsSelector
+    },
+    getTableInputSearchVisibility () {
+      return !this.smallDevice || this.showSearch
+    },
+    showGridHeader () {
+      return this.selectionType === 'multiple' || this.showAdvancedFilter
+    },
+    getTableSkeletonVisibility () {
+      return !this.smallDevice && this.showSkeleton
+    },
+    getGridSkeletonVisibility () {
+      return this.smallDevice && this.showSkeleton
+    },
+    filterComputed ():object {
+      return {
+        search: this.store.filterValue,
+        forceRender: this.forceRender,
+        ...this.filterComputedOptions
+      }
+    },
+    pageLength (): number {
+      return (this.totalPage + 1) * this.pageSize
+    }
+  },
+  watch: {
+    rows (val) {
+      this.rowsData = val
+    },
+    showAdvancedFilter (val: boolean): void {
+      if (!val) {
+        this.advancedFiltersData = {}
+      }
+    },
+    enableDragAndDrop (val): void {
+      if (val) {
+      this.enableDragAndDropFunc()
+      }
+    },
+    smallDevice (val): void {
+      if(val) {
+        this.dragAndDropDelay = 200
+      } else {
+        this.dragAndDropDelay = 0
+      }
+    },
+    /* showSkeleton (val: boolean): void {
+      if (!val) {
+        this.handleInfiniteScrollTableCompositionAPi()
+      }
+    },
+    '$q.screen.width' (): void {
+      setTimeout(() => {
+        this.handleInfiniteScrollTableCompositionAPi()
+      }, 500)
+    } */
+  },
+  mounted () {
+    this.getAdvancedFilterColumns()
+  },
+  methods: {
+    enableDragAndDropFunc (): void {
+      this.dragAndDropDelay = this.smallDevice ? 200: 0
+      if (this.smallDevice) {
+        this.tableRef = document.querySelector('.q-table__grid-content')
+      } else {
+        this.tableRef = document.querySelector('.q-table tbody')
+      }
+      const self = this
+      if (this.draggableInstance?.destroy) {
+        this.draggableInstance.destroy()
+      }
+      if (this.tableRef) {
+        this.draggableInstance = useDraggable(this.tableRef, this.rows, {
+            animation: 100,
+            delay: self.dragAndDropDelay,
+
+            onStart (e) {
+                self.$emit('onDragStart', e)
+            },
+            onUpdate (e) {
+                self.rowsData = [...self.rows]
+                self.$emit('onDragUpdate', e)
+            },
+            onEnd(e) {
+              self.$emit('onDragEnd', e)
+            }
+        })
+    }
+    },
+    getSelectedString (val: number): string {
+      const rowsSelectedLength = val
+      if (rowsSelectedLength === 0) {
+        return ''
+      }
+      const recordString = rowsSelectedLength > 1 ? 'records' : 'record'
+      return `${rowsSelectedLength} ${recordString} selected`
+    },
+    onSelectVisibleColumns (columns: string[]) {
+      this.$emit('onSelectVisibleColumns', columns)
+    },
+    onSaveValuePopupEdit (row: object) {
+      this.$emit('onSaveValuePopupEdit', row)
+    },
+    onUpdateBasicCheckboxValue (row: object) {
+      this.$emit('onUpdateBasicCheckboxValue', row)
+    },
+    onClickButton (emit: 'onClickButton', row: object) {
+      this.$emit(emit, row)
+    },
+    onClickIconToolTip (emit: 'onClickIconToolTip', row: object) {
+      this.$emit(emit, row)
+    },
+    onRowClick (row: object) {
+      this.$emit('onRowClick', row)
+    },
+    deleteItem (row: object) {
+      this.$emit('deleteItem', row)
+    },
+    onUpdateCustomizedCheckboxValue  (row: object) {
+      this.$emit('onUpdateCustomizedCheckboxValue', row)
+    },
+    clearTableSelection () {
+      this.selected = []
+    },
+    toggleSearchVisibility (store: { lastFilterValue: string, valueInputFilterTable: string }) {
+      this.showSearch = !this.showSearch
+      store.lastFilterValue = ''
+      store.valueInputFilterTable = ''
+    },
+    toogleColumnsSelectorVisibility () {
+      this.showColumnsSelector = !this.showColumnsSelector
+    },
+    filterInputFocus () {
+      setTimeout(() => {
+        if (this.$refs.filterInput) {
+          this.$refs.filterInput.inputFocus()
+        }
+      }, 10)
+    },
+    toogleLoading () {
+      this.loading = !this.loading
+    },
+    customSortMethod(rows: object[] | [], sortBy: string, descending: boolean) {
+      let data = []
+      if (this.store.filterValue !== '') {
+       data = [...this.filteredRows];
+      }
+      else {
+        data = [...this.rows];
+      }
+      if (this.additionalSortConditions && this.additionalSortConditions.toString().replace(/\s+/g, '') !== 'function(){}') {
+        data = this.additionalSortConditions(this.filteredRows, rows);
+      }
+      this.getSortedData(sortBy, data, descending)
+      return data.slice(0, this.pageLength);
+    },
+    getSortedData (sortBy: string, data: object[] | [], descending: boolean) {
+      if (sortBy) {
+        data.sort((a, b) => {
+          const x = descending ? b : a;
+          const y = descending ? a : b;
+
+          const xValue = x[sortBy];
+          const yValue = y[sortBy];
+
+          const parseDate = (dateString: string): Date => {
+            const [day, month, year] = dateString.split('/');
+            return new Date(`${year}-${month}-${day}`);
+          };
+
+          const parseTime = (timeString: string): number => {
+            const [hours, minutes, seconds] = timeString.split(':').map(Number);
+            return (hours * 3600) + (minutes * 60) + seconds;
+          };
+
+          const parsePercentage = (percentageString: string): number => {
+            return parseFloat(percentageString.replace('%', '')) / 100;
+          };
+
+          if (typeof xValue === 'string' && typeof yValue === 'string') {
+            const xDate = parseDate(xValue);
+            const yDate = parseDate(yValue);
+
+            if (!isNaN(xDate.getTime()) && !isNaN(yDate.getTime())) {
+              return xDate.getTime() - yDate.getTime();
+            }
+
+            const xTime = parseTime(xValue);
+            const yTime = parseTime(yValue);
+
+            if (!isNaN(xTime) && !isNaN(yTime)) {
+              return xTime - yTime;
+            } else if (xValue.includes('%') && yValue.includes('%')) {
+              const xPercent = parsePercentage(xValue);
+              const yPercent = parsePercentage(yValue);
+              return xPercent - yPercent;
+            } else {
+              return xValue.localeCompare(yValue);
+            }
+          }
+          else if (typeof xValue === 'number' && typeof yValue === 'number') {
+            return xValue - yValue;
+          }
+          else if (typeof xValue === 'boolean' && typeof yValue === 'boolean') {
+            console.log(xValue, yValue)
+            return xValue === yValue ? 0 : xValue ? 1 : -1;
+          }
+          else {
+            return String(xValue) > String(yValue) ? 1 : String(xValue) < String(yValue) ? -1 : 0;
+          }
+        });
+      }
+    },
+    containsSearchTermInRow (row: object, lowerSearch: string): boolean {
+      if (lowerSearch !== '') {
+        const values = Object.values(row)
+        const valuesLowerCase = values.map((x) => (x + '').toLowerCase())
+        for (let val = 0; val < valuesLowerCase.length; val++) {
+          if (valuesLowerCase[val].includes(lowerSearch)) {
+            return true
+          }
+        }
+      }
+      return false
+    },
+    customFilter(rows: object[] | [], terms: { search: string, prepared: boolean }) {
+      let filteredRows_ = []
+      if (terms.search !== '') {
+        const lowerSearch = terms.search ? terms.search.toLowerCase() : ''
+        for (let i = 0; i < this.rows.length; i++) {
+          if (this.containsSearchTermInRow(this.rows[i], lowerSearch)) {
+            filteredRows_.push(this.rows[i])
+          }
+        }
+      }
+      else {
+        filteredRows_ = rows
+      }
+      if (this.additionalFilterConditions && this.additionalFilterConditions.toString().replace(/\s+/g, '') !== 'function(){}') {
+        filteredRows_ = this.additionalFilterConditions(this.rows, filteredRows_)
+      }
+
+      if (this.advancedFiltersData && Object.keys(this.advancedFiltersData).length > 0) {
+        filteredRows_ = filteredRows_.filter(row => {
+          return Object.keys(this.advancedFiltersData).every(key => {
+            const filterValue = this.advancedFiltersData[key]
+            if (filterValue === '' || filterValue === null || filterValue === undefined) {
+              return true
+            }
+            return String(row[key]).toLowerCase().includes(String(filterValue).toLowerCase())
+          })
+        })
+      }
+
+      this.filteredRows = filteredRows_
+      return  filteredRows_.slice(0, this.pageLength)
+    },
+    getAdvancedFilterColumns (): void {
+      this.advancedFiltersData = this.columns.reduce((acc, column) => {
+            acc[column.name] = ''
+          return acc
+        }, {} as Record<string, string>)
+    },
+    handleInfiniteScrollTableCompositionAPi () {
+      // const offSet = this.showIconAdvancedFilter   && this.smallDevice ? document.getElementsByClassName('q-table__control')[0].offsetHeight : 0
+      this.$nextTick(() => {
+        const elemClass = this.smallDevice ? 'q-table__grid-content' : 'q-table__middle scroll'
+        const tableType = this.smallDevice ? 'Grid' : 'Table'
+        const qtableScrollElem = document.getElementsByClassName(elemClass) as HTMLCollectionOf<HTMLElement>
+        const elementToScroll =
+          qtableScrollElem.length > 0 ? qtableScrollElem[0] : window
+        const fnAddScroll = (event: Event) => {
+          const { scrollHeight, scrollTop, clientHeight } = event.target as HTMLElement
+          if (Math.abs(scrollHeight - clientHeight - scrollTop) <= 1) {
+            console.log(`[${tableType}] You are at the bottom!`, this.totalPage)
+            this.totalPage++
+          }
+        }
+        window.removeEventListener('scroll', fnAddScroll)
+        elementToScroll.removeEventListener('scroll', fnAddScroll)
+        elementToScroll.addEventListener('scroll', fnAddScroll)
+      })
+    }
+  }
+})
+</script>

package/src/components/Table/Table.vue

@@ -1,34 +1,37 @@
 <template lang="">
   <div>
     <q-table
-      v-show="!showSkeleton"
+      v-if="!showSkeleton && rowsData.length"
       ref="myTable"
       v-model:selected="selected"
+      v-model:pagination="pagination"
       class="my-table"
-      :grid="smallDevice"
       :style="tableStyle"
       flat
-      :filter-method="customFilter"
       bordered
       :rows="rowsData"
       :columns="columns"
+      :filter-method="customFilter"
+      :filter="filterComputed"
+      :sort-method="customSortMethod"
       :row-key="rowKey"
       :rows-per-page-options="rowsPerPageOptions"
       :selection="selectionType"
       :visible-columns="visibleColumns"
       table-class="text-grey-9"
       table-header-class="main-color"
-      :filter="filterComputed"
-      :sort-method="customSortMethod"
       separator="horizontal"
       binary-state-sort
       :selected-rows-label="getSelectedString"
       :loading="loading"
-      pagination.sync="0"
-      :grid-header="showGridHeader"
+      virtual-scroll
+      @virtual-scroll="onVirtualScroll"
+      :virtual-scroll-item-size="48"
+      :virtual-scroll-slice-ratio-before="0"
       @update:selected="(details) => {
         $emit('onUpdateSelected', details)
       }"
+      
     >
       <template #top-right="props">
         <q-separator />
@@ -78,7 +81,7 @@
       </template>
       <template #body="props">
         <TableSlotBody
-          v-if="!showSkeleton"
+          v-if="!showSkeleton && !smallDevice"
           :table-props="props"
           :selection-type="selectionType"
           :getCellClass="getCellClass"
@@ -89,10 +92,9 @@
           @on-click-icon-tool-tip="onClickIconToolTip"
           @click="onRowClick(props.row)"
         />
-      </template>
-      <template #item="props">
+
         <TableSlotGrid
-          v-if="!showSkeleton"
+          v-if="!showSkeleton && smallDevice"
           :table-props="props"
           :selection-type="selectionType"
           :popup-edit-number-options="popupEditNumberOptions"
@@ -253,6 +255,7 @@ export default defineComponent({
   ],
   data () {
     return {
+      pagination: { rowsPerPage: 0},
       selected: [],
       filter: '',
       rowsData: [] as object[],
@@ -431,7 +434,7 @@ export default defineComponent({
         data = this.additionalSortConditions(this.filteredRows, rows);
       }
       this.getSortedData(sortBy, data, descending)
-      return data.slice(0, this.pageLength);
+      return data // .slice(0, this.pageLength);
     },
     getSortedData (sortBy: string, data: object[] | [], descending: boolean) {
       if (sortBy) {
@@ -532,7 +535,7 @@ export default defineComponent({
       }
 
       this.filteredRows = filteredRows_
-      return  filteredRows_.slice(0, this.pageLength)
+      return  filteredRows_ //slice(0, this.pageLength)
     },
     getAdvancedFilterColumns (): void {
       this.advancedFiltersData = this.columns.reduce((acc, column) => {
@@ -559,7 +562,10 @@ export default defineComponent({
         elementToScroll.removeEventListener('scroll', fnAddScroll)
         elementToScroll.addEventListener('scroll', fnAddScroll)
       })
-    }
+    },
+    onVirtualScroll (args) {
+      console.log('args', args)
+    },
   }
 })
 </script>

package/src/components/Table/components/TableSlotBody.vue

@@ -1,5 +1,6 @@
 <template>
   <tr
+    :id="tablePropsData.row.id"
     :class="tablePropsData.row.rowBgColor || 'bg-main-color'"
   >
     <q-td

package/src/components/Table/components/TableSlotGrid.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :id="'card-container-' + tablePropsData.row.id"
-    class="col-xs-12 col-sm-12 grid-style-transition"
+    class="grid-style-transition"
     :style="tablePropsData.selected ? 'transform: scale(0.95);' : ''"
   >
     <q-card