update debugger

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

@@ -4,50 +4,16 @@
     v-if="openCaseState"
   >
     <div
+      data-target="#debugModal"
+      @click="showDebugger"
       v-bind:class="{ 'hiddencon-label': !isRtl, 'hiddencon-label-rtl': isRtl }"
     >
-      <i class="fa fa-th"></i>
+      <i class="fa fa-bug"></i>
     </div>
-    <div class="btn-group-vertical">
+    <div class="btn-group-vertical btn-container">
       <button
         type="button"
-        class="btn btn-secondary"
-        data-toggle="tooltip"
-        data-placement="bottom"
-        title="CLOSE"
-      >
-        <i class="fa fa-x2 fa-times"></i>
-      </button>
-      <button
-        type="button"
-        class="btn btn-secondary"
-        data-toggle="tooltip"
-        data-placement="bottom"
-        title="HIDE_INBOX"
-      >
-        <i class="fa fa-outdent"></i>
-      </button>
-      <button
-        type="button"
-        class="btn btn-secondary"
-        data-toggle="tooltip"
-        data-placement="bottom"
-        title="language.ID_INBOX_SHOW_INBOX"
-      >
-        <i class="fa fa-columns"></i>
-      </button>
-      <button
-        type="button"
-        class="btn btn-secondary"
-        data-toggle="tooltip"
-        data-placement="bottom"
-        title="language.ID_INBOX_FULL_SCREEN"
-      >
-        <i class="fa fa-window-maximize"></i>
-      </button>
-      <button
-        type="button"
-        class="btn btn-secondary"
+        class="btn btn-pm-primary"
         data-toggle="modal"
         data-placement="bottom"
         data-target="#debugModal"
@@ -245,7 +211,7 @@ export default {
   padding: 0;
   position: fixed;
   right: -37px;
-  top: 10px;
+  top: 0px;
   opacity: 0.9;
 }
 
@@ -264,7 +230,8 @@ export default {
 }
 
 .hiddencon:hover {
-  right: 0;
+  cursor: pointer;
+  opacity: 0.6;
 }
 
 .hiddencon-rtl:hover {
@@ -272,16 +239,16 @@ export default {
 }
 
 .hiddencon-label {
-  margin-top: -40px;
+  margin-top: 0px;
   margin-left: -23px;
-  padding: 4px;
+  padding: 7px;
   position: absolute;
   top: 50%;
   display: inline-block;
   color: white;
-  background: #626262;
+  background: #0099dd;
   font-size: 14px;
-  border-radius: 20px 0 0 20px;
+  border-radius: 5px 0 0 5px;
 }
 
 .hiddencon-label-rtl {
@@ -292,7 +259,7 @@ export default {
   top: 50%;
   display: inline-block;
   color: white;
-  background: #626262;
+  background: #0099dd;
   font-size: 14px;
   border-radius: 0 20px 20px 0;
 }
@@ -307,7 +274,7 @@ export default {
 .hiddencon ul {
   margin: 0;
   padding: 0;
-  border: 8px solid #798189;
+  border: 8px solid #0099dd;
   border-right: 0;
   color: #fff;
   background-color: #000;
@@ -342,4 +309,14 @@ export default {
   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,9 +1,9 @@
 <template>
-  <b-modal ref="modal-debugger" hide-footer size="xl">
+  <b-modal ref="modal-debugger" hide-footer size="xl" class="modal-debugger">
     <tabs>
       <tab name="Variables">
         <div
-          class="btn-toolbar justify-content-between"
+          class="btn-toolbar justify-content-between float-right"
           role="toolbar"
           aria-label="Toolbar with button groups"
         >
@@ -17,7 +17,7 @@
             buttons
           ></b-form-radio-group>
         </div>
-
+        <br />
         <div>
           <v-client-table
             @row-click="onRowClicked"
@@ -39,21 +39,6 @@
         </div>
       </tab>
     </tabs>
-    <br />
-    <div class="card">
-      <div class="container">
-        <div class="mb-3">
-          <label for="exampleFormControlTextarea1" class="form-label"
-            >Example textarea</label
-          >
-          <textarea
-            class="form-control"
-            id="exampleFormControlTextarea1"
-            rows="3"
-          ></textarea>
-        </div>
-      </div>
-    </div>
   </b-modal>
 </template>
 
@@ -68,9 +53,7 @@ export default {
     Tab,
   },
   props: {},
-  mounted() {
-    this.initializeDebugTab();
-  },
+  mounted() {},
   data() {
     return {
       data: null,
@@ -84,16 +67,7 @@ export default {
       dataTableTriggers: [],
       columns: ["key", "value"],
       options: {
-        selectable: {
-          mode: "single", // or 'multiple'
-          only: function (row) {
-            console.log("asd jonas");
-            return true; // any condition
-          },
-          selectAllMode: "all", // or 'page'
-          programmatic: false,
-        },
-        filterable: false,
+        filterable: true,
         headings: {
           key: this.$i18n.t("ID_NAME"),
           value: this.$i18n.t("ID_VALUE"),
@@ -113,14 +87,23 @@ export default {
     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 = [];
@@ -134,11 +117,13 @@ export default {
         this.dataTable = dt;
       });
     },
+    /**
+     * Get trigger variables
+     */
     getDebugVarsTriggers(data) {
       let that = this,
         dt = [];
       api.cases.debugVarsTriggers(data).then((response) => {
-        console.log("asdasd");
         if (response.data.length > 0) {
           _.forIn(response.data.data[0], function (value, key) {
             dt.push({
@@ -150,16 +135,12 @@ export default {
         }
       });
     },
-
     /**
      * Change Radio option [All, Dynaform, System]
      */
     changeOption(opt) {
       this.getDebugVars({ filter: opt });
     },
-    onRowClicked() {
-      console.log("asdsa sad aslllllllll");
-    },
   },
 };
 </script>
@@ -262,6 +243,19 @@ input[type="radio"] {
   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>