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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tripup-company/element-ui-extended",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "./dist/element-ui-extended.umd.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/App.vue

@@ -1,19 +1,14 @@
 <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,
-  },
+  components: {},
 })
 export default class App extends Vue {}
 </script>

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/NewField/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="editable-cell">
+    <div class="editable-cell__editor">
+      <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-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="dataModel" format="dd.MM.yyyy" value-format="yyyy-MM-dd" type="date" placeholder="Pick a day" class="w-100" />
+          <el-input-number v-else-if="type === 'number'" v-model="dataModel" :step="step" :precision="precision" class="w-100" />
+          <el-input
+            v-else
+            v-model="dataModel"
+            :type="type"
+            :placeholder="placeholder"
+            class="editable-cell__input"
+          />
+        </el-col>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'NewField',
+  props: {
+    field: {
+      type: [String, Boolean],
+      default: '',
+    },
+    filterable: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: [String, Boolean, Date, Number, Array],
+      default: '',
+    },
+    type: {
+      type: String,
+      default: 'input',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    selectList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    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 {
+      loading: false,
+      selectListLocal: [],
+      dataModel: window._.cloneDeep(this.value),
+    };
+  },
+  computed: {
+    remote: {
+      get() {
+        return this.remoteMethod !== null;
+      },
+    },
+    remoteMethodHandler: {
+      get() {
+        if (this.remoteMethod !== null) {
+          return this.remoteCall;
+        }
+        return null;
+      },
+    },
+  },
+  watch: {
+    dataModel: function() {
+      this.$emit('editable:save', { 'field': this.field, 'value': this.dataModel });
+    },
+    value: function() {
+      this.dataModel = this._.cloneDeep(this.value);
+    },
+  },
+  mounted() {
+    this.selectListLocal = this.selectList;
+  },
+  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.loading = false;
+    },
+  },
+};
+</script>

package/src/components/PartColumn/EditColumn.vue

@@ -0,0 +1,95 @@
+<template>
+  <el-col :xl="colResolution.lg" :lg="colResolution.lg" :md="colResolution.md" :sm="colResolution.sm" :xs="colResolution.xs" class="p-r-5 p-l-5">
+    <template v-for="(field) of fields">
+      <el-col
+        :key="field.prop"
+        :xl="fieldResolution(field, 'xl')"
+        :lg="fieldResolution(field, 'lg')"
+        :md="fieldResolution(field, 'md')"
+        :sm="fieldResolution(field, 'sm')"
+        :xs="fieldResolution(field, 'xs')"
+        class="p-r-5 p-l-5"
+      >
+        <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]"
+            :type="field.selectList ? 'select' : (field.type? field.type :'input')"
+            :select-list="field.selectList ? field.selectList : []"
+            :select-multiple="field.selectMultiple"
+            :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' ) : ''"
+            :field="field.prop"
+            :precision="field.precision ? field.precision : 0"
+            :remote-method="field.remoteMethod ? field.remoteMethod : null"
+            :filterable="field.filterable ? field.filterable : null"
+            @editable:save="updateValue"
+          />
+        </el-form-item>
+      </el-col>
+    </template>
+  </el-col>
+</template>
+
+<script>
+
+import Vue from 'vue';
+import getResolution from '../../services/resolutions';
+import EditableField from '../EditableField';
+
+export default {
+  name: 'PartColumnEdit',
+  components: { EditableField },
+  props: {
+    colResolution: {
+      type: Object,
+      default: () => {
+        return getResolution('fullResolution');
+      },
+    },
+    colInnerResolution: {
+      type: Object,
+      default: () => {
+        return getResolution('fullResolution');
+      },
+    },
+    columnName: {
+      type: String,
+      default: '',
+    },
+    propPrefix: {
+      type: String,
+      default: '',
+    },
+    fields: {
+      type: Array,
+      default: () => [],
+    },
+    data: {
+      type: Object,
+      default: () => {},
+    },
+    errors: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  methods: {
+    fieldResolution(field, size) {
+      return field.colResolution ? field.colResolution[size] : this.colInnerResolution[size];
+    },
+    updateValue(newValue) {
+      Vue.set(this.data, newValue.field, newValue.value);
+      this.$emit('save', { field: newValue.field, value: newValue.value, prefix: this.propPrefix });
+    },
+  },
+};
+</script>
+<style>
+.el-form-item--medium .el-form-item__label {
+  line-height: 22px;
+  padding-top: 6px;
+}
+</style>

package/src/components/PartColumn/NewColumn.vue

@@ -0,0 +1,101 @@
+<template>
+  <el-col :xl="colResolution.lg" :lg="colResolution.lg" :md="colResolution.md" :sm="colResolution.sm" :xs="colResolution.xs" class="p-r-5 p-l-5">
+    <template v-for="(field) of fields">
+      <el-col
+        :key="field.prop"
+        :xl="fieldResolution(field, 'xl')"
+        :lg="fieldResolution(field, 'lg')"
+        :md="fieldResolution(field, 'md')"
+        :sm="fieldResolution(field, 'sm')"
+        :xs="fieldResolution(field, 'xs')"
+        class="p-r-5 p-l-5"
+      >
+        <el-form-item :prop="propPrefix + field.prop" :label="field.label" :error="errors[field.prop] ? errors[field.prop][0] : ''">
+          <new-field
+            v-model="dataModel[field.prop]"
+            :type="field.selectList ? 'select' : (field.type? field.type :'input')"
+            :select-list="field.selectList ? field.selectList : []"
+            :select-multiple="field.selectMultiple"
+            :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' ) : ''"
+            :field="field.prop"
+            :precision="field.precision ? field.precision : 0"
+            :remote-method="field.remoteMethod ? field.remoteMethod : null"
+            :filterable="field.filterable ? field.filterable : null"
+            @editable:save="updateValue"
+          />
+        </el-form-item>
+      </el-col>
+    </template>
+  </el-col>
+</template>
+
+<script>
+
+import Vue from 'vue';
+import getResolution from '../../services/resolutions';
+import NewField from '../NewField';
+
+export default {
+  name: 'PartColumnNew',
+  components: { NewField },
+  props: {
+    colResolution: {
+      type: Object,
+      default: () => {
+        return getResolution('fullResolution');
+      },
+    },
+    colInnerResolution: {
+      type: Object,
+      default: () => {
+        return getResolution('fullResolution');
+      },
+    },
+    propPrefix: {
+      type: String,
+      default: '',
+    },
+    columnName: {
+      type: String,
+      default: '',
+    },
+    fields: {
+      type: Array,
+      default: () => [],
+    },
+    data: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    errors: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      dataModel: window._.cloneDeep(this.data),
+    };
+  },
+  watch: {
+    data: function() {
+      this.dataModel = window._.cloneDeep(this.data);
+    },
+  },
+  methods: {
+    fieldResolution(field, size) {
+      return field.colResolution ? field.colResolution[size] : this.colInnerResolution[size];
+    },
+    updateValue(newValue) {
+      Vue.set(this.data, newValue.field, newValue.value);
+      this.$emit('save', { 'field': newValue.field, 'value': newValue.value });
+    },
+  },
+};
+</script>

package/src/components/PartForm/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <el-row>
+    <div class="part-form">
+      <div v-if="$slots.header || header" class="part-form__header">
+        <slot name="header">{{ header }}</slot>
+        <el-divider />
+      </div>
+      <div class="part-form__body" :style="bodyStyle">
+        <slot />
+      </div>
+    </div>
+  </el-row>
+</template>
+<script>
+import getResolution from '../../services/resolutions';
+
+export default {
+  name: 'PartForm',
+  props: {
+    header: {
+      type: String,
+      default: '',
+    },
+    bodyStyle: {
+      type: String,
+      default: '',
+    },
+    rowResolution: {
+      type: Object,
+      default: function() {
+        return getResolution('fullFromSm');
+      },
+    },
+  },
+};
+</script>