From 73d3b48048dcbcd1f9da2e5f4f9ab3738c7d6976 Mon Sep 17 00:00:00 2001 From: Matt Blenkinsop Date: Fri, 9 Jun 2023 15:38:44 +0000 Subject: [PATCH] Bug 34587: Refactor reports viewer to use URL params instead of pinia store This patch removes the pinia store and uses URL params to pass data between components. Using the pinia store means that the data is lost on page refresh and the report then throws an error. This patch also merges the first column in the table into one line per object, rather than repeating the same title for each line of data. Signed-off-by: Jessica Zairo Signed-off-by: Michaela Sieber Signed-off-by: Nick Clemens Signed-off-by: Tomas Cohen Arazi --- .../ERM/UsageStatisticsReportBuilder.vue | 47 ++----- .../ERM/UsageStatisticsReportsViewer.vue | 132 ++++++++++++------ .../prog/js/vue/components/KohaTable.vue | 4 + .../prog/js/vue/stores/usage-reports.js | 41 ------ 4 files changed, 104 insertions(+), 120 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsReportBuilder.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsReportBuilder.vue index c3e936dc3b..8c972c8551 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsReportBuilder.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsReportBuilder.vue @@ -299,15 +299,7 @@ export default { const { setConfirmationDialog, setMessage, setError } = inject("mainStore") - const { - setReportURL, - setTimePeriodColumns, - setReportType, - setQuery, - setColumns, - setYearlyFilter, - getMonthsData, - } = inject("reportsStore") + const { getMonthsData } = inject("reportsStore") const months_data = getMonthsData() @@ -320,12 +312,6 @@ export default { setConfirmationDialog, setMessage, setError, - setReportURL, - setTimePeriodColumns, - setReportType, - setColumns, - setYearlyFilter, - setQuery, months_data, } }, @@ -589,20 +575,22 @@ export default { const columns = this.defineColumns( this.title_property_column_options ) - // Set state to be accessed by reports viewer component - this.setReportURL(url) - this.setQuery(queryObject) - this.setTimePeriodColumns(this.time_period_columns_builder) - if (data_display.includes("monthly")) { - this.setYearlyFilter(this.yearly_filter_required) - } else { - this.setYearlyFilter(false) + const yearly_filter = data_display.includes("monthly") + ? this.yearly_filter_required + : false + + const urlParams = { + url, + columns, + queryObject, + yearly_filter, + type, + tp_columns: this.time_period_columns_builder, } - this.setReportType(type) - this.setColumns(columns) this.$router.push({ name: "UsageStatisticsReportsViewer", + query: { data: JSON.stringify(urlParams) }, }) }, monthSelector(e) { @@ -880,14 +868,7 @@ export default { this.titles.length = 0 }, defineColumns(title_props) { - const columns = [ - { - title: __("Title"), - data: "title", - searchable: true, - orderable: true, - }, - ] + const columns = [] // Add user selected columns const title_properties = Object.keys(title_props) title_properties.forEach(prop => { diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsReportsViewer.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsReportsViewer.vue index 2336574a6e..7e9f0ab196 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsReportsViewer.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsReportsViewer.vue @@ -17,7 +17,7 @@ :value="$__('Update table')" /> -
+
@@ -31,66 +31,62 @@ export default { setup() { const table = ref() - const { - getReportURL, - getTimePeriodColumns, - getReportType, - getTableSettings, - getColumns, - getYearlyFilter, - getMonthsData, - getQuery, - setColumns, - } = inject("reportsStore") - - const report_type = getReportType() - const embed = - report_type === "yearly" ? ["erm_usage_yuses"] : ["erm_usage_muses"] - - const years = Object.keys(getTimePeriodColumns()) - const year = ref(years[years.length - 1]) + const { getMonthsData } = inject("reportsStore") return { - getReportURL, - getTimePeriodColumns, - getTableSettings, - getColumns, - getYearlyFilter, getMonthsData, - getQuery, - setColumns, table, - report_type, - embed, - years, - year, } }, + beforeCreate() { + const urlParams = JSON.parse(this.$route.query.data) + this.params = urlParams + + this.report_type = this.params.type + this.embed = + this.report_type === "yearly" + ? ["erm_usage_yuses"] + : ["erm_usage_muses"] + + this.years = Object.keys(this.params.tp_columns) + this.year = this.years[this.years.length - 1] + }, data() { return { building_table: false, initialized: false, tableOptions: { - columns: this.buildColumnArray(this.report_type), + columns: this.buildColumnArray(this.report_type, this.params), options: { embed: this.embed }, - url: () => this.tableURL(this.year), + url: () => this.tableURL(this.year, this.params), table_settings: this.report_type.includes("monthly") ? this.monthly_usage_table_settings : this.yearly_usage_table_settings, add_filters: true, }, yearly_filter: null, + params: this.params, + year: this.year, + years: this.years, } }, methods: { - buildColumnArray(report_type) { - const columns = this.getColumns() - const months_data = this.getMonthsData() - const time_period_columns = this.getTimePeriodColumns() - const yearly_filter = this.getYearlyFilter() - const query = this.getQuery() + buildColumnArray(report_type, params) { + const columns = params.columns + const months_data = this.getMonthsData() // + const time_period_columns = params.tp_columns + const yearly_filter = params.yearly_filter + const query = params.queryObject - const column_set = [...columns] + const column_set = [ + { + title: __("Title"), + data: "title", + searchable: true, + orderable: true, + }, + ...columns, + ] // Add metric type to each row if (report_type !== "metric_type") { column_set.push({ @@ -224,7 +220,7 @@ export default { return column_set }, async update_table() { - this.$refs.table.redraw(this.tableURL(this.year)) + this.$refs.table.redraw(this.tableURL(this.year, this.params)) }, buildFilteredQuery(query, time_period_columns, year) { let url = "/api/v1/erm/usage_titles/monthly_report" @@ -261,11 +257,11 @@ export default { return url }, - tableURL(year) { - const filter_required = this.getYearlyFilter() + tableURL(year, params) { + const filter_required = params.yearly_filter if (filter_required) { - const query = this.getQuery() - const time_period_columns = this.getTimePeriodColumns() + const query = params.queryObject + const time_period_columns = params.tp_columns const url = this.buildFilteredQuery( query, @@ -275,15 +271,56 @@ export default { return url } else { - const url = this.getReportURL() + const url = params.url return url } }, + mergeTitleDataIntoOneLine(numberOfMetricTypes) { + let dt = this.$refs.table.useTableObject() + dt.on("draw", () => { + const rows = dt.rows().nodes().to$() + + const data_rows = [] + for (let i = 0; i < rows.length; i = i + numberOfMetricTypes) { + data_rows.push([rows.slice(i, i + numberOfMetricTypes)]) + } + + data_rows + .map(item => item[0]) + .forEach(titleRows => { + Array.from(titleRows).forEach((row, i) => { + const cells = row.cells + if (i === 0) { + cells[0].rowSpan = numberOfMetricTypes + cells[0].style.textAlign = "center" + cells[0].style.verticalAlign = "middle" + cells[0].style.borderRight = "1px solid #BCBCBC" + } else { + cells[0].remove() + } + }) + }) + }) + this.$refs.table_div.classList.remove("hide-table") + }, + }, + watch: { + table() { + // table needs to be rendered before header can be created and + // table is hidden by .hide-table until table header is created + if (this.report_type !== "metric_type") { + this.mergeTitleDataIntoOneLine( + this.params.queryObject.metric_types.length + ) + } else { + this.$refs.table_div.classList.remove("hide-table") + } + }, }, mounted() { if (!this.building_table) { - this.yearly_filter = this.getYearlyFilter() + this.yearly_filter = this.params.yearly_filter this.building_table = true this.initialized = true } @@ -314,4 +351,7 @@ export default { .v-select { max-width: 30%; } +.hide-table { + display: none; +} diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/KohaTable.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/KohaTable.vue index 740953ccb4..b988a2c7df 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/KohaTable.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/KohaTable.vue @@ -74,6 +74,10 @@ export default { redraw: function (url) { this.$refs.table.dt().ajax.url(url).draw() }, + useTableObject: function () { + let dt = this.$refs.table.dt() + return dt + }, }, beforeMount() { if (this.actions.hasOwnProperty("-1")) { diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/usage-reports.js b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/usage-reports.js index 16b3f107ce..c80f248bc2 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/usage-reports.js +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/usage-reports.js @@ -2,11 +2,6 @@ import { defineStore } from "pinia"; export const useReportsStore = defineStore('reports', { state: () => ({ - report_url: null, - time_period_columns: null, - report_type: null, - columns: null, - yearly_filter: null, months_data: [ { short: "Jan", description: "January", value: 1, active: true }, { short: "Feb", description: "February", value: 2, active: true }, @@ -24,44 +19,8 @@ export const useReportsStore = defineStore('reports', { query: null }), actions: { - setReportURL(url) { - this.report_url = url - }, - setTimePeriodColumns(time_period_columns) { - this.time_period_columns = time_period_columns - }, - setReportType(report_type) { - this.report_type = report_type - }, - setColumns(columns) { - this.columns = columns - }, - setYearlyFilter(value) { - this.yearly_filter = value - }, - setQuery(query) { - this.query = query - }, - getColumns() { - return this.columns - }, - getReportURL() { - return this.report_url - }, - getTimePeriodColumns() { - return this.time_period_columns - }, - getReportType() { - return this.report_type - }, - getYearlyFilter() { - return this.yearly_filter - }, getMonthsData() { return this.months_data }, - getQuery() { - return this.query - }, } }) \ No newline at end of file -- 2.39.5