Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support setting default language on all language selects #103

Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 0 additions & 12 deletions oarepo_ui/ext.py
Original file line number Diff line number Diff line change
@@ -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)
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
@@ -20,7 +20,6 @@ export const I18nRichInputField = ({
<GroupField fieldPath={fieldPath} optimized>
<LanguageSelectField
fieldPath={`${fieldPath}.lang`}
placeholder=""
required
width={lngFieldWidth}
usedLanguages={usedLanguages}
@@ -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={
Original file line number Diff line number Diff line change
@@ -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,9 +13,9 @@ export const LanguageSelectField = ({
placeholder,
clearable,
usedLanguages,
value,
...uiProps
}) => {
const { values } = useFormikContext();

return (
<LocalVocabularySelectField
@@ -32,7 +31,6 @@ export const LanguageSelectField = ({
onChange={({ e, data, formikProps }) => {
formikProps.form.setFieldValue(fieldPath, data.value);
}}
value={getIn(values, fieldPath, multiple ? [] : '')}
{...uiProps}
/>
);
Original file line number Diff line number Diff line change
@@ -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,
@@ -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} />
@@ -52,7 +66,7 @@ export const MultilingualTextInput = ({
editorConfig={editorConfig}
optimized
required={required}
usedLanguages={array.map((v) => v.lang)}
usedLanguages={usedLanguages}
lngFieldWidth={lngFieldWidth}
{...uiProps}
/>
@@ -62,7 +76,7 @@ export const MultilingualTextInput = ({
label={textFieldLabel}
labelIcon={textFieldIcon}
required={required}
usedLanguages={array.map((v) => v.lang)}
usedLanguages={usedLanguages}
lngFieldWidth={lngFieldWidth}
{...uiProps}
/>
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
@@ -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";
@@ -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"
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
@@ -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",
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