@tripup-company/element-ui-extended 0.0.8 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tripup-company/element-ui-extended",
-  "version": "0.0.8",
+  "version": "0.0.12",
   "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 :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,70 +82,91 @@ export default {
       default: () => [],
       type: Array,
     },
-    filtersTop: {
-      default: () => [],
-      type: Array,
+    topFilter: {
+      default() {
+        return {};
+      },
+      type: Object,
     },
     filters: {
       default: () => [],
       type: Array,
     },
     includes: {
-      default: '--',
+      default: "--",
+      type: String,
+    },
+    storageKey: {
+      default: "storage.key",
       type: String,
     },
   },
   data: function () {
-    const localStorage = new LocalStorageService();
+    const localStorage = new LocalStorageService(this.storageKey);
     const listQueryService = new ListQueryService(
       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,
-      meta: Object.assign(
-        new MetaModel(),
-        listQueryService.getListQuery().meta
-      ),
+      topSearch: topSearch,
+      filterConvertor: filterConvertor,
+      meta: listQueryService.getListQuery().meta,
+      metaModel: new MetaModel(),
       listQueryService: listQueryService,
     };
   },
   computed: {
+    queryFilter() {
+      const query = {
+        page: this.meta.page,
+        limit: this.meta.limit,
+      };
+      const filter = this.filterConvertor.applyFilter({
+        ...this.search,
+        ...this.topSearch,
+      });
+      return { ...query, ...filter };
+    },
     currentPage() {
-      if (this.data.meta?.pagination) {
-        return this.data.meta.pagination.current_page;
+      if (this.meta) {
+        return this.meta.page;
       }
       return 0;
     },
     total() {
-      if (this.data.meta?.pagination) {
-        return this.data.meta.pagination.total;
+      if (this.metaModel?.pagination) {
+        return this.metaModel.pagination.total;
       }
       return 0;
     },
     limit() {
-      if (this.data.meta?.pagination) {
-        return this.data.meta.pagination.per_page;
-      }
-      if (this.listQueryService.getListQuery().meta?.limit) {
-        return this.listQueryService.getListQuery().meta?.limit;
+      if (this.meta) {
+        return this.meta.limit;
       }
       return 10;
     },
@@ -158,11 +179,11 @@ export default {
       this.loading = true;
       try {
         const response = await this.repository.all(
-          this.listQueryService.getListQuery(),
+          this.queryFilter,
           this.includes
         );
         this.data = response.data;
-        Vue.set(this.data, "meta", response.meta);
+        Vue.set(this, "metaModel", response.meta);
       } catch (e) {
         this.$message.error(e.message);
       }
@@ -179,7 +200,7 @@ export default {
           page: this.listQueryService.getListQuery().meta.page,
         },
       });
-      this.meta.pagination.per_page = val;
+      Vue.set(this.meta, "limit", val);
       this.fetch();
     },
     handleCurrentChange(val) {
@@ -189,34 +210,39 @@ export default {
           limit: this.listQueryService.getListQuery().meta.limit,
         },
       });
-      this.meta.pagination.current_page = val;
+      Vue.set(this.meta, "page", val);
       this.fetch();
     },
-    handleFilterChange(val) {
-      this.filter = val;
-      this.meta.pagination.current_page = 1;
-      this.fetch();
+    handleFilterChange() {
+      this.handleCurrentChange(1);
     },
-    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/FilterRow.vue

@@ -2,28 +2,66 @@
   <el-row class="m-b-10">
     <el-row>
       <el-col :lg="4" :md="4" :sm="4" :xs="4">
-        <el-checkbox v-model="showFilter"><span>{{ column.label }}</span></el-checkbox>
+        <el-checkbox v-model="showFilter"
+          ><span>{{ column.label }}</span></el-checkbox
+        >
       </el-col>
     </el-row>
     <el-row v-if="showFilter" class="m-t-5">
-      <el-col :span="24" class="p-b-10">
+      <el-col v-if="operators.length !== 1" :span="24" class="p-b-10">
         <el-select v-model="search.operator" placeholder="Select">
-          <el-option v-for="(operator) in column.type==='string' ? stringOperators : enumOperators" :key="operator.value" :value="operator.value" :label="operator.label" />
+          <el-option
+            v-for="operator in operators"
+            :key="operator.value"
+            :label="operator.label"
+            :value="operator.value"
+          />
         </el-select>
       </el-col>
       <el-col :span="24">
-        <el-input v-if="column.type==='string'" v-show="!isDisableInput(search.operator)" v-model="search.value" />
-        <el-select v-else v-model="search.value" placeholder="Select" :multiple="isMultiple">
-          <el-option v-for="(label, value) in (column.type==='enum' ? column.values : boolValues)" :key="value" :value="value" :label="label" />
+        <el-input
+          v-if="column.type === 'string'"
+          v-show="!isDisableInput(search.operator)"
+          v-model="search.value"
+        />
+        <el-date-picker
+          v-else-if="column.type === 'date'"
+          v-model="search.value"
+          class="w-100"
+          end-placeholder="To"
+          format="dd.MM.yy"
+          placeholder="Pick a day"
+          range-separator="-"
+          start-placeholder="From"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+        />
+        <el-select
+          refs="select"
+          v-else
+          v-model="search.value"
+          :multiple="isMultiple"
+          placeholder="Select"
+          :filterable="filterable"
+          :remote="remote"
+          :remote-method="remoteMethodHandler"
+          :loading="loading"
+          clearable
+          @change="updateSearch"
+        >
+          <el-option
+            v-for="item in selectListLocal"
+            :key="item[selectKey]"
+            :label="item[selectLabel]"
+            :value="item[selectValue]"
+          />
         </el-select>
       </el-col>
     </el-row>
   </el-row>
 </template>
-
 <script>
 export default {
-  name: "FilterRow",
   props: {
     column: {
       type: Object,
@@ -38,67 +76,123 @@ export default {
       },
     },
   },
-  computed: {
-    isMultiple() {
-      return this.column.is_multiple ? this.column.is_multiple : false;
-    },
-  },
   data() {
     return {
-      showFilter: this.search.operator !== '',
+      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,
+      showFilter: this.search.operator !== "",
       stringOperators: [
-        { 'value': 'equal', 'label': 'is equal' },
-        { 'value': 'not_equal', 'label': 'is not equal' },
-        { 'value': 'contains', 'label': 'contains' },
-        { 'value': 'not_contains', 'label': 'doesn’t contain' },
-        { 'value': 'is_null', 'label': 'is empty' },
-        { 'value': 'is_not_null', 'label': 'is not empty' },
-        { 'value': 'start_with', 'label': 'begins with' },
-        { 'value': 'end_with', 'label': 'ends with' },
-      ],
-      disabledInputOperations: [
-        'is_null',
-        'is_not_null',
-      ],
-      enumOperators: [
-        { 'value': 'equal', 'label': 'is' },
-        { 'value': 'in', 'label': 'in' },
+        { value: "equal", label: "is equal" },
+        { value: "not_equal", label: "is not equal" },
+        { value: "contains", label: "contains" },
+        { value: "not_contains", label: "doesn’t contain" },
+        { value: "is_null", label: "is empty" },
+        { value: "is_not_null", label: "is not empty" },
+        { value: "start_with", label: "begins with" },
+        { value: "end_with", label: "ends with" },
       ],
+      disabledInputOperations: ["is_null", "is_not_null"],
+      enumOperators: [{ value: "equal", label: "is" }],
+      enumOperatorsMultiple: [{ value: "in", label: "in" }],
+      dateOperators: [{ value: "between", label: "between" }],
       boolValues: {
-        null: 'empty',
-        true: 'true',
-        false: 'false',
+        null: "empty",
+        true: "true",
+        false: "false",
       },
     };
   },
+  computed: {
+    operators() {
+      let operators = [];
+      switch (this.column.type) {
+        case "string":
+          operators = this.stringOperators;
+          break;
+        case "enum":
+          if (this.column.is_multiple) {
+            operators = this.enumOperatorsMultiple;
+          } else {
+            operators = this.enumOperators;
+          }
+          break;
+        case "date":
+          operators = this.dateOperators;
+          break;
+      }
+      return operators;
+    },
+    isMultiple() {
+      return this.column.is_multiple ? this.column.is_multiple : false;
+    },
+    remoteMethodHandler: {
+      get() {
+        if (this.remoteMethod !== null) {
+          return this.remoteCall;
+        }
+        return null;
+      },
+    },
+  },
   watch: {
     showFilter() {
       if (this.showFilter === false) {
-        this.search.operator = '';
-        this.search.value = '';
+        this.search.operator = "";
+        this.search.value = "";
+      } else if (this.search.operator === "" && this.operators.length === 1) {
+        this.search.operator = this.operators[0].value;
       }
     },
-    search: {
-      handler: function(newValue) {
-        if (newValue.operator === '') {
-          this.showFilter = false;
-        }
-      },
-      deep: true,
+    search() {
+      if (this.search.operator === "") {
+        this.showFilter = false;
+      }
     },
   },
+  mounted() {
+    if (this.operators.length === 1) {
+      // this.search.operator = this.operators[0].value;
+    }
+  },
   methods: {
     isDisableInput(operator) {
-      const disable = this.disabledInputOperations.indexOf(operator) !== -1;
+      const disable = this.disabledInputOperations.includes(operator);
       if (disable) {
-        this.search.value = '';
+        this.search.value = "";
       }
       return disable;
     },
+    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>
-
-<style scoped>
-
-</style>

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>