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

<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>