quasar-factory-lib 0.0.78 → 0.0.80

package/package.json

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

package/src/components/Table/Table.vue

@@ -209,7 +209,7 @@ export default defineComponent({
     },
     advancedFilters: {
       type: Object,
-      required: true,
+      default: () => ({}),
       deep: true
     },
     showIconAdvancedFilter: {
@@ -249,7 +249,7 @@ export default defineComponent({
       totalPage: 0,
       pageSize: 20,
       filteredRows: [] as object [] | [],
-      showAdvancedFilter: false,
+      showAdvancedFilter: true,
       advancedFiltersData: this.advancedFilters
     }
   },

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

@@ -21,24 +21,26 @@
       {{ col.label }}
     </q-th>
   </q-tr>
-  <AdvancedFilters
+  <TableAdvancedFilters
     v-if="showAdvancedFilter && !smallDevice"
     :tableProps="tablePropsData"
     :advancedFilters="advancedFilters"
+    :selectionType="selectionType"
   />
   <GridAdvancedFilters
     v-if="showAdvancedFilter && smallDevice"
+    :sho-advanced-filter="showAdvancedFilter"
     :tableProps="tablePropsData"
     :advancedFilters="advancedFilters"
   />
 </template>
 <script lang="ts">
-import AdvancedFilters from  './AdvancedFilters/AdvancedFilters.vue'
-import GridAdvancedFilters from './AdvancedFilters/GridAdvancedFilters.vue'
+import TableAdvancedFilters from  './advanced-filters/TableAdvancedFilters.vue'
+import GridAdvancedFilters from './advanced-filters/GridAdvancedFilters.vue'
 export default {
   name: 'TableSlotHeader',
   components: {
-    AdvancedFilters,
+    TableAdvancedFilters,
     GridAdvancedFilters
   },
   props: {
@@ -61,7 +63,7 @@ export default {
     advancedFilters: {
       type: Object,
       required: true
-    }
+    },
   },
   data () {
     return {

package/src/components/Table/components/{AdvancedFilters → advanced-filters}/DateFilter.vue

@@ -6,6 +6,7 @@
     debounce="200"
     :label="col.label"
     :placeholder="'DD/MM/YYYY'"
+    mask="##/##/####"
     clearable
     dense
     :disable="col.disable"
@@ -25,7 +26,6 @@
         >
           <q-date
             v-model:model-value="advancedFilters[col.name]"
-            required=""
             mask="DD/MM/YYYY"
             flat
             square

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

@@ -0,0 +1,98 @@
+<template>
+  <q-input
+    v-model="advancedFilters[col.name]"
+    filled
+    :data-cy="col.name + 'date-time-filter'"
+    debounce="200"
+    :label="col.label"
+    placeholder="DD/MM/YYYY HH:mm:ss"
+    mask="##/##/#### ##:##:##"
+    clearable
+    dense
+    :disable="col.disable"
+    style="min-width: 220px;"
+  >
+    <template #append>
+      <q-icon
+        name="event_note"
+        class="cursor-pointer"
+        :data-cy="col.name + 'date-time-button-filter'"
+        size="sm"
+      >
+        <q-popup-proxy
+          ref="popup"
+          cover
+          transition-show="scale"
+          transition-hide="scale"
+        >
+          <div class="column q-gutter-sm">
+            <q-date
+              v-model="tempDate"
+              flat
+              square
+              mask="DD/MM/YYYY"
+            />
+            <q-time
+              v-model="tempTime"
+              format24h
+              with-seconds
+              flat
+              square
+            />
+            <q-btn label="OK" color="primary" @click="applyDateTime(col.name)" />
+          </div>
+        </q-popup-proxy>
+      </q-icon>
+    </template>
+  </q-input>
+</template>
+<script lang="ts">
+import { date } from 'quasar'
+
+export default {
+  name: 'DateTimeFilter',
+  props: {
+    col: {
+      type: Object,
+      required: true
+    },
+    advancedFilters: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      tempDate: '',
+      tempTime: ''
+    }
+  },
+  watch: {
+    'advancedFilters[col.name]': {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          const [d, t] = newVal.split(' ')
+          const parsedDate = date.extractDate(d, 'DD/MM/YYYY')
+          if (parsedDate) {
+            this.tempDate = date.formatDate(parsedDate, 'YYYY-MM-DD')
+            this.tempTime = t || ''
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    applyDateTime(field) {
+      if (this.tempDate && this.tempTime) {
+        const combined = `${this.tempDate} ${this.tempTime}`
+        const formatted = date.formatDate(combined, 'DD/MM/YYYY HH:mm:ss')
+        this.advancedFilters[field] = formatted
+        this.$refs.popup.hide() 
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+</style>

package/src/components/Table/components/{AdvancedFilters → advanced-filters}/GridAdvancedFilters.vue

@@ -1,17 +1,9 @@
 <template>
-  <q-dialog
-    v-model="showDialog" 
-    persistent
-    seamless
-    :position="'bottom'"
-    full-width
-    transition-show="slide-up"
-    transition-hide="slide-down">
-    <q-card id="card-advanced-filters">
+    <q-card v-if="showDialog" style="z-index: 1000">
       <q-bar/>
       <q-card-section style="max-height: 50vh" class="scroll">
         <div class="row">
-          <div v-for="col in nonBooleanCols" class="col-xs-6 col-sm-4 col-md-3 q-px-xs q-py-xs"   
+          <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">
 
             <TextFilter
@@ -35,6 +27,14 @@
               :col="col"
             />
           </div>
+          <div v-for="col in dateTimeCols" class="col-xs-12 col-sm-6 col-md-3 q-px-xs q-py-xs"   
+            :key="col.label">
+            <DateTimeFilter
+              v-if="col.type === 'dateTime'"
+              :advancedFilters="advancedFilters"
+              :col="col"
+            />
+          </div>
           <div v-for="col in booleanCols" class="col-xs-6 col-sm-4 col-md-3 q-px-xs q-py-xs"   
             :key="col.label">
             <CheckBoxFilter
@@ -46,7 +46,6 @@
         </div>
       </q-card-section>
     </q-card>
-  </q-dialog>
 </template>
 <script lang="ts">
 import TextFilter from './TextFilter.vue'
@@ -54,6 +53,7 @@ import CheckBoxFilter  from './CheckBoxFilter.vue'
 import NumberFilter from './NumberFilter.vue'
 import DateFilter from './DateFilter.vue'
 import TimeFilter from './TimeFilter.vue'
+import DateTimeFilter from './DateTimeFilter.vue'
 
 export default {
   name: 'GridAdvancedFilters',
@@ -62,7 +62,8 @@ export default {
     CheckBoxFilter,
     NumberFilter,
     DateFilter,
-    TimeFilter
+    TimeFilter,
+    DateTimeFilter
   },
   props: {
     tableProps: {
@@ -72,19 +73,25 @@ export default {
     advancedFilters: {
       type: Object,
       required: true
+    },
+    showAdvancedFilter: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
     return {
-      showDialog: true,
-      maximizedToggle: false
+      showDialog: true
     }
   },
   computed: {
     booleanCols () {
       return this.tableProps.cols.filter(col => col.type === 'boolean' && !col.disable);
     },
-    nonBooleanCols () {
+    dateTimeCols () {
+      return this.tableProps.cols.filter(col => col.type === 'dateTime' && !col.disable);
+    },
+    otherCols () {
       return this.tableProps.cols.filter(col => col.type !== 'boolean' && !col.disable);
     }
   }

package/src/components/Table/components/{AdvancedFilters/AdvancedFilters.vue → advanced-filters/TableAdvancedFilters.vue}

@@ -1,7 +1,8 @@
 <template>
   <q-tr
+    class="tr-headerFilter"
   >
-    <q-th v-if="tableProps.selection !== 'none'" />
+    <q-th v-if="selectionType!== 'none'" />
     <q-th
       v-for="col in tableProps.cols"
       :key="col.name"
@@ -16,7 +17,7 @@
         "
       >
         <TextFilter
-          v-if="col.type === 'string' || col.type === 'textarea' || col.type === 'dateTime'"
+          v-if="col.type === 'string' || col.type === 'textarea'"
           :advancedFilters="advancedFilters"
           :col="col"
         />
@@ -41,6 +42,11 @@
           :advancedFilters="advancedFilters"
           :col="col"
         />
+        <DateTimeFilter
+          v-if="col.type === 'dateTime'"
+          :advancedFilters="advancedFilters"
+          :col="col"
+        />
       </div>
     </q-th>
   </q-tr>
@@ -51,15 +57,16 @@ import CheckBoxFilter  from './CheckBoxFilter.vue'
 import NumberFilter from './NumberFilter.vue'
 import DateFilter from './DateFilter.vue'
 import TimeFilter from './TimeFilter.vue'
-
+import DateTimeFilter from './DateTimeFilter.vue'
 export default {
-  name: 'AdvancedFilters',
+  name: 'TableAdvancedFilters',
   components: {
     TextFilter,
     CheckBoxFilter,
     NumberFilter,
     DateFilter,
-    TimeFilter
+    TimeFilter,
+    DateTimeFilter
   },
   props: {
     tableProps: {
@@ -69,6 +76,10 @@ export default {
     advancedFilters: {
       type: Object,
       required: true
+    },
+    selectionType: {
+      type: String,
+      required: true
     }
   }
 }

package/src/components/Table/components/{AdvancedFilters → advanced-filters}/TimeFilter.vue

@@ -7,6 +7,7 @@
     debounce="200"
     :label="col.label"
     :placeholder="'HH:mm:ss'"
+    mask="##:##:##"
     clearable
     style="min-width: 150px;"
     :disable="col.disable"
@@ -16,7 +17,7 @@
         name="schedule"
         class="cursor-pointer"
         :data-cy="col.name + 'time-button-filter'"
-        size="md"
+        size="sm"
       >
         <q-popup-proxy
           cover
@@ -29,6 +30,7 @@
           format24h
           flat
           square
+          :mask="'HH:mm:ss'"
         >
          <div class="row items-center justify-end">
           <q-btn
@@ -38,7 +40,7 @@
             flat
           />
         </div>
-      </q-time>
+        </q-time>
         </q-popup-proxy>
       </q-icon>
     </template>

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

@@ -25,7 +25,6 @@
   top: 0;
   z-index: 1;
 }
-
 .my-table tr:first-child th:first-child {
   /* highest z-index */
   z-index: 3;
@@ -38,6 +37,15 @@
   position: sticky;
   left: 0;
 }
+.my-table thead .tr-headerFilter th:first-child {
+  z-index: 35;
+  position: sticky;
+  left: 0;
+}
+
+.my-table thead .tr-headerfilter th {
+  z-index: 1 !important;
+}
 .my-table tbody {
   /* height of all previous header rows */
   scroll-margin-top: 48px;

package/src/layouts/PdaLayout.vue

@@ -43,6 +43,8 @@
           :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
           }"
@@ -87,6 +89,7 @@ export default {
       tabletMaxWidth: 1100,
       store: tableStore(),
       tableStyle: '',
+      advancedFilters: {},
       columns: [{
         name: 'name',
         required: true,
@@ -420,6 +423,12 @@ 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

@@ -13,7 +13,7 @@
           :rows="rows"
           :columns="columns"
           :visible-columns="store.visiblecolumns"
-          :small-device="false"
+          :small-device="true"
           :store="store"
           :table-style="tableStyle"
           :show-skeleton="showSkeleton"
@@ -22,8 +22,8 @@
           :filterComputedOptions="{ preparedQuantity: store.prepared}"
           :additional-sort-conditions="additionalSortConditions"
           :additional-filter-conditions="additionalFilterConditions"
-          :advancedFilters="advancedFilters" 
-          :showIconAdvancedFilter="true"
+          :advanced-filters="advancedFilters" 
+          :show-icon-advanced-filter="true"
           @on-select-visible-columns="(columns) => {
             store.visiblecolumns = columns
           }"
@@ -75,6 +75,15 @@ export default {
           field: 'time',
           type: 'time'
         },
+        {
+          name: 'dateTime',
+          required: true,
+          label: 'Date Time',
+          align: 'left',
+          sortable: true,
+          field: 'dateTime',
+          type: 'dateTime'
+        },
         {
         name: 'dessert',
         required: true,
@@ -230,6 +239,7 @@ export default {
         {
           date: '12/12/2024',
           time: '12:20:40',
+          dateTime: '12/12/2024 12:20:40',
           dessert: 'Frozen Yogurt',
           booleanIcon: true,
           available: true,
@@ -245,6 +255,7 @@ export default {
         {
           date: '18/12/2024',
           time: '11:00:54',
+          dateTime: '12/12/2024 12:25:40',
           dessert: 'Ice cream sandwich',
           booleanIcon: true,
           available: false,
@@ -260,6 +271,7 @@ export default {
         {
           date: '05/07/2024',
           time: '	7:01:24',
+          dateTime: '12/12/2024 12:30:40',
           dessert: 'Eclair',
           booleanIcon: true,
           available: true,
@@ -275,6 +287,7 @@ export default {
         {
           date: '10/12/2023',
           time: '12:04:33',
+          dateTime: '13/12/2024 12:20:40',
           dessert: 'Cupcake',
           booleanIcon: false,
           available: false,
@@ -290,6 +303,7 @@ export default {
         {
           date: '16/05/1999',
           time: '10:43:25',
+          dateTime: '13/12/2024 13:20:40',
           dessert: 'Gingerbread',
           booleanIcon: true,
           available: true,
@@ -305,6 +319,7 @@ export default {
         {
           date: '01/01/0001',
           time: '11:35:04',
+          dateTime: '15/12/2024 18:20:40',
           dessert: 'Jelly bean',
           booleanIcon: false,
           available: false,
@@ -320,6 +335,7 @@ export default {
         {
           date: '12/12/2024',
           time: '12:51:01',
+          dateTime: '12/12/2024 12:20:40',
           dessert: 'Lollipop',
           booleanIcon: true,
           available: true,
@@ -335,6 +351,7 @@ export default {
         {
           date: '05/07/2022',
           time: '14:39:34',
+          dateTime: '12/01/2025 12:20:40',
           dessert: 'Honeycomb',
           booleanIcon: true,
           available: false,
@@ -350,6 +367,7 @@ export default {
         {
           date: '14/03/2023',
           time: '10:43:26',
+          dateTime: '01/01/2025 00:00:01',
           dessert: 'Donut',
           booleanIcon: true,
           available: true,
@@ -365,6 +383,7 @@ export default {
         {
           date: '12/12/2023',
           time: '07:45:12',
+          dateTime: '12/01/2025 12:20:40',
           dessert: 'KitKat',
           booleanIcon: false,
           available: false,
@@ -397,6 +416,7 @@ export default {
           id:  i + '-' + lista[i].dessert,
           date: lista[i].date,
           time: lista[i].time,
+          dateTime: lista[i].dateTime,
           dessert: lista[i].dessert,
           booleanIcon: lista[i].booleanIcon,
           available: lista[i].available,