From 306cc7ee42ca0f7c02f2a068fab6620cec6dbdd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kre=C5=A1imir=20=C4=8Coko?= Date: Mon, 4 Sep 2023 09:21:13 +0200 Subject: [PATCH 1/2] LPS-194344 Scrape the spritemap and add RequiredMark for required inputs --- .../resources/META-INF/resources/fds_view.jsp | 2 + .../META-INF/resources/js/FDSView.tsx | 4 ++ .../resources/js/fds_view/Actions.tsx | 63 +++++++++++++++---- .../META-INF/resources/js/FDSView.d.ts | 3 + .../resources/js/fds_view/Actions.d.ts | 2 +- 5 files changed, 60 insertions(+), 14 deletions(-) diff --git a/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/fds_view.jsp b/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/fds_view.jsp index c80132ab443510..0a53824fb00bae 100644 --- a/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/fds_view.jsp +++ b/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/fds_view.jsp @@ -29,6 +29,8 @@ renderResponse.setTitle(ParamUtil.getString(request, "fdsViewLabel")); "namespace", liferayPortletResponse.getNamespace() ).put( "saveFDSFieldsURL", fdsViewsDisplayContext.getSaveFDSFieldsURL() + ).put( + "spritemap", themeDisplay.getPathThemeSpritemap() ).build() %>' /> \ No newline at end of file diff --git a/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/js/FDSView.tsx b/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/js/FDSView.tsx index 79d80677d43390..72949c8edb78b4 100644 --- a/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/js/FDSView.tsx +++ b/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/js/FDSView.tsx @@ -68,6 +68,7 @@ interface IFDSViewSectionInterface { namespace: string; onFDSViewUpdate: (data: FDSViewType) => void; saveFDSFieldsURL: string; + spritemap: string; } interface IFDSViewInterface { @@ -76,6 +77,7 @@ interface IFDSViewInterface { fdsViewsURL: string; namespace: string; saveFDSFieldsURL: string; + spritemap: string; } const FDSView = ({ @@ -84,6 +86,7 @@ const FDSView = ({ fdsViewsURL, namespace, saveFDSFieldsURL, + spritemap, }: IFDSViewInterface) => { const [activeIndex, setActiveIndex] = useState(0); const [fdsView, setFDSView] = useState(); @@ -154,6 +157,7 @@ const FDSView = ({ setFDSView({...fdsView, ...updatedFdsViewData}); }} saveFDSFieldsURL={saveFDSFieldsURL} + spritemap={spritemap} /> ) )} diff --git a/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/js/fds_view/Actions.tsx b/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/js/fds_view/Actions.tsx index 9d3c59983a6605..b133aed7ff2399 100644 --- a/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/js/fds_view/Actions.tsx +++ b/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/js/fds_view/Actions.tsx @@ -11,9 +11,11 @@ import ClayLayout from '@clayui/layout'; import ClayPanel from '@clayui/panel'; import ClayTabs from '@clayui/tabs'; import {InputLocalized} from 'frontend-js-components-web'; -import React, {useState} from 'react'; +import {fetch} from 'frontend-js-web'; +import React, {useEffect, useState} from 'react'; import OrderableTable from '../components/OrderableTable'; +import RequiredMark from '../components/RequiredMark'; const MESSAGE_TYPES = [ { @@ -68,9 +70,12 @@ const TYPES = [ const noop = () => {}; -const Actions = () => { +const Actions = ({spritemap}: {spritemap: string}) => { const [activeSection, setActiveSection] = useState(SECTIONS.ACTIONS); const [activeTab, setActiveTab] = useState(0); + const [availableIconSymbols, setAvailableIconSymbols] = useState< + Array<{label: string; value: string}> + >([]); const [ confirmationMessageTranslations, setConfirmationMessageTranslations, @@ -78,9 +83,40 @@ const Actions = () => { const [iconSymbol, setIconSymbol] = useState('bolt'); const [labelTranslations, setLabelTranslations] = useState({}); + useEffect(() => { + const getIcons = async () => { + const response = await fetch(spritemap); + + const responseText = await response.text(); + + if (responseText.length) { + const XMLString = await new window.DOMParser().parseFromString( + responseText, + 'text/xml' + ); + + const availableIconSymbolElements = XMLString.querySelectorAll( + 'symbol' + ); + + const iconSymbols = Array.from( + availableIconSymbolElements! + ).map((element) => ({ + label: element.id, + value: element.id, + })); + + setAvailableIconSymbols(iconSymbols); + } + }; + + getIcons(); + }, [spritemap]); + return ( { placeholder={Liferay.Language.get( 'action-name' )} + required translations={labelTranslations} /> - - - setIconSymbol( - event?.target.value + event.target.value ) } - placeholder={Liferay.Language.get( - 'please-select-an-option' - )} - value={iconSymbol} + options={availableIconSymbols} /> @@ -254,6 +287,8 @@ const Actions = () => { { id="actionTypeSelect" options={TYPES} placeholder={Liferay.Language.get( - 'select-an-option' + 'please-select-an-option' )} /> @@ -273,6 +308,8 @@ const Actions = () => { void; saveFDSFieldsURL: string; + spritemap: string; } interface IFDSViewInterface { fdsClientExtensionCellRenderers: IClientExtensionRenderer[]; @@ -21,6 +22,7 @@ interface IFDSViewInterface { fdsViewsURL: string; namespace: string; saveFDSFieldsURL: string; + spritemap: string; } declare const FDSView: ({ fdsClientExtensionCellRenderers, @@ -28,6 +30,7 @@ declare const FDSView: ({ fdsViewsURL, namespace, saveFDSFieldsURL, + spritemap, }: IFDSViewInterface) => JSX.Element; export {IFDSViewSectionInterface}; export default FDSView; diff --git a/modules/apps/frontend-data-set/frontend-data-set-views-web/types/src/main/resources/META-INF/resources/js/fds_view/Actions.d.ts b/modules/apps/frontend-data-set/frontend-data-set-views-web/types/src/main/resources/META-INF/resources/js/fds_view/Actions.d.ts index e420975d469b01..5527c91b3fea80 100644 --- a/modules/apps/frontend-data-set/frontend-data-set-views-web/types/src/main/resources/META-INF/resources/js/fds_view/Actions.d.ts +++ b/modules/apps/frontend-data-set/frontend-data-set-views-web/types/src/main/resources/META-INF/resources/js/fds_view/Actions.d.ts @@ -5,5 +5,5 @@ /// -declare const Actions: () => JSX.Element; +declare const Actions: ({spritemap}: {spritemap: string}) => JSX.Element; export default Actions; From ebf320da71667ad929c0e59920a7864483405120 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kre=C5=A1imir=20=C4=8Coko?= Date: Wed, 6 Sep 2023 11:35:27 +0200 Subject: [PATCH 2/2] LPS-194344 Simplify variable names and code --- .../META-INF/resources/js/fds_view/Actions.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/js/fds_view/Actions.tsx b/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/js/fds_view/Actions.tsx index b133aed7ff2399..d54219a99879fe 100644 --- a/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/js/fds_view/Actions.tsx +++ b/modules/apps/frontend-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/js/fds_view/Actions.tsx @@ -90,21 +90,21 @@ const Actions = ({spritemap}: {spritemap: string}) => { const responseText = await response.text(); if (responseText.length) { - const XMLString = await new window.DOMParser().parseFromString( + const spritemapDocument = new DOMParser().parseFromString( responseText, 'text/xml' ); - const availableIconSymbolElements = XMLString.querySelectorAll( + const symbolElements = spritemapDocument.querySelectorAll( 'symbol' ); - const iconSymbols = Array.from( - availableIconSymbolElements! - ).map((element) => ({ - label: element.id, - value: element.id, - })); + const iconSymbols = Array.from(symbolElements!).map( + (element) => ({ + label: element.id, + value: element.id, + }) + ); setAvailableIconSymbols(iconSymbols); }