ayanova/devdocs/todo.txt

@@ -4,17 +4,12 @@
 
 TODO:  Report
 
-- Server Render Timeout
-		handle timeout waiting for report (infinite loop scenario?)
-		make report that has an infinite loop then have it timeout at the server properly and return clean error timeout
-		Possibly add a property to the report to force a longer than default timeout?
-			useful for edge cases in the wild to have at hand
-		maybe this:
-			https://jeremylindsayni.wordpress.com/2016/05/28/how-to-set-a-maximum-time-to-allow-a-c-function-to-run-for/
 
-		Have asked on stackoverflow
+
-		 hardkoded replied himself and said use waitforexpression https://stackoverflow.com/questions/63929479/timeout-with-evaluateexpressionasync/63937743#63937743
+- Show an active icon while report is rendering from report chooser form like when generating sample data etc
-		https://pptr.dev/
+	in addition to active icon, make sure options besides cancel are all unavailable during render process
+
+- report editor form needs redering progress widget as well
 
 	- page breaks properly EXAMPLE NEEDED
 		this is the current CSS property, not the one jsreport was using: https://developer.mozilla.org/en-US/docs/Web/CSS/break-before		

ayanova/src/api/errorhandler.js

@@ -29,12 +29,11 @@ function dealWithError(msg, vm) {
   }
   window.$gz.store.commit("logItem", msg);
   if (window.$gz.dev) {
-    let errMsg = "Unexpected error: \r\n" + msg;
+    let errMsg = "DEV MODE errorHandler.js:: Unexpected error: \r\n" + msg;
     // eslint-disable-next-line no-console
     console.error(errMsg);
-    console.trace();
+    //console.trace();
-    debugger;
+    //debugger;
-    return;
   }
 
   //If a form instance was provided (vue instance)
@@ -42,6 +41,7 @@ function dealWithError(msg, vm) {
   if (!vm || vm.formState == undefined) {
     //popup if no place to display it elsewise
     window.$gz.eventBus.$emit("notify-error", msg);
+    //debugger;
     return;
   }
 

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

@@ -1,58 +1,73 @@
 <template>
-  <v-row justify="center">
+  <div>
-    <!-- :max-width="options.width" -->
+    <v-overlay :value="rendering" z-index="999">
-    <v-dialog
+      <v-progress-circular indeterminate size="64"></v-progress-circular>
-      scrollable
+    </v-overlay>
-      max-width="600px"
+    <v-row justify="center">
-      v-model="isVisible"
+      <!-- :max-width="options.width" -->
-      @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-dialog
-          <v-list>
+        scrollable
-            <v-list-item
+        max-width="600px"
-              v-for="item in reportList"
+        v-model="isVisible"
-              :key="item.id"
+        @keydown.esc="cancel"
-              @click="renderReport(item.id)"
+        :data-cy="!!$ay.dev ? 'reportselector' : false"
+      >
+        <v-card elevation="24">
+          <v-card-title class="headline lighten-2" primary-title>
+            <span> {{ $ay.t("Report") }} </span>
+            <!-- <template>
+            <v-progress-linear
+              indeterminate
+              color="primary"
+              rounded
+              height="6"
+              :active="rendering"
+            ></v-progress-linear>
+          </template> -->
+          </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-list-item-title>{{ item.name }}</v-list-item-title>
+            <v-spacer></v-spacer>
-              <v-list-item-action>
+            <v-btn
-                <v-btn icon @click.stop="editReport(item.id)">
+              color="primary"
-                  <v-icon color="primary">fa-edit</v-icon>
+              text
-                </v-btn>
+              @click.native="cancel"
-              </v-list-item-action>
+              :data-cy="!!$ay.dev ? 'reportselector:cancel' : false"
-            </v-list-item>
+              >{{ $ay.t("Cancel") }}</v-btn
-          </v-list>
+            >
-        </v-card-text>
+          </v-card-actions>
-
+        </v-card>
-        <v-divider></v-divider>
+      </v-dialog>
-
+    </v-row>
-        <v-card-actions>
+  </div>
-          <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 {
@@ -67,7 +82,8 @@ export default {
       zIndex: 200
     },
     reportList: [],
-    selectedReport: null
+    selectedReport: null,
+    rendering: false
   }),
   methods: {
     editReport(reportid) {
@@ -94,9 +110,11 @@ export default {
       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);
 
+      let res = await window.$gz.api.upsert(url, reportDataOptions);
+      vm.rendering = false;
       if (res.error) {
         this.reject(res);
       } else {

ayanova/src/views/ay-report-edit.vue

@@ -1,5 +1,8 @@
 <template>
   <div v-resize="onResize">
+    <v-overlay :value="rendering" z-index="999">
+      <v-progress-circular indeterminate size="64"></v-progress-circular>
+    </v-overlay>
     <!-- {{ formState }} -->
     <v-row v-show="formState.ready">
       <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
@@ -330,7 +333,8 @@ Handlebars.registerHelper('loud', function (aString) {
         serverError: {}
       },
       rights: window.$gz.role.defaultRightsObject(),
-      ayaType: window.$gz.type.Report
+      ayaType: window.$gz.type.Report,
+      rendering: false
     };
   },
   //WATCHERS
@@ -727,7 +731,9 @@ Handlebars.registerHelper('loud', function (aString) {
 
       try {
         window.$gz.form.deleteAllErrorBoxErrors(vm);
+        vm.rendering = true;
         let res = await window.$gz.api.upsert(url, reportDataOptions);
+        vm.rendering = false;
         if (res.error) {
           vm.formState.serverError = res.error;
           window.$gz.form.setErrorBoxErrors(vm);
@@ -741,8 +747,10 @@ Handlebars.registerHelper('loud', function (aString) {
           }
         }
       } catch (ex) {
+        vm.rendering = false;
         window.$gz.errorHandler.handleFormError(ex, vm);
       } finally {
+        vm.rendering = false;
         window.$gz.form.setFormState({
           vm: vm,
           loading: false