From 18d913a66b8c5d8958f0e742a6d601806d1c6267 Mon Sep 17 00:00:00 2001 From: Miroslav Bauer Date: Fri, 3 Nov 2023 15:10:21 +0100 Subject: [PATCH 1/6] set default language on all language selects --- oarepo_ui/templates/oarepo_ui/javascript.html | 4 +--- .../components/LanguageSelectField/LanguageSelectField.jsx | 6 ++---- oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/theme.js | 3 +++ oarepo_ui/theme/webpack.py | 1 + 4 files changed, 7 insertions(+), 7 deletions(-) create mode 100644 oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/theme.js diff --git a/oarepo_ui/templates/oarepo_ui/javascript.html b/oarepo_ui/templates/oarepo_ui/javascript.html index 762d0744..70abc513 100644 --- a/oarepo_ui/templates/oarepo_ui/javascript.html +++ b/oarepo_ui/templates/oarepo_ui/javascript.html @@ -1,5 +1,3 @@ {% include "invenio_theme/javascript.html" %} - +{{ webpack['oarepo_ui_theme.js'] }} diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/LanguageSelectField/LanguageSelectField.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/LanguageSelectField/LanguageSelectField.jsx index a0481460..0d5d7ebf 100644 --- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/LanguageSelectField/LanguageSelectField.jsx +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/LanguageSelectField/LanguageSelectField.jsx @@ -3,7 +3,6 @@ import { FieldLabel } from "react-invenio-forms"; import { LocalVocabularySelectField } from "@js/oarepo_vocabularies"; import { i18next } from "@translations/oarepo_ui/i18next"; import PropTypes from "prop-types"; -import { getIn, useFormikContext } from "formik"; export const LanguageSelectField = ({ fieldPath, @@ -14,10 +13,9 @@ export const LanguageSelectField = ({ placeholder, clearable, usedLanguages, + value, ...uiProps }) => { - const { values } = useFormikContext(); - return ( { formikProps.form.setFieldValue(fieldPath, data.value); }} - value={getIn(values, fieldPath, multiple ? [] : '')} + defaultValue="en" {...uiProps} /> ); diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/theme.js b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/theme.js new file mode 100644 index 00000000..66b5dba6 --- /dev/null +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/theme.js @@ -0,0 +1,3 @@ +import $ from "jquery"; + +$('.ui.multilingual-tabs>.menu>.item').tab(); \ No newline at end of file diff --git a/oarepo_ui/theme/webpack.py b/oarepo_ui/theme/webpack.py index 18c24db0..eb7b4b0d 100644 --- a/oarepo_ui/theme/webpack.py +++ b/oarepo_ui/theme/webpack.py @@ -29,6 +29,7 @@ "oarepo_ui": "./js/oarepo_ui/index.js", "oarepo_ui_search": "./js/oarepo_ui/search/index.js", "oarepo_ui_forms": "./js/oarepo_ui/forms/index.js", + "oarepo_ui_theme": "./js/oarepo_ui/theme.js" }, dependencies={ "@tanstack/react-query": "^4.32.0", From e6ee6f198dd254b3950f786673b79916ea6e72f9 Mon Sep 17 00:00:00 2001 From: Miroslav Bauer Date: Fri, 3 Nov 2023 17:34:58 +0100 Subject: [PATCH 2/6] drop monkeypatch component --- oarepo_ui/ext.py | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/oarepo_ui/ext.py b/oarepo_ui/ext.py index 2210bc12..578617b3 100644 --- a/oarepo_ui/ext.py +++ b/oarepo_ui/ext.py @@ -97,18 +97,6 @@ def catalog(self): return self._catalog_config(self._catalog, self.templates.jinja_env) def _catalog_config(self, catalog, env): - - # monkeypatch component - see https://github.com/jpsca/jinjax/issues/32 - from markupsafe import Markup - from jinjax.component import Component - - def render(self, **kwargs): - assert self.tmpl, f"Component {self.name} has no template" - return Markup(self.tmpl.render(**kwargs).strip()) - render.__name__ = 'render_patched_by_oarepo_ui' - Component.render = render - # monkeypatch end - context = {} env.policies.setdefault("json.dumps_kwargs", {}).setdefault("default", str) self.app.update_template_context(context) From f8722065f032fbd7c9593c68761ca0e35db32135 Mon Sep 17 00:00:00 2001 From: Miroslav Bauer Date: Fri, 3 Nov 2023 17:53:57 +0100 Subject: [PATCH 3/6] use form default locale for language select field default --- .../components/LanguageSelectField/LanguageSelectField.jsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/LanguageSelectField/LanguageSelectField.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/LanguageSelectField/LanguageSelectField.jsx index 0d5d7ebf..2d5b7adc 100644 --- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/LanguageSelectField/LanguageSelectField.jsx +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/LanguageSelectField/LanguageSelectField.jsx @@ -3,6 +3,7 @@ import { FieldLabel } from "react-invenio-forms"; import { LocalVocabularySelectField } from "@js/oarepo_vocabularies"; import { i18next } from "@translations/oarepo_ui/i18next"; import PropTypes from "prop-types"; +import { useFormConfig } from "@js/oarepo_ui"; export const LanguageSelectField = ({ fieldPath, @@ -16,6 +17,10 @@ export const LanguageSelectField = ({ value, ...uiProps }) => { + const { + formConfig: { default_locale }, + } = useFormConfig(); + return ( { formikProps.form.setFieldValue(fieldPath, data.value); }} - defaultValue="en" + defaultValue={multiple ? [default_locale] : default_locale} {...uiProps} /> ); From 7b1bb0d21c7328f2ce0c00ae5d05a86a2be8be7a Mon Sep 17 00:00:00 2001 From: Miroslav Bauer Date: Fri, 10 Nov 2023 09:17:25 +0100 Subject: [PATCH 4/6] add useFormFieldValue hook & use in lang fields --- .../I18nRichInputField/I18nRichInputField.jsx | 2 -- .../LanguageSelectField.jsx | 5 ---- .../MultilingualTextInput.jsx | 21 +++++++++++-- .../semantic-ui/js/oarepo_ui/forms/hooks.js | 30 +++++++++++++++---- 4 files changed, 43 insertions(+), 15 deletions(-) diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/I18nRichInputField.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/I18nRichInputField.jsx index 06e7d413..3ca2101b 100644 --- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/I18nRichInputField.jsx +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/I18nRichInputField.jsx @@ -20,7 +20,6 @@ export const I18nRichInputField = ({ { - const { - formConfig: { default_locale }, - } = useFormConfig(); return ( { formikProps.form.setFieldValue(fieldPath, data.value); }} - defaultValue={multiple ? [default_locale] : default_locale} {...uiProps} /> ); diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/MultilingualTextInput/MultilingualTextInput.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/MultilingualTextInput/MultilingualTextInput.jsx index 050ac034..49a22e91 100644 --- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/MultilingualTextInput/MultilingualTextInput.jsx +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/MultilingualTextInput/MultilingualTextInput.jsx @@ -6,8 +6,12 @@ import { I18nTextInputField, I18nRichInputField, ArrayFieldItem, + useDefaultLocale, + useFormFieldValue, } from "@js/oarepo_ui"; import { i18next } from "@translations/oarepo_ui/i18next"; +import { useFormikContext, getIn } from "formik"; +import _get from "lodash/get"; export const MultilingualTextInput = ({ fieldPath, @@ -24,10 +28,21 @@ export const MultilingualTextInput = ({ lngFieldWidth, ...uiProps }) => { + const { defaultLocale } = useDefaultLocale(); + const { values } = useFormikContext(); + const { usedSubValues, defaultNewValue } = useFormFieldValue({ + defaultValue: defaultLocale, + fieldPath, + subValuesPath: "lang", + }); + const value = getIn(values, fieldPath); + const usedLanguages = usedSubValues(value) + const newValue = defaultNewValue(emptyNewInput, usedLanguages); + return ( @@ -52,7 +67,7 @@ export const MultilingualTextInput = ({ editorConfig={editorConfig} optimized required={required} - usedLanguages={array.map((v) => v.lang)} + usedLanguages={usedLanguages} lngFieldWidth={lngFieldWidth} {...uiProps} /> @@ -62,7 +77,7 @@ export const MultilingualTextInput = ({ label={textFieldLabel} labelIcon={textFieldIcon} required={required} - usedLanguages={array.map((v) => v.lang)} + usedLanguages={usedLanguages} lngFieldWidth={lngFieldWidth} {...uiProps} /> diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/hooks.js b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/hooks.js index c28b373d..ab35fe27 100644 --- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/hooks.js +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/hooks.js @@ -1,7 +1,9 @@ import * as React from "react"; import { FormConfigContext } from "./contexts"; import { OARepoDepositApiClient, OARepoDepositSerializer } from "../api"; -import { useFormikContext } from "formik"; +import { useFormikContext, getIn } from "formik"; +import _get from "lodash/get" +import _set from "lodash/set" import _omit from "lodash/omit"; import _pick from "lodash/pick"; import _isEmpty from "lodash/isEmpty"; @@ -18,6 +20,14 @@ export const useFormConfig = () => { return context; }; +export const useDefaultLocale = () => { + const { + formConfig: { default_locale }, + } = useFormConfig(); + + return { defaultLocale: default_locale } +} + export const useVocabularyOptions = (vocabularyType) => { const { formConfig: { vocabularies }, @@ -35,6 +45,16 @@ export const useConfirmationModal = () => { return { isModalOpen, handleCloseModal, handleOpenModal }; }; +export const useFormFieldValue = ({ fieldPath, subValuesPath, defaultValue, subValuesUnique = true }) => { + const usedSubValues = (value) => + value && typeof Array.isArray(value) + ? value.map((val) => _get(val, "lang")) || [] + : []; + const defaultNewValue = (initialVal, usedSubValues = []) => _set({...initialVal}, subValuesPath, !usedSubValues?.includes(defaultValue) || !subValuesUnique ? defaultValue : "") + + return { usedSubValues, defaultNewValue } +} + export const useDepositApiClient = ( baseApiClient, serializer, @@ -71,7 +91,7 @@ export const useDepositApiClient = ( ? new baseApiClient(createUrl, recordSerializer) : new OARepoDepositApiClient(createUrl, recordSerializer); - async function save() { + async function save () { let response; setSubmitting(true); @@ -131,7 +151,7 @@ export const useDepositApiClient = ( } } - async function publish() { + async function publish () { // call save and if save returns false, exit const saveResult = await save(); if (!saveResult) return; @@ -176,11 +196,11 @@ export const useDepositApiClient = ( } } - async function read(recordUrl) { + async function read (recordUrl) { return await apiClient.readDraft({ self: recordUrl }); } - async function _delete(redirectUrl) { + async function _delete (redirectUrl) { if (!redirectUrl) throw new Error( "You must provide url where to be redirected after deleting a draft" From e8d602dad58b1a16c53db6e6946ecabeb9eb4ac2 Mon Sep 17 00:00:00 2001 From: Miroslav Bauer Date: Fri, 10 Nov 2023 09:19:55 +0100 Subject: [PATCH 5/6] chore(release): :bookmark: release version 5.0.80 --- setup.cfg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/setup.cfg b/setup.cfg index a1a64085..d45831c7 100644 --- a/setup.cfg +++ b/setup.cfg @@ -1,6 +1,6 @@ [metadata] name = oarepo-ui -version = 5.0.79 +version = 5.0.80 description = UI module for invenio 3.5+ long_description = file: README.md long_description_content_type = text/markdown From e96626e44d69bb3b5dae60a06865040ecef543fd Mon Sep 17 00:00:00 2001 From: Miroslav Bauer Date: Fri, 10 Nov 2023 09:25:52 +0100 Subject: [PATCH 6/6] remove unused imports & format --- .../MultilingualTextInput/MultilingualTextInput.jsx | 3 +-- .../theme/assets/semantic-ui/js/oarepo_ui/forms/hooks.js | 8 ++++---- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/MultilingualTextInput/MultilingualTextInput.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/MultilingualTextInput/MultilingualTextInput.jsx index 49a22e91..7bb552f9 100644 --- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/MultilingualTextInput/MultilingualTextInput.jsx +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/MultilingualTextInput/MultilingualTextInput.jsx @@ -11,7 +11,6 @@ import { } from "@js/oarepo_ui"; import { i18next } from "@translations/oarepo_ui/i18next"; import { useFormikContext, getIn } from "formik"; -import _get from "lodash/get"; export const MultilingualTextInput = ({ fieldPath, @@ -36,7 +35,7 @@ export const MultilingualTextInput = ({ subValuesPath: "lang", }); const value = getIn(values, fieldPath); - const usedLanguages = usedSubValues(value) + const usedLanguages = usedSubValues(value); const newValue = defaultNewValue(emptyNewInput, usedLanguages); return ( diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/hooks.js b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/hooks.js index ab35fe27..6149cb54 100644 --- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/hooks.js +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/hooks.js @@ -1,9 +1,9 @@ import * as React from "react"; import { FormConfigContext } from "./contexts"; import { OARepoDepositApiClient, OARepoDepositSerializer } from "../api"; -import { useFormikContext, getIn } from "formik"; -import _get from "lodash/get" -import _set from "lodash/set" +import { useFormikContext } from "formik"; +import _get from "lodash/get"; +import _set from "lodash/set"; import _omit from "lodash/omit"; import _pick from "lodash/pick"; import _isEmpty from "lodash/isEmpty"; @@ -50,7 +50,7 @@ export const useFormFieldValue = ({ fieldPath, subValuesPath, defaultValue, subV value && typeof Array.isArray(value) ? value.map((val) => _get(val, "lang")) || [] : []; - const defaultNewValue = (initialVal, usedSubValues = []) => _set({...initialVal}, subValuesPath, !usedSubValues?.includes(defaultValue) || !subValuesUnique ? defaultValue : "") + const defaultNewValue = (initialVal, usedSubValues = []) => _set({ ...initialVal }, subValuesPath, !usedSubValues?.includes(defaultValue) || !subValuesUnique ? defaultValue : "") return { usedSubValues, defaultNewValue } }