Skip to content

Commit

Permalink
Merge pull request #103 from oarepo/mirekys/fe-28-all-multilingualtex…
Browse files Browse the repository at this point in the history
…tinputs-should-use-eng-as-default

Support setting default language on all language selects
  • Loading branch information
mirekys authored Nov 10, 2023
2 parents 4812472 + e96626e commit eb9ea3d
Show file tree
Hide file tree
Showing 9 changed files with 48 additions and 28 deletions.
12 changes: 0 additions & 12 deletions oarepo_ui/ext.py
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
4 changes: 1 addition & 3 deletions oarepo_ui/templates/oarepo_ui/javascript.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
{% include "invenio_theme/javascript.html" %}

<script>
jQuery('.ui.multilingual-tabs>.menu>.item').tab();
</script>
{{ webpack['oarepo_ui_theme.js'] }}
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ export const I18nRichInputField = ({
<GroupField fieldPath={fieldPath} optimized>
<LanguageSelectField
fieldPath={`${fieldPath}.lang`}
placeholder=""
required
width={lngFieldWidth}
usedLanguages={usedLanguages}
Expand All @@ -31,7 +30,6 @@ export const I18nRichInputField = ({
editorConfig={editorConfig}
// TODO: hacky fix for SUI alignment bug for case with
// field groups with empty field label on one of inputs

className={`${!label ? "mt-25" : ""}`}
fieldPath={`${fieldPath}.value`}
label={
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -14,9 +13,9 @@ export const LanguageSelectField = ({
placeholder,
clearable,
usedLanguages,
value,
...uiProps
}) => {
const { values } = useFormikContext();

return (
<LocalVocabularySelectField
Expand All @@ -32,7 +31,6 @@ export const LanguageSelectField = ({
onChange={({ e, data, formikProps }) => {
formikProps.form.setFieldValue(fieldPath, data.value);
}}
value={getIn(values, fieldPath, multiple ? [] : '')}
{...uiProps}
/>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,11 @@ import {
I18nTextInputField,
I18nRichInputField,
ArrayFieldItem,
useDefaultLocale,
useFormFieldValue,
} from "@js/oarepo_ui";
import { i18next } from "@translations/oarepo_ui/i18next";
import { useFormikContext, getIn } from "formik";

export const MultilingualTextInput = ({
fieldPath,
Expand All @@ -24,10 +27,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 (
<ArrayField
addButtonLabel={addButtonLabel}
defaultNewValue={emptyNewInput}
defaultNewValue={newValue}
fieldPath={fieldPath}
label={
<FieldLabel htmlFor={fieldPath} icon={labelIcon ?? ""} label={label} />
Expand All @@ -52,7 +66,7 @@ export const MultilingualTextInput = ({
editorConfig={editorConfig}
optimized
required={required}
usedLanguages={array.map((v) => v.lang)}
usedLanguages={usedLanguages}
lngFieldWidth={lngFieldWidth}
{...uiProps}
/>
Expand All @@ -62,7 +76,7 @@ export const MultilingualTextInput = ({
label={textFieldLabel}
labelIcon={textFieldIcon}
required={required}
usedLanguages={array.map((v) => v.lang)}
usedLanguages={usedLanguages}
lngFieldWidth={lngFieldWidth}
{...uiProps}
/>
Expand Down
28 changes: 24 additions & 4 deletions oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/hooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import * as React from "react";
import { FormConfigContext } from "./contexts";
import { OARepoDepositApiClient, OARepoDepositSerializer } from "../api";
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";
Expand All @@ -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 },
Expand All @@ -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,
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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"
Expand Down
3 changes: 3 additions & 0 deletions oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/theme.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import $ from "jquery";

$('.ui.multilingual-tabs>.menu>.item').tab();
1 change: 1 addition & 0 deletions oarepo_ui/theme/webpack.py
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion setup.cfg
Original file line number Diff line number Diff line change
@@ -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
Expand Down

0 comments on commit eb9ea3d

Please sign in to comment.