quasar-factory-lib 0.1.18 → 0.1.20

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

@@ -84,7 +84,6 @@ import NavBarSkeleton from '../components/NavBarSkeleton/NavBarSkeleton.vue'
 import TableRowsCounter from'../components/TableRowsCounter/TableRowsCounter.vue'
 import AlertLabelsWithError from '../components/AlertLabelsWithError/AlertLabelsWithError.vue'
 import setTableHeight from '../components/Table/utils/setTableHeight'
-// import infiniteScroll from '../components/Table/utils/infiniteScroll'
 import { tableStore } from '../store/table.js'
 export default {
   components: {
@@ -101,449 +100,134 @@ export default {
       store: tableStore(),
       tableStyle: '',
       columns: [
+        {
+          name: 'id',
+          label: '#',
+          field: 'id',
+          required: true
+        },
+        {
+          name: 'name',
+          required: true,
+          label: 'Dessert (100g serving)',
+          align: 'left',
+          field: row => row.name,
+          format: val => `${val}`,
+          sortable: true
+        },
+        { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
+        { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
+        { name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
+        { name: 'protein', label: 'Protein (g)', field: 'protein' },
+        { name: 'sodium', label: 'Sodium (mg)', field: 'sodium' },
+        { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
+        { name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }
+      ],
+      rows: [],
+      showSkeleton: false,
+      buttonsList: [],
+      seed: [
       {
-        name: 'drag-and-drop',
-        required: true,
-        label: 'Drag and drop',
-        align: 'left',
-        sortable: true,
-        type: 'string',
-      },
-      {
-        name: 'name',
-        required: true,
-        label: 'Dessert (100g serving)',
-        align: 'left',
-        sortable: true,
-        type: 'string',
-      },
-      {
-        name: 'date',
-        required: true,
-        label: 'Fecha',
-        align: 'left',
-        sortable: true,
-        type: 'date'
-      },
-      {
-        name: 'available',
-        required: true,
-        label: 'Available',
-        align: 'left',
-        sortable: true,
-        showBasicCheckbox: true,
-        type: 'boolean',
-        checkBoxDataCy: 'checkbox'
+        name: 'Frozen Yogurt',
+        calories: 159,
+        fat: 6.0,
+        carbs: 24,
+        protein: 4.0,
+        sodium: 87,
+        calcium: '14%',
+        iron: '1%'
       },
       {
-        name: 'booleanIcon',
-        required: true,
-        label: 'Boolean Icon',
-        align: 'left',
-        sortable: true,
-        showCustomizedIcon: true,
-        type: 'boolean'
+        name: 'Ice cream sandwich',
+        calories: 237,
+        fat: 9.0,
+        carbs: 37,
+        protein: 4.3,
+        sodium: 129,
+        calcium: '8%',
+        iron: '1%'
       },
       {
-        name: 'calories',
-        align: 'center',
-        label: 'Calories',
-        field: 'calories',
-        sortable: true,
-        editable: true,
-        showEditIcon: true,
-        popupEditEmit: 'onSaveValuePopupEdit',
-        popupEditDataCy: '',
-        mask: '#####',
-        showSelectNumberOptions: false,
-        popupEditInputtype: 'number',
-        type: 'number'
+        name: 'Eclair',
+        calories: 262,
+        fat: 16.0,
+        carbs: 23,
+        protein: 6.0,
+        sodium: 337,
+        calcium: '6%',
+        iron: '7%'
       },
       {
-        name: 'fat',
-        label: 'Fat (g)',
-        field: 'fat',
-        sortable: true,
-        showCustomizedButton: true,
-        btnIcon: 'save',
-        btnEmit: 'onClickButton',
-        dataCy: 'onClickButton',
-        btnColor: 'primary',
-        type: 'number'
+        name: 'Cupcake',
+        calories: 305,
+        fat: 3.7,
+        carbs: 67,
+        protein: 4.3,
+        sodium: 413,
+        calcium: '3%',
+        iron: '8%'
       },
       {
-        name: 'carbs',
-        label: 'Carbs (g)',
-        field: 'carbs',
-        editable: true,
-        popupEditEmit: 'onSaveValuePopupEdit',
-        popupEditDataCy: '',
-        inputMaxLength: 200,
-        popupEditInputtype: 'textarea',
-        type: 'string'
+        name: 'Gingerbread',
+        calories: 356,
+        fat: 16.0,
+        carbs: 49,
+        protein: 3.9,
+        sodium: 327,
+        calcium: '7%',
+        iron: '16%'
       },
       {
-        name: 'checked',
-        label: 'Checked',
-        field: 'carbs',
-        sortable: true,
-        required: true,
-        showCustomizedCheckBox: true,
-        checkedIcon: 'check_circle',
-        uncheckedIcon: 'cancel',
-        checkBoxColorCaseTrue: 'positive',
-        checkBoxColorCaseFalse: 'negative',
-        checkBoxDataCy: '',
-        type: 'boolean'
+        name: 'Jelly bean',
+        calories: 375,
+        fat: 0.0,
+        carbs: 94,
+        protein: 0.0,
+        sodium: 50,
+        calcium: '0%',
+        iron: '0%'
       },
       {
-        name: 'protein',
-        label: 'Protein (g)',
-        field: 'protein',
-        sortable: true,
-        required: true,
-        editable: true,
-        showEditIcon: true,
-        popupEditEmit: 'onSaveValuePopupEdit',
-        popupEditInputtype: 'text',
-        popupEditDataCy: '',
-        showInputPopupEdit: true,
-        type: 'string'
+        name: 'Lollipop',
+        calories: 392,
+        fat: 0.2,
+        carbs: 98,
+        protein: 0,
+        sodium: 38,
+        calcium: '0%',
+        iron: '2%'
       },
       {
-        name: 'sodium',
-        label: 'Sodium (mg)',
-        field: 'sodium',
-        type: 'string'
+        name: 'Honeycomb',
+        calories: 408,
+        fat: 3.2,
+        carbs: 87,
+        protein: 6.5,
+        sodium: 562,
+        calcium: '0%',
+        iron: '45%'
       },
       {
-        name: 'calcium',
-        label: 'Calcium (%)',
-        field: 'calcium',
-        sortable: true,
-        type: 'string'
+        name: 'Donut',
+        calories: 452,
+        fat: 25.0,
+        carbs: 51,
+        protein: 4.9,
+        sodium: 326,
+        calcium: '2%',
+        iron: '22%'
       },
       {
-        name: 'iron',
-        label: 'Iron (%)',
-        field: 'iron',
-        sortable: true,
-        type: 'string'
+        name: 'KitKat',
+        calories: 518,
+        fat: 26.0,
+        carbs: 65,
+        protein: 7,
+        sodium: 54,
+        calcium: '12%',
+        iron: '6%'
       }
-      ],
-      rows: [],
-      rowsData: [
-        {
-          id: 1,
-          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: 2,
-          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: 3,
-          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: 4,
-          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: 5,
-          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: 5,
-          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: 6,
-          name: 'Lollipop',
-          booleanIcon: true,
-          available: true,
-          calories: 392,
-          fat: 0.2,
-          carbs: 98,
-          checked: false,
-          protein: 0,
-          sodium: 38,
-          calcium: '0%',
-          iron: '2%'
-        },
-        {
-          id: 7,
-          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: 8,
-          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: 9,
-          name: 'KitKat',
-          booleanIcon: false,
-          available: false,
-          calories: 518,
-          fat: 26.0,
-          carbs: 65,
-          checked: true,
-          protein: 7,
-          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,
-      buttonsList: []
+      ]
     }
   },
   computed: {
@@ -551,25 +235,16 @@ export default {
       return this.$q.screen.width <= this.tabletMaxWidth
     }
   },
-  watch: {
+ watch: {
     '$q.screen.width' (): void {
       setTimeout(() => {
         this.tableStyle = setTableHeight.setTableHeight()
-        this.$refs.table.handleInfiniteScrollTableCompositionAPi()
-        // infiniteScroll.handleInfiniteScrollNewTable(this)
+
       }, 500)
-    },
-    showSkeleton (val: boolean) {
-      if (!val) {
-        setTimeout(() => {
-          this.tableStyle = setTableHeight.setTableHeight()
-          this.$refs.table.handleInfiniteScrollTableCompositionAPi()
-          // infiniteScroll.handleInfiniteScrollNewTable(this)
-        }, 500)
-      }
     }
   },
   mounted () {
+    this.tableStyle = setTableHeight.setTableHeight()
     this.showSkeleton = true
     this.store.cleanTableFilter()
     this.getRows()
@@ -577,13 +252,9 @@ export default {
   },
   methods: {
     getRows () {
+      this.rows = this.generateRows()
       setTimeout(()=> {
- 
-      this.rows = this.rowsData
-      this.$nextTick(() =>{
-        this.$refs.table.enableDragAndDrop = true
      this.showSkeleton = false
-      })
     }, 1000)
     },
     onUpdateBasicCheckboxValue (rows: object []) {
@@ -629,6 +300,16 @@ export default {
         icon: 'cancel',
         spinner: false
       })
+    }, 
+    generateRows () {
+      let generatedRows = [] as object[]
+      for (let i = 0; i < 200; i++) {
+        generatedRows = generatedRows.concat(this.seed.slice(0).map(r => ({ ...r })))
+      }
+      generatedRows.forEach((row, id) => {
+        row.id = id
+      })
+      return generatedRows
     }
   }
 }