@webbio/strapi-plugin-page-builder 0.6.0-platform → 0.8.0-platform

package/admin/src/components/PlatformFilteredSelectField/styles.tsx

@@ -0,0 +1,77 @@
+import styled, { css } from 'styled-components';
+import { Box, Link, Typography } from '@strapi/design-system';
+
+const EntityLinkWrapper = styled(Typography)`
+	${({ _theme }) => css`
+		margin-top: 4px;
+		display: flex;
+	`}
+`;
+
+const EntityLink = styled(Link)`
+	${({ _theme }) => css`
+		span {
+			line-height: 1.2;
+			font-size: inherit;
+			display: flex;
+			gap: 6px;
+			align-items: center;
+		}
+
+		svg {
+			width: 0.7rem;
+			height: 0.7rem;
+		}
+	`}
+`;
+
+const CustomOption = styled(Box)`
+	display: flex;
+	align-items: center;
+	gap: 8px;
+`;
+
+const CustomOptionStatus = styled(Box)`
+	background: ${({ theme, publicationState }) =>
+		publicationState === 'published' ? theme.colors.success600 : theme.colors.secondary600};
+	width: 6px;
+	height: 6px;
+	border-radius: 100px;
+`;
+
+const FieldWrapper = styled(Box)`
+	display: flex;
+	gap: 4px;
+`;
+
+const LinkToPage = styled(Link)`
+	${({ theme, disabled }) => css`
+		height: 40px;
+		width: 40px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		align-self: flex-end;
+		flex-shrink: 0;
+		border: ${`1px solid ${theme.colors.neutral200}`};
+		border-radius: ${theme.borderRadius};
+		opacity: ${disabled ? 0.5 : 1};
+		> span {
+			display: flex;
+		}
+
+		svg {
+			width: ${theme.fontSizes[2]};
+			height: ${theme.fontSizes[2]};
+		}
+	`}
+`;
+
+export default {
+	FieldWrapper,
+	EntityLinkWrapper,
+	EntityLink,
+	CustomOptionStatus,
+	CustomOption,
+	LinkToPage
+};

package/admin/src/components/PlatformFilteredSelectField/utils/get-translations.ts

@@ -0,0 +1,3 @@
+const getTranslation = (id: string) => `content-manager.${id}`;
+
+export { getTranslation };

package/admin/src/components/PlatformFilteredSelectField/utils/relation-helper.ts

@@ -0,0 +1,76 @@
+import { IntlFormatters, MessageDescriptor } from '@formatjs/intl';
+import { getObjectFromFormName } from '../../../utils/getObjectFromFormName';
+
+export interface GetTargetAttributesResult {
+	targetAttributes?: {
+		relation: string;
+		relationType: string;
+		target: string;
+		targetModel: string;
+		type: string;
+	};
+	targetFieldValue?: any;
+	targetField: string;
+	targetFieldName: string;
+	componentUid?: string;
+	componentId?: number;
+	relationMainFieldName?: string;
+}
+
+export interface IPlatformFilteredSelectFieldProps {
+	intlLabel?: MessageDescriptor & Parameters<IntlFormatters['formatMessage']>;
+	onChange?: any;
+	attribute?: {
+		pluginOptions?: { filteredSelect?: { targetUid?: string; targetField?: string } };
+		required?: boolean;
+	};
+	name?: string;
+	description?: MessageDescriptor & Parameters<IntlFormatters['formatMessage']>;
+	disabled?: boolean;
+	error?: any;
+	labelAction?: any;
+	required?: boolean;
+	value?: string;
+	contentTypeUID?: string;
+	placeholder?: MessageDescriptor & Parameters<IntlFormatters['formatMessage']>;
+}
+
+const RelationHelper = {
+	getTargetAttributes: (
+		fieldName?: string,
+		attribute?: IPlatformFilteredSelectFieldProps['attribute'],
+		modifiedData?: Record<string, any>,
+		layout?: Record<string, any>,
+		allLayoutData?: Record<string, any>
+	) => {
+		const targetField = attribute?.pluginOptions?.filteredSelect?.targetField || '';
+		const mainObject = getObjectFromFormName(modifiedData, fieldName || '');
+		const result: GetTargetAttributesResult = {
+			targetAttributes: undefined,
+			targetFieldValue: undefined,
+			targetField,
+			componentUid: '',
+			componentId: undefined,
+			targetFieldName: targetField,
+			relationMainFieldName: ''
+		};
+		if (mainObject?.__component) {
+			const lastFieldName = fieldName?.split('.')?.[fieldName?.split('.')?.length - 1];
+			result.targetAttributes = allLayoutData?.components?.[mainObject.__component]?.attributes?.[targetField];
+			result.relationMainFieldName =
+				allLayoutData?.components?.[mainObject.__component]?.metadatas?.[targetField]?.list?.mainField?.name;
+			result.targetFieldValue = mainObject?.[targetField];
+			result.targetField = (fieldName || '')?.replace(lastFieldName || '', targetField);
+			result.componentUid = mainObject?.__component;
+			result.componentId = mainObject?.id;
+		} else {
+			result.targetAttributes = layout?.attributes?.[targetField];
+			result.relationMainFieldName = layout?.metadatas?.[targetField]?.list?.mainField?.name;
+			result.targetFieldValue = modifiedData?.[targetField];
+		}
+
+		return result;
+	}
+};
+
+export default RelationHelper;

package/admin/src/index.tsx

@@ -5,8 +5,11 @@ import pluginId from './pluginId';
 import Initializer from './components/Initializer';
 import PageFiltersContainer from './components/PageFilters';
 import { EditView } from './components/EditView';
+import { PageTypeEditView } from './components/PageTypeEditView';
 import middlewares from './middlewares';
 import PluginIcon from './components/PluginIcon';
+import getTrad from './utils/getTrad';
+import PlatformFilteredSelectFieldIcon from './components/PlatformFilteredSelectField/InputIcon';
 
 const name = pluginPkg.strapi.name;
 
@@ -20,6 +23,25 @@ export default {
 			name
 		};
 
+		app.customFields.register({
+			name: 'filtered-select',
+			pluginId,
+			type: 'string',
+			icon: PlatformFilteredSelectFieldIcon,
+			intlLabel: {
+				id: getTrad('platformFilteredSelect.builder.label'),
+				defaultMessage: name
+			},
+			intlDescription: {
+				id: getTrad('platformFilteredSelect.builder.description'),
+				defaultMessage: 'Add a filtered select to a page'
+			},
+			components: {
+				Input: async () =>
+					import(/* webpackChunkName: "filtered-select-component" */ './components/PlatformFilteredSelectField')
+			}
+		});
+
 		app.addMenuLink({
 			to: '/plugins/strapi-plugin-page-builder',
 			icon: PluginIcon, // This really is a plugin icon, I promise!
@@ -43,6 +65,10 @@ export default {
 			name: 'collection-type-picker',
 			Component: EditView
 		});
+		app.injectContentManagerComponent('editView', 'right-links', {
+			name: 'page-type-edit-view',
+			Component: PageTypeEditView
+		});
 		app.injectContentManagerComponent('listView', 'actions', {
 			name: 'page-filters',
 			Component: PageFiltersContainer

package/admin/src/translations/en.json

@@ -2,5 +2,8 @@
 	"template.confirmModal.title": "Replace all page modules",
 	"template.confirmModal.body": "You are about to replace all modules on this page. Are you sure you want to continue?",
 	"template.confirmModal.buttons.cancel": "No, cancel",
-	"template.confirmModal.buttons.submit": "Yes, replace all"
+	"template.confirmModal.buttons.submit": "Yes, replace all",
+	"platformFilteredSelect.builder.label": "Platform filtered select",
+	"platformFilteredSelect.builder.description": "Enables filtering relations by platform",
+	"platformFilteredSelect.linkToEntity.label": "Go to page"
 }

package/admin/src/translations/nl.json

@@ -2,5 +2,8 @@
 	"template.confirmModal.title": "Pagina modules vervangen",
 	"template.confirmModal.body": "Weet je zeker dat je alle modules op deze pagina wilt vervangen?",
 	"template.confirmModal.buttons.cancel": "Nee, annuleer",
-	"template.confirmModal.buttons.submit": "Ja, vervang modules"
+	"template.confirmModal.buttons.submit": "Ja, vervang modules",
+	"platformFilteredSelect.builder.label": "Platform filtered select",
+	"platformFilteredSelect.builder.description": "Filtert relaties op basis van een platform",
+	"platformFilteredSelect.linkToEntity.label": "Ga naar pagina"
 }

package/admin/src/utils/getObjectFromFormName.ts

@@ -0,0 +1,31 @@
+import get from 'lodash/get';
+
+const getObjectFromFormName = (modifiedData?: Record<string, any>, name?: string) => {
+	const split = (name || '')?.split('.');
+	let newPath = '';
+
+	for (let index = 0; index < split.length; index++) {
+		let value = split?.[index];
+
+		if (index + 1 === split.length) {
+			break;
+		}
+
+		if (index === 0) {
+			newPath += value;
+			continue;
+		}
+
+		if (!isNaN(Number(value))) {
+			value = `[${value}]`;
+			newPath += value;
+			continue;
+		}
+
+		newPath += `.${value}`;
+	}
+
+	return get(modifiedData, newPath);
+};
+
+export { getObjectFromFormName };

package/admin/src/utils/hooks/usePlatformFormData.ts

@@ -6,6 +6,7 @@ import { useGetPlatformRelation } from '../../api/platform-relation';
 const usePlatformFormData = (form?: Record<string, any>, onPlatformChange?: (platform: Platform) => void) => {
 	const { onChange, initialData, layout } = form || {};
 	const { isLoading } = useGetPlatformRelation({ id: initialData?.id, uid: layout.uid });
+
 	const { selectedPlatform: defaultPlatform, setSelectedPlatform: setDefaultPlatform } =
 		useDefaultPlatformFromLocalStorage();
 

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webbio/strapi-plugin-page-builder",
-    "version": "0.6.0-platform",
+    "version": "0.8.0-platform",
     "description": "This is the description of the plugin.",
     "scripts": {
         "develop": "tsc -p tsconfig.server.json -w",
@@ -42,7 +42,7 @@
     },
     "peerDependencies": {
         "@strapi/strapi": "^4.15.0",
-        "@webbio/strapi-plugin-slug": "^2.0.5",
+        "@webbio/strapi-plugin-slug": "^3.0.0",
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0",
         "react-router-dom": "^5.3.4",
@@ -61,7 +61,7 @@
         }
     ],
     "engines": {
-        "node": ">=14.19.1 <=18.x.x",
+        "node": ">=14.19.1 <=20.x.x",
         "npm": ">=6.0.0"
     },
     "license": "MIT",

package/dist/server/controllers/page-type.js

@@ -2,11 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     async findOneByUid(ctx) {
-        var _a;
+        var _a, _b;
         const uid = (_a = ctx === null || ctx === void 0 ? void 0 : ctx.params) === null || _a === void 0 ? void 0 : _a.uid;
+        const platformId = (_b = ctx === null || ctx === void 0 ? void 0 : ctx.params) === null || _b === void 0 ? void 0 : _b.platformId;
         if (!uid) {
             return ctx.badRequest('uid is missing.');
         }
-        return await strapi.service('plugin::page-builder.page-type').findOneByUid(uid);
+        if (!platformId) {
+            return ctx.badRequest('PlatformId is missing.');
+        }
+        return await strapi.service('plugin::page-builder.page-type').findOneByUid(uid, platformId);
     }
 };

package/dist/server/register.js

@@ -8,6 +8,11 @@ const page_type_1 = __importDefault(require("./graphql/page-type"));
 const pages_by_uid_1 = __importDefault(require("./graphql/pages-by-uid"));
 exports.default = async ({ strapi }) => {
     var _a, _b;
+    strapi.customFields.register({
+        name: 'filtered-select',
+        plugin: 'page-builder',
+        type: 'string'
+    });
     const extensionService = strapi.plugin('graphql').service('extension');
     extensionService.use(page_type_1.default);
     extensionService.use((0, page_by_path_1.default)(strapi));

package/dist/server/routes/index.js

@@ -7,7 +7,7 @@ const routes = {
         routes: [
             {
                 method: 'GET',
-                path: '/page-types/:uid',
+                path: '/page-types/:uid/:platformId',
                 handler: 'page-type.findOneByUid'
             }
         ]

package/dist/server/schema/page-type-end.json

@@ -25,6 +25,21 @@
                 }
             }
         },
+        "template": {
+            "type": "relation",
+            "relation": "oneToOne",
+            "target": "api::template.template"
+        },
+        "platform": {
+            "type": "relation",
+            "relation": "oneToOne",
+            "target": "api::platform.platform"
+        },
+        "defaultParent": {
+            "type": "relation",
+            "relation": "oneToOne",
+            "target": "api::page.page"
+        },
         "modules": {
             "type": "dynamiczone",
             "components": [],
@@ -33,11 +48,6 @@
                     "localized": true
                 }
             }
-        },
-        "template": {
-            "type": "relation",
-            "relation": "oneToOne",
-            "target": "api::template.template"
         }
     }
 }

package/dist/server/schema/platform-start.json

@@ -16,16 +16,6 @@
         },
         "domain": {
             "type": "string"
-        },
-        "template": {
-            "type": "relation",
-            "relation": "oneToMany",
-            "target": "api::template.template"
-        },
-        "pageTypes": {
-            "type": "relation",
-            "relation": "oneToMany",
-            "target": "api::page-type.page-type"
         }
     }
 }

package/dist/server/schema/template-end.json

@@ -0,0 +1,40 @@
+{
+    "draftAndPublish": false,
+    "displayName": "Templates",
+    "singularName": "template",
+    "pluralName": "templates",
+    "description": "",
+    "plugin": "page-builder",
+    "pluginOptions": {
+        "i18n": {
+            "localized": true
+        }
+    },
+    "kind": "collectionType",
+    "collectionName": "templates",
+    "attributes": {
+        "title": {
+            "type": "string",
+            "required": true,
+            "pluginOptions": {
+                "i18n": {
+                    "localized": true
+                }
+            }
+        },
+        "platform": {
+            "type": "relation",
+            "relation": "oneToOne",
+            "target": "api::platform.platform"
+        },
+        "modules": {
+            "type": "dynamiczone",
+            "components": [],
+            "pluginOptions": {
+                "i18n": {
+                    "localized": true
+                }
+            }
+        }
+    }
+}

package/dist/server/services/builder.js

@@ -12,6 +12,7 @@ const reload_strapi_on_load_1 = require("../utils/reload-strapi-on-load");
 const page_type_start_json_1 = __importDefault(require("../schema/page-type-start.json"));
 const page_type_end_json_1 = __importDefault(require("../schema/page-type-end.json"));
 const template_start_json_1 = __importDefault(require("../schema/template-start.json"));
+const template_end_json_1 = __importDefault(require("../schema/template-end.json"));
 const platform_start_json_1 = __importDefault(require("../schema/platform-start.json"));
 const UIDS = [constants_1.TEMPLATE_UID, constants_1.PAGE_TYPE_UID, constants_1.PLATFORM_UID, constants_1.PAGE_UID];
 exports.default = {
@@ -71,7 +72,7 @@ exports.default = {
                 update: this.getPageTypeContentType()
             },
             [constants_1.TEMPLATE_UID]: {
-                create: this.getTemplateContentType(),
+                create: this.getTemplateContentType(true),
                 update: this.getTemplateContentType()
             },
             [constants_1.PLATFORM_UID]: {
@@ -91,8 +92,8 @@ exports.default = {
         const contentType = this.mergeCollectionTypeWithOld(pageType, constants_1.PAGE_TYPE_UID);
         return { uid: constants_1.PAGE_TYPE_UID, contentType };
     },
-    getTemplateContentType() {
-        const template = template_start_json_1.default;
+    getTemplateContentType(create) {
+        const template = create ? template_start_json_1.default : template_end_json_1.default;
         const contentType = this.mergeCollectionTypeWithOld(template, constants_1.TEMPLATE_UID);
         return { uid: constants_1.TEMPLATE_UID, contentType };
     },

package/dist/server/services/page-type.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const constants_1 = require("../../shared/utils/constants");
 exports.default = {
-    async findOneByUid(uid) {
+    async findOneByUid(uid, platformId) {
         var _a;
         const results = await ((_a = strapi.entityService) === null || _a === void 0 ? void 0 : _a.findMany(constants_1.PAGE_TYPE_UID, {
             populate: {
@@ -10,10 +10,14 @@ exports.default = {
                     populate: {
                         modules: true
                     }
-                }
+                },
+                defaultParent: true
             },
             filters: {
-                uid
+                uid,
+                platform: {
+                    id: platformId
+                }
             }
         }));
         const result = results.length > 0 ? results === null || results === void 0 ? void 0 : results[0] : undefined;