update

resources/assets/js/api/Api.js

@@ -68,7 +68,8 @@ const services = {
     SEARCH: "/home/search",
     PROCESSES: "/home/processes",
     USERS: "/home/users",
-    TASKS: "/home/tasks"
+    TASKS: "/home/tasks",
+    DEBUG_STATUS: "/home/process-debug-status?processUid={prj_uid}"
 };
 
 export default {

resources/assets/js/api/Cases.js

@@ -187,6 +187,19 @@ export let cases = {
             paged: dt.paged
         })
     },
+    /**
+     * Make a search request to the Api service 
+     * @param {object} dt - filter parameters
+     */
+    debugStatus(dt) {
+        return Api.get({
+            service: "DEBUG_STATUS",
+            params: {},
+            keys: {
+                prj_uid: dt.PRO_UID
+            },
+        })
+    },
     debugVars(data) {
         var params;
         if (data.filter === "all") {

resources/assets/js/components/home/debugger/Debugger.vue

@@ -1,47 +1,94 @@
 <template>
+  <div class="debugger-container">
+    <tabs>
+      <tab name="Variables">
         <div
-    v-bind:class="{ hiddencon: !isRtl, 'hiddencon-rtl': isRtl }"
+          class="btn-toolbar justify-content-between"
-    v-if="openCaseState"
+          role="toolbar"
+          aria-label="Toolbar with button groups"
         >
-    <div
+          <b-form-radio-group
-      data-target="#debugModal"
+            @change="changeOption"
-      @click="showDebugger"
+            v-model="optionsDebugVars.selected"
-      v-bind:class="{ 'hiddencon-label': !isRtl, 'hiddencon-label-rtl': isRtl }"
+            :options="optionsDebugVars.options"
-    >
+            button-variant="outline-secondary"
-      <i class="fa fa-bug"></i>
+            name="radio-btn-outline"
+            size="sm"
+            buttons
+          ></b-form-radio-group>
         </div>
-    <div class="btn-group-vertical btn-container">
+        <div style="padding-top: 10px">
-      <button
+          <v-client-table
-        type="button"
+            :data="dataTable"
-        class="btn btn-pm-primary"
+            :columns="columns"
-        data-toggle="modal"
+            :options="options"
-        data-placement="bottom"
+            ref="vueTable"
-        data-target="#debugModal"
+          />
-        @click="showDebugger"
-      >
-        <i class="fa fa-bug"></i>
-      </button>
         </div>
-    <ModalDebugger ref="modal-debugger" />
+      </tab>
+      <tab name="Triggers">
+        <div>
+          <v-client-table
+            :data="dataTableTriggers"
+            :columns="columns"
+            :options="options"
+            ref="vueTableTriggers"
+          />
+        </div>
+      </tab>
+    </tabs>
   </div>
 </template>
 
 <script>
-import ModalDebugger from "./ModalDebugger.vue";
+import Tabs from "../../../components/tabs/Tabs.vue";
+import Tab from "../../../components/tabs/Tab.vue";
+import api from "../../../api/index";
 export default {
   name: "ButtonFleft",
   props: {
-    data: Object,
+    data: Object
   },
   components: {
-    ModalDebugger,
+    Tabs,
+    Tab,
   },
   data() {
     return {
-      openCaseState: true,
+      debugFullPage: false,
-      isRtl: false,
+      debugTabs: [],
+      activetab: 1,
+      variableTabs: [],
+      debugSearch: "",
+      isRTL: false,
+      dataTable: [],
+      dataTableTriggers: [],
+      columns: ["key", "value"],
+      options: {
+        perPage: 200,
+        filterable: true,
+        pagination: {
+          show: false,
+        },
+        headings: {
+          key: this.$i18n.t("ID_NAME"),
+          value: this.$i18n.t("ID_VALUE"),
+        },
+      },
+      optionsDebugVars: {
+        selected: "all",
+        options: [
+          { text: this.$i18n.t("ID_OPT_ALL"), value: "all" },
+          { text: this.$i18n.t("ID_DYNAFORM"), value: "dyn" },
+          { text: this.$i18n.t("ID_SYSTEM"), value: "sys" },
+        ],
+      },
     };
   },
+  mounted() {
+    this.getDebugVars({ filter: "all" });
+    this.getDebugVarsTriggers();
+  },
   methods: {
     classBtn(cls) {
       return "btn v-btn-request " + cls;
@@ -49,274 +96,205 @@ export default {
     showDebugger() {
       this.$refs["modal-debugger"].show();
     },
+    /**
+     * Get debug variables
+     */
+    getDebugVars(data) {
+      let that = this,
+        dt = [];
+      api.cases.debugVars(data).then((response) => {
+        _.forIn(response.data.data[0], function (value, key) {
+          dt.push({
+            key,
+            value,
+          });
+        });
+        this.dataTable = dt;
+      });
+    },
+    /**
+     * Get trigger variables
+     */
+    getDebugVarsTriggers(data) {
+      let that = this,
+        dt = [];
+      api.cases.debugVarsTriggers(data).then((response) => {
+        if (response.data.length > 0) {
+          _.forIn(response.data.data[0], function (value, key) {
+            dt.push({
+              key,
+              value,
+            });
+          });
+          this.dataTableTriggers = dt;
+        }
+      });
+    },
+    /**
+     * Change Radio option [All, Dynaform, System]
+     */
+    changeOption(opt) {
+      this.getDebugVars({ filter: opt });
+    },
   },
 };
 </script>
 
 <style>
-.btn-group,
+.debugger-container {
-.btn-group-vertical {
+  overflow: auto;
-  position: relative;
+  max-width: 25%;
-  display: -webkit-inline-box;
+  min-width: 25%;
-  display: -ms-inline-flexbox;
+  padding: 0.1rem;
-  display: inline-flex;
+  margin-right: 0;
-  vertical-align: middle;
+  margin-left: 0;
+  border-width: 1px;
+  border-top-left-radius: 0.1rem;
+  border-top-right-radius: 0.1rem;
 }
 
-.btn-group > .btn,
+.tabs-component {
-.btn-group-vertical > .btn {
+  margin: 0 0;
-  position: relative;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
 }
 
-.btn-group > .btn:hover,
+.tabs-component-tabs {
-.btn-group-vertical > .btn:hover {
+  border: solid 1px #ddd;
-  z-index: 1;
+  border-radius: 6px;
+  margin-bottom: 5px;
 }
 
-.btn-group > .btn:focus,
+@media (min-width: 700px) {
-.btn-group > .btn:active,
+  .tabs-component-tabs {
-.btn-group > .btn.active,
+    border: 0;
-.btn-group-vertical > .btn:focus,
+    align-items: stretch;
-.btn-group-vertical > .btn:active,
+    display: flex;
-.btn-group-vertical > .btn.active {
+    justify-content: flex-start;
-  z-index: 1;
+    margin-bottom: -1px;
+  }
 }
 
-.btn-group .btn + .btn,
+.tabs-component-tab {
-.btn-group .btn + .btn-group,
+  color: #999;
-.btn-group .btn-group + .btn,
+  font-size: 14px;
-.btn-group .btn-group + .btn-group,
+  font-weight: 600;
-.btn-group-vertical .btn + .btn,
+  margin-right: 0;
-.btn-group-vertical .btn + .btn-group,
+  list-style: none;
-.btn-group-vertical .btn-group + .btn,
-.btn-group-vertical .btn-group + .btn-group {
-  margin-left: -1px;
 }
 
-.btn-toolbar {
+.tabs-component-tab:not(:last-child) {
-  display: -webkit-box;
+  border-bottom: dotted 1px #ddd;
+}
+
+.tabs-component-tab:hover {
+  color: #666;
+}
+
+.tabs-component-tab.is-active {
+  color: #000;
+}
+
+.tabs-component-tab.is-disabled * {
+  color: #cdcdcd;
+  cursor: not-allowed !important;
+}
+
+@media (min-width: 700px) {
+  .tabs-component-tab {
+    background-color: #fff;
+    border: solid 1px #ddd;
+    border-radius: 3px 3px 0 0;
+    margin-right: 0.5em;
+    transform: translateY(2px);
+    transition: transform 0.3s ease;
+  }
+
+  .tabs-component-tab.is-active {
+    border-bottom: solid 1px #fff;
+    z-index: 2;
+    transform: translateY(0);
+  }
+}
+
+.tabs-component-tab-a {
+  align-items: center;
+  color: inherit;
+  display: flex;
+  padding: 0.75em 1em;
+  text-decoration: none;
+}
+
+.tabs-component-panels {
+  padding: 4em 0;
+}
+
+@media (min-width: 700px) {
+  .tabs-component-panels {
+    border-top-left-radius: 0;
+    background-color: #fff;
+    border: solid 1px #ddd;
+    border-radius: 0 6px 6px 6px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+    padding: 0.5em 0.5em;
+  }
+}
+
+.btn-group > input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+  display: none;
+}
+
+.btn-outline-secondary-active {
+  color: #fff;
+  background-color: #6c757d;
+  border-color: #6c757d;
+}
+
+.VueTables__search-field > label {
+  display: none;
+}
+
+.VueTables.VueTables--client .row {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  -webkit-box-pack: start;
+  margin-right: 0px;
-  -ms-flex-pack: start;
+  margin-left: 0px;
-  justify-content: flex-start;
 }
 
-.btn-toolbar .input-group {
+.debugger-container .VueTables.VueTables--client > * {
-  width: auto;
+  font-size: smaller;
 }
 
-.btn-group > .btn:first-child {
+.debugger-container .VueTables.VueTables--client .table td,
-  margin-left: 0;
+.table th {
+  padding: 0.3rem;
+  vertical-align: top;
+  border-top: 1px solid #dee2e6;
 }
 
-.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
+.debugger-container .form-control {
-.btn-group > .btn-group:not(:last-child) > .btn {
+  display: block;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.btn-group > .btn:not(:first-child),
-.btn-group > .btn-group:not(:first-child) > .btn {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.dropdown-toggle-split {
-  padding-right: 0.5625rem;
-  padding-left: 0.5625rem;
-}
-
-.dropdown-toggle-split::after,
-.dropup .dropdown-toggle-split::after,
-.dropright .dropdown-toggle-split::after {
-  margin-left: 0;
-}
-
-.dropleft .dropdown-toggle-split::before {
-  margin-right: 0;
-}
-
-.btn-sm + .dropdown-toggle-split,
-.btn-group-sm > .btn + .dropdown-toggle-split {
-  padding-right: 0.375rem;
-  padding-left: 0.375rem;
-}
-
-.btn-lg + .dropdown-toggle-split,
-.btn-group-lg > .btn + .dropdown-toggle-split {
-  padding-right: 0.75rem;
-  padding-left: 0.75rem;
-}
-
-.btn-group-vertical {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: flex-start;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.btn-group-vertical .btn,
-.btn-group-vertical .btn-group {
   width: 100%;
+  height: 30px;
+  padding: 0.5rem 0.5rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #495057;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
-.btn-group-vertical > .btn + .btn,
+.debugger-container .col-md-12 {
-.btn-group-vertical > .btn + .btn-group,
+  position: relative;
-.btn-group-vertical > .btn-group + .btn,
+  width: 100%;
-.btn-group-vertical > .btn-group + .btn-group {
+  padding-right: 0;
-  margin-top: -1px;
+  padding-left: 0;
-  margin-left: 0;
-}
-
-.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
-.btn-group-vertical > .btn-group:not(:last-child) > .btn {
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.btn-group-vertical > .btn:not(:first-child),
-.btn-group-vertical > .btn-group:not(:first-child) > .btn {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.btn-group-toggle > .btn,
-.btn-group-toggle > .btn-group > .btn {
-  margin-bottom: 0;
-}
-
-.btn-group-toggle > .btn input[type="radio"],
-.btn-group-toggle > .btn input[type="checkbox"],
-.btn-group-toggle > .btn-group > .btn input[type="radio"],
-.btn-group-toggle > .btn-group > .btn input[type="checkbox"] {
-  position: absolute;
-  clip: rect(0, 0, 0, 0);
-  pointer-events: none;
-}
-
-.hiddencon {
-  margin: 0;
-  padding: 0;
-  position: fixed;
-  right: -37px;
-  top: 0px;
-  opacity: 0.9;
-}
-
-.hiddencon-rtl {
-  margin: 0;
-  padding: 0;
-  position: fixed;
-  left: -37px;
-  top: 10px;
-  opacity: 0.9;
-}
-
-.hiddencon2 {
-  top: auto;
-  bottom: 10px;
-}
-
-.hiddencon:hover {
-  cursor: pointer;
-  opacity: 0.6;
-}
-
-.hiddencon-rtl:hover {
-  left: 0;
-}
-
-.hiddencon-label {
-  margin-top: 0px;
-  margin-left: -23px;
-  padding: 7px;
-  position: absolute;
-  top: 50%;
-  display: inline-block;
-  color: white;
-  background: #0099dd;
-  font-size: 14px;
-  border-radius: 5px 0 0 5px;
-}
-
-.hiddencon-label-rtl {
-  margin-top: -40px;
-  margin-right: -23px;
-  padding: 4px;
-  position: absolute;
-  top: 50%;
-  display: inline-block;
-  color: white;
-  background: #0099dd;
-  font-size: 14px;
-  border-radius: 0 20px 20px 0;
-}
-
-.hiddencon,
-.hiddencon-label {
-  -webkit-transition: all 0.4s ease-in-out;
-  transition: all 0.4s ease-in-out;
-}
-
-.hiddencon p,
-.hiddencon ul {
-  margin: 0;
-  padding: 0;
-  border: 8px solid #0099dd;
-  border-right: 0;
-  color: #fff;
-  background-color: #000;
-  text-align: center;
-  vertical-align: center;
-  border-radius: 10px 0 0 10px;
-}
-
-.hiddencon ul {
-  margin: 0;
-  overflow: auto;
-}
-
-.hiddencon li {
-  display: block;
-}
-
-.hiddencon li a {
-  display: block;
-  padding: 10px;
-  border-bottom: 1px solid #333;
-  color: #ddd;
-  -webkit-transition: all 0.4s linear;
-  transition: all 0.4s linear;
-}
-
-.hiddencon li:last-child a {
-  border-bottom: 0;
-}
-
-.hiddencon li a:hover {
-  background-color: #333;
-  text-decoration: none;
-}
-
-.btn-container {
-  top: 17px;
-}
-
-.btn-pm-primary {
-  color: #fff;
-  background-color: #0099dd;
-  border-color: #0099dd;
 }
 </style>

resources/assets/js/components/home/debugger/ModalDebugger.vue

@@ -1,261 +0,0 @@
-<template>
-  <b-modal ref="modal-debugger" hide-footer size="xl" class="modal-debugger">
-    <tabs>
-      <tab name="Variables">
-        <div
-          class="btn-toolbar justify-content-between float-right"
-          role="toolbar"
-          aria-label="Toolbar with button groups"
-        >
-          <b-form-radio-group
-            @change="changeOption"
-            v-model="optionsDebugVars.selected"
-            :options="optionsDebugVars.options"
-            button-variant="outline-secondary"
-            name="radio-btn-outline"
-            size="sm"
-            buttons
-          ></b-form-radio-group>
-        </div>
-        <br />
-        <div>
-          <v-client-table
-            @row-click="onRowClicked"
-            :data="dataTable"
-            :columns="columns"
-            :options="options"
-            ref="vueTable"
-          />
-        </div>
-      </tab>
-      <tab name="Triggers">
-        <div>
-          <v-client-table
-            :data="dataTableTriggers"
-            :columns="columns"
-            :options="options"
-            ref="vueTableTriggers"
-          />
-        </div>
-      </tab>
-    </tabs>
-  </b-modal>
-</template>
-
-<script>
-import Tabs from "../../../components/tabs/Tabs.vue";
-import Tab from "../../../components/tabs/Tab.vue";
-import api from "../../../api/index";
-export default {
-  name: "ModalDebugger",
-  components: {
-    Tabs,
-    Tab,
-  },
-  props: {},
-  mounted() {},
-  data() {
-    return {
-      data: null,
-      debugFullPage: false,
-      debugTabs: [],
-      activetab: 1,
-      variableTabs: [],
-      debugSearch: "",
-      isRTL: false,
-      dataTable: [],
-      dataTableTriggers: [],
-      columns: ["key", "value"],
-      options: {
-        filterable: true,
-        headings: {
-          key: this.$i18n.t("ID_NAME"),
-          value: this.$i18n.t("ID_VALUE"),
-        },
-      },
-      optionsDebugVars: {
-        selected: "all",
-        options: [
-          { text: this.$i18n.t("ID_OPT_ALL"), value: "all" },
-          { text: this.$i18n.t("ID_DYNAFORM"), value: "dyn" },
-          { text: this.$i18n.t("ID_SYSTEM"), value: "sys" },
-        ],
-      },
-    };
-  },
-  methods: {
-    classBtn(cls) {
-      return "btn v-btn-request " + cls;
-    },
-    /**
-     * Show action in modal
-     */
-    show() {
-      this.getDebugVars({ filter: "all" });
-      this.getDebugVarsTriggers();
-      this.$refs["modal-debugger"].show();
-    },
-    /**
-     * Cancel button action
-     */
-    cancel() {
-      this.$refs["modal-debugger"].hide();
-    },
-    /**
-     * Get debug variables
-     */
-    getDebugVars(data) {
-      let that = this,
-        dt = [];
-      api.cases.debugVars(data).then((response) => {
-        _.forIn(response.data.data[0], function (value, key) {
-          dt.push({
-            key,
-            value,
-          });
-        });
-        this.dataTable = dt;
-      });
-    },
-    /**
-     * Get trigger variables
-     */
-    getDebugVarsTriggers(data) {
-      let that = this,
-        dt = [];
-      api.cases.debugVarsTriggers(data).then((response) => {
-        if (response.data.length > 0) {
-          _.forIn(response.data.data[0], function (value, key) {
-            dt.push({
-              key,
-              value,
-            });
-          });
-          this.dataTableTriggers = dt;
-        }
-      });
-    },
-    /**
-     * Change Radio option [All, Dynaform, System]
-     */
-    changeOption(opt) {
-      this.getDebugVars({ filter: opt });
-    },
-  },
-};
-</script>
-
-<style>
-.tabs-component {
-  margin: 0 0;
-}
-
-.tabs-component-tabs {
-  border: solid 1px #ddd;
-  border-radius: 6px;
-  margin-bottom: 5px;
-}
-
-@media (min-width: 700px) {
-  .tabs-component-tabs {
-    border: 0;
-    align-items: stretch;
-    display: flex;
-    justify-content: flex-start;
-    margin-bottom: -1px;
-  }
-}
-
-.tabs-component-tab {
-  color: #999;
-  font-size: 14px;
-  font-weight: 600;
-  margin-right: 0;
-  list-style: none;
-}
-
-.tabs-component-tab:not(:last-child) {
-  border-bottom: dotted 1px #ddd;
-}
-
-.tabs-component-tab:hover {
-  color: #666;
-}
-
-.tabs-component-tab.is-active {
-  color: #000;
-}
-
-.tabs-component-tab.is-disabled * {
-  color: #cdcdcd;
-  cursor: not-allowed !important;
-}
-
-@media (min-width: 700px) {
-  .tabs-component-tab {
-    background-color: #fff;
-    border: solid 1px #ddd;
-    border-radius: 3px 3px 0 0;
-    margin-right: 0.5em;
-    transform: translateY(2px);
-    transition: transform 0.3s ease;
-  }
-
-  .tabs-component-tab.is-active {
-    border-bottom: solid 1px #fff;
-    z-index: 2;
-    transform: translateY(0);
-  }
-}
-
-.tabs-component-tab-a {
-  align-items: center;
-  color: inherit;
-  display: flex;
-  padding: 0.75em 1em;
-  text-decoration: none;
-}
-
-.tabs-component-panels {
-  padding: 4em 0;
-}
-
-@media (min-width: 700px) {
-  .tabs-component-panels {
-    border-top-left-radius: 0;
-    background-color: #fff;
-    border: solid 1px #ddd;
-    border-radius: 0 6px 6px 6px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
-    padding: 0.5em 0.5em;
-  }
-}
-
-.btn-group > input[type="checkbox"],
-input[type="radio"] {
-  box-sizing: border-box;
-  padding: 0;
-  display: none;
-}
-
-.btn-outline-secondary-active {
-  color: #fff;
-  background-color: #6c757d;
-  border-color: #6c757d;
-}
-
-.VueTables__search-field > label {
-  display: none;
-}
-
-.VueTables.VueTables--client .row {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: 0px;
-  margin-left: 0px;
-}
-</style>
-
-

resources/assets/js/home/XCase.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="d-flex">
     <iframe
       :width="width"
       ref="xIFrame"
@@ -7,13 +7,15 @@
       :src="path"
       :height="height"
       allowfullscreen
+      @load="onLoadIframe"
     ></iframe>
-    <Debugger />
+    <Debugger v-if="openDebug === true" :style="'height:' + height + 'px'" />
   </div>
 </template>
 
 <script>
-import Debugger from '../components/home/debugger/Debugger.vue';
+import Debugger from "../components/home/debugger/Debugger.vue";
+import api from "../api/index";
 export default {
   name: "XCase",
   components: {
@@ -22,12 +24,8 @@ export default {
   props: {
     data: Object,
   },
-  data() {
-    return {
-      openCaseState:true
-    };
-  },
   mounted() {
+    let that = this;
     this.height = window.innerHeight - this.diffHeight;
     this.dataCase = this.$parent.dataCase;
     if (this.dataCase.ACTION == "jump") {
@@ -41,13 +39,22 @@ export default {
         window.config.SYS_URI +
         `cases/open?APP_UID=${this.dataCase.APP_UID}&DEL_INDEX=${this.dataCase.DEL_INDEX}&action=${this.dataCase.ACTION}`;
     }
+
+    setTimeout(() => {
+      api.cases.debugStatus(this.dataCase).then((response) => {
+        if (response.data) {
+          that.openDebug = true;
+        }
+      });
+    }, 2000);
   },
   data() {
     return {
+      openDebug: false,
+      dataCase: null,
       height: "100%",
       width: "100%",
       diffHeight: 10,
-      dataCase: null,
       path: "",
     };
   },
@@ -55,9 +62,13 @@ export default {
     classBtn(cls) {
       return "btn v-btn-request " + cls;
     },
+    onLoadIframe() {},
   },
 };
 </script>
 
 <style>
+.debugger-inline-cont {
+  overflow: hidden;
+}
 </style>

resources/assets/js/home/main.js

@@ -12,6 +12,9 @@ import 'bootstrap-vue/dist/bootstrap-vue.css'
 
 import Home from "./Home";
 
+import VueSplit from 'vue-split-panel'
+Vue.use(VueSplit);
+
 Vue.use(VueRouter);
 Vue.use(VueSidebarMenu);
 Vue.use(BootstrapVue);