generated from flotiq/flotiq-ui-plugin-templates-plain-js
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
replace fields based on tranlsations
- Loading branch information
1 parent
12fd4c2
commit 33e600a
Showing
8 changed files
with
253 additions
and
37 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| import { | ||
| addElementToCache, | ||
| getCachedElement, | ||
| } from "../../common/plugin-element-cache"; | ||
| import pluginInfo from "../../plugin-manifest.json"; | ||
|
|
||
| const selectedClass = "plugin-multilangual-tab__item--selected"; | ||
|
|
||
| export const formLng = { | ||
| current: null, | ||
| }; | ||
|
|
||
| const addToTranslations = (contentTypeSettings, formik, lngIndex) => { | ||
| const defaultObject = contentTypeSettings.fields.reduce( | ||
| (fields, currentFieldKey) => { | ||
| console.log(currentFieldKey, formik.values[currentFieldKey]); | ||
| fields[currentFieldKey] = formik.values[currentFieldKey]; | ||
| return fields; | ||
| }, | ||
| {}, | ||
| ); | ||
|
|
||
| formik.setFieldValue(`__translations.[${lngIndex}]`, { | ||
| ...defaultObject, | ||
| __language: formLng.current, | ||
| }); | ||
| }; | ||
|
|
||
| export const handleFormFieldAdd = ( | ||
| { contentType, formik }, | ||
| getPluginSettings, | ||
| ) => { | ||
| const pluginSettings = getPluginSettings(); | ||
| const parsedSettings = JSON.parse(pluginSettings || "{}"); | ||
|
|
||
| const contentTypeSettings = parsedSettings?.config?.find( | ||
| ({ content_type }) => content_type === contentType?.name, | ||
| ); | ||
|
|
||
| if (!contentTypeSettings) return; | ||
|
|
||
| const dropdownCacheKey = `${pluginInfo.id}-language-tabs`; | ||
| let tabsContainer = getCachedElement(dropdownCacheKey)?.element; | ||
| let tabsData = getCachedElement(dropdownCacheKey)?.data || {}; | ||
|
|
||
| tabsData.formik = formik; | ||
|
|
||
| if (!tabsContainer) { | ||
| tabsContainer = document.createElement("div"); | ||
| tabsContainer.className = "plugin-multilangual-tabs"; | ||
|
|
||
| const defaultLng = contentTypeSettings.default_language; | ||
| formLng.current = defaultLng; | ||
|
|
||
| for (const lng of contentTypeSettings.languages) { | ||
| const lngItemButton = document.createElement("button"); | ||
| lngItemButton.className = "plugin-multilangual-tab__item"; | ||
| lngItemButton.innerText = lng; | ||
| lngItemButton.type = "button"; | ||
|
|
||
| if (lng === defaultLng) { | ||
| lngItemButton.classList.toggle(selectedClass); | ||
| } | ||
|
|
||
| lngItemButton.onclick = async (event) => { | ||
| formLng.current = lng; | ||
|
|
||
| if (formLng.current !== defaultLng) { | ||
| const indexInTranlsations = Object.values( | ||
| tabsData.formik.values.__translations, | ||
| ).findIndex(({ __language }) => __language === formLng.current); | ||
|
|
||
| if (indexInTranlsations < 0) { | ||
| addToTranslations( | ||
| contentTypeSettings, | ||
| tabsData.formik, | ||
| tabsData.formik.values.__translations.length, | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| tabsData.formik.setFieldTouched(`__translations`, true); | ||
|
|
||
| const slectedTab = document.querySelector(`.${selectedClass}`); | ||
| if (slectedTab) slectedTab.classList.toggle(selectedClass); | ||
|
|
||
| event.target.classList.toggle(selectedClass); | ||
| }; | ||
|
|
||
| tabsContainer.appendChild(lngItemButton); | ||
| } | ||
| } | ||
|
|
||
| addElementToCache(tabsContainer, dropdownCacheKey, tabsData); | ||
|
|
||
| return tabsContainer; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,61 @@ | ||
| export const handleCoFormConfig = ( | ||
| { contentType, name, config, formik }, | ||
| settings, | ||
| ) => {}; | ||
| import { formLng } from "../../form-add"; | ||
|
|
||
| let fieldDictionary = null; | ||
|
|
||
| export const handleCoFormConfig = async ( | ||
| { name, config, formik }, | ||
| contentTypeSettings, | ||
| ) => { | ||
| config.key = `${formLng.current}-${name}`; | ||
|
|
||
| if ( | ||
| !formLng.current || | ||
| formLng.current === contentTypeSettings.default_language | ||
| ) { | ||
| return; | ||
| } | ||
|
|
||
| if (!fieldDictionary) { | ||
| fieldDictionary = contentTypeSettings.fields.reduce((acc, field) => { | ||
| acc[field] = true; | ||
| return acc; | ||
| }, {}); | ||
| } | ||
|
|
||
| const isInTranlsations = fieldDictionary[name]; | ||
|
|
||
| if (!isInTranlsations) { | ||
| const { listName } = name.match(/(?<listName>\w+)\[(\d+)\]/)?.groups || {}; | ||
|
|
||
| if (listName) { | ||
| const listInTranlsation = fieldDictionary[listName]; | ||
| if (listInTranlsation) return; | ||
| } | ||
|
|
||
| config.disabled = true; | ||
| return; | ||
| } | ||
|
|
||
| const translationIndex = Object.values( | ||
| formik.values.__translations, | ||
| ).findIndex(({ __language }) => __language === formLng.current); | ||
|
|
||
| const lngIndex = | ||
| translationIndex > -1 | ||
| ? translationIndex | ||
| : formik.values.__translations.length; | ||
|
|
||
| const fieldName = `__translations.[${lngIndex}].${name}`; | ||
|
|
||
| if (fieldName !== config.name) { | ||
| config.name = fieldName; | ||
|
|
||
| const value = formik.values.__translations?.[lngIndex]?.[name]; | ||
|
|
||
| if ("checked" in config) { | ||
| config.checked = value; | ||
| } else { | ||
| config.value = value; | ||
| } | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.