rb-document-form-constructor 0.0.1

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "rb-document-form-constructor",
+  "version": "0.0.1",
+  "description": "",
+  "main": "dist/rb-document-form-constructor.ssr.js",
+  "browser": "dist/rb-document-form-constructor.esm.js",
+  "module": "dist/rb-document-form-constructor.esm.js",
+  "unpkg": "dist/rb-document-form-constructor.min.js",
+  "files": [
+    "dist/*",
+    "src/**/*.vue"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "serve": "vue-cli-service serve dev/serve.js",
+    "prebuild": "rimraf ./dist",
+    "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
+    "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
+    "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
+    "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
+  },
+  "dependencies": {
+    "bootstrap": "^4.5.0",
+    "bootstrap-vue": "^2.15.0",
+    "debounce": "^1.2.1",
+    "jquery": "^3.6.0",
+    "sass": "^1.32.0",
+    "sass-loader": "^10.1.0",
+    "vuedraggable": "^2.24.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.6",
+    "@babel/preset-env": "^7.14.7",
+    "@rollup/plugin-alias": "^3.1.2",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^14.0.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-replace": "^2.4.2",
+    "@vue/cli-plugin-babel": "^4.5.13",
+    "@vue/cli-service": "^4.5.13",
+    "cross-env": "^7.0.3",
+    "minimist": "^1.2.5",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.52.8",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-vue": "^5.1.9",
+    "vue": "^2.6.14",
+    "vue-template-compiler": "^2.6.14",
+    "rb-bv-components": "^1.4.1"
+  },
+  "peerDependencies": {
+    "vue": "^2.6.14"
+  },
+  "engines": {
+    "node": ">=12"
+  }
+}

package/src/components/DocTemplateConstructor.vue

@@ -0,0 +1,236 @@
+<template>
+    <div class="rb-doc-template-constructor d-flex">
+        <doc-template-facet-list @fieldMoveEnd="onFieldMoveEnd" :facets="facets"></doc-template-facet-list>
+
+        <div class="rb-form-constructor flex-fill">
+            <div class="rb-constructor-toolbar d-flex flex-row">
+                <h4>Верстка документа</h4>
+                <div class="rb-layout-buttons">
+                    <b-button pill variant="outline-gray" @click="addSection(1)">
+                        <rb-text>1 колонка</rb-text>
+                        <rb-icon icon="icon-add"></rb-icon>
+                    </b-button>
+                    <b-button pill variant="outline-gray" @click="addSection(2)">
+                        <rb-text>2 колонки</rb-text>
+                        <rb-icon icon="icon-add"></rb-icon>
+                    </b-button>
+                    <b-button pill variant="outline-gray" @click="addSection(3)">
+                        <rb-text>3 колонки</rb-text>
+                        <rb-icon icon="icon-add"></rb-icon>
+                    </b-button>
+                </div>
+            </div>
+
+            <div class="rb-constructor-body">
+                <draggable v-model="formConfig.section"
+                           :animation="200"
+                           group="section"
+                           ghost-class="rb-form-card-moving"
+                           handle=".rb-row-drag-handle">
+                    <b-card v-for="(section, index) in formConfig.sections" :key="section.labelRu"
+                            class="rb-form-card" :data-hash="hash">
+                        <template #header>
+                            <rb-icon icon="icon-reorder"
+                                     class="cursor-pointer rb-row-drag-handle"></rb-icon>
+                            <rb-text class="flex-fill" @click="editSection(section)">
+                                {{section.labelRu}}
+                            </rb-text>
+                            <span class="rb-actions">
+                                <rb-icon icon="icon-edit" class="cursor-pointer"
+                                         @click="editSection(section)"></rb-icon>
+                                <rb-icon icon="icon-delete" class="cursor-pointer"
+                                         @click="removeSection(section, index)"></rb-icon>
+                            </span>
+                        </template>
+
+                        <div class="d-flex flex-row">
+                            <draggable tag="b-form"
+                                       class="rb-form-column"
+                                       v-for="column in section.columns"
+                                       :key="column.index"
+                                       :class="{'rb-single-column': section.columnCount === 1}"
+                                       v-model="column.fields"
+                                       @add="onFieldAddedToColumn($event, column, section)"
+                                       :animation="200"
+                                       group="fields"
+                                       ghost-class="rb-moving-item"
+                                       handle=".icon-reorder">
+                                <b-form-row v-for="field in column.fields" :key="field.name"
+                                            class="cursor-pointer" @click="showProperties(field)">
+                                    <b-col lg="12">
+                                        <b-form-group :label="field.labelRu">
+                                            <template #label>
+                                                <rb-icon icon="icon-reorder"></rb-icon>
+                                                <rb-text>{{field.labelRu}}</rb-text>
+                                                <rb-icon icon="icon-delete"
+                                                         @click.prevent="onRemoveField($event, field, column)">
+                                                </rb-icon>
+                                            </template>
+                                            <component v-bind:is="field.input.type"
+                                                       v-if="field.input"
+                                                       v-bind="getFieldExtendedPropsData(field)"
+                                                       disabled
+                                                       class="cursor-pointer">
+                                            </component>
+                                        </b-form-group>
+                                    </b-col>
+                                </b-form-row>
+                            </draggable>
+                        </div>
+                    </b-card>
+                </draggable>
+            </div>
+
+            <doc-template-field-sidebar v-model="sidebarField" :visible="sidebarVisible"
+                                        @hide="sidebarVisible=false">
+            </doc-template-field-sidebar>
+
+            <doc-template-section-modal :mode="sectionModalCfg.mode"
+                                        :section="sectionModalCfg.section"
+                                        :on-after-ok="sectionModalCfg.onAfterOk"></doc-template-section-modal>
+        </div>
+    </div>
+</template>
+
+<script>
+    import DocTemplateFacetList from "@/components/DocTemplateFacetList";
+    import DocTemplateFieldSidebar from "@/components/DocTemplateFieldSidebar";
+    import DocTemplateSectionModal from "@/components/DocTemplateSectionModal";
+    import draggable from 'vuedraggable';
+
+    export default {
+        name: 'DocTemplateConstructor',
+        components: {DocTemplateFacetList, DocTemplateFieldSidebar, DocTemplateSectionModal, draggable},
+        props: {
+            formConfig: {
+                type: Object, default: () => {
+                    return {sections: []}
+                }
+            },
+            facets: {type: Array, default: () => []}
+        },
+        data() {
+            return {
+                sidebarVisible: false,
+                sidebarField: null,
+                columnTo: false,
+                hash: '',
+                sectionModalCfg: {
+                    id: 'rb-doc-template-section-modal',
+                    mode: 'ins',
+                    section: null,
+                    onAfterOk() {
+                    }
+                }
+            }
+        },
+        methods: {
+            showProperties(field) {
+                this.sidebarVisible = true;
+                this.sidebarField = field;
+            },
+            addSection(columnCount) {
+                let section = {labelRu: null, columnCount: columnCount};
+                this.sectionModalCfg.mode = 'ins';
+                this.sectionModalCfg.section = section;
+                this.sectionModalCfg.onAfterOk = () => {
+                    section.columns = [];
+                    for (let i = 0; i < columnCount; i++) {
+                        section.columns.push({
+                            index: i,
+                            fields: []
+                        });
+                    }
+
+                    this.formConfig.sections.push(section)
+                }
+                this.$bvModal.show(this.sectionModalCfg.id);
+            },
+            editSection(section) {
+                this.sectionModalCfg.mode = 'update';
+                this.sectionModalCfg.section = section;
+                this.sectionModalCfg.onAfterOk = () => {}
+                this.$bvModal.show(this.sectionModalCfg.id);
+            },
+            removeSection(section, index) {
+                this.formConfig.sections.splice(index, 1);
+                /*UtModal.showYesNoDialog('Вы действительно хотите удалить секцию?', {
+                    onOk: (event, modal) => {
+                        this.formConfig.sections.splice(index, 1);
+                        UtModal.closeModal(modal);
+                    }
+                });*/
+            },
+            multipleFieldAreOnFormConfig(field) {
+                let count = 0;
+                this.formConfig.sections.every(r => {
+                    r.columns.every(c => {
+                        c.fields.forEach(f => {
+                            if (f.name === field.name) {
+                                count++;
+                            }
+                        })
+
+                        if (count > 1) {
+                            return false;
+                        }
+                    })
+                    if (count > 1) {
+                        return false;
+                    }
+                });
+                return count > 1;
+            },
+            removeFieldFromColumn(field, column, newIndex) {
+                let index = newIndex != null ? newIndex : -1;
+
+                if (index < 0) {
+                    column.fields.every((f, i) => {
+                        if (field.name === f.name) {
+                            index = i;
+                            return false;
+                        }
+                    });
+                }
+
+                if (index >= 0) {
+                    column.fields.splice(index, 1);
+                }
+            },
+            onRemoveField(event, field, column) {
+                event.preventDefault();
+                this.removeFieldFromColumn(field, column)
+            },
+            onFieldAddedToColumn(event, column, section) {
+                this.columnTo = column;
+            },
+            onFieldMoveEnd(event) {
+                const {newIndex} = event;
+                let field = event.item._underlying_vm_;
+
+                let found = this.multipleFieldAreOnFormConfig(field);
+                if (found) {
+                    this.removeFieldFromColumn(field, this.columnTo, newIndex);
+                    this.resetDragVariables();
+                    this.$bvModal.msgBoxOk('На форме уже есть это поле', {
+                        title: 'Ошибка',
+                        headerClass: 'rb-error-msg-box__header',
+                        bodyClass: 'rb-error-msg-box__body',
+                        footerClass: 'rb-error-msg-box__footer',
+                        centered: true,
+                        noCloseOnBackdrop: true,
+                        noCloseOnEsc: true
+                    });
+                }
+                this.resetDragVariables();
+                this.hash = (Math.random() + 1).toString(36).substring(7);
+            },
+            getFieldExtendedPropsData(field) {
+                return {...field.input.propsData, placeholder: field.tag, disabled: true};
+            },
+            resetDragVariables() {
+                this.columnTo = null;
+            },
+        },
+    }
+</script>

package/src/components/DocTemplateFacetList.vue

@@ -0,0 +1,103 @@
+<template>
+    <div class="rb-facets-sidebar">
+        <h4>Компоненты</h4>
+        <b-form>
+            <b-form-row>
+                <b-col lg="12">
+                    <b-form-group>
+                        <b-form-input placeholder="Название поля" v-model="facetSearchStr">
+                        </b-form-input>
+                    </b-form-group>
+                </b-col>
+            </b-form-row>
+        </b-form>
+        <div class="rb-facet-list">
+            <div class="rb-facet" v-for="facet in innerFacets" :key="facet.name">
+                <h6 class="rb-facet-label d-flex">
+                    <rb-text class="flex-fill">{{facet.labelRu}}</rb-text>
+                    <rb-icon :icon="`icon-chevron-${facet.expanded? 'up': 'down'}`" class="cursor-pointer"
+                             @click="facet.expanded = !facet.expanded"></rb-icon>
+                </h6>
+
+                <b-list-group v-if="facet.expanded">
+                    <draggable v-model="facet.fields"
+                               :clone="onFieldCloned"
+                               :animation="200"
+                               :group="{name: 'fields', pull: 'clone', put: false}"
+                               @end="onFieldMoveEnd($event)"
+                               ghost-class="rb-facet-field-moving">
+                        <b-list-group-item v-for="field in facet.fields" :key="field.name"
+                                           class="cursor-pointer">
+                            <rb-text>{{field.labelRu}}</rb-text>
+                        </b-list-group-item>
+                    </draggable>
+                </b-list-group>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import draggable from "vuedraggable";
+    import {UtFormConfig} from "@/utils/UtFormConfig";
+
+    export default {
+        name: 'DocTemplateFacetList',
+        components: {draggable},
+        props: {
+            facets: {type: Array, default: () => []}
+        },
+        data() {
+            return {
+                allFacets: [],
+                innerFacets: [],
+                facetSearchStr: null,
+            }
+        },
+        watch: {
+            facetSearchStr() {
+                this.findInFacets(this.facetSearchStr);
+            },
+            facets() {
+                this.handleFacetsProp();
+            }
+        },
+        methods: {
+            onFieldCloned(cloneField) {
+                let field = JSON.parse(JSON.stringify(cloneField));
+                field.input = UtFormConfig.getDefaultInput(field);
+                return field;
+            },
+            onFieldMoveEnd(event) {
+                this.$emit('fieldMoveEnd', event);
+            },
+            findInFacets(str) {
+                str = str.toLowerCase();
+                if(!str || str.length === 0) {
+                    this.innerFacets = this.allFacets;
+                }
+                let facets = JSON.parse(JSON.stringify(this.allFacets));
+                facets = facets.filter(facet => {
+                    let facetFound = false;
+                    facet.fields = facet.fields.filter(field => {
+                        let fieldFound = field.labelRu.toLowerCase().indexOf(str) >= 0;
+                        if(fieldFound) {
+                            facetFound = true;
+                        }
+                        return fieldFound;
+                    });
+                    return facetFound;
+                });
+                this.innerFacets = facets;
+            },
+            handleFacetsProp() {
+                let innerFacets = this.facets.map(f => ({...f, expanded: false}));
+                this.innerFacets = JSON.parse(JSON.stringify(innerFacets));
+                this.allFacets = JSON.parse(JSON.stringify(innerFacets));
+            }
+        },
+        created() {
+            this.handleFacetsProp();
+        }
+    }
+</script>

package/src/components/DocTemplateFieldSidebar.vue

@@ -0,0 +1,184 @@
+<template>
+    <b-sidebar right class="rb-doc-template-field-sidebar" bg-variant="white" shadow
+               v-model="innerVisible">
+        <template #header>
+            <b-button class="rb-sidebar-close-btn" variant="secondary" @click="hide">
+                <rb-icon :icon="innerVisible? 'icon-chevron-right': 'icon-chevron-left'"></rb-icon>
+            </b-button>
+            <h4>Редактор свойств</h4>
+        </template>
+
+        <b-form v-if="field">
+            <div class="rb-form-section">
+                <b-form-row>
+                    <b-col lg="12">
+                        <b-form-group label="Название" class="rb-immutable">
+                            <rb-text>{{field.name}}</rb-text>
+                        </b-form-group>
+                    </b-col>
+                </b-form-row>
+                <b-form-row>
+                    <b-col lg="12">
+                        <b-form-group label="Тип" class="rb-immutable">
+                            <rb-text>{{field.type}}</rb-text>
+                        </b-form-group>
+                    </b-col>
+                </b-form-row>
+                <b-form-row>
+                    <b-col lg="12">
+                        <b-form-group label="Тэг для файла шаблона" class="rb-immutable">
+                            <rb-text>{{field.tag}}</rb-text>
+                        </b-form-group>
+                    </b-col>
+                </b-form-row>
+                <b-form-row>
+                    <b-col lg="12">
+                        <b-form-group label="Заголовок">
+                            <b-form-input v-model="field.labelRu"></b-form-input>
+                        </b-form-group>
+                    </b-col>
+                </b-form-row>
+                <b-form-row>
+                    <b-col lg="12">
+                        <b-checkbox size="lg" v-model="field.multiple">Множественное</b-checkbox>
+                    </b-col>
+                </b-form-row>
+                <b-form-row>
+                    <b-col lg="12">
+                        <b-checkbox size="lg" v-model="field.visible">Отображаемое</b-checkbox>
+                    </b-col>
+                </b-form-row>
+                <b-form-row>
+                    <b-col lg="12">
+                        <b-checkbox size="lg" v-model="field.editable">Редактируемое</b-checkbox>
+                    </b-col>
+                </b-form-row>
+                <b-form-row>
+                    <b-col lg="12">
+                        <b-checkbox size="lg" v-model="field.required">Обязательное</b-checkbox>
+                    </b-col>
+                </b-form-row>
+            </div>
+            <div class="rb-form-section">
+                <div class="rb-title">
+                    Настройки ввода
+                </div>
+
+                <b-form-row>
+                    <b-col lg="12">
+                        <b-form-group label="Тип инпута">
+                            <rb-dropdown-input v-model="currentInputName"
+                                               :items="inputOptions"
+                                               display-field="text"
+                                               value-field="name"
+                                               block>
+                            </rb-dropdown-input>
+                        </b-form-group>
+
+                        <template v-for="(prop, propName) in field.input.props">
+                            <b-form-group :label="prop.label" :key="propName" v-if="prop.visible">
+                                <component v-bind:is="getPropInputType(prop, propName)"
+                                           v-model="field.input.propsData[propName]"
+                                           v-bind="getPropInputPropData(prop, propName)"></component>
+                            </b-form-group>
+                        </template>
+
+                    </b-col>
+                </b-form-row>
+            </div>
+
+            <div class="rb-form-section" v-if="field.input">
+                <div class="rb-title">
+                    Значение по-умолчанию
+                </div>
+
+                <b-form-row>
+                    <b-col lg="12">
+                        <b-form-group :label="field.labelRu" ref="inputContainer">
+                            <component v-bind:is="field.input.type"
+                                       v-model="field.defaultValue"
+                                       v-bind="field.input.propsData"></component>
+                        </b-form-group>
+                    </b-col>
+                </b-form-row>
+            </div>
+        </b-form>
+    </b-sidebar>
+</template>
+
+<script>
+    import {UtFormConfig} from "@/utils/UtFormConfig";
+
+    export default {
+        name: 'DocTemplateFieldSidebar',
+        props: {
+            value: {
+                type: Object,
+                default: null
+            },
+            visible: {
+                type: Boolean,
+                default: null,
+            }
+        },
+        data() {
+            return {
+                innerVisible: null,
+                field: null,
+                currentInputName: null,
+            }
+        },
+        computed: {
+            inputOptions() {
+                return this.field ? UtFormConfig.getInputTypes(this.field) : [];
+            }
+        },
+        watch: {
+            visible() {
+                this.innerVisible = this.visible;
+            },
+            value() {
+                this.field = this.value;
+                if (this.field && this.field.input) {
+                    this.currentInputName = this.field.input.name;
+                }
+            },
+            field() {
+                this.$emit('input', this.field);
+                this.$emit('change', this.field);
+            },
+            currentInputName() {
+                this.field.input = UtFormConfig.getInputTypeByName(this.currentInputName, this.field);
+            },
+        },
+        methods: {
+            hide() {
+                this.innerVisible = false;
+                this.$emit('hide');
+            },
+            getPropInputType(prop, propName) {
+                if (prop.type === 'string') {
+                    return 'b-form-input'
+                } else {
+                    return 'rb-boolean-single-option-input';
+                }
+            },
+            getPropInputPropData(prop, propName) {
+                if (prop.type === 'string') {
+                    return {
+                        type: 'text',
+                    }
+                } else {
+                    return {}
+                }
+            }
+        },
+        created() {
+            this.innerVisible = this.visible;
+            this.field = this.value;
+            if (this.field && this.field.input) {
+                this.currentInputName = this.field.input.name;
+            }
+        }
+    }
+</script>

package/src/components/DocTemplateSectionModal.vue

@@ -0,0 +1,63 @@
+<template>
+    <b-modal id="rb-doc-template-section-modal" modal-class="rb-doc-template-section-modal"
+             ok-title="Сохранить изменения"
+             cancel-variant="outline-gray"
+             cancel-title="Отмена"
+             @ok.prevent="onOk"
+             :title="title">
+        <b-form @submit.prevent="onOk">
+            <b-form-row>
+                <b-col lg="12">
+                    <b-form-group label="Наименование секции">
+                        <b-form-input v-model="label"></b-form-input>
+                    </b-form-group>
+                </b-col>
+            </b-form-row>
+        </b-form>
+    </b-modal>
+</template>
+
+<script>
+    export default {
+        name: 'DocTemplateSectionModal',
+        props: {
+            section: Object,
+            mode: {type: String, default: 'ins'},
+            onAfterOk: {type: Function, default: () => {}}
+        },
+        data() {
+            return {
+                id: 'rb-doc-template-section-modal',
+                label: null
+            }
+        },
+        computed: {
+            title() {
+                return this.mode === 'ins' ? 'Добавление секции' : 'Редактирование секции';
+            }
+        },
+        watch: {
+            section() {
+                if(this.section) {
+                    this.label = this.section.labelRu;
+                }
+            }
+        },
+        methods: {
+            onOk() {
+                this.section.labelRu = this.label;
+                if(this.onAfterOk) {
+                    this.onAfterOk();
+                }
+                this.$nextTick(() => {
+                    this.$bvModal.hide(this.id);
+                });
+            }
+        },
+        created() {
+            if(this.section) {
+                this.label = this.section.labelRu;
+            }
+        }
+    }
+</script>