quasar-factory-lib 0.0.38 → 0.0.39

package/package.json

@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "author": ""
 }

package/src/components/Table/Table.vue

@@ -70,6 +70,7 @@
       </template>
       <template #item="props">
         <TableSlotGrid
+          v-if="!showSkeleton"
           :table-props="props"
           :selection-type="selectionType"
           :popup-edit-number-options="popupEditNumberOptions"
@@ -223,6 +224,9 @@ export default defineComponent({
   watch: {
     rows (val) {
       this.rowsData = val
+    },
+    visibleColumns (val: string [] | []) {
+      this.visibleColumnsData = val
     }
   },
   mounted () {

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

@@ -1,10 +1,10 @@
 <template>
   <tr
-    :class="tableProps.row.rowBgColor || 'bg-main-color'"
+    :class="tablePropsData.row.rowBgColor || 'bg-main-color'"
   >
     <q-td
       v-if="selectionType != 'none'"
-      :id="tableProps.row.id"
+      :id="tablePropsData.row.id"
       auto-width
     >
       <q-checkbox
@@ -13,15 +13,15 @@
       />
     </q-td>
     <q-td
-      v-for="col in tableProps.cols"
+      v-for="col in tablePropsData.cols"
       :key="col.name"
-      :class="tableProps.row.rowBgColor || 'bg-main-color'"
-      :props="tableProps"
+      :class="tablePropsData.row.rowBgColor || 'bg-main-color'"
+      :props="tablePropsData"
     >
       <span
         :style="tablePropsData.row.tdStyle"
         v-if="getColumnValue(col)"
-        v-html="tableProps.row[col.name]"
+        v-html="tablePropsData.row[col.name]"
       />
       <!-- fa-solid fa-pen-to-square -->
       <q-icon
@@ -35,7 +35,7 @@
         v-if="col.editable"
         :model="tablePropsData.row[col.name] || ''"
         :label="col.label"
-        :data-cy="col.popupEditDataCy + '-' + tableProps.row.id"
+        :data-cy="col.popupEditDataCy + '-' + tablePropsData.row.id"
         :input-max-length="col.inputMaxLength || 20"
         :mask="col.popupEditMask || ''"
         :input-type="col.popupEditInputtype || 'text'"
@@ -50,7 +50,7 @@
       <BasicCheckBox
         v-if="col.showBasicCheckbox"
         :table-props="tablePropsData"
-        :data-cy="col.checkBoxDataCy + '-' + tableProps.row.id || ''"
+        :data-cy="col.checkBoxDataCy + '-' + tablePropsData.row.id || ''"
         :model="tablePropsData.row[col.name]"
         @check-box-emit="(val: object) => {
           tablePropsData.row[col.name] = val
@@ -60,7 +60,7 @@
       <CustomizedCheckBox
         v-if="col.showCustomizedCheckBox"
         :table-props="tablePropsData"
-        :data-cy="col.checkBoxDataCy + '-' + tableProps.row.id || ''"
+        :data-cy="col.checkBoxDataCy + '-' + tablePropsData.row.id || ''"
         :model="tablePropsData.row[col.name]"
         :check-box-color="tablePropsData.row[col.name] ? col.checkBoxColorCaseTrue : col.checkBoxColorCaseFalse"
         :check-box-icon-size="'md'"
@@ -81,11 +81,11 @@
 
       <CustomizedButton
         v-if="col.showCustomizedButton"
-        :data-cy="col.colButtonDataCy + '-' + tableProps.row.id"
+        :data-cy="col.colButtonDataCy + '-' + tablePropsData.row.id"
         :btn-color="col.btnColor || 'primary'"
         :btn-icon="col.btnIcon|| ''"
         @on-click-button="() => {
-          $emit('onClickButton', col.btnEmit, tableProps.row)
+          $emit('onClickButton', col.btnEmit, tablePropsData.row)
         }"
       />
     </q-td>
@@ -116,6 +116,11 @@ export default {
       default: 'none'
     }
   },
+  watch: {
+    tableProps (val) {
+      this.tablePropsData = val
+    }
+  },
   emits: ['onSaveValuePopupEdit', 'onUpdateBasicCheckboxValue', 'onClickButton', 'onUpdateCustomizedCheckboxValue'],
   data () {
     return {

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

@@ -12,7 +12,7 @@
           ? $q.dark.isActive
             ? 'bg-grey-9'
             : 'bg-grey-2'
-          : tableProps.row.rowBgColor || 'bg-main-color'
+          : tablePropsData.row.rowBgColor || 'bg-main-color'
       "
     >
       <q-card-section>
@@ -43,16 +43,16 @@
             >
               <q-icon
                 v-if="col.editable"
-                name="fa-solid fa-pen-to-square"
+                name="edit"
                 color="primary"
                 size="sm"
                 class="cursor-pointer"
               />
-              <span v-html="tableProps.row[col.name]" />
+              <span v-html="tablePropsData.row[col.name]" />
               <TablePopupEdit
                 :model="tablePropsData.row[col.name] || ''"
                 :label="col.label"
-                :data-cy="col.popupEditDataCy + '-' + tableProps.row.id"
+                :data-cy="col.popupEditDataCy + '-' + tablePropsData.row.id"
                 :input-max-length="col.inputMaxLength || 20"
                 :mask="col.popupEditMask || ''"
                 :input-type="col.popupEditInputtype || 'text'"
@@ -69,7 +69,7 @@
               <BasicCheckBox
                 v-if="col.showBasicCheckbox"
                 :table-props="tablePropsData"
-                :data-cy="col.checkBoxDataCy + '-' + tableProps.row.id || ''"
+                :data-cy="col.checkBoxDataCy + '-' + tablePropsData.row.id || ''"
                 :model="tablePropsData.row[col.name]"
                 @check-box-emit="(val: object) => {
                   tablePropsData.row[col.name] = val
@@ -79,7 +79,7 @@
               <CustomizedCheckBox
                 v-if="col.showCustomizedCheckBox"
                 :table-props="tablePropsData"
-                :data-cy="col.checkBoxDataCy + '-' + tableProps.row.id || ''"
+                :data-cy="col.checkBoxDataCy + '-' + tablePropsData.row.id || ''"
                 :model="tablePropsData.row[col.name]"
                 :check-box-color="tablePropsData.row[col.name] ? col.checkBoxColorCaseTrue : col.checkBoxColorCaseFalse"
                 :check-box-icon-size="'lg'"
@@ -106,11 +106,11 @@
             <q-item-section>
               <CustomizedButton
                 v-if="col.showCustomizedButton"
-                :data-cy="col.colButtonDataCy + '-' + tableProps.row.id"
+                :data-cy="col.colButtonDataCy + '-' + tablePropsData.row.id"
                 :btn-color="col.btnColor || 'primary'"
                 :btn-icon="col.btnIcon|| ''"
                 @on-click-button="() => {
-                  $emit('onClickButton', col.btnEmit, tableProps.row)
+                  $emit('onClickButton', col.btnEmit, tablePropsData.row)
                 }"
               />
             </q-item-section>
@@ -162,8 +162,8 @@ export default {
     }
   },
   watch: {
-    gridRowsSelected (val: boolean) {
-      this.selected = val
+    tableProps (val) {
+      this.tablePropsData = val
     }
   },
   mounted () {},

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

@@ -13,10 +13,10 @@
       />
     </q-th>
     <q-th
-      v-for="col in tableProps.cols"
+      v-for="col in tablePropsData.cols"
       v-if="!smallDevice"
       :key="col.name"
-      :props="tableProps"
+      :props="tablePropsData"
     >
       {{ col.label }}
     </q-th>
@@ -46,6 +46,11 @@ export default {
       showSearch: false
     }
   },
+  watch: {
+    tableProps (val) {
+      this.tablePropsData = val
+    }
+  },
   methods: {
   }
 }

package/src/css/app.css

@@ -28,6 +28,9 @@
 .bg-main-color {
   background-color: var(--main-color);
 }
+.bg-light-peach {
+  background-color: var(--light-peach);
+}
 .text-color-light-gray {
   color: var(--light-gray);
 }

package/src/layouts/MenuLayout.vue

@@ -24,6 +24,12 @@
         router.push('navBarPage')
       }"
     />
+    <q-btn
+      label="pda"
+      @click="() => {
+        router.push('pdaLayout')
+      }"
+    />
   </div>
 </template>
 <script setup lang="ts">

package/src/layouts/PdaLayout.vue

@@ -0,0 +1,364 @@
+<template>
+  <div>
+    <q-layout
+      view="hHh lpR fFf"
+    >
+      <q-header
+        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"
+            @on-click-btn-search="toggleSearchVisibility"
+            @on-click-btn-menu="toogleColumnsSelectorVisibility">
+          </TaskNavBar>
+        </div>
+      </q-header>
+      <q-page-container class=" full-width column justify-center">
+        <q-page>
+        <Table
+          ref="table"
+          :rows="rows"
+          :columns="columns"
+          :visible-columns="visibleColumns"
+          :small-device="false"
+          :store="store"
+          :table-style="tableStyle"
+          :show-skeleton="false"
+          :selection-type="'multiple'"
+          :filter-method="filterMethod"
+          :filter-computed="filter"
+          @on-select-visible-columns="saveSelectedColumns"
+          @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
+          @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
+          @on-click-button="setItemNotFound"
+        />
+        </q-page>
+      </q-page-container>
+  </q-layout>
+  </div>
+</template>
+<style>
+</style>
+<script lang="ts">
+ import TaskNavBar from '../components/TaskNavBar/TaskNavBar.vue'
+ import Table from '../components/Table/Table.vue'
+import setTableHeight from '../components/Table/utils/setTableHeight'
+import infiniteScroll from '../components/Table/utils/infiniteScroll'
+import FilterMethod from '../components/Table/utils/filterMethod'
+import { tableStore } from '../store/table.js'
+export default {
+  components: {
+    TaskNavBar,
+    Table
+  },
+  data () {
+    return {
+      showDialog: false,
+      forceRender: false,
+      store: tableStore(),
+      totalPage: 0,
+      pageSize: 20,
+      tableStyle: '',
+      columns: [{
+        name: 'name',
+        required: true,
+        label: 'Dessert (100g serving)',
+        align: 'left',
+        sortable: true
+      },
+      {
+        name: 'available',
+        required: true,
+        label: 'Available',
+        align: 'left',
+        sortable: true,
+        showBasicCheckbox: true
+      },
+      {
+        name: 'booleanIcon',
+        required: true,
+        label: 'Boolean Icon',
+        align: 'left',
+        sortable: true,
+        showCustomizedIcon: true
+      },
+      {
+        name: 'calories',
+        align: 'center',
+        label: 'Calories',
+        field: 'calories',
+        sortable: true,
+        editable: true,
+        showEditIcon: true,
+        popupEditEmit: 'onSaveValuePopupEdit',
+        popupEditInputtype: 'number',
+        popupEditDataCy: '',
+        popupEditMask: '#####'
+      },
+      {
+        name: 'fat',
+        label: 'Fat (g)',
+        field: 'fat',
+        sortable: true,
+        showCustomizedButton: true,
+        btnIcon: 'save',
+        btnEmit: 'onClickButton',
+        dataCy: 'onClickButton',
+        btnColor: 'primary'
+      },
+      {
+        name: 'carbs',
+        label: 'Carbs (g)',
+        field: 'carbs'
+      },
+      {
+        name: 'checked',
+        label: 'Checked',
+        field: 'carbs',
+        sortable: true,
+        required: true,
+        showCustomizedCheckBox: true,
+        checkedIcon: 'check_circle',
+        uncheckedIcon: 'cancel',
+        checkBoxColorCaseTrue: 'positive',
+        checkBoxColorCaseFalse: 'negative',
+        checkBoxDataCy: ''
+      },
+      {
+        name: 'protein',
+        label: 'Protein (g)',
+        field: 'protein',
+        sortable: true,
+        required: true,
+        editable: true,
+        showEditIcon: true,
+        popupEditEmit: 'onSaveValuePopupEdit',
+        popupEditInputtype: 'text',
+        popupEditDataCy: '',
+        showInputPopupEdit: true
+      },
+      {
+        name: 'sodium',
+        label: 'Sodium (mg)',
+        field: 'sodium'
+      },
+      {
+        name: 'calcium',
+        label: 'Calcium (%)',
+        field: 'calcium',
+        sortable: true
+      },
+      {
+        name: 'iron',
+        label: 'Iron (%)',
+        field: 'iron',
+        sortable: true
+      }
+      ],
+      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%'
+        }
+      ],
+      visibleColumns: []
+    }
+  },
+  computed: {
+    pageLength (): number {
+      return (this.totalPage + 1) * this.pageSize
+    },
+    filter ():object {
+      return {
+        search: this.store.filterValue,
+        forceRender: this.forceRender
+      }
+    }
+  },
+  mounted () {
+    this.store.cleanTableFilter()
+    this.tableStyle = setTableHeight.setTableHeight()
+    infiniteScroll.handleInfiniteScrollNewTable(this)
+    this.rows = this.rowsData
+    this.visibleColumns = this.store.visiblecolumns
+  },
+  methods: {
+    saveSelectedColumns (columns: string []): void {
+      this.store.visiblecolumns = columns
+      this.visibleColumns = columns
+    },
+    filterMethod (rows: string | [], terms: { search: string }): object[] | [] {
+      return FilterMethod.filter(this, rows, terms)
+    },
+    onUpdateBasicCheckboxValue (rows: object []) {
+      console.log(rows, 'onUpdateBasicCheckboxValue')
+    },
+    onUpdateCustomizedCheckboxValue (rows: object []) {
+      console.log(rows, 'onUpdateCustomizedCheckboxValue')
+    },
+    setItemNotFound (rows: object []) {
+      console.log(rows, 'onClickButton')
+    },
+    toggleSearchVisibility () {
+      this.$refs.table.toggleSearchVisibility(this.store)
+      this.$refs.table.filterInputFocus()
+    },
+    toggleRightDrawer (): void {
+    },
+    toogleColumnsSelectorVisibility () {
+      // this.$refs.sideBar.setRightDrawerOpenToFalse()
+      this.$refs.table.toogleColumnsSelectorVisibility()
+    }
+  }
+}
+</script>
+<style scoped>
+.header-container {
+  padding: 20px 20px 5px 20px;
+}
+.q-toolbar {
+    min-height: unset !important;
+    padding: 0 !important;
+}
+</style>

package/src/router/routes.ts

@@ -21,6 +21,10 @@ const routes: RouteRecordRaw[] = [
     path: '/navBarPage',
     component: () => import('../pages/NavBarPage.vue')
   },
+  {
+    path: '/pdaLayout',
+    component: () => import('../layouts/PdaLayout.vue')
+  }
 ]
 
 export default routes

package/src/store/table.js

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 import { useStorage } from '@vueuse/core'
 export const tableStore = defineStore('tableStore', {
   state: () => ({
-    disableScannerButtons: useStorage('counter', false),
+    disableScannerButtons: useStorage('disableScannerButtons', false),
     filterValue: useStorage('filterValue', ''),
     lastFilterValue: useStorage('lastFilterValue', ''),
     visiblecolumns: useStorage('visiblecolumns', [])