@tripup-company/element-ui-extended 0.0.9 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tripup-company/element-ui-extended",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "main": "./dist/element-ui-extended.umd.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/App.vue

@@ -1,6 +1,12 @@
 <template>
   <div id="app">
-    <composite-table :storageKey="'Project_name'" :fields="fields" :filters="filters" :filters-top="filtersTop" :repository="repository"></composite-table>
+    <composite-table
+      :storageKey="'Project_name'"
+      :fields="fields"
+      :filters="filters"
+      :top-filter="topFilter"
+      :repository="repository"
+    ></composite-table>
     <img alt="Vue logo" src="./assets/logo.png" />
   </div>
 </template>
@@ -9,35 +15,39 @@
 import { Component, Vue } from "vue-property-decorator";
 import CompositeTable from "@/components/CompositeTable/index.vue";
 import filters from "./filters";
-import filtersTop from "./filters-top";
+import topFilter from "./topFilter";
 import repository from "./repositories/contacts-repository";
 @Component({
   components: { CompositeTable },
   data: function () {
-    let repo = new repository('', '/test', null);
+    let repo = new repository("", "/test", null);
     return {
       filters: filters,
-      filtersTop: filtersTop,
+      topFilter: topFilter,
       repository: repo,
       fields: [
-      {
-        prop: 'full_name', label: 'Full Name',
-        formatter: row => {
-          return row.first_name + ' ' + row.last_name;
+        {
+          prop: "full_name",
+          label: "Full Name",
+          formatter: (row) => {
+            return row.first_name + " " + row.last_name;
+          },
         },
-      },
-      {
-        prop: 'email', label: 'Email',
-      },
-      {
-        prop: 'phone', label: 'Phone',
-      },
-      {
-        prop: 'created_at', label: 'Created at',
-      },
-    ],
-    }
-  }
+        {
+          prop: "email",
+          label: "Email",
+        },
+        {
+          prop: "phone",
+          label: "Phone",
+        },
+        {
+          prop: "created_at",
+          label: "Created at",
+        },
+      ],
+    };
+  },
 })
 export default class App extends Vue {}
 </script>

package/src/components/CompositeTable/index.vue

@@ -1,18 +1,17 @@
 <template>
   <div v-loading="loading" class="composite-table">
     <slot>
-      <slot name="top-filter" v-bind="{ filtersTop, search }">
-        <generic-top-filter
-          v-if="filtersTop.length"
-          :filters="filtersTop"
-          :search="search"
-          @apply:filter="handleApplyFilter"
-          @reset:filter="handleResetFilter"
-        />
-      </slot>
-
       <el-row :gutter="20">
         <el-col :span="18">
+          <slot name="quick-search-filter" v-bind="{ topFilter, search }">
+            <quick-search-filter
+              v-if="topFilter"
+              :filter="topFilter"
+              :search="topSearch"
+              @apply:filter="handleApplyTopFilter"
+              @reset:filter="handleResetTopFilter"
+            />
+          </slot>
           <slot name="table" v-bind="{ fields, data }">
             <generic-table
               :fields="fields"
@@ -58,10 +57,11 @@ import GenericTable from "@/components/GenericTable";
 import ListQueryService from "@/services/list-query-service";
 import { LocalStorageService } from "@/services/local-storage-service";
 import MetaModel from "@/models/meta-model";
-import GenericTopFilter from "@/components/GenericFilters/GenericTopFilter";
+import QuickSearchFilter from "@/components/GenericFilters/QuickSearchFilter";
+import FilterConverter from "../GenericFilters/filter-convertor";
 export default {
   components: {
-    GenericTopFilter,
+    QuickSearchFilter,
     GenericFilter,
     GenericTable,
     GenericPaginator,
@@ -82,16 +82,18 @@ export default {
       default: () => [],
       type: Array,
     },
-    filtersTop: {
-      default: () => [],
-      type: Array,
+    topFilter: {
+      default() {
+        return {};
+      },
+      type: Object,
     },
     filters: {
       default: () => [],
       type: Array,
     },
     includes: {
-      default: '--',
+      default: "--",
       type: String,
     },
     storageKey: {
@@ -105,25 +107,31 @@ export default {
       this.$route ? this.$route.name : "storage.key",
       localStorage
     );
+    const filterConvertor = new FilterConverter();
     let search = {};
+    let topSearch = {};
     for (const column of this.filters) {
       search[column.name] = {
         operator: "",
         value: "",
       };
     }
-    for (const column of this.filtersTop) {
-      search[column.name] = {
-        position: "top",
+    if (this.topFilter) {
+      topSearch[this.topFilter.name] = {
         value: "",
+        operator: this.topFilter.operator,
       };
     }
+
     search = Object.assign(search, listQueryService.getListQuery().search);
+    topSearch = Object.assign(topSearch, listQueryService.getListQuery().topSearch);
     return {
       loading: false,
       filter: {},
       data: [],
       search: search,
+      topSearch: topSearch,
+      filterConvertor: filterConvertor,
       meta: Object.assign(
         new MetaModel(),
         listQueryService.getListQuery().meta
@@ -135,10 +143,15 @@ export default {
     queryFilter() {
       const meta = this.listQueryService.getListQuery().meta;
       const query = {
-        page: this.meta?.pagination?.current_page ? this.meta.pagination.current_page : meta.page,
-        limit: this.meta?.pagination?.per_page ? this.meta.pagination.per_page : meta.limit,
+        page: this.meta?.pagination?.current_page
+          ? this.meta.pagination.current_page
+          : meta.page,
+        limit: this.meta?.pagination?.per_page
+          ? this.meta.pagination.per_page
+          : meta.limit,
       };
-      return { ...query, ...this.filter };
+      const filter = this.filterConvertor.applyFilter({ ...this.search, ...this.topSearch });
+      return { ...query, ...filter };
     },
     currentPage() {
       if (this.data.meta?.pagination) {
@@ -169,7 +182,10 @@ export default {
     async fetch() {
       this.loading = true;
       try {
-        const response = await this.repository.all(this.queryFilter, this.includes);
+        const response = await this.repository.all(
+          this.queryFilter,
+          this.includes
+        );
         this.data = response.data;
         Vue.set(this.data, "meta", response.meta);
       } catch (e) {
@@ -188,7 +204,7 @@ export default {
           page: this.listQueryService.getListQuery().meta.page,
         },
       });
-      this.meta.pagination.per_page = val;
+      Vue.set(this.data, "meta.per_page.current_page", val);
       this.fetch();
     },
     handleCurrentChange(val) {
@@ -198,34 +214,40 @@ export default {
           limit: this.listQueryService.getListQuery().meta.limit,
         },
       });
-      this.data.meta.pagination.current_page = val;
+      Vue.set(this.data, "meta.pagination.current_page", val);
       this.fetch();
     },
-    handleFilterChange(val) {
-      this.filter = val;
-      this.data.meta.pagination.current_page = 1;
+    handleFilterChange() {
+      Vue.set(this.data, "meta.pagination.current_page", 1);
       this.fetch();
     },
-    handleApplyFilter(filters) {
+    handleApplyFilter() {
       this.listQueryService.updateListQuery({ search: this.search });
-      this.handleFilterChange(filters);
+      this.handleFilterChange();
     },
     handleResetFilter() {
       for (const column in this.search) {
-        if (this.search[column].position === "top") {
-          this.search[column] = Object.assign(this.search[column], {
-            value: "",
-          });
-        } else {
-          this.search[column] = Object.assign(this.search[column], {
-            operator: "",
-            value: "",
-          });
-        }
+        this.search[column] = Object.assign(this.search[column], {
+          operator: "",
+          value: "",
+        });
       }
       this.listQueryService.updateListQuery({ search: {} });
       this.handleFilterChange({});
     },
+    handleApplyTopFilter() {
+      this.listQueryService.updateListQuery({ topSearch: this.topSearch });
+      this.handleFilterChange();
+    },
+    handleResetTopFilter() {
+      for (const column in this.topSearch) {
+        this.topSearch[column] = Object.assign(this.topSearch[column], {
+          value: "",
+        });
+      }
+      this.listQueryService.updateListQuery({ topSearch: {} });
+      this.handleFilterChange({});
+    },
   },
 };
 </script>

package/src/components/GenericFilters/QuickSearchFilter.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-row class="m-b-20">
+    <el-col v-if="filter">
+      <el-input
+        v-if="filter.type === 'string'"
+        v-model="search[filter.name].value"
+        clearable
+        @clear="resetFilter"
+        @keyup.enter.native="applyFilter"
+      />
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: "QuickSearchFilter",
+  props: {
+    filter: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    search: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  methods: {
+    applyFilter() {
+      this.$emit("apply:filter");
+    },
+    resetFilter() {
+      this.$emit("reset:filter");
+    },
+  },
+};
+</script>

package/src/components/GenericPaginator/index.vue

@@ -42,7 +42,6 @@ export default {
   },
   methods: {
     pageChange (val) {
-      debugger;
       this.$emit('page:change', val);
     },
     sizeChange(val) {

package/src/components/GenericTable/index.vue

@@ -3,14 +3,36 @@
     <el-table :data="data" border @sort-change="sortChange">
       <template v-for="field in fields">
         <template v-if="field.callback">
-          <el-table-column :key="field.prop" v-slot="context" :prop="field.prop" :label="field.label" :width="field.width ? field.width : null" sortable="custom">
-            <el-link @click="field.callback(field.prop, context.$index, context.row)">
-              {{ typeof field.formatter === 'function' ? field.formatter(context.row) : context.row[field.prop] }}
+          <el-table-column
+            :key="field.prop"
+            v-slot="context"
+            :prop="field.prop"
+            :label="field.label"
+            :width="field.width ? field.width : null"
+            :sortable="field.sortable ? field.sortable : null"
+          >
+            <el-link
+              @click="field.callback(field.prop, context.$index, context.row)"
+            >
+              {{
+                typeof field.formatter === "function"
+                  ? field.formatter(context.row)
+                  : context.row[field.prop]
+              }}
             </el-link>
           </el-table-column>
         </template>
         <template v-else>
-          <el-table-column :formatter="typeof field.formatter === 'function' ? field.formatter : null" :key="field.prop" :prop="field.prop" :label="field.label" :width="field.width ? field.width : null" sortable="custom" />
+          <el-table-column
+            :formatter="
+              typeof field.formatter === 'function' ? field.formatter : null
+            "
+            :key="field.prop"
+            :prop="field.prop"
+            :label="field.label"
+            :width="field.width ? field.width : null"
+            :sortable="field.sortable ? field.sortable : null"
+          />
         </template>
       </template>
     </el-table>
@@ -18,7 +40,6 @@
 </template>
 
 <script>
-
 export default {
   name: "GenericTable",
   props: {
@@ -44,8 +65,8 @@ export default {
   },
   methods: {
     sortChange(data) {
-      this.$emit('sort:change', data);
-    }
-  }
+      this.$emit("sort:change", data);
+    },
+  },
 };
 </script>

package/src/components/GenericFilters/FilterTopRow.vue

@@ -1,83 +0,0 @@
-<template>
-  <el-col v-if="column" :span="18" class="m-b-20">
-    <el-col v-if="column.type !== 'checkbox'" class="m-b-5 p-l-0">
-      <label>{{ column.label }}</label>
-    </el-col>
-    <el-input v-if="column.type==='string'" v-model="search.value" />
-  </el-col>
-</template>
-<script>
-export default {
-  props: {
-    column: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
-    search: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
-  },
-  data() {
-    return {
-      loading: false,
-      selectKey: this.column.selectKey ?? 'key',
-      selectLabel: this.column.selectLabel ?? 'label',
-      selectValue: this.column.selectValue ?? 'key',
-      filterable: this.column.filterable ?? false,
-      remote: this.column.remote ?? false,
-      remoteMethod: this.column.remoteMethod ?? null,
-      selectListLocal: this.search.selectList ? this.search.selectList : (this.column.type === 'enum' ? this.column.values : this.boolValues),
-    };
-  },
-  computed: {
-    isMultiple() {
-      return this.column.is_multiple ? this.column.is_multiple : false;
-    },
-    remoteMethodHandler: {
-      get() {
-        if (this.remoteMethod !== null) {
-          return this.remoteCall;
-        }
-        return null;
-      },
-    },
-  },
-  watch: {
-    search() {
-      if (this.search.operator === '') {
-        this.showFilter = false;
-      }
-    },
-  },
-  mounted() {
-    if (this.column.operator) {
-      this.search.operator = this.column.operator;
-    }
-  },
-  methods: {
-    async remoteCall(query) {
-      this.loading = true;
-      const response = await this.remoteMethod.all({ search: this.selectLabel + ':' + query, searchFields: this.selectLabel + ':like' });
-      this.selectListLocal = response.data;
-      this.search['selectList'] = response.data;
-      this.loading = false;
-    },
-    updateSearch(key) {
-      if (key && this.remote) {
-        const obj = { [this.selectKey]: key };
-        for (const item of this.selectListLocal) {
-          if (item[this.selectKey] === key) {
-            obj[this.selectLabel] = item[this.selectLabel];
-            this.search.selectList = [obj];
-          }
-        }
-      }
-    },
-  },
-};
-</script>

package/src/components/GenericFilters/GenericTopFilter.vue

@@ -1,54 +0,0 @@
-<template>
-  <el-row>
-    <filter-top-row
-      v-for="column in filters"
-      :key="column.name"
-      :column="column"
-      :search="search[column.name]"
-    />
-    <el-col :span="6" class="m-t-20">
-      <el-button @click="applyFilter">Filter</el-button>
-      <el-button @click="resetFilter">Reset filter</el-button>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import FilterConverter from "./filter-convertor.ts";
-import FilterTopRow from "./FilterTopRow";
-export default {
-  name: "GenericTopFilter",
-  props: {
-    filters: {
-      type: Array,
-      default: () => {
-        return {};
-      },
-    },
-    search: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-  },
-  components: { FilterTopRow },
-  data() {
-    const filterConvertor = new FilterConverter();
-    return {
-      filterConvertor: filterConvertor,
-    };
-  },
-  methods: {
-    getFilter() {
-      return this.filterConvertor.applyFilter(this.search);
-    },
-    applyFilter() {
-      this.$emit("apply:filter", this.filterConvertor.applyFilter(this.search));
-    },
-    resetFilter() {
-      this.$emit("reset:filter", {});
-    },
-  },
-};
-</script>

package/src/filters-top.js

@@ -1,8 +0,0 @@
-export default [
-  {
-    name: 'first_name,last_name,email,phone,mobile,position,street,city,state,second_email,department',
-    label: 'Search',
-    type: 'string',
-    operator: 'like_fields',
-  },
-]