quasar-factory-lib 0.0.87 → 0.0.88

package/package.json

@@ -5,6 +5,7 @@
     "pinia": "^3.0.1",
     "quasar": "^2.18.0",
     "vue": "^3.5.11",
+    "vue-draggable-plus": "^0.6.0",
     "vue-i18n": "^10.0.4"
   },
   "description": "Quasar Library",
@@ -97,6 +98,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.87",
+  "version": "0.0.88",
   "author": ""
 }

package/src/components/Table/Table.vue

@@ -1,7 +1,4 @@
 <template lang="">
-  <!-- eslint-disable-file vue/no-v-model-argument -->
-  <!-- eslint-disable vue/no-v-model-argument -->
-  <!-- eslint-disable vue/no-use-v-if-with-v-for -->
   <div>
     <q-table
       v-if="!showSkeleton"
@@ -128,6 +125,7 @@ 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: {
@@ -232,7 +230,8 @@ export default defineComponent({
     'onUpdateSelected',
     'setLineRemainingQty',
     'setLineNoStock',
-    'onDoneLineMaintenanceTasks'
+    'onDoneLineMaintenanceTasks',
+    'reprintSULabel'
   ],
   data () {
     return {
@@ -249,7 +248,12 @@ export default defineComponent({
       pageSize: 20,
       filteredRows: [] as object [] | [],
       showAdvancedFilter: false,
-      advancedFiltersData: {}
+      advancedFiltersData: {},
+      tableRef: null,
+      draggableInstance: null,
+      disabled: false,
+      enableDragAndDrop: false,
+      dragAndDropDelay: 0
     }
   },
   computed: {
@@ -260,7 +264,6 @@ export default defineComponent({
       return !this.smallDevice || this.showSearch
     },
     showGridHeader () {
-      // return this.selectionType === 'multiple'
       return this.selectionType === 'multiple' || this.showAdvancedFilter 
     },
     getTableSkeletonVisibility () {
@@ -284,16 +287,56 @@ export default defineComponent({
     rows (val) {
       this.rowsData = val
     },
-    showAdvancedFilter (val: boolean) {
+    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
+      }
     }
   },
   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.tableRef) {
+        this.draggableInstance = useDraggable(this.tableRef, this.rows, {
+            animation: 100,
+            delay: self.dragAndDropDelay,
+  
+            onStart () {
+                console.log('start')
+            },
+            onUpdate (e) {
+              console.log(e, 'onUpdate')
+                const {oldIndex, newIndex} = e
+                console.log(oldIndex, newIndex, self.rows)
+                self.rowsData = [...self.rows]
+            },
+            onEnd(e) {
+              console.log(e, 'end drag')
+            }
+        })
+    }
+    },
     getSelectedString (val: number): string {
       const rowsSelectedLength = val
       if (rowsSelectedLength === 0) {

package/src/components/Table/components/CustomizedBadge.vue

@@ -1,6 +1,6 @@
 <template>
   <q-badge
-    class="cursor-pointer"
+    class="cursor-pointer q-pt-sm q-pb-sm"
       :data-cy="'badge' + dataCy"
       :class="badgeColor"
       :text-color="badgeTextColor"

package/src/components/Table/components/TableColumnsSelector.vue

@@ -12,6 +12,7 @@
     option-value="name"
     options-cover
     class="columns-selector"
+    data-cy="columns-selector"
     options-selected-class="addicional-visible-columns"
     @update:model-value="onSelectVisibleColumns"
   >
@@ -19,6 +20,7 @@
       <q-item
         v-bind="scope.itemProps"
         :class="scope.opt.required ? 'required-table-columns' : ''"
+        :data-cy="'column-option-'+scope.opt.name"
       >
         <q-item-section>
           <q-item-label>{{ scope.opt.label }}</q-item-label>

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

@@ -10,6 +10,7 @@
       <q-checkbox
         v-model="tablePropsData.selected"
         size="sm"
+        :data-cy="'checkbox-' + tablePropsData.key"
       />
     </q-td>
     <q-td
@@ -59,7 +60,7 @@
       <BasicCheckBox
         v-if="col.showBasicCheckbox"
         :table-props="tablePropsData"
-        :data-cy="col.checkBoxDataCy + '-' + tablePropsData.row.id || ''"
+        :data-cy="col.checkBoxDataCy + '-' + tablePropsData.row[col.name] +tablePropsData.row.id || ''"
         :model="tablePropsData.row[col.name]"
         @check-box-emit="(val: object) => {
           tablePropsData.row[col.name] = val

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

@@ -19,7 +19,7 @@
       <q-card-section class="q-py-sm">
         <q-checkbox
           :data-cy="'checkbox-' + tablePropsData.row.id"
-          size="sm"
+          size="md"
           v-if="selectionType != 'none'"
           v-model="tablePropsData.selected"
           dense

package/src/components/Table/components/TableSlotHeader.vue

@@ -8,8 +8,9 @@
       <q-checkbox
         v-if="selectionType == 'multiple'"
         v-model="tablePropsData.selected"
-        size="sm"
+        :size="smallDevice? 'md' : 'sm'"
         class="float-left"
+        data-cy="select-all-checkbox"
       />
     </q-th>
     <q-th
@@ -17,6 +18,7 @@
       v-if="!smallDevice"
       :key="col.name"
       :props="tablePropsData"
+      :data-cy="col.name"
     >
       {{ col.label }}
     </q-th>

package/src/components/Table/css/table.css

@@ -92,5 +92,8 @@
   }
   .my-table .q-table__top {
     padding: 0 4px;
+  } 
+  .my-table tr:first-child th:first-child {
+    padding-left: 8px !important;
   }
 }

package/src/components/Table/css/tableSlotHeader.css

@@ -7,4 +7,7 @@
   .table-header .my-table .q-checkbox{
     float: left;
   }
+  [data-cy="advanced-filters-button"]  {
+    padding-left: 6px;
+  }
 }

package/src/layouts/PdaLayout.vue

@@ -18,7 +18,7 @@
             @on-click-btn-menu="toogleColumnsSelectorVisibility">
           </TaskNavBar>
           <TableRowsCounter :counterJson="[
-            { qty: 1, title: 'Total',  dataCy: 'datacy', extraClasses: 'class'}
+            { qty: rows.length, title: 'Total',  dataCy: 'total', extraClasses: 'class'}
           ]"/>
         </div>
       </q-header>
@@ -41,6 +41,7 @@
           :small-device="smallDevice"
           :store="store"
           :table-style="tableStyle"
+          :selectionType="'multiple'"
           :show-skeleton="showSkeleton"
           @on-select-visible-columns="(columns) => {
             store.visiblecolumns = columns
@@ -55,7 +56,10 @@
             position="bottom"
             expand
           >
-            <q-btn class="full-width" color="accent" icon="arrow_forward" />
+            <q-btn
+            class="full-width"
+            color="black"
+            square/>
           </q-page-sticky>
         </q-page>
       </q-page-container>
@@ -87,7 +91,16 @@ export default {
       tabletMaxWidth: 1100,
       store: tableStore(),
       tableStyle: '',
-      columns: [{
+      columns: [
+      {
+        name: 'drag-and-drop',
+        required: true,
+        label: 'Drag and drop',
+        align: 'left',
+        sortable: true,
+        type: 'string',
+      },
+      {
         name: 'name',
         required: true,
         label: 'Dessert (100g serving)',
@@ -110,7 +123,8 @@ export default {
         align: 'left',
         sortable: true,
         showBasicCheckbox: true,
-        type: 'boolean'
+        type: 'boolean',
+        checkBoxDataCy: 'checkbox'
       },
       {
         name: 'booleanIcon',
@@ -349,6 +363,174 @@ export default {
           sodium: 54,
           calcium: '12%',
           iron: '6%'
+        },
+        {
+          id: 10,
+          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: 11,
+          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: 12,
+          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: 13,
+          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: 14,
+          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: 15,
+          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: 16,
+          name: 'Lollipop',
+          booleanIcon: true,
+          available: true,
+          calories: 392,
+          fat: 0.2,
+          carbs: 98,
+          checked: false,
+          protein: 0,
+          sodium: 38,
+          calcium: '0%',
+          iron: '2%'
+        },
+        {
+          id: 17,
+          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: 18,
+          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: 19,
+          name: 'KitKat',
+          booleanIcon: false,
+          available: false,
+          calories: 518,
+          fat: 26.0,
+          carbs: 65,
+          checked: true,
+          protein: 7,
+          sodium: 54,
+          calcium: '12%',
+          iron: '6%'
+        },
+        {
+          id: 20,
+          name: 'KitKat',
+          booleanIcon: false,
+          available: false,
+          calories: 518,
+          fat: 26.0,
+          carbs: 65,
+          checked: true,
+          protein: 7,
+          sodium: 54,
+          calcium: '12%',
+          iron: '6%'
+        },
+        {
+          id: 21,
+          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,
@@ -387,6 +569,9 @@ export default {
       setTimeout(()=> {
       this.showSkeleton = false
       this.rows = this.rowsData
+      this.$nextTick(() =>{
+        this.$refs.table.enableDragAndDrop = true
+      })
     }, 1000)
     },
     onUpdateBasicCheckboxValue (rows: object []) {