quasar-factory-lib 0.0.50 → 0.0.52

package/package.json

@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.50",
+  "version": "0.0.52",
   "author": ""
 }

package/src/components/Table/Table.vue

@@ -174,15 +174,15 @@ export default defineComponent({
     showSkeleton: {
       type: Boolean
     },
-    filterComputedOptions: {
-      type: Object,
-      default: {}
-    },
     getCellClass: {
       type: Function,
       default: function () {}
     },
-    // Needs to be used together
+    // Needs to be used with additionalFilterConditions and additionalSortConditions
+    filterComputedOptions: {
+      type: Object,
+      default: {}
+    },
     additionalFilterConditions: {
       type: Function,
       default: function () {}
@@ -191,7 +191,6 @@ export default defineComponent({
       type: Function,
       default: function () {}
     }
-    //
   },
   emits: [
     'onSelectVisibleColumns',
@@ -247,7 +246,6 @@ export default defineComponent({
     pageLength (): number {
       return (this.totalPage + 1) * this.pageSize
     }
-
   },
   watch: {
     rows (val) {
@@ -256,7 +254,6 @@ export default defineComponent({
     visibleColumns (val: string [] | []) {
       this.visibleColumnsData = val
     }
-    
   },
   mounted () {
   },
@@ -321,7 +318,7 @@ export default defineComponent({
         data = [...this.rows];
       }
       if (this.additionalSortConditions && this.additionalSortConditions.toString().replace(/\s+/g, '') !== 'function(){}') {
-        data = this.additionalSortConditions(this.store, this.filteredRows, rows);
+        data = this.additionalSortConditions(this.filteredRows, rows);
       } else {
         console.log('else sort')
       }
@@ -402,7 +399,7 @@ export default defineComponent({
         filteredRows_ = rows
       }
       if (this.additionalFilterConditions && this.additionalFilterConditions.toString().replace(/\s+/g, '') !== 'function(){}') {
-        filteredRows_ = this.additionalFilterConditions(this.store, this.rows, filteredRows_)
+        filteredRows_ = this.additionalFilterConditions(this.rows, filteredRows_)
       }
       this.filteredRows = filteredRows_
       return  filteredRows_.slice(0, this.pageLength)

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

@@ -28,7 +28,7 @@
           :key="col.name"
         >
           <q-item-section>
-            <q-item-label class="itemsFontSize ellipsis text-light-gray">
+            <q-item-label class="itemsFontSize ellipsis text-color-lightGray">
               {{
                 col.label
               }}
@@ -38,7 +38,7 @@
           <q-item-section side>
             <q-item-label
               v-if="getColumnValue(col)"
-              class="itemsFontSize text-almost-black"
+              class="itemsFontSize text-color-almostBlack"
               :class="getCellClass(tablePropsData.row, col)"
             >
               <q-icon

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

@@ -50,6 +50,9 @@
   font-weight: bold;
   color: var(--black);
 }
+.my-table  .itemsFontSize{
+  font-size: 14px;
+}
 @media only screen and (max-width: 1100px) {
   .my-table .q-table__grid-content {
     overflow: auto;

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

@@ -1,14 +1,15 @@
 const utils = {
   setTableHeight ():string {
-    const footer = document.getElementsByClassName('q-footer')[0]
-    let footerHeight = ''
-    if (footer) {
-      const computedHeight = window.getComputedStyle(footer).height
+    const qPageStickBottom = document.getElementsByClassName('q-page-sticky')[0]
+    let footerHeightHeight = ''
+    if (qPageStickBottom) {
+      const computedHeight = window.getComputedStyle(qPageStickBottom).height
 
       if (computedHeight !== 'auto') {
-        footerHeight = computedHeight.replace('px', '')
+        footerHeightHeight = computedHeight.replace('px', '')
       }
     }
+  
     const header = document.getElementsByClassName('q-header')[0]
     let headerHeight = ''
     if (header) {
@@ -18,7 +19,20 @@ const utils = {
         headerHeight = computedHeight.replace('px', '')
       }
     }
-    const n = Number(footerHeight) + Number(headerHeight)
+    const n = Number(footerHeightHeight) + Number(headerHeight)
+    return `height:${window.innerHeight - n}px`
+  },
+  setModalTableHeight (elementId: string):string {
+    const topCard = document.getElementById(elementId)
+    let topCardHeight = ''
+    if (topCard) {
+      const computedHeight = window.getComputedStyle(topCard).height
+
+      if (computedHeight !== 'auto') {
+        topCardHeight = computedHeight.replace('px', '')
+      }
+    }
+    const n = Number(topCardHeight)
     return `height:${window.innerHeight - n}px`
   }
 }

package/src/css/app.css

@@ -31,10 +31,10 @@
 .bg-light-peach {
   background-color: var(--light-peach);
 }
-.text-color-light-gray {
+.text-color-lightGray {
   color: var(--light-gray);
 }
-.text-color-almost-black {
+.text-color-almostBlack {
   color: var(--almost-black);
 }
 .q-toolbar-unset-height .q-toolbar {

package/src/layouts/PdaLayout.vue

@@ -17,14 +17,14 @@
           </TaskNavBar>
         </div>
       </q-header>
-      <q-page-container class=" full-width column justify-center">
+      <q-page-container>
         <q-page>
         <Table
           ref="table"
           :rows="rows"
           :columns="columns"
           :visible-columns="visibleColumns"
-          :small-device="false"
+          :small-device="smallDevice"
           :store="store"
           :table-style="tableStyle"
           :show-skeleton="false"
@@ -35,6 +35,9 @@
           @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
           @on-click-button="setItemNotFound"
         />
+          <q-page-sticky position="bottom" v-if="smallDevice">
+            <q-btn color="accent" icon="arrow_forward" stretch />
+          </q-page-sticky>
         </q-page>
       </q-page-container>
   </q-layout>
@@ -56,6 +59,7 @@ export default {
   },
   data () {
     return {
+      smallDevice: true,
       showDialog: false,
       store: tableStore(),
       tableStyle: '',
@@ -312,8 +316,8 @@ export default {
     this.store.cleanTableFilter()
     this.tableStyle = setTableHeight.setTableHeight()
     infiniteScroll.handleInfiniteScrollNewTable(this)
-    this.rows = this.rowsData
     this.visibleColumns = this.store.visiblecolumns
+    this.rows = this.rowsData
   },
   methods: {
     saveSelectedColumns (columns: string []): void {

package/src/pages/TablePage.vue

@@ -21,7 +21,7 @@
           :selection-type="'multiple'"
           :getCellClass="getCellClass"
           :filterComputedOptions="{ preparedQuantity: store.prepared}"
-          :additionalSortConditions="additionalSortConditions"
+          :additional-sort-conditions="additionalSortConditions"
           :additional-filter-conditions="additionalFilterConditions"
           @on-select-visible-columns="saveSelectedColumns"
           @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
@@ -36,7 +36,7 @@
 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 FilterMethod from '../components/Table/utils/filterMethod'
 // import TableSort from '../components/Table/utils/sort.js'
 import { tableStore } from '../store/table.js'
 export default {
@@ -364,9 +364,6 @@ export default {
       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')
     },
@@ -376,38 +373,30 @@ export default {
     setItemNotFound (rows: object []) {
       console.log(rows, 'onClickButton')
     },
-    // sortMethod (rows: object[], sortBy: string, descending: boolean): object[] | [] {
-    //   let allrowsSorted = []
-    //   if (this.store.filterValue !== '') {
-    //     allrowsSorted = TableSort.sortMethod(this.filteredRows, sortBy, descending, this.sortDateValues)
-    //   } else {
-    //     allrowsSorted = TableSort.sortMethod(this.rows, sortBy, descending, this.sortDateValues)
-    //   }
-    //    return allrowsSorted.slice(0, rows.length)
-    // },
     getCellClass (row, col) {
       if (col.name === 'dessert' && row.dessert === 'Frozen Yogurt') {
         return 'text-color-negative-bold'; 
       }
       return '';
     },
-    additionalFilterConditions (store_: { prepared: boolean }, rows_: object[] | [], filteredRowsParam_: object[] | []) {
+    additionalFilterConditions (rows_: object[] | [], filteredRowsParam_: object[] | []) {
       console.log('additional filter conditions')
-      filteredRowsParam_ = []
-        if (store_.prepared) {
-        for (let i = 0; i < rows_.length; i++) {
-          if (rows_[i].sodium >= 300) {
-            filteredRowsParam_.push(rows_[i])
+      const rowsToReturn = []
+      const filteredOrAllRows = filteredRowsParam_.length > 0 ? filteredRowsParam_: rows_
+        if (this.store.prepared) {
+        for (let i = 0; i < filteredOrAllRows.length; i++) {
+          if (filteredOrAllRows[i].sodium >= 300) {
+            rowsToReturn.push(filteredOrAllRows[i])
           }
         }
-        return filteredRowsParam_
+        return rowsToReturn
       } else {
-        return rows_
+        return filteredRowsParam_
       }
     },
-    additionalSortConditions (store_, filteredRowsData, rows) {
+    additionalSortConditions (filteredRowsData: object[] | [], rows: object[] | []) {
       console.log('conditions sort function')
-      if (store_.prepared) {
+      if (this.store.prepared) {
 
       const filteredRows_ = []
       for (let i = 0; i < rows.length; i++) {
@@ -418,10 +407,13 @@ export default {
         filteredRowsData = filteredRows_
         return  [...filteredRowsData]
       } 
-      else if (!store_.prepared) {
+      else if (!this.store.prepared) {
         return [...rows]
       }
     }
   }
 }
 </script>
+<!-- :filterComputedOptions="{ preparedQuantity: store.prepared}"
+:additional-sort-conditions="additionalSortConditions"
+:additional-filter-conditions="additionalFilterConditions" -->