pkp/pkp-lib#10692 Structured Citations

src/components/Form/fields/FieldCitations.mdx

@@ -0,0 +1,17 @@
+import {Primary, Controls, Stories, Meta, ArgTypes} from '@storybook/blocks';
+
+import * as FieldCitationsStories from './FieldCitations.stories.js';
+
+<Meta of={FieldCitationsStories} />
+
+# FieldCitations
+
+## Usage
+
+A special component to maintain structured citations of publications.
+
+The `value` are an array of Citation objects.
+
+<Primary />
+<Controls />
+<Stories />

src/components/Form/fields/FieldCitations.stories.js

@@ -0,0 +1,28 @@
+import FieldCitations from './FieldCitations.vue';
+import FieldCitationsMock from '@/components/Form/mocks/field-citations.js';
+
+const args = {...FieldCitationsMock};
+
+export default {
+	title: 'Forms/FieldCitations',
+	component: FieldCitations,
+	args: {},
+	parameters: {},
+	render: (args) => ({
+		components: {FieldCitations},
+		setup() {
+			return {args};
+		},
+		template: `
+			<FieldCitations v-bind="args"/>`,
+	}),
+	decorators: [
+		() => ({
+			template: '<div style="height: 600px"><story/></div>',
+		}),
+	],
+};
+
+export const Base = {
+	args: {...FieldCitationsMock},
+};

src/components/Form/fields/FieldCitations.vue

@@ -0,0 +1,99 @@
+<template>
+	<div class="pkpFormField pkpFormField--citations">
+		<div class="pkpFormField__heading">
+			<label class="pkpFormFieldLabel">
+				user.citations
+			</label>
+		</div>
+		<div class="pkpFormField__description">
+			user.citations.description
+		</div>
+		<div class="pkpFormField__control pkpFormField--affiliations__control">
+			Structured Citations
+		</div>
+	</div>
+</template>
+
+<script setup>
+import {ref, computed, onMounted, watch, onBeforeUnmount} from 'vue';
+
+/** Define component props */
+const props = defineProps({
+	/** Field key used for form submission */
+	name: {
+		type: String,
+		default: null,
+	},
+	/** Current value of the field */
+	value: {
+		type: Array,
+		default: () => [],
+	},
+	/** Default locale of the form */
+	primaryLocale: {
+		type: String,
+		default: 'en',
+	},
+	/** Locale key for multilingual support */
+	localeKey: {
+		type: String,
+		default: '',
+	},
+	/** List of supported locales */
+	locales: {
+		type: Array,
+		default: () => [],
+	},
+	/** Object containing all form errors */
+	allErrors: {
+		type: Object,
+		default() {
+			return {};
+		},
+	},
+	/** Indicates if the field supports multiple languages */
+	isMultilingual: {
+		type: Boolean,
+		default: true,
+	},
+});
+
+/** Emits component events */
+const emit = defineEmits(['change', 'set-errors']);
+
+/** Stores the primary locale of the form */
+const primaryLocale = props.primaryLocale;
+
+/** Stores the list of supported locales */
+const locales = props.locales;
+
+/** Current value of the field, with a setter to emit changes */
+const currentValue = computed({
+	get: () => props.value,
+	set: (newVal) => emit('change', props.name, 'value', newVal),
+});
+
+/** Keys of supported locales */
+const supportedFormLocaleKeys = props.locales.map((language) => language.key);
+
+/** Default locale for the application */
+const defaultLocale = 'en';
+
+/** Computed property to determine error messages for the field */
+computed(() => {
+	if (!Object.keys(props.allErrors).includes(props.name)) {
+		return [];
+	}
+	let errors = props.allErrors[props.name];
+	if (props.isMultilingual && Object.keys(errors).includes(props.localeKey)) {
+		return errors[props.localeKey];
+	} else if (!props.isMultilingual) {
+		return errors;
+	}
+	return [];
+});
+</script>
+
+<style lang="less">
+@import '../../../styles/_import';
+</style>

src/components/Form/mocks/field-citations.js

@@ -0,0 +1,11 @@
+export default {
+	name: 'author-citations',
+	component: 'author-citations',
+	primaryLocale: 'en',
+	locales: [
+		{key: 'en', label: 'English'},
+		{key: 'fr_CA', label: 'French (Canada)'},
+		{key: 'de', label: 'German'},
+	],
+	value: [],
+};