quasar-factory-lib 0.0.76 → 0.0.78

package/package.json

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

package/src/components/Table/Table.vue

@@ -35,6 +35,23 @@
     >
       <template #top-right="props">
         <q-separator />
+        <div
+          v-if="showIconAdvancedFilter"
+          class="q-pr-lg float-left cursor-pointer no-wrap row items-center"
+          data-cy="advanced-filters-button"
+          @click="() => {
+            showAdvancedFilter = !showAdvancedFilter
+          }"
+        >
+        <q-icon
+          :name="showAdvancedFilter ? 'filter_alt_off' : 'filter_alt'"
+          size="md"
+          class="cursor-pointer items-center"
+        />
+        <span v-if="!smallDevice">
+        {{ $t('table.advancedFilters') }}
+        </span>
+      </div>
         <TableFilter
           v-if="getTableInputSearchVisibility && !hideFilter"
           ref="filterInput"
@@ -57,6 +74,8 @@
           :table-props="props"
           :selection-type="selectionType"
           :small-device="smallDevice"
+          :show-advanced-filter="showAdvancedFilter"
+          :advancedFilters="advancedFiltersData"
         />
       </template>
       <template #body="props">
@@ -187,6 +206,15 @@ export default defineComponent({
     additionalSortConditions: {
       type: Function,
       default: function () {}
+    },
+    advancedFilters: {
+      type: Object,
+      required: true,
+      deep: true
+    },
+    showIconAdvancedFilter: {
+      type: Boolean,
+      default: false
     }
   },
   emits: [
@@ -220,7 +248,9 @@ export default defineComponent({
       forceRender: false,
       totalPage: 0,
       pageSize: 20,
-      filteredRows: [] as object [] | []
+      filteredRows: [] as object [] | [],
+      showAdvancedFilter: false,
+      advancedFiltersData: this.advancedFilters
     }
   },
   computed: {
@@ -253,6 +283,14 @@ export default defineComponent({
   watch: {
     rows (val) {
       this.rowsData = val
+    },
+    advancedFilters (val) {
+      this.advancedFiltersData = val
+    },
+    showAdvancedFilter (val: boolean) {
+      if (!val) {
+        this.advancedFiltersData = {}
+      }
     }
   },
   mounted () {
@@ -321,8 +359,6 @@ export default defineComponent({
       }
       if (this.additionalSortConditions && this.additionalSortConditions.toString().replace(/\s+/g, '') !== 'function(){}') {
         data = this.additionalSortConditions(this.filteredRows, rows);
-      } else {
-        console.log('else sort')
       }
       this.getSortedData(sortBy, data, descending)
       return data.slice(0, this.pageLength);
@@ -412,6 +448,19 @@ export default defineComponent({
       if (this.additionalFilterConditions && this.additionalFilterConditions.toString().replace(/\s+/g, '') !== 'function(){}') {
         filteredRows_ = this.additionalFilterConditions(this.rows, filteredRows_)
       }
+
+      if (this.advancedFiltersData && Object.keys(this.advancedFiltersData).length > 0) {
+        filteredRows_ = filteredRows_.filter(row => {
+          return Object.keys(this.advancedFiltersData).every(key => {
+            const filterValue = this.advancedFiltersData[key]
+            if (filterValue === '' || filterValue === null || filterValue === undefined) {
+              return true
+            }
+            return String(row[key]).toLowerCase().includes(String(filterValue).toLowerCase())
+          })
+        })
+      }
+
       this.filteredRows = filteredRows_
       return  filteredRows_.slice(0, this.pageLength)
     }

package/src/components/Table/components/AdvancedFilters/AdvancedFilters.vue

@@ -0,0 +1,77 @@
+<template>
+  <q-tr
+  >
+    <q-th v-if="tableProps.selection !== 'none'" />
+    <q-th
+      v-for="col in tableProps.cols"
+      :key="col.name"
+    >
+      <div
+        style="
+          display: flex;
+          flex-direction: row;
+          justify-content: left;
+          align-items: center;
+          min-width: 7rem;
+        "
+      >
+        <TextFilter
+          v-if="col.type === 'string' || col.type === 'textarea' || col.type === 'dateTime'"
+          :advancedFilters="advancedFilters"
+          :col="col"
+        />
+        <CheckBoxFilter
+          v-if="col.type === 'boolean'"
+          :advancedFilters="advancedFilters"
+          :col="col"
+        />
+        <NumberFilter
+          v-if="col.type === 'number' || col.type === 'decimal'"
+          :advancedFilters="advancedFilters"
+          :col="col"
+        />
+
+        <DateFilter
+          v-if="col.type === 'date'"
+          :advancedFilters="advancedFilters"
+          :col="col"
+        />
+        <TimeFilter
+          v-if="col.type === 'time'"
+          :advancedFilters="advancedFilters"
+          :col="col"
+        />
+      </div>
+    </q-th>
+  </q-tr>
+</template>
+<script lang="ts">
+import TextFilter from './TextFilter.vue'
+import CheckBoxFilter  from './CheckBoxFilter.vue'
+import NumberFilter from './NumberFilter.vue'
+import DateFilter from './DateFilter.vue'
+import TimeFilter from './TimeFilter.vue'
+
+export default {
+  name: 'AdvancedFilters',
+  components: {
+    TextFilter,
+    CheckBoxFilter,
+    NumberFilter,
+    DateFilter,
+    TimeFilter
+  },
+  props: {
+    tableProps: {
+      type: Object,
+      required: true
+    },
+    advancedFilters: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+<style scoped>
+</style>

package/src/components/Table/components/AdvancedFilters/CheckBoxFilter.vue

@@ -0,0 +1,23 @@
+<template>
+  <q-checkbox
+    v-model="advancedFilters[col.name]"
+    color="primary"
+    :disable="col.disable"
+    :label="col.label"
+  />
+</template>
+<script lang="ts">
+export default {
+  name: 'CheckBoxFilter',
+  props: {
+    col: {
+      type: Object,
+      required: true
+    },
+    advancedFilters: {
+      type: Object,
+      required: true
+    }
+  },
+}
+</script>

package/src/components/Table/components/AdvancedFilters/DateFilter.vue

@@ -0,0 +1,63 @@
+<template>
+  <q-input
+    v-model="advancedFilters[col.name]"
+    filled
+    :data-cy="col.name + 'date-filter'"
+    debounce="200"
+    :label="col.label"
+    :placeholder="'DD/MM/YYYY'"
+    clearable
+    dense
+    :disable="col.disable"
+    style="min-width: 150px;"
+  >
+    <template #append>
+      <q-icon
+        name="event"
+        class="cursor-pointer"
+        :data-cy="col.name + 'date-button-filter'"
+        size="sm"
+      >
+        <q-popup-proxy
+          cover
+          transition-show="scale"
+          transition-hide="scale"
+        >
+          <q-date
+            v-model:model-value="advancedFilters[col.name]"
+            required=""
+            mask="DD/MM/YYYY"
+            flat
+            square
+          >
+            <div class="row items-center justify-end">
+              <q-btn
+                v-close-popup
+                :label="$t('close')"
+                color="primary"
+                flat
+              />
+            </div>
+          </q-date>
+        </q-popup-proxy>
+      </q-icon>
+    </template>
+  </q-input>
+</template>
+<script lang="ts">
+export default {
+  name: 'DateFilter',
+  props: {
+    col: {
+      type: Object,
+      required: true
+    },
+    advancedFilters: {
+      type: Object,
+      required: true
+    }
+  },
+}
+</script>
+<style scoped>
+</style>

package/src/components/Table/components/AdvancedFilters/GridAdvancedFilters.vue

@@ -0,0 +1,100 @@
+<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-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"   
+            :key="col.label">
+
+            <TextFilter
+              v-if="col.type === 'string' || col.type === 'textarea' || col.type === 'dateTime'"
+              :advancedFilters="advancedFilters"
+              :col="col"
+            />
+            <NumberFilter
+              v-if="col.type === 'number' || col.type === 'decimal'"
+              :advancedFilters="advancedFilters"
+              :col="col"
+            />
+            <DateFilter
+              v-if="col.type === 'date'"
+              :advancedFilters="advancedFilters"
+              :col="col"
+            />
+            <TimeFilter
+              v-if="col.type === 'time'"
+              :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
+              v-if="col.type === 'boolean'"
+              :advancedFilters="advancedFilters"
+              :col="col"
+            />
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+<script lang="ts">
+import TextFilter from './TextFilter.vue'
+import CheckBoxFilter  from './CheckBoxFilter.vue'
+import NumberFilter from './NumberFilter.vue'
+import DateFilter from './DateFilter.vue'
+import TimeFilter from './TimeFilter.vue'
+
+export default {
+  name: 'GridAdvancedFilters',
+  components: {
+    TextFilter,
+    CheckBoxFilter,
+    NumberFilter,
+    DateFilter,
+    TimeFilter
+  },
+  props: {
+    tableProps: {
+      type: Object,
+      required: true
+    },
+    advancedFilters: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      showDialog: true,
+      maximizedToggle: false
+    }
+  },
+  computed: {
+    booleanCols () {
+      return this.tableProps.cols.filter(col => col.type === 'boolean' && !col.disable);
+    },
+    nonBooleanCols () {
+      return this.tableProps.cols.filter(col => col.type !== 'boolean' && !col.disable);
+    }
+  }
+}
+</script>
+<style scoped>
+  .q-card__section  {
+    padding: 4px;
+  }
+  .q-field {
+    width: 100%;
+  }
+</style>

package/src/components/Table/components/AdvancedFilters/NumberFilter.vue

@@ -0,0 +1,33 @@
+<template>
+  <q-input
+    v-model="advancedFilters[col.name]"
+    clearable
+    filled
+    dense
+    type="number"
+    :label="col.label"
+    :step="col.type === 'decimal' ? '0.1' : '1'"
+    :data-cy="col.name + 'AdvancedFilter'"
+    debounce="200"
+    :min="0"
+    :disable="col.disable"
+    style="min-width: 150px;"
+  />
+</template>
+<script lang="ts">
+export default {
+  name: 'NumberFilter',
+  props: {
+    col: {
+      type: Object,
+      required: true
+    },
+    advancedFilters: {
+      type: Object,
+      required: true
+    }
+  },
+}
+</script>
+<style scoped>
+</style>

package/src/components/Table/components/AdvancedFilters/TextFilter.vue

@@ -0,0 +1,32 @@
+<template>
+  <q-input
+    v-model="advancedFilters[col.name]"
+    class="advancedFilter"
+    clearable
+    filled
+    dense
+    type="text"
+    :label="col.label"
+    :data-cy="col.name + 'AdvancedFilter'"
+    debounce="200"
+    :disable="col.disable"
+    style="min-width: 150px;"
+  />
+</template>
+<script lang="ts">
+export default {
+  name: 'TextFilter',
+  props: {
+    col: {
+      type: Object,
+      required: true
+    },
+    advancedFilters: {
+      type: Object,
+      required: true
+    }
+  },
+}
+</script>
+<style scoped>
+</style>

package/src/components/Table/components/AdvancedFilters/TimeFilter.vue

@@ -0,0 +1,63 @@
+<template>
+  <q-input
+    v-model="advancedFilters[col.name]"
+    filled
+    dense
+    :data-cy="col.name + 'time-filter'"
+    debounce="200"
+    :label="col.label"
+    :placeholder="'HH:mm:ss'"
+    clearable
+    style="min-width: 150px;"
+    :disable="col.disable"
+  >
+    <template #append>
+      <q-icon
+        name="schedule"
+        class="cursor-pointer"
+        :data-cy="col.name + 'time-button-filter'"
+        size="md"
+      >
+        <q-popup-proxy
+          cover
+          transition-show="scale"
+          transition-hide="scale"
+        >
+        <q-time
+          v-model:model-value="advancedFilters[col.name]"
+          with-seconds
+          format24h
+          flat
+          square
+        >
+         <div class="row items-center justify-end">
+          <q-btn
+            v-close-popup
+            :label="$t('close')"
+            color="primary"
+            flat
+          />
+        </div>
+      </q-time>
+        </q-popup-proxy>
+      </q-icon>
+    </template>
+  </q-input>
+</template>
+<script lang="ts">
+export default {
+  name: 'TimeFilter',
+  props: {
+    col: {
+      type: Object,
+      required: true
+    },
+    advancedFilters: {
+      type: Object,
+      required: true
+    }
+  },
+}
+</script>
+<style scoped>
+</style>

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

@@ -21,10 +21,26 @@
       {{ col.label }}
     </q-th>
   </q-tr>
+  <AdvancedFilters
+    v-if="showAdvancedFilter && !smallDevice"
+    :tableProps="tablePropsData"
+    :advancedFilters="advancedFilters"
+  />
+  <GridAdvancedFilters
+    v-if="showAdvancedFilter && smallDevice"
+    :tableProps="tablePropsData"
+    :advancedFilters="advancedFilters"
+  />
 </template>
 <script lang="ts">
+import AdvancedFilters from  './AdvancedFilters/AdvancedFilters.vue'
+import GridAdvancedFilters from './AdvancedFilters/GridAdvancedFilters.vue'
 export default {
   name: 'TableSlotHeader',
+  components: {
+    AdvancedFilters,
+    GridAdvancedFilters
+  },
   props: {
     tableProps: {
       type: Object,
@@ -37,6 +53,14 @@ export default {
     smallDevice: {
       type: Boolean,
       required: true
+    },
+    showAdvancedFilter: {
+      type: Boolean,
+      default: false
+    },
+    advancedFilters: {
+      type: Object,
+      required: true
     }
   },
   data () {

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

@@ -85,5 +85,3 @@
     padding: 0 4px;
   }
 }
-
-

package/src/i18n/en/index.ts

@@ -4,8 +4,10 @@
 const en = {
   table: {
     search: 'Search',
+    advancedFilters: 'Advanced Filters',
     cancel: 'Cancel',
-    confirm: 'Save'
+    confirm: 'Save',
+    
   },
   confirmDialog: {
     cancel: 'Cancel',

package/src/i18n/es/index.ts

@@ -4,6 +4,7 @@
 const es = {
   table: {
     search: 'Buscar',
+    advancedFilters: 'Filtros avanzados',
     cancel: 'Cancelar',
     confirm: 'Guardar'
   },