pkp/pkp-lib#10692 Structured Citations refinments and use of forms fo…

src/components/Form/FormGroup.vue

@@ -154,6 +154,12 @@ export default {
 			validator: (val) => ['default', 'fullWidth'].includes(val),
 		},
 	},
+	emits: [
+		/** Emitted when a field prop changes. Payload: `(fieldName, propName, newValue, [localeKey])`. The `localeKey` will be null for fields that are not multilingual. This event is fired every time the `value` changes, so you should [debounce](https://www.npmjs.com/package/debounce) event callbacks that contain resource-intensive code. */
+		'change',
+		'set-errors',
+	],
+
 	computed: {
 		/**
 		 * All fields assigned to this group

src/components/Form/FormPage.vue

@@ -118,6 +118,11 @@ export default {
 		},
 		spacingVariant: String,
 	},
+	emits: [
+		/** Emitted when a field prop changes. Payload: `(fieldName, propName, newValue, [localeKey])`. The `localeKey` will be null for fields that are not multilingual. This event is fired every time the `value` changes, so you should [debounce](https://www.npmjs.com/package/debounce) event callbacks that contain resource-intensive code. */
+		'change',
+		'set-errors',
+	],
 	data() {
 		return {
 			hasRecentSave: false,
@@ -152,7 +157,7 @@ export default {
 
 		footerSpacingStyle() {
 			if (this.spacingVariant === 'fullWidth') {
-				return '!px-0 !py-12';
+				return '!px-0';
 			}
 			return '';
 		},

src/components/Form/fields/FieldAuthors.vue

@@ -24,40 +24,44 @@
 						<FieldText
 							:name="'givenName'"
 							:value="row.givenName"
+							:all-errors="{givenName: errors?.[index]?.givenName}"
 							@change="
 								(fieldName, _, fieldValue) => {
 									updateRow(index, fieldName, fieldValue);
 								}
 							"
-							:all-errors="{givenName: errors?.[index]?.givenName}"
 						/>
 					</TableCell>
 					<TableCell>
 						<FieldText
 							:name="'familyName'"
 							:value="row.familyName"
+							:all-errors="{familyName: errors?.[index]?.familyName}"
 							@change="
 								(fieldName, _, fieldValue) => {
 									updateRow(index, fieldName, fieldValue);
 								}
 							"
-							:all-errors="{familyName: errors?.[index]?.familyName}"
 						/>
 					</TableCell>
 					<TableCell>
 						<FieldText
 							:name="'orcid'"
 							:value="row.orcid"
+							:all-errors="{orcid: errors?.[index]?.orcid}"
 							@change="
 								(fieldName, _, fieldValue) => {
 									updateRow(index, fieldName, fieldValue);
 								}
 							"
-							:all-errors="{orcid: errors?.[index]?.orcid}"
 						/>
 					</TableCell>
 					<TableCell>
-						<PkpButton :is-link="true" :is-warnable="true" @click="deleteRow(index)">
+						<PkpButton
+							:is-link="true"
+							:is-warnable="true"
+							@click="deleteRow(index)"
+						>
 							{{ t('common.delete', []) }}
 						</PkpButton>
 					</TableCell>

src/components/Form/fields/FieldTextarea.vue

@@ -85,7 +85,9 @@ export default {
 			type: String,
 			default: 'normal',
 			validator: function (value) {
-				return ['small', 'normal', 'large'].indexOf(value) !== -1;
+				return (
+					['small', 'small-height', 'normal', 'large'].indexOf(value) !== -1
+				);
 			},
 		},
 	},
@@ -118,6 +120,10 @@ export default {
 	height: 8em;
 }
 
+.pkpFormField--small-height .pkpFormField--textarea__input {
+	height: 10em;
+}
+
 .pkpFormField--large .pkpFormField--textarea__input {
 	height: 40em;
 }

src/composables/useForm.js

@@ -365,7 +365,15 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 
 	function initEmptyForm(
 		formId,
-		{action, method, locales, showErrorFooter, spacingVariant} = {},
+		{
+			action,
+			method,
+			locales,
+			showErrorFooter,
+			spacingVariant,
+			onSuccess,
+			onSet,
+		} = {},
 	) {
 		if (!form.value) {
 			form.value = {};
@@ -379,6 +387,9 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 		form.value.locales = locales;
 		form.value.showErrorFooter = showErrorFooter;
 		form.value.spacingVariant = spacingVariant || 'default';
+		form.value.onSuccess = onSuccess || undefined;
+		form.value.onSet = onSet || set;
+
 		setMethod(method || 'POST');
 		setAction(action || 'emit');
 		setLocales(locales);
@@ -592,6 +603,25 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 		);
 	}
 
+	/**
+	 * Adds or updates a textarea field in the form.
+	 *
+	 * @param {string} fieldName - The name (or key) of the field.
+	 * @param {Object} fieldOptions - Configuration options for the field.
+	 * @param {Object} [opts] - Optional settings.
+	 * @param {boolean} [opts.override] - If true and the field already exists, it will be fully overridden.
+	 */
+	function addFieldHtml(fieldName, {...commonFields} = {}, opts) {
+		return addField(
+			fieldName,
+			{
+				component: 'field-html',
+				...commonFields,
+			},
+			opts,
+		);
+	}
+
 	/**
 	 * Adds or updates a FieldCheckbox in the form.
 	 * @param {string} fieldName - The name of the field
@@ -670,6 +700,7 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 		addFieldTextArea,
 		addFieldCheckbox,
 		addFieldComponent,
+		addFieldHtml,
 		getField,
 	};
 }

src/managers/CitationManager/CitationManager.mdx

@@ -1,9 +1,9 @@
 import {
-    Primary,
-    Controls,
-    Stories,
-    Meta,
-    ArgTypes
+	Primary,
+	Controls,
+	Stories,
+	Meta,
+	ArgTypes,
 } from '@storybook/addon-docs/blocks';
 import * as CitationManager from './CitationManager.stories.js';
 
@@ -25,7 +25,6 @@ The name of the Pinia store is `CitationManager`.
 
 - `getTopItems`: Add/Change items in the top right, where the `Upload / Select` button is.
 - `getItemActions`: Add/Change the list of actions that are displayed after clicking the 3 dots button.
-- `getItemPrimaryActions`: Add/Change one individual Action which is displayed in the ACTIONS column.
 - `getColumns`: Add/Change the columns being displayed in the table.
 - ...
 

src/managers/CitationManager/CitationManager.vue

@@ -1,72 +1,75 @@
 <template>
-	<CitationManagerMetadataLookup :checked="isChecked" @change="change" />
-	<CitationManagerAddRawCitations />
-	<CitationManagerStatusProcessed
-		v-if="citationStore.citationsMetadataLookup"
-	/>
 	<div>
-		<PkpButton
-			:is-disabled="!citationStore.canEditPublication"
-			:is-link="true"
-			@click="citationStore.citationDeleteAllCitations"
-		>
-			{{ t('submission.citations.structured.deleteAllLink') }}
-		</PkpButton>
-	</div>
-	<PkpTable aria-label="Structured References" :aria-describedby="headingId">
-		<template #label>
-			<h3 class="text-4 font-semibold">
-				{{ t('submission.citations.structured') }}
-			</h3>
-			<span class="text-lg-normal">
-				{{ t('submission.citations.structured.descriptionTable') }}
-			</span>
-		</template>
-		<template #top-controls>
-			<div class="flex gap-x-2">
-				<component
-					:is="Components[action.component] || action.component"
-					v-bind="action.props || {}"
-					v-for="(action, i) in citationStore.topItems"
-					:key="i"
-				></component>
-			</div>
-		</template>
-		<TableHeader>
-			<TableColumn
-				v-for="(column, i) in citationStore.columns"
-				:key="i"
-				:class="i > 0 ? '!w-16 !text-center' : ''"
+		<CitationManagerMetadataLookup />
+		<div class="pt-3">
+			<CitationManagerAddRawCitations />
+		</div>
+		<CitationManagerStatusProcessed
+			v-if="citationStore.citationsMetadataLookup"
+		/>
+		<div>
+			<PkpButton
+				:is-disabled="!citationStore.canEditPublication"
+				:is-link="true"
+				@click="citationStore.citationDeleteAllCitations"
 			>
-				<span v-if="column.isHeaderComponent">
-					<component :is="Components[column.header] || column.header" />
-				</span>
-				<span v-else :class="column.headerSrOnly ? 'sr-only' : ''">
-					{{ column.header }}
+				{{ t('submission.citations.structured.deleteAllLink') }}
+			</PkpButton>
+		</div>
+		<PkpTable :aria-label="t('submission.citations.structured')">
+			<template #label>
+				<h3 class="text-4 font-semibold">
+					{{ t('submission.citations.structured') }}
+				</h3>
+				<span class="text-lg-normal">
+					{{ t('submission.citations.structured.descriptionTable') }}
 				</span>
-			</TableColumn>
-		</TableHeader>
-		<TableBody
-			:empty-text="t('submission.citations.structured.emptyCitations')"
-		>
-			<TableRow
-				v-for="citation in citationStore.citationsFiltered"
-				:key="citation.id"
+			</template>
+			<template #top-controls>
+				<div class="flex gap-x-2">
+					<component
+						:is="Components[action.component] || action.component"
+						v-bind="action.props || {}"
+						v-for="(action, i) in citationStore.topItems"
+						:key="i"
+					></component>
+				</div>
+			</template>
+			<TableHeader>
+				<TableColumn
+					v-for="(column, i) in citationStore.columns"
+					:key="i"
+					:class="i > 0 ? '!w-16 !text-center' : ''"
+				>
+					<span v-if="column.isHeaderComponent">
+						<component :is="Components[column.header] || column.header" />
+					</span>
+					<span v-else :class="column.headerSrOnly ? 'sr-only' : ''">
+						{{ column.header }}
+					</span>
+				</TableColumn>
+			</TableHeader>
+			<TableBody
+				:empty-text="t('submission.citations.structured.emptyCitations')"
 			>
-				<component
-					:is="Components[column.component] || column.component"
-					v-for="(column, index) in citationStore.columns"
-					:key="index"
-					v-bind="citation"
-					:citation="citation"
-				></component>
-			</TableRow>
-		</TableBody>
-	</PkpTable>
+				<TableRow
+					v-for="citation in citationStore.citationsFiltered"
+					:key="citation.id"
+				>
+					<component
+						:is="Components[column.component] || column.component"
+						v-for="(column, index) in citationStore.columns"
+						:key="index"
+						v-bind="citation"
+						:citation="citation"
+					></component>
+				</TableRow>
+			</TableBody>
+		</PkpTable>
+	</div>
 </template>
 
 <script setup>
-import {computed, useId} from 'vue';
 import {useLocalize} from '@/composables/useLocalize';
 import PkpButton from '@/components/Button/Button.vue';
 import PkpTable from '@/components/Table/Table.vue';
@@ -86,8 +89,6 @@ import {useCitationManagerStore} from './citationManagerStore.js';
 
 const {t} = useLocalize();
 
-const headingId = useId();
-
 const Components = {
 	CitationManagerCellCitation,
 	CitationManagerCellToggle,
@@ -104,12 +105,4 @@ const props = defineProps({
 });
 
 const citationStore = useCitationManagerStore(props);
-
-const isChecked = computed(() => {
-	return citationStore.citationsMetadataLookup;
-});
-
-function change(checked) {
-	citationStore.citationsMetadataLookupChanged(checked);
-}
 </script>