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

<template>
  <v-row justify="center">
    <!-- :max-width="options.width" -->
    <v-dialog
      scrollable
      max-width="600px"
      v-model="isVisible"
      @keydown.esc="cancel"
      :data-cy="!!$ay.dev ? 'reportselector' : false"
    >
      <v-card elevation="24">
        <v-card-title class="headline 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">fa-edit</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="!!$ay.dev ? 'reportselector:ok' : false"
            >{{ $ay.t("New") }}</v-btn
          >
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            text
            @click.native="cancel"
            :data-cy="!!$ay.dev ? 'reportselector:cancel' : false"
            >{{ $ay.t("Cancel") }}</v-btn
          >
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</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
  }),
  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;
      }

      /*
  public class RenderReportParameter
    {
        public long ReportId { get; set; }
        public long[] SelectedRowIds { get; set; }
        public string DataListKey { get; set; }
        public string ListView { get; set; }//optional, if null or empty will use default list view built into DataList
    }
*/
      let reportDataOptions = vm.reportDataOptions;
      if (!reportDataOptions) {
        throw "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();

      let url = "report/render";

      let res = await window.$gz.api.upsert(url, reportDataOptions);
      if (res.error) {
        throw res.error;
      } else {
        let reportUrl = window.$gz.api.reportDownloadUrl(res.data);
        //console.log("Report url:", reportUrl);
        if (window.open(reportUrl, "Report") == null) {
          throw "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 "report-selector:Open missing reportDataOptions";
      }
      if (reportDataOptions.ObjectType == null) {
        throw "report-selector:Open - ObjectType is missing or empty";
      }

      //source data object
      //either need to rehydrate or send as is if not selectedRowIds
      // {
      //   ObjectType: ayaType,
      //   selectedRowIds: selectedRowIds,
      //   dataListKey: vm.dataListKey,
      //   listView: untokenizeListView(vm.listView)
      // }

      this.reportDataOptions = reportDataOptions;

      //rights

      //get report list from server

      let res = await window.$gz.api.get(
        `report/list/${reportDataOptions.ObjectType}`
      );
      //console.log("report-selectr report list from server is: ", res);
      if (res.error) {
        throw res.error;
      } else {
        this.reportList = res.data;
      }

      //TESTING generate extra items
      // for (let x = 20; x < 60; x++) {
      //   this.reportList.push({ name: "REPORT NAME HERE", id: x });
      // }

      this.isVisible = true;
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
    },
    // ok() {
    //   this.isVisible = false;
    //   this.resolve(this.selectedReport);
    // },
    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>