Skip to content

Commit

Permalink
add header and more items text and link to the schema
Browse files Browse the repository at this point in the history
  • Loading branch information
@ionlizarazu
ionlizarazu committed Mar 3, 2022
1 parent fe69427 commit 7169e74
Show file tree
Hide file tree
Showing 3 changed files with 187 additions and 80 deletions.
106 changes: 66 additions & 40 deletions src/AdvancedListingBlockTemplate.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,11 @@ import moment from 'moment';
import { useIntl } from 'react-intl';
const AdvancedListingBlockTemplate = ({
items,
linkTitle,
linkHref,
moreLinkText,
moreLinkUrl,
header,
headerUrl,
headerTag,
isEditMode,
imageSide,
imageWidth,
Expand All @@ -20,16 +23,28 @@ const AdvancedListingBlockTemplate = ({
titleTag,
showDescription,
}) => {
let link = null;
let href = linkHref?.[0]?.['@id'] || '';
if (isInternalURL(href)) {
link = (
<ConditionalLink to={flattenToAppURL(href)} condition={!isEditMode}>
{linkTitle || href}
let moreLink = null;
let moreHref = moreLinkUrl?.[0]?.['@id'] || '';
if (isInternalURL(moreHref)) {
moreLink = (
<ConditionalLink to={flattenToAppURL(moreHref)} condition={!isEditMode}>
{moreLinkText || moreHref}
</ConditionalLink>
);
} else if (href) {
link = <a href={href}>{linkTitle || href}</a>;
} else if (moreHref) {
moreLink = <a href={moreHref}>{moreLinkText || moreHref}</a>;
}

let headerLink = null;
let headerHref = headerUrl?.[0]?.['@id'] || '';
if (isInternalURL(headerHref)) {
headerLink = (
<ConditionalLink to={flattenToAppURL(headerHref)} condition={!isEditMode}>
{header || headerHref}
</ConditionalLink>
);
} else if (headerHref) {
moreLink = <a href={headerHref}>{moreLinkText || headerHref}</a>;
}

const hasImage = imageSide !== null;
Expand All @@ -42,71 +57,82 @@ const AdvancedListingBlockTemplate = ({
? 12 - imageWidth
: 12;
const intl = useIntl();
const TitleTag = titleTag ? titleTag : 'h3';
const HeaderTag = headerTag ? headerTag : 'h3';
moment.locale(intl.locale);
return (
<>
<HeaderTag className="listing-header">
{headerUrl ? headerLink : header}
</HeaderTag>
<Grid columns={howManyColumns ? howManyColumns : 1} stackable>
{items.map((item) => (
<Grid.Column key={item['@id']}>
<ConditionalLink item={item} condition={!isEditMode}>
<Grid columns={columnSize}>
{['up', 'left'].includes(imageSide) && (
<Grid.Column width={imageGridWidth}>
{!item.image_field && (
<Grid columns={columnSize}>
{['up', 'left'].includes(imageSide) && (
<Grid.Column width={imageGridWidth}>
{!item.image_field && (
<ConditionalLink item={item} condition={!isEditMode}>
<Image
src={DefaultImageSVG}
alt="This content has no image, this is a default placeholder."
size="small"
/>
)}
{item.image_field && (
</ConditionalLink>
)}
{item.image_field && (
<ConditionalLink item={item} condition={!isEditMode}>
<Image
src={flattenToAppURL(
`${item['@id']}/@@images/${item.image_field}/large`,
)}
alt={item.title}
size="small"
/>
)}
</Grid.Column>
)}
<Grid.Column width={contentGridWidth}>
{titleTag ? (
titleTag(item.title ? item.title : item.id)
) : (
<h3>{item.title ? item.title : item.id}</h3>
)}
{effectiveDate && <p>{moment(item.effective).format('L')}</p>}
{showDescription && item.description && (
<p>{item.description}</p>
</ConditionalLink>
)}
</Grid.Column>
{['right', 'down'].includes(imageSide) && (
<Grid.Column width={imageGridWidth}>
{!item.image_field && (
)}
<Grid.Column width={contentGridWidth}>
<TitleTag>
<ConditionalLink item={item} condition={!isEditMode}>
{item.title ? item.title : item.id}
</ConditionalLink>
</TitleTag>
{effectiveDate && <p>{moment(item.effective).format('L')}</p>}
{showDescription && item.description && (
<p>{item.description}</p>
)}
</Grid.Column>
{['right', 'down'].includes(imageSide) && (
<Grid.Column width={imageGridWidth}>
{!item.image_field && (
<ConditionalLink item={item} condition={!isEditMode}>
<Image
src={DefaultImageSVG}
alt="This content has no image, this is a default placeholder."
size="small"
/>
)}
{item.image_field && (
</ConditionalLink>
)}
{item.image_field && (
<ConditionalLink item={item} condition={!isEditMode}>
<Image
src={flattenToAppURL(
`${item['@id']}/@@images/${item.image_field}/large`,
)}
alt={item.title}
size="small"
/>
)}
</Grid.Column>
)}
</Grid>
</ConditionalLink>
</ConditionalLink>
)}
</Grid.Column>
)}
</Grid>
</Grid.Column>
))}
</Grid>
{link && <div className="footer">{link}</div>}
{moreLink && <div className="listing-footer">{moreLink}</div>}
</>
);
};
Expand Down
78 changes: 54 additions & 24 deletions src/advancedSchema.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@ export const advancedSchema = (props) => {
const imageWidth = ['right', 'left'].includes(formData.imageSide)
? ['imageWidth']
: [];
const headingChoices = [
['h2', 'H2'],
['h3', 'H3'],
['h4', 'H4'],
];
return {
...schema,
fieldsets: [
Expand All @@ -19,6 +24,11 @@ export const advancedSchema = (props) => {
title: intl.formatMessage(messages.querystring),
fields: ['querystring'],
},
{
id: 'header',
title: intl.formatMessage(messages.headerConfiguration),
fields: ['header', 'headerUrl', 'headerTag'],
},
{
id: 'columns',
title: intl.formatMessage(messages.columnsConfiguration),
Expand All @@ -44,11 +54,32 @@ export const advancedSchema = (props) => {
title: intl.formatMessage(messages.dateConfiguration),
fields: ['effectiveDate'],
},
{
id: 'moreLink',
title: intl.formatMessage(messages.moreLinkConfiguration),
fields: ['moreLinkText', 'moreLinkUrl'],
},
],
properties: {
...schema.properties,
header: {
title: intl.formatMessage(messages.header),
description: intl.formatMessage(messages.headerDescription),
},
headerUrl: {
title: intl.formatMessage(messages.headerUrl),
description: intl.formatMessage(messages.headerUrlDescription),
widget: 'object_browser',
mode: 'link',
allowExternals: true,
},
headerTag: {
title: intl.formatMessage(messages.headerTag),
description: intl.formatMessage(messages.headerTagDescription),
choices: [['h1', 'H1'], ...headingChoices],
},
howManyColumns: {
title: intl.formatMessage(messages.columnsCountConfiguration),
title: intl.formatMessage(messages.columnsCount),
choices: [
[1, '1'],
[2, '2'],
Expand All @@ -57,10 +88,8 @@ export const advancedSchema = (props) => {
],
},
imageWidth: {
title: intl.formatMessage(messages.imageWidthConfiguration),
description: intl.formatMessage(
messages.imageWidthConfigurationDescription,
),
title: intl.formatMessage(messages.imageWidth),
description: intl.formatMessage(messages.imageWidthDescription),
choices: [
[2, '2/12'],
[3, '3/12'],
Expand All @@ -70,10 +99,8 @@ export const advancedSchema = (props) => {
],
},
imageSide: {
title: intl.formatMessage(messages.imagePositionConfiguration),
description: intl.formatMessage(
messages.imagePositionConfigurationDescription,
),
title: intl.formatMessage(messages.imagePosition),
description: intl.formatMessage(messages.imagePositionDescription),
choices: [
[null, 'No image'],
['up', 'up'],
Expand All @@ -83,29 +110,32 @@ export const advancedSchema = (props) => {
],
},
titleTag: {
title: intl.formatMessage(messages.titleTagConfiguration),
description: intl.formatMessage(
messages.titleTagConfigurationDescription,
),
choices: [
[(children) => <h2>{children}</h2>, 'H2'],
[(children) => <h3>{children}</h3>, 'H3'],
[(children) => <h4>{children}</h4>, 'H4'],
],
title: intl.formatMessage(messages.titleTag),
description: intl.formatMessage(messages.titleTagDescription),
choices: headingChoices,
},
showDescription: {
title: intl.formatMessage(messages.descriptionConfigurationTitle),
description: intl.formatMessage(
messages.descriptionConfigurationDescription,
),
title: intl.formatMessage(messages.descriptionTitle),
description: intl.formatMessage(messages.descriptionDescription),
type: 'boolean',
default: true,
},
effectiveDate: {
title: intl.formatMessage(messages.dateConfiguration),
description: intl.formatMessage(messages.dateConfigurationDescription),
title: intl.formatMessage(messages.date),
description: intl.formatMessage(messages.dateDescription),
type: 'boolean',
},
moreLinkText: {
title: intl.formatMessage(messages.moreLinkText),
description: intl.formatMessage(messages.moreLinkTextDescription),
},
moreLinkUrl: {
title: intl.formatMessage(messages.moreLinkUrl),
description: intl.formatMessage(messages.moreLinkUrlDescription),
widget: 'object_browser',
mode: 'link',
allowExternals: true,
},
},
};
};
Loading

0 comments on commit 7169e74

Please sign in to comment.