@tripup-company/element-ui-extended 0.0.1

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@tripup-company/element-ui-extended",
+  "version": "0.0.1",
+  "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"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "npe": "^1.2.0",
+    "vue": "^2.6.11",
+    "vue-class-component": "^7.2.3",
+    "vue-property-decorator": "^9.1.2"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.18.0",
+    "@typescript-eslint/parser": "^4.18.0",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-typescript": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-typescript": "^7.0.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^6.2.2",
+    "prettier": "^2.2.1",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
+    "typescript": "~4.1.5",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "files": [
+    "dist/*",
+    "src/**/*.vue"
+  ],
+  "description": "## Project setup ``` npm install ```",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tripup-company/element-ui-extended.git"
+  },
+  "author": "valeriy zhurba",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/tripup-company/element-ui-extended/issues"
+  },
+  "homepage": "https://github.com/tripup-company/element-ui-extended#readme"
+}

package/src/App.vue

@@ -0,0 +1,30 @@
+<template>
+  <div id="app">
+    <img alt="Vue logo" src="./assets/logo.png" />
+    <test />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import HelloWorld from "./components/HelloWorld.vue";
+import Test from "./components/Test/index.vue";
+@Component({
+  components: {
+    HelloWorld,
+    Test,
+  },
+})
+export default class App extends Vue {}
+</script>
+
+<style lang="scss">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

package/src/components/GenericTable/FilterRow.vue

@@ -0,0 +1,97 @@
+<template>
+  <el-row v-if="column.position !== 'top'" 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-col>
+    </el-row>
+    <el-row v-if="showFilter" class="m-t-5">
+      <el-col :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-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-select>
+      </el-col>
+    </el-row>
+  </el-row>
+</template>
+<script>
+export default {
+  props: {
+    column: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    search: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  computed: {
+    isMultiple() {
+      return this.column.is_multiple ? this.column.is_multiple : false;
+    },
+  },
+  data() {
+    return {
+      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' },
+      ],
+      boolValues: {
+        null: 'empty',
+        true: 'true',
+        false: 'false',
+      },
+    };
+  },
+  watch: {
+    showFilter() {
+      if (this.showFilter === false) {
+        this.search.operator = '';
+        this.search.value = '';
+      }
+    },
+    search: {
+      handler: function(newValue) {
+        if (newValue.operator === '') {
+          this.showFilter = false;
+        }
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    isDisableInput(operator) {
+      const disable = this.disabledInputOperations.indexOf(operator) !== -1;
+      if (disable) {
+        this.search.value = '';
+      }
+      return disable;
+    },
+  },
+};
+</script>

package/src/components/GenericTable/FilterTopRow.vue

@@ -0,0 +1,83 @@
+<template>
+  <el-col v-if="column.position === 'top'" :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/GenericTable/GenericFilter.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-card>
+    <filter-row
+      v-for="(column) in data.filters"
+      :key="column.name"
+      :column="column"
+      :search="search[column.name]"
+    />
+    <el-button @click="applyFilter">Filter</el-button>
+    <el-button @click="resetFilter">Reset filter</el-button>
+  </el-card>
+</template>
+
+<script>
+import FilterRow from './FilterRow';
+import FilterConverter from './filter-convertor.ts';
+export default {
+  name: 'GenericFilter',
+  components: { FilterRow },
+  inject: ['data', 'actions', 'search'],
+  data() {
+    const filterConvertor = new FilterConverter();
+    return {
+      filterConvertor: filterConvertor,
+    };
+  },
+  methods: {
+    getFilter() {
+      return this.filterConvertor.applyFilter(this.search);
+    },
+    applyFilter() {
+      this.actions.handleApplyFilter();
+    },
+    resetFilter() {
+      this.actions.handleResetFilter();
+    },
+  },
+};
+</script>

package/src/components/GenericTable/GenericPaginator.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="m-t-15">
+    <el-pagination
+      :current-page="currentPage"
+      :total="total"
+      :layout="'total, sizes, prev, pager, next, jumper'"
+      @size-change="actions.handleSizeChange"
+      @current-change="actions.handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'GenericPaginator',
+  inject: ['data', 'actions'],
+  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;
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

package/src/components/GenericTable/GenericRows.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <slot :items="data.items" :fields="data.fields">
+      <el-table :data="data.items" border>
+        <template v-for="field in data.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">
+              <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" />
+          </template>
+        </template>
+      </el-table>
+    </slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GenericRows',
+  inject: ['data'],
+};
+</script>

package/src/components/GenericTable/GenericTopFilter.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <filter-top-row
+      v-for="(column) in data.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>
+  </div>
+</template>
+
+<script>
+import FilterTopRow from './FilterTopRow';
+import FilterConverter from './filter-convertor.ts';
+export default {
+  name: 'GenericTopFilter',
+  components: { FilterTopRow },
+  inject: ['data', 'actions', 'search'],
+  data() {
+    const filterConvertor = new FilterConverter();
+    return {
+      filterConvertor: filterConvertor,
+    };
+  },
+  methods: {
+    getFilter() {
+      return this.filterConvertor.applyFilter(this.search);
+    },
+    applyFilter() {
+      this.actions.handleApplyFilter();
+    },
+    resetFilter() {
+      this.actions.handleResetFilter();
+    },
+  },
+};
+</script>

package/src/components/GenericTable/index.vue

@@ -0,0 +1,181 @@
+<template>
+  <div v-loading="loading" class="generic-table">
+    <slot>
+      <el-row v-if="showTopFilter" :gutter="20">
+        <generic-top-filter ref="genericTopFilter" />
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="18">
+          <generic-rows />
+          <el-row>
+            <el-col>
+              <generic-paginator />
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="6">
+          <generic-filter ref="genericFilter" />
+        </el-col>
+      </el-row>
+    </slot>
+  </div>
+</template>
+<script>
+import GenericPaginator from "./GenericPaginator";
+import GenericFilter from "./GenericFilter";
+import GenericTopFilter from "./GenericTopFilter";
+import GenericRows from "./GenericRows";
+import MetaModel from "../../models/meta-model.ts";
+import ListQueryService from "../../services/list-query-service.ts";
+import FilterConverter from "./filter-convertor.ts";
+export default {
+  name: "GenericTable",
+  components: {
+    GenericRows,
+    GenericFilter,
+    GenericPaginator,
+    GenericTopFilter,
+  },
+  provide() {
+    const data = {};
+    ["items", "fields", "filters", "loading", "meta"].forEach((key) => {
+      Object.defineProperty(data, key, {
+        enumerable: true,
+        get: () => this[key],
+      });
+    });
+    return {
+      data,
+      search: this.search,
+      actions: {
+        handleSizeChange: this.handleSizeChange,
+        handleCurrentChange: this.handleCurrentChange,
+        handleFilterChange: this.handleFilterChange,
+        handleApplyFilter: this.handleApplyFilter,
+        handleResetFilter: this.handleResetFilter,
+      },
+    };
+  },
+  props: {
+    repository: {
+      default() {
+        return {};
+      },
+      type: Object,
+    },
+    title: {
+      default: "",
+      type: String,
+    },
+    fields: {
+      default: () => [],
+      type: Array,
+    },
+    filters: {
+      default: () => [],
+      type: Array,
+    },
+  },
+  data: function () {
+    let search = {};
+    const filterConvertor = new FilterConverter();
+    const listQueryService = new ListQueryService(
+      this.$route.name,
+      this.$services.localStorage()
+    );
+    for (const column of this.filters) {
+      search[column.name] = {
+        operator: "",
+        value: "",
+        position: column.position ? column.position : null,
+      };
+    }
+    search = Object.assign(search, listQueryService.getListQuery().search);
+    return {
+      loading: false,
+      filter: {},
+      items: [],
+      search: search,
+      meta: new MetaModel(),
+      filterConvertor: filterConvertor,
+      listQueryService: listQueryService,
+    };
+  },
+  computed: {
+    showTopFilter() {
+      if (this.filters.filter((e) => e.position === "top").length > 0) {
+        return true;
+      }
+      return false;
+    },
+    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,
+      };
+      return { ...query, ...this.filter };
+    },
+  },
+  mounted() {
+    this.filter = this.$refs.genericFilter.getFilter();
+    this.fetch();
+  },
+  methods: {
+    async fetch() {
+      this.loading = true;
+      try {
+        const response = await this.repository.all(this.queryFilter);
+        this.items = response.data;
+        this.meta = response.meta;
+      } catch (e) {
+        this.$message.error(e.message);
+      }
+      this.loading = false;
+    },
+
+    handleSizeChange(val) {
+      this.listQueryService.updateListQuery({ meta: { limit: val } });
+      this.meta.pagination.per_page = val;
+      this.fetch();
+    },
+    handleCurrentChange(val) {
+      this.listQueryService.updateListQuery({ meta: { page: val } });
+      this.meta.pagination.current_page = val;
+      this.fetch();
+    },
+    handleFilterChange(val) {
+      this.filter = val;
+      this.meta.pagination.current_page = 1;
+      this.fetch();
+    },
+    handleApplyFilter() {
+      this.listQueryService.updateListQuery({ search: this.search });
+      this.handleFilterChange(this.filterConvertor.applyFilter(this.search));
+    },
+    handleResetFilter() {
+      console.log(this.search);
+      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.search });
+      this.handleFilterChange({});
+    },
+  },
+};
+</script>
+
+<style scoped></style>