@tripup-company/element-ui-extended 0.0.1 → 0.0.6

package/package.json

@@ -1,19 +1,25 @@
 {
   "name": "@tripup-company/element-ui-extended",
-  "version": "0.0.1",
+  "version": "0.0.6",
   "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,13 +30,20 @@
     "@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": [

package/src/App.vue

@@ -1,19 +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" />
-    <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";
+import CompositeTable from "@/components/CompositeTable/index.vue";
+import filters from "./filters";
+import filtersTop from "./filters-top";
+import repository from "./repositories/contacts-repository";
 @Component({
-  components: {
-    HelloWorld,
-    Test,
-  },
+  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/CreateForm/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <el-form
+    ref="form"
+    :rules="config.rules"
+    :model="formLocal"
+    class="m-w-1200"
+    label-position="left"
+    label-width="140px"
+  >
+    <el-card shadow="always">
+      <div slot="header" class="clearfix">
+        <el-row type="flex" justify="space-between">
+          <el-col class="flex align-center justify-start" :span="6">
+            <h3 class="m-b-0">New {{ formLocal.object }}</h3>
+          </el-col>
+          <el-col class="flex align-center justify-end" :span="6">
+            <el-button type="success" class="fr" @click="saveForm"
+              >Save</el-button
+            >
+          </el-col>
+        </el-row>
+      </div>
+      <el-row :gutter="20">
+        <el-col
+          :xl="colResolutionLg.xl"
+          :lg="colResolutionLg.lg"
+          :md="colResolutionLg.md"
+          :sm="colResolutionLg.sm"
+          :xs="colResolutionLg.xs"
+        >
+          <new-column
+            :data="formLocal"
+            :fields="config.formFields"
+            :errors="errors"
+          />
+        </el-col>
+      </el-row>
+    </el-card>
+  </el-form>
+</template>
+
+<script>
+import getResolution from "@/services/resolutions";
+import NewColumn from "../PartColumn/NewColumn";
+import { BaseModel } from '../../models/base-model';
+export default {
+  name: "CreateForm",
+  components: { NewColumn },
+  props: {
+    form: {
+      type: Object,
+      default: () => {
+        return new BaseModel();
+      },
+    },
+    errors: {
+      type: Object,
+      default: () => {},
+    },
+    config: {
+      type: Object,
+      default: () => {
+        return {
+          rules: null,
+        };
+      },
+    },
+  },
+  data() {
+    return {
+      colResolutionLg: getResolution("fullResolution"),
+    };
+  },
+  computed: {
+    formLocal: {
+      get() {
+        return this.form;
+      },
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      set(value) {
+        this.$emit("create:form", this.form);
+      },
+    },
+  },
+  methods: {
+    saveForm() {
+      this.$refs["form"].validate((valid) => {
+        if (!valid) {
+          this.$message.error("Fill all required fields");
+          return false;
+        }
+        this.$emit("save", this.form);
+      });
+    },
+  },
+};
+</script>

package/src/components/EditableField/index.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="editable-cell">
+    <div
+      v-if="!isEditMode"
+      class="editable-cell__text"
+    >
+      <slot class="editable-cell__text__slot">
+        <el-col :span="23">
+          <div v-if="value && ['input', 'textarea', 'number'].includes(type)" v-html="value" />
+          <el-checkbox v-else-if="type === 'checkbox'" v-model="value" disabled />
+          <el-date-picker v-else-if="type === 'date-picker'" v-model="value" type="date" format="dd.MM.yyyy" value-format="yyyy-MM-dd" disabled placeholder="Pick a day" class="w-100 el-date-transparent" />
+          <div v-else-if="isSelectValue" v-html="createList()" />
+          <div v-else> {{ placeholder ? placeholder : '-' }}</div>
+        </el-col>
+        <el-col :span="1">
+          <el-button
+            class="edit-icon pull-right"
+            icon="el-icon-edit"
+            circle
+            type="primary"
+            size="mini"
+            @click="handleDoubleClick"
+          />
+        </el-col>
+      </slot>
+    </div>
+    <div v-if="isEditMode" class="editable-cell__editor">
+      <el-checkbox v-if="type === 'checkbox'" v-model="model" />
+      <el-input-number v-else-if="type === 'number'" v-model="model" :precision="precision" class="w-70" />
+      <el-select v-else-if="type === 'select'" v-model="model" :span="24" clearable :filterable="filterable" :remote="remote" :remote-method="remoteMethodHandler" placeholder="Select" :multiple="selectMultiple" class="w-100">
+        <el-option
+          v-for="item in selectListLocal"
+          :key="item[selectKey]"
+          :label="item[selectLabel]"
+          :value="item[selectValue]"
+        />
+      </el-select>
+      <el-date-picker v-else-if="type === 'date-picker'" v-model="model" format="dd.MM.yyyy" value-format="yyyy-MM-dd" type="date" placeholder="Pick a day" class="w-100" />
+      <el-input
+        v-else
+        v-model="model"
+        :rows="3"
+        :type="type"
+        :placeholder="placeholder"
+        class="editable-cell__input"
+      />
+      <el-button-group class="editable-cell__actions">
+        <el-button v-if="isEditMode" type="success" size="mini" icon="el-icon-check" @click="handleSave" />
+        <el-button v-if="isEditMode" type="warning" size="mini" icon="el-icon-close" @click="handleClose" />
+      </el-button-group>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'EditableField',
+  model: {
+    props: 'value',
+    event: 'input',
+  },
+  props: {
+    field: {
+      type: [String, Boolean],
+      default: '',
+    },
+    value: {
+      type: [String, Boolean, Date, Number, Array],
+      default: '',
+    },
+    filterable: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      type: String,
+      default: 'input',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    selectList: {
+      type: Array,
+      default: () => [],
+    },
+    selectMultiple: {
+      type: Boolean,
+      default: false,
+    },
+    selectKey: {
+      type: String,
+      default: '',
+    },
+    selectLabel: {
+      type: String,
+      default: '',
+    },
+    selectValue: {
+      type: String,
+      default: '',
+    },
+    precision: {
+      type: Number,
+      default: 0,
+    },
+    step: {
+      type: Number,
+      default: 1,
+    },
+    remoteMethod: {
+      type: Object,
+      default: null,
+    },
+  },
+  data: () => {
+    return {
+      isEditMode: false,
+      model: '',
+      selectListLocal: [],
+    };
+  },
+  computed: {
+    isSelectValue: {
+      get() {
+        return (this.value || this.value === false) && this.type === 'select';
+      },
+    },
+    remote: {
+      get() {
+        return this.remoteMethod !== null;
+      },
+    },
+    remoteMethodHandler: {
+      get() {
+        if (this.remoteMethod !== null) {
+          return this.remoteCall;
+        }
+        return null;
+      },
+    },
+  },
+  mounted() {
+    this.selectListLocal = this.selectList;
+  },
+  methods: {
+    createList() {
+      let label = '';
+      if (this.selectMultiple) {
+        this.value.forEach(element => {
+          label = label + ' ' + this.selectList.find(({ value }) => value === element).name;
+        });
+      } else if (this.selectList.length) {
+        label = this.selectList.find(x =>
+          x[this.selectKey] === this.value)[this.selectLabel];
+      } else {
+        label = this.value;
+      }
+      return label;
+    },
+    handleDoubleClick() {
+      this.$emit('editable:open');
+      this.isEditMode = true;
+      this.model = this.value;
+    },
+    handleClose() {
+      this.isEditMode = false;
+      this.$emit('editable:close');
+    },
+    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.loading = false;
+    },
+    async handleSave() {
+      this.isEditMode = false;
+      this.$emit('editable:close');
+      this.$emit('editable:save', { 'field': this.field, 'value': this.model });
+      this.$emit('update:value', { 'field': this.field, 'value': this.model });
+    },
+  },
+};
+</script>

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", {});
     },
   },
 };