From aab3d818a9b3074aad92e666dbae7dee01c4c618 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Wed, 3 Jul 2024 17:49:16 +0200
Subject: [PATCH] pkp/pkp-lib#9658 Add initial implementation of FormDisplay
 component

---
 .../FormDisplay/FieldSelectDisplay.vue        |  29 ++
 .../FormDisplay/FieldTextDisplay.vue          |  16 +
 src/components/FormDisplay/FormDisplay.mdx    |  15 +
 .../FormDisplay/FormDisplay.stories.js        | 296 ++++++++++++++++++
 src/components/FormDisplay/FormDisplay.vue    |  26 ++
 .../FormDisplay/FormDisplayItemBasic.vue      |  14 +
 6 files changed, 396 insertions(+)
 create mode 100644 src/components/FormDisplay/FieldSelectDisplay.vue
 create mode 100644 src/components/FormDisplay/FieldTextDisplay.vue
 create mode 100644 src/components/FormDisplay/FormDisplay.mdx
 create mode 100644 src/components/FormDisplay/FormDisplay.stories.js
 create mode 100644 src/components/FormDisplay/FormDisplay.vue
 create mode 100644 src/components/FormDisplay/FormDisplayItemBasic.vue

diff --git a/src/components/FormDisplay/FieldSelectDisplay.vue b/src/components/FormDisplay/FieldSelectDisplay.vue
new file mode 100644
index 000000000..724659cff
--- /dev/null
+++ b/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>
diff --git a/src/components/FormDisplay/FieldTextDisplay.vue b/src/components/FormDisplay/FieldTextDisplay.vue
new file mode 100644
index 000000000..623d15d5f
--- /dev/null
+++ b/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>
diff --git a/src/components/FormDisplay/FormDisplay.mdx b/src/components/FormDisplay/FormDisplay.mdx
new file mode 100644
index 000000000..7763416b7
--- /dev/null
+++ b/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
diff --git a/src/components/FormDisplay/FormDisplay.stories.js b/src/components/FormDisplay/FormDisplay.stories.js
new file mode 100644
index 000000000..9e76e3c78
--- /dev/null
+++ b/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: {},
+		},
+	},
+};
diff --git a/src/components/FormDisplay/FormDisplay.vue b/src/components/FormDisplay/FormDisplay.vue
new file mode 100644
index 000000000..e0f37b98d
--- /dev/null
+++ b/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>
diff --git a/src/components/FormDisplay/FormDisplayItemBasic.vue b/src/components/FormDisplay/FormDisplayItemBasic.vue
new file mode 100644
index 000000000..b64b67345
--- /dev/null
+++ b/src/components/FormDisplay/FormDisplayItemBasic.vue
@@ -0,0 +1,14 @@
+<template>
+	<component :is="headingElement" class="text-base-normal text-secondary">
+		{{ heading }}
+	</component>
+	<p class="pt-2 text-lg-normal">{{ value }}</p>
+</template>
+
+<script setup>
+defineProps({
+	headingElement: {required: true, type: String},
+	heading: {type: String, required: true},
+	value: {type: String, required: false, default: '-'},
+});
+</script>