pkp/pkp-lib#9527 Add FieldControlledVocab to storybook

Author: jardakotesovec

.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/')) {

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 />

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);
+					},
+				),
+			],
+		},
+	},
+};

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"
+]