strapi-plugin-navigation 2.0.4 → 2.0.7

package/README.md

@@ -41,6 +41,7 @@ Strapi Navigation Plugin provides a website navigation / menu builder feature fo
 - **Navigation Public API:** Simple and ready for use API endpoint for consuming the navigation structure you've created
 - **Visual builder:** Elegant and easy to use visual builder
 - **Any Content Type relation:** Navigation can by linked to any of your Content Types by default. Simply, you're controlling it and also limiting available content types by configuration props
+- **Different types of navigation items:** Create navigation with items linked to internal types, to external links or wrapper elements to keep structure clean 
 - **Multiple navigations:** Create as many Navigation containers as you want, setup them and use in the consumer application
 - **Customizable:** Possibility to customize the options like: available Content Types, Maximum level for "attach to menu", Additional fields (audience)
 - **[Audit log](https://github.com/VirtusLab/strapi-molecules/tree/master/packages/strapi-plugin-audit-log):** integration with Strapi Molecules Audit Log plugin that provides changes track record
@@ -81,7 +82,7 @@ Complete installation requirements are exact same as for Strapi itself and can b
 
 **Supported Strapi versions**:
 
-- Strapi v4.1.0 (recently tested)
+- Strapi v4.1.5 (recently tested)
 - Strapi v4.x
 
 > This plugin is designed for **Strapi v4** and is not working with v3.x. To get version for **Strapi v3** install version [v1.x](https://github.com/VirtusLab-Open-Source/strapi-plugin-navigation/tree/strapi-v3).

package/admin/src/components/CollapseButton/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components'
+import { Flex } from '@strapi/design-system/Flex';
+import { Typography } from '@strapi/design-system/Typography';
+import { Icon } from '@strapi/design-system/Icon';
+import { CarretUp, CarretDown } from '@strapi/icons';
+
+const Wrapper = styled.div`
+	border-radius: 50%;
+	background: #DCDCE4;
+	width: 25px;
+	height: 25px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-right: 8px;
+`;
+
+const CollapseButton = ({ toggle, collapsed, itemsCount }) => (
+	<Flex justifyContent='space-between' alignItems='center' onClick={toggle} cursor="pointer" style={{ marginRight: '16px' }}>
+		<Wrapper>
+			{ collapsed ?
+				<Icon as={CarretDown} width='7px' height='4px' /> :
+				<Icon as={CarretUp} width='7px' height='4px' />
+			}
+		</Wrapper>
+		<Typography variant="pi">{itemsCount} nested items</Typography>
+	</Flex >
+);
+
+export default CollapseButton;

package/admin/src/components/Item/ItemCardBadge/index.js

@@ -4,15 +4,15 @@ import { Badge } from '@strapi/design-system/Badge';
 const ItemCardBadge = styled(Badge)`
 		border: 1px solid ${({ theme, borderColor }) => theme.colors[borderColor]};
 
-		${ props => props.small && `
-			padding: ${props.theme.spaces[1]};
-			margin: 0px ${props.theme.spaces[3]};
+		${ ({small, theme}) => small && `
+			padding: ${theme.spaces[1]} ${theme.spaces[2]};
+			margin: 0px ${theme.spaces[3]};
 			vertical-align: middle;
 
 			cursor: default;
 
 			span {
-				font-size: .55rem;
+				font-size: .65rem;
 				line-height: 1;
 				vertical-align: middle;
 			}

package/admin/src/components/Item/ItemCardHeader/Wrapper.js

@@ -9,10 +9,6 @@ const CardItemTitle = styled(CardTitle)`
 	justify-content: space-between;
 	align-items: center;
 	
-	color: ${({ theme }) => theme.colors.neutral800};
-	font-size: ${({ theme }) => theme.fontSizes[2]};
-	font-weight: ${({ theme }) => theme.fontWeights.bold};
-
 	> div > * {
 			margin: 0px ${({ theme }) => theme.spaces[1]};
 	}

package/admin/src/components/Item/ItemCardHeader/index.js

@@ -4,26 +4,27 @@ import { Flex } from '@strapi/design-system/Flex';
 import { IconButton } from '@strapi/design-system/IconButton';
 import { Typography } from '@strapi/design-system/Typography';
 import { Icon } from '@strapi/design-system/Icon';
-import { Pencil, Trash, Refresh } from '@strapi/icons/';
+import { Pencil, Trash, Refresh, Drag } from '@strapi/icons/';
 
 import Wrapper from './Wrapper';
 import ItemCardBadge from '../ItemCardBadge';
 import { getMessage } from '../../../utils';
 
-const ItemCardHeader = ({ title, path, icon, removed, onItemRemove, onItemEdit, onItemRestore }) => {
+const ItemCardHeader = ({ title, path, icon, removed, onItemRemove, onItemEdit, onItemRestore, dragRef }) => {
 	return (
 		<Wrapper>
 			<Flex alignItems="center">
-				<Icon as={icon} />
+				<IconButton ref={dragRef} label="Drag" icon={<Drag />} />
 				<Typography variant="omega" fontWeight="bold">
 					{title}
 				</Typography>
 				<Typography variant="omega" fontWeight="bold" textColor='neutral500'>
 					{path}
 				</Typography>
+				<Icon as={icon}/>
 			</Flex>
 			<Flex alignItems="center" style={{ zIndex: 2 }}>
-				{removed && 
+				{removed &&
 					(<ItemCardBadge
 						borderColor={`danger200`}
 						backgroundColor={`danger100`}

package/admin/src/components/Item/Wrapper.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 const Wrapper = styled.div`
 position: relative;
 margin-top: ${({theme}) => theme.spaces[2]};
-margin-left: ${({ theme, level }) => level && theme.spaces[8]}};
+margin-left: ${({ level }) => level && '54px'}};
 
 ${({ level, theme, isLast }) => level && `
 	&::before {

package/admin/src/components/Item/index.js

@@ -1,6 +1,8 @@
+import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import React from 'react';
-import { isEmpty, isNumber } from 'lodash';
+import { useDrag, useDrop } from 'react-dnd';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import { drop, isEmpty, isNumber } from 'lodash';
 
 import { Box } from '@strapi/design-system/Box';
 import { Card, CardBody } from '@strapi/design-system/Card';
@@ -9,7 +11,7 @@ import { Flex } from '@strapi/design-system/Flex';
 import { Link } from '@strapi/design-system/Link';
 import { TextButton } from '@strapi/design-system/TextButton';
 import { Typography } from '@strapi/design-system/Typography';
-import { ArrowRight, Link as LinkIcon, Earth, Plus } from '@strapi/icons';
+import { ArrowRight, Link as LinkIcon, Earth, Plus, Cog } from '@strapi/icons';
 
 import { navigationItemType } from '../../pages/View/utils/enums';
 import ItemCardHeader from './ItemCardHeader';
@@ -18,7 +20,8 @@ import Wrapper from './Wrapper';
 import { extractRelatedItemLabel } from '../../pages/View/utils/parsers';
 import ItemCardBadge from './ItemCardBadge';
 import { ItemCardRemovedOverlay } from './ItemCardRemovedOverlay';
-import { getMessage } from '../../utils';
+import { getMessage, ItemTypes } from '../../utils';
+import CollapseButton from '../CollapseButton';
 
 const Item = (props) => {
   const {
@@ -33,6 +36,8 @@ const Item = (props) => {
     onItemRemove,
     onItemRestore,
     onItemEdit,
+    onItemReOrder,
+    onItemToggleCollapse,
     error,
     displayChildren,
     config = {},
@@ -46,10 +51,12 @@ const Item = (props) => {
     removed,
     externalPath,
     menuAttached,
+    collapsed,
   } = item;
 
   const { contentTypes, contentTypesNameFields } = config;
   const isExternal = type === navigationItemType.EXTERNAL;
+  const isWrapper = type === navigationItemType.WRAPPER;
   const isPublished = relatedRef && relatedRef?.publishedAt;
   const isNextMenuAllowedLevel = isNumber(allowedLevels) ? level < (allowedLevels - 1) : true;
   const isMenuAllowedLevel = isNumber(allowedLevels) ? level < allowedLevels : true;
@@ -60,73 +67,126 @@ const Item = (props) => {
   const relatedTypeLabel = relatedRef?.labelSingular;
   const relatedBadgeColor = isPublished ? 'success' : 'secondary';
 
+  const dragRef = useRef(null);
+  const dropRef = useRef(null);
+  const previewRef = useRef(null);
+
+  const [, drop] = useDrop({
+    accept: `${ItemTypes.NAVIGATION_ITEM}_${levelPath}`,
+    hover(hoveringItem, monitor) {
+      const dragIndex = hoveringItem.order;
+      const dropIndex = item.order;
+
+      // Don't replace items with themselves
+      if (dragIndex === dropIndex) {
+        return;
+      }
+
+      const hoverBoundingRect = dropRef.current.getBoundingClientRect();
+      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+      const clientOffset = monitor.getClientOffset();
+      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+
+      // Place the hovering item before or after the drop target
+      const isAfter = hoverClientY > hoverMiddleY;
+      const newOrder = isAfter ? item.order + 0.5 : item.order - 0.5;
+
+      onItemReOrder({ ...hoveringItem }, newOrder);
+    },
+    collect: monitor => ({
+      isOverCurrent: monitor.isOver({ shallow: true }),
+    })
+  });
+
+  const [{ isDragging }, drag, dragPreview] = useDrag({
+    type: `${ItemTypes.NAVIGATION_ITEM}_${levelPath}`,
+    item: () => {
+      return { ...item, relatedRef };
+    },
+    collect: monitor => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  const refs = {
+    dragRef: drag(dragRef),
+    dropRef: drop(dropRef),
+    previewRef: dragPreview(previewRef),
+  }
+
   return (
-    <Wrapper level={level} isLast={isLast}>
+    <Wrapper level={level} isLast={isLast} style={{ opacity: isDragging ? 0.2 : 1 }} ref={refs ? refs.dropRef : null} >
       <Card style={{ width: "728px", zIndex: 1, position: "relative", overflow: 'hidden' }}>
-        { removed && (<ItemCardRemovedOverlay />) }
-        <CardBody>
-          <ItemCardHeader
-            title={title}
-            path={isExternal ? externalPath : absolutePath}
-            icon={isExternal ? Earth : LinkIcon }
-            onItemRemove={() => onItemRemove({
-              ...item,
-              relatedRef,
-            })}
-            onItemEdit={() => onItemEdit({
-              ...item,
-              isMenuAllowedLevel,
-              isParentAttachedToMenu,
-            }, levelPath, isParentAttachedToMenu)}
-            onItemRestore={() => onItemRestore({
-              ...item,
-              relatedRef,
-            })}
-            removed={removed}
-          />
-        </CardBody>
-        <Divider />
-        { !isExternal && (<CardBody style={{ margin: '8px' }}>
-          <Flex style={{ width: '100%' }} direction="row" alignItems="center" justifyContent="space-between">
-            <TextButton
-              disabled={removed}
-              startIcon={<Plus />}
-              onClick={(e) => onItemLevelAdd(e, viewId, isNextMenuAllowedLevel, absolutePath, menuAttached)}
-            >
-              <Typography variant="pi" fontWeight="bold" textColor={removed ? "neutral600" : "primary600"}>
-                {getMessage("components.navigationItem.action.newItem")}
-              </Typography>
-            </TextButton>
-            { relatedItemLabel && (<Box>
-                <ItemCardBadge
-                  borderColor={`${relatedBadgeColor}200`}
-                  backgroundColor={`${relatedBadgeColor}100`}
-                  textColor={`${relatedBadgeColor}600`}
-                  className="action"
-                  small
+        {removed && (<ItemCardRemovedOverlay />)}
+        <div ref={refs.previewRef}>
+          <CardBody>
+            <ItemCardHeader
+              title={title}
+              path={isExternal ? externalPath : absolutePath}
+              icon={isExternal ? Earth : isWrapper ? Cog : LinkIcon}
+              onItemRemove={() => onItemRemove({
+                ...item,
+                relatedRef,
+              })}
+              onItemEdit={() => onItemEdit({
+                ...item,
+                isMenuAllowedLevel,
+                isParentAttachedToMenu,
+                relatedRef,
+              }, levelPath, isParentAttachedToMenu)}
+              onItemRestore={() => onItemRestore({
+                ...item,
+                relatedRef,
+              })}
+              dragRef={refs.dragRef}
+              removed={removed}
+            />
+          </CardBody>
+          <Divider />
+          {!isExternal && (
+            <CardBody style={{ padding: '8px' }}>
+              <Flex style={{ width: '100%' }} direction="row" alignItems="center" justifyContent="space-between">
+                <Flex>
+                  {!isEmpty(item.items) && <CollapseButton toggle={() => onItemToggleCollapse({...item, relatedRef})} collapsed={collapsed} itemsCount={item.items.length}/>}
+                  <TextButton
+                    disabled={removed}
+                    startIcon={<Plus />}
+                    onClick={(e) => onItemLevelAdd(e, viewId, isNextMenuAllowedLevel, absolutePath, menuAttached)}
                   >
-                {getMessage({
-                  id: `components.navigationItem.badge.${isPublished ? 'published' : 'draft'}`, props: {
-                    type: relatedTypeLabel
-                  }
-                })}
-                </ItemCardBadge>
-                <Typography variant="pi" fontWeight="bold" textColor="neutral600">
-                  { relatedItemLabel }
-                  <Link 
-                    to={`/content-manager/collectionType/${relatedRef?.__collectionUid}/${relatedRef?.id}`} 
-                    endIcon={<ArrowRight />}>&nbsp;</Link>
-                </Typography>
-              </Box>)
-            }
-          </Flex>
-        </CardBody>)}
+                    <Typography variant="pi" fontWeight="bold" textColor={removed ? "neutral600" : "primary600"}>
+                      {getMessage("components.navigationItem.action.newItem")}
+                    </Typography>
+                  </TextButton>
+                </Flex>
+                {relatedItemLabel && (
+                  <Flex justifyContent='center' alignItems='center'>
+                    <ItemCardBadge
+                      borderColor={`${relatedBadgeColor}200`}
+                      backgroundColor={`${relatedBadgeColor}100`}
+                      textColor={`${relatedBadgeColor}600`}
+                      className="action"
+                      small
+                    >
+                      {getMessage({id: `components.navigationItem.badge.${isPublished ? 'published' : 'draft'}`})}
+                    </ItemCardBadge>
+                    <Typography variant="omega" textColor='neutral600'>{relatedTypeLabel}&nbsp;/&nbsp;</Typography>
+                    <Typography variant="omega" textColor='neutral800'>{relatedItemLabel}</Typography>
+                      <Link
+                        to={`/content-manager/collectionType/${relatedRef?.__collectionUid}/${relatedRef?.id}`}
+                        endIcon={<ArrowRight />}>&nbsp;</Link>
+                  </Flex>)
+                }
+              </Flex>
+            </CardBody>)}
+        </div>
       </Card>
-      {hasChildren && !removed && <List
+      {hasChildren && !removed && !collapsed && <List
         onItemLevelAdd={onItemLevelAdd}
         onItemRemove={onItemRemove}
         onItemEdit={onItemEdit}
         onItemRestore={onItemRestore}
+        onItemReOrder={onItemReOrder}
+        onItemToggleCollapse={onItemToggleCollapse}
         error={error}
         allowedLevels={allowedLevels}
         isParentAttachedToMenu={menuAttached}
@@ -150,7 +210,8 @@ Item.propTypes = {
     path: PropTypes.string,
     externalPath: PropTypes.string,
     related: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    menuAttached: PropTypes.bool
+    menuAttached: PropTypes.bool,
+    collapsed: PropTypes.bool,
   }).isRequired,
   relatedRef: PropTypes.object,
   level: PropTypes.number,
@@ -159,9 +220,11 @@ Item.propTypes = {
   onItemRestore: PropTypes.func.isRequired,
   onItemLevelAdd: PropTypes.func.isRequired,
   onItemRemove: PropTypes.func.isRequired,
+  onItemReOrder: PropTypes.func.isRequired,
+  onItemToggleCollapse: PropTypes.func.isRequired,
   config: PropTypes.shape({
-    contentTypes: PropTypes.array.isRequired, 
-    contentTypesNameFields: PropTypes.object.isRequired, 
+    contentTypes: PropTypes.array.isRequired,
+    contentTypesNameFields: PropTypes.object.isRequired,
   }).isRequired
 };
 

package/admin/src/components/NavigationItemList/Wrapper.js

@@ -11,7 +11,7 @@ const Wrapper = styled.div`
 
       position: absolute;
       top: -${theme.spaces[2]};
-      left: ${theme.spaces[4]};
+      left: 30px;
       
       border: 0px solid transparent;
       border-left: 4px solid ${theme.colors.neutral300};

package/admin/src/components/NavigationItemList/index.js

@@ -15,6 +15,8 @@ const List = ({
   onItemLevelAdd,
   onItemRemove,
   onItemRestore,
+  onItemReOrder,
+  onItemToggleCollapse,
   displayFlat,
   contentTypes,
   contentTypesNameFields,
@@ -36,6 +38,8 @@ const List = ({
           onItemLevelAdd={onItemLevelAdd}
           onItemRemove={onItemRemove}
           onItemEdit={onItemEdit}
+          onItemReOrder={onItemReOrder}
+          onItemToggleCollapse={onItemToggleCollapse}
           error={error}
           displayChildren={displayFlat}
           config={{
@@ -57,6 +61,8 @@ List.propTypes = {
   onItemRemove: PropTypes.func.isRequired,
   onItemRestore: PropTypes.func.isRequired,
   onItemRestore: PropTypes.func.isRequired,
+  onItemReOrder: PropTypes.func.isRequired,
+  onItemToggleCollapse: PropTypes.func.isRequired,
   contentTypes: PropTypes.array.isRequired,
   contentTypesNameFields: PropTypes.object.isRequired
 };

package/admin/src/components/Search/index.js

@@ -29,7 +29,7 @@ const Search = ({ value, setValue }) => {
 					onChange={(e) => setValue(e.target.value)}
 					clearLabel="Clearing the search"
 					placeholder={formatMessage({
-						id: getTradId('popup.item.form.audience.placeholder'),
+						id: getTradId('pages.main.search.placeholder'),
 						defaultMessage: 'Type to start searching...',
 					})}
 				>