@tripup-company/element-ui-extended 0.0.60 → 0.0.63

package/dist/examples/models/contact-model.d.ts

@@ -15,6 +15,7 @@ export declare class ContactModel extends BaseModel implements Icontact {
     zip_code: string;
     street?: string;
     country?: string;
+    destination?: any;
     constructor(data?: any[]);
 }
 //# sourceMappingURL=contact-model.d.ts.map

package/dist/examples/models/contact-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"contact-model.d.ts","sourceRoot":"","sources":["../../../examples/models/contact-model.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAEpD,qBAAa,YAAa,SAAQ,SAAU,YAAW,QAAQ;IAC7D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;gBAEL,IAAI,QAAK;CAGtB"}
+{"version":3,"file":"contact-model.d.ts","sourceRoot":"","sources":["../../../examples/models/contact-model.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAEpD,qBAAa,YAAa,SAAQ,SAAU,YAAW,QAAQ;IAC7D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,GAAG,CAAC;gBAEN,IAAI,QAAK;CAGtB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tripup-company/element-ui-extended",
-  "version": "0.0.60",
+  "version": "0.0.63",
   "main": "./dist/element-ui-extended.umd.js",
   "scripts": {
     "serve": "vue-cli-service serve && tsc --emitDeclarationOnly",

package/src/components/EditableField/index.vue

@@ -1,16 +1,29 @@
 <template>
   <div class="editable-cell">
-    <div
-      v-if="!isEditMode"
-      class="editable-cell__text"
-    >
+    <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="format" :value-format="valueFormat" disabled placeholder="Pick a day" class="w-100 el-date-transparent" />
+          <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="format"
+            :value-format="valueFormat"
+            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>
+          <div v-else>{{ placeholder ? placeholder : "-" }}</div>
         </el-col>
         <el-col v-if="!readonly" :span="1">
           <el-button
@@ -27,16 +40,42 @@
     </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'" :controls="false" v-model="model" :precision="precision" class="w-100" />
-      <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-input-number
+        v-else-if="type === 'number'"
+        :controls="false"
+        v-model="model"
+        :precision="precision"
+        class="w-100"
+      />
+      <el-select
+        v-else-if="type === 'select'"
+        v-model="model"
+        :span="24"
+        clearable
+        :filterable="filterable"
+        :remote="remote"
+        :remote-method="remoteMethodHandler"
+        placeholder="Select"
+        :value-key="objectValueKey"
+        :multiple="selectMultiple"
+        class="w-100"
+      >
         <el-option
           v-for="item in selectListLocal"
           :key="item[selectKey]"
           :label="item[selectLabel]"
-          :value="item[selectValue]"
+          :value="selectJson ? item : item[selectValue]"
         />
       </el-select>
-      <el-date-picker v-else-if="type === 'date-picker'" v-model="model" :format="format" :value-format="valueFormat" type="date" placeholder="Pick a day" class="w-100" />
+      <el-date-picker
+        v-else-if="type === 'date-picker'"
+        v-model="model"
+        :format="format"
+        :value-format="valueFormat"
+        type="date"
+        placeholder="Pick a day"
+        class="w-100"
+      />
       <el-input
         v-else
         v-model="model"
@@ -46,29 +85,44 @@
         class="editable-cell__input"
       />
       <el-button-group class="editable-cell__actions">
-        <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
+          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>
 </template>
 
 <script>
-
 export default {
-  name: 'EditableField',
+  name: "EditableField",
   model: {
-    props: 'value',
-    event: 'input',
+    props: "value",
+    event: "input",
   },
   props: {
     field: {
       type: [String, Boolean],
-      default: '',
+      default: "",
     },
     value: {
       type: [String, Boolean, Date, Number, Array],
-      default: '',
+      default: "",
     },
     filterable: {
       type: Boolean,
@@ -76,11 +130,11 @@ export default {
     },
     type: {
       type: String,
-      default: 'input',
+      default: "input",
     },
     placeholder: {
       type: String,
-      default: '',
+      default: "",
     },
     selectList: {
       type: Array,
@@ -90,17 +144,25 @@ export default {
       type: Boolean,
       default: false,
     },
+    objectValueKey: {
+      type: String,
+      default: "value",
+    },
+    selectJson: {
+      type: Boolean,
+      default: false,
+    },
     selectKey: {
       type: String,
-      default: 'value',
+      default: "value",
     },
     selectLabel: {
       type: String,
-      default: 'name',
+      default: "name",
     },
     selectValue: {
       type: String,
-      default: '',
+      default: "",
     },
     precision: {
       type: Number,
@@ -120,24 +182,24 @@ export default {
     },
     format: {
       type: String,
-      default: 'dd.MM.yyyy',
+      default: "dd.MM.yyyy",
     },
     valueFormat: {
       type: String,
-      default: 'yyyy-MM-dd',
+      default: "yyyy-MM-dd",
     },
   },
   data: () => {
     return {
       isEditMode: false,
-      model: '',
+      model: "",
       selectListLocal: [],
     };
   },
   computed: {
     isSelectValue: {
       get() {
-        return (this.value || this.value === false) && this.type === 'select';
+        return (this.value || this.value === false) && this.type === "select";
       },
     },
     remote: {
@@ -159,48 +221,55 @@ export default {
   },
   methods: {
     createList() {
-      let label = '';
+      let label = "";
       if (this.selectMultiple) {
         if (this.value.length) {
           let values = [];
-          this.value.forEach(element => {
-            const lab = this.selectList.find(x => x[this.selectKey] === element)[this.selectLabel];
-            if (lab) {
-              values.push(lab);
+          this.value.forEach((element) => {
+            const compareValue = this.selectJson ? element[this.selectKey] : element;
+            const labArray = this.selectList.find(
+              x => x[this.selectKey] === compareValue
+            );
+            if (labArray && labArray[this.selectLabel]) {
+              values.push(labArray[this.selectLabel]);
             }
-            label = values.join('; ');
+            label = values.join("; ");
           });
         } else {
-          label = '-';
+          label = "-";
         }
       } else if (this.selectList.length) {
-        label = this.selectList.find(x =>
-          x[this.selectKey] === this.value)[this.selectLabel];
+        label = this.selectList.find((x) => x[this.selectKey] === this.value)[
+          this.selectLabel
+        ];
       } else {
         label = this.value;
       }
       return label;
     },
     handleDoubleClick() {
-      this.$emit('editable:open');
+      this.$emit("editable:open");
       this.isEditMode = true;
       this.model = this.value;
     },
     handleClose() {
       this.isEditMode = false;
-      this.$emit('editable:close');
+      this.$emit("editable:close");
     },
     async remoteCall(query) {
       this.loading = true;
-      const response = await this.remoteMethod.all({ search: this.selectLabel  + ':' + query, searchFields: this.selectLabel + ':like' });
+      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 });
+      this.$emit("editable:close");
+      this.$emit("editable:save", { field: this.field, value: this.model });
+      this.$emit("update:value", { field: this.field, value: this.model });
     },
   },
 };

package/src/components/NewField/index.vue

@@ -4,16 +4,44 @@
       <slot class="editable-cell__text__slot">
         <el-col :span="24">
           <el-checkbox v-if="type === 'checkbox'" v-model="dataModel" />
-          <el-select v-else-if="type === 'select'" v-model="dataModel" :filterable="filterable" :loading="loading" :remote="remote" :remote-method="remoteMethodHandler" :span="24" clearable placeholder="Select" :multiple="selectMultiple" class="w-100">
+          <el-select
+            v-else-if="type === 'select'"
+            v-model="dataModel"
+            :filterable="filterable"
+            :loading="loading"
+            :remote="remote"
+            :remote-method="remoteMethodHandler"
+            :span="24"
+            clearable
+            placeholder="Select"
+            :multiple="selectMultiple"
+            :value-key="objectValueKey"
+            class="w-100"
+          >
             <el-option
               v-for="item in selectListLocal"
               :key="item[selectKey]"
               :label="item[selectLabel]"
-              :value="item[selectValue]"
+              :value="selectJson ? item : item[selectValue]"
             />
           </el-select>
-          <el-date-picker v-else-if="type === 'date-picker'" v-model="dataModel" :format="format" :value-format="valueFormat" type="date" placeholder="Pick a day" class="w-100" />
-          <el-input-number v-else-if="type === 'number'" v-model="dataModel" :controls="false" :step="step" :precision="precision" class="w-100" />
+          <el-date-picker
+            v-else-if="type === 'date-picker'"
+            v-model="dataModel"
+            :format="format"
+            :value-format="valueFormat"
+            type="date"
+            placeholder="Pick a day"
+            class="w-100"
+          />
+          <el-input-number
+            v-else-if="type === 'number'"
+            v-model="dataModel"
+            :controls="false"
+            :step="step"
+            :precision="precision"
+            class="w-100"
+          />
           <el-input
             v-else
             v-model="dataModel"
@@ -31,11 +59,11 @@
 import lodash from "lodash";
 const _ = lodash;
 export default {
-  name: 'NewField',
+  name: "NewField",
   props: {
     field: {
       type: [String, Boolean],
-      default: '',
+      default: "",
     },
     filterable: {
       type: Boolean,
@@ -43,15 +71,15 @@ export default {
     },
     value: {
       type: [String, Boolean, Date, Number, Array],
-      default: '',
+      default: "",
     },
     type: {
       type: String,
-      default: 'input',
+      default: "input",
     },
     placeholder: {
       type: String,
-      default: '',
+      default: "",
     },
     selectList: {
       type: Array,
@@ -63,17 +91,25 @@ export default {
       type: Boolean,
       default: false,
     },
+    objectValueKey: {
+      type: String,
+      default: "value",
+    },
+    selectJson: {
+      type: Boolean,
+      default: false,
+    },
     selectKey: {
       type: String,
-      default: '',
+      default: "",
     },
     selectLabel: {
       type: String,
-      default: '',
+      default: "",
     },
     selectValue: {
       type: String,
-      default: '',
+      default: "",
     },
     precision: {
       type: Number,
@@ -89,11 +125,11 @@ export default {
     },
     format: {
       type: String,
-      default: 'dd.MM.yyyy',
+      default: "dd.MM.yyyy",
     },
     valueFormat: {
       type: String,
-      default: 'yyyy-MM-dd',
+      default: "yyyy-MM-dd",
     },
   },
   data() {
@@ -119,10 +155,10 @@ export default {
     },
   },
   watch: {
-    dataModel: function() {
-      this.$emit('editable:save', { 'field': this.field, 'value': this.dataModel });
+    dataModel: function () {
+      this.$emit("editable:save", { field: this.field, value: this.dataModel });
     },
-    value: function() {
+    value: function () {
       this.dataModel = _.cloneDeep(this.value);
     },
   },
@@ -132,7 +168,10 @@ export default {
   methods: {
     async remoteCall(query) {
       this.loading = true;
-      const response = await this.remoteMethod.all({ search: this.selectLabel  + ':' +query, searchFields: this.selectLabel + ':like' });
+      const response = await this.remoteMethod.all({
+        search: this.selectLabel + ":" + query,
+        searchFields: this.selectLabel + ":like",
+      });
       this.selectListLocal = response.data;
       this.loading = false;
     },

package/src/components/PartColumn/EditColumn.vue

@@ -17,6 +17,8 @@
             :type="field.selectList ? 'select' : (field.type? field.type :'input')"
             :select-list="field.selectList ? field.selectList : []"
             :select-multiple="field.selectMultiple"
+            :select-json="field.selectJson ? field.selectJson : false"
+            :object-value-key="field.objectValueKey ? field.objectValueKey : 'value'"
             :select-key="field.selectList ? (field.selectKey ? field.selectKey : 'value' ) : ''"
             :select-label="field.selectList ? (field.selectLabel ? field.selectLabel : 'name' ) : ''"
             :select-value="field.selectList ? (field.selectValue ? field.selectValue : 'value' ) : ''"

package/src/components/PartColumn/NewColumn.vue

@@ -16,6 +16,8 @@
             :type="field.selectList ? 'select' : (field.type? field.type :'input')"
             :select-list="field.selectList ? field.selectList : []"
             :select-multiple="field.selectMultiple"
+            :select-json="field.selectJson ? field.selectJson : false"
+            :object-value-key="field.objectValueKey ? field.objectValueKey : 'value'"
             :select-key="field.selectList ? (field.selectKey ? field.selectKey : 'value' ) : ''"
             :select-label="field.selectList ? (field.selectLabel ? field.selectLabel : 'name' ) : ''"
             :select-value="field.selectList ? (field.selectValue ? field.selectValue : 'value' ) : ''"