From e22e8b862a9b54d811807ee3e040caca89526505 Mon Sep 17 00:00:00 2001
From: Bozana Bokan <bozana.bokan@posteo.net>
Date: Thu, 21 Dec 2023 10:44:52 +0100
Subject: [PATCH 01/11] pkp/pkp-lib#9666 COUNTER R5 TSV reports

---
 .../Container/CounterReportsPage.vue          |  12 +
 .../Form/counter/CounterReportForm.vue        | 137 ++++++++++++
 .../counter/CounterReportsListPanel.vue       | 208 ++++++++++++++++++
 3 files changed, 357 insertions(+)
 create mode 100644 src/components/Container/CounterReportsPage.vue
 create mode 100644 src/components/Form/counter/CounterReportForm.vue
 create mode 100644 src/components/ListPanel/counter/CounterReportsListPanel.vue

diff --git a/src/components/Container/CounterReportsPage.vue b/src/components/Container/CounterReportsPage.vue
new file mode 100644
index 000000000..396625750
--- /dev/null
+++ b/src/components/Container/CounterReportsPage.vue
@@ -0,0 +1,12 @@
+<script>
+import CounterReportsListPanel from '@/components/ListPanel/counter/CounterReportsListPanel.vue';
+import Page from '@/components/Container/Page.vue';
+
+export default {
+	name: 'CounterReportsPage',
+	components: {
+		CounterReportsListPanel,
+	},
+	extends: Page,
+};
+</script>
diff --git a/src/components/Form/counter/CounterReportForm.vue b/src/components/Form/counter/CounterReportForm.vue
new file mode 100644
index 000000000..492b9f274
--- /dev/null
+++ b/src/components/Form/counter/CounterReportForm.vue
@@ -0,0 +1,137 @@
+<script>
+import PkpForm from '@/components/Form/Form.vue';
+
+export default {
+	name: 'CounterReportForm',
+	extends: PkpForm,
+	components: {
+		PkpForm,
+	},
+	props: {
+		reportId: {
+			type: String,
+			required: false,
+		},
+		reportFields: {
+			type: Array,
+			required: true,
+		},
+		earliestDate: {
+			type: String,
+			required: true,
+		},
+		lastDate: {
+			type: String,
+			required: true,
+		},
+	},
+	methods: {
+		/**
+		 * Get the report parameters
+		 *
+		 * @param Object
+		 * @return Object
+		 */
+		getReportParams(formSubmitValues) {
+			let params = {};
+			for (const [key, value] of Object.entries(formSubmitValues)) {
+				switch (key) {
+					case 'customer_id':
+					case 'begin_date':
+					case 'end_date':
+					case 'yop':
+					case 'item_id':
+						if (value != null && value.length > 0) {
+							params[key] = value;
+						}
+						break;
+					case 'metric_type':
+					case 'attributes_to_show':
+						if (value != null && value.length > 0) {
+							params[key] = value.join('|');
+						}
+						break;
+					case 'include_parent_details':
+						if (value == true) {
+							params.include_parent_details = 'True';
+						}
+						break;
+					case 'granularity':
+						if (value == true) {
+							params.granularity = 'Totals';
+						}
+						break;
+				}
+			}
+			return params;
+		},
+
+		/**
+		 * Submit the form
+		 */
+		submit() {
+			if (!this.canSubmit) {
+				return false;
+			}
+
+			let errors = this.validate();
+			if (Object.keys(errors).length) {
+				this.$emit('set', this.id, {
+					errors: {
+						...this.errors,
+						...errors,
+					},
+				});
+				return;
+			}
+
+			this.isSaving = true;
+
+			$.ajax({
+				context: this,
+				method: this.method,
+				url: this.action,
+				headers: {
+					Accept: 'text/tab-separated-values; charset=utf-8',
+				},
+				data: this.getReportParams(this.submitValues),
+				error(r) {
+					this.isSaving = false;
+					if (r.status && r.status === 400) {
+						if (r.responseJSON.hasOwnProperty('Code')) {
+							// COUNTER speific errors should actually not occur
+							// because of the form/user input validation
+							// but consider them for any case as well.
+							pkp.eventBus.$emit(
+								'notify',
+								r.responseJSON.Code +
+									':' +
+									r.responseJSON.Message +
+									'(' +
+									r.responseJSON.Data +
+									')',
+								'warning'
+							);
+						} else {
+							// Field validation errors
+							this.$emit('set', this.id, {errors: r.responseJSON});
+						}
+					} else {
+						this.error(r);
+					}
+				},
+				success(r) {
+					this.$emit('success', r);
+					var blob = new Blob([r]);
+					var link = document.createElement('a');
+					link.href = window.URL.createObjectURL(blob);
+					link.download = 'counterReport.tsv';
+					link.click();
+					this.isSaving = false;
+					pkp.eventBus.$emit('form-success', this.id, r);
+				},
+			});
+		},
+	},
+};
+</script>
diff --git a/src/components/ListPanel/counter/CounterReportsListPanel.vue b/src/components/ListPanel/counter/CounterReportsListPanel.vue
new file mode 100644
index 000000000..13437d5ed
--- /dev/null
+++ b/src/components/ListPanel/counter/CounterReportsListPanel.vue
@@ -0,0 +1,208 @@
+<template>
+	<div class="counterReportsListPanel">
+		<slot>
+			<list-panel :items="items">
+				<pkp-header>
+					<h2>{{ title }}</h2>
+					<spinner v-if="isLoading" />
+				</pkp-header>
+				<template #item-title="{item}">
+					<span :id="item.Report_ID">
+						{{ item.Report_Name }} ({{ item.Report_ID }})
+					</span>
+				</template>
+				<template #item-actions="{item}">
+					<pkp-button
+						:aria-describedby="item.Report_ID"
+						@click="openEditModal(item.Report_ID)"
+					>
+						{{ __('common.edit') }}
+					</pkp-button>
+				</template>
+			</list-panel>
+			<modal
+				:close-label="__('common.close')"
+				name="form"
+				:title="activeFormTitle"
+				@closed="formModalClosed"
+			>
+				<counter-report-form
+					v-bind="activeForm"
+					@set="updateForm"
+					@success="formSuccess"
+				/>
+			</modal>
+		</slot>
+	</div>
+</template>
+
+<script>
+import ListPanel from '@/components/ListPanel/ListPanel.vue';
+import CounterReportForm from '@/components/Form/counter/CounterReportForm.vue';
+import PkpHeader from '@/components/Header/Header.vue';
+import Modal from '@/components/Modal/Modal.vue';
+import ajaxError from '@/mixins/ajaxError';
+import fetch from '@/mixins/fetch';
+import cloneDeep from 'clone-deep';
+
+export default {
+	components: {
+		ListPanel,
+		CounterReportForm,
+		PkpHeader,
+		Modal,
+	},
+	mixins: [fetch, ajaxError],
+	props: {
+		editCounterReportLabel: {
+			type: String,
+			required: true,
+		},
+		form: {
+			type: Object,
+			required: true,
+		},
+		id: {
+			type: String,
+			required: true,
+		},
+		title: {
+			type: String,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			items: [],
+			isLoadingItems: false,
+			latestItemsGetRequest: '',
+			isDownloadingReport: false,
+			activeForm: null,
+			activeFormTitle: '',
+			resetFocusTo: null,
+		};
+	},
+	mounted() {
+		/**
+		 * Load the items
+		 */
+		this.getItems();
+	},
+	methods: {
+		/**
+		 * Get the list of items from the server
+		 */
+		getItems() {
+			let self = this;
+
+			this.isLoadingItems = true;
+			this.latestItemsGetRequest = $.pkp.classes.Helper.uuid();
+
+			$.ajax({
+				url: this.apiUrl + '/reports',
+				type: 'GET',
+				data: [],
+				_uuid: this.latestItemsGetRequest,
+				error(r) {
+					if (self.latestItemsGetRequest !== this._uuid) {
+						return;
+					}
+					self.ajaxErrorCallback(r);
+				},
+				success(r) {
+					if (self.latestItemsGetRequest !== this._uuid) {
+						return;
+					}
+					self.setItems(r);
+				},
+				complete(r) {
+					if (self.latestItemsGetRequest !== this._uuid) {
+						return;
+					}
+					self.isLoadingItems = false;
+				},
+			});
+		},
+
+		/**
+		 * Clear the active form when the modal is closed
+		 *
+		 * @param {Object} event
+		 */
+		formModalClosed(event) {
+			this.activeForm = null;
+			this.activeFormTitle = '';
+			if (this.resetFocusTo) {
+				this.resetFocusTo.focus();
+			}
+		},
+
+		/**
+		 * The edit form has been successfully
+		 * submitted.
+		 */
+		formSuccess() {
+			this.$modal.hide('form');
+		},
+
+		/**
+		 * Open the modal to edit an item
+		 *
+		 * @param {Number} id
+		 */
+		openEditModal(id) {
+			this.resetFocusTo = document.activeElement;
+
+			const report = this.items.find((report) => report.Report_ID === id);
+			if (!report) {
+				this.ajaxErrorCallback({});
+				return;
+			}
+
+			let activeForm = cloneDeep(this.form);
+			activeForm.reportId = id;
+			activeForm.action = this.apiUrl + '/' + report.Path;
+			activeForm.method = 'GET';
+			activeForm.fields = activeForm.reportFields[id];
+			this.activeForm = activeForm;
+			this.activeFormTitle = this.editCounterReportLabel;
+			this.$modal.show('form');
+		},
+
+		/**
+		 * Set the list of items
+		 *
+		 * @see @/mixins/fetch.js
+		 * @param {Array} result
+		 */
+		setItems(result) {
+			let self = this;
+			self.items = result;
+		},
+
+		/**
+		 * Update form values when they change
+		 *
+		 * @param {String} formId
+		 * @param {Object} data
+		 */
+		updateForm(formId, data) {
+			let activeForm = {...this.activeForm};
+			Object.keys(data).forEach(function (key) {
+				activeForm[key] = data[key];
+			});
+			this.activeForm = activeForm;
+		},
+	},
+};
+</script>
+
+<style lang="less">
+@import '../../../styles/_import';
+
+.counterReportsListPanel {
+	.listPanel__itemTitle {
+		font-weight: @normal;
+	}
+}
+</style>

From ee3ff76b42495f70add9418a5e8b3ec8d987c466 Mon Sep 17 00:00:00 2001
From: Bozana Bokan <bozana.bokan@posteo.net>
Date: Wed, 17 Jul 2024 15:31:36 +0200
Subject: [PATCH 02/11] fix counter list panel

---
 .../counter/CounterReportsEditModal.vue       |  26 ++++
 .../counter/CounterReportsListPanel.vue       | 118 ++++++++----------
 2 files changed, 78 insertions(+), 66 deletions(-)
 create mode 100644 src/components/ListPanel/counter/CounterReportsEditModal.vue

diff --git a/src/components/ListPanel/counter/CounterReportsEditModal.vue b/src/components/ListPanel/counter/CounterReportsEditModal.vue
new file mode 100644
index 000000000..3da3bb12b
--- /dev/null
+++ b/src/components/ListPanel/counter/CounterReportsEditModal.vue
@@ -0,0 +1,26 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ title }}
+		</template>
+		<SideModalLayoutBasic>
+			<CounterReportForm
+				v-bind="activeForm"
+				@set="(...args) => emit('updateForm', ...args)"
+				@success="(...args) => emit('formSuccess', ...args)"
+			/>
+		</SideModalLayoutBasic>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
+import CounterReportForm from '@/components/Form/counter/CounterReportForm.vue';
+
+defineProps({
+	title: {type: String, required: true},
+	activeForm: {type: Object, required: true},
+});
+const emit = defineEmits(['updateForm', 'formSuccess']);
+</script>
diff --git a/src/components/ListPanel/counter/CounterReportsListPanel.vue b/src/components/ListPanel/counter/CounterReportsListPanel.vue
index 13437d5ed..e3740fbdf 100644
--- a/src/components/ListPanel/counter/CounterReportsListPanel.vue
+++ b/src/components/ListPanel/counter/CounterReportsListPanel.vue
@@ -1,85 +1,80 @@
 <template>
 	<div class="counterReportsListPanel">
 		<slot>
-			<list-panel :items="items">
-				<pkp-header>
-					<h2>{{ title }}</h2>
-					<spinner v-if="isLoading" />
-				</pkp-header>
+			<ListPanel :items="items">
+				<template #header>
+					<PkpHeader>
+						<h2>{{ title }}</h2>
+						<Spinner v-if="isLoadingItems" />
+					</PkpHeader>
+				</template>
 				<template #item-title="{item}">
 					<span :id="item.Report_ID">
 						{{ item.Report_Name }} ({{ item.Report_ID }})
 					</span>
 				</template>
 				<template #item-actions="{item}">
-					<pkp-button
-						:aria-describedby="item.Report_ID"
-						@click="openEditModal(item.Report_ID)"
-					>
-						{{ __('common.edit') }}
-					</pkp-button>
+					<PkpButton @click="openEditModal(item.Report_ID)">
+						{{ t('common.edit') }}
+					</PkpButton>
 				</template>
-			</list-panel>
-			<modal
-				:close-label="__('common.close')"
-				name="form"
-				:title="activeFormTitle"
-				@closed="formModalClosed"
-			>
-				<counter-report-form
-					v-bind="activeForm"
-					@set="updateForm"
-					@success="formSuccess"
-				/>
-			</modal>
+			</ListPanel>
 		</slot>
 	</div>
 </template>
 
 <script>
+import PkpButton from '@/components/Button/Button.vue';
+import Spinner from '@/components/Spinner/Spinner.vue';
 import ListPanel from '@/components/ListPanel/ListPanel.vue';
-import CounterReportForm from '@/components/Form/counter/CounterReportForm.vue';
 import PkpHeader from '@/components/Header/Header.vue';
-import Modal from '@/components/Modal/Modal.vue';
 import ajaxError from '@/mixins/ajaxError';
 import fetch from '@/mixins/fetch';
 import cloneDeep from 'clone-deep';
+import CounterReportsEditModal from './CounterReportsEditModal.vue';
+import {useModal} from '@/composables/useModal';
+import {useFetch} from '@/composables/useFetch';
 
 export default {
 	components: {
+		PkpButton,
+		Spinner,
 		ListPanel,
-		CounterReportForm,
 		PkpHeader,
-		Modal,
 	},
 	mixins: [fetch, ajaxError],
 	props: {
+		/** A localized string for the button to edit a report. */
 		editCounterReportLabel: {
 			type: String,
 			required: true,
 		},
+		/** The Form to edit a report. */
 		form: {
 			type: Object,
 			required: true,
 		},
+		/** A unique id for this component. */
 		id: {
 			type: String,
 			required: true,
 		},
+		/** The title of the list panel. */
 		title: {
 			type: String,
 			required: true,
 		},
 	},
+	emits: [
+		/** Emitted when a prop should be changed. Payload: `(id, newProps)` */
+		'set',
+	],
 	data() {
 		return {
 			items: [],
 			isLoadingItems: false,
-			latestItemsGetRequest: '',
-			isDownloadingReport: false,
 			activeForm: null,
 			activeFormTitle: '',
-			resetFocusTo: null,
 		};
 	},
 	mounted() {
@@ -92,36 +87,19 @@ export default {
 		/**
 		 * Get the list of items from the server
 		 */
-		getItems() {
+		getItems: async function () {
 			let self = this;
-
 			this.isLoadingItems = true;
-			this.latestItemsGetRequest = $.pkp.classes.Helper.uuid();
 
-			$.ajax({
-				url: this.apiUrl + '/reports',
-				type: 'GET',
-				data: [],
-				_uuid: this.latestItemsGetRequest,
-				error(r) {
-					if (self.latestItemsGetRequest !== this._uuid) {
-						return;
-					}
-					self.ajaxErrorCallback(r);
-				},
-				success(r) {
-					if (self.latestItemsGetRequest !== this._uuid) {
-						return;
-					}
-					self.setItems(r);
-				},
-				complete(r) {
-					if (self.latestItemsGetRequest !== this._uuid) {
-						return;
-					}
-					self.isLoadingItems = false;
-				},
+			const {data, isSuccess, fetch} = useFetch(`${this.apiUrl}/reports`, {
+				method: 'GET',
 			});
+			await fetch();
+
+			if (isSuccess) {
+				self.setItems(data.value);
+			}
+			self.isLoadingItems = false;
 		},
 
 		/**
@@ -129,12 +107,11 @@ export default {
 		 *
 		 * @param {Object} event
 		 */
-		formModalClosed(event) {
+		closeFormModal(event) {
 			this.activeForm = null;
 			this.activeFormTitle = '';
-			if (this.resetFocusTo) {
-				this.resetFocusTo.focus();
-			}
+			const {closeSideModal} = useModal();
+			closeSideModal(CounterReportsEditModal);
 		},
 
 		/**
@@ -142,7 +119,7 @@ export default {
 		 * submitted.
 		 */
 		formSuccess() {
-			this.$modal.hide('form');
+			this.closeFormModal();
 		},
 
 		/**
@@ -151,8 +128,6 @@ export default {
 		 * @param {Number} id
 		 */
 		openEditModal(id) {
-			this.resetFocusTo = document.activeElement;
-
 			const report = this.items.find((report) => report.Report_ID === id);
 			if (!report) {
 				this.ajaxErrorCallback({});
@@ -166,7 +141,15 @@ export default {
 			activeForm.fields = activeForm.reportFields[id];
 			this.activeForm = activeForm;
 			this.activeFormTitle = this.editCounterReportLabel;
-			this.$modal.show('form');
+
+			const {openSideModal} = useModal();
+
+			openSideModal(CounterReportsEditModal, {
+				title: this.editCounterReportLabel,
+				activeForm,
+				onUpdateForm: this.updateForm,
+				onFormSuccess: this.formSuccess,
+			});
 		},
 
 		/**
@@ -187,7 +170,10 @@ export default {
 		 * @param {Object} data
 		 */
 		updateForm(formId, data) {
-			let activeForm = {...this.activeForm};
+			if (!this.activeForm) {
+				return;
+			}
+			let activeForm = this.activeForm;
 			Object.keys(data).forEach(function (key) {
 				activeForm[key] = data[key];
 			});

From 0fc5811c9b6c5570f9f76c700b797501e665bf9c Mon Sep 17 00:00:00 2001
From: Bozana Bokan <bozana.bokan@posteo.net>
Date: Tue, 20 Aug 2024 22:38:46 +0200
Subject: [PATCH 03/11] Use PkpForm instead of CounterReportForm in
 CounterReportsEditModal

---
 .../Form/counter/CounterReportForm.vue        | 137 ------------------
 .../counter/CounterReportsEditModal.vue       | 105 +++++++++++++-
 .../counter/CounterReportsListPanel.vue       |   3 +-
 3 files changed, 102 insertions(+), 143 deletions(-)
 delete mode 100644 src/components/Form/counter/CounterReportForm.vue

diff --git a/src/components/Form/counter/CounterReportForm.vue b/src/components/Form/counter/CounterReportForm.vue
deleted file mode 100644
index 492b9f274..000000000
--- a/src/components/Form/counter/CounterReportForm.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<script>
-import PkpForm from '@/components/Form/Form.vue';
-
-export default {
-	name: 'CounterReportForm',
-	extends: PkpForm,
-	components: {
-		PkpForm,
-	},
-	props: {
-		reportId: {
-			type: String,
-			required: false,
-		},
-		reportFields: {
-			type: Array,
-			required: true,
-		},
-		earliestDate: {
-			type: String,
-			required: true,
-		},
-		lastDate: {
-			type: String,
-			required: true,
-		},
-	},
-	methods: {
-		/**
-		 * Get the report parameters
-		 *
-		 * @param Object
-		 * @return Object
-		 */
-		getReportParams(formSubmitValues) {
-			let params = {};
-			for (const [key, value] of Object.entries(formSubmitValues)) {
-				switch (key) {
-					case 'customer_id':
-					case 'begin_date':
-					case 'end_date':
-					case 'yop':
-					case 'item_id':
-						if (value != null && value.length > 0) {
-							params[key] = value;
-						}
-						break;
-					case 'metric_type':
-					case 'attributes_to_show':
-						if (value != null && value.length > 0) {
-							params[key] = value.join('|');
-						}
-						break;
-					case 'include_parent_details':
-						if (value == true) {
-							params.include_parent_details = 'True';
-						}
-						break;
-					case 'granularity':
-						if (value == true) {
-							params.granularity = 'Totals';
-						}
-						break;
-				}
-			}
-			return params;
-		},
-
-		/**
-		 * Submit the form
-		 */
-		submit() {
-			if (!this.canSubmit) {
-				return false;
-			}
-
-			let errors = this.validate();
-			if (Object.keys(errors).length) {
-				this.$emit('set', this.id, {
-					errors: {
-						...this.errors,
-						...errors,
-					},
-				});
-				return;
-			}
-
-			this.isSaving = true;
-
-			$.ajax({
-				context: this,
-				method: this.method,
-				url: this.action,
-				headers: {
-					Accept: 'text/tab-separated-values; charset=utf-8',
-				},
-				data: this.getReportParams(this.submitValues),
-				error(r) {
-					this.isSaving = false;
-					if (r.status && r.status === 400) {
-						if (r.responseJSON.hasOwnProperty('Code')) {
-							// COUNTER speific errors should actually not occur
-							// because of the form/user input validation
-							// but consider them for any case as well.
-							pkp.eventBus.$emit(
-								'notify',
-								r.responseJSON.Code +
-									':' +
-									r.responseJSON.Message +
-									'(' +
-									r.responseJSON.Data +
-									')',
-								'warning'
-							);
-						} else {
-							// Field validation errors
-							this.$emit('set', this.id, {errors: r.responseJSON});
-						}
-					} else {
-						this.error(r);
-					}
-				},
-				success(r) {
-					this.$emit('success', r);
-					var blob = new Blob([r]);
-					var link = document.createElement('a');
-					link.href = window.URL.createObjectURL(blob);
-					link.download = 'counterReport.tsv';
-					link.click();
-					this.isSaving = false;
-					pkp.eventBus.$emit('form-success', this.id, r);
-				},
-			});
-		},
-	},
-};
-</script>
diff --git a/src/components/ListPanel/counter/CounterReportsEditModal.vue b/src/components/ListPanel/counter/CounterReportsEditModal.vue
index 3da3bb12b..8f73b9ae0 100644
--- a/src/components/ListPanel/counter/CounterReportsEditModal.vue
+++ b/src/components/ListPanel/counter/CounterReportsEditModal.vue
@@ -4,10 +4,10 @@
 			{{ title }}
 		</template>
 		<SideModalLayoutBasic>
-			<CounterReportForm
+			<PkpForm
 				v-bind="activeForm"
 				@set="(...args) => emit('updateForm', ...args)"
-				@success="(...args) => emit('formSuccess', ...args)"
+				@success="(...args) => counterFormSubmit(...args)"
 			/>
 		</SideModalLayoutBasic>
 	</SideModalBody>
@@ -16,11 +16,108 @@
 <script setup>
 import SideModalBody from '@/components/Modal/SideModalBody.vue';
 import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
-import CounterReportForm from '@/components/Form/counter/CounterReportForm.vue';
+import PkpForm from '@/components/Form/Form.vue';
+import {useForm} from '@/composables/useForm';
 
-defineProps({
+const props = defineProps({
 	title: {type: String, required: true},
+	submitAction: {type: String, required: true},
 	activeForm: {type: Object, required: true},
 });
 const emit = defineEmits(['updateForm', 'formSuccess']);
+
+/**
+ * Get the report parameters
+ *
+ * @param Object
+ * @return Object
+ */
+function getReportParams(formSubmitValues) {
+	let params = {};
+	for (const [key, value] of Object.entries(formSubmitValues)) {
+		switch (key) {
+			case 'customer_id':
+			case 'begin_date':
+			case 'end_date':
+			case 'yop':
+			case 'item_id':
+				if (value != null && value.length > 0) {
+					params[key] = value;
+				}
+				break;
+			case 'metric_type':
+			case 'attributes_to_show':
+				if (value != null && value.length > 0) {
+					params[key] = value.join('|');
+				}
+				break;
+			case 'include_parent_details':
+				if (value == true) {
+					params.include_parent_details = 'True';
+				}
+				break;
+			case 'granularity':
+				if (value == true) {
+					params.granularity = 'Totals';
+				}
+				break;
+		}
+	}
+	return params;
+}
+
+/**
+ * Submit the form
+ *
+ * @param {Object}
+ */
+function counterFormSubmit(submittedValues) {
+	const {form: form} = useForm(props.activeForm);
+
+	form.isSaving = true;
+
+	$.ajax({
+		context: form,
+		method: form.method,
+		url: props.submitAction,
+		headers: {
+			Accept: 'text/tab-separated-values; charset=utf-8',
+		},
+		data: getReportParams(submittedValues),
+		error(r) {
+			form.isSaving = false;
+			if (r.status && r.status === 400) {
+				if (Object.prototype.hasOwnProperty.call(r.responseJSON, 'Code')) {
+					// COUNTER speific errors should actually not occur
+					// because of the form/user input validation
+					// but consider them for any case as well.
+					pkp.eventBus.$emit(
+						'notify',
+						r.responseJSON.Code +
+							':' +
+							r.responseJSON.Message +
+							'(' +
+							r.responseJSON.Data +
+							')',
+						'warning',
+					);
+				} else {
+					// Field validation errors
+					emit('updateForm', form.id, {errors: r.responseJSON});
+				}
+			} else {
+				form.error(r);
+			}
+		},
+		success(r) {
+			var blob = new Blob([r]);
+			var link = document.createElement('a');
+			link.href = window.URL.createObjectURL(blob);
+			link.download = 'counterReport.tsv';
+			link.click();
+			form.isSaving = false;
+			emit('formSuccess', this.id, r);
+		},
+	});
+}
 </script>
diff --git a/src/components/ListPanel/counter/CounterReportsListPanel.vue b/src/components/ListPanel/counter/CounterReportsListPanel.vue
index e3740fbdf..b4f8cc7a6 100644
--- a/src/components/ListPanel/counter/CounterReportsListPanel.vue
+++ b/src/components/ListPanel/counter/CounterReportsListPanel.vue
@@ -135,8 +135,6 @@ export default {
 			}
 
 			let activeForm = cloneDeep(this.form);
-			activeForm.reportId = id;
-			activeForm.action = this.apiUrl + '/' + report.Path;
 			activeForm.method = 'GET';
 			activeForm.fields = activeForm.reportFields[id];
 			this.activeForm = activeForm;
@@ -146,6 +144,7 @@ export default {
 
 			openSideModal(CounterReportsEditModal, {
 				title: this.editCounterReportLabel,
+				submitAction: this.apiUrl + '/' + report.Path,
 				activeForm,
 				onUpdateForm: this.updateForm,
 				onFormSuccess: this.formSuccess,

From 5e20892fa777e7b7ac6b5f42302974c2eda2b4bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Thu, 22 Aug 2024 14:10:57 +0200
Subject: [PATCH 04/11] Form customSubmit with useFetch

---
 src/components/Form/Form.vue                  | 28 ++++++--
 .../counter/CounterReportsEditModal.vue       | 71 +++++--------------
 src/composables/useForm.js                    |  6 +-
 3 files changed, 43 insertions(+), 62 deletions(-)

diff --git a/src/components/Form/Form.vue b/src/components/Form/Form.vue
index 8946a24f2..31eca16b3 100644
--- a/src/components/Form/Form.vue
+++ b/src/components/Form/Form.vue
@@ -17,7 +17,7 @@
 			:primary-locale-key="primaryLocale"
 			:locales="availableLocales"
 			:visible="visibleLocales"
-			@updateLocales="setVisibleLocales"
+			@update-locales="setVisibleLocales"
 		/>
 		<div v-if="pages.length > 1" class="pkpForm__pageNav">
 			<ol class="pkpForm__pageNavList">
@@ -59,10 +59,10 @@
 				:available-locales="availableLocales"
 				:is-saving="isSaving"
 				@change="fieldChanged"
-				@pageSubmitted="nextPage"
-				@previousPage="setCurrentPage(false)"
-				@showField="showField"
-				@showLocale="showLocale"
+				@page-submitted="nextPage"
+				@previous-page="setCurrentPage(false)"
+				@show-field="showField"
+				@show-locale="showLocale"
 				@cancel="cancel"
 				@set-errors="setErrors"
 			/>
@@ -128,6 +128,10 @@ export default {
 		visibleLocales: Array,
 		/** The locale(s) supported by this form. If a form has multilingual fields, it will display a separate input control for each of these locales. */
 		supportedFormLocales: Array,
+		/** For custom AJAX call, while still keep the error handling within Form
+		 *  Async function, receiving data from form and returning {validationError, data} from useFetch
+		 */
+		customSubmit: Function,
 	},
 	emits: [
 		/** When the form props need to be updated. The payload is an object with any keys that need to be modified. */
@@ -285,7 +289,7 @@ export default {
 		/**
 		 * Submit the form
 		 */
-		submit() {
+		async submit() {
 			if (!this.canSubmit) {
 				return false;
 			}
@@ -304,7 +308,17 @@ export default {
 				return;
 			}
 
-			if (this.action === 'emit') {
+			if (this.customSubmit) {
+				const {data, validationError} = await this.customSubmit(
+					this.submitValues,
+				);
+				if (validationError) {
+					this.error({status: 400, responseJSON: validationError});
+				} else {
+					this.success(data);
+				}
+				this.complete();
+			} else if (this.action === 'emit') {
 				this.$emit('success', this.submitValues);
 			} else {
 				$.ajax({
diff --git a/src/components/ListPanel/counter/CounterReportsEditModal.vue b/src/components/ListPanel/counter/CounterReportsEditModal.vue
index 8f73b9ae0..6ff99f9fc 100644
--- a/src/components/ListPanel/counter/CounterReportsEditModal.vue
+++ b/src/components/ListPanel/counter/CounterReportsEditModal.vue
@@ -4,11 +4,7 @@
 			{{ title }}
 		</template>
 		<SideModalLayoutBasic>
-			<PkpForm
-				v-bind="activeForm"
-				@set="(...args) => emit('updateForm', ...args)"
-				@success="(...args) => counterFormSubmit(...args)"
-			/>
+			<PkpForm v-bind="form" @set="set" />
 		</SideModalLayoutBasic>
 	</SideModalBody>
 </template>
@@ -18,13 +14,13 @@ import SideModalBody from '@/components/Modal/SideModalBody.vue';
 import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
 import PkpForm from '@/components/Form/Form.vue';
 import {useForm} from '@/composables/useForm';
+import {useFetch} from '@/composables/useFetch';
 
 const props = defineProps({
 	title: {type: String, required: true},
 	submitAction: {type: String, required: true},
 	activeForm: {type: Object, required: true},
 });
-const emit = defineEmits(['updateForm', 'formSuccess']);
 
 /**
  * Get the report parameters
@@ -66,58 +62,25 @@ function getReportParams(formSubmitValues) {
 	return params;
 }
 
-/**
- * Submit the form
- *
- * @param {Object}
- */
-function counterFormSubmit(submittedValues) {
-	const {form: form} = useForm(props.activeForm);
+const {form, set} = useForm(props.activeForm, {
+	customSubmit: async (submittedValues) => {
+		const {validationError, data, fetch} = useFetch(props.submitAction, {
+			expectValidationError: true,
+			headers: {Accept: 'text/tab-separated-values; charset=utf-8'},
+			query: getReportParams(submittedValues),
+		});
 
-	form.isSaving = true;
+		await fetch();
 
-	$.ajax({
-		context: form,
-		method: form.method,
-		url: props.submitAction,
-		headers: {
-			Accept: 'text/tab-separated-values; charset=utf-8',
-		},
-		data: getReportParams(submittedValues),
-		error(r) {
-			form.isSaving = false;
-			if (r.status && r.status === 400) {
-				if (Object.prototype.hasOwnProperty.call(r.responseJSON, 'Code')) {
-					// COUNTER speific errors should actually not occur
-					// because of the form/user input validation
-					// but consider them for any case as well.
-					pkp.eventBus.$emit(
-						'notify',
-						r.responseJSON.Code +
-							':' +
-							r.responseJSON.Message +
-							'(' +
-							r.responseJSON.Data +
-							')',
-						'warning',
-					);
-				} else {
-					// Field validation errors
-					emit('updateForm', form.id, {errors: r.responseJSON});
-				}
-			} else {
-				form.error(r);
-			}
-		},
-		success(r) {
-			var blob = new Blob([r]);
+		if (data.value) {
+			var blob = new Blob([data.value]);
 			var link = document.createElement('a');
 			link.href = window.URL.createObjectURL(blob);
 			link.download = 'counterReport.tsv';
 			link.click();
-			form.isSaving = false;
-			emit('formSuccess', this.id, r);
-		},
-	});
-}
+		}
+
+		return {data: data.value, validationError: validationError.value};
+	},
+});
 </script>
diff --git a/src/composables/useForm.js b/src/composables/useForm.js
index 0656d0760..f0d2ef049 100644
--- a/src/composables/useForm.js
+++ b/src/composables/useForm.js
@@ -30,9 +30,13 @@ function mapFromSelectedToValue(selected) {
 	return selected.map((iv) => iv.value);
 }
 
-export function useForm(_form) {
+export function useForm(_form, {customSubmit}) {
 	const form = ref(_form);
 
+	if (customSubmit) {
+		form.value.customSubmit = customSubmit;
+	}
+
 	function connectWithPayload(payload) {
 		watch(
 			payload,

From e5a5a001bbf9fc68cf68d0e23c2c3277e2906f61 Mon Sep 17 00:00:00 2001
From: Bozana Bokan <bozana.bokan@posteo.net>
Date: Mon, 26 Aug 2024 15:34:29 +0200
Subject: [PATCH 05/11] adapt form

---
 src/components/Form/Form.vue                  |  2 +-
 .../counter/CounterReportsEditModal.vue       | 21 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/Form/Form.vue b/src/components/Form/Form.vue
index 31eca16b3..b46c24ee3 100644
--- a/src/components/Form/Form.vue
+++ b/src/components/Form/Form.vue
@@ -314,7 +314,7 @@ export default {
 				);
 				if (validationError) {
 					this.error({status: 400, responseJSON: validationError});
-				} else {
+				} else if (data) {
 					this.success(data);
 				}
 				this.complete();
diff --git a/src/components/ListPanel/counter/CounterReportsEditModal.vue b/src/components/ListPanel/counter/CounterReportsEditModal.vue
index 6ff99f9fc..56e24be2e 100644
--- a/src/components/ListPanel/counter/CounterReportsEditModal.vue
+++ b/src/components/ListPanel/counter/CounterReportsEditModal.vue
@@ -72,7 +72,26 @@ const {form, set} = useForm(props.activeForm, {
 
 		await fetch();
 
-		if (data.value) {
+		if (
+			validationError.value &&
+			Object.prototype.hasOwnProperty.call(validationError.value, 'Code')
+		) {
+			// COUNTER speific errors should actually not occur
+			// because of the form/user input validation
+			// but consider them for any case as well.
+			pkp.eventBus.$emit(
+				'notify',
+				validationError.value.Code +
+					': ' +
+					validationError.value.Message +
+					' (' +
+					validationError.value.Data +
+					')',
+				'warning',
+			);
+			validationError.value = null;
+			data.value = null;
+		} else if (data.value) {
 			var blob = new Blob([data.value]);
 			var link = document.createElement('a');
 			link.href = window.URL.createObjectURL(blob);

From 4fd8fac81b3f0ef9b2c1f15379fa0310025977fc Mon Sep 17 00:00:00 2001
From: Bozana Bokan <bozana.bokan@posteo.net>
Date: Mon, 26 Aug 2024 11:51:22 +0200
Subject: [PATCH 06/11] adapt counter page

---
 .../Container/CounterReportsPage.vue          | 12 -------
 src/components/Container/Page.vue             |  2 ++
 src/pages/counter/CounterReportsPage.vue      | 31 +++++++++++++++++++
 3 files changed, 33 insertions(+), 12 deletions(-)
 delete mode 100644 src/components/Container/CounterReportsPage.vue
 create mode 100644 src/pages/counter/CounterReportsPage.vue

diff --git a/src/components/Container/CounterReportsPage.vue b/src/components/Container/CounterReportsPage.vue
deleted file mode 100644
index 396625750..000000000
--- a/src/components/Container/CounterReportsPage.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-import CounterReportsListPanel from '@/components/ListPanel/counter/CounterReportsListPanel.vue';
-import Page from '@/components/Container/Page.vue';
-
-export default {
-	name: 'CounterReportsPage',
-	components: {
-		CounterReportsListPanel,
-	},
-	extends: Page,
-};
-</script>
diff --git a/src/components/Container/Page.vue b/src/components/Container/Page.vue
index d00f9a05a..eb857f93d 100644
--- a/src/components/Container/Page.vue
+++ b/src/components/Container/Page.vue
@@ -7,6 +7,7 @@ import ReviewerSubmissionPage from '@/pages/reviewerSubmission/ReviewerSubmissio
 import JobsPage from '@/pages/jobs/JobsPage.vue';
 import FailedJobsPage from '@/pages/jobs/FailedJobsPage.vue';
 import FailedJobDetailsPage from '@/pages/jobs/FailedJobDetailsPage.vue';
+import CounterReportsPage from '@/pages/counter/CounterReportsPage.vue';
 
 export default {
 	name: 'Page',
@@ -17,6 +18,7 @@ export default {
 		JobsPage,
 		FailedJobsPage,
 		FailedJobDetailsPage,
+		CounterReportsPage,
 	},
 	extends: Container,
 	data() {
diff --git a/src/pages/counter/CounterReportsPage.vue b/src/pages/counter/CounterReportsPage.vue
new file mode 100644
index 000000000..7d810d083
--- /dev/null
+++ b/src/pages/counter/CounterReportsPage.vue
@@ -0,0 +1,31 @@
+<template>
+	<h1 class="app__pageHeading">
+		{{ title }}
+	</h1>
+	<p v-html="description" />
+	<Notification
+		v-if="usageNotPossible"
+		type="warning"
+		class="pkpNotification--backendPage__header"
+	>
+		{{ t('manager.statistics.counterR5Reports.usageNotPossible') }}
+	</Notification>
+	<Panel>
+		<PanelSection>
+			<CounterReportsListPanel v-bind="counterReportsListPanel" @set="set" />
+		</PanelSection>
+	</Panel>
+</template>
+
+<script setup>
+import Panel from '@/components/Panel/Panel.vue';
+import PanelSection from '@/components/Panel/PanelSection.vue';
+import CounterReportsListPanel from '@/components/ListPanel/counter/CounterReportsListPanel.vue';
+
+defineProps({
+	counterReportsListPanel: {type: Array, required: true},
+	usageNotPossible: {type: Boolean, required: true},
+	title: {type: String, required: true},
+	description: {type: String, required: true},
+});
+</script>

From 1ef65d494e2390c566008bbd83578139894d5283 Mon Sep 17 00:00:00 2001
From: Bozana Bokan <bozana.bokan@posteo.net>
Date: Thu, 29 Aug 2024 11:53:05 +0200
Subject: [PATCH 07/11] pkp/pkp-lib#10350 fix the check of the COUNTER R5 form
 field customer_id

---
 src/components/ListPanel/counter/CounterReportsEditModal.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/ListPanel/counter/CounterReportsEditModal.vue b/src/components/ListPanel/counter/CounterReportsEditModal.vue
index 56e24be2e..0ef388bad 100644
--- a/src/components/ListPanel/counter/CounterReportsEditModal.vue
+++ b/src/components/ListPanel/counter/CounterReportsEditModal.vue
@@ -33,6 +33,10 @@ function getReportParams(formSubmitValues) {
 	for (const [key, value] of Object.entries(formSubmitValues)) {
 		switch (key) {
 			case 'customer_id':
+				if (parseInt(value, 10) >= 0) {
+					params[key] = value;
+				}
+				break;
 			case 'begin_date':
 			case 'end_date':
 			case 'yop':

From 7fe2eaea2821122ab92457d76f13af69053264a7 Mon Sep 17 00:00:00 2001
From: Bozana Bokan <bozana.bokan@posteo.net>
Date: Tue, 8 Oct 2024 14:12:55 +0200
Subject: [PATCH 08/11] changes according to the second review

---
 .../counter/CounterReportsEditModal.vue       |   5 +-
 .../counter/CounterReportsListPanel.vue       | 199 +++++-------------
 src/pages/counter/CounterReportsPage.vue      |   2 +-
 3 files changed, 59 insertions(+), 147 deletions(-)

diff --git a/src/components/ListPanel/counter/CounterReportsEditModal.vue b/src/components/ListPanel/counter/CounterReportsEditModal.vue
index 0ef388bad..a8f3b6746 100644
--- a/src/components/ListPanel/counter/CounterReportsEditModal.vue
+++ b/src/components/ListPanel/counter/CounterReportsEditModal.vue
@@ -4,7 +4,7 @@
 			{{ title }}
 		</template>
 		<SideModalLayoutBasic>
-			<PkpForm v-bind="form" @set="set" />
+			<PkpForm v-bind="form" @set="set" @success="closeModal" />
 		</SideModalLayoutBasic>
 	</SideModalBody>
 </template>
@@ -15,6 +15,7 @@ import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
 import PkpForm from '@/components/Form/Form.vue';
 import {useForm} from '@/composables/useForm';
 import {useFetch} from '@/composables/useFetch';
+import {inject} from 'vue';
 
 const props = defineProps({
 	title: {type: String, required: true},
@@ -22,6 +23,8 @@ const props = defineProps({
 	activeForm: {type: Object, required: true},
 });
 
+const closeModal = inject('closeModal');
+
 /**
  * Get the report parameters
  *
diff --git a/src/components/ListPanel/counter/CounterReportsListPanel.vue b/src/components/ListPanel/counter/CounterReportsListPanel.vue
index b4f8cc7a6..aba499d45 100644
--- a/src/components/ListPanel/counter/CounterReportsListPanel.vue
+++ b/src/components/ListPanel/counter/CounterReportsListPanel.vue
@@ -9,7 +9,7 @@
 					</PkpHeader>
 				</template>
 				<template #item-title="{item}">
-					<span :id="item.Report_ID">
+					<span :id="item.Report_ID" class="text-lg-normal">
 						{{ item.Report_Name }} ({{ item.Report_ID }})
 					</span>
 				</template>
@@ -23,171 +23,80 @@
 	</div>
 </template>
 
-<script>
+<script setup>
 import PkpButton from '@/components/Button/Button.vue';
 import Spinner from '@/components/Spinner/Spinner.vue';
 import ListPanel from '@/components/ListPanel/ListPanel.vue';
 import PkpHeader from '@/components/Header/Header.vue';
-import ajaxError from '@/mixins/ajaxError';
-import fetch from '@/mixins/fetch';
 import cloneDeep from 'clone-deep';
 import CounterReportsEditModal from './CounterReportsEditModal.vue';
 import {useModal} from '@/composables/useModal';
 import {useFetch} from '@/composables/useFetch';
+import {useApiUrl} from '@/composables/useApiUrl';
+import {useLocalize} from '@/composables/useLocalize';
+import {ref, onMounted} from 'vue';
 
-export default {
-	components: {
-		PkpButton,
-		Spinner,
-		ListPanel,
-		PkpHeader,
-	},
-	mixins: [fetch, ajaxError],
-	props: {
-		/** A localized string for the button to edit a report. */
-		editCounterReportLabel: {
-			type: String,
-			required: true,
-		},
-		/** The Form to edit a report. */
-		form: {
-			type: Object,
-			required: true,
-		},
-		/** A unique id for this component. */
-		id: {
-			type: String,
-			required: true,
-		},
-		/** The title of the list panel. */
-		title: {
-			type: String,
-			required: true,
-		},
-	},
-	emits: [
-		/** Emitted when a prop should be changed. Payload: `(id, newProps)` */
-		'set',
-	],
-	data() {
-		return {
-			items: [],
-			isLoadingItems: false,
-			activeForm: null,
-			activeFormTitle: '',
-		};
-	},
-	mounted() {
-		/**
-		 * Load the items
-		 */
-		this.getItems();
-	},
-	methods: {
-		/**
-		 * Get the list of items from the server
-		 */
-		getItems: async function () {
-			let self = this;
-			this.isLoadingItems = true;
+const {t} = useLocalize();
 
-			const {data, isSuccess, fetch} = useFetch(`${this.apiUrl}/reports`, {
-				method: 'GET',
-			});
-			await fetch();
+const props = defineProps({
+	form: {type: Object, required: true},
+	id: {type: String, required: true},
+	title: {type: String, required: true},
+});
 
-			if (isSuccess) {
-				self.setItems(data.value);
-			}
-			self.isLoadingItems = false;
-		},
+const items = ref([]);
+const isLoadingItems = ref(false);
+const activeForm = ref(null);
+const activeFormTitle = ref('');
 
-		/**
-		 * Clear the active form when the modal is closed
-		 *
-		 * @param {Object} event
-		 */
-		closeFormModal(event) {
-			this.activeForm = null;
-			this.activeFormTitle = '';
-			const {closeSideModal} = useModal();
-			closeSideModal(CounterReportsEditModal);
-		},
+onMounted(() => {
+	/* Load the items */
+	getItems();
+});
 
-		/**
-		 * The edit form has been successfully
-		 * submitted.
-		 */
-		formSuccess() {
-			this.closeFormModal();
-		},
+/**
+ * Get the list of items (COUNTER R5 reports) from the server
+ */
+async function getItems() {
+	isLoadingItems.value = true;
 
-		/**
-		 * Open the modal to edit an item
-		 *
-		 * @param {Number} id
-		 */
-		openEditModal(id) {
-			const report = this.items.find((report) => report.Report_ID === id);
-			if (!report) {
-				this.ajaxErrorCallback({});
-				return;
-			}
+	const {apiUrl} = useApiUrl(`stats/sushi/reports`);
+	const {data, isSuccess, fetch} = useFetch(apiUrl, {
+		method: 'GET',
+	});
+	await fetch();
 
-			let activeForm = cloneDeep(this.form);
-			activeForm.method = 'GET';
-			activeForm.fields = activeForm.reportFields[id];
-			this.activeForm = activeForm;
-			this.activeFormTitle = this.editCounterReportLabel;
+	if (isSuccess) {
+		items.value = data.value;
+	}
+	isLoadingItems.value = false;
+}
 
-			const {openSideModal} = useModal();
+/**
+ * Open the modal to edit an item
+ *
+ * @param {String} id
+ */
+function openEditModal(id) {
+	const report = items.value.find((report) => report.Report_ID === id);
 
-			openSideModal(CounterReportsEditModal, {
-				title: this.editCounterReportLabel,
-				submitAction: this.apiUrl + '/' + report.Path,
-				activeForm,
-				onUpdateForm: this.updateForm,
-				onFormSuccess: this.formSuccess,
-			});
-		},
+	activeForm.value = cloneDeep(props.form);
+	activeForm.value.method = 'GET';
+	activeForm.value.fields = activeForm.value.reportFields[id];
 
-		/**
-		 * Set the list of items
-		 *
-		 * @see @/mixins/fetch.js
-		 * @param {Array} result
-		 */
-		setItems(result) {
-			let self = this;
-			self.items = result;
-		},
+	activeFormTitle.value = t('manager.statistics.counterR5Report.settings');
 
-		/**
-		 * Update form values when they change
-		 *
-		 * @param {String} formId
-		 * @param {Object} data
-		 */
-		updateForm(formId, data) {
-			if (!this.activeForm) {
-				return;
-			}
-			let activeForm = this.activeForm;
-			Object.keys(data).forEach(function (key) {
-				activeForm[key] = data[key];
-			});
-			this.activeForm = activeForm;
-		},
-	},
-};
+	const {openSideModal} = useModal();
+	const {apiUrl} = useApiUrl(`stats/sushi/${report.Path}`);
+
+	openSideModal(CounterReportsEditModal, {
+		title: t('manager.statistics.counterR5Report.settings'),
+		submitAction: apiUrl,
+		activeForm,
+	});
+}
 </script>
 
 <style lang="less">
 @import '../../../styles/_import';
-
-.counterReportsListPanel {
-	.listPanel__itemTitle {
-		font-weight: @normal;
-	}
-}
 </style>
diff --git a/src/pages/counter/CounterReportsPage.vue b/src/pages/counter/CounterReportsPage.vue
index 7d810d083..fa75c8b15 100644
--- a/src/pages/counter/CounterReportsPage.vue
+++ b/src/pages/counter/CounterReportsPage.vue
@@ -23,7 +23,7 @@ import PanelSection from '@/components/Panel/PanelSection.vue';
 import CounterReportsListPanel from '@/components/ListPanel/counter/CounterReportsListPanel.vue';
 
 defineProps({
-	counterReportsListPanel: {type: Array, required: true},
+	counterReportsListPanel: {type: Object, required: true},
 	usageNotPossible: {type: Boolean, required: true},
 	title: {type: String, required: true},
 	description: {type: String, required: true},

From cfd12e63f9a2c2b528a032a158a3cefc46e82703 Mon Sep 17 00:00:00 2001
From: Bozana Bokan <bozana.bokan@posteo.net>
Date: Wed, 9 Oct 2024 15:05:30 +0200
Subject: [PATCH 09/11] move counter list panel components to
 pages/counter/components/

---
 src/pages/counter/CounterReportsPage.vue                        | 2 +-
 .../counter/components}/CounterReportsEditModal.vue             | 0
 .../counter/components}/CounterReportsListPanel.vue             | 0
 3 files changed, 1 insertion(+), 1 deletion(-)
 rename src/{components/ListPanel/counter => pages/counter/components}/CounterReportsEditModal.vue (100%)
 rename src/{components/ListPanel/counter => pages/counter/components}/CounterReportsListPanel.vue (100%)

diff --git a/src/pages/counter/CounterReportsPage.vue b/src/pages/counter/CounterReportsPage.vue
index fa75c8b15..5c86cf7ac 100644
--- a/src/pages/counter/CounterReportsPage.vue
+++ b/src/pages/counter/CounterReportsPage.vue
@@ -20,7 +20,7 @@
 <script setup>
 import Panel from '@/components/Panel/Panel.vue';
 import PanelSection from '@/components/Panel/PanelSection.vue';
-import CounterReportsListPanel from '@/components/ListPanel/counter/CounterReportsListPanel.vue';
+import CounterReportsListPanel from './components/CounterReportsListPanel.vue';
 
 defineProps({
 	counterReportsListPanel: {type: Object, required: true},
diff --git a/src/components/ListPanel/counter/CounterReportsEditModal.vue b/src/pages/counter/components/CounterReportsEditModal.vue
similarity index 100%
rename from src/components/ListPanel/counter/CounterReportsEditModal.vue
rename to src/pages/counter/components/CounterReportsEditModal.vue
diff --git a/src/components/ListPanel/counter/CounterReportsListPanel.vue b/src/pages/counter/components/CounterReportsListPanel.vue
similarity index 100%
rename from src/components/ListPanel/counter/CounterReportsListPanel.vue
rename to src/pages/counter/components/CounterReportsListPanel.vue

From 8d962a04a08bb4b6279193e64115cdca7363dc02 Mon Sep 17 00:00:00 2001
From: Bozana Bokan <bozana.bokan@posteo.net>
Date: Mon, 14 Oct 2024 14:24:57 +0200
Subject: [PATCH 10/11] changes according to the third review

---
 src/pages/counter/CounterReportsPage.vue      | 21 +++++-----
 .../components/CounterReportsListPanel.vue    | 38 +++++--------------
 2 files changed, 20 insertions(+), 39 deletions(-)

diff --git a/src/pages/counter/CounterReportsPage.vue b/src/pages/counter/CounterReportsPage.vue
index 5c86cf7ac..50dd0228e 100644
--- a/src/pages/counter/CounterReportsPage.vue
+++ b/src/pages/counter/CounterReportsPage.vue
@@ -1,15 +1,13 @@
 <template>
 	<h1 class="app__pageHeading">
-		{{ title }}
+		{{ t('manager.statistics.counterR5Reports') }}
 	</h1>
-	<p v-html="description" />
-	<Notification
-		v-if="usageNotPossible"
-		type="warning"
-		class="pkpNotification--backendPage__header"
-	>
-		{{ t('manager.statistics.counterR5Reports.usageNotPossible') }}
-	</Notification>
+	<p v-html="t('manager.statistics.counterR5Reports.description')" />
+	<div class="mb-4">
+		<Notification v-if="usageNotPossible" type="warning">
+			{{ t('manager.statistics.counterR5Reports.usageNotPossible') }}
+		</Notification>
+	</div>
 	<Panel>
 		<PanelSection>
 			<CounterReportsListPanel v-bind="counterReportsListPanel" @set="set" />
@@ -21,11 +19,12 @@
 import Panel from '@/components/Panel/Panel.vue';
 import PanelSection from '@/components/Panel/PanelSection.vue';
 import CounterReportsListPanel from './components/CounterReportsListPanel.vue';
+import {useLocalize} from '@/composables/useLocalize';
+
+const {t} = useLocalize();
 
 defineProps({
 	counterReportsListPanel: {type: Object, required: true},
 	usageNotPossible: {type: Boolean, required: true},
-	title: {type: String, required: true},
-	description: {type: String, required: true},
 });
 </script>
diff --git a/src/pages/counter/components/CounterReportsListPanel.vue b/src/pages/counter/components/CounterReportsListPanel.vue
index aba499d45..da0e2e170 100644
--- a/src/pages/counter/components/CounterReportsListPanel.vue
+++ b/src/pages/counter/components/CounterReportsListPanel.vue
@@ -34,7 +34,7 @@ import {useModal} from '@/composables/useModal';
 import {useFetch} from '@/composables/useFetch';
 import {useApiUrl} from '@/composables/useApiUrl';
 import {useLocalize} from '@/composables/useLocalize';
-import {ref, onMounted} from 'vue';
+import {ref, computed} from 'vue';
 
 const {t} = useLocalize();
 
@@ -44,33 +44,19 @@ const props = defineProps({
 	title: {type: String, required: true},
 });
 
-const items = ref([]);
-const isLoadingItems = ref(false);
+const items = computed(() => data.value || []);
 const activeForm = ref(null);
 const activeFormTitle = ref('');
 
-onMounted(() => {
-	/* Load the items */
-	getItems();
+const {apiUrl} = useApiUrl(`stats/sushi/reports`);
+const {
+	data,
+	fetch,
+	isLoading: isLoadingItems,
+} = useFetch(apiUrl, {
+	method: 'GET',
 });
-
-/**
- * Get the list of items (COUNTER R5 reports) from the server
- */
-async function getItems() {
-	isLoadingItems.value = true;
-
-	const {apiUrl} = useApiUrl(`stats/sushi/reports`);
-	const {data, isSuccess, fetch} = useFetch(apiUrl, {
-		method: 'GET',
-	});
-	await fetch();
-
-	if (isSuccess) {
-		items.value = data.value;
-	}
-	isLoadingItems.value = false;
-}
+fetch();
 
 /**
  * Open the modal to edit an item
@@ -96,7 +82,3 @@ function openEditModal(id) {
 	});
 }
 </script>
-
-<style lang="less">
-@import '../../../styles/_import';
-</style>

From c551c55604938c8627ebd31b2ea53bf0db379851 Mon Sep 17 00:00:00 2001
From: Bozana Bokan <bozana.bokan@posteo.net>
Date: Tue, 15 Oct 2024 08:55:03 +0200
Subject: [PATCH 11/11] fix storybook failure

---
 src/composables/useForm.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/composables/useForm.js b/src/composables/useForm.js
index f0d2ef049..843ee8fd7 100644
--- a/src/composables/useForm.js
+++ b/src/composables/useForm.js
@@ -30,7 +30,7 @@ function mapFromSelectedToValue(selected) {
 	return selected.map((iv) => iv.value);
 }
 
-export function useForm(_form, {customSubmit}) {
+export function useForm(_form, {customSubmit} = {}) {
 	const form = ref(_form);
 
 	if (customSubmit) {