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

package/admin/src/components/PlatformFilteredSelectField/hooks/useRelationLoad.tsx

@@ -0,0 +1,124 @@
+import get from 'lodash/get';
+import React from 'react';
+import { useRelation } from '@strapi/admin/admin/src/content-manager/hooks/useRelation/index';
+import { getInitialDataPathUsingTempKeys } from '@strapi/admin/admin/src/content-manager/utils/paths';
+import RelationHelper, { IPlatformFilteredSelectFieldProps } from '../utils/relation-helper';
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+import { useRouteMatch } from 'react-router-dom';
+
+const RELATIONS_TO_DISPLAY = 5;
+const SEARCH_RESULTS_TO_DISPLAY = 10;
+
+// This is largely a copy of https://github.com/strapi/strapi/blob/4e6961c7b8127f0f3bb0ad1fc430351ae9c4b8fa/packages/core/admin/admin/src/content-manager/components/Relations/RelationInputDataManager.tsx
+
+const useRelationLoad = ({ name, attribute }: IPlatformFilteredSelectFieldProps) => {
+	const fieldName = name || '';
+	const { modifiedData, initialData, slug, layout, allLayoutData, isCreatingEntry, relationLoad } =
+		useCMEditViewDataManager() as any;
+	const { params } =
+		useRouteMatch<{ origin?: string }>('/content-manager/collectionType/:collectionType/create/clone/:origin') ?? {};
+	const { origin } = params ?? {};
+	const isCloningEntry = Boolean(origin);
+	const entityId = origin || modifiedData.id;
+
+	const { componentUid, componentId, relationMainFieldName, targetAttributes, targetField } =
+		RelationHelper.getTargetAttributes(fieldName, attribute, modifiedData, layout, allLayoutData);
+
+	const nameSplit = targetField.split('.');
+	const isComponentRelation = Boolean(componentUid);
+	const initialDataPath = getInitialDataPathUsingTempKeys(initialData, modifiedData)(targetField);
+
+	const currentLastPage = Math.ceil((get(initialData, targetField, []) || []).length / RELATIONS_TO_DISPLAY);
+
+	// /content-manager/relations/[model]/[id]/[field-name]
+	const relationFetchEndpoint = React.useMemo(() => {
+		if (isCreatingEntry && !origin) {
+			return null;
+		}
+
+		if (componentUid) {
+			// repeatable components and dz are dynamically created
+			// if no componentId exists in modifiedData it means that the user just created it
+			// there then are no relations to request
+			return componentId ? `/content-manager/relations/${componentUid}/${componentId}/${nameSplit.at(-1)}` : null;
+		}
+
+		return `/content-manager/relations/${slug}/${entityId}/${targetField.split('.').at(-1)}`;
+	}, [isCreatingEntry, origin, componentUid, slug, entityId, targetField, componentId, nameSplit]);
+
+	// /content-manager/relations/[model]/[field-name]
+	const relationSearchEndpoint = React.useMemo(() => {
+		if (componentUid) {
+			return `/content-manager/relations/${componentUid}/${targetField.split('.').at(-1)}`;
+		}
+
+		return `/content-manager/relations/${slug}/${targetField.split('.').at(-1)}`;
+	}, [componentUid, slug, targetField]);
+
+	const { relations, search, searchFor } = useRelation([slug, initialDataPath.join('.'), modifiedData.id], {
+		relation: {
+			enabled: !!relationFetchEndpoint,
+			endpoint: relationFetchEndpoint!,
+			pageGoal: currentLastPage,
+			pageParams: {
+				pageSize: RELATIONS_TO_DISPLAY
+			},
+			onLoad(value) {
+				relationLoad?.({
+					target: {
+						initialDataPath: ['initialData', ...initialDataPath],
+						modifiedDataPath: ['modifiedData', ...nameSplit],
+						value
+					}
+				});
+			},
+			normalizeArguments: {
+				mainFieldName: relationMainFieldName,
+				shouldAddLink: true,
+				targetModel: targetAttributes?.targetModel
+			}
+		},
+		search: {
+			endpoint: relationSearchEndpoint,
+			pageParams: {
+				// eslint-disable-next-line no-nested-ternary
+				entityId: isCreatingEntry || isCloningEntry ? undefined : isComponentRelation ? componentId : entityId,
+				pageSize: SEARCH_RESULTS_TO_DISPLAY
+			}
+		}
+	});
+
+	/**
+	 * How to calculate the total number of relations even if you don't
+	 * have them all loaded in the browser.
+	 *
+	 * 1. The `infiniteQuery` gives you the total number of relations in the pagination result.
+	 * 2. You can diff the length of the browserState vs the fetchedServerState to determine if you've
+	 * either added or removed relations.
+	 * 3. Add them together, if you've removed relations you'll get a negative number and it'll
+	 * actually subtract from the total number on the server (regardless of how many you fetched).
+	 */
+	const relationsFromModifiedData = get(modifiedData, targetField, []);
+	const browserRelationsCount = (relationsFromModifiedData || [])?.length;
+	const serverRelationsCount = (get(initialData, initialDataPath) ?? []).length;
+	const realServerRelationsCount = relations.data?.pages[0]?.pagination?.total ?? 0;
+	/**
+	 * _IF_ theres no relations data and the browserCount is the same as serverCount you can therefore assume
+	 * that the browser count is correct because we've just _made_ this entry and the in-component hook is now fetching.
+	 */
+	const totalRelations =
+		!relations.data && browserRelationsCount === serverRelationsCount
+			? browserRelationsCount
+			: browserRelationsCount - serverRelationsCount + realServerRelationsCount;
+
+	return {
+		relations,
+		search,
+		searchFor,
+		isCloningEntry,
+		relationsFromModifiedData,
+		totalRelations: totalRelations || 0
+	};
+};
+
+export { useRelationLoad };

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+
+import RelationHelper, { IPlatformFilteredSelectFieldProps } from './utils/relation-helper';
+import MultiPlatformFilteredSelectField from './Multi';
+import SinglePlatformFilteredSelectField from './Single';
+import { useRelationLoad } from './hooks/useRelationLoad';
+
+const PlatformFilteredSelectField = (props: IPlatformFilteredSelectFieldProps) => {
+	const { name, attribute } = props;
+	const { modifiedData, layout, allLayoutData } = useCMEditViewDataManager() as any;
+	const { relations, isCloningEntry, totalRelations, relationsFromModifiedData } = useRelationLoad(props);
+	const { targetAttributes } = RelationHelper.getTargetAttributes(name, attribute, modifiedData, layout, allLayoutData);
+	const toOneRelation = ['oneWay', 'oneToOne', 'manyToOne', 'oneToManyMorph', 'oneToOneMorph'].includes(
+		targetAttributes?.relation || ''
+	);
+
+	if (toOneRelation) {
+		return <SinglePlatformFilteredSelectField {...props} />;
+	}
+
+	return (
+		<MultiPlatformFilteredSelectField
+			relations={relations}
+			isCloningEntry={isCloningEntry}
+			totalRelations={totalRelations}
+			relationsFromModifiedData={relationsFromModifiedData}
+			{...props}
+		/>
+	);
+};
+
+PlatformFilteredSelectField.defaultProps = {
+	description: undefined,
+	disabled: false,
+	error: undefined,
+	labelAction: undefined,
+	placeholder: undefined,
+	value: '',
+	required: false
+};
+
+export default PlatformFilteredSelectField;

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

@@ -8,6 +8,8 @@ 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;
 
@@ -21,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!

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/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webbio/strapi-plugin-page-builder",
-    "version": "0.7.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/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));