quasar-factory-lib 0.0.80 → 0.0.82

package/package.json

@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.80",
+  "version": "0.0.82",
   "author": ""
 }

package/src/components/Table/Table.vue

@@ -207,11 +207,6 @@ export default defineComponent({
       type: Function,
       default: function () {}
     },
-    advancedFilters: {
-      type: Object,
-      default: () => ({}),
-      deep: true
-    },
     showIconAdvancedFilter: {
       type: Boolean,
       default: false
@@ -249,8 +244,8 @@ export default defineComponent({
       totalPage: 0,
       pageSize: 20,
       filteredRows: [] as object [] | [],
-      showAdvancedFilter: true,
-      advancedFiltersData: this.advancedFilters
+      showAdvancedFilter: false,
+      advancedFiltersData: {}
     }
   },
   computed: {
@@ -284,9 +279,6 @@ export default defineComponent({
     rows (val) {
       this.rowsData = val
     },
-    advancedFilters (val) {
-      this.advancedFiltersData = val
-    },
     showAdvancedFilter (val: boolean) {
       if (!val) {
         this.advancedFiltersData = {}
@@ -294,6 +286,7 @@ export default defineComponent({
     }
   },
   mounted () {
+    this.getAdvancedFilterColumns()
   },
   methods: {
     getSelectedString (val: number): string {
@@ -463,6 +456,12 @@ export default defineComponent({
 
       this.filteredRows = filteredRows_
       return  filteredRows_.slice(0, this.pageLength)
+    },
+    getAdvancedFilterColumns (): void {
+      this.advancedFiltersData = this.columns.reduce((acc, column) => {
+            acc[column.name] = ''
+          return acc
+        }, {} as { [key: string]: string })
     }
   }
 })

package/src/components/Table/components/advanced-filters/GridAdvancedFilters.vue

@@ -1,7 +1,51 @@
 <template>
-    <q-card v-if="showDialog" style="z-index: 1000">
-      <q-bar/>
-      <q-card-section style="max-height: 50vh" class="scroll">
+  <q-dialog
+    v-model="showDialog" 
+    persistent
+    :seamless="true"
+    position="bottom"
+    full-width
+    transition-show="slide-up"
+    transition-hide="slide-down">
+    <q-card
+      square
+      flat
+    >
+      <q-bar>
+        <q-icon
+          name="filter_alt"
+           color="primary"
+        />
+          <q-space />
+
+          <q-btn
+            dense
+            flat
+            icon="minimize" 
+            color="primary"
+            :disable="maximizedToggle"
+            @click="maximizedToggle = true"
+          >
+            <q-tooltip
+              v-if="maximizedToggle"
+              class="bg-white text-primary">Minimize</q-tooltip>
+          </q-btn>
+          <q-btn
+            dense
+            flat
+            icon="crop_square"
+            color="primary"
+            @click="maximizedToggle = false"
+            :disable="!maximizedToggle"
+          >
+            <q-tooltip
+              v-if="!maximizedToggle"
+              class="bg-white text-primary">Maximize</q-tooltip>
+          </q-btn>
+        </q-bar>
+      <q-card-section
+        :style="maximizedToggle ? 'display:none;' : 'display: block'"
+        class="scroll">
         <div class="row">
           <div v-for="col in otherCols" class="col-xs-6 col-sm-4 col-md-3 q-px-xs q-py-xs"   
             :key="col.label">
@@ -46,6 +90,7 @@
         </div>
       </q-card-section>
     </q-card>
+  </q-dialog>
 </template>
 <script lang="ts">
 import TextFilter from './TextFilter.vue'
@@ -81,7 +126,8 @@ export default {
   },
   data () {
     return {
-      showDialog: true
+      showDialog: true,
+      maximizedToggle: false
     }
   },
   computed: {

package/src/layouts/PdaLayout.vue

@@ -43,11 +43,10 @@
           :table-style="tableStyle"
           :show-skeleton="showSkeleton"
           :selection-type="'multiple'"
-          :advanced-filters="advancedFilters" 
-          :show-icon-advanced-filter="true"
           @on-select-visible-columns="(columns) => {
             store.visiblecolumns = columns
           }"
+          :show-icon-advanced-filter="true"
           @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
           @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
           @on-click-button="setItemNotFound"
@@ -89,20 +88,21 @@ export default {
       tabletMaxWidth: 1100,
       store: tableStore(),
       tableStyle: '',
-      advancedFilters: {},
       columns: [{
         name: 'name',
         required: true,
         label: 'Dessert (100g serving)',
         align: 'left',
-        sortable: true
+        sortable: true,
+        type: 'string',
       },
       {
         name: 'date',
         required: true,
         label: 'Fecha',
         align: 'left',
-        sortable: true
+        sortable: true,
+        type: 'date'
       },
       {
         name: 'available',
@@ -110,7 +110,8 @@ export default {
         label: 'Available',
         align: 'left',
         sortable: true,
-        showBasicCheckbox: true
+        showBasicCheckbox: true,
+        type: 'boolean'
       },
       {
         name: 'booleanIcon',
@@ -118,7 +119,8 @@ export default {
         label: 'Boolean Icon',
         align: 'left',
         sortable: true,
-        showCustomizedIcon: true
+        showCustomizedIcon: true,
+        type: 'boolean'
       },
       {
         name: 'calories',
@@ -132,7 +134,8 @@ export default {
         popupEditDataCy: '',
         mask: '#####',
         showSelectNumberOptions: false,
-        popupEditInputtype: 'number'
+        popupEditInputtype: 'number',
+        type: 'number'
       },
       {
         name: 'fat',
@@ -143,7 +146,8 @@ export default {
         btnIcon: 'save',
         btnEmit: 'onClickButton',
         dataCy: 'onClickButton',
-        btnColor: 'primary'
+        btnColor: 'primary',
+        type: 'number'
       },
       {
         name: 'carbs',
@@ -153,7 +157,8 @@ export default {
         popupEditEmit: 'onSaveValuePopupEdit',
         popupEditDataCy: '',
         inputMaxLength: 200,
-        popupEditInputtype: 'textarea'
+        popupEditInputtype: 'textarea',
+        type: 'string'
       },
       {
         name: 'checked',
@@ -166,7 +171,8 @@ export default {
         uncheckedIcon: 'cancel',
         checkBoxColorCaseTrue: 'positive',
         checkBoxColorCaseFalse: 'negative',
-        checkBoxDataCy: ''
+        checkBoxDataCy: '',
+        type: 'boolean'
       },
       {
         name: 'protein',
@@ -179,24 +185,28 @@ export default {
         popupEditEmit: 'onSaveValuePopupEdit',
         popupEditInputtype: 'text',
         popupEditDataCy: '',
-        showInputPopupEdit: true
+        showInputPopupEdit: true,
+        type: 'string'
       },
       {
         name: 'sodium',
         label: 'Sodium (mg)',
-        field: 'sodium'
+        field: 'sodium',
+        type: 'string'
       },
       {
         name: 'calcium',
         label: 'Calcium (%)',
         field: 'calcium',
-        sortable: true
+        sortable: true,
+        type: 'string'
       },
       {
         name: 'iron',
         label: 'Iron (%)',
         field: 'iron',
-        sortable: true
+        sortable: true,
+        type: 'string'
       }
       ],
       rows: [],
@@ -423,12 +433,6 @@ export default {
         icon: 'cancel',
         spinner: false
       })
-    },
-    getAdvancedFilterColumns (): void {
-      this.advancedFilters = this.columns.reduce((acc, column) => {
-            acc[column.name] = ''
-          return acc
-        }, {} as { [key: string]: string })
     }
   }
 }

package/src/pages/TablePage.vue

@@ -22,7 +22,6 @@
           :filterComputedOptions="{ preparedQuantity: store.prepared}"
           :additional-sort-conditions="additionalSortConditions"
           :additional-filter-conditions="additionalFilterConditions"
-          :advanced-filters="advancedFilters" 
           :show-icon-advanced-filter="true"
           @on-select-visible-columns="(columns) => {
             store.visiblecolumns = columns
@@ -55,7 +54,6 @@ export default {
       showDialog: false,
       store: tableStore(),
       tableStyle: '',
-      advancedFilters: {},
       columns: [
         {
           name: 'date',
@@ -404,8 +402,6 @@ export default {
     this.tableStyle = setTableHeight.setTableHeight()
     infiniteScroll.handleInfiniteScrollNewTable(this)
     this.getRows()
-    this.getAdvancedFilterColumns()
-
   },
   methods: {
     getRows () {
@@ -518,12 +514,6 @@ export default {
       else if (!this.store.prepared) {
         return [...rows]
       }
-    },
-    getAdvancedFilterColumns (): void {
-      this.advancedFilters = this.columns.reduce((acc, column) => {
-            acc[column.name] = ''
-          return acc
-        }, {} as { [key: string]: string })
     }
   }
 }