pkp/pkp-lib#9658 Add initial implementation of FormDisplay component (p…

…kp#378)

src/components/FormDisplay/FieldSelectDisplay.vue

@@ -0,0 +1,29 @@
+<template>
+	<FormDisplayItemBasic
+		:heading-element="headingElement"
+		:heading="field.label"
+		:value="value"
+	/>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import FormDisplayItemBasic from './FormDisplayItemBasic.vue';
+
+const props = defineProps({
+	field: {type: Object, required: true},
+	headingElement: {required: true, type: String},
+});
+
+const value = computed(() => {
+	if (props.field.value) {
+		const selectedOption = props.field.options.find(
+			(option) => option.value === props.field.value,
+		);
+		if (selectedOption) {
+			return selectedOption.label;
+		}
+	}
+	return '-';
+});
+</script>

src/components/FormDisplay/FieldTextDisplay.vue

@@ -0,0 +1,16 @@
+<template>
+	<FormDisplayItemBasic
+		:heading-element="headingElement"
+		:heading="field.label"
+		:value="field.value"
+	/>
+</template>
+
+<script setup>
+import FormDisplayItemBasic from './FormDisplayItemBasic.vue';
+
+defineProps({
+	field: {type: Object, required: true},
+	headingElement: {required: true, type: String},
+});
+</script>

src/components/FormDisplay/FormDisplay.mdx

@@ -0,0 +1,15 @@
+import {Primary, Controls, Stories, Meta, Description} from '@storybook/blocks';
+
+import * as FormDisplayStories from './FormDisplay.stories.js';
+
+<Meta of={FormDisplayStories} />
+
+# FormDisplay
+
+Purpose of this component is to present selected values of given form
+
+## WIP
+
+This is initial version which supports some specific use cases. Full implementation that would cover wide range of forms will likely be done as part of Form framework overhaul in 3.6.
+
+Currently supported fields (none multilingual) - FieldText, FieldSelect

src/components/FormDisplay/FormDisplay.stories.js

@@ -0,0 +1,296 @@
+import FormDisplay from './FormDisplay.vue';
+import {useForm} from '@/composables/useForm';
+import {ref} from 'vue';
+export default {
+	title: 'Components/FormDisplay',
+	component: FormDisplay,
+	render: (args) => ({
+		components: {FormDisplay},
+		setup() {
+			const {connectWithPayload} = useForm(args.form);
+			const payload = ref({
+				givenName: 'Jarda',
+				familyName: 'Kotesovec',
+				affiliation: 'PKP',
+				country: 'CA',
+			});
+			connectWithPayload(payload);
+			return {args};
+		},
+		template: '<FormDisplay v-bind="args.form"></FormDisplay>',
+	}),
+};
+
+export const Base = {
+	args: {
+		form: {
+			id: 'userDetails',
+			method: 'POST',
+			action: 'http://localhost/ojs/index.php/publicknowledge/api/v1/users',
+			fields: [
+				{
+					name: 'givenName',
+					component: 'field-text',
+					label: 'Given Name',
+					groupId: 'default',
+					isRequired: true,
+					isMultilingual: false,
+					description:
+						'Also known as a forename or the first name, it is tha part of a personal name that identifies a preson',
+					value: null,
+					inputType: 'text',
+					optIntoEdit: false,
+					optIntoEditLabel: '',
+					size: 'large',
+					prefix: '',
+				},
+				{
+					name: 'familyName',
+					component: 'field-text',
+					label: 'Family Name',
+					groupId: 'default',
+					isRequired: true,
+					isMultilingual: false,
+					description:
+						"A surname, family name, or last name is the mostly  hereditary portion of one's personal name that indicates one's family",
+					value: null,
+					inputType: 'text',
+					optIntoEdit: false,
+					optIntoEditLabel: '',
+					size: 'large',
+					prefix: '',
+				},
+				{
+					name: 'affiliation',
+					component: 'field-text',
+					label: 'Affiliation',
+					groupId: 'default',
+					isRequired: true,
+					isMultilingual: false,
+					description: 'This is the institute you are affiliated with',
+					value: null,
+					inputType: 'text',
+					optIntoEdit: false,
+					optIntoEditLabel: '',
+					size: 'large',
+					prefix: '',
+				},
+				{
+					name: 'country',
+					component: 'field-select',
+					label: 'County of affiliation',
+					groupId: 'default',
+					isRequired: true,
+					isMultilingual: false,
+					description:
+						'This is a country in which the institute you are affiliated with is situated',
+					value: null,
+					inputType: 'text',
+					optIntoEdit: false,
+					optIntoEditLabel: '',
+					options: [
+						{
+							value: '',
+							label: 'Select a country',
+							disabled: true,
+						},
+						{
+							value: 'AF',
+							label: 'Afghanistan',
+						},
+						{
+							value: 'AL',
+							label: 'Albania',
+						},
+						{
+							value: 'DZ',
+							label: 'Algeria',
+						},
+						{
+							value: 'AS',
+							label: 'American Samoa',
+						},
+						{
+							value: 'AD',
+							label: 'Andorra',
+						},
+						{
+							value: 'AO',
+							label: 'Angola',
+						},
+						{
+							value: 'AI',
+							label: 'Anguilla',
+						},
+						{
+							value: 'AQ',
+							label: 'Antarctica',
+						},
+						{
+							value: 'AG',
+							label: 'Antigua and Barbuda',
+						},
+						{
+							value: 'AR',
+							label: 'Argentina',
+						},
+						{
+							value: 'AM',
+							label: 'Armenia',
+						},
+						{
+							value: 'AW',
+							label: 'Aruba',
+						},
+						{
+							value: 'AU',
+							label: 'Australia',
+						},
+						{
+							value: 'AT',
+							label: 'Austria',
+						},
+						{
+							value: 'AZ',
+							label: 'Azerbaijan',
+						},
+						{
+							value: 'BS',
+							label: 'Bahamas',
+						},
+						{
+							value: 'BH',
+							label: 'Bahrain',
+						},
+						{
+							value: 'BD',
+							label: 'Bangladesh',
+						},
+						{
+							value: 'BB',
+							label: 'Barbados',
+						},
+						{
+							value: 'BY',
+							label: 'Belarus',
+						},
+						{
+							value: 'BE',
+							label: 'Belgium',
+						},
+						{
+							value: 'BZ',
+							label: 'Belize',
+						},
+						{
+							value: 'BJ',
+							label: 'Benin',
+						},
+						{
+							value: 'BM',
+							label: 'Bermuda',
+						},
+						{
+							value: 'BT',
+							label: 'Bhutan',
+						},
+						{
+							value: 'BO',
+							label: 'Bolivia, Plurinational State of',
+						},
+						{
+							value: 'BQ',
+							label: 'Bonaire, Sint Eustatius and Saba',
+						},
+						{
+							value: 'BA',
+							label: 'Bosnia and Herzegovina',
+						},
+						{
+							value: 'BW',
+							label: 'Botswana',
+						},
+						{
+							value: 'BV',
+							label: 'Bouvet Island',
+						},
+						{
+							value: 'BR',
+							label: 'Brazil',
+						},
+						{
+							value: 'IO',
+							label: 'British Indian Ocean Territory',
+						},
+						{
+							value: 'BN',
+							label: 'Brunei Darussalam',
+						},
+						{
+							value: 'BG',
+							label: 'Bulgaria',
+						},
+						{
+							value: 'BF',
+							label: 'Burkina Faso',
+						},
+						{
+							value: 'BI',
+							label: 'Burundi',
+						},
+						{
+							value: 'CV',
+							label: 'Cabo Verde',
+						},
+						{
+							value: 'KH',
+							label: 'Cambodia',
+						},
+						{
+							value: 'CM',
+							label: 'Cameroon',
+						},
+						{
+							value: 'CA',
+							label: 'Canada',
+						},
+						{
+							value: '...',
+							label: '...',
+						},
+					],
+					size: 'large',
+					prefix: '',
+				},
+			],
+			groups: [
+				{
+					id: 'default',
+					pageId: 'default',
+				},
+			],
+			hiddenFields: {},
+			pages: [
+				{
+					id: 'default',
+					submitButton: {
+						label: 'Save',
+					},
+				},
+			],
+			primaryLocale: 'en',
+			visibleLocales: ['en'],
+			supportedFormLocales: [
+				{
+					key: 'en',
+					label: 'English',
+				},
+				{
+					key: 'fr_CA',
+					label: 'French',
+				},
+			],
+			errors: {},
+		},
+	},
+};

src/components/FormDisplay/FormDisplay.vue

@@ -0,0 +1,26 @@
+<template>
+	<div class="gap flex flex-col gap-y-10">
+		<div v-for="field in fields" :key="field.name">
+			<component
+				:is="FieldComponents[field.component] || `${field.component}-display`"
+				:field="field"
+				:heading-element="headingElement"
+			></component>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import FieldTextDisplay from './FieldTextDisplay.vue';
+import FieldSelectDisplay from './FieldSelectDisplay.vue';
+
+const FieldComponents = {
+	'field-text': FieldTextDisplay,
+	'field-select': FieldSelectDisplay,
+};
+
+defineProps({
+	fields: {type: Array, required: true},
+	headingElement: {required: false, default: 'h4', type: String},
+});
+</script>