fix: empty url when read from related (#615)

* fix: empty url when read from related

* fix:PR fixes

Author: jiwanska0

README.md

@@ -168,7 +168,7 @@ Config for this plugin is stored as a part of the `config/plugins.{js|ts}` or `c
 - `contentTypes` - UIDs of related content types
 - `defaultContentTypes` - UID of content type that will be selected by default while creating a new navigation item
 - `contentTypesNameFields` - Definition of content type title fields like `'api::<collection name>.<content type name>': ['field_name_1', 'field_name_2']`, if not set titles are pulled from fields like `['title', 'subject', 'name']`. **TIP** - Proper content type uid you can find in the URL of Content Manager where you're managing relevant entities like: `admin/content-manager/collectionType/< THE UID HERE >?page=1&pageSize=10&sort=Title:ASC&plugins[i18n][locale]=en`
-- `pathDefaultFields` - The attribute to copy the default path from per content type. Syntax: `'api::<collection name>.<content type name>': ['url_slug', 'path']`
+- `pathDefaultFields` - The attribute to copy the default path from per content type. Syntax: `'api::<collection name>.<content type name>': ['url_slug', 'path']`. If you leave it empty, the default path is generated based on the ID.
 - `gql` - If you're using GraphQL that's the right place to put all necessary settings. More **[ here ](#gql-configuration)**
 - `cascadeMenuAttached` - If you don't want "Menu attached" to cascade on child items set this value `Disabled`.
 

admin/src/pages/HomePage/components/NavigationItemForm/components/PathField/index.tsx

@@ -10,6 +10,7 @@ import { generatePreviewPath } from '../../utils/properties';
 import { useConfig } from '../../../../hooks';
 import { NavigationItemFormSchema } from '../../utils/form';
 import { StrapiContentTypeItemSchema } from 'src/api/validators';
+import { isEmpty } from 'lodash';
 
 type PathFieldProps = {
   contentTypeItems: StrapiContentTypeItemSchema[] | undefined;
@@ -34,9 +35,9 @@ export const PathField: React.FC<PathFieldProps> = ({
     values.type === 'INTERNAL'
       ? values
       : {
-          related: undefined,
-          relatedType: undefined,
-        };
+        related: undefined,
+        relatedType: undefined,
+      };
 
   const pathDefault = generatePreviewPath({
     currentPath: values.path,
@@ -50,6 +51,12 @@ export const PathField: React.FC<PathFieldProps> = ({
     isSingleSelected,
   });
 
+  const disabled =
+    !canUpdate || (values.autoSync && values.type === 'INTERNAL')
+
+  const [pathDefaultFieldsValue] =
+    Object.values(configQuery.data?.pathDefaultFields ?? {}).flat()
+
   return (
     <Grid.Item alignItems="flex-start" key="title" col={12}>
       <Field
@@ -60,13 +67,20 @@ export const PathField: React.FC<PathFieldProps> = ({
           formatMessage(getTrad(`popup.item.form.${pathSourceName}.placeholder`, 'e.g. Blog')),
           pathDefault
             ? formatMessage(getTrad('popup.item.form.type.external.description'), {
-                value: pathDefault,
-              })
+              value: pathDefault,
+            })
+            : '',
+          disabled
+            ? formatMessage(getTrad('popup.item.form.type.internal.source'), {
+              value: !isEmpty(pathDefaultFieldsValue)
+                ? pathDefaultFieldsValue
+                : "id"
+            })
             : '',
         ].join(' ')}
       >
         <TextInput
-          disabled={!canUpdate}
+          disabled={disabled}
           name={pathSourceName}
           onChange={(eventOrPath: FormChangeEvent, value?: any) =>
             handleChange(eventOrPath, value, onChange)

admin/src/pages/HomePage/components/NavigationItemForm/components/RelatedEntityField/hooks.ts

@@ -11,7 +11,7 @@ export const useChangeFieldsFromRelated = (
   const configQuery = useConfig();
 
   useEffect(() => {
-    if (!values.autoSync || !values.related || !configQuery.data) {
+    if (!values.autoSync || !values.related || !values.relatedType || !configQuery.data) {
       return;
     }
 
@@ -21,21 +21,21 @@ export const useChangeFieldsFromRelated = (
 
     if (!relatedItem) {
       return;
-    }
-
+    } 
+    
     const { contentTypesNameFields, pathDefaultFields } = configQuery.data;
 
-    const nextPath = pathDefaultFields[values.relatedType]?.reduce<string | undefined>(
+    const nextPath = (pathDefaultFields[values.relatedType]?.reduce<string | undefined>(
       (acc, field) => {
         return acc ? acc : relatedItem?.[field];
       },
-      undefined
-    ) || '';
+      undefined 
+   ) || relatedItem.id).toString();
 
     const nextTitle = (contentTypesNameFields[values.relatedType] ?? [])
       .concat(contentTypesNameFields.default ?? [])
       .reduce<undefined | string>((acc, field) => {
-        return acc ? acc : relatedItem?.[field];
+        return acc ? acc.toString() : relatedItem?.[field];
       }, undefined);
 
     const batch: Array<{ name: keyof NavigationItemFormSchema; value: string }> = [];

admin/src/translations/ca.ts

@@ -139,6 +139,7 @@ const ca = {
           label: "Type d'élément de navigation",
           internal: {
             label: 'Source interne',
+            source: 'URL basat en: {value}',
           },
           external: {
             label: 'Source externe',

admin/src/translations/en.ts

@@ -143,6 +143,7 @@ const en = {
           label: 'Navigation item type',
           internal: {
             label: 'Internal source',
+            source: 'URL based on: {value}',
           },
           external: {
             label: 'External source',

admin/src/translations/es.ts

@@ -144,6 +144,7 @@ const en = {
           label: 'Tipo de ítem de navegación',
           internal: {
             label: 'Fuente interna',
+            source: 'URL basado en: {value}',
           },
           external: {
             label: 'Fuente externa',

admin/src/translations/fr.ts

@@ -143,6 +143,7 @@ const fr = {
           label: "Type d'élément de navigation",
           internal: {
             label: 'Source interne',
+            source: 'URL basé sur: {value}',
           },
           external: {
             label: 'Source externe',

admin/src/translations/tr.ts

@@ -143,6 +143,7 @@ const tr = {
           label: 'Navigasyon öğesi türü',
           internal: {
             label: 'Dahili kaynak',
+            source: 'URL dayalı: {value}',
           },
           external: {
             label: 'Harici kaynak',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-navigation",
-  "version": "3.2.5",
+  "version": "3.2.5-beta.1",
   "description": "Strapi - Navigation plugin",
   "strapi": {
     "name": "navigation",