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.

Sign up for GitHub

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

Jump to bottom

LPS-194344 Scrape the spritemap and add RequiredMark for required inputs #3635

Closed
wants to merge 2 commits into from
Closed

LPS-194344 Scrape the spritemap and add RequiredMark for required inputs #3635

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
306cc7e
LPS-194344 Scrape the spritemap and add RequiredMark for required inputs
kresimir-coko Sep 4, 2023
ebf320d
LPS-194344 Simplify variable names and code
kresimir-coko Sep 6, 2023
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
2 changes: 2 additions & 0 deletions ...d-data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/fds_view.jsp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ renderResponse.setTitle(ParamUtil.getString(request, "fdsViewLabel"));
"namespace", liferayPortletResponse.getNamespace()
).put(
"saveFDSFieldsURL", fdsViewsDisplayContext.getSaveFDSFieldsURL()
).put(
"spritemap", themeDisplay.getPathThemeSpritemap()
).build()
%>'
/>
4 changes: 4 additions & 0 deletions ...data-set/frontend-data-set-views-web/src/main/resources/META-INF/resources/js/FDSView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ interface IFDSViewSectionInterface {
namespace: string;
onFDSViewUpdate: (data: FDSViewType) => void;
saveFDSFieldsURL: string;
spritemap: string;
}

interface IFDSViewInterface {
Expand All @@ -76,6 +77,7 @@ interface IFDSViewInterface {
fdsViewsURL: string;
namespace: string;
saveFDSFieldsURL: string;
spritemap: string;
}

const FDSView = ({
Expand All @@ -84,6 +86,7 @@ const FDSView = ({
fdsViewsURL,
namespace,
saveFDSFieldsURL,
spritemap,
}: IFDSViewInterface) => {
const [activeIndex, setActiveIndex] = useState(0);
const [fdsView, setFDSView] = useState<FDSViewType>();
Expand Down Expand Up @@ -154,6 +157,7 @@ const FDSView = ({
setFDSView({...fdsView, ...updatedFdsViewData});
}}
saveFDSFieldsURL={saveFDSFieldsURL}
spritemap={spritemap}
/>
)
)}
Expand Down
63 changes: 50 additions & 13 deletions ...frontend-data-set-views-web/src/main/resources/META-INF/resources/js/fds_view/Actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
{
Expand Down Expand Up @@ -68,19 +70,53 @@ 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,
] = useState({});
const [iconSymbol, setIconSymbol] = useState('bolt');
const [labelTranslations, setLabelTranslations] = useState({});

useEffect(() => {
const getIcons = async () => {
const response = await fetch(spritemap);
kresimir-coko marked this conversation as resolved.
Show resolved Hide resolved

const responseText = await response.text();

if (responseText.length) {
const spritemapDocument = new DOMParser().parseFromString(
responseText,
'text/xml'
);

const symbolElements = spritemapDocument.querySelectorAll(
'symbol'
);

const iconSymbols = Array.from(symbolElements!).map(
(element) => ({
label: element.id,
value: element.id,
})
);

setAvailableIconSymbols(iconSymbols);
}
};

getIcons();
}, [spritemap]);

return (
<ClayLayout.ContainerFluid>
<ClayBreadcrumb
className="my-2"
items={[
{
active: activeSection === SECTIONS.ACTIONS,
Expand Down Expand Up @@ -203,37 +239,34 @@ const Actions = () => {
placeholder={Liferay.Language.get(
'action-name'
)}
required
translations={labelTranslations}
/>
</ClayLayout.Col>

<ClayLayout.Col
className="align-items-center d-flex justify-content-center"
size={1}
size={4}
>
<ClayIcon
className="w-50"
className="mr-4"
symbol={iconSymbol}
/>
</ClayLayout.Col>

<ClayLayout.Col size={3}>
<ClayForm.Group>
<label htmlFor="iconInput">
{Liferay.Language.get('icon')}
</label>

<ClayInput
<ClaySelectWithOption
defaultValue="bolt"
id="iconInput"
onChange={(event) =>
setIconSymbol(
event?.target.value
event.target.value
)
}
placeholder={Liferay.Language.get(
'please-select-an-option'
)}
value={iconSymbol}
options={availableIconSymbols}
/>
</ClayForm.Group>
</ClayLayout.Col>
Expand All @@ -254,14 +287,16 @@ const Actions = () => {
<ClayForm.Group>
<label htmlFor="actionTypeSelect">
{Liferay.Language.get('type')}

<RequiredMark />
</label>

<ClaySelectWithOption
defaultValue="link"
id="actionTypeSelect"
options={TYPES}
placeholder={Liferay.Language.get(
'select-an-option'
'please-select-an-option'
kresimir-coko marked this conversation as resolved.
Show resolved Hide resolved
)}
/>
</ClayForm.Group>
Expand All @@ -273,6 +308,8 @@ const Actions = () => {
<ClayForm.Group>
<label htmlFor="urlInput">
{Liferay.Language.get('url')}

<RequiredMark />
</label>

<ClayInput
Expand Down
3 changes: 3 additions & 0 deletions ...t/frontend-data-set-views-web/types/src/main/resources/META-INF/resources/js/FDSView.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,23 @@ interface IFDSViewSectionInterface {
namespace: string;
onFDSViewUpdate: (data: FDSViewType) => void;
saveFDSFieldsURL: string;
spritemap: string;
}
interface IFDSViewInterface {
fdsClientExtensionCellRenderers: IClientExtensionRenderer[];
fdsViewId: string;
fdsViewsURL: string;
namespace: string;
saveFDSFieldsURL: string;
spritemap: string;
}
declare const FDSView: ({
fdsClientExtensionCellRenderers,
fdsViewId,
fdsViewsURL,
namespace,
saveFDSFieldsURL,
spritemap,
}: IFDSViewInterface) => JSX.Element;
export {IFDSViewSectionInterface};
export default FDSView;
2 changes: 1 addition & 1 deletion ...d-data-set-views-web/types/src/main/resources/META-INF/resources/js/fds_view/Actions.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,5 @@

/// <reference types="react" />

declare const Actions: () => JSX.Element;
declare const Actions: ({spritemap}: {spritemap: string}) => JSX.Element;
export default Actions;