changes according to the second review

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,13 +15,16 @@ 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},
 	submitAction: {type: String, required: true},
 	activeForm: {type: Object, required: true},
 });
 
+const closeModal = inject('closeModal');
+
 /**
  * Get the report parameters
  *

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>

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},