quasar-factory-lib 0.0.38 → 0.0.40

package/package.json

@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.38",
+  "version": "0.0.40",
   "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"
@@ -175,6 +176,10 @@ export default defineComponent({
     },
     showSkeleton: {
       type: Boolean
+    },
+    filteredRows: {
+      type: Array as () => object [] | [],
+      required: true
     }
   },
   emits: [
@@ -223,6 +228,9 @@ export default defineComponent({
   watch: {
     rows (val) {
       this.rowsData = val
+    },
+    visibleColumns (val: string [] | []) {
+      this.visibleColumnsData = val
     }
   },
   mounted () {
@@ -282,17 +290,15 @@ export default defineComponent({
       this.loading = !this.loading
     },
     sortMethod (rows: object[], sortBy: string, descending: boolean): object[] | [] {
-      const allrowsSorted = TableSort.sortMethod(rows, sortBy, descending, this.sortDataValues)
+      console.log(rows.length)
+      const allrowsSorted = TableSort.sortMethod(this.filteredRows, sortBy, descending, this.sortDataValues)
       const rowsSliced = allrowsSorted.slice(0, rows.length)
-      if (this.store.valueInputFilterTable === '') {
+      if (this.store.filterValue === '') {
         return rowsSliced
       } else {
         return TableSort.sortMethod(rows, sortBy, descending, this.sortDataValues)
       }
-    }
+    },
   }
 })
 </script>
-<style>
-/* @import url('./style.css'); */
-</style>

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/components/Table/utils/filterMethod.ts

@@ -2,7 +2,8 @@
 
 import infiniteScroll from './infiniteScroll'
 const filterMethod = {
-  filter (self: {filterTerms: string }, rows: string | [], terms: { search: string }): object[] | [] {
+  filter (self: {filterTerms: string, filteredRows: object[] | [] }, rows: string | [], terms: { search: string }): object[] | [] {
+    console.log(rows.length, 'rows')
     self.filterTerms = terms.search
     if (terms.search) {
       const filteredRows = []
@@ -12,8 +13,11 @@ const filterMethod = {
           filteredRows.push(rows[i])
         }
       }
+      // self.filteredRows = filteredRows
+      // console.log(filteredRows.length, 'filteredRows terms')
       return infiniteScroll.paginationNewTable(self, filteredRows)
     } else {
+      self.filteredRows = rows
       return infiniteScroll.paginationNewTable(self, rows)
     }
   },

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">