143 lines
5.8 KiB
JavaScript
143 lines
5.8 KiB
JavaScript
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
import * as React from 'react';
|
|
import { useTracking, useNotification, useAPIErrorHandler, Page } from '@strapi/admin/strapi-admin';
|
|
import { useIntl } from 'react-intl';
|
|
import { TEMP_FIELD_NAME } from '../components/ConfigurationForm/Fields.mjs';
|
|
import { ConfigurationForm } from '../components/ConfigurationForm/Form.mjs';
|
|
import { useDoc } from '../hooks/useDocument.mjs';
|
|
import { useDocLayout } from '../hooks/useDocumentLayout.mjs';
|
|
import { useTypedSelector } from '../modules/hooks.mjs';
|
|
import { useUpdateContentTypeConfigurationMutation } from '../services/contentTypes.mjs';
|
|
import { useGetInitialDataQuery } from '../services/init.mjs';
|
|
import { setIn } from '../utils/objects.mjs';
|
|
|
|
const EditConfigurationPage = ()=>{
|
|
const { trackUsage } = useTracking();
|
|
const { formatMessage } = useIntl();
|
|
const { toggleNotification } = useNotification();
|
|
const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
|
|
const { isLoading: isLoadingSchema, schema, model } = useDoc();
|
|
const { isLoading: isLoadingLayout, error, list, edit } = useDocLayout();
|
|
const { fieldSizes, error: errorFieldSizes, isLoading: isLoadingFieldSizes, isFetching: isFetchingFieldSizes } = useGetInitialDataQuery(undefined, {
|
|
selectFromResult: (res)=>{
|
|
const fieldSizes = Object.entries(res.data?.fieldSizes ?? {}).reduce((acc, [attributeName, { default: size }])=>{
|
|
acc[attributeName] = size;
|
|
return acc;
|
|
}, {});
|
|
return {
|
|
isFetching: res.isFetching,
|
|
isLoading: res.isLoading,
|
|
error: res.error,
|
|
fieldSizes
|
|
};
|
|
}
|
|
});
|
|
React.useEffect(()=>{
|
|
if (errorFieldSizes) {
|
|
toggleNotification({
|
|
type: 'danger',
|
|
message: formatAPIError(errorFieldSizes)
|
|
});
|
|
}
|
|
}, [
|
|
errorFieldSizes,
|
|
formatAPIError,
|
|
toggleNotification
|
|
]);
|
|
const isLoading = isLoadingSchema || isLoadingLayout || isLoadingFieldSizes || isFetchingFieldSizes;
|
|
const [updateConfiguration] = useUpdateContentTypeConfigurationMutation();
|
|
const handleSubmit = async (data)=>{
|
|
try {
|
|
trackUsage('willSaveContentTypeLayout');
|
|
/**
|
|
* We reconstruct the metadatas object by taking the existing list metadatas
|
|
* and re-merging that by attribute name with the current list metadatas, whilst overwriting
|
|
* the data from the form we've built.
|
|
*/ const meta = Object.entries(list.metadatas).reduce((acc, [name, { mainField: _mainField, ...listMeta }])=>{
|
|
const existingEditMeta = edit.metadatas[name];
|
|
const { __temp_key__, size: _size, name: _name, ...editedMetadata } = data.layout.flatMap((row)=>row.children).find((field)=>field.name === name) ?? {};
|
|
acc[name] = {
|
|
edit: {
|
|
...existingEditMeta,
|
|
...editedMetadata
|
|
},
|
|
list: listMeta
|
|
};
|
|
return acc;
|
|
}, {});
|
|
const res = await updateConfiguration({
|
|
layouts: {
|
|
edit: data.layout.map((row)=>row.children.reduce((acc, { name, size })=>{
|
|
if (name !== TEMP_FIELD_NAME) {
|
|
return [
|
|
...acc,
|
|
{
|
|
name,
|
|
size
|
|
}
|
|
];
|
|
}
|
|
return acc;
|
|
}, [])),
|
|
list: list.layout.map((field)=>field.name)
|
|
},
|
|
settings: setIn(data.settings, 'displayName', undefined),
|
|
metadatas: meta,
|
|
uid: model
|
|
});
|
|
if ('data' in res) {
|
|
trackUsage('didEditEditSettings');
|
|
toggleNotification({
|
|
type: 'success',
|
|
message: formatMessage({
|
|
id: 'notification.success.saved',
|
|
defaultMessage: 'Saved'
|
|
})
|
|
});
|
|
} else {
|
|
toggleNotification({
|
|
type: 'danger',
|
|
message: formatAPIError(res.error)
|
|
});
|
|
}
|
|
} catch {
|
|
toggleNotification({
|
|
type: 'danger',
|
|
message: formatMessage({
|
|
id: 'notification.error',
|
|
defaultMessage: 'An error occurred'
|
|
})
|
|
});
|
|
}
|
|
};
|
|
if (isLoading) {
|
|
return /*#__PURE__*/ jsx(Page.Loading, {});
|
|
}
|
|
if (errorFieldSizes || error || !schema) {
|
|
return /*#__PURE__*/ jsx(Page.Error, {});
|
|
}
|
|
return /*#__PURE__*/ jsxs(Fragment, {
|
|
children: [
|
|
/*#__PURE__*/ jsx(Page.Title, {
|
|
children: `Configure ${edit.settings.displayName} Edit View`
|
|
}),
|
|
/*#__PURE__*/ jsx(ConfigurationForm, {
|
|
onSubmit: handleSubmit,
|
|
attributes: schema.attributes,
|
|
fieldSizes: fieldSizes,
|
|
layout: edit
|
|
})
|
|
]
|
|
});
|
|
};
|
|
const ProtectedEditConfigurationPage = ()=>{
|
|
const permissions = useTypedSelector((state)=>state.admin_app.permissions.contentManager?.collectionTypesConfigurations);
|
|
return /*#__PURE__*/ jsx(Page.Protect, {
|
|
permissions: permissions,
|
|
children: /*#__PURE__*/ jsx(EditConfigurationPage, {})
|
|
});
|
|
};
|
|
|
|
export { EditConfigurationPage, ProtectedEditConfigurationPage };
|
|
//# sourceMappingURL=EditConfigurationPage.mjs.map
|