@freteclick/quasar-financial-ui 1.0.113 → 1.0.115

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@freteclick/quasar-financial-ui",
-  "version": "1.0.113",
+  "version": "1.0.115",
   "author": "FreteClick",
   "description": "FreteClick financial Quasar UI Component",
   "license": "MIT",

package/src/components/common/Filters.vue

@@ -1,12 +1,36 @@
 <template>
-  <q-card class="row q-pa-md">
-    <div class="col-xs-12 q-pb-md text-h6">Faturas</div>
-    <div class="col-sm-6 col-xs-12 q-pa-md">
-      <q-input stack-label label="Buscar por" debounce="1000" v-model="filters.text" class="full-width" />
+  <q-card
+    class="row q-pa-md invoice-filters"
+    :class="{ 'invoice-filters--inline': variant === 'filter-box' }"
+  >
+    <div v-if="variant !== 'filter-box'" class="col-xs-12 q-pb-md text-h6">
+      Faturas
     </div>
-    <div class="col-sm-6 col-xs-12 q-pa-md">
-      <q-select stack-label label="Status da fatura" v-model="filters.status" :options="statuses" class="full-width"
-        :loading="loadingStatuses">
+
+    <div class="col-sm-6 col-xs-12 q-pa-md invoice-filters__field">
+      <q-input
+        v-model="filters.text"
+        stack-label
+        label="Buscar por"
+        :debounce="variant === 'filter-box' ? 0 : 1000"
+        @blur="onTextBlur"
+        :outlined="variant === 'filter-box'"
+        :dense="variant === 'filter-box'"
+        clearable
+        class="full-width"
+      />
+    </div>
+    <div class="col-sm-6 col-xs-12 q-pa-md invoice-filters__field">
+      <q-select
+        v-model="filters.status"
+        :options="statuses"
+        stack-label
+        label="Status da fatura"
+        :outlined="variant === 'filter-box'"
+        :dense="variant === 'filter-box'"
+        :loading="loadingStatuses"
+        class="full-width"
+      >
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey"> Sem resultados </q-item-section>
@@ -14,9 +38,35 @@
         </template>
       </q-select>
     </div>
-    <div class="col-6">
-      <q-select stack-label label="Tipo de Fatura" v-model="filters.orderType" :options="orderType" class="full-width"
-        :loading="loadingOrderType">
+    <div v-if="showCategory" class="col-sm-6 col-xs-12 q-pa-md invoice-filters__field">
+      <q-select
+        v-model="filters.category"
+        :options="categories"
+        stack-label
+        label="Categoria"
+        :outlined="variant === 'filter-box'"
+        :dense="variant === 'filter-box'"
+        :loading="loadingCategories"
+        class="full-width"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">Sem categorias</q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+    </div>
+    <div class="col-6 q-pa-md invoice-filters__field">
+      <q-select
+        v-model="filters.orderType"
+        :options="orderType"
+        stack-label
+        label="Tipo de Fatura"
+        :outlined="variant === 'filter-box'"
+        :dense="variant === 'filter-box'"
+        :loading="loadingOrderType"
+        class="full-width"
+      >
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey"> Sem resultados </q-item-section>
@@ -24,8 +74,9 @@
         </template>
       </q-select>
     </div>
-    <div class="col-6">
+    <div class="col-6 q-pa-md invoice-filters__field invoice-filters__date">
       <DataFilter :fromDate="filters.date.from" :toDate="filters.date.to" :showButton="false"
+        :emitOnBlur="variant === 'filter-box'"
         @dateChanged="dateChanged" />
     </div>
   </q-card>
@@ -45,10 +96,19 @@ export default {
       type: Object,
       required: true,
     },
+    variant: {
+      type: String,
+      default: "default",
+    },
+    showCategory: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   created() {
     this.requestStatuses();
+    if (this.showCategory) this.requestCategories(this.filters.company);
   },
 
   data() {
@@ -56,7 +116,9 @@ export default {
 
     return {
       statuses: statuses,
+      categories: [{ label: "Todas", value: null }],
       loadingStatuses: false,
+      loadingCategories: false,
       loadingOrderType: false,
       orderType: [
         {
@@ -87,7 +149,7 @@ export default {
 
   watch: {
     "filters.text"() {
-      this.$emit("onRequest");
+      if (this.variant !== "filter-box") this.$emit("onRequest");
     },
     "filters.orderType"() {
       this.$emit("onRequest");
@@ -95,39 +157,84 @@ export default {
     "filters.status"() {
       this.$emit("onRequest");
     },
+    "filters.category"() {
+      if (this.showCategory) this.$emit("onRequest");
+    },
+    "filters.company"(company) {
+      if (this.showCategory) this.requestCategories(company);
+    },
   },
 
   methods: {
     ...mapActions({
       getStatuses: "receiveInvoice/getStatuses",
+      getCategories: "categories/getCategories",
     }),
 
+    onTextBlur() {
+      if (this.variant === "filter-box") this.$emit("onRequest");
+    },
+
+    requestCategories(company) {
+      if (!company || !company.id) {
+        this.categories = [{ label: "Todas", value: null }];
+        return Promise.resolve(this.categories);
+      }
+
+      this.loadingCategories = true;
+      return this.getCategories({
+        params: {
+          context: "expense",
+          company: company.id,
+        },
+      })
+        .then((members) => {
+          const options = [{ label: "Todas", value: null }];
+          (members || []).forEach((category) => {
+            const idFromIri = String(category["@id"] || "").match(/\/categories\/(\d+)$/);
+            const id = Number(category.id || (idFromIri && idFromIri[1]));
+
+            if (id) options.push({ label: category.name, value: id });
+          });
+          this.categories = options;
+          return options;
+        })
+        .catch(() => {
+          this.categories = [{ label: "Todas", value: null }];
+          return this.categories;
+        })
+        .finally(() => {
+          this.loadingCategories = false;
+        });
+    },
+
     requestStatuses() {
       this.loadingStatuses = true;
-      this.getStatuses({
+      return this.getStatuses({
         visibility: "public",
         context: "invoice",
         realStatus: ["open", "pending", "canceled", "closed"],
-      }).then((statuses) => {
-        if (statuses.length) {
-          let data = [];
-
-          data.push({
-            label: "Todos",
-            value: null,
-          });
+      })
+        .then((statuses) => {
+          const data = [{ label: "Todos", value: null }];
+          (Array.isArray(statuses) ? statuses : []).forEach((status) => {
+            const id = String(status["@id"] || "").replace(/[^0-9]/g, "");
+            if (!id) return;
 
-          for (let index in statuses) {
             data.push({
-              label: this.$t(`invoice.statuses.${statuses[index].status}`),
-              value: statuses[index]["@id"].replace(/[^0-9]/g, ""),
+              label: this.$t(`invoice.statuses.${status.status}`),
+              value: id,
             });
-          }
+          });
 
           this.statuses = data;
-        }
-        this.loadingStatuses = false;
-      });
+        })
+        .catch(() => {
+          this.statuses = [{ label: "Todos", value: null }];
+        })
+        .finally(() => {
+          this.loadingStatuses = false;
+        });
     },
     dateChanged(item) {
       this.filters.date = item;
@@ -135,4 +242,68 @@ export default {
     },
   },
 };
-</script>
+</script>
+
+<style lang="scss" scoped>
+.invoice-filters--inline {
+  display: flex;
+  width: max-content;
+  min-width: 100%;
+  max-width: none;
+  flex-flow: row nowrap;
+  align-items: flex-end;
+  justify-content: flex-start;
+  gap: 12px;
+  padding: 0 !important;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.invoice-filters--inline > .invoice-filters__field {
+  flex: 1 0 190px;
+  width: 190px;
+  min-width: 190px;
+  max-width: none;
+  margin: 0;
+  padding: 0 !important;
+}
+
+.invoice-filters--inline > .invoice-filters__date {
+  flex: 2 0 360px;
+  width: 360px;
+  min-width: 360px;
+}
+
+.invoice-filters--inline :deep(.q-field) {
+  width: 100%;
+  min-width: 0;
+}
+
+.invoice-filters--inline :deep(.q-field__control),
+.invoice-filters--inline :deep(.q-field__control:before),
+.invoice-filters--inline :deep(.q-field__control:after) {
+  min-height: 42px;
+  border-radius: 10px;
+}
+
+.invoice-filters--inline :deep(.container-filter) {
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  padding: 0;
+}
+
+.invoice-filters--inline :deep(.date-filter__field) {
+  flex: 1 1 0;
+  width: 100%;
+  max-width: none !important;
+  min-width: 150px;
+  min-height: 0;
+  margin: 0;
+}
+
+</style>