Merge pull request #38 from VirtusLab/fix/uid-instead-of-collection-name

fix: use uid instead of collection name for linking
VirtusLab-Open-Source · Mar 1, 2021 · 7bfd441 · 7bfd441
2 parents fc994f0 + 96be979
commit 7bfd441
Show file tree

Hide file tree

Showing 13 changed files with 79 additions and 60 deletions.
diff --git a/__mocks__/helpers/blog-post.settings.json b/__mocks__/helpers/blog-post.settings.json
@@ -3,7 +3,7 @@
   "kind": "collectionType",
   "collectionName": "blog_posts",
   "info": {
-    "name": "Blog posts"
+    "name": "Blog post"
   },
   "options": {
     "increments": true,

diff --git a/__mocks__/helpers/page.settings.json → __mocks__/helpers/pages.settings.json b/__mocks__/helpers/page.settings.json → __mocks__/helpers/pages.settings.json
@@ -1,9 +1,9 @@
 {
-  "uid": "application::page.page",
+  "uid": "application::pages.pages",
   "kind": "collectionType",
   "collectionName": "pages",
   "info": {
-    "name": "page"
+    "name": "pages"
   },
   "options": {
     "increments": true,

diff --git a/__mocks__/helpers/strapi.js b/__mocks__/helpers/strapi.js
@@ -14,7 +14,7 @@ function setupStrapi() {
           },
           contentTypes: {
             'page': {
-                ...require('./page.settings.json'),
+                ...require('./pages.settings.json'),
                 apiName: 'pages',
                 associations: [{ model: 'navigationitem' }],
             },
@@ -30,7 +30,7 @@ function setupStrapi() {
                       navigation: jest.fn().mockImplementation(),
                   },
                   models: {
-                      'page': require('./page.settings.json'),
+                      'pages': require('./pages.settings.json'),
                       'blog-post': require('./blog-post.settings.json'),
                   }
               }

diff --git a/admin/src/components/Item/index.js b/admin/src/components/Item/index.js
@@ -28,6 +28,7 @@ const Item = (props) => {
     relatedRef,
     isFirst = false,
     isLast = false,
+    isParentAttachedToMenu,
     onItemClick,
     onItemReOrder,
     onItemRestoreClick,
@@ -79,6 +80,7 @@ const Item = (props) => {
           removed ? null : onItemClick(e, {
             ...item,
             isMenuAllowedLevel,
+            isParentAttachedToMenu,
           }, levelPath)
         }
       >
@@ -106,7 +108,7 @@ const Item = (props) => {
         <CardItemLevelAdd
           color={isNextMenuAllowedLevel ? 'primary' : 'secondary'}
           icon={<FontAwesomeIcon icon={faPlus} size="3x" />}
-          onClick={(e) => onItemLevelAddClick(e, viewId, isNextMenuAllowedLevel, levelPath)}
+          onClick={(e) => onItemLevelAddClick(e, viewId, isNextMenuAllowedLevel, levelPath, menuAttached)}
           menuLevel={isNextMenuAllowedLevel}
         />
       )}
@@ -121,6 +123,7 @@ const Item = (props) => {
           level={level + 1}
           levelPath={absolutePath}
           allowedLevels={allowedLevels}
+          isParentAttachedToMenu={menuAttached}
           contentTypesNameFields={contentTypesNameFields}
           error={error}
         />
@@ -146,6 +149,7 @@ Item.propTypes = {
   levelPath: PropTypes.string,
   isFirst: PropTypes.bool,
   isLast: PropTypes.bool,
+  isParentAttachedToMenu: PropTypes.bool,
   onItemClick: PropTypes.func.isRequired,
   onItemRestoreClick: PropTypes.func.isRequired,
   onItemLevelAddClick: PropTypes.func.isRequired,

diff --git a/admin/src/components/List/index.js b/admin/src/components/List/index.js
@@ -18,6 +18,7 @@ const List = ({
   level = 0,
   levelPath = '',
   allowedLevels,
+  isParentAttachedToMenu = false,
   contentTypesNameFields,
   error,
 }) => {
@@ -35,6 +36,7 @@ const List = ({
             levelPath={levelPath}
             isFirst={n === 0}
             isLast={n === items.length - 1}
+            isParentAttachedToMenu={isParentAttachedToMenu}
             allowedLevels={allowedLevels}
             contentTypesNameFields={contentTypesNameFields}
             onItemClick={onItemClick}
@@ -52,7 +54,7 @@ const List = ({
             menuLevel
             color="primary"
             icon={<FontAwesomeIcon icon={faPlus} />}
-            onClick={e => onItemLevelAddClick(e, null, true, levelPath)}
+            onClick={e => onItemLevelAddClick(e, null, true, levelPath, true)}
           />
         </ListLevelRoot>
       )}
@@ -65,6 +67,7 @@ List.propTypes = {
   items: PropTypes.array,
   level: PropTypes.number,
   allowedLevels: PropTypes.number,
+  isParentAttachedToMenu: PropTypes.bool,
   contentTypesNameFields: PropTypes.object.isRequired,
   onItemClick: PropTypes.func.isRequired,
   onItemReOrder: PropTypes.func.isRequired,

diff --git a/admin/src/containers/View/components/NavigationItemForm/index.js b/admin/src/containers/View/components/NavigationItemForm/index.js
@@ -42,8 +42,6 @@ const NavigationItemForm = ({
   if (!hasBeenInitialized && !isEmpty(data)) {
     setInitializedState(true);
     setFormState({ ...data });
-  } else if (hasBeenInitialized && !isEmpty(data) && data.related && data.related.label && !(form.related || {}).label) {
-    setFormState({ ...data });
   }
 
   const sanitizePayload = (payload = {}) => {
@@ -98,10 +96,13 @@ const NavigationItemForm = ({
   };
 
   const onChangeRelatedType = ({ target: { name, value } }) => {
+    const relatedTypeBeingReverted = data.relatedType && (data.relatedType.value === get(value, 'value', value));
     setFormState(prevState => ({
       ...prevState,
       updated: true,
-      related: undefined,
+      related: relatedTypeBeingReverted ? {
+        ...data.related
+      } : undefined,
       [name]: value,
     }));
     if (!hasChanged) {
@@ -126,36 +127,37 @@ const NavigationItemForm = ({
   );
 
   const isSingleSelected = useMemo(
-    () => relatedTypeSelectValue ? contentTypes.find(_ => _.collectionName === relatedType.value)?.isSingle : false,
+    () => relatedTypeSelectValue ? contentTypes.find(_ => _.uid === relatedType.value)?.isSingle : false,
     [relatedTypeSelectValue, contentTypes],
   );
 
   const relatedTypeSelectOptions = useMemo(
     () => contentTypes
-      .filter((contentType) => {
-        if (contentType.isSingle) {
-          return !usedContentTypesData.some((_) => _.__collectionName === contentType.collectionName);
-        }
-        return true;
-      })
+    .filter((contentType) => {
+      if (contentType.isSingle) {
+        return !usedContentTypesData.some((_) => _.__collectionName === contentType.uid);
+      }
+      return true;
+    })
       .map((item) => ({
-        value: get(item, 'collectionName'),
+        value: get(item, 'uid'),
         label: get(item, 'label', get(item, 'name')),
       })),
     [contentTypes, usedContentTypesData],
   );
 
   const relatedSelectOptions = contentTypeEntities
-    .filter((item) => !find(usedContentTypeEntities.filter(uctItem => uctItem.id !== get(relatedSelectValue, 'value')),
-      uctItem =>
-        (get(relatedTypeSelectValue, 'value') === uctItem.__collectionName) && (item.id === uctItem.id),
-    ))
+    .filter((item) => {
+      const usedContentTypeEntitiesOfSameType = usedContentTypeEntities
+        .filter(uctItem => (get(relatedTypeSelectValue, 'value') === uctItem.__collectionName) && (uctItem.id !== get(relatedSelectValue, 'value')));
+      return !find(usedContentTypeEntitiesOfSameType, uctItem => item.id === uctItem.id); 
+    })
     .map((item) => ({
       value: item.id,
       label: extractRelatedItemLabel({
         ...item,
         __collectionName: get(relatedTypeSelectValue, 'value', relatedTypeSelectValue),
-      }, contentTypesNameFields),
+      }, contentTypesNameFields, { contentTypes }),
     }));
 
   const isExternal = form.type === navigationItemType.EXTERNAL;
@@ -200,7 +202,7 @@ const NavigationItemForm = ({
       if (value) {
         const item = find(
           contentTypes,
-          (_) => _.collectionName === value,
+          (_) => _.uid === value,
         );
         if (item) {
           await getContentTypeEntities(item.endpoint || item.collectionName, item.plugin);
@@ -241,7 +243,7 @@ const NavigationItemForm = ({
                   <Toggle
                     name={`${inputsPrefix}menuAttached`}
                     onChange={onChange}
-                    disabled={!data.isMenuAllowedLevel}
+                    disabled={!(data.isMenuAllowedLevel && data.parentAttachedToMenu)}
                     value={get(form, `${inputsPrefix}menuAttached`, false)}
                   />
                 </Flex>

diff --git a/admin/src/containers/View/components/NavigationItemPopup/index.js b/admin/src/containers/View/components/NavigationItemPopup/index.js
@@ -38,18 +38,19 @@ const NavigationItemPopUp = ({
     contentTypesNameFields = {},
   } = config;
 
+  const relatedTypeItem = find(contentTypes, item => item.uid === relatedType, {});
   const prepareFormData = data => ({
     ...data,
     related: related ? {
       value: related,
       label: extractRelatedItemLabel({
         ...find(contentTypeItems, item => item.id === related, {}),
         __collectionName: relatedType,
-      }, contentTypesNameFields),
+      }, contentTypesNameFields, config),
     } : undefined,
     relatedType: relatedType ? {
       value: relatedType,
-      label: find(contentTypes, item => item.collectionName === relatedType, {}).label,
+      label: relatedTypeItem.label || relatedTypeItem.name,
     } : undefined,
   });
 

diff --git a/admin/src/containers/View/index.js b/admin/src/containers/View/index.js
@@ -32,12 +32,10 @@ const View = () => {
     activeItem: activeNavigation,
     changedActiveItem: changedActiveNavigation,
     config,
-    navigationPopupOpened,
     navigationItemPopupOpened,
     isLoading,
     isLoadingForAdditionalDataToBeSet,
     isLoadingForSubmit,
-    handleChangeNavigationPopupVisibility,
     handleChangeNavigationItemPopupVisibility,
     handleChangeSelection,
     handleChangeNavigationData,
@@ -78,7 +76,7 @@ const View = () => {
           __collectionName: curr.relatedRef.__collectionName,
           id: curr.relatedRef.id
         } : undefined, ...pullUsedContentTypeItem(curr.items)].filter(item => item)
-      , [])
+      , []);
   const usedContentTypeItems = pullUsedContentTypeItem((changedActiveNavigation || {}).items);
 
   const changeNavigationItemPopupState = (visible, editedItem = {}) => {
@@ -91,22 +89,30 @@ const View = () => {
     viewId = null,
     isMenuAllowedLevel = true,
     levelPath = '',
+    parentAttachedToMenu = true,
   ) => {
     e.preventDefault();
     e.stopPropagation();
     changeNavigationItemPopupState(true, {
       viewParentId: viewId,
       isMenuAllowedLevel,
       levelPath,
+      parentAttachedToMenu,
     });
   };
 
-  const editNavigationItem = (e, item, levelPath = '') => {
+  const editNavigationItem = (
+    e,
+    item,
+    levelPath = '',
+    parentAttachedToMenu = true,
+  ) => {
     e.preventDefault();
     e.stopPropagation();
     changeNavigationItemPopupState(true, {
       ...item,
       levelPath,
+      parentAttachedToMenu,
     });
   };
 
@@ -204,6 +210,7 @@ const View = () => {
                     root
                     error={error}
                     allowedLevels={config.allowedLevels}
+                    isParentAttachedToMenu={true}
                     contentTypesNameFields={config.contentTypesNameFields}
                   />
                 )}