@tripup-company/element-ui-extended 0.0.26 → 0.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tripup-company/element-ui-extended",
-  "version": "0.0.26",
+  "version": "0.0.30",
   "main": "./dist/element-ui-extended.umd.js",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -11,8 +11,10 @@
   },
   "dependencies": {
     "axios": "^0.24.0",
+    "clone-deep": "^4.0.1",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.6",
+    "lodash": "^4.17.21",
     "npe": "^1.2.0",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",

package/src/components/CompositeTable/index.vue

@@ -3,12 +3,7 @@
     <slot>
       <el-row :gutter="20">
         <el-col :span="filters.length ? 18 : 24">
-          <slot
-            name="quick-search-filter"
-            v-bind="{ topFilter, search }"
-            :handleApplyTopFilter="handleApplyTopFilter"
-            :handleResetTopFilter="handleResetTopFilter"
-          >
+          <slot name="quick-search-filter" v-bind="{ topFilter, search }">
             <quick-search-filter
               v-if="topFilter"
               :filter="topFilter"
@@ -17,11 +12,7 @@
               @reset:filter="handleResetTopFilter"
             />
           </slot>
-          <slot
-            name="table"
-            v-bind="{ fields, data }"
-            :handleChangeSort="handleChangeSort"
-          >
+          <slot name="table" v-bind="{ fields, data }">
             <generic-table
               :fields="fields"
               :data="data"
@@ -43,12 +34,7 @@
           </el-row>
         </el-col>
         <el-col :span="filters.length ? 6 : 0">
-          <slot
-            name="filter"
-            v-bind="{ filters, search }"
-            :handleApplyFilter="handleApplyFilter"
-            :handleResetFilter="handleResetFilter"
-          >
+          <slot name="filter" v-bind="{ filters, search }">
             <generic-filter
               v-if="filters.length"
               :filters="filters"
@@ -235,9 +221,8 @@ export default {
     handleFilterChange() {
       this.handleCurrentChange(1);
     },
-    handleApplyFilter(val) {
-      Vue.set(this, "search", val);
-      this.listQueryService.updateListQuery({ search: val });
+    handleApplyFilter() {
+      this.listQueryService.updateListQuery({ search: this.search });
       this.handleFilterChange();
     },
     handleResetFilter() {
@@ -250,9 +235,8 @@ export default {
       this.listQueryService.updateListQuery({ search: {} });
       this.handleFilterChange({});
     },
-    handleApplyTopFilter(val) {
-      Vue.set(this, "topSearch", val);
-      this.listQueryService.updateListQuery({ topSearch: val });
+    handleApplyTopFilter() {
+      this.listQueryService.updateListQuery({ topSearch: this.topSearch });
       this.handleFilterChange();
     },
     handleResetTopFilter() {

package/src/components/CreateForm/index.vue

@@ -42,7 +42,7 @@
 <script>
 import getResolution from "@/services/resolutions";
 import NewColumn from "../PartColumn/NewColumn";
-import { BaseModel } from '../../models/base-model';
+import BaseModel from '../../models/base-model';
 export default {
   name: "CreateForm",
   components: { NewColumn },
@@ -55,7 +55,9 @@ export default {
     },
     errors: {
       type: Object,
-      default: () => {},
+      default: () => {
+        return {};
+      },
     },
     config: {
       type: Object,

package/src/components/EditableField/index.vue

@@ -12,13 +12,14 @@
           <div v-else-if="isSelectValue" v-html="createList()" />
           <div v-else> {{ placeholder ? placeholder : '-' }}</div>
         </el-col>
-        <el-col :span="1">
+        <el-col v-if="!readonly" :span="1">
           <el-button
             class="edit-icon pull-right"
             icon="el-icon-edit"
             circle
             type="primary"
             size="mini"
+            plain
             @click="handleDoubleClick"
           />
         </el-col>
@@ -45,8 +46,8 @@
         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 v-if="isEditMode" type="success" size="mini" circle plain icon="el-icon-check" @click="handleSave" />
+        <el-button v-if="isEditMode" type="warning" size="mini" circle plain icon="el-icon-close" @click="handleClose" />
       </el-button-group>
     </div>
   </div>
@@ -113,6 +114,10 @@ export default {
       type: Object,
       default: null,
     },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: () => {
     return {
@@ -148,9 +153,13 @@ export default {
     createList() {
       let label = '';
       if (this.selectMultiple) {
-        this.value.forEach(element => {
-          label = label + ' ' + this.selectList.find(({ value }) => value === element).name;
-        });
+        if (this.value.length) {
+          this.value.forEach(element => {
+            label = label + ' ' + this.selectList.find(({ value }) => value === element).name;
+          });
+        } else {
+          label = '-';
+        }
       } else if (this.selectList.length) {
         label = this.selectList.find(x =>
           x[this.selectKey] === this.value)[this.selectLabel];
@@ -183,3 +192,11 @@ export default {
   },
 };
 </script>
+<style scoped>
+.el-input--suffix .el-input__inner {
+  padding-right: 82px;
+}
+.el-input__suffix {
+  right: 63px;
+}
+</style>

package/src/components/GenericFilters/FilterRow.vue

@@ -8,7 +8,11 @@
       </el-col>
     </el-row>
     <el-row v-if="showFilter" class="m-t-5">
-      <el-col v-if="operators.length !== 1" :span="24" class="p-b-10">
+      <el-col
+        v-if="operators.length !== 1 && operators.length !== 0"
+        :span="24"
+        class="p-b-10"
+      >
         <el-select v-model="search.operator" placeholder="Select">
           <el-option
             v-for="operator in operators"
@@ -77,19 +81,24 @@ export default {
     },
   },
   data() {
+    const boolValues = [
+      { value: null, label: "empty" },
+      { value: true, label: "true" },
+      { value: false, label: "false" },
+    ];
     return {
       loading: false,
-      selectKey: this.column.selectKey ?? "key",
-      selectLabel: this.column.selectLabel ?? "label",
-      selectValue: this.column.selectValue ?? "key",
+      selectKey: this.column.selectKey ?? "value",
+      selectLabel: this.column.selectLabel ?? "name",
+      selectValue: this.column.selectValue ?? "value",
       filterable: this.column.filterable ?? false,
       remote: this.column.remote ?? false,
       remoteMethod: this.column.remoteMethod ?? null,
-      selectListLocal: this.search.selectList
-        ? this.search.selectList
+      selectListLocal: this.column.selectList
+        ? this.column.selectList
         : this.column.type === "enum"
         ? this.column.values
-        : this.boolValues,
+        : boolValues,
       showFilter: this.search.operator !== "",
       stringOperators: [
         { value: "equal", label: "is equal" },
@@ -105,11 +114,6 @@ export default {
       enumOperators: [{ value: "equal", label: "is" }],
       enumOperatorsMultiple: [{ value: "in", label: "in" }],
       dateOperators: [{ value: "between", label: "between" }],
-      boolValues: {
-        null: "empty",
-        true: "true",
-        false: "false",
-      },
     };
   },
   computed: {
@@ -120,7 +124,7 @@ export default {
           operators = this.stringOperators;
           break;
         case "enum":
-          if (this.column.is_multiple) {
+          if (this.column.selectMultiple) {
             operators = this.enumOperatorsMultiple;
           } else {
             operators = this.enumOperators;
@@ -133,7 +137,7 @@ export default {
       return operators;
     },
     isMultiple() {
-      return this.column.is_multiple ? this.column.is_multiple : false;
+      return this.column.selectMultiple ? this.column.selectMultiple : false;
     },
     remoteMethodHandler: {
       get() {

package/src/components/GenericFilters/QuickSearchFilter.vue

@@ -32,7 +32,7 @@ export default {
   },
   methods: {
     applyFilter() {
-      this.$emit("apply:filter", this.search);
+      this.$emit("apply:filter");
     },
     resetFilter() {
       this.$emit("reset:filter");

package/src/components/GenericFilters/index.vue

@@ -35,8 +35,11 @@ name: "GenericFilter",
     };
   },
   methods: {
+    getFilter() {
+      return this.filterConvertor.applyFilter(this.search);
+    },
     applyFilter() {
-      this.$emit('apply:filter', this.search);
+      this.$emit('apply:filter', this.filterConvertor.applyFilter(this.search) );
     },
     resetFilter() {
       this.$emit('reset:filter', {});

package/src/components/PartColumn/EditColumn.vue

@@ -13,6 +13,7 @@
         <el-form-item :prop="propPrefix + field.prop" :label="field.label" :error="errors[field.prop] ? errors[field.prop][0] : ''">
           <editable-field
             v-model="data[field.prop]"
+            :readonly="field.readonly"
             :type="field.selectList ? 'select' : (field.type? field.type :'input')"
             :select-list="field.selectList ? field.selectList : []"
             :select-multiple="field.selectMultiple"
@@ -67,7 +68,9 @@ export default {
     },
     data: {
       type: Object,
-      default: () => {},
+      default: () => {
+        return {};
+      },
     },
     errors: {
       type: Object,

package/src/components/UpdateForm/index.vue

@@ -47,7 +47,7 @@
 
 <script>
 import getResolution from '../../services/resolutions';
-import { BaseModel } from '../../models/base-model';
+import BaseModel from '../../models/base-model';
 import PartForm from '../PartForm';
 import EditColumn from '../PartColumn/EditColumn';
 

package/src/models/base-model.ts

@@ -1,4 +1,4 @@
-export class BaseModel {
+export default class BaseModel {
   constructor(data: any) {
     if (data === null) {
       return;

package/src/models/meta-model.ts

@@ -1,5 +1,5 @@
 import { Meta } from "../types/meta";
-import { BaseModel } from "./base-model";
+import BaseModel from "./base-model";
 import { Pagination } from "../types/pagination";
 
 export default class MetaModel extends BaseModel implements Meta {

package/src/services/list-query-service.ts

@@ -25,8 +25,7 @@ export default class ListQueryService {
       meta: {
         page: 1,
         limit: 10,
-      },
-      search: {},
+      }
     };
     listQuery = Object.assign(listQuery, this.storageService.get(this.key));
     return listQuery;