From e3021a51329a63e7453ad47d13912edbf74c97cb Mon Sep 17 00:00:00 2001
From: Miroslav Bauer <mirekys@users.noreply.github.com>
Date: Wed, 25 Oct 2023 16:02:58 +0200
Subject: [PATCH] pass used languages down to language select field

---
 .../I18nRichInputField/I18nRichInputField.jsx |  4 ++--
 .../I18nTextInputField/I18nTextInputField.jsx |  4 ++--
 .../LanguageSelectField.jsx                   | 23 +++++++++----------
 .../MultilingualTextInput.jsx                 |  6 ++---
 4 files changed, 18 insertions(+), 19 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 74f8ff28..06e7d413 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
@@ -12,8 +12,8 @@ export const I18nRichInputField = ({
   labelIcon,
   placeholder,
   editorConfig,
-  languageOptions,
   lngFieldWidth,
+  usedLanguages,
   ...uiProps
 }) => {
   return (
@@ -22,8 +22,8 @@ export const I18nRichInputField = ({
         fieldPath={`${fieldPath}.lang`}
         placeholder=""
         required
-        options={languageOptions}
         width={lngFieldWidth}
+        usedLanguages={usedLanguages}
       />
 
       <Form.Field width={13}>
diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nTextInputField/I18nTextInputField.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nTextInputField/I18nTextInputField.jsx
index 68fcd804..cf177e97 100644
--- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nTextInputField/I18nTextInputField.jsx
+++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nTextInputField/I18nTextInputField.jsx
@@ -10,8 +10,8 @@ export const I18nTextInputField = ({
   optimized,
   labelIcon,
   placeholder,
-  languageOptions,
   lngFieldWidth,
+  usedLanguages,
   ...uiProps
 }) => {
   return (
@@ -21,7 +21,7 @@ export const I18nTextInputField = ({
         placeholder=""
         required
         width={lngFieldWidth}
-        options={languageOptions}
+        usedLanguages={usedLanguages}
       />
       <TextField
         // TODO: hacky fix for SUI alignment bug for case with
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 8f889a40..38b2fc02 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
@@ -1,9 +1,9 @@
 import * as React from "react";
-import { SelectField, FieldLabel } from "react-invenio-forms";
-import { useVocabularyOptions } from "@js/oarepo_ui";
+import { FieldLabel } from "react-invenio-forms";
+import { LocalVocabularySelectField } from "@js/oarepo_vocabularies";
 import { i18next } from "@translations/oarepo_ui/i18next";
-import { useFormikContext } from "formik";
 import PropTypes from "prop-types";
+import { getIn, useFormikContext } from "formik";
 
 export const LanguageSelectField = ({
   fieldPath,
@@ -13,26 +13,25 @@ export const LanguageSelectField = ({
   multiple,
   placeholder,
   clearable,
-  options,
+  usedLanguages,
   ...uiProps
 }) => {
-  const { options: languages } = useVocabularyOptions("languages");
+  const { values } = useFormikContext();
 
-  const { setFieldTouched } = useFormikContext();
   return (
-    <SelectField
+    <LocalVocabularySelectField
       deburr
-      onBlur={() => setFieldTouched(fieldPath)}
       fieldPath={fieldPath}
-      optimized
       placeholder={placeholder}
       required={required}
       clearable={clearable}
       multiple={multiple}
-      options={options ?? languages.all}
       label={<FieldLabel htmlFor={fieldPath} icon={labelIcon} label={label} />}
-      selectOnBlur={false}
-      fluid
+      optionsListName="languages"
+      onChange={({ e, data, formikProps }) => {
+        formikProps.form.setFieldValue(fieldPath, data.value);
+      }}
+      value={getIn(values, fieldPath, multiple ? [] : {})}
       {...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 7f03ec4b..b63055d5 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
@@ -45,6 +45,7 @@ export const MultilingualTextInput = ({
           languages.all,
           array
         );
+
         return (
           <ArrayFieldItem
             indexPath={indexPath}
@@ -54,14 +55,13 @@ export const MultilingualTextInput = ({
             <Form.Field width={16}>
               {rich ? (
                 <I18nRichInputField
-                  key={availableLanguages.length}
                   fieldPath={fieldPathPrefix}
                   label={textFieldLabel}
                   labelIcon={textFieldIcon}
                   editorConfig={editorConfig}
                   optimized
                   required={required}
-                  languageOptions={availableLanguages}
+                  usedLanguages={array.map((v) => v.lang)}
                   lngFieldWidth={lngFieldWidth}
                   {...uiProps}
                 />
@@ -72,7 +72,7 @@ export const MultilingualTextInput = ({
                   label={textFieldLabel}
                   labelIcon={textFieldIcon}
                   required={required}
-                  languageOptions={availableLanguages}
+                  usedLanguages={array.map((v) => v.lang)}
                   lngFieldWidth={lngFieldWidth}
                   {...uiProps}
                 />