@tripup-company/element-ui-extended 0.0.2 → 0.0.7

package/package.json

@@ -1,19 +1,25 @@
 {
   "name": "@tripup-company/element-ui-extended",
-  "version": "0.0.2",
+  "version": "0.0.7",
   "main": "./dist/element-ui-extended.umd.js",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "build-lib": "vue-cli-service build --target lib src/index.ts"
+    "build-lib": "vue-cli-service build --target lib src/index.ts",
+    "test": "mochapack --webpack-config webpack.test.config.js  --require mock-local-storage --require ./src/test/setup.js ./src/test/unit/**/*.js"
   },
   "dependencies": {
+    "axios": "^0.24.0",
     "core-js": "^3.6.5",
+    "element-ui": "^2.15.6",
+    "mocha": "^9.1.4",
     "npe": "^1.2.0",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
-    "vue-property-decorator": "^9.1.2"
+    "vue-i18n": "^8.26.8",
+    "vue-property-decorator": "^9.1.2",
+    "vue-router": "^3.5.3"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^4.18.0",
@@ -24,18 +30,31 @@
     "@vue/cli-service": "~4.5.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
+    "@vue/test-utils": "^1.2.1",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^6.2.2",
+    "expect": "^27.0.6",
+    "jsdom": "^16.6.0",
+    "jsdom-global": "^3.0.2",
+    "mochapack": "^2.1.2",
+    "mock-local-storage": "^1.1.19",
     "prettier": "^2.2.1",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
     "typescript": "~4.1.5",
+    "vue-loader": "^15.9.5",
     "vue-template-compiler": "^2.6.11"
   },
   "files": [
     "dist/*",
-    "src/**/*.vue"
+    "src/**/*.vue",
+    "src/services/*",
+    "src/models/*",
+    "src/lang/*",
+    "src/types/*",
+    "src/filters.js",
+    "src/filters-top.js"
   ],
   "description": "## Project setup ``` npm install ```",
   "repository": {

package/src/App.vue

@@ -1,14 +1,43 @@
 <template>
   <div id="app">
+    <composite-table :fields="fields" :filters="filters" :filters-top="filtersTop" :repository="repository"></composite-table>
     <img alt="Vue logo" src="./assets/logo.png" />
-
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import CompositeTable from "@/components/CompositeTable/index.vue";
+import filters from "./filters";
+import filtersTop from "./filters-top";
+import repository from "./repositories/contacts-repository";
 @Component({
-  components: {},
+  components: { CompositeTable },
+  data: function () {
+    let repo = new repository('', '/test', null);
+    return {
+      filters: filters,
+      filtersTop: filtersTop,
+      repository: repo,
+      fields: [
+      {
+        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',
+      },
+    ],
+    }
+  }
 })
 export default class App extends Vue {}
 </script>

package/src/components/CompositeTable/index.vue

@@ -0,0 +1,219 @@
+<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="table" v-bind="{ fields, data }">
+            <generic-table
+              :fields="fields"
+              :data="data"
+              @sort:change="handleChangeSort"
+            />
+          </slot>
+          <el-row>
+            <el-col>
+              <slot name="paginator" v-bind="{ total, limit, currentPage }">
+                <generic-paginator
+                  :total="total"
+                  :limit="limit"
+                  :current-page="currentPage"
+                  @size:change="handleSizeChange"
+                  @page:change="handleCurrentChange"
+                />
+              </slot>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="6">
+          <slot name="filter" v-bind="{ filters, search }">
+            <generic-filter
+              v-if="filters.length"
+              :filters="filters"
+              :search="search"
+              @apply:filter="handleApplyFilter"
+              @reset:filter="handleResetFilter"
+            />
+          </slot>
+        </el-col>
+      </el-row>
+    </slot>
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+import GenericFilter from "../GenericFilters/index";
+import GenericPaginator from "../GenericPaginator";
+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";
+export default {
+  components: {
+    GenericTopFilter,
+    GenericFilter,
+    GenericTable,
+    GenericPaginator,
+  },
+  name: "CompositeTable",
+  props: {
+    repository: {
+      default() {
+        return {};
+      },
+      type: Object,
+    },
+    title: {
+      default: "",
+      type: String,
+    },
+    fields: {
+      default: () => [],
+      type: Array,
+    },
+    filtersTop: {
+      default: () => [],
+      type: Array,
+    },
+    filters: {
+      default: () => [],
+      type: Array,
+    },
+  },
+  data: function () {
+    const localStorage = new LocalStorageService();
+    const listQueryService = new ListQueryService(
+      this.$route ? this.$route.name : "storage.key",
+      localStorage
+    );
+    let search = {};
+    for (const column of this.filters) {
+      search[column.name] = {
+        operator: "",
+        value: "",
+      };
+    }
+    for (const column of this.filtersTop) {
+      search[column.name] = {
+        position: "top",
+        value: "",
+      };
+    }
+    search = Object.assign(search, listQueryService.getListQuery().search);
+    return {
+      loading: false,
+      filter: {},
+      data: [],
+      search: search,
+      meta: Object.assign(
+        new MetaModel(),
+        listQueryService.getListQuery().meta
+      ),
+      listQueryService: listQueryService,
+    };
+  },
+  computed: {
+    currentPage() {
+      if (this.data.meta?.pagination) {
+        return this.data.meta.pagination.current_page;
+      }
+      return 0;
+    },
+    total() {
+      if (this.data.meta?.pagination) {
+        return this.data.meta.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;
+      }
+      return 10;
+    },
+  },
+  mounted() {
+    this.fetch();
+  },
+  methods: {
+    async fetch() {
+      this.loading = true;
+      try {
+        const response = await this.repository.all(
+          this.listQueryService.getListQuery()
+        );
+        this.data = response.data;
+        Vue.set(this.data, "meta", response.meta);
+      } catch (e) {
+        this.$message.error(e.message);
+      }
+      this.loading = false;
+    },
+    handleChangeSort(val) {
+      this.listQueryService.updateSort(val);
+      this.fetch();
+    },
+    handleSizeChange(val) {
+      this.listQueryService.updateListQuery({
+        meta: {
+          limit: val,
+          page: this.listQueryService.getListQuery().meta.page,
+        },
+      });
+      this.meta.pagination.per_page = val;
+      this.fetch();
+    },
+    handleCurrentChange(val) {
+      this.listQueryService.updateListQuery({
+        meta: {
+          page: val,
+          limit: this.listQueryService.getListQuery().meta.limit,
+        },
+      });
+      this.meta.pagination.current_page = val;
+      this.fetch();
+    },
+    handleFilterChange(val) {
+      this.filter = val;
+      this.meta.pagination.current_page = 1;
+      this.fetch();
+    },
+    handleApplyFilter(filters) {
+      this.listQueryService.updateListQuery({ search: this.search });
+      this.handleFilterChange(filters);
+    },
+    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.listQueryService.updateListQuery({ search: {} });
+      this.handleFilterChange({});
+    },
+  },
+};
+</script>
+
+<style scoped></style>

package/src/components/{GenericTable → GenericFilters}/FilterRow.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-row v-if="column.position !== 'top'" class="m-b-10">
+  <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>
@@ -20,8 +20,10 @@
     </el-row>
   </el-row>
 </template>
+
 <script>
 export default {
+  name: "FilterRow",
   props: {
     column: {
       type: Object,
@@ -60,6 +62,7 @@ export default {
       ],
       enumOperators: [
         { 'value': 'equal', 'label': 'is' },
+        { 'value': 'in', 'label': 'in' },
       ],
       boolValues: {
         null: 'empty',
@@ -93,5 +96,9 @@ export default {
       return disable;
     },
   },
-};
+}
 </script>
+
+<style scoped>
+
+</style>

package/src/components/{GenericTable → GenericFilters}/FilterTopRow.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-col v-if="column.position === 'top'" :span="18" class="m-b-20">
+  <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>

package/src/components/{GenericTable → GenericFilters}/GenericTopFilter.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <el-row>
     <filter-top-row
-      v-for="(column) in data.filters"
+      v-for="column in filters"
       :key="column.name"
       :column="column"
       :search="search[column.name]"
@@ -10,16 +10,29 @@
       <el-button @click="applyFilter">Filter</el-button>
       <el-button @click="resetFilter">Reset filter</el-button>
     </el-col>
-  </div>
+  </el-row>
 </template>
 
 <script>
-import FilterTopRow from './FilterTopRow';
-import FilterConverter from './filter-convertor.ts';
+import FilterConverter from "./filter-convertor.ts";
+import FilterTopRow from "./FilterTopRow";
 export default {
-  name: 'GenericTopFilter',
+  name: "GenericTopFilter",
+  props: {
+    filters: {
+      type: Array,
+      default: () => {
+        return {};
+      },
+    },
+    search: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
   components: { FilterTopRow },
-  inject: ['data', 'actions', 'search'],
   data() {
     const filterConvertor = new FilterConverter();
     return {
@@ -31,10 +44,10 @@ export default {
       return this.filterConvertor.applyFilter(this.search);
     },
     applyFilter() {
-      this.actions.handleApplyFilter();
+      this.$emit("apply:filter", this.filterConvertor.applyFilter(this.search));
     },
     resetFilter() {
-      this.actions.handleResetFilter();
+      this.$emit("reset:filter", {});
     },
   },
 };

package/src/components/{GenericTable/GenericFilter.vue → GenericFilters/index.vue}

@@ -1,7 +1,7 @@
 <template>
   <el-card>
     <filter-row
-      v-for="(column) in data.filters"
+      v-for="(column) in filters"
       :key="column.name"
       :column="column"
       :search="search[column.name]"
@@ -12,12 +12,22 @@
 </template>
 
 <script>
-import FilterRow from './FilterRow';
-import FilterConverter from './filter-convertor.ts';
+import FilterRow from "./FilterRow";
+import FilterConverter from "./filter-convertor";
+
 export default {
-  name: 'GenericFilter',
+name: "GenericFilter",
+  props: {
+    filters: {
+      type: Array,
+      default: () => { return {}}
+    },
+    search: {
+      type: Object,
+      default: () => { return {}}
+    },
+  },
   components: { FilterRow },
-  inject: ['data', 'actions', 'search'],
   data() {
     const filterConvertor = new FilterConverter();
     return {
@@ -29,11 +39,15 @@ export default {
       return this.filterConvertor.applyFilter(this.search);
     },
     applyFilter() {
-      this.actions.handleApplyFilter();
+      this.$emit('apply:filter', this.filterConvertor.applyFilter(this.search) );
     },
     resetFilter() {
-      this.actions.handleResetFilter();
+      this.$emit('reset:filter', {});
     },
-  },
-};
+  }
+}
 </script>
+
+<style scoped>
+
+</style>

package/src/components/GenericPaginator/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="m-t-15">
+    <el-pagination
+      :total="total"
+      :current-page="currentPage"
+      :page-size="limit"
+      :layout="'total, sizes, prev, pager, next, jumper'"
+      @size-change="sizeChange"
+      @current-change="pageChange"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "GeneticPaginator",
+  props: {
+    limit: {
+      type: Number,
+      default () {
+        return 0;
+      },
+    },
+    currentPage: {
+      type: Number,
+      default () {
+        return 0;
+      },
+    },
+    total: {
+      type: Number,
+      default () {
+        return 0;
+      },
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 15, 20, 30, 50];
+      },
+    },
+  },
+  methods: {
+    pageChange (val) {
+      debugger;
+      this.$emit('page:change', val);
+    },
+    sizeChange(val) {
+      this.$emit('size:change', val);
+    },
+  }
+}
+</script>