249 lines
9.9 KiB
JavaScript
249 lines
9.9 KiB
JavaScript
'use strict';
|
|
|
|
var jsxRuntime = require('react/jsx-runtime');
|
|
var React = require('react');
|
|
var strapiAdmin = require('@strapi/admin/strapi-admin');
|
|
var reactIntl = require('react-intl');
|
|
var reactRouterDom = require('react-router-dom');
|
|
var Fields = require('../components/ConfigurationForm/Fields.js');
|
|
var Form = require('../components/ConfigurationForm/Form.js');
|
|
var useContentTypeSchema = require('../hooks/useContentTypeSchema.js');
|
|
var useDocumentLayout = require('../hooks/useDocumentLayout.js');
|
|
var hooks = require('../modules/hooks.js');
|
|
var components = require('../services/components.js');
|
|
var init = require('../services/init.js');
|
|
var objects = require('../utils/objects.js');
|
|
|
|
function _interopNamespaceDefault(e) {
|
|
var n = Object.create(null);
|
|
if (e) {
|
|
Object.keys(e).forEach(function (k) {
|
|
if (k !== 'default') {
|
|
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
Object.defineProperty(n, k, d.get ? d : {
|
|
enumerable: true,
|
|
get: function () { return e[k]; }
|
|
});
|
|
}
|
|
});
|
|
}
|
|
n.default = e;
|
|
return Object.freeze(n);
|
|
}
|
|
|
|
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* ComponentConfigurationPage
|
|
* -----------------------------------------------------------------------------------------------*/ const ComponentConfigurationPage = ()=>{
|
|
/**
|
|
* useDocumentLayout only works for documents, not components,
|
|
* it feels weird to make that hook work for both when this is SUCH
|
|
* a unique use case and we only do it here, so in short, we essentially
|
|
* just extracted the logic to make an edit view layout and reproduced it here.
|
|
*/ const { slug: model } = reactRouterDom.useParams();
|
|
const { toggleNotification } = strapiAdmin.useNotification();
|
|
const { formatMessage } = reactIntl.useIntl();
|
|
const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
|
|
const { components: components$1, fieldSizes, schema, error: errorSchema, isLoading: isLoadingSchema, isFetching: isFetchingSchema } = init.useGetInitialDataQuery(undefined, {
|
|
selectFromResult: (res)=>{
|
|
const schema = res.data?.components.find((ct)=>ct.uid === model);
|
|
const componentsByKey = res.data?.components.reduce((acc, component)=>{
|
|
acc[component.uid] = component;
|
|
return acc;
|
|
}, {});
|
|
const components = useContentTypeSchema.extractContentTypeComponents(schema?.attributes, componentsByKey);
|
|
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,
|
|
components,
|
|
schema,
|
|
fieldSizes
|
|
};
|
|
}
|
|
});
|
|
React__namespace.useEffect(()=>{
|
|
if (errorSchema) {
|
|
toggleNotification({
|
|
type: 'danger',
|
|
message: formatAPIError(errorSchema)
|
|
});
|
|
}
|
|
}, [
|
|
errorSchema,
|
|
formatAPIError,
|
|
toggleNotification
|
|
]);
|
|
const { data, isLoading: isLoadingConfig, isFetching: isFetchingConfig, error } = components.useGetComponentConfigurationQuery(model ?? '');
|
|
React__namespace.useEffect(()=>{
|
|
if (error) {
|
|
toggleNotification({
|
|
type: 'danger',
|
|
message: formatAPIError(error)
|
|
});
|
|
}
|
|
}, [
|
|
error,
|
|
formatAPIError,
|
|
toggleNotification
|
|
]);
|
|
/**
|
|
* you **must** check if we're loading or fetching in case the component gets new props
|
|
* but nothing was unmounted, it then becomes a fetch, not a load.
|
|
*/ const isLoading = isLoadingConfig || isLoadingSchema || isFetchingConfig || isFetchingSchema;
|
|
const editLayout = React__namespace.useMemo(()=>data && !isLoading ? formatEditLayout(data, {
|
|
schema,
|
|
components: components$1
|
|
}) : {
|
|
layout: [],
|
|
components: {},
|
|
metadatas: {},
|
|
options: {},
|
|
settings: useDocumentLayout.DEFAULT_SETTINGS
|
|
}, [
|
|
data,
|
|
isLoading,
|
|
schema,
|
|
components$1
|
|
]);
|
|
const [updateConfiguration] = components.useUpdateComponentConfigurationMutation();
|
|
const handleSubmit = async (formData)=>{
|
|
try {
|
|
/**
|
|
* 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(data?.component.metadatas ?? {}).reduce((acc, [name, { edit, list }])=>{
|
|
const { __temp_key__, size: _size, name: _name, ...editedMetadata } = formData.layout.flatMap((row)=>row.children).find((field)=>field.name === name) ?? {};
|
|
acc[name] = {
|
|
edit: {
|
|
...edit,
|
|
...editedMetadata
|
|
},
|
|
list
|
|
};
|
|
return acc;
|
|
}, {});
|
|
const res = await updateConfiguration({
|
|
layouts: {
|
|
edit: formData.layout.map((row)=>row.children.reduce((acc, { name, size })=>{
|
|
if (name !== Fields.TEMP_FIELD_NAME) {
|
|
return [
|
|
...acc,
|
|
{
|
|
name,
|
|
size
|
|
}
|
|
];
|
|
}
|
|
return acc;
|
|
}, [])),
|
|
list: data?.component.layouts.list
|
|
},
|
|
settings: objects.setIn(formData.settings, 'displayName', undefined),
|
|
metadatas: meta,
|
|
uid: model
|
|
});
|
|
if ('data' in res) {
|
|
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__*/ jsxRuntime.jsx(strapiAdmin.Page.Loading, {});
|
|
}
|
|
if (error || errorSchema || !schema) {
|
|
return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Page.Error, {});
|
|
}
|
|
return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
children: [
|
|
/*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Page.Title, {
|
|
children: `Configure ${editLayout.settings.displayName} Edit View`
|
|
}),
|
|
/*#__PURE__*/ jsxRuntime.jsx(Form.ConfigurationForm, {
|
|
onSubmit: handleSubmit,
|
|
attributes: schema.attributes,
|
|
fieldSizes: fieldSizes,
|
|
layout: editLayout
|
|
})
|
|
]
|
|
});
|
|
};
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* Header
|
|
* -----------------------------------------------------------------------------------------------*/ const formatEditLayout = (data, { schema, components })=>{
|
|
const editAttributes = useDocumentLayout.convertEditLayoutToFieldLayouts(data.component.layouts.edit, schema?.attributes, data.component.metadatas, {
|
|
configurations: data.components,
|
|
schemas: components
|
|
});
|
|
const componentEditAttributes = Object.entries(data.components).reduce((acc, [uid, configuration])=>{
|
|
acc[uid] = {
|
|
layout: useDocumentLayout.convertEditLayoutToFieldLayouts(configuration.layouts.edit, components[uid].attributes, configuration.metadatas),
|
|
settings: {
|
|
...configuration.settings,
|
|
icon: components[uid].info.icon,
|
|
displayName: components[uid].info.displayName
|
|
}
|
|
};
|
|
return acc;
|
|
}, {});
|
|
const editMetadatas = Object.entries(data.component.metadatas).reduce((acc, [attribute, metadata])=>{
|
|
return {
|
|
...acc,
|
|
[attribute]: metadata.edit
|
|
};
|
|
}, {});
|
|
return {
|
|
layout: [
|
|
editAttributes
|
|
],
|
|
components: componentEditAttributes,
|
|
metadatas: editMetadatas,
|
|
options: {
|
|
...schema?.options,
|
|
...schema?.pluginOptions
|
|
},
|
|
settings: {
|
|
...data.component.settings,
|
|
displayName: schema?.info.displayName
|
|
}
|
|
};
|
|
};
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* Header
|
|
* -----------------------------------------------------------------------------------------------*/ const ProtectedComponentConfigurationPage = ()=>{
|
|
const permissions = hooks.useTypedSelector((state)=>state.admin_app.permissions.contentManager?.componentsConfigurations);
|
|
return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Page.Protect, {
|
|
permissions: permissions,
|
|
children: /*#__PURE__*/ jsxRuntime.jsx(ComponentConfigurationPage, {})
|
|
});
|
|
};
|
|
|
|
exports.ComponentConfigurationPage = ComponentConfigurationPage;
|
|
exports.ProtectedComponentConfigurationPage = ProtectedComponentConfigurationPage;
|
|
//# sourceMappingURL=ComponentConfigurationPage.js.map
|