quasar-factory-lib 0.1.17 → 0.1.19

package/src/components/Table/Table.vue

@@ -4,28 +4,27 @@
       v-show="!showSkeleton"
       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
       @update:selected="(details) => {
         $emit('onUpdateSelected', details)
       }"
@@ -78,7 +77,7 @@
       </template>
       <template #body="props">
         <TableSlotBody
-          v-if="!showSkeleton"
+          v-if="!showSkeleton && !smallDevice"
           :table-props="props"
           :selection-type="selectionType"
           :getCellClass="getCellClass"
@@ -89,10 +88,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"
@@ -212,7 +210,7 @@ export default defineComponent({
     },
     rowsPerPageOptions: {
       type: Array,
-       default: () => [20]
+       default: () => [0]
 
     }
   },
@@ -249,10 +247,11 @@ export default defineComponent({
     'operatorMachineAssignmentSetPartialMachineCenter',
     'operatorMachineAssignmentSeeDetail',
     'onClickOpenDialogOperators'
-    
+
   ],
   data () {
     return {
+      pagination: { rowsPerPage: 0},
       selected: [],
       filter: '',
       rowsData: [] as object[],
@@ -282,7 +281,7 @@ export default defineComponent({
       return !this.smallDevice || this.showSearch
     },
     showGridHeader () {
-      return this.selectionType === 'multiple' || this.showAdvancedFilter 
+      return this.selectionType === 'multiple' || this.showAdvancedFilter
     },
     getTableSkeletonVisibility () {
       return !this.smallDevice && this.showSkeleton
@@ -352,7 +351,7 @@ export default defineComponent({
         this.draggableInstance = useDraggable(this.tableRef, this.rows, {
             animation: 100,
             delay: self.dragAndDropDelay,
-  
+
             onStart (e) {
                 self.$emit('onDragStart', e)
             },
@@ -431,7 +430,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) {
@@ -476,14 +475,14 @@ export default defineComponent({
             } 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;
           }
@@ -511,7 +510,7 @@ export default defineComponent({
             filteredRows_.push(this.rows[i])
           }
         }
-      } 
+      }
       else {
         filteredRows_ = rows
       }
@@ -532,13 +531,13 @@ 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) => {
             acc[column.name] = ''
           return acc
-        }, {} as { [key: string]: string })
+        }, {} as Record<string, string>)
     },
     handleInfiniteScrollTableCompositionAPi () {
       // const offSet = this.showIconAdvancedFilter   && this.smallDevice ? document.getElementsByClassName('q-table__control')[0].offsetHeight : 0
@@ -562,4 +561,4 @@ export default defineComponent({
     }
   }
 })
-</script>
+</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

package/src/components/Table/index.ts

@@ -1,6 +1,7 @@
 import type { App, Plugin } from 'vue'
 
 import MyTable from './Table.vue'
+import DraggableQTable from './Table.vue' 
 
 import { registerComponent } from '@/utils/plugins'
 
@@ -11,8 +12,10 @@ import { registerComponent } from '@/utils/plugins'
 export default {
   install (app: App) {
     registerComponent(app, 'MyTable', MyTable)
+    registerComponent(app, 'DraggableQTable', DraggableQTable)
   }
 } as Plugin
 
 /** export button components */
 export { MyTable as MyTable }
+export { DraggableQTable as DraggableQTable }

package/src/components/plugins.ts

@@ -1,4 +1,5 @@
 import MyTable from './Table'
+import DraggableQTable from './Table'
 import AlertDialog from './Alert'
 import ConfirmDialog from './Confirm'
 import TaskNavBar from './TaskNavBar'
@@ -11,5 +12,5 @@ import SkeletonAreas from './SkeletonAreas'
 import ListSkeleton from './ListSkeleton'
 import SkeletonTaskList from './SkeletonTaskList'
 import SkeletonFormCreateTask from './SkeletonFormCreateTask'
-export { MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask, TableRowsCounter, NavBarSkeleton, AlertLabelsWithError, FormSkeleton, SkeletonAreas, ListSkeleton, SkeletonTaskList, SkeletonFormCreateTask }
+export { DraggableQTable, MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask, TableRowsCounter, NavBarSkeleton, AlertLabelsWithError, FormSkeleton, SkeletonAreas, ListSkeleton, SkeletonTaskList, SkeletonFormCreateTask }
 

package/src/index.ts

@@ -1,11 +1,11 @@
 import '@quasar/extras/material-icons/material-icons.css'
 import { Quasar } from 'quasar'
 import { App, Plugin } from 'vue'
-import { MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask, TableRowsCounter, NavBarSkeleton, AlertLabelsWithError, FormSkeleton, SkeletonAreas, ListSkeleton, SkeletonTaskList, SkeletonFormCreateTask } from './components/plugins.ts'
+import { DraggableQTable, MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask, TableRowsCounter, NavBarSkeleton, AlertLabelsWithError, FormSkeleton, SkeletonAreas, ListSkeleton, SkeletonTaskList, SkeletonFormCreateTask } from './components/plugins.ts'
 import { registerPlugin, setVueInstance } from './utils/plugins.ts'
 import TranslateKeys from './i18n/translateKeys.ts'
 import { createPinia } from 'pinia'
-export { MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask, TableRowsCounter, NavBarSkeleton, AlertLabelsWithError, FormSkeleton, SkeletonAreas, ListSkeleton, SkeletonTaskList, SkeletonFormCreateTask } from './components/index.ts'
+export { DraggableQTable, MyTable, AlertDialog, ConfirmDialog, TaskNavBar, ConfirmedTask, TableRowsCounter, NavBarSkeleton, AlertLabelsWithError, FormSkeleton, SkeletonAreas, ListSkeleton, SkeletonTaskList, SkeletonFormCreateTask } from './components/index.ts'
 
 export type { TranslateKeys }
 // import plugins from "./components/plugins";
@@ -21,6 +21,7 @@ const plugin: Plugin = {
   install(app: App) {
     console.log('[Quasar Components] Installing...')
     setVueInstance(app)
+    registerPlugin(app, DraggableQTable)
     registerPlugin(app, MyTable)
     registerPlugin(app, AlertDialog)
     registerPlugin(app, ConfirmDialog)

package/src/layouts/PdaLayout.vue

@@ -231,8 +231,8 @@ export default {
         type: 'string'
       }
       ],
-      rows: [],
-      rowsData: [
+      rows:[],
+      rowsData:      [
         {
           id: 1,
           name: 'Frozen Yogurt',
@@ -540,6 +540,314 @@ export default {
           sodium: 54,
           calcium: '12%',
           iron: '6%'
+        },
+                {
+          id: 22,
+          name: 'Frozen Yogurt',
+          booleanIcon: true,
+          available: true,
+          calories: 159,
+          fat: 6.0,
+          carbs: 24,
+          checked: false,
+          protein: 4.0,
+          sodium: 87,
+          calcium: '14%',
+          iron: '1%'
+        },
+        {
+          id: 23,
+          name: 'Ice cream sandwich',
+          booleanIcon: true,
+          available: false,
+          calories: 237,
+          fat: 9.0,
+          carbs: 37,
+          checked: false,
+          protein: 4.3,
+          sodium: 129,
+          calcium: '8%',
+          iron: '1%'
+        },
+        {
+          id: 24,
+          name: 'Eclair',
+          booleanIcon: true,
+          available: true,
+          calories: 262,
+          fat: 16.0,
+          carbs: 23,
+          checked: false,
+          protein: 6.0,
+          sodium: 337,
+          calcium: '6%',
+          iron: '7%'
+        },
+        {
+          id: 25,
+          name: 'Cupcake',
+          booleanIcon: false,
+          available: false,
+          calories: 305,
+          fat: 3.7,
+          carbs: 67,
+          checked: false,
+          protein: 4.3,
+          sodium: 413,
+          calcium: '3%',
+          iron: '8%'
+        },
+        {
+          id: 26,
+          name: 'Gingerbread',
+          booleanIcon: true,
+          available: true,
+          calories: 356,
+          fat: 16.0,
+          carbs: 49,
+          checked: false,
+          protein: 3.9,
+          sodium: 327,
+          calcium: '7%',
+          iron: '16%'
+        },
+        {
+          id: 27,
+          name: 'Jelly bean',
+          booleanIcon: false,
+          available: false,
+          calories: 375,
+          fat: 0.0,
+          carbs: 94,
+          checked: true,
+          protein: 0.0,
+          sodium: 50,
+          calcium: '0%',
+          iron: '0%'
+        },
+        {
+          id: 28,
+          name: 'Lollipop',
+          booleanIcon: true,
+          available: true,
+          calories: 392,
+          fat: 0.2,
+          carbs: 98,
+          checked: false,
+          protein: 0,
+          sodium: 38,
+          calcium: '0%',
+          iron: '2%'
+        },
+        {
+          id: 29,
+          name: 'Honeycomb',
+          booleanIcon: true,
+          available: false,
+          calories: 408,
+          fat: 3.2,
+          carbs: 87,
+          checked: true,
+          protein: 6.5,
+          sodium: 562,
+          calcium: '0%',
+          iron: '45%'
+        },
+        {
+          id: 30,
+          name: 'Donut',
+          booleanIcon: true,
+          available: true,
+          calories: 452,
+          fat: 25.0,
+          carbs: 51,
+          checked: false,
+          protein: 4.9,
+          sodium: 326,
+          calcium: '2%',
+          iron: '22%'
+        },
+        {
+          id: 31,
+          name: 'KitKat',
+          booleanIcon: false,
+          available: false,
+          calories: 518,
+          fat: 26.0,
+          carbs: 65,
+          checked: true,
+          protein: 7,
+          sodium: 54,
+          calcium: '12%',
+          iron: '6%'
+        },
+        {
+          id: 32,
+          name: 'Frozen Yogurt',
+          booleanIcon: true,
+          available: true,
+          calories: 159,
+          fat: 6.0,
+          carbs: 24,
+          checked: false,
+          protein: 4.0,
+          sodium: 87,
+          calcium: '14%',
+          iron: '1%'
+        },
+        {
+          id: 33,
+          name: 'Ice cream sandwich',
+          booleanIcon: true,
+          available: false,
+          calories: 237,
+          fat: 9.0,
+          carbs: 37,
+          checked: false,
+          protein: 4.3,
+          sodium: 129,
+          calcium: '8%',
+          iron: '1%'
+        },
+        {
+          id: 34,
+          name: 'Eclair',
+          booleanIcon: true,
+          available: true,
+          calories: 262,
+          fat: 16.0,
+          carbs: 23,
+          checked: false,
+          protein: 6.0,
+          sodium: 337,
+          calcium: '6%',
+          iron: '7%'
+        },
+        {
+          id: 35,
+          name: 'Cupcake',
+          booleanIcon: false,
+          available: false,
+          calories: 305,
+          fat: 3.7,
+          carbs: 67,
+          checked: false,
+          protein: 4.3,
+          sodium: 413,
+          calcium: '3%',
+          iron: '8%'
+        },
+        {
+          id: 36,
+          name: 'Gingerbread',
+          booleanIcon: true,
+          available: true,
+          calories: 356,
+          fat: 16.0,
+          carbs: 49,
+          checked: false,
+          protein: 3.9,
+          sodium: 327,
+          calcium: '7%',
+          iron: '16%'
+        },
+        {
+          id: 37,
+          name: 'Jelly bean',
+          booleanIcon: false,
+          available: false,
+          calories: 375,
+          fat: 0.0,
+          carbs: 94,
+          checked: true,
+          protein: 0.0,
+          sodium: 50,
+          calcium: '0%',
+          iron: '0%'
+        },
+        {
+          id: 38,
+          name: 'Lollipop',
+          booleanIcon: true,
+          available: true,
+          calories: 392,
+          fat: 0.2,
+          carbs: 98,
+          checked: false,
+          protein: 0,
+          sodium: 38,
+          calcium: '0%',
+          iron: '2%'
+        },
+        {
+          id: 39,
+          name: 'Honeycomb',
+          booleanIcon: true,
+          available: false,
+          calories: 408,
+          fat: 3.2,
+          carbs: 87,
+          checked: true,
+          protein: 6.5,
+          sodium: 562,
+          calcium: '0%',
+          iron: '45%'
+        },
+        {
+          id: 40,
+          name: 'Donut',
+          booleanIcon: true,
+          available: true,
+          calories: 452,
+          fat: 25.0,
+          carbs: 51,
+          checked: false,
+          protein: 4.9,
+          sodium: 326,
+          calcium: '2%',
+          iron: '22%'
+        },
+        {
+          id: 41,
+          name: 'KitKat',
+          booleanIcon: false,
+          available: false,
+          calories: 518,
+          fat: 26.0,
+          carbs: 65,
+          checked: true,
+          protein: 7,
+          sodium: 54,
+          calcium: '12%',
+          iron: '6%'
+        },
+        {
+          id: 42,
+          name: 'KitKat',
+          booleanIcon: false,
+          available: false,
+          calories: 518,
+          fat: 26.0,
+          carbs: 65,
+          checked: true,
+          protein: 7,
+          sodium: 54,
+          calcium: '12%',
+          iron: '6%'
+        },
+        {
+          id: 43,
+          name: 'KitKat',
+          booleanIcon: false,
+          available: false,
+          calories: 518,
+          fat: 26.0,
+          carbs: 65,
+          checked: true,
+          protein: 7,
+          sodium: 54,
+          calcium: '12%',
+          iron: '6%'
         }
       ],
       showSkeleton: false,
@@ -555,7 +863,7 @@ export default {
     '$q.screen.width' (): void {
       setTimeout(() => {
         this.tableStyle = setTableHeight.setTableHeight()
-        this.$refs.table.handleInfiniteScrollTableCompositionAPi()
+        // this.$refs.table.handleInfiniteScrollTableCompositionAPi()
         // infiniteScroll.handleInfiniteScrollNewTable(this)
       }, 500)
     },
@@ -563,7 +871,7 @@ export default {
       if (!val) {
         setTimeout(() => {
           this.tableStyle = setTableHeight.setTableHeight()
-          this.$refs.table.handleInfiniteScrollTableCompositionAPi()
+          // this.$refs.table.handleInfiniteScrollTableCompositionAPi()
           // infiniteScroll.handleInfiniteScrollNewTable(this)
         }, 500)
       }
@@ -577,13 +885,15 @@ export default {
   },
   methods: {
     getRows () {
+      this.rows = this.rowsData     
       setTimeout(()=> {
- 
-      this.rows = this.rowsData
+
+
       this.$nextTick(() =>{
-        this.$refs.table.enableDragAndDrop = true
-     this.showSkeleton = false
+         this.$refs.table.enableDragAndDrop = true
+
       })
+           this.showSkeleton = false
     }, 1000)
     },
     onUpdateBasicCheckboxValue (rows: object []) {