@tripup-company/element-ui-extended 0.0.64 → 0.0.65

package/dist/src/components/GenericFilters/filter-convertor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filter-convertor.d.ts","sourceRoot":"","sources":["../../../../src/components/GenericFilters/filter-convertor.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,OAAO,eAAe;IAGlC,WAAW,CAAC,MAAM,KAAA;;;;CAgBnB"}
+{"version":3,"file":"filter-convertor.d.ts","sourceRoot":"","sources":["../../../../src/components/GenericFilters/filter-convertor.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,OAAO,eAAe;IAGlC,WAAW,CAAC,MAAM,KAAA;;;;CAiBnB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tripup-company/element-ui-extended",
-  "version": "0.0.64",
+  "version": "0.0.65",
   "main": "./dist/element-ui-extended.umd.js",
   "scripts": {
     "serve": "vue-cli-service serve && tsc --emitDeclarationOnly",

package/src/components/GenericFilters/FilterRow.vue

@@ -13,7 +13,7 @@
         :span="24"
         class="p-b-10"
       >
-        <el-select v-model="search.operator" placeholder="Select">
+        <el-select v-model="searchLocal.operator" placeholder="Select">
           <el-option
             v-for="operator in operators"
             :key="operator.value"
@@ -25,12 +25,12 @@
       <el-col :span="24">
         <el-input
           v-if="column.type === 'string'"
-          v-show="!isDisableInput(search.operator)"
-          v-model="search.value"
+          v-show="!isDisableInput(searchLocal.operator)"
+          v-model="searchLocal.value"
         />
         <el-date-picker
           v-else-if="column.type === 'date'"
-          v-model="search.value"
+          v-model="searchLocal.value"
           class="w-100"
           end-placeholder="To"
           format="dd.MM.yy"
@@ -44,7 +44,7 @@
         <el-select
           refs="select"
           v-else
-          v-model="search.value"
+          v-model="searchLocal.value"
           :multiple="isMultiple"
           placeholder="Select"
           :filterable="filterable"
@@ -67,7 +67,7 @@
 </template>
 <script>
 import { upperFirst } from 'lodash'
-
+import Vue from "vue";
 export default {
   props: {
     column: {
@@ -82,6 +82,10 @@ export default {
         return {};
       },
     },
+    name: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     const boolValues = [
@@ -90,6 +94,7 @@ export default {
       { value: false, name: "false" },
     ];
     return {
+      searchLocal: this.search,
       loading: false,
       selectKey: this.column.selectKey ?? "value",
       selectLabel: this.column.selectLabel ?? "name",
@@ -161,16 +166,27 @@ export default {
   watch: {
     showFilter() {
       if (this.showFilter === false) {
-        this.search.operator = "";
-        this.search.value = "";
-      } else if (this.search.operator === "" && this.operators.length === 1) {
-        this.search.operator = this.operators[0].value;
+        this.searchLocal.operator = "";
+        this.searchLocal.value = "";
+      } else if (this.searchLocal.operator === "" && this.operators.length === 1) {
+        this.searchLocal.operator = this.operators[0].value;
       }
     },
-    search: {
+    search (newValue ) {
+      console.log('seach updated');
+      if (newValue !== this.search) {
+        this.searchLocal = Object.assign({}, this.search);
+      }
+
+      console.log(this.searchLocal);
+    },
+    searchLocal: {
       deep: true,
       handler() {
-        if (this.search.operator == '') {
+        console.log('searchLocal updated');
+        this.$emit("update:search", { name: this.name, value: this.searchLocal});
+        console.log(this.searchLocal);
+        if (this.searchLocal.operator == '') {
           this.showFilter = false;
         }
       }
@@ -180,7 +196,7 @@ export default {
     isDisableInput(operator) {
       const disable = this.disabledInputOperations.includes(operator);
       if (disable) {
-        this.search.value = "";
+        this.searchLocal.value = "";
       }
       return disable;
     },
@@ -191,7 +207,7 @@ export default {
         searchFields: this.selectLabel + ":like",
       });
       this.selectListLocal = response.data;
-      this.search["selectList"] = response.data;
+      this.searchLocal["selectList"] = response.data;
       this.loading = false;
     },
     updateSearch(key) {
@@ -200,7 +216,7 @@ export default {
         for (const item of this.selectListLocal) {
           if (item[this.selectKey] === key) {
             obj[this.selectLabel] = item[this.selectLabel];
-            this.search.selectList = [obj];
+            this.searchLocal.selectList = [obj];
           }
         }
       }

package/src/components/GenericFilters/index.vue

@@ -1,10 +1,12 @@
 <template>
   <el-card>
     <filter-row
-      v-for="(column) in filters"
+      v-for="column in filters"
       :key="column.name"
+      :name="column.name"
       :column="column"
       :search="search[column.name]"
+      @search:upate="filterRowUpdate"
     />
     <el-button @click="applyFilter">Filter</el-button>
     <el-button @click="resetFilter">Reset filter</el-button>
@@ -16,15 +18,19 @@ import FilterRow from "./FilterRow";
 import FilterConverter from "./filter-convertor";
 
 export default {
-name: "GenericFilter",
+  name: "GenericFilter",
   props: {
     filters: {
       type: Array,
-      default: () => { return {}}
+      default: () => {
+        return {};
+      },
     },
     search: {
       type: Object,
-      default: () => { return {}}
+      default: () => {
+        return {};
+      },
     },
   },
   components: { FilterRow },
@@ -40,15 +46,16 @@ name: "GenericFilter",
     },
     applyFilter() {
       console.log(this.search);
-      this.$emit('apply:filter', this.filterConvertor.applyFilter(this.search) );
+      this.$emit("apply:filter", this.search);
     },
     resetFilter() {
-      this.$emit('reset:filter', {});
+      this.$emit("reset:filter", {});
     },
-  }
-}
+    filterRowUpdate(name, value) {
+      this.$set(this.search, name, value);
+    },
+  },
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>