@pranaysahith/decap-cms-core 3.9.1

package/src/components/Collection/Entries/EntriesCollection.js

@@ -0,0 +1,277 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { connect } from 'react-redux';
+import styled from '@emotion/styled';
+import { translate } from 'react-polyglot';
+import partial from 'lodash/partial';
+import { Cursor } from 'decap-cms-lib-util';
+import { colors } from 'decap-cms-ui-default';
+
+import {
+  loadEntries as actionLoadEntries,
+  traverseCollectionCursor as actionTraverseCollectionCursor,
+} from '../../../actions/entries';
+import { loadUnpublishedEntries } from '../../../actions/editorialWorkflow';
+import {
+  selectEntries,
+  selectEntriesLoaded,
+  selectIsFetching,
+  selectGroups,
+} from '../../../reducers/entries';
+import { selectUnpublishedEntry, selectUnpublishedEntriesByStatus } from '../../../reducers';
+import { selectCollectionEntriesCursor } from '../../../reducers/cursors';
+import Entries from './Entries';
+
+const GroupHeading = styled.h2`
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 37px;
+  padding-inline-start: 20px;
+  color: ${colors.textLead};
+`;
+
+const GroupContainer = styled.div``;
+
+function getGroupEntries(entries, paths) {
+  return entries.filter(entry => paths.has(entry.get('path')));
+}
+
+function getGroupTitle(group, t) {
+  const { label, value } = group;
+  if (value === undefined) {
+    return t('collection.groups.other');
+  }
+  if (typeof value === 'boolean') {
+    return value ? label : t('collection.groups.negateLabel', { label });
+  }
+  return `${label} ${value}`.trim();
+}
+
+function withGroups(groups, entries, EntriesToRender, t) {
+  return groups.map(group => {
+    const title = getGroupTitle(group, t);
+    return (
+      <GroupContainer key={group.id} id={group.id}>
+        <GroupHeading>{title}</GroupHeading>
+        <EntriesToRender entries={getGroupEntries(entries, group.paths)} />
+      </GroupContainer>
+    );
+  });
+}
+
+export class EntriesCollection extends React.Component {
+  static propTypes = {
+    collection: ImmutablePropTypes.map.isRequired,
+    collections: ImmutablePropTypes.iterable,
+    page: PropTypes.number,
+    entries: ImmutablePropTypes.list,
+    groups: PropTypes.array,
+    isFetching: PropTypes.bool.isRequired,
+    viewStyle: PropTypes.string,
+    cursor: PropTypes.object.isRequired,
+    loadEntries: PropTypes.func.isRequired,
+    traverseCollectionCursor: PropTypes.func.isRequired,
+    entriesLoaded: PropTypes.bool,
+    loadUnpublishedEntries: PropTypes.func.isRequired,
+    unpublishedEntriesLoaded: PropTypes.bool,
+    isEditorialWorkflowEnabled: PropTypes.bool,
+    getWorkflowStatus: PropTypes.func.isRequired,
+    getUnpublishedEntries: PropTypes.func.isRequired,
+  };
+
+  componentDidMount() {
+    // Manually validate PropTypes - React 19 breaking change
+    PropTypes.checkPropTypes(EntriesCollection.propTypes, this.props, 'prop', 'EntriesCollection');
+
+    const {
+      collection,
+      collections,
+      entriesLoaded,
+      loadEntries,
+      unpublishedEntriesLoaded,
+      loadUnpublishedEntries,
+      isEditorialWorkflowEnabled,
+    } = this.props;
+
+    if (collection && !entriesLoaded) {
+      loadEntries(collection);
+    }
+
+    if (isEditorialWorkflowEnabled && !unpublishedEntriesLoaded) {
+      loadUnpublishedEntries(collections);
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      collection,
+      collections,
+      entriesLoaded,
+      loadEntries,
+      unpublishedEntriesLoaded,
+      loadUnpublishedEntries,
+      isEditorialWorkflowEnabled,
+    } = this.props;
+
+    if (collection !== prevProps.collection && !entriesLoaded) {
+      loadEntries(collection);
+    }
+
+    if (
+      isEditorialWorkflowEnabled &&
+      (!unpublishedEntriesLoaded || collection !== prevProps.collection)
+    ) {
+      loadUnpublishedEntries(collections);
+    }
+  }
+
+  handleCursorActions = (cursor, action) => {
+    const { collection, traverseCollectionCursor } = this.props;
+    traverseCollectionCursor(collection, action);
+  };
+
+  render() {
+    const {
+      collection,
+      entries,
+      groups,
+      isFetching,
+      viewStyle,
+      cursor,
+      page,
+      t,
+      getWorkflowStatus,
+      getUnpublishedEntries,
+      filterTerm,
+    } = this.props;
+
+    const EntriesToRender = ({ entries }) => {
+      return (
+        <Entries
+          collections={collection}
+          entries={entries}
+          isFetching={isFetching}
+          collectionName={collection.get('label')}
+          viewStyle={viewStyle}
+          cursor={cursor}
+          handleCursorActions={partial(this.handleCursorActions, cursor)}
+          page={page}
+          getWorkflowStatus={getWorkflowStatus}
+          getUnpublishedEntries={getUnpublishedEntries}
+          filterTerm={filterTerm}
+        />
+      );
+    };
+
+    if (groups && groups.length > 0) {
+      return withGroups(groups, entries, EntriesToRender, t);
+    }
+
+    return <EntriesToRender entries={entries} />;
+  }
+}
+
+export function filterNestedEntries(path, collectionFolder, entries, subfolders) {
+  const filtered = entries.filter(e => {
+    let entryPath = e.get('path').slice(collectionFolder.length + 1);
+    if (!entryPath.startsWith(path)) {
+      return false;
+    }
+
+    // for subdirectories, trim off the parent folder corresponding to
+    // this nested collection entry
+    if (path) {
+      entryPath = entryPath.slice(path.length + 1);
+    }
+
+    // if subfolders legacy mode is enabled, show only immediate subfolders
+    // also show index file in root folder
+    if (subfolders) {
+      const depth = entryPath.split('/').length;
+      return path ? depth === 2 : depth <= 2;
+    }
+
+    // only show immediate children
+    return !entryPath.includes('/');
+  });
+  return filtered;
+}
+
+function mapStateToProps(state, ownProps) {
+  const { collection, viewStyle, filterTerm } = ownProps;
+  const page = state.entries.getIn(['pages', collection.get('name'), 'page']);
+
+  const collections = state.collections;
+
+  let entries = selectEntries(state.entries, collection);
+  const groups = selectGroups(state.entries, collection);
+
+  if (collection.has('nested')) {
+    const collectionFolder = collection.get('folder');
+    entries = filterNestedEntries(
+      filterTerm || '',
+      collectionFolder,
+      entries,
+      collection.get('nested').get('subfolders') !== false,
+    );
+  }
+  const entriesLoaded = selectEntriesLoaded(state.entries, collection.get('name'));
+  const isFetching = selectIsFetching(state.entries, collection.get('name'));
+
+  const rawCursor = selectCollectionEntriesCursor(state.cursors, collection.get('name'));
+  const cursor = Cursor.create(rawCursor).clearData();
+
+  const isEditorialWorkflowEnabled = state.config?.publish_mode === 'editorial_workflow';
+  const unpublishedEntriesLoaded = isEditorialWorkflowEnabled
+    ? !!state.editorialWorkflow?.getIn(['pages', 'ids'], false)
+    : true;
+
+  return {
+    collection,
+    collections,
+    page,
+    entries,
+    groups,
+    entriesLoaded,
+    isFetching,
+    viewStyle,
+    cursor,
+    unpublishedEntriesLoaded,
+    isEditorialWorkflowEnabled,
+    getWorkflowStatus: (collectionName, slug) => {
+      const unpublishedEntry = selectUnpublishedEntry(state, collectionName, slug);
+      return unpublishedEntry ? unpublishedEntry.get('status') : null;
+    },
+    getUnpublishedEntries: collectionName => {
+      if (!isEditorialWorkflowEnabled) return [];
+
+      const allStatuses = ['draft', 'pending_review', 'pending_publish'];
+      const unpublishedEntries = [];
+
+      allStatuses.forEach(statusKey => {
+        const entriesForStatus = selectUnpublishedEntriesByStatus(state, statusKey);
+        if (entriesForStatus) {
+          entriesForStatus.forEach(entry => {
+            if (entry.get('collection') === collectionName) {
+              const entryWithCollection = entry.set('collection', collectionName);
+              unpublishedEntries.push(entryWithCollection);
+            }
+          });
+        }
+      });
+
+      return unpublishedEntries;
+    },
+  };
+}
+
+const mapDispatchToProps = {
+  loadEntries: actionLoadEntries,
+  traverseCollectionCursor: actionTraverseCollectionCursor,
+  loadUnpublishedEntries: collections => loadUnpublishedEntries(collections),
+};
+
+const ConnectedEntriesCollection = connect(mapStateToProps, mapDispatchToProps)(EntriesCollection);
+
+export default translate()(ConnectedEntriesCollection);

package/src/components/Collection/Entries/EntriesSearch.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { connect } from 'react-redux';
+import isEqual from 'lodash/isEqual';
+import { Cursor } from 'decap-cms-lib-util';
+
+import { selectSearchedEntries, selectUnpublishedEntry } from '../../../reducers';
+import {
+  searchEntries as actionSearchEntries,
+  clearSearch as actionClearSearch,
+} from '../../../actions/search';
+import Entries from './Entries';
+
+class EntriesSearch extends React.Component {
+  static propTypes = {
+    isFetching: PropTypes.bool,
+    searchEntries: PropTypes.func.isRequired,
+    clearSearch: PropTypes.func.isRequired,
+    searchTerm: PropTypes.string.isRequired,
+    collections: ImmutablePropTypes.seq,
+    collectionNames: PropTypes.array,
+    entries: ImmutablePropTypes.list,
+    page: PropTypes.number,
+    getWorkflowStatus: PropTypes.func,
+  };
+
+  componentDidMount() {
+    // Manually validate PropTypes - React 19 breaking change
+    PropTypes.checkPropTypes(EntriesSearch.propTypes, this.props, 'prop', 'EntriesSearch');
+
+    const { searchTerm, searchEntries, collectionNames } = this.props;
+    searchEntries(searchTerm, collectionNames);
+  }
+
+  componentDidUpdate(prevProps) {
+    const { searchTerm, collectionNames } = this.props;
+
+    // check if the search parameters are the same
+    if (prevProps.searchTerm === searchTerm && isEqual(prevProps.collectionNames, collectionNames))
+      return;
+
+    const { searchEntries } = prevProps;
+    searchEntries(searchTerm, collectionNames);
+  }
+
+  componentWillUnmount() {
+    this.props.clearSearch();
+  }
+
+  getCursor = () => {
+    const { page } = this.props;
+    return Cursor.create({
+      actions: isNaN(page) ? [] : ['append_next'],
+    });
+  };
+
+  handleCursorActions = action => {
+    const { page, searchTerm, searchEntries, collectionNames } = this.props;
+    if (action === 'append_next') {
+      const nextPage = page + 1;
+      searchEntries(searchTerm, collectionNames, nextPage);
+    }
+  };
+
+  render() {
+    const { collections, entries, isFetching, getWorkflowStatus } = this.props;
+    return (
+      <Entries
+        cursor={this.getCursor()}
+        handleCursorActions={this.handleCursorActions}
+        collections={collections}
+        entries={entries}
+        isFetching={isFetching}
+        getWorkflowStatus={getWorkflowStatus}
+      />
+    );
+  }
+}
+
+function mapStateToProps(state, ownProps) {
+  const { searchTerm } = ownProps;
+  const collections = ownProps.collections.toIndexedSeq();
+  const collectionNames = ownProps.collections.keySeq().toArray();
+  const isFetching = state.search.isFetching;
+  const page = state.search.page;
+  const entries = selectSearchedEntries(state, collectionNames);
+
+  function getWorkflowStatus(collectionName, slug) {
+    const unpublishedEntry = selectUnpublishedEntry(state, collectionName, slug);
+    return unpublishedEntry ? unpublishedEntry.get('status') : null;
+  }
+
+  return { isFetching, page, collections, collectionNames, entries, searchTerm, getWorkflowStatus };
+}
+
+const mapDispatchToProps = {
+  searchEntries: actionSearchEntries,
+  clearSearch: actionClearSearch,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(EntriesSearch);

package/src/components/Collection/Entries/EntryCard.js

@@ -0,0 +1,246 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { colors, colorsRaw, components, lengths, zIndex } from 'decap-cms-ui-default';
+import { translate } from 'react-polyglot';
+
+import { boundGetAsset } from '../../../actions/media';
+import { VIEW_STYLE_LIST, VIEW_STYLE_GRID } from '../../../constants/collectionViews';
+import { selectIsLoadingAsset } from '../../../reducers/medias';
+import { selectEntryCollectionTitle } from '../../../reducers/collections';
+
+const ListCard = styled.li`
+  ${components.card};
+  width: ${lengths.topCardWidth};
+  margin-left: 12px;
+  margin-bottom: 10px;
+  overflow: hidden;
+`;
+
+const ListCardLink = styled(Link)`
+  display: block;
+  max-width: 100%;
+  padding: 16px 20px;
+
+  &:hover {
+    background-color: ${colors.foreground};
+  }
+`;
+
+const GridCard = styled.li`
+  ${components.card};
+  flex: 0 0 335px;
+  height: 240px;
+  overflow: hidden;
+  margin-left: 12px;
+  margin-bottom: 16px;
+`;
+
+const GridCardLink = styled(Link)`
+  display: block;
+  height: 100%;
+  outline-offset: -2px;
+
+  &,
+  &:hover {
+    background-color: ${colors.foreground};
+    color: ${colors.text};
+  }
+`;
+
+const CollectionLabel = styled.h2`
+  font-size: 12px;
+  color: ${colors.textLead};
+  text-transform: uppercase;
+`;
+
+const ListCardTitle = styled.h2`
+  margin-bottom: 0;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const CardHeading = styled.h2`
+  margin: 0 0 2px;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const CardBody = styled.div`
+  padding: 16px 20px;
+  height: 90px;
+  position: relative;
+  margin-bottom: ${props => props.hasImage && 0};
+
+  &:after {
+    content: '';
+    position: absolute;
+    display: block;
+    z-index: ${zIndex.zIndex1};
+    bottom: 0;
+    left: -20%;
+    height: 140%;
+    width: 140%;
+    box-shadow: inset 0 -15px 24px ${colorsRaw.white};
+  }
+`;
+
+const CardImage = styled.div`
+  background-image: url(${props => props.src});
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  height: 150px;
+`;
+
+const TitleIcons = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const WorkflowBadge = styled.span`
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 11px;
+  text-transform: uppercase;
+  background-color: ${props => {
+    switch (props.status) {
+      case 'draft':
+        return colors.statusDraftBackground;
+      case 'pending_review':
+        return colors.statusReviewBackground;
+      case 'pending_publish':
+        return colors.statusReadyBackground;
+      default:
+        return colors.background;
+    }
+  }};
+  color: ${props => {
+    switch (props.status) {
+      case 'draft':
+        return colors.statusDraftText;
+      case 'pending_review':
+        return colors.statusReviewText;
+      case 'pending_publish':
+        return colors.statusReadyText;
+      default:
+        return colors.text;
+    }
+  }};
+`;
+
+function EntryCard({
+  path,
+  summary,
+  image,
+  imageField,
+  collectionLabel,
+  viewStyle = VIEW_STYLE_LIST,
+  workflowStatus,
+  getAsset,
+  t,
+}) {
+  function getStatusLabel(status) {
+    switch (status) {
+      case 'pending_review':
+        return t('editor.editorToolbar.inReview');
+      case 'pending_publish':
+        return t('editor.editorToolbar.ready');
+      case 'draft':
+        return t('editor.editorToolbar.draft');
+      default:
+        return status;
+    }
+  }
+
+  if (viewStyle === VIEW_STYLE_LIST) {
+    return (
+      <ListCard>
+        <ListCardLink to={path}>
+          {collectionLabel ? <CollectionLabel>{collectionLabel}</CollectionLabel> : null}
+          <ListCardTitle>
+            {summary}
+            <TitleIcons>
+              {workflowStatus && (
+                <WorkflowBadge status={workflowStatus}>
+                  {getStatusLabel(workflowStatus)}
+                </WorkflowBadge>
+              )}
+            </TitleIcons>
+          </ListCardTitle>
+        </ListCardLink>
+      </ListCard>
+    );
+  }
+
+  if (viewStyle === VIEW_STYLE_GRID) {
+    return (
+      <GridCard>
+        <GridCardLink to={path}>
+          <CardBody hasImage={image}>
+            {collectionLabel ? <CollectionLabel>{collectionLabel}</CollectionLabel> : null}
+            <CardHeading>
+              {summary}
+              <TitleIcons>
+                {workflowStatus && (
+                  <WorkflowBadge status={workflowStatus}>
+                    {getStatusLabel(workflowStatus)}
+                  </WorkflowBadge>
+                )}
+              </TitleIcons>
+            </CardHeading>
+          </CardBody>
+          {image ? <CardImage src={getAsset(image, imageField).toString()} /> : null}
+        </GridCardLink>
+      </GridCard>
+    );
+  }
+}
+
+function mapStateToProps(state, ownProps) {
+  const { entry, inferredFields, collection } = ownProps;
+  const entryData = entry.get('data');
+  const summary = selectEntryCollectionTitle(collection, entry);
+
+  let image = entryData.get(inferredFields.imageField);
+  if (image) {
+    image = encodeURI(image);
+  }
+
+  const isLoadingAsset = selectIsLoadingAsset(state.medias);
+
+  return {
+    summary,
+    path: `/collections/${collection.get('name')}/entries/${entry.get('slug')}`,
+    image,
+    imageFolder: collection
+      .get('fields')
+      ?.find(f => f.get('name') === inferredFields.imageField && f.get('widget') === 'image'),
+    isLoadingAsset,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    boundGetAsset: (collection, entry) => boundGetAsset(dispatch, collection, entry),
+  };
+}
+
+function mergeProps(stateProps, dispatchProps, ownProps) {
+  return {
+    ...stateProps,
+    ...dispatchProps,
+    ...ownProps,
+    getAsset: dispatchProps.boundGetAsset(ownProps.collection, ownProps.entry),
+  };
+}
+
+const ConnectedEntryCard = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+  mergeProps,
+)(translate()(EntryCard));
+
+export default ConnectedEntryCard;