Skip to content

Commit

Permalink
WIP refactor package structure
Browse files Browse the repository at this point in the history
  • Loading branch information
tiberiuichim committed Oct 31, 2022
1 parent 6b053a8 commit bf3fdd9
Show file tree
Hide file tree
Showing 23 changed files with 558 additions and 573 deletions.
190 changes: 117 additions & 73 deletions src/blocks/Listing/index.js
Original file line number Diff line number Diff line change
@@ -1,132 +1,176 @@
import CardsCarousel from './templates/CardsCarousel';
import CardsGallery from './templates/CardsGallery';
import NewsList from './templates/NewsList';
import Summary from './templates/Summary';
import { compose } from 'redux';
import Carousel from './layout-templates/Carousel';
import Gallery from './layout-templates/Gallery';
import Listing from './layout-templates/Listing';
import {
setBasicStylingSchema,
setCardStylingSchema,
setCardModelSchema,
setItemModelSchema,
} from './schema';

import {
DefaultCardLayout,
ImageCardLayout,
LeftImageCardLayout,
RightImageCardLayout,
} from './CardTemplates';

import { DefaultItemLayout } from './ItemTemplates';
import { SearchItemLayout } from './SearchItemTemplate';
} from './item-templates/CardTemplates';

import { BasicListingBlockStylesSchema } from './schema';
import { DefaultItemLayout } from './item-templates/ItemTemplates';
import { SearchItemLayout } from './item-templates/SearchItemTemplate';

import { CardStylingSchemaEnhancer } from './schema';
import universalCardSchemaEnhancer from '@eeacms/volto-listing-block/components/UniversalCard/schema';

const applyConfig = (config) => {
// moment date locale. See https://momentjs.com/ - Multiple Locale Support
config.settings.dateLocale = config.settings.dateLocale || 'en';
config.settings.dateLocale = config.settings.dateLocale ?? 'en';
const { listing } = config.blocks.blocksConfig;

const blacklist = ['summary'];

const { schemaEnhancer } = listing;

listing.stylesSchema = BasicListingBlockStylesSchema;

listing.schemaEnhancer = (props) => {
// NOTE: this is a schema finalizer
const schema = schemaEnhancer ? schemaEnhancer(props) : props.schema;
listing.schemaEnhancer = moveQueryToFieldset(listing.schemaEnhancer);

// move querystring to its own fieldset;
schema.fieldsets[0].fields = schema.fieldsets[0].fields.filter(
(f) => f !== 'querystring',
);
schema.fieldsets.splice(1, 0, {
id: 'querystring',
title: 'Query',
fields: ['querystring'],
});

return schema;
};
// The split of responsibilities is as follows:
// the Listing block variation takes care of the Layout responsibility (how
// the items are listed)
// The variation takes care of how the individual item is displayed.
// With our own variations being based on the UniversalCard, we have another
// level of control on how each item is displayed.

listing.variations = [
...listing.variations.filter(({ id }) => blacklist.indexOf(id) === -1),
{
id: 'summary',
isDefault: false,
title: 'Item listing',
template: Summary,
schemaEnhancer: Summary.schemaEnhancer,
stylesSchema: Summary.styleSchemaEnhancer,
title: 'Listing',
template: Listing,
schemaEnhancer: compose(
Listing.schemaEnhancer, // layout schema
setBasicStylingSchema,
universalCardSchemaEnhancer,
),
},
{
id: 'cardsCarousel',
isDefault: false,
title: 'Cards carousel',
template: CardsCarousel,
schemaEnhancer: CardsCarousel.schemaEnhancer,
stylesSchema: CardsCarousel.styleSchemaEnhancer,
},
{
id: 'customCardsGalleryVariationId',
isDefault: false,
title: 'Cards gallery',
template: CardsGallery,
schemaEnhancer: CardsGallery.schemaEnhancer,
stylesSchema: CardStylingSchemaEnhancer,
title: 'Carousel',
template: Carousel,
schemaEnhancer: compose(
Carousel.schemaEnhancer,
setBasicStylingSchema,
universalCardSchemaEnhancer,
),
},
{
id: 'customNewsListVariationId',
id: 'cardsGallery', // 'customCardsGalleryVariationId'
isDefault: false,
title: 'News List',
template: NewsList,
schemaEnhancer: NewsList.schemaEnhancer,
title: 'Gallery',
template: Gallery,
schemaEnhancer: compose(
Gallery.schemaEnhancer,
setBasicStylingSchema,
universalCardSchemaEnhancer,
),
},
];

listing.extensions = {
...listing.extensions,
itemTemplates: [
{
id: 'item',
isDefault: true,
title: 'Basic Item',
view: DefaultItemLayout,
},
{
id: 'searchItem',
isDefault: false,
title: 'Search Item',
view: SearchItemLayout,
stylesSchema: SearchItemLayout.styleSchemaEnhancer,
},
],
cardTemplates: [
{
id: 'card',
isDefault: true,
title: 'Card (default)',
view: DefaultCardLayout,
template: DefaultCardLayout,
schemaEnhancer: compose(setCardModelSchema, setCardStylingSchema),
},
{
id: 'imageCard',
title: 'Image Card',
view: ImageCardLayout,
template: ImageCardLayout,
schemaEnhancer: compose(setCardModelSchema, setCardStylingSchema),
},
{
id: 'imageOnLeft',
title: 'Image on left',
view: LeftImageCardLayout,
template: LeftImageCardLayout,
schemaEnhancer: compose(setCardModelSchema, setCardStylingSchema),
},
{
id: 'imageOnRight',
title: 'Image on right',
view: RightImageCardLayout,
template: RightImageCardLayout,
schemaEnhancer: compose(setCardModelSchema, setCardStylingSchema),
},
{
id: 'item',
isDefault: true,
title: 'Listing Item',
template: DefaultItemLayout,
schemaEnhancer: compose(
setItemModelSchema,
setCardStylingSchema,
DefaultItemLayout.schemaEnhancer,
),
},
{
id: 'searchItem',
isDefault: false,
title: 'Search Item',
template: SearchItemLayout,
schemaEnhancer: compose(
setCardStylingSchema,
SearchItemLayout.schemaEnhancer,
),
},
],
};

// Theming
// This bug needs to be fixed first: https://github.com/plone/volto/issues/3675
// listing.enableStyling = true;

return config;
};

export default applyConfig;

const moveQueryToFieldset = (schemaEnhancer) => (props) => {
// NOTE: this is a schema finalizer
const schema = schemaEnhancer ? schemaEnhancer(props) : props.schema;

// move querystring to its own fieldset;
schema.fieldsets[0].fields = schema.fieldsets[0].fields.filter(
(f) => f !== 'querystring',
);
schema.fieldsets.splice(1, 0, {
id: 'querystring',
title: 'Query',
fields: ['querystring'],
});

return schema;
};

// import { CardStylingSchemaEnhancer } from '../schema';
// CardsCarousel.styleSchemaEnhancer = ({ schema, intl }) => {
// return CardStylingSchemaEnhancer({ schema });
// };

// Listing.schemaEnhancer = UniversalItem.schemaEnhancer;
//
// Listing.styleSchemaEnhancer = ({ schema, intl }) => {
// return schema;
// };
// listing.stylesSchema = BasicListingBlockStylesSchema;
// stylesSchema: Summary.styleSchemaEnhancer,
// stylesSchema: CardStylingSchemaEnhancer,
// stylesSchema: CardsCarousel.styleSchemaEnhancer,
// stylesSchema: SearchItemLayout.styleSchemaEnhancer,
// {
// id: 'customNewsListVariationId',
// isDefault: false,
// title: 'News List',
// template: NewsList,
// // schemaEnhancer: NewsList.schemaEnhancer,
// },
// Theming
// This bug needs to be fixed first: https://github.com/plone/volto/issues/3675
// listing.enableStyling = true;
// import NewsList from './templates/NewsList';
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { ConditionalLink, FormattedDate } from '@plone/volto/components';
import { getVoltoStyles } from '@eeacms/volto-listing-block/schema-utils';

import PreviewImage from '@eeacms/volto-listing-block/PreviewImage';
// import { universalItemSchemaEnhancer } from '@eeacms/volto-listing-block/components/UniversalItem/schema';

const BodyText = ({ item, hasDate, hasDescription }) => {
return (
Expand Down Expand Up @@ -77,3 +78,5 @@ const BasicItem = (props) => {
export const DefaultItemLayout = (props) => {
return <BasicItem {...props} />;
};

// DefaultItemLayout.schemaEnhancer = universalItemSchemaEnhancer;
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import cx from 'classnames';
import PreviewImage from '@eeacms/volto-listing-block/PreviewImage';
// import { universalItemSchemaEnhancer } from '@eeacms/volto-listing-block/components/UniversalItem/schema';

const BodyText = ({ item, hasDescription }) => {
return (
Expand Down Expand Up @@ -59,6 +60,5 @@ const BasicItem = (props) => {
export const SearchItemLayout = (props) => {
return <BasicItem {...props} />;
};
SearchItemLayout.styleSchemaEnhancer = ({ schema, intl }) => {
return schema;
};

// SearchItemLayout.schemaEnhancer = universalItemSchemaEnhancer;
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import loadable from '@loadable/component';

import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard';
import ResponsiveContainer from '@eeacms/volto-listing-block/components/ResponsiveContainer';
import { CardStylingSchemaEnhancer } from '../schema';

const Slider = loadable(() => import('react-slick'));

Expand Down Expand Up @@ -116,8 +115,8 @@ const CardsCarousel = ({ block, items, ...rest }) => {
);
};

CardsCarousel.schemaEnhancer = (args) => {
const schema = UniversalCard.schemaEnhancer(args);
CardsCarousel.schemaEnhancer = ({ schema }) => {
// const schema = UniversalCard.schemaEnhancer(args);

schema.fieldsets.splice(1, 0, {
id: 'carousel',
Expand Down Expand Up @@ -146,8 +145,4 @@ CardsCarousel.schemaEnhancer = (args) => {
};
};

CardsCarousel.styleSchemaEnhancer = ({ schema, intl }) => {
return CardStylingSchemaEnhancer({ schema });
};

export default CardsCarousel;
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import React from 'react';
import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard';
import config from '@plone/volto/registry';

const CardsGallery = ({
const Gallery = ({
block,
items,
gridSize,
Expand All @@ -27,9 +27,10 @@ const CardsGallery = ({
);
};

CardsGallery.schemaEnhancer = (args) => {
const schema = UniversalCard.schemaEnhancer(args);
Gallery.schemaEnhancer = ({ schema }) => {
// const schema = UniversalCard.schemaEnhancer(args);
// schema.fieldsets[0].fields.push('gridSize');

schema.fieldsets.splice(1, 0, {
id: 'cardsGallery',
title: 'Gallery',
Expand All @@ -52,13 +53,13 @@ CardsGallery.schemaEnhancer = (args) => {
return schema;
};

CardsGallery.propTypes = {
Gallery.propTypes = {
items: PropTypes.arrayOf(PropTypes.any).isRequired,
linkMore: PropTypes.any,
isEditMode: PropTypes.bool,
};

export default CardsGallery;
export default Gallery;

// const makeTextBody = (item) => (
// <Card.Content>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
import moment from 'moment'; // TODO: this needs to be lazyloaded!!!

import { ConditionalLink } from '@plone/volto/components';
import UniversalItem from '@eeacms/volto-listing-block/components/UniversalItem/UniversalItem';
import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard';
import { flattenToAppURL } from '@plone/volto/helpers';
import { isInternalURL } from '@plone/volto/helpers/Url/Url';
import config from '@plone/volto/registry';

const SummaryListing = (props) => {
const Listing = (props) => {
const { block, items, linkTitle, linkHref, isEditMode } = props;
let href = linkHref?.[0]?.['@id'] || '';

Expand All @@ -26,7 +26,7 @@ const SummaryListing = (props) => {
<div className="items">
{items && items.length > 0 ? (
items.map((item, index) => (
<UniversalItem
<UniversalCard
{...props}
key={`item-${block}-${index}`}
item={item}
Expand All @@ -42,16 +42,12 @@ const SummaryListing = (props) => {
);
};

SummaryListing.schemaEnhancer = UniversalItem.schemaEnhancer;

SummaryListing.styleSchemaEnhancer = ({ schema, intl }) => {
return schema;
};

SummaryListing.propTypes = {
Listing.propTypes = {
items: PropTypes.arrayOf(PropTypes.any).isRequired,
linkMore: PropTypes.any,
isEditMode: PropTypes.bool,
};

export default SummaryListing;
Listing.schemaEnhancer = ({ schema }) => schema;

export default Listing;
File renamed without changes.
Loading

0 comments on commit bf3fdd9

Please sign in to comment.