Designer Component - Loading Reports

<template>
  <div>
    <div id="designer-toolbar" class="container-fluid">
      <div class="row mt-3 mb-3">
        <button
          type="button"
          class="btn btn-outline-primary btn-sm col-sm-2 ml-1"
          @click="onLoadBlank(false)"
        >
          Load Blank Report
        </button>
      </div>
    </div>
    <div id="designer-host">
      <arjs-designer
        ref="designer"
        :report="{ id: 'reports/company-template.rdlx-json' }"
        :onCreate="onCreateReport"
        :onOpen="onOpenReport"
      >
      </arjs-designer>
    </div>
  </div>
  <div
    v-if="showModal"
    class="modal"
    id="dlgOpen"
    tabindex="-1"
    aria-hidden="true"
  >
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Open Report</h5>
        <button
          type="button"
          class="close"
          aria-label="Close"
          @click="hideModal"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <strong>Select Report:</strong>
        <div class="list-group">
          <button
            type="button"
            class="list-group-item list-group-item-action"
            @click="onSelectReport('reports/CustomersTable.rdlx-json')"
          >
            Customers Report
          </button>
          <button
            type="button"
            class="list-group-item list-group-item-action"
            @click="onSelectReport('reports/TaxiDrives.rdlx-json')"
          >
            Taxi Drives Report
          </button>
        </div>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-outline-secondary"
          @click="hideModal"
        >
          Close
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { CPLReport, FPLReport } from "./reportTemplates.js";
import { Designer } from "@mescius/activereportsjs-vue";
import Core from "@mescius/activereportsjs/core";

let resolveFunc = null;

export default {
  components: {
    "arjs-designer": Designer,
  },
  data: function () {
    return {
      showModal: false,
    };
  },
  methods: {
    onSelectReport(report) {
      if (resolveFunc) {
        resolveFunc({ id: report });
        this.showModal = false;
      }
    },
    onLoadBlank(fpl) {
      this.$refs.designer.setReport({
        definition: fpl ? FPLReport : CPLReport,
      });
    },
    onCreateReport() {
      return Promise.resolve({ id: "reports/company-template.rdlx-json" });
    },
    onOpenReport() {
      return new Promise((resolve) => {
        resolveFunc = resolve;
        this.showModal = true;
      });
    },
    hideModal() {
      this.showModal = false;
      if (resolveFunc) {
        resolveFunc(null);
        resolveFunc = null;
      }
    },
  },
};
Core.FontStore.registerFonts("/activereportsjs/demos/resource/fontsConfig.json");
</script>

<style>
@import url("/activereportsjs/demos/arjs/styles/ar-js-ui.css");
@import url("/activereportsjs/demos/arjs/styles/ar-js-designer.css");
#designer-host {
  width: 100%;
  height: 500px;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 4px;
  width: 50%;
  max-width: 500px;
  max-height: 80%;
  overflow-y: auto;
}
</style>