From 4015e9543f2dfbc24824c7b91aa58784f023cce9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Mon, 29 Jan 2024 10:01:39 +0100
Subject: [PATCH] pkp/pkp-lib#9527 Add FieldControlledVocab to storybook

---
 .storybook/preview.js                         |  1 +
 .../Form/fields/FieldControlledVocab.mdx      | 14 ++++
 .../fields/FieldControlledVocab.stories.js    | 80 +++++++++++++++++++
 src/mocks/keywords.json                       | 39 +++++++++
 4 files changed, 134 insertions(+)
 create mode 100644 src/components/Form/fields/FieldControlledVocab.mdx
 create mode 100644 src/components/Form/fields/FieldControlledVocab.stories.js
 create mode 100644 src/mocks/keywords.json

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 4740f1920..276a9c0b8 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -37,6 +37,7 @@ const pinia = createPinia();
 
 // Initialize MSW
 initialize({
+	onUnhandledRequest: 'bypass',
 	/** To be migrated to msw2 if neede */
 	/*onUnhandledRequest: ({method, url}) => {
 		if (url.pathname.includes('://mock/')) {
diff --git a/src/components/Form/fields/FieldControlledVocab.mdx b/src/components/Form/fields/FieldControlledVocab.mdx
new file mode 100644
index 000000000..44546c8a4
--- /dev/null
+++ b/src/components/Form/fields/FieldControlledVocab.mdx
@@ -0,0 +1,14 @@
+import {Primary, Controls, Stories, Meta, ArgTypes} from '@storybook/blocks';
+
+import * as FieldControlledVocabStories from './FieldControlledVocab.stories.js';
+
+<Meta of={FieldControlledVocabStories} />
+
+# FieldControlledVocab
+
+## Usage
+
+This is an implementation of [FieldBaseAutosuggest](#/component/Form/fields/FieldBaseAutosuggest). Used for example for keywords, where it fetches list of keywords from the api, but allow to add additional keywords as well.
+
+<Primary />
+<Controls />
diff --git a/src/components/Form/fields/FieldControlledVocab.stories.js b/src/components/Form/fields/FieldControlledVocab.stories.js
new file mode 100644
index 000000000..b9d20e943
--- /dev/null
+++ b/src/components/Form/fields/FieldControlledVocab.stories.js
@@ -0,0 +1,80 @@
+import {http, HttpResponse} from 'msw';
+import FieldControlledVocab from './FieldControlledVocab.vue';
+import FieldBaseMock from '../mocks/field-base';
+import FieldBaseAutosuggest from '../mocks/field-autosuggest';
+
+import KeywordsMock from '@/mocks/keywords.json';
+
+export default {
+	title: 'Forms/FieldControlledVocab',
+	component: FieldControlledVocab,
+	render: (args) => ({
+		components: {FieldControlledVocab},
+		setup() {
+			function change(name, prop, newValue, localeKey) {
+				if (localeKey) {
+					args[prop][localeKey] = newValue;
+				} else {
+					args[prop] = newValue;
+				}
+			}
+
+			return {args, change};
+		},
+		template: `
+			<FieldControlledVocab v-bind="args" @change="change" />
+		`,
+	}),
+};
+
+export const Base = {
+	args: {
+		...FieldBaseMock,
+		...FieldBaseAutosuggest,
+		label: 'Keywords',
+		/*selected: [
+			{value: 'keyword1', label: 'keyword1'},
+			{value: 'keyword2', label: 'keyword2'},
+		],
+
+		//value: ['keyword1', 'keyword2'],
+		value: ['keyword1', 'keyword2'],*/
+
+		// multi
+		value: {en: ['keyword1', 'keyword2']},
+		selected: {
+			en: [
+				{value: 'keyword1', label: 'keyword1'},
+				{value: 'keyword2', label: 'keyword2'},
+			],
+		},
+		isMultilingual: true,
+		localeKey: 'en',
+
+		apiUrl:
+			'https://mock/index.php/publicknowledge/api/v1/vocabs?vocab=submissionKeyword&locale=en',
+		/*selected: [
+			{
+				value: 1,
+				label: 'Articles',
+			},
+		],*/
+	},
+	parameters: {
+		docs: {
+			story: {
+				height: '300px',
+			},
+		},
+		msw: {
+			handlers: [
+				http.get(
+					'https://mock/index.php/publicknowledge/api/v1/vocabs?vocab=submissionKeyword&locale=en',
+					async () => {
+						return HttpResponse.json(KeywordsMock);
+					},
+				),
+			],
+		},
+	},
+};
diff --git a/src/mocks/keywords.json b/src/mocks/keywords.json
new file mode 100644
index 000000000..c202296f9
--- /dev/null
+++ b/src/mocks/keywords.json
@@ -0,0 +1,39 @@
+[
+	"21st Century",
+	"Alberta",
+	"cattle",
+	"citizenship",
+	"Common pool resource",
+	"common property",
+	"Computer Skills",
+	"Culture",
+	"Development",
+	"Diversity",
+	"education",
+	"Egalitarianism",
+	"employees",
+	"engineering education",
+	"food security",
+	"Gender",
+	"Goverance",
+	"Integrating Technology",
+	"intellectual developments",
+	"Language",
+	"Multi-Level Institutions",
+	"Multiethnic",
+	"Multilingual",
+	"National",
+	"Participatory Pedagogy",
+	"pigs",
+	"Professional Development",
+	"Provincial",
+	"Self-Organization",
+	"service learning",
+	"Social Transformation",
+	"survey",
+	"Survey",
+	"sustainability",
+	"Test keyword 1",
+	"Test keyword 2",
+	"water"
+]