storybook

src/components/Form/mocks/form-counter-report.js

@@ -0,0 +1,91 @@
+import Form from './form';
+import FieldTextTitle from './field-text-title';
+
+export default {
+	...Form,
+	id: 'example',
+	action: 'https://example.org/example',
+	fields: [
+		{
+			...FieldTextTitle,
+			value: {
+				en: '',
+				fr_CA: '',
+				ar: '',
+			},
+			groupId: 'default',
+		},
+		{
+			name: 'descriptionShort',
+			component: 'field-rich-textarea',
+			label: 'Short Description',
+			isMultilingual: true,
+			plugins: 'paste,link,noneditable',
+			toolbar: 'bold italic superscript subscript | link',
+			value: {
+				en: '',
+				fr_CA: '',
+				ar: '',
+			},
+			groupId: 'default',
+		},
+		{
+			name: 'description',
+			component: 'field-rich-textarea',
+			label: 'Description',
+			isMultilingual: true,
+			size: 'large',
+			plugins: 'paste,link,noneditable',
+			toolbar: 'bold italic superscript subscript | link',
+			value: {
+				en: '',
+				fr_CA: '',
+				ar: '',
+			},
+			groupId: 'default',
+		},
+		{
+			name: 'dateExpire',
+			component: 'field-text',
+			inputType: 'text',
+			label: 'Expiry Date',
+			description:
+				'The announcement will be displayed to readers until this date. Leave blank if the announcement should be displayed indefinitely.',
+			value: '',
+			groupId: 'default',
+		},
+		{
+			name: 'sendEmail',
+			component: 'field-options',
+			label: 'Send Email',
+			description: '',
+			type: 'checkbox',
+			value: false,
+			options: [
+				{
+					value: true,
+					label:
+						'Yes, I would like an email about this announcement to be sent to all registered users.',
+				},
+			],
+			groupId: 'default',
+		},
+	],
+	groups: [
+		{
+			id: 'default',
+			pageId: 'default',
+		},
+	],
+	supportedFormLocales: [
+		...Form.supportedFormLocales,
+		{
+			key: 'fr_CA',
+			label: 'Français (Canada)',
+		},
+		{
+			key: 'ar',
+			label: 'عربى',
+		},
+	],
+};

src/components/ListPanel/counter/CounterReportsEditModal.vue

@@ -0,0 +1,26 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ title }}
+		</template>
+		<SideModalLayoutBasic>
+			<PkpForm
+				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 PkpForm from '@/components/Form/Form.vue';
+
+defineProps({
+	title: {type: String, required: true},
+	activeForm: {type: Object, required: true},
+});
+const emit = defineEmits(['updateForm', 'formSuccess']);
+</script>

src/components/ListPanel/counter/CounterReportsListPanel.mdx

@@ -0,0 +1,14 @@
+import {Primary, Controls, Stories, Meta, ArgTypes} from '@storybook/blocks';
+
+import * as CounterReportsListPanelStories from './CounterReportsListPanel.stories.js';
+
+<Meta of={CounterReportsListPanelStories} />
+
+# CounterReportsListPanel
+
+## Usage
+
+Use this component to get COUNTER R5 TSV reports.
+
+<Primary />
+<ArgTypes />

src/components/ListPanel/counter/CounterReportsListPanel.stories.js

@@ -0,0 +1,50 @@
+import CounterReportsListPanel from './CounterReportsListPanel.vue';
+
+import CounterReportMock from '@/mocks/counterReport';
+import FormCounterReportMock from '@/components/Form/mocks/form-counter-report';
+
+export default {
+	title: 'ListPanel/CounterReportsListPanel',
+	component: CounterReportsListPanel,
+};
+
+const counterReports = [
+	{
+		...CounterReportMock,
+		Report_ID: 'PR',
+		begin_date: '2022-02-03',
+		end_date: '2024-07-17',
+		customer_id: 0,
+		metric_type: {
+			0: 'Total_Item_Investigations',
+			1: 'Unique_Item_Investigations',
+			2: 'Total_Item_Requests',
+			3: 'Unique_Item_Requests',
+		},
+	},
+];
+
+export const Base = {
+	render: (args) => ({
+		components: {CounterReportsListPanel},
+		setup() {
+			return {args};
+		},
+		template: `
+			<CounterReportsListPanel
+				v-bind="args"
+			/>
+		`,
+	}),
+
+	args: {
+		form: {...FormCounterReportMock},
+		items: [...counterReports],
+		itemsMax: counterReports.length,
+		title: 'Counter R5 Reports',
+		id: 'previewCounterReportsListPanel',
+		apiUrl: '',
+		editCounterReportLabel: 'Edit',
+		usagePossible: true,
+	},
+};

src/mocks/counterReport.js

@@ -0,0 +1,12 @@
+export default {
+	Report_ID: 'PR',
+	begin_date: '2022-02-03',
+	end_date: '2024-07-17',
+	customer_id: 0,
+	metric_type: {
+		0: 'Total_Item_Investigations',
+		1: 'Unique_Item_Investigations',
+		2: 'Total_Item_Requests',
+		3: 'Unique_Item_Requests',
+	},
+};