@dualbox/editor 1.0.85 → 1.0.87

package/js/src/v/templates/addNode.vue

@@ -4,25 +4,26 @@
 }
 
 .h100 {
-    height: 100%!important;
-    min-height: 100%!important;
+    height: 100% !important;
+    min-height: 100% !important;
 }
 
-.table-desc th, .table-desc td {
+.table-desc th,
+.table-desc td {
     margin-right: 10px;
 }
 
 #add-node-modal .modal-dialog {
-  min-width: calc(100% - 40px)!important;
-  height: calc(100% - 40px);
-  margin: 20px;
-  padding: 0;
+    min-width: calc(100% - 40px) !important;
+    height: calc(100% - 40px);
+    margin: 20px;
+    padding: 0;
 }
 
 #add-node-modal .modal-content {
-  height: auto;
-  min-height: 100%;
-  border-radius: 0;
+    height: auto;
+    min-height: 100%;
+    border-radius: 0;
 }
 
 .nav-item {
@@ -59,8 +60,8 @@
     display: none;
     width: 1px;
     height: 24px;
-    box-shadow: none!important;
-    border-color: rgba(0,0,0,0.3)!important;
+    box-shadow: none !important;
+    border-color: rgba(0, 0, 0, 0.3) !important;
 }
 
 .nav-link.active .input-search {
@@ -71,32 +72,35 @@
     width: 200px;
 }
 .nav-compute > a.active > input {
-    background-color: rgba(0,0,0,0.3)!important;
+    background-color: rgba(0, 0, 0, 0.3) !important;
 }
 
-.nav-compute > a.active,  .nav-compute > a.active > input {
-    background-color: rgba(0,0,0,0.3)!important;
-    color: rgba(255,255,255,0.5);
+.nav-compute > a.active,
+.nav-compute > a.active > input {
+    background-color: rgba(0, 0, 0, 0.3) !important;
+    color: rgba(255, 255, 255, 0.5);
 }
 
-.nav-compute> a.active > .input-search::placeholder {
-    color: rgba(255,255,255,0.5);
+.nav-compute > a.active > .input-search::placeholder {
+    color: rgba(255, 255, 255, 0.5);
 }
 
-.nav-uis > a.active,  .nav-uis > a.active > input {
-    background-color: #bff2ca!important;
+.nav-uis > a.active,
+.nav-uis > a.active > input {
+    background-color: #bff2ca !important;
 }
 
 .nav-inputs > a.active {
-    background-color: #f5d76e!important;
+    background-color: #f5d76e !important;
 }
 
 .nav-compute > a.active > input {
-    background-color: rgba(0,0,0,0.8);
+    background-color: rgba(0, 0, 0, 0.8);
 }
 
-.nav-outputs > a.active,  .nav-outputs > a.active > input {
-    background-color: #ffb3a7!important;
+.nav-outputs > a.active,
+.nav-outputs > a.active > input {
+    background-color: #ffb3a7 !important;
 }
 
 .message-container {
@@ -115,7 +119,8 @@
     text-align: center;
 }
 
-.tab-content, .tab-pane {
+.tab-content,
+.tab-pane {
     width: 100%;
     height: 100%;
 }
@@ -126,7 +131,7 @@ label {
 }
 
 fieldset {
-    border: 1px solid rgba(0,0,0,0.1);
+    border: 1px solid rgba(0, 0, 0, 0.1);
     margin: 10px;
     padding: 20px;
     min-width: 600px;
@@ -143,23 +148,23 @@ fieldset {
                         <li class="nav-item nav-compute">
                             <a class="nav-link active" href="#add-module-or-ui" data-toggle="pill" @click="selectType('module')" draggable="false">
                                 <span>Compute</span>
-                                <input class="form-control input-sm input-search search-modules" type="text" placeholder="Search modules..." id="search-modules" v-model="searchText['module']" @input="searchModules" autofocus/>
+                                <input class="form-control input-sm input-search search-modules" type="text" placeholder="Search modules..." id="search-modules" v-model="searchText['module']" @input="searchModules" autofocus />
                             </a>
                         </li>
                         <li class="nav-item nav-uis">
                             <a class="nav-link" href="#add-module-or-ui" data-toggle="pill" @click="selectType('ui')" draggable="false">
                                 <span>UI</span>
-                                <input class="form-control input-sm input-search search-ui" type="text" placeholder="Search UIs..." id="search-uis" @input="searchModules" v-model="searchText['ui']" autofocus/>
+                                <input class="form-control input-sm input-search search-ui" type="text" placeholder="Search UIs..." id="search-uis" @input="searchModules" v-model="searchText['ui']" autofocus />
                             </a>
                         </li>
-                        <li class="nav-item nav-inputs"  @click="selectType('input')">
+                        <li class="nav-item nav-inputs" @click="selectType('input')">
                             <a class="nav-link" href="#add-input" data-toggle="pill" draggable="false"><span>Input</span></a>
                         </li>
                         <li class="nav-item nav-outputs" @click="selectType('output')">
-                            <a class="nav-link" href="#add-output"data-toggle="pill" draggable="false"><span>Output</span></a>
+                            <a class="nav-link" href="#add-output" data-toggle="pill" draggable="false"><span>Output</span></a>
                         </li>
                         <li class="nav-item nav-outputs" @click="selectType('metanode')">
-                            <a class="nav-link" href="#add-metanode"data-toggle="pill" draggable="false"><span>Metabox</span></a>
+                            <a class="nav-link" href="#add-metanode" data-toggle="pill" draggable="false"><span>Metabox</span></a>
                         </li>
                     </ul>
 
@@ -204,7 +209,7 @@ fieldset {
 
                                         <div class="form-group">
                                             <label for="input-name">Input type:</label>
-                                            <input style="display: none;" required/>
+                                            <input style="display: none;" required />
                                             <edit-type ref="inputType" :type="inputType" :displayOKButton="false"></edit-type>
                                         </div>
 
@@ -228,7 +233,7 @@ fieldset {
 
                                         <div class="form-group">
                                             <label for="output-name">Output type:</label>
-                                            <input style="display: none;" required/>
+                                            <input style="display: none;" required />
                                             <edit-type ref="outputType" :type="outputType" :displayOKButton="false"></edit-type>
                                         </div>
 
@@ -243,7 +248,9 @@ fieldset {
                             <div class="tab-pane" id="add-metanode" role="tabpanel" aria-labelledby="add-metanode-tab">
                                 <div class="row">
                                     <fieldset class="mx-auto" style="margin-top: 50px;">
-                                        <h2 class="mt-2">Add a new Metabox <!--<button class="btn btn-outline-secondary float-right"  @click="importMetabox"><i class="fas fa-upload"></i></button>--></h2>
+                                        <h2 class="mt-2">Add a new Metabox
+                                            <!--<button class="btn btn-outline-secondary float-right"  @click="importMetabox"><i class="fas fa-upload"></i></button>-->
+                                        </h2>
 
                                         <div class="form-group">
                                             <label for="metanode-name">Metabox name:</label>
@@ -276,11 +283,11 @@ fieldset {
 </template>
 
 <script>
-import _ from 'lodash-es';
-import swal from 'sweetalert2';
-import SearchResultsVue from './searchResults.vue';
-import DisplayResultVue from './displayResult.vue';
-import EditTypeVue from './editType.vue'
+import _ from "lodash-es";
+import swal from "sweetalert2";
+import SearchResultsVue from "./searchResults.vue";
+import DisplayResultVue from "./displayResult.vue";
+import EditTypeVue from "./editType.vue";
 
 export default {
     props: [
@@ -288,35 +295,35 @@ export default {
         "mousePosition" // mouse position when this panel was opened
     ],
     components: {
-        'search-results' : SearchResultsVue,
-        'display-result' : DisplayResultVue,
-        'edit-type'      : EditTypeVue
+        "search-results": SearchResultsVue,
+        "display-result": DisplayResultVue,
+        "edit-type": EditTypeVue
     },
-    data: function () {
+    data: function() {
         return {
             error: null,
 
             searchText: {}, // the search text, indexed by selectedType
             results: {}, // dictionary of arrays, indexed by selectedType
-            selectedResult : {}, // dictionary of string, indexed by selectedType
+            selectedResult: {}, // dictionary of string, indexed by selectedType
             selectedType: "module",
             inputType: "*",
             outputType: "*"
-        }
+        };
     },
     created: function() {
         this.view = window.dualboxEditor.v;
     },
     updated: function() {
-        console.log('AddNode updated !');
+        console.log("AddNode updated !");
         this.updateVisibility();
         this.setSearchFocus();
 
-        if( !this.display ) {
+        if (!this.display) {
             // make sure the modal disappeared
-            $(this.$el).modal('hide');
-            $('body').removeClass('modal-open');
-            $('.modal-backdrop').remove();
+            $(this.$el).modal("hide");
+            $("body").removeClass("modal-open");
+            $(".modal-backdrop").remove();
         }
     },
     mounted: function() {
@@ -327,23 +334,24 @@ export default {
             this.setSearchFocus();
         });
         $(this.$el).on("hide.bs.modal", () => {
-            self.$emit('closed');
+            self.$emit("closed");
         });
 
-        $(this.$el).find('[data-toggle="pill"]').on('shown.bs.tab', (e) => {
-            this.setSearchFocus();
-            var selectedResult = this.getSelectedResult();
-            if( selectedResult ) {
-                this.$refs.searchResults.selected = selectedResult.name;
-            }
-        });
+        $(this.$el)
+            .find('[data-toggle="pill"]')
+            .on("shown.bs.tab", e => {
+                this.setSearchFocus();
+                var selectedResult = this.getSelectedResult();
+                if (selectedResult) {
+                    this.$refs.searchResults.selected = selectedResult.name;
+                }
+            });
     },
     methods: {
-        updateVisibility : function() {
-            if( this.display ) {
+        updateVisibility: function() {
+            if (this.display) {
                 $(this.$el).modal("show");
-            }
-            else {
+            } else {
                 $(this.$el).modal("hide");
             }
         },
@@ -351,11 +359,28 @@ export default {
         closeModal: function() {
             // don't mutate prop directly, mute the parent
             // this.display = false;
-            this.$emit('closed');
+
+            return new Promise((resolve, reject) => {
+                this.$emit("closed");
+
+                let forceCloseModal = () => {
+                    if (!this.display) {
+                        resolve();
+                    } else {
+                        this.$emit("closed");
+                        setTimeout(forceCloseModal, 100);
+                    }
+                };
+
+                this.$nextTick(forceCloseModal);
+            });
         },
 
-        setSearchFocus : function() {
-            $(this.$el).find('.nav-link.active').find('input').focus();
+        setSearchFocus: function() {
+            $(this.$el)
+                .find(".nav-link.active")
+                .find("input")
+                .focus();
         },
 
         selectType(t) {
@@ -364,81 +389,100 @@ export default {
             this.searchText[t] = searchText;
         },
 
-        addSelectedNode: function(e) {
-            switch( this.selectedType ) {
-            case "module":
-            case "ui":
-                var selectedNode = $('.node-result.selected')[0];
-                if( selectedNode ) {
-                    this.closeModal();
-                    this.$nextTick(() => {
+        addSelectedNode: async function(e) {
+            switch (this.selectedType) {
+                case "module":
+                case "ui":
+                    var selectedNode = $(".node-result.selected")[0];
+                    if (selectedNode) {
+                        await this.closeModal();
                         // add node to the controller
-                        var packageName = $(selectedNode).data('package');
+                        var packageName = $(selectedNode).data("package");
                         this.view.c.addNewBox(packageName, this.mousePosition);
-                    });
-                }
-                else {
-                    swal('Please select a node', '', 'error');
-                    return;
-                }
-                break;
-
-            case "input":
-                var type = this.$refs.inputType.get();
-                var name = $(this.$el).find('.input-name').val();
-                var desc = $(this.$el).find('.input-description').val();
-                if( type !== undefined && name ) {
-                    this.closeModal();
-                    this.$nextTick(() => {
-                        this.view.c.addInput(name, type, desc, this.mousePosition);
+                    } else {
+                        swal("Please select a node", "", "error");
+                        return;
+                    }
+                    break;
+
+                case "input":
+                    var type = this.$refs.inputType.get();
+                    var name = $(this.$el)
+                        .find(".input-name")
+                        .val();
+                    var desc = $(this.$el)
+                        .find(".input-description")
+                        .val();
+                    if (type !== undefined && name) {
+                        await this.closeModal();
+                        this.view.c.addInput(
+                            name,
+                            type,
+                            desc,
+                            this.mousePosition
+                        );
                         // reset fields
                         this.$refs.inputType.resetChanges();
-                        $(this.$el).find('.input-name').val("");
-                        $(this.$el).find('.input-description').val("");
-                    });
-                }
-                else {
-                    swal('Please complete all fields', '', 'error');
-                    return;
-                }
-                break;
-
-            case "output":
-                var name = $(this.$el).find('.output-name').val();
-                var type = this.$refs.outputType.get();
-                var desc = $(this.$el).find('.output-description').val();
-                if( type !== undefined && name ) {
-                    this.closeModal();
-                    this.$nextTick(() => {
-                        this.view.c.addOutput(name, type, desc, this.mousePosition);
+                        $(this.$el)
+                            .find(".input-name")
+                            .val("");
+                        $(this.$el)
+                            .find(".input-description")
+                            .val("");
+                    } else {
+                        swal("Please complete all fields", "", "error");
+                        return;
+                    }
+                    break;
+
+                case "output":
+                    var name = $(this.$el)
+                        .find(".output-name")
+                        .val();
+                    var type = this.$refs.outputType.get();
+                    var desc = $(this.$el)
+                        .find(".output-description")
+                        .val();
+                    if (type !== undefined && name) {
+                        await this.closeModal();
+                        this.view.c.addOutput(
+                            name,
+                            type,
+                            desc,
+                            this.mousePosition
+                        );
                         // reset fields
                         this.$refs.outputType.resetChanges();
-                        $(this.$el).find('.output-name').val("");
-                        $(this.$el).find('.output-description').val("");
-                    });
-                }
-                else {
-                    swal('Please complete all fields', '', 'error');
-                    return;
-                }
-                break;
-
-            case "metanode":
-                var name = $(this.$el).find('.metanode-name').val();
-                var desc = $(this.$el).find('.metanode-description').val();
-                if( !name ) {
-                    swal('Please complete name field', '', 'error');
-                    return;
-                }
-
-                var json = this.metanodeJSON || {};
-                json.description = desc;
-
-                this.closeModal();
-                this.$nextTick(() => {
+                        $(this.$el)
+                            .find(".output-name")
+                            .val("");
+                        $(this.$el)
+                            .find(".output-description")
+                            .val("");
+                    } else {
+                        swal("Please complete all fields", "", "error");
+                        return;
+                    }
+                    break;
+
+                case "metanode":
+                    var name = $(this.$el)
+                        .find(".metanode-name")
+                        .val();
+                    var desc = $(this.$el)
+                        .find(".metanode-description")
+                        .val();
+                    if (!name) {
+                        swal("Please complete name field", "", "error");
+                        return;
+                    }
+
+                    var json = this.metanodeJSON || {};
+                    json.description = desc;
+
+                    await this.closeModal();
                     this.view.c.addNewMetabox(name, json, this.mousePosition);
-                });
-            default:
+                default:
             }
         },
 
@@ -447,12 +491,14 @@ export default {
             var text = this.searchText[this.selectedType];
             try {
                 this.error = null;
-                this.results[this.selectedType] = await this.view.e.search(text, this.selectedType);
+                this.results[this.selectedType] = await this.view.e.search(
+                    text,
+                    this.selectedType
+                );
                 this.$forceUpdate();
-            }
-            catch(e) {
+            } catch (e) {
                 this.error = e;
-                swal('error searching packages', e.reason, "error");
+                swal("error searching packages", e.reason, "error");
             }
         },
 
@@ -463,14 +509,14 @@ export default {
         setSelectedResult: function(packageName) {
             // first, find the selected result in the list
             var selectedPackage = null;
-            _.each(this.getResults(), (r) => {
-                if( r.name == packageName ) {
+            _.each(this.getResults(), r => {
+                if (r.name == packageName) {
                     selectedPackage = r;
                     return false;
                 }
             });
 
-            if( !selectedPackage ) {
+            if (!selectedPackage) {
                 throw "Could not find package named " + packageName;
             }
 
@@ -488,22 +534,23 @@ export default {
 
         getNbResults: function() {
             var results = this.getResults();
-            return results && results.length ? results.length: 0;
+            return results && results.length ? results.length : 0;
         },
 
         onMetaboxFileSelect: function(e) {
             var file = e.target.files[0];
-            const reader = new FileReader()
-            reader.onload = (e) => {
+            const reader = new FileReader();
+            reader.onload = e => {
                 this.metanodeJSON = JSON.parse(e.target.result);
-                if( this.metanodeJSON.description ) {
-                    $(this.$el).find('.metanode-description').val(this.metanodeJSON.description);
+                if (this.metanodeJSON.description) {
+                    $(this.$el)
+                        .find(".metanode-description")
+                        .val(this.metanodeJSON.description);
                 }
-            }
-            reader.readAsText(file)
+            };
+            reader.readAsText(file);
         }
     }
-}
-
+};
 </script>
 

package/js/src/v/templates/editMainSettings.vue

@@ -140,6 +140,8 @@ i.fa, i.fas, i.far {
 
 .card-main-settings {
     border: 1px solid rgba(0,0,0,.125);
+    max-height: calc(100vh - 120px);
+    overflow: auto;
 }
 
 .card-main-settings > .card-header {