quasar-factory-lib 0.1.0 → 0.1.2

package/package.json

@@ -98,6 +98,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "author": ""
 }

package/src/components/Table/Table.vue

@@ -308,7 +308,7 @@ export default defineComponent({
         this.dragAndDropDelay = 0
       }
     },
-    showSkeleton (val: boolean): void {
+    /* showSkeleton (val: boolean): void {
       if (!val) {
         this.handleInfiniteScrollTableCompositionAPi()
       }
@@ -317,7 +317,7 @@ export default defineComponent({
       setTimeout(() => {
         this.handleInfiniteScrollTableCompositionAPi()
       }, 500)
-    }
+    } */
   },
   mounted () {
     this.getAdvancedFilterColumns()
@@ -527,6 +527,7 @@ export default defineComponent({
         }, {} as { [key: string]: string })
     },
     handleInfiniteScrollTableCompositionAPi () {
+      const offSet = this.showAdvancedFilter   && 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'
@@ -535,7 +536,7 @@ export default defineComponent({
           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) {
+          if (Math.abs(scrollHeight - clientHeight - scrollTop - offSet) < 1) {
             console.log(`[${tableType}] You are at the bottom!`, this.totalPage)
             this.totalPage++
           }

package/src/components/Table/utils/infiniteScroll.ts

@@ -31,6 +31,7 @@ const infiniteScroll = {
         console.log(totalPage, 'totalPage')
         const { scrollHeight, scrollTop, clientHeight } = event.target as HTMLElement
         if (Math.abs(scrollHeight - clientHeight - scrollTop) < 1) {
+          debugger
           console.log(`[${tableType}] You are at the bottom!`, totalPage)
           totalPage++
         }

package/src/layouts/PdaLayout.vue

@@ -555,6 +555,7 @@ export default {
     '$q.screen.width' (): void {
       setTimeout(() => {
         this.tableStyle = setTableHeight.setTableHeight()
+        this.$refs.table.handleInfiniteScrollTableCompositionAPi()
         // infiniteScroll.handleInfiniteScrollNewTable(this)
       }, 500)
     },
@@ -562,6 +563,7 @@ export default {
       if (!val) {
         setTimeout(() => {
           this.tableStyle = setTableHeight.setTableHeight()
+          this.$refs.table.handleInfiniteScrollTableCompositionAPi()
           // infiniteScroll.handleInfiniteScrollNewTable(this)
         }, 500)
       }
@@ -576,11 +578,11 @@ export default {
   methods: {
     getRows () {
       setTimeout(()=> {
-      this.showSkeleton = false
+ 
       this.rows = this.rowsData
       this.$nextTick(() =>{
         this.$refs.table.enableDragAndDrop = true
-
+     this.showSkeleton = false
       })
     }, 1000)
     },

package/src/layouts/PdaLayoutVueCompositionApi.vue

@@ -0,0 +1,639 @@
+<template>
+  <div>
+    <q-layout
+      view="hHh lpR fFf"
+    >
+      <q-header
+        v-if="!showSkeleton"
+        class="bg-light-peach text-black"
+      >
+        <div class="header-container text-black">
+          <TaskNavBar
+            :logo="'src/assets/vue1.svg'"
+            :title="'Pda'"
+            :show-btn-back="false"
+            :show-btn-search="true"
+            @onClickBtnMenu="onClickBtnMenu"
+            @on-click-btn-search="toggleSearchVisibility"
+            @on-click-btn-menu="toogleColumnsSelectorVisibility">
+          </TaskNavBar>
+          <TableRowsCounter :counterJson="[
+            { qty: rows.length, title: 'Total',  dataCy: 'total', extraClasses: 'class'}
+          ]"/>
+        </div>
+      </q-header>
+      <NavBarSkeleton
+        v-if="showSkeleton"
+        :small-device="smallDevice"
+      />
+      <!--<AlertLabelsWithError
+        ref="AlertLabelsWithError"
+        @retry-read-label-axios="retryReadLabel"
+        @on-close-dialog-labels-error="onCloseDialogLabelsError"
+      />
+      -->
+      <q-page-container>
+        <q-page>
+        <Table
+          ref="tableRef"
+          :rows="rows"
+          :columns="columns"
+          :visible-columns="tableStoreObj.visiblecolumns"
+          :small-device="smallDevice"
+          :store="tableStoreObj"
+          :table-style="tableStyle"
+          :selectionType="'multiple'"
+          :show-skeleton="showSkeleton"
+          @on-select-visible-columns="(columns) => {
+            tableStoreObj.visiblecolumns = columns
+          }"
+          :show-icon-advanced-filter="true"
+          @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
+          @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
+          @on-click-button="setItemNotFound"
+          @on-drag-start="(args) => {
+            console.log(args, 'start')
+          }"
+          @on-drag-update="(args) => {
+            console.log(args, 'update')
+           }"
+          @on-drag-end="(args) => {
+            console.log(args, 'end')
+          }"
+        />
+          <!--<q-page-sticky
+            v-if="smallDevice"
+            position="bottom"
+            expand
+          >
+            <q-btn
+            class="full-width"
+            color="black"
+            square/>
+          </q-page-sticky>-->
+        </q-page>
+      </q-page-container>
+  </q-layout>
+  </div>
+</template>
+<style>
+</style>
+<script setup lang="ts">
+import { useQuasar } from 'quasar'
+import TaskNavBar from '../components/TaskNavBar/TaskNavBar.vue'
+import Table from '../components/Table/Table.vue'
+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'
+import { ref, computed, onMounted, watch } from 'vue'
+
+  interface TableInterface {
+    toggleSearchVisibility: (obj: object)=> void
+    filterInputFocus: () => void
+    toogleColumnsSelectorVisibility: () => void
+    clearTableSelection: () => void
+    handleInfiniteScrollTableCompositionAPi: () => void
+    toogleLoading: (val: boolean) => void
+    selected: object[] | []
+    forceRender: boolean
+    enableDragAndDrop: boolean
+    totalPage: number
+  }
+  
+    const q = useQuasar()
+    const tableStoreObj = tableStore()
+    const tabletMaxWidth = ref<number> (1100)
+    const tableStyle = ref<string>('')
+    const 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)',
+    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: 'booleanIcon',
+    required: true,
+    label: 'Boolean Icon',
+    align: 'left',
+    sortable: true,
+    showCustomizedIcon: true,
+    type: 'boolean'
+    },
+    {
+    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: 'fat',
+    label: 'Fat (g)',
+    field: 'fat',
+    sortable: true,
+    showCustomizedButton: true,
+    btnIcon: 'save',
+    btnEmit: 'onClickButton',
+    dataCy: 'onClickButton',
+    btnColor: 'primary',
+    type: 'number'
+    },
+    {
+    name: 'carbs',
+    label: 'Carbs (g)',
+    field: 'carbs',
+    editable: true,
+    popupEditEmit: 'onSaveValuePopupEdit',
+    popupEditDataCy: '',
+    inputMaxLength: 200,
+    popupEditInputtype: 'textarea',
+    type: 'string'
+    },
+    {
+    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: 'protein',
+    label: 'Protein (g)',
+    field: 'protein',
+    sortable: true,
+    required: true,
+    editable: true,
+    showEditIcon: true,
+    popupEditEmit: 'onSaveValuePopupEdit',
+    popupEditInputtype: 'text',
+    popupEditDataCy: '',
+    showInputPopupEdit: true,
+    type: 'string'
+    },
+    {
+    name: 'sodium',
+    label: 'Sodium (mg)',
+    field: 'sodium',
+    type: 'string'
+    },
+    {
+    name: 'calcium',
+    label: 'Calcium (%)',
+    field: 'calcium',
+    sortable: true,
+    type: 'string'
+    },
+    {
+    name: 'iron',
+    label: 'Iron (%)',
+    field: 'iron',
+    sortable: true,
+    type: 'string'
+    }
+    ]
+    const rows = ref<object [] | []>([])
+    const rowsData = ref<object [] | []>([])
+    rowsData.value = [
+    {
+        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%'
+    }
+    ]
+    const showSkeleton = ref<boolean>(false)
+  const tableRef = ref<TableInterface | null>(null)
+    const smallDevice = computed(() => {
+    return q.screen.width <= tabletMaxWidth.value
+    })
+    watch(() => '$q.screen.width', () => {
+        setTimeout(() => {
+        tableStyle.value = setTableHeight.setTableHeight()
+        }, 500)
+    })
+
+    watch(() => showSkeleton.value, (val) => {
+    if (!val) {
+            if (!val) {
+            setTimeout(() => {
+            tableStyle.value = setTableHeight.setTableHeight()
+            tableRef.value?.handleInfiniteScrollTableCompositionAPi()
+            }, 500)
+        }
+    }
+    })
+    onMounted(() => {
+        getRows()
+    })
+
+   function getRows () {
+    showSkeleton.value = true
+    rows.value = rowsData.value
+      setTimeout(()=> {
+        showSkeleton.value = false
+  
+      }, 1000)
+    }
+    function onUpdateBasicCheckboxValue (rows: object []) {
+      console.log(rows, 'onUpdateBasicCheckboxValue')
+    }
+    function onUpdateCustomizedCheckboxValue (rows: object []) {
+      console.log(rows, 'onUpdateCustomizedCheckboxValue')
+    }
+    function setItemNotFound (rows: object []) {
+      console.log(rows, 'onClickButton')
+    }
+    function toggleSearchVisibility () {
+      // tableRef.value?.toggleSearchVisibility(this.store)
+      // tableRef.value?.filterInputFocus()
+    }
+    function toggleRightDrawer (): void {
+      // this.$refs.sideBar.toggleRightDrawer()
+    }
+    function toogleColumnsSelectorVisibility () {
+      // this.$refs.sideBar.setRightDrawerOpenToFalse()
+      // tableRef.value?.toogleColumnsSelectorVisibility()
+    }
+    function onClickBtnMenu () {
+      // this.toggleRightDrawer()
+    }
+    function retryReadLabel () {
+      console.log('retryReadLabel')
+    }
+    function onCloseDialogLabelsError () {
+      console.log('onCloseDialogLabelsError')
+    }
+    /* function getAlertLabelsWithError () {
+      this.$refs.AlertLabelsWithError.alert = true
+      this.$refs.AlertLabelsWithError.labelsErrors.push({
+        label: '558877',
+        error: 'The Bin does not exist. Identification fields and values',
+        icon: 'cancel',
+        spinner: false
+      },
+      {
+        label: '558871',
+        error: 'The Bin does not exist. Identification fields and values',
+        icon: 'cancel',
+        spinner: false
+      })
+    } */
+</script>
+<style scoped>
+.header-container {
+  padding: 20px 20px 5px 20px;
+}
+.q-toolbar {
+    min-height: unset !important;
+    padding: 0 !important;
+}
+</style>