@tripup-company/element-ui-extended 0.0.79 → 0.0.82

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;;;;CAkBnB"}
+{"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;;;;CAqBnB"}

package/package.json

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

package/src/components/CompositeTable/index.vue

@@ -2,12 +2,24 @@
   <div v-loading="loading" class="composite-table">
     <slot>
       <el-row :gutter="20">
-        <el-col :span="filters.length ? 18 : 24">
+        <el-col :span="filters.length && showRightFilter ? 18 : 24">
+          <slot
+            v-if="showTopFilter"
+            v-bind="{ filters, search, handleApplyFilter, handleResetFilter }"
+            name="top-filter"
+          >
+            <generic-filter
+              :filters="filters"
+              :search="search"
+              @apply:filter="handleApplyFilter"
+              @reset:filter="handleResetFilter"
+            />
+          </slot>
           <slot
             name="quick-search-filter"
             v-bind="{
               topFilter,
-              search,
+              topSearch,
               handleApplyTopFilter,
               handleResetTopFilter,
             }"
@@ -43,6 +55,7 @@
         </el-col>
         <el-col :span="filters.length ? 6 : 0">
           <slot
+            v-if="showRightFilter"
             name="filter"
             v-bind="{ filters, search, handleApplyFilter, handleResetFilter }"
           >
@@ -79,6 +92,14 @@ export default {
   },
   name: "CompositeTable",
   props: {
+    showTopFilter: {
+      default: false,
+      type: Boolean,
+    },
+    showRightFilter: {
+      default: true,
+      type: Boolean,
+    },
     repository: {
       default() {
         return {};
@@ -115,6 +136,10 @@ export default {
       default: "storage.key",
       type: String,
     },
+    filterConvertor: {
+      default: () => new FilterConverter(),
+      type: Object,
+    },
   },
   data: function () {
     const localStorage = new LocalStorageService(this.storageKey);
@@ -123,7 +148,6 @@ export default {
       localStorage
     );
     let listQueryObj = listQueryService.getListQuery();
-    const filterConvertor = new FilterConverter();
     let search = {};
     let topSearch = {};
     for (const column of this.filters) {
@@ -140,16 +164,13 @@ export default {
     }
 
     search = Object.assign(search, listQueryObj.search);
-    topSearch = Object.assign(
-      topSearch,
-      listQueryObj.topSearch
-    );
+    topSearch = Object.assign(topSearch, listQueryObj.topSearch);
     let sort = {};
     if (listQueryObj.orderBy) {
-      sort = Object.assign(sort, {orderBy: listQueryObj.orderBy})
+      sort = Object.assign(sort, { orderBy: listQueryObj.orderBy });
     }
     if (listQueryObj.sortedBy) {
-      sort = Object.assign(sort, {sortedBy: listQueryObj.sortedBy})
+      sort = Object.assign(sort, { sortedBy: listQueryObj.sortedBy });
     }
     return {
       loading: false,
@@ -157,7 +178,6 @@ export default {
       data: [],
       search: search,
       topSearch: topSearch,
-      filterConvertor: filterConvertor,
       meta: listQueryService.getListQuery().meta,
       metaModel: new MetaModel(),
       listQueryService: listQueryService,

package/src/components/GenericFilters/FilterRow.vue

@@ -143,7 +143,8 @@ export default {
         case "string":
           operators = this.stringOperators;
           break;
-        case ("enum", "select"):
+        case "enum":
+        case "select":
           if (this.column.operator) {
             operators = [
               {
@@ -198,10 +199,7 @@ export default {
     searchLocal: {
       deep: true,
       handler() {
-        this.$emit("update:search", {
-          name: this.name,
-          value: this.searchLocal,
-        });
+        this.$emit("update:search", this.searchLocal);
         if (this.searchLocal.operator == "") {
           this.showFilter = false;
         }

package/src/components/GenericFilters/index.vue

@@ -5,8 +5,7 @@
       :key="column.name"
       :name="column.name"
       :column="column"
-      :search="search[column.name]"
-      @search:upate="filterRowUpdate"
+      :search.sync="localSearch[column.name]"
     />
     <el-button @click="applyFilter">Filter</el-button>
     <el-button @click="resetFilter">Reset filter</el-button>
@@ -37,6 +36,7 @@ export default {
   data() {
     const filterConvertor = new FilterConverter();
     return {
+      localSearch: this.search,
       filterConvertor: filterConvertor,
     };
   },
@@ -45,15 +45,11 @@ export default {
       return this.filterConvertor.applyFilter(this.search);
     },
     applyFilter() {
-      console.log(this.search);
-      this.$emit("apply:filter", this.search);
+      this.$emit('apply:filter', this.localSearch);
     },
     resetFilter() {
       this.$emit("reset:filter", {});
     },
-    filterRowUpdate(name, value) {
-      this.$set(this.search, name, value);
-    },
   },
 };
 </script>

package/src/components/GenericTable/index.vue

@@ -11,21 +11,16 @@
             :width="field.width ? field.width : null"
             :sortable="field.sortable ? field.sortable : null"
           >
+            <el-link v-if="field.href" :href="customHref(field, context)">
+              {{ customLinkLabel(field, context) }}
+            </el-link>
             <el-link
-                :href="
-                field.href
-                  ? typeof field.href === 'function'
-                    ? field.href(field.prop, context.$index, context.row)
-                    : field.href
-                  : '#'
+              v-else
+              @click.prevent="
+                field.callback(field.prop, context.$index, context.row)
               "
-              @click.prevent="field.callback(field.prop, context.$index, context.row)"
             >
-              {{
-                typeof field.formatter === "function"
-                  ? field.formatter(context.row)
-                  : context.row[field.prop]
-              }}
+              {{ customLinkLabel(field, context) }}
             </el-link>
           </el-table-column>
         </template>
@@ -66,10 +61,23 @@ export default {
       loading: false,
     };
   },
+  computed: {},
   methods: {
     sortChange(data) {
       this.$emit("sort:change", data);
     },
+    customHref(field, context) {
+      return field.href
+        ? typeof field.href === "function"
+          ? field.href(field.prop, context.$index, context.row)
+          : field.href
+        : "#";
+    },
+    customLinkLabel(field, context) {
+      return typeof field.formatter === "function"
+        ? field.formatter(context.row)
+        : context.row[field.prop];
+    },
   },
 };
 </script>