@byu-oit/vue-decision-processing-components 8.29.6 → 8.30.0

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [8.30.0](https://github.com/byu-oit/vue-decision-processing-components/compare/v8.29.6...v8.30.0) (2022-11-09)
+
+
+### Features
+
+* paginate reports ([d047f2f](https://github.com/byu-oit/vue-decision-processing-components/commit/d047f2fd314b19ed72a2ec0d2e20e628dd22dd23))
+* paginate reports ([851f9b5](https://github.com/byu-oit/vue-decision-processing-components/commit/851f9b503e094fa16368e3a624b8cd19bd69e582))
+* paginate reports ([2b15c5c](https://github.com/byu-oit/vue-decision-processing-components/commit/2b15c5c875f74024ee3d206eef81d746b6fdd656))
+
 ### [8.29.6](https://github.com/byu-oit/vue-decision-processing-components/compare/v8.29.5...v8.29.6) (2022-11-02)
 
 

package/Report.vue

@@ -14,67 +14,67 @@
    limitations under the License.
 -->
 <template>
-    <div class="report" v-if="metadata">
-        <ReportSvg
-                v-if="chart"
-                v-bind="$attrs"
-                v-on="$listeners"
-                :svgContent="svgContent"
-                :loaded="loaded"
-                :error="error"/>
-        <template v-if="!hideDescription">
-          <h1 v-if="metadata.description">{{metadata.description}}</h1>
-          <h4 v-if="metadata.long_description" class="no-uppercase">{{metadata.long_description}}</h4>
-          <byu-control-date-selector
-                  v-if="metadata.parameters.includes('admitPeriod')"
-                  :value="selectedAdmitPeriod"
-                  @change="selectedAdmitPeriod = $event.target.value"
-                  date-type="CURRENT_YYT"
-                  prior-terms="3"
-                  subsequent-terms="4"
-          ></byu-control-date-selector>
-          <date-picker
-            v-if="metadata.parameters.includes('date_start') && metadata.parameters.includes('date_end')"
-            v-model="dateRange"
-            range
-            :not-after="new Date()"
-            lang="en"
-          />
-        </template>
-        <template v-if="detail && photoLink">
-          <div>
-            <input type="checkbox" v-model="showPhotos" id="components-Report-showPhotos">
-            <label for="components-Report-showPhotos">Show Photos</label>
-          </div>
-          <ReportPhotos
-                  v-if="showPhotos"
-                  :rows="rows"
-                  :column-metadata="metadata.columns"
-                  :loading="loading"
-                  :error="error"/>
-          <ReportDetail
-                  v-else
-                  :csv="csvContent"
-                  :column-metadata="metadata.columns"
-                  :rows="rows"
-                  :loading="loading"
-                  :error="error"
-                  :detailPath="detailPath"
-                  :newTab="newTab"/>
-        </template>
-        <template v-else>
-          <ReportDetail
-                  v-if="detail"
-                  :csv="csvContent"
-                  :column-metadata="metadata.columns"
-                  :rows="rows"
-                  :loading="loading"
-                  :error="error"
-                  :detailPath="detailPath"
-                  :newTab="newTab" />
-        </template>
-        <router-link v-else-if="to" :to="to">View Details</router-link>
-    </div>
+  <div class="report" v-if="metadata">
+    <ReportSvg
+        v-if="chart"
+        v-bind="$attrs"
+        v-on="$listeners"
+        :svgContent="svgContent"
+        :loaded="loaded"
+        :error="error"/>
+    <template v-if="!hideDescription">
+      <h1 v-if="metadata.description">{{metadata.description}}</h1>
+      <h4 v-if="metadata.long_description" class="no-uppercase">{{metadata.long_description}}</h4>
+      <byu-control-date-selector
+          v-if="metadata.parameters.includes('admitPeriod')"
+          :value="selectedAdmitPeriod"
+          @change="selectedAdmitPeriod = $event.target.value"
+          date-type="CURRENT_YYT"
+          prior-terms="3"
+          subsequent-terms="4"
+      ></byu-control-date-selector>
+      <date-picker
+          v-if="metadata.parameters.includes('date_start') && metadata.parameters.includes('date_end')"
+          v-model="dateRange"
+          range
+          :not-after="new Date()"
+          lang="en"
+      />
+    </template>
+    <template v-if="detail && photoLink">
+      <div>
+        <input type="checkbox" v-model="showPhotos" id="components-Report-showPhotos">
+        <label for="components-Report-showPhotos">Show Photos</label>
+      </div>
+      <ReportPhotos
+          v-if="showPhotos"
+          :rows="rows"
+          :column-metadata="metadata.columns"
+          :loading="loading"
+          :error="error"/>
+      <ReportDetail
+          v-else
+          :csv="csvContent"
+          :column-metadata="metadata.columns"
+          :rows="rows"
+          :loading="loading"
+          :error="error"
+          :detailPath="detailPath"
+          :newTab="newTab"/>
+    </template>
+    <template v-else>
+      <ReportDetail
+          v-if="detail"
+          :csv="csvContent"
+          :column-metadata="metadata.columns"
+          :rows="rows"
+          :loading="loading"
+          :error="error"
+          :detailPath="detailPath"
+          :newTab="newTab" />
+    </template>
+    <router-link v-else-if="to" :to="to">View Details</router-link>
+  </div>
 </template>
 
 <script>
@@ -110,6 +110,12 @@ export default {
     admitPeriod: {
       type: String
     },
+    paginationParameter: {
+      type: String
+    },
+    limit: {
+      type: String
+    },
     hideDescription: Boolean,
     newTab: Boolean,
     autoRefresh: Boolean,
@@ -128,7 +134,9 @@ export default {
       rows: null,
       selectedAdmitPeriod: this.admitPeriod,
       dateRange: null,
-      showPhotos: false
+      showPhotos: false,
+      paginateReport: this.paginationParameter,
+      newCursor: 'null'
     }
   },
   computed: {
@@ -151,30 +159,7 @@ export default {
       this.loading = true
       this.$emit('loading')
       window.scrollTo(0, 0)
-      const q = new URLSearchParams()
-      q.append('name', this.reportName)
-      if (this.selectedAdmitPeriod) {
-        q.append('admit_period', this.selectedAdmitPeriod)
-      } else if(this.metadata.parameters.includes('admitPeriod')) {
-        // Don't attempt to load report if we're missing the admit period
-        return
-      }
-      if (this.dateRange) {
-        const toYYYYMMDD = dt => dt.toISOString().substr(0, 10)
-        const startDate = toYYYYMMDD(this.dateRange[0])
-        const endDate = toYYYYMMDD(this.dateRange[1])
-        q.append('date_start', startDate)
-        q.append('date_end', endDate)
-      }
-      if (this.metadata.parameters.includes('setById')) {
-        q.append('set_by_id', this.setById)
-      }
-      // appends institution if available to url search params
-      if(this.metadata.parameters.includes('institutions')) {
-        if(this.metadata.parameters.institutions.includes(state.institution))
-          q.append('institution', state.institution)
-      }
-
+      const q = this.getQuery()
       const url = this.baseUrl + '?' + q.toString()
       const loadRequested = () => {
         let promises = []
@@ -202,7 +187,15 @@ export default {
       this.svgContent = svg
     },
     async loadCsv (url) {
-      const csv = await this.loadReport(url, 'text/csv')
+      let csv = ''
+      do {
+        const reportResponse = await this.loadReport(url, 'text/csv')
+        csv = csv + reportResponse.body
+        this.newCursor = reportResponse.cursor
+        const q = this.getQuery()
+        url = this.baseUrl + '?' + q.toString()
+      } while (this.newCursor !== 'null')
+
       if (csv && csv.length > 0 && /\n/.test(csv)) {
         this.csvContent = csv
         const [headData, ...data] = parse(csv)
@@ -233,7 +226,7 @@ export default {
           console.error(err.stack)
           return null
         }
-        return await response.text()
+        return JSON.parse(await response.text())
       } catch (err) {
         this.error = true
         console.error(err)
@@ -247,6 +240,37 @@ export default {
         }
       }
       tabHiddenState = document.hidden
+    },
+    getQuery() {
+      const q = new URLSearchParams()
+      q.append('name', this.reportName)
+      if (this.selectedAdmitPeriod) {
+        q.append('admit_period', this.selectedAdmitPeriod)
+      } else if(this.metadata.parameters.includes('admitPeriod')) {
+        // Don't attempt to load report if we're missing the admit period
+        return
+      }
+      if (this.paginateReport !== 'null') {
+        q.append('pagination_parameter', this.paginateReport)
+        q.append('limit', this.limit)
+        q.append('cursor', this.newCursor)
+      }
+      if (this.dateRange) {
+        const toYYYYMMDD = dt => dt.toISOString().substr(0, 10)
+        const startDate = toYYYYMMDD(this.dateRange[0])
+        const endDate = toYYYYMMDD(this.dateRange[1])
+        q.append('date_start', startDate)
+        q.append('date_end', endDate)
+      }
+      if (this.metadata.parameters.includes('setById') && this.setById) {
+        q.append('set_by_id', this.setById)
+      }
+      // appends institution if available to url search params
+      if(this.metadata.parameters.includes('institutions')) {
+        if(this.metadata.parameters.institutions.includes(state.institution))
+          q.append('institution', state.institution)
+      }
+      return q
     }
   },
   watch: {
@@ -280,7 +304,7 @@ export default {
 </script>
 <style scoped>
 .no-uppercase {
-text-transform: none;
+  text-transform: none;
   color: var(--gray, gray);
   font-size: 1rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@byu-oit/vue-decision-processing-components",
-  "version": "8.29.6",
+  "version": "8.30.0",
   "description": "Vue components shared between decision processing systems for the CES schools.",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",