rb-document-form-constructor 0.9.26 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rb-document-form-constructor",
-  "version": "0.9.26",
+  "version": "0.10.0",
   "description": "",
   "main": "dist/rb-document-form-constructor.ssr.js",
   "browser": "dist/rb-document-form-constructor.esm.js",
@@ -20,6 +20,7 @@
     "build:unpkg": "cross-env kNODE_ENV=production rollup --config build/rollup.config.js --format iife"
   },
   "dependencies": {
+    "ace-builds": "^1.43.6",
     "bootstrap": "^4.5.0",
     "bootstrap-vue": "^2.15.0",
     "rb-bv-components": "^2.5.63",
@@ -58,4 +59,4 @@
   "engines": {
     "node": ">=12"
   }
-}
+}

package/src/components/FieldRuleFormModal.vue

@@ -4,6 +4,8 @@
            modal-class="rb-field-rule-form-modal"
            size="lg"
            @ok.prevent="onOk"
+           @shown="onModalShown"
+           @hidden="onModalHidden"
            ok-title="Сохранить правило"
            cancel-variant="outline-gray"
            cancel-title="Отмена">
@@ -112,12 +114,7 @@
                         </b-dropdown-item>
                       </b-dropdown>
                     </b-button-toolbar>
-                    <b-form-textarea v-model="innerRule.script"
-                                     :state="state.script"
-                                     :invalid-feedback="state.script_feedback"
-                                     rows="8"
-                                     ref="scriptInput"
-                    ></b-form-textarea>
+                    <div class="rb-script-editor" ref="scriptEditor"></div>
                   </div>
                 </b-form-group>
               </b-col>
@@ -138,6 +135,10 @@ import {UtFormConfig} from "../utils/UtFormConfig";
 import {UtFormConstructor} from "../utils/UtFormConstructor";
 import DocForm from "./DocForm";
 import {UtRandom} from "@/utils/UtRandom.js";
+import ace from "ace-builds/src-noconflict/ace";
+import "ace-builds/src-noconflict/mode-javascript";
+import "ace-builds/src-noconflict/theme-textmate";
+import "ace-builds/src-noconflict/ext-language_tools";
 
 export default {
   name: 'FieldRuleFormModal',
@@ -155,6 +156,7 @@ export default {
       state: this.getDefaultState(),
       innerFormConfig: null,
       innerRule: null,
+      scriptEditorInstance: null,
     }
   },
   computed: {
@@ -172,16 +174,108 @@ export default {
     formConfig() {
       this.copyToInnerFormConfig();
     },
-    rule() {
-      if (this.rule) {
-        this.innerRule = this.rule;
-      } else {
-        this.innerRule = this.getDefaultRule();
+    rule: {
+      immediate: true,
+      handler() {
+        if (this.rule) {
+          this.innerRule = this.rule;
+        } else {
+          this.innerRule = this.getDefaultRule();
+        }
       }
-
     }
   },
   methods: {
+    initScriptEditor() {
+      this.scriptEditorInstance = ace.edit(this.$refs.scriptEditor);
+      this.scriptEditorInstance.setTheme("ace/theme/textmate");
+      this.scriptEditorInstance.session.setMode("ace/mode/javascript");
+      this.scriptEditorInstance.session.setUseSoftTabs(true);
+      this.scriptEditorInstance.session.setTabSize(2);
+      this.scriptEditorInstance.session.setUseWrapMode(true);
+      this.scriptEditorInstance.setFontSize(13);
+      this.scriptEditorInstance.setShowPrintMargin(false);
+      this.scriptEditorInstance.setOption("scrollPastEnd", 0);
+      this.scriptEditorInstance.setOptions({
+        enableBasicAutocompletion: true,
+        enableLiveAutocompletion: true,
+        enableSnippets: true,
+      });
+      this.scriptEditorInstance.setValue(
+          this.innerRule && this.innerRule.script ? this.innerRule.script : '',
+          -1
+      );
+      const languageTools = ace.require("ace/ext/language_tools");
+      const customCompleter = {
+        getCompletions: (editor, session, pos, prefix, callback) => {
+          const completions = [
+            {
+              caption: "doc",
+              value: "doc",
+              meta: "model",
+              score: 1000,
+            },
+            {
+              caption: "value",
+              value: "doc['field_name']",
+              meta: "current field value",
+              score: 1000,
+            },
+            {
+              caption: "form",
+              value: "form",
+              meta: "form component",
+              score: 1000,
+            },
+            {
+              caption: "allFields",
+              value: "const allFields = utils.getFields(form.formConfig);",
+              meta: "function",
+              score: 1000,
+            },
+          ];
+
+          callback(null, completions);
+        },
+      };
+      const defaultCompleters = [
+        languageTools.textCompleter,
+        languageTools.keyWordCompleter,
+        languageTools.snippetCompleter,
+      ].filter(Boolean);
+      this.scriptEditorInstance.completers = [...defaultCompleters, customCompleter];
+
+      this.scriptEditorInstance.on('change', () => {
+        if (this.innerRule) {
+          this.innerRule.script = this.scriptEditorInstance.getValue();
+          this.validateFields('script');
+        }
+      });
+    },
+    syncScriptEditorValue() {
+      if (!this.scriptEditorInstance || !this.innerRule) {
+        return;
+      }
+
+      const editorValue = this.scriptEditorInstance.getValue();
+      const nextValue = this.innerRule.script != null ? this.innerRule.script : '';
+      if (editorValue !== nextValue) {
+        this.scriptEditorInstance.setValue(nextValue, -1);
+      }
+    },
+    getScriptCaretPosition() {
+      if (this.scriptEditorInstance) {
+        const session = this.scriptEditorInstance.session;
+        const cursor = this.scriptEditorInstance.getCursorPosition();
+        if (!session || !cursor) {
+          return null;
+        }
+
+        return session.doc.positionToIndex(cursor, 0);
+      }
+
+      return this.$refs.scriptInput ? this.$refs.scriptInput.selectionStart : null;
+    },
     validateFields(fieldName) {
       let fields = fieldName ? [fieldName] : ['name', 'event', 'script'];
       fields.forEach(field => {
@@ -241,19 +335,32 @@ export default {
       this.innerRule = null;
     },
     addVariableToScript(varName) {
-      let caretPosition = this.$refs.scriptInput.selectionStart;
+      let caretPosition = this.getScriptCaretPosition();
       this.insertTextToScript(varName, caretPosition);
     },
     addSetVariableToScript(field) {
-      let caretPosition = this.$refs.scriptInput.selectionStart;
+      let caretPosition = this.getScriptCaretPosition();
       this.insertTextToScript(`doc['${field.name}'] = Значение;`, caretPosition);
     },
     addCallInputFunction(field) {
-      let caretPosition = this.$refs.scriptInput.selectionStart;
+      let caretPosition = this.getScriptCaretPosition();
       this.insertTextToScript(`form.$refs['${field.name}'][0].Название функции();`, caretPosition);
     },
     insertTextToScript(text, position) {
-      position = position != null ? position : this.script.length;
+      if (this.scriptEditorInstance) {
+        const session = this.scriptEditorInstance.session;
+        if (!session) {
+          return;
+        }
+        const offset = position != null ? position : this.scriptEditorInstance.getValue().length;
+        const insertPosition = session.doc.indexToPosition(offset, 0);
+        session.insert(insertPosition, text);
+        this.scriptEditorInstance.focus();
+        return;
+      }
+
+      const scriptValue = this.innerRule && this.innerRule.script ? this.innerRule.script : '';
+      position = position != null ? position : scriptValue.length;
       this.innerRule.script = this.innerRule.script != null ? this.innerRule.script : '';
       let scriptSplit = this.innerRule.script.split('');
       scriptSplit.splice(position, 0, text);
@@ -264,6 +371,21 @@ export default {
       if (rule) {
         Object.assign(this.innerRule, rule);
         this.innerRule.script = this.innerRule.script.trim();
+        this.syncScriptEditorValue();
+      }
+    },
+    onModalShown() {
+      this.initScriptEditor();
+      this.syncScriptEditorValue();
+
+      if (this.scriptEditorInstance) {
+        this.scriptEditorInstance.focus();
+      }
+    },
+    onModalHidden() {
+      if (this.scriptEditorInstance) {
+        this.scriptEditorInstance.dispose();
+        this.scriptEditorInstance = null;
       }
     },
     onOk() {
@@ -285,3 +407,12 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.rb-script-editor {
+  min-height: 220px;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  margin-top: 0.5rem;
+}
+</style>