raven-client/ayanova/src/components/report-selector-control.vue

<template>
  <div>
    <v-overlay :value="rendering" z-index="999">
      <v-progress-circular indeterminate size="64"></v-progress-circular>
    </v-overlay>
    <v-row justify="center">
      <v-dialog
        scrollable
        max-width="600px"
        v-model="isVisible"
        @keydown.esc="cancel"
        data-cy="reportselector"
      >
        <v-card elevation="24">
          <v-card-title class="text-h5 lighten-2" primary-title>
            <span> {{ $ay.t("Report") }} </span>
          </v-card-title>

          <v-card-text style="height: 500px;">
            <v-list>
              <v-list-item
                v-for="item in reportList"
                :key="item.id"
                @click="renderReport(item.id)"
              >
                <v-list-item-title>{{ item.name }}</v-list-item-title>
                <v-list-item-action>
                  <v-btn icon @click.stop="editReport(item.id)">
                    <v-icon color="primary">$ayiEdit</v-icon>
                  </v-btn>
                </v-list-item-action>
              </v-list-item>
            </v-list>
          </v-card-text>

          <v-divider></v-divider>

          <v-card-actions>
            <v-btn
              v-if="rights.change"
              color="primary"
              text
              @click.native="newReport"
              data-cy="reportselector:ok"
              >{{ $ay.t("New") }}</v-btn
            >
            <v-spacer></v-spacer>
            <v-btn
              color="primary"
              text
              @click.native="cancel"
              data-cy="reportselector:cancel"
              >{{ $ay.t("Cancel") }}</v-btn
            >
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>
  </div>
</template>
<script>
export default {
  data: () => ({
    rights: window.$gz.role.getRights(window.$gz.type.Report),
    reportDataOptions: {},
    isVisible: false,
    resolve: null,
    reject: null,
    options: {
      width: 290,
      zIndex: 200
    },
    reportList: [],
    selectedReport: null,
    rendering: false
  }),
  methods: {
    editReport(reportid) {
      this.isVisible = false;
      this.resolve(null);
      this.$router.push({
        name: "ay-report-edit",
        params: {
          recordid: reportid,
          reportDataOptions: this.reportDataOptions
        }
      });
    },
    async renderReport(reportId) {
      let vm = this;
      if (vm.$route.params.recordid == 0) {
        return;
      }

      let reportDataOptions = vm.reportDataOptions;
      if (!reportDataOptions) {
        this.reject("Missing report data unable to render report");
      }
      reportDataOptions.ReportId = reportId;
      //Meta data from client for use by report script
      reportDataOptions.ClientMeta = window.$gz.api.reportClientMetaData();
      vm.rendering = true;
      let url = "report/render";

      let res = await window.$gz.api.upsert(url, reportDataOptions);
      vm.rendering = false;
      if (res.error) {
        this.reject(res);
      } else {
        let reportUrl = window.$gz.api.reportDownloadUrl(res.data);
        if (window.open(reportUrl, "Report") == null) {
          this.reject(
            "Problem displaying report in new window.  Browser must allow pop-ups to view reports; check your browser setting"
          );
        }
      }
      this.isVisible = false;
      this.resolve(null);
    },
    async open(reportDataOptions) {
      let vm = this;
      if (reportDataOptions == null) {
        throw new Error("report-selector:Open missing reportDataOptions");
      }
      if (reportDataOptions.AType == null) {
        throw new Error("report-selector:Open - AType is missing or empty");
      }

      this.reportDataOptions = reportDataOptions;
      //get report list from server
      let res = await window.$gz.api.get(
        `report/list/${reportDataOptions.AType}`
      );
      if (res.error) {
        // throw new Error(res.error);
        throw new Error(window.$gz.errorHandler.errorToString(res, vm));
      } else {
        this.reportList = res.data;
      }

      this.isVisible = true;
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
    },
    cancel() {
      this.isVisible = false;
      this.resolve(null);
    },
    newReport() {
      this.isVisible = false;
      this.resolve(null);
      this.$router.push({
        name: "ay-report-edit",
        params: {
          recordid: 0,
          reportDataOptions: this.reportDataOptions
        }
      });
    }
  }
};
</script>