mirror of
https://github.com/strapi/strapi.git
synced 2025-09-21 14:31:16 +00:00
Merge pull request #11273 from strapi/ctb/remove-headers-from-search
Remove headers from search
This commit is contained in:
commit
d2564af7f9
@ -27,18 +27,6 @@ const AttributeOption = ({ type }) => {
|
|||||||
// FIXME refacto
|
// FIXME refacto
|
||||||
const forTarget = query.forTarget || null;
|
const forTarget = query.forTarget || null;
|
||||||
const targetUid = query.targetUid || null;
|
const targetUid = query.targetUid || null;
|
||||||
const header_label_1 = query.header_label_1 || null;
|
|
||||||
const header_info_category_1 = query.header_info_category_1 || null;
|
|
||||||
const header_info_name_1 = query.header_info_name_1 || null;
|
|
||||||
const header_label_2 = query.header_label_2 || null;
|
|
||||||
const header_info_category_2 = query.header_info_category_2 || null;
|
|
||||||
const header_info_name_2 = query.header_info_name_2 || null;
|
|
||||||
const header_label_3 = query.header_label_3 || null;
|
|
||||||
const header_info_category_3 = query.header_info_category_3 || null;
|
|
||||||
const header_info_name_3 = query.header_info_name_3 || null;
|
|
||||||
const header_label_4 = query.header_label_4 || null;
|
|
||||||
const header_info_category_4 = query.header_info_category_4 || null;
|
|
||||||
const header_info_name_4 = query.header_info_name_4 || null;
|
|
||||||
|
|
||||||
const search = makeSearch({
|
const search = makeSearch({
|
||||||
modalType: 'attribute',
|
modalType: 'attribute',
|
||||||
@ -48,19 +36,6 @@ const AttributeOption = ({ type }) => {
|
|||||||
targetUid,
|
targetUid,
|
||||||
attributeType: type,
|
attributeType: type,
|
||||||
step: type === 'component' ? '1' : null,
|
step: type === 'component' ? '1' : null,
|
||||||
|
|
||||||
header_label_1,
|
|
||||||
header_info_name_1,
|
|
||||||
header_info_category_1,
|
|
||||||
header_label_2,
|
|
||||||
header_info_name_2,
|
|
||||||
header_info_category_2,
|
|
||||||
header_label_3,
|
|
||||||
header_info_name_3,
|
|
||||||
header_info_category_3,
|
|
||||||
header_label_4,
|
|
||||||
header_info_name_4,
|
|
||||||
header_info_category_4,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
if (forTarget === 'contentType') {
|
if (forTarget === 'contentType') {
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
*/
|
*/
|
||||||
/* eslint-disable import/no-cycle */
|
/* eslint-disable import/no-cycle */
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { get } from 'lodash';
|
import get from 'lodash/get';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import List from '../List';
|
import List from '../List';
|
||||||
import useDataManager from '../../hooks/useDataManager';
|
import useDataManager from '../../hooks/useDataManager';
|
||||||
@ -14,16 +14,13 @@ import Tr from '../Tr';
|
|||||||
function ComponentList({
|
function ComponentList({
|
||||||
customRowComponent,
|
customRowComponent,
|
||||||
component,
|
component,
|
||||||
dzName,
|
|
||||||
mainTypeName,
|
|
||||||
isFromDynamicZone,
|
isFromDynamicZone,
|
||||||
isNestedInDZComponent,
|
isNestedInDZComponent,
|
||||||
firstLoopComponentName,
|
|
||||||
firstLoopComponentUid,
|
firstLoopComponentUid,
|
||||||
}) {
|
}) {
|
||||||
const { modifiedData } = useDataManager();
|
const { modifiedData } = useDataManager();
|
||||||
const {
|
const {
|
||||||
schema: { name: componentName, attributes },
|
schema: { attributes },
|
||||||
} = get(modifiedData, ['components', component], {
|
} = get(modifiedData, ['components', component], {
|
||||||
schema: { attributes: [] },
|
schema: { attributes: [] },
|
||||||
});
|
});
|
||||||
@ -33,17 +30,13 @@ function ComponentList({
|
|||||||
<td colSpan={12}>
|
<td colSpan={12}>
|
||||||
<List
|
<List
|
||||||
customRowComponent={customRowComponent}
|
customRowComponent={customRowComponent}
|
||||||
dzName={dzName}
|
|
||||||
items={attributes}
|
items={attributes}
|
||||||
targetUid={component}
|
targetUid={component}
|
||||||
mainTypeName={mainTypeName}
|
|
||||||
firstLoopComponentName={firstLoopComponentName || componentName}
|
|
||||||
firstLoopComponentUid={firstLoopComponentUid || component}
|
firstLoopComponentUid={firstLoopComponentUid || component}
|
||||||
editTarget="components"
|
editTarget="components"
|
||||||
isFromDynamicZone={isFromDynamicZone}
|
isFromDynamicZone={isFromDynamicZone}
|
||||||
isNestedInDZComponent={isNestedInDZComponent}
|
isNestedInDZComponent={isNestedInDZComponent}
|
||||||
isSub
|
isSub
|
||||||
secondLoopComponentName={firstLoopComponentName ? componentName : null}
|
|
||||||
secondLoopComponentUid={firstLoopComponentUid ? component : null}
|
secondLoopComponentUid={firstLoopComponentUid ? component : null}
|
||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
@ -54,8 +47,6 @@ function ComponentList({
|
|||||||
ComponentList.defaultProps = {
|
ComponentList.defaultProps = {
|
||||||
component: null,
|
component: null,
|
||||||
customRowComponent: null,
|
customRowComponent: null,
|
||||||
dzName: null,
|
|
||||||
firstLoopComponentName: null,
|
|
||||||
firstLoopComponentUid: null,
|
firstLoopComponentUid: null,
|
||||||
isFromDynamicZone: false,
|
isFromDynamicZone: false,
|
||||||
isNestedInDZComponent: false,
|
isNestedInDZComponent: false,
|
||||||
@ -64,12 +55,9 @@ ComponentList.defaultProps = {
|
|||||||
ComponentList.propTypes = {
|
ComponentList.propTypes = {
|
||||||
component: PropTypes.string,
|
component: PropTypes.string,
|
||||||
customRowComponent: PropTypes.func,
|
customRowComponent: PropTypes.func,
|
||||||
dzName: PropTypes.string,
|
|
||||||
firstLoopComponentName: PropTypes.string,
|
|
||||||
firstLoopComponentUid: PropTypes.string,
|
firstLoopComponentUid: PropTypes.string,
|
||||||
isFromDynamicZone: PropTypes.bool,
|
isFromDynamicZone: PropTypes.bool,
|
||||||
isNestedInDZComponent: PropTypes.bool,
|
isNestedInDZComponent: PropTypes.bool,
|
||||||
mainTypeName: PropTypes.string.isRequired,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ComponentList;
|
export default ComponentList;
|
||||||
|
@ -2,7 +2,6 @@ import { useState } from 'react';
|
|||||||
import { useNotification, useTracking } from '@strapi/helper-plugin';
|
import { useNotification, useTracking } from '@strapi/helper-plugin';
|
||||||
import { camelCase, isEmpty, sortBy, toLower, upperFirst } from 'lodash';
|
import { camelCase, isEmpty, sortBy, toLower, upperFirst } from 'lodash';
|
||||||
import matchSorter from 'match-sorter';
|
import matchSorter from 'match-sorter';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { useHistory } from 'react-router-dom';
|
import { useHistory } from 'react-router-dom';
|
||||||
import useDataManager from '../../hooks/useDataManager';
|
import useDataManager from '../../hooks/useDataManager';
|
||||||
import pluginId from '../../pluginId';
|
import pluginId from '../../pluginId';
|
||||||
@ -19,7 +18,6 @@ const useContentTypeBuilderMenu = () => {
|
|||||||
} = useDataManager();
|
} = useDataManager();
|
||||||
const toggleNotification = useNotification();
|
const toggleNotification = useNotification();
|
||||||
const { trackUsage } = useTracking();
|
const { trackUsage } = useTracking();
|
||||||
const { formatMessage } = useIntl();
|
|
||||||
const { push } = useHistory();
|
const { push } = useHistory();
|
||||||
const [search, setSearch] = useState('');
|
const [search, setSearch] = useState('');
|
||||||
|
|
||||||
@ -35,16 +33,6 @@ const useContentTypeBuilderMenu = () => {
|
|||||||
actionType: 'edit',
|
actionType: 'edit',
|
||||||
modalType: 'editCategory',
|
modalType: 'editCategory',
|
||||||
categoryName: data.name,
|
categoryName: data.name,
|
||||||
header_label_1: formatMessage({
|
|
||||||
id: getTrad('modalForm.header.categories'),
|
|
||||||
defaultMessage: 'Categories',
|
|
||||||
}),
|
|
||||||
header_info_category_1: null,
|
|
||||||
header_info_name_1: null,
|
|
||||||
header_label_2: data.name,
|
|
||||||
header_info_category_2: null,
|
|
||||||
header_info_name_2: null,
|
|
||||||
|
|
||||||
settingType: 'base',
|
settingType: 'base',
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -81,7 +69,6 @@ const useContentTypeBuilderMenu = () => {
|
|||||||
actionType: 'create',
|
actionType: 'create',
|
||||||
settingType: 'base',
|
settingType: 'base',
|
||||||
forTarget: modalType,
|
forTarget: modalType,
|
||||||
header_label_1: 'null',
|
|
||||||
});
|
});
|
||||||
push({
|
push({
|
||||||
search,
|
search,
|
||||||
|
@ -56,14 +56,7 @@ const ComponentStack = styled(Stack)`
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
function DynamicZoneList({
|
function DynamicZoneList({ customRowComponent, components, addComponent, name, targetUid }) {
|
||||||
customRowComponent,
|
|
||||||
components,
|
|
||||||
addComponent,
|
|
||||||
mainTypeName,
|
|
||||||
name,
|
|
||||||
targetUid,
|
|
||||||
}) {
|
|
||||||
const { isInDevelopmentMode } = useDataManager();
|
const { isInDevelopmentMode } = useDataManager();
|
||||||
const [activeTab, setActiveTab] = useState(0);
|
const [activeTab, setActiveTab] = useState(0);
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage } = useIntl();
|
||||||
@ -129,8 +122,6 @@ function DynamicZoneList({
|
|||||||
<ComponentList
|
<ComponentList
|
||||||
{...props}
|
{...props}
|
||||||
isFromDynamicZone
|
isFromDynamicZone
|
||||||
dzName={name}
|
|
||||||
mainTypeName={mainTypeName}
|
|
||||||
targetUid={targetUid}
|
targetUid={targetUid}
|
||||||
key={component}
|
key={component}
|
||||||
/>
|
/>
|
||||||
@ -156,7 +147,6 @@ DynamicZoneList.propTypes = {
|
|||||||
addComponent: PropTypes.func,
|
addComponent: PropTypes.func,
|
||||||
components: PropTypes.instanceOf(Array),
|
components: PropTypes.instanceOf(Array),
|
||||||
customRowComponent: PropTypes.func,
|
customRowComponent: PropTypes.func,
|
||||||
mainTypeName: PropTypes.string.isRequired,
|
|
||||||
name: PropTypes.string,
|
name: PropTypes.string,
|
||||||
targetUid: PropTypes.string.isRequired,
|
targetUid: PropTypes.string.isRequired,
|
||||||
};
|
};
|
||||||
|
@ -189,6 +189,7 @@ const forms = {
|
|||||||
return createCategorySchema(allowedCategories);
|
return createCategorySchema(allowedCategories);
|
||||||
},
|
},
|
||||||
form: {
|
form: {
|
||||||
|
advanced: () => ({ sections: [] }),
|
||||||
base() {
|
base() {
|
||||||
return categoryForm.base;
|
return categoryForm.base;
|
||||||
},
|
},
|
||||||
|
@ -44,8 +44,6 @@ import getTrad from '../../utils/getTrad';
|
|||||||
import makeSearch from '../../utils/makeSearch';
|
import makeSearch from '../../utils/makeSearch';
|
||||||
import {
|
import {
|
||||||
canEditContentType,
|
canEditContentType,
|
||||||
createHeadersArray,
|
|
||||||
createHeadersObjectFromArray,
|
|
||||||
getAttributesToDisplay,
|
getAttributesToDisplay,
|
||||||
getFormInputNames,
|
getFormInputNames,
|
||||||
getModalTitleSubHeader,
|
getModalTitleSubHeader,
|
||||||
@ -122,27 +120,13 @@ const FormModal = () => {
|
|||||||
// Returns 'null' if there isn't any attributeType search params
|
// Returns 'null' if there isn't any attributeType search params
|
||||||
const attributeName = query.get('attributeName');
|
const attributeName = query.get('attributeName');
|
||||||
const attributeType = query.get('attributeType');
|
const attributeType = query.get('attributeType');
|
||||||
|
const categoryName = query.get('categoryName');
|
||||||
const dynamicZoneTarget = query.get('dynamicZoneTarget');
|
const dynamicZoneTarget = query.get('dynamicZoneTarget');
|
||||||
const forTarget = query.get('forTarget');
|
const forTarget = query.get('forTarget');
|
||||||
const modalType = query.get('modalType');
|
const modalType = query.get('modalType');
|
||||||
const kind = query.get('kind') || get(allDataSchema, ['contentType', 'schema', 'kind'], null);
|
const kind = query.get('kind') || get(allDataSchema, ['contentType', 'schema', 'kind'], null);
|
||||||
const targetUid = query.get('targetUid');
|
const targetUid = query.get('targetUid');
|
||||||
const settingType = query.get('settingType');
|
const settingType = query.get('settingType');
|
||||||
const header_label_1 = query.get('header_label_1');
|
|
||||||
const header_info_category_1 = query.get('header_info_category_1');
|
|
||||||
const header_info_name_1 = query.get('header_info_name_1');
|
|
||||||
const header_label_2 = query.get('header_label_2');
|
|
||||||
const header_info_category_2 = query.get('header_info_category_2');
|
|
||||||
const header_info_name_2 = query.get('header_info_name_2');
|
|
||||||
const header_label_3 = query.get('header_label_3');
|
|
||||||
const header_info_category_3 = query.get('header_info_category_3');
|
|
||||||
const header_info_name_3 = query.get('header_info_name_3');
|
|
||||||
const header_label_4 = query.get('header_label_4');
|
|
||||||
const header_info_category_4 = query.get('header_info_category_4');
|
|
||||||
const header_info_name_4 = query.get('header_info_name_4');
|
|
||||||
const header_label_5 = query.get('header_label_5');
|
|
||||||
const header_info_category_5 = query.get('header_info_category_5');
|
|
||||||
const header_info_name_5 = query.get('header_info_name_5');
|
|
||||||
const step = query.get('step');
|
const step = query.get('step');
|
||||||
const pathToSchema =
|
const pathToSchema =
|
||||||
forTarget === 'contentType' || forTarget === 'component'
|
forTarget === 'contentType' || forTarget === 'component'
|
||||||
@ -153,6 +137,7 @@ const FormModal = () => {
|
|||||||
actionType,
|
actionType,
|
||||||
attributeName,
|
attributeName,
|
||||||
attributeType,
|
attributeType,
|
||||||
|
categoryName,
|
||||||
kind,
|
kind,
|
||||||
dynamicZoneTarget,
|
dynamicZoneTarget,
|
||||||
forTarget,
|
forTarget,
|
||||||
@ -161,21 +146,6 @@ const FormModal = () => {
|
|||||||
settingType,
|
settingType,
|
||||||
step,
|
step,
|
||||||
targetUid,
|
targetUid,
|
||||||
header_label_1,
|
|
||||||
header_info_name_1,
|
|
||||||
header_info_category_1,
|
|
||||||
header_label_2,
|
|
||||||
header_info_name_2,
|
|
||||||
header_info_category_2,
|
|
||||||
header_label_3,
|
|
||||||
header_info_name_3,
|
|
||||||
header_info_category_3,
|
|
||||||
header_label_4,
|
|
||||||
header_info_name_4,
|
|
||||||
header_info_category_4,
|
|
||||||
header_label_5,
|
|
||||||
header_info_name_5,
|
|
||||||
header_info_category_5,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const collectionTypesForRelation = sortedContentTypesList.filter(
|
const collectionTypesForRelation = sortedContentTypesList.filter(
|
||||||
@ -352,8 +322,6 @@ const FormModal = () => {
|
|||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [search]);
|
}, [search]);
|
||||||
|
|
||||||
const headers = createHeadersArray(state);
|
|
||||||
|
|
||||||
// FIXME rename this constant
|
// FIXME rename this constant
|
||||||
const isCreatingContentType = state.modalType === 'contentType';
|
const isCreatingContentType = state.modalType === 'contentType';
|
||||||
const isCreatingComponent = state.modalType === 'component';
|
const isCreatingComponent = state.modalType === 'component';
|
||||||
@ -369,6 +337,8 @@ const FormModal = () => {
|
|||||||
const isPickingAttribute = state.modalType === 'chooseAttribute';
|
const isPickingAttribute = state.modalType === 'chooseAttribute';
|
||||||
const uid = createUid(modifiedData.name || '');
|
const uid = createUid(modifiedData.name || '');
|
||||||
const attributes = get(allDataSchema, [...state.pathToSchema, 'schema', 'attributes'], null);
|
const attributes = get(allDataSchema, [...state.pathToSchema, 'schema', 'attributes'], null);
|
||||||
|
// FIXME when displayName
|
||||||
|
const mainSchemaName = get(allDataSchema, [...state.pathToSchema, 'schema', 'name'], '');
|
||||||
|
|
||||||
const checkFormValidity = async () => {
|
const checkFormValidity = async () => {
|
||||||
let schema;
|
let schema;
|
||||||
@ -604,14 +574,6 @@ const FormModal = () => {
|
|||||||
sendButtonAddMoreFieldEvent(shouldContinue);
|
sendButtonAddMoreFieldEvent(shouldContinue);
|
||||||
const targetUid = state.forTarget === 'components' ? state.targetUid : uid;
|
const targetUid = state.forTarget === 'components' ? state.targetUid : uid;
|
||||||
|
|
||||||
// Remove the last header when editing
|
|
||||||
if (state.actionType === 'edit') {
|
|
||||||
headers.pop();
|
|
||||||
}
|
|
||||||
|
|
||||||
const headersObject = createHeadersObjectFromArray(headers);
|
|
||||||
const nextHeaderIndex = headers.length + 1;
|
|
||||||
|
|
||||||
if (isCreatingContentType) {
|
if (isCreatingContentType) {
|
||||||
// Create the content type schema
|
// Create the content type schema
|
||||||
if (isCreating) {
|
if (isCreating) {
|
||||||
@ -637,7 +599,6 @@ const FormModal = () => {
|
|||||||
modalType: 'chooseAttribute',
|
modalType: 'chooseAttribute',
|
||||||
forTarget: state.forTarget,
|
forTarget: state.forTarget,
|
||||||
targetUid,
|
targetUid,
|
||||||
header_label_1: modifiedData.name,
|
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
} else if (isCreatingComponent) {
|
} else if (isCreatingComponent) {
|
||||||
@ -653,7 +614,6 @@ const FormModal = () => {
|
|||||||
modalType: 'chooseAttribute',
|
modalType: 'chooseAttribute',
|
||||||
forTarget: state.forTarget,
|
forTarget: state.forTarget,
|
||||||
targetUid: componentUid,
|
targetUid: componentUid,
|
||||||
header_label_1: modifiedData.name,
|
|
||||||
}),
|
}),
|
||||||
pathname: `/plugins/${pluginId}/component-categories/${category}/${componentUid}`,
|
pathname: `/plugins/${pluginId}/component-categories/${category}/${componentUid}`,
|
||||||
});
|
});
|
||||||
@ -702,8 +662,6 @@ const FormModal = () => {
|
|||||||
settingType: 'base',
|
settingType: 'base',
|
||||||
step: '1',
|
step: '1',
|
||||||
actionType: 'create',
|
actionType: 'create',
|
||||||
...headersObject,
|
|
||||||
header_label_2: modifiedData.name,
|
|
||||||
});
|
});
|
||||||
const nextSearch = isDynamicZoneAttribute
|
const nextSearch = isDynamicZoneAttribute
|
||||||
? dzSearch
|
? dzSearch
|
||||||
@ -712,7 +670,6 @@ const FormModal = () => {
|
|||||||
modalType: 'chooseAttribute',
|
modalType: 'chooseAttribute',
|
||||||
forTarget: state.forTarget,
|
forTarget: state.forTarget,
|
||||||
targetUid,
|
targetUid,
|
||||||
...headersObject,
|
|
||||||
},
|
},
|
||||||
shouldContinue
|
shouldContinue
|
||||||
);
|
);
|
||||||
@ -746,7 +703,6 @@ const FormModal = () => {
|
|||||||
targetUid: state.targetUid,
|
targetUid: state.targetUid,
|
||||||
attributeType: 'component',
|
attributeType: 'component',
|
||||||
step: '2',
|
step: '2',
|
||||||
...headersObject,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
push({
|
push({
|
||||||
@ -785,7 +741,6 @@ const FormModal = () => {
|
|||||||
modalType: 'chooseAttribute',
|
modalType: 'chooseAttribute',
|
||||||
forTarget: state.forTarget,
|
forTarget: state.forTarget,
|
||||||
targetUid: state.targetUid,
|
targetUid: state.targetUid,
|
||||||
...headersObject,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
push({ search: makeSearch(nextSearch, shouldContinue) });
|
push({ search: makeSearch(nextSearch, shouldContinue) });
|
||||||
@ -811,7 +766,6 @@ const FormModal = () => {
|
|||||||
targetUid: state.targetUid,
|
targetUid: state.targetUid,
|
||||||
attributeType: 'component',
|
attributeType: 'component',
|
||||||
step: '2',
|
step: '2',
|
||||||
...headersObject,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
trackUsage('willCreateComponentFromAttributesModal');
|
trackUsage('willCreateComponentFromAttributesModal');
|
||||||
@ -863,10 +817,6 @@ const FormModal = () => {
|
|||||||
modalType: 'chooseAttribute',
|
modalType: 'chooseAttribute',
|
||||||
forTarget: 'components',
|
forTarget: 'components',
|
||||||
targetUid: componentUid,
|
targetUid: componentUid,
|
||||||
...headersObject,
|
|
||||||
[`header_label_${nextHeaderIndex}`]: modifiedData.name,
|
|
||||||
[`header_info_category_${nextHeaderIndex}`]: category,
|
|
||||||
[`header_info_name_${nextHeaderIndex}`]: componentToCreate.name,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
push({
|
push({
|
||||||
@ -911,10 +861,6 @@ const FormModal = () => {
|
|||||||
modalType: 'chooseAttribute',
|
modalType: 'chooseAttribute',
|
||||||
forTarget: 'components',
|
forTarget: 'components',
|
||||||
targetUid: componentUid,
|
targetUid: componentUid,
|
||||||
...headersObject,
|
|
||||||
[`header_label_${nextHeaderIndex}`]: modifiedData.name,
|
|
||||||
[`header_info_category_${nextHeaderIndex}`]: category,
|
|
||||||
[`header_info_name_${nextHeaderIndex}`]: modifiedData.componentToCreate.name,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
push({ search: makeSearch(searchToOpenAddField, true) });
|
push({ search: makeSearch(searchToOpenAddField, true) });
|
||||||
@ -1050,7 +996,7 @@ const FormModal = () => {
|
|||||||
formErrors,
|
formErrors,
|
||||||
isAddingAComponentToAnotherComponent,
|
isAddingAComponentToAnotherComponent,
|
||||||
isCreatingComponentWhileAddingAField,
|
isCreatingComponentWhileAddingAField,
|
||||||
mainBoxHeader: get(headers, [0, 'label'], ''),
|
mainBoxHeader: mainSchemaName,
|
||||||
modifiedData,
|
modifiedData,
|
||||||
naturePickerType: state.forTarget,
|
naturePickerType: state.forTarget,
|
||||||
isCreating,
|
isCreating,
|
||||||
@ -1093,8 +1039,10 @@ const FormModal = () => {
|
|||||||
<ModalLayout onClose={handleClosed} labelledBy="title">
|
<ModalLayout onClose={handleClosed} labelledBy="title">
|
||||||
<FormModalHeader
|
<FormModalHeader
|
||||||
actionType={state.actionType}
|
actionType={state.actionType}
|
||||||
headers={headers}
|
attributeName={state.attributeName}
|
||||||
|
categoryName={state.categoryName}
|
||||||
contentTypeKind={state.kind}
|
contentTypeKind={state.kind}
|
||||||
|
dynamicZoneTarget={state.dynamicZoneTarget}
|
||||||
modalType={state.modalType}
|
modalType={state.modalType}
|
||||||
forTarget={state.forTarget}
|
forTarget={state.forTarget}
|
||||||
targetUid={state.targetUid}
|
targetUid={state.targetUid}
|
||||||
|
@ -1,24 +0,0 @@
|
|||||||
import { set } from 'lodash';
|
|
||||||
|
|
||||||
const ALLOWED_KEYS = ['header_label', 'header_info_category', 'header_info_name'];
|
|
||||||
const createHeadersArray = obj => {
|
|
||||||
const array = Object.keys(obj).reduce((acc, current) => {
|
|
||||||
const splitted = current.split('_');
|
|
||||||
const currentKeys = splitted.filter((_, i) => i !== splitted.length - 1);
|
|
||||||
|
|
||||||
if (ALLOWED_KEYS.includes(currentKeys.join('_'))) {
|
|
||||||
const currentKeysIndex = parseInt(splitted[splitted.length - 1] - 1, 10);
|
|
||||||
const path = [currentKeysIndex, ...currentKeys.filter(key => key !== 'header')];
|
|
||||||
|
|
||||||
const value = obj[current];
|
|
||||||
|
|
||||||
set(acc, path, value);
|
|
||||||
}
|
|
||||||
|
|
||||||
return acc;
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return array.filter(obj => obj.label !== null);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default createHeadersArray;
|
|
@ -1,27 +0,0 @@
|
|||||||
import { isObject } from 'lodash';
|
|
||||||
|
|
||||||
const createHeadersObjectFromArray = array => {
|
|
||||||
return array.reduce((acc, current, index) => {
|
|
||||||
const createHeaderObject = (obj, i, middle = '') =>
|
|
||||||
Object.keys(obj).reduce((acc1, current1) => {
|
|
||||||
if (isObject(obj[current1])) {
|
|
||||||
return {
|
|
||||||
...acc1,
|
|
||||||
...createHeaderObject(obj[current1], i, `_${current1}`),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const name = `header${middle}_${current1}_${i}`;
|
|
||||||
|
|
||||||
acc1[name] = obj[current1];
|
|
||||||
|
|
||||||
return acc1;
|
|
||||||
}, {});
|
|
||||||
|
|
||||||
const headerObject = createHeaderObject(current, index + 1);
|
|
||||||
|
|
||||||
return { ...acc, ...headerObject };
|
|
||||||
}, {});
|
|
||||||
};
|
|
||||||
|
|
||||||
export default createHeadersObjectFromArray;
|
|
@ -1,6 +1,4 @@
|
|||||||
export { default as canEditContentType } from './canEditContentType';
|
export { default as canEditContentType } from './canEditContentType';
|
||||||
export { default as createHeadersArray } from './createHeadersArray';
|
|
||||||
export { default as createHeadersObjectFromArray } from './createHeadersObjectFromArray';
|
|
||||||
export { default as getAttributesToDisplay } from './getAttributesToDisplay';
|
export { default as getAttributesToDisplay } from './getAttributesToDisplay';
|
||||||
export { default as getModalTitleSubHeader } from './getModalTitleSubHeader';
|
export { default as getModalTitleSubHeader } from './getModalTitleSubHeader';
|
||||||
export { default as getNextSearch } from './getNextSearch';
|
export { default as getNextSearch } from './getNextSearch';
|
||||||
|
@ -2,6 +2,7 @@ const INITIAL_STATE_DATA = {
|
|||||||
actionType: null,
|
actionType: null,
|
||||||
attributeName: null,
|
attributeName: null,
|
||||||
attributeType: null,
|
attributeType: null,
|
||||||
|
categoryName: null,
|
||||||
dynamicZoneTarget: null,
|
dynamicZoneTarget: null,
|
||||||
forTarget: null,
|
forTarget: null,
|
||||||
modalType: null,
|
modalType: null,
|
||||||
@ -10,21 +11,6 @@ const INITIAL_STATE_DATA = {
|
|||||||
settingType: null,
|
settingType: null,
|
||||||
step: null,
|
step: null,
|
||||||
targetUid: null,
|
targetUid: null,
|
||||||
header_label_1: null,
|
|
||||||
header_info_category_1: null,
|
|
||||||
header_info_name_1: null,
|
|
||||||
header_label_2: null,
|
|
||||||
header_info_category_2: null,
|
|
||||||
header_info_name_2: null,
|
|
||||||
header_label_3: null,
|
|
||||||
header_info_category_3: null,
|
|
||||||
header_info_name_3: null,
|
|
||||||
header_label_4: null,
|
|
||||||
header_info_category_4: null,
|
|
||||||
header_info_name_4: null,
|
|
||||||
header_label_5: null,
|
|
||||||
header_info_category_5: null,
|
|
||||||
header_info_name_5: null,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export { INITIAL_STATE_DATA };
|
export { INITIAL_STATE_DATA };
|
||||||
|
@ -1,112 +0,0 @@
|
|||||||
import createHeadersArray from '../createHeadersArray';
|
|
||||||
|
|
||||||
describe('FormModal | utils | createHeadersArray', () => {
|
|
||||||
it('should return an empty array if no header key is set', () => {
|
|
||||||
const data = {
|
|
||||||
actionType: null,
|
|
||||||
attributeName: null,
|
|
||||||
attributeType: null,
|
|
||||||
dynamicZoneTarget: null,
|
|
||||||
forTarget: null,
|
|
||||||
modalType: null,
|
|
||||||
pathToSchema: [],
|
|
||||||
settingType: null,
|
|
||||||
step: null,
|
|
||||||
targetUid: null,
|
|
||||||
header_label_1: null,
|
|
||||||
header_info_category_1: null,
|
|
||||||
header_info_name_1: null,
|
|
||||||
header_label_2: null,
|
|
||||||
header_info_category_2: null,
|
|
||||||
header_info_name_2: null,
|
|
||||||
header_label_3: null,
|
|
||||||
header_info_category_3: null,
|
|
||||||
header_info_name_3: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
expect(createHeadersArray(data)).toEqual([]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should return an array containing a header object', () => {
|
|
||||||
const data = {
|
|
||||||
actionType: 'something',
|
|
||||||
attributeName: null,
|
|
||||||
attributeType: null,
|
|
||||||
dynamicZoneTarget: null,
|
|
||||||
forTarget: null,
|
|
||||||
modalType: null,
|
|
||||||
pathToSchema: [],
|
|
||||||
settingType: null,
|
|
||||||
step: null,
|
|
||||||
targetUid: null,
|
|
||||||
header_label_1: 'restaurant',
|
|
||||||
header_info_category_1: null,
|
|
||||||
header_info_name_1: null,
|
|
||||||
header_label_2: null,
|
|
||||||
header_info_category_2: null,
|
|
||||||
header_info_name_2: null,
|
|
||||||
header_label_3: null,
|
|
||||||
header_info_category_3: null,
|
|
||||||
header_info_name_3: null,
|
|
||||||
};
|
|
||||||
const expected = [
|
|
||||||
{
|
|
||||||
label: 'restaurant',
|
|
||||||
|
|
||||||
info: {
|
|
||||||
name: null,
|
|
||||||
category: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
expect(createHeadersArray(data)).toEqual(expected);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should handle multiple headers correctly', () => {
|
|
||||||
const data = {
|
|
||||||
actionType: 'something',
|
|
||||||
attributeName: null,
|
|
||||||
attributeType: null,
|
|
||||||
dynamicZoneTarget: null,
|
|
||||||
forTarget: null,
|
|
||||||
|
|
||||||
modalType: null,
|
|
||||||
pathToSchema: [],
|
|
||||||
settingType: null,
|
|
||||||
step: null,
|
|
||||||
|
|
||||||
targetUid: null,
|
|
||||||
header_label_1: 'restaurant',
|
|
||||||
header_info_category_1: null,
|
|
||||||
header_info_name_1: null,
|
|
||||||
header_label_2: 'closing period',
|
|
||||||
header_info_category_2: 'default',
|
|
||||||
header_info_name_2: 'closingperiod',
|
|
||||||
header_label_3: null,
|
|
||||||
header_info_category_3: null,
|
|
||||||
header_info_name_3: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
const expected = [
|
|
||||||
{
|
|
||||||
label: 'restaurant',
|
|
||||||
|
|
||||||
info: {
|
|
||||||
name: null,
|
|
||||||
category: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'closing period',
|
|
||||||
|
|
||||||
info: {
|
|
||||||
name: 'closingperiod',
|
|
||||||
category: 'default',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
expect(createHeadersArray(data)).toEqual(expected);
|
|
||||||
});
|
|
||||||
});
|
|
@ -1,37 +0,0 @@
|
|||||||
import createHeadersObjectFromArray from '../createHeadersObjectFromArray';
|
|
||||||
|
|
||||||
describe('FormModal | utils | createHeadersArray', () => {
|
|
||||||
it('should return a header object', () => {
|
|
||||||
const data = [
|
|
||||||
{
|
|
||||||
label: 'test',
|
|
||||||
|
|
||||||
info: {
|
|
||||||
name: null,
|
|
||||||
category: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'test2',
|
|
||||||
|
|
||||||
info: {
|
|
||||||
name: 'something',
|
|
||||||
category: 'default',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const expected = {
|
|
||||||
header_label_1: 'test',
|
|
||||||
|
|
||||||
header_info_name_1: null,
|
|
||||||
header_info_category_1: null,
|
|
||||||
header_label_2: 'test2',
|
|
||||||
|
|
||||||
header_info_name_2: 'something',
|
|
||||||
header_info_category_2: 'default',
|
|
||||||
};
|
|
||||||
|
|
||||||
expect(createHeadersObjectFromArray(data)).toEqual(expected);
|
|
||||||
});
|
|
||||||
});
|
|
@ -8,30 +8,24 @@ import React from 'react';
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { useIntl } from 'react-intl';
|
import { useIntl } from 'react-intl';
|
||||||
import upperFirst from 'lodash/upperFirst';
|
import upperFirst from 'lodash/upperFirst';
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
||||||
import { Breadcrumbs, Crumb } from '@strapi/parts/Breadcrumbs';
|
import { Breadcrumbs, Crumb } from '@strapi/parts/Breadcrumbs';
|
||||||
import { ModalHeader } from '@strapi/parts/ModalLayout';
|
import { ModalHeader } from '@strapi/parts/ModalLayout';
|
||||||
import { Box } from '@strapi/parts/Box';
|
import { Box } from '@strapi/parts/Box';
|
||||||
import { Row } from '@strapi/parts/Row';
|
import { Row } from '@strapi/parts/Row';
|
||||||
import { Stack } from '@strapi/parts/Stack';
|
import { Stack } from '@strapi/parts/Stack';
|
||||||
import { ButtonText } from '@strapi/parts/Text';
|
import { ButtonText } from '@strapi/parts/Text';
|
||||||
import styled from 'styled-components';
|
|
||||||
import useDataManager from '../../hooks/useDataManager';
|
import useDataManager from '../../hooks/useDataManager';
|
||||||
import getTrad from '../../utils/getTrad';
|
import getTrad from '../../utils/getTrad';
|
||||||
import AttributeIcon from '../AttributeIcon';
|
import AttributeIcon from '../AttributeIcon';
|
||||||
|
|
||||||
const IconBox = styled(Box)`
|
|
||||||
svg {
|
|
||||||
color: ${({ theme }) => theme.colors.primary600};
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const FormModalHeader = ({
|
const FormModalHeader = ({
|
||||||
actionType,
|
actionType,
|
||||||
|
attributeName,
|
||||||
attributeType,
|
attributeType,
|
||||||
|
categoryName,
|
||||||
contentTypeKind,
|
contentTypeKind,
|
||||||
|
dynamicZoneTarget,
|
||||||
forTarget,
|
forTarget,
|
||||||
headers,
|
|
||||||
modalType,
|
modalType,
|
||||||
targetUid,
|
targetUid,
|
||||||
}) => {
|
}) => {
|
||||||
@ -39,20 +33,9 @@ const FormModalHeader = ({
|
|||||||
const { modifiedData } = useDataManager();
|
const { modifiedData } = useDataManager();
|
||||||
|
|
||||||
let icon;
|
let icon;
|
||||||
let isFontAwesomeIcon = false;
|
let headers = [];
|
||||||
|
|
||||||
if (modalType === 'chooseAttribute') {
|
const schema = modifiedData?.[forTarget]?.[targetUid] || modifiedData?.[forTarget] || null;
|
||||||
const schema = modifiedData[forTarget][targetUid] || modifiedData[forTarget];
|
|
||||||
|
|
||||||
if (forTarget === 'components') {
|
|
||||||
icon = schema.schema.icon;
|
|
||||||
isFontAwesomeIcon = true;
|
|
||||||
} else if (forTarget === 'component') {
|
|
||||||
icon = 'component';
|
|
||||||
} else {
|
|
||||||
icon = schema.schema.kind;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (modalType === 'contentType') {
|
if (modalType === 'contentType') {
|
||||||
icon = contentTypeKind;
|
icon = contentTypeKind;
|
||||||
@ -62,14 +45,6 @@ const FormModalHeader = ({
|
|||||||
icon = 'component';
|
icon = 'component';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (modalType === 'addComponentToDynamicZone') {
|
|
||||||
icon = 'dynamiczone';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (modalType === 'attribute') {
|
|
||||||
icon = attributeType;
|
|
||||||
}
|
|
||||||
|
|
||||||
const isCreatingMainSchema = ['component', 'contentType'].includes(modalType);
|
const isCreatingMainSchema = ['component', 'contentType'].includes(modalType);
|
||||||
|
|
||||||
if (isCreatingMainSchema) {
|
if (isCreatingMainSchema) {
|
||||||
@ -91,7 +66,7 @@ const FormModalHeader = ({
|
|||||||
</Box>
|
</Box>
|
||||||
<Box paddingLeft={3}>
|
<Box paddingLeft={3}>
|
||||||
<ButtonText textColor="neutral800" as="h2" id="title">
|
<ButtonText textColor="neutral800" as="h2" id="title">
|
||||||
{formatMessage({ id: headerId }, { name: headers[0].label })}
|
{formatMessage({ id: headerId }, { name: schema?.schema.name })}
|
||||||
</ButtonText>
|
</ButtonText>
|
||||||
</Box>
|
</Box>
|
||||||
</Row>
|
</Row>
|
||||||
@ -99,25 +74,54 @@ const FormModalHeader = ({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
headers = [
|
||||||
|
{
|
||||||
|
label: schema?.schema.name || null,
|
||||||
|
info: { category: schema?.category || null, name: schema?.schema.name },
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
if (modalType === 'chooseAttribute') {
|
||||||
|
icon = ['component', 'components'].includes(forTarget) ? 'component' : schema.schema.kind;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (modalType === 'addComponentToDynamicZone') {
|
||||||
|
icon = 'dynamiczone';
|
||||||
|
headers.push({ label: dynamicZoneTarget });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (modalType === 'attribute') {
|
||||||
|
icon = attributeType;
|
||||||
|
headers.push({ label: attributeName });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (modalType === 'editCategory') {
|
||||||
|
const label = formatMessage({
|
||||||
|
id: getTrad('modalForm.header.categories'),
|
||||||
|
defaultMessage: 'Categories',
|
||||||
|
});
|
||||||
|
|
||||||
|
headers = [{ label }, { label: categoryName }];
|
||||||
|
}
|
||||||
|
|
||||||
const breadcrumbsLabel = headers.map(({ label }) => label).join(',');
|
const breadcrumbsLabel = headers.map(({ label }) => label).join(',');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ModalHeader>
|
<ModalHeader>
|
||||||
<Stack horizontal size={3}>
|
<Stack horizontal size={3}>
|
||||||
{!isFontAwesomeIcon && <AttributeIcon type={icon} />}
|
<AttributeIcon type={icon} />
|
||||||
{isFontAwesomeIcon && (
|
|
||||||
<IconBox>
|
|
||||||
<FontAwesomeIcon icon={icon} />
|
|
||||||
</IconBox>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Breadcrumbs label={breadcrumbsLabel}>
|
<Breadcrumbs label={breadcrumbsLabel}>
|
||||||
{headers.map((header, index) => {
|
{headers.map((header, index) => {
|
||||||
const label = upperFirst(header.label);
|
const label = upperFirst(header.label);
|
||||||
|
|
||||||
|
if (!label) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
const key = `${header.label}.${index}`;
|
const key = `${header.label}.${index}`;
|
||||||
|
|
||||||
if (header.info.category) {
|
if (header.info?.category) {
|
||||||
const content = `${label} (${upperFirst(header.info.category)} - ${upperFirst(
|
const content = `${label} (${upperFirst(header.info.category)} - ${upperFirst(
|
||||||
header.info.name
|
header.info.name
|
||||||
)})`;
|
)})`;
|
||||||
@ -135,22 +139,23 @@ const FormModalHeader = ({
|
|||||||
|
|
||||||
FormModalHeader.defaultProps = {
|
FormModalHeader.defaultProps = {
|
||||||
actionType: null,
|
actionType: null,
|
||||||
|
attributeName: null,
|
||||||
attributeType: null,
|
attributeType: null,
|
||||||
|
categoryName: null,
|
||||||
|
dynamicZoneTarget: null,
|
||||||
|
forTarget: null,
|
||||||
contentTypeKind: null,
|
contentTypeKind: null,
|
||||||
targetUid: null,
|
targetUid: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
FormModalHeader.propTypes = {
|
FormModalHeader.propTypes = {
|
||||||
actionType: PropTypes.string,
|
actionType: PropTypes.string,
|
||||||
|
attributeName: PropTypes.string,
|
||||||
attributeType: PropTypes.string,
|
attributeType: PropTypes.string,
|
||||||
|
categoryName: PropTypes.string,
|
||||||
contentTypeKind: PropTypes.string,
|
contentTypeKind: PropTypes.string,
|
||||||
forTarget: PropTypes.oneOf(['contentType', 'component', 'components']).isRequired,
|
dynamicZoneTarget: PropTypes.string,
|
||||||
headers: PropTypes.arrayOf(
|
forTarget: PropTypes.oneOf(['contentType', 'component', 'components']),
|
||||||
PropTypes.shape({
|
|
||||||
icon: PropTypes.shape({ name: PropTypes.string, isCustom: PropTypes.bool }),
|
|
||||||
label: PropTypes.string.isRequired,
|
|
||||||
})
|
|
||||||
).isRequired,
|
|
||||||
modalType: PropTypes.string.isRequired,
|
modalType: PropTypes.string.isRequired,
|
||||||
targetUid: PropTypes.string,
|
targetUid: PropTypes.string,
|
||||||
};
|
};
|
||||||
|
@ -7,7 +7,6 @@
|
|||||||
/* eslint-disable import/no-cycle */
|
/* eslint-disable import/no-cycle */
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import get from 'lodash/get';
|
|
||||||
import { EmptyBodyTable, useTracking } from '@strapi/helper-plugin';
|
import { EmptyBodyTable, useTracking } from '@strapi/helper-plugin';
|
||||||
import { Box } from '@strapi/parts/Box';
|
import { Box } from '@strapi/parts/Box';
|
||||||
import { Button } from '@strapi/parts/Button';
|
import { Button } from '@strapi/parts/Button';
|
||||||
@ -27,21 +26,17 @@ import NestedTFooter from '../NestedTFooter';
|
|||||||
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
||||||
|
|
||||||
function List({
|
function List({
|
||||||
customRowComponent,
|
|
||||||
items,
|
|
||||||
addComponentToDZ,
|
addComponentToDZ,
|
||||||
targetUid,
|
customRowComponent,
|
||||||
mainTypeName,
|
|
||||||
editTarget,
|
editTarget,
|
||||||
isFromDynamicZone,
|
|
||||||
isNestedInDZComponent,
|
|
||||||
isMain,
|
|
||||||
firstLoopComponentName,
|
|
||||||
firstLoopComponentUid,
|
firstLoopComponentUid,
|
||||||
secondLoopComponentName,
|
isFromDynamicZone,
|
||||||
secondLoopComponentUid,
|
isMain,
|
||||||
|
isNestedInDZComponent,
|
||||||
isSub,
|
isSub,
|
||||||
dzName,
|
items,
|
||||||
|
secondLoopComponentUid,
|
||||||
|
targetUid,
|
||||||
}) {
|
}) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage } = useIntl();
|
||||||
const { trackUsage } = useTracking();
|
const { trackUsage } = useTracking();
|
||||||
@ -51,87 +46,7 @@ function List({
|
|||||||
const onClickAddField = () => {
|
const onClickAddField = () => {
|
||||||
trackUsage('hasClickedCTBAddFieldBanner');
|
trackUsage('hasClickedCTBAddFieldBanner');
|
||||||
|
|
||||||
const firstComponentCategory = get(
|
openModalAddField(editTarget, targetUid);
|
||||||
modifiedData,
|
|
||||||
['components', firstLoopComponentUid, 'category'],
|
|
||||||
null
|
|
||||||
);
|
|
||||||
const firstComponentFriendlyName = get(
|
|
||||||
modifiedData,
|
|
||||||
['components', firstLoopComponentUid, 'schema', 'name'],
|
|
||||||
null
|
|
||||||
);
|
|
||||||
const secondComponentCategory = get(
|
|
||||||
modifiedData,
|
|
||||||
['components', secondLoopComponentUid, 'category'],
|
|
||||||
null
|
|
||||||
);
|
|
||||||
const secondComponentFriendlyName = get(
|
|
||||||
modifiedData,
|
|
||||||
['components', secondLoopComponentUid, 'schema', 'name'],
|
|
||||||
null
|
|
||||||
);
|
|
||||||
|
|
||||||
let firstHeaderObject = {
|
|
||||||
header_label_1: mainTypeName,
|
|
||||||
header_info_category_1: null,
|
|
||||||
header_info_name_1: null,
|
|
||||||
};
|
|
||||||
let secondHeaderObject = {
|
|
||||||
header_label_2: firstLoopComponentName,
|
|
||||||
header_info_category_2: firstComponentCategory,
|
|
||||||
header_info_name_2: firstComponentFriendlyName,
|
|
||||||
};
|
|
||||||
let thirdHeaderObject = {
|
|
||||||
header_info_name_3: secondComponentFriendlyName,
|
|
||||||
};
|
|
||||||
let fourthHeaderObject = {
|
|
||||||
header_info_category_4: secondComponentCategory,
|
|
||||||
header_info_name_4: secondComponentFriendlyName,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (firstLoopComponentName) {
|
|
||||||
firstHeaderObject = {
|
|
||||||
...firstHeaderObject,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (secondLoopComponentUid) {
|
|
||||||
firstHeaderObject = {
|
|
||||||
...firstHeaderObject,
|
|
||||||
};
|
|
||||||
thirdHeaderObject = {
|
|
||||||
...thirdHeaderObject,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isFromDynamicZone || isNestedInDZComponent) {
|
|
||||||
secondHeaderObject = {
|
|
||||||
...secondHeaderObject,
|
|
||||||
header_label_2: dzName,
|
|
||||||
header_info_category_2: null,
|
|
||||||
header_info_name_2: null,
|
|
||||||
};
|
|
||||||
thirdHeaderObject = {
|
|
||||||
...thirdHeaderObject,
|
|
||||||
header_label_3: firstLoopComponentName,
|
|
||||||
header_info_category_3: firstComponentCategory,
|
|
||||||
header_info_name_3: firstComponentFriendlyName,
|
|
||||||
};
|
|
||||||
fourthHeaderObject = {
|
|
||||||
...fourthHeaderObject,
|
|
||||||
header_label_4: secondLoopComponentName,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
openModalAddField(
|
|
||||||
editTarget,
|
|
||||||
targetUid,
|
|
||||||
firstHeaderObject,
|
|
||||||
secondHeaderObject,
|
|
||||||
thirdHeaderObject,
|
|
||||||
fourthHeaderObject
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
if (!targetUid) {
|
if (!targetUid) {
|
||||||
@ -239,15 +154,11 @@ function List({
|
|||||||
<React.Fragment key={item.name}>
|
<React.Fragment key={item.name}>
|
||||||
<CustomRow
|
<CustomRow
|
||||||
{...item}
|
{...item}
|
||||||
dzName={dzName}
|
|
||||||
isNestedInDZComponent={isNestedInDZComponent}
|
isNestedInDZComponent={isNestedInDZComponent}
|
||||||
targetUid={targetUid}
|
targetUid={targetUid}
|
||||||
mainTypeName={mainTypeName}
|
|
||||||
editTarget={editTarget}
|
editTarget={editTarget}
|
||||||
firstLoopComponentName={firstLoopComponentName}
|
|
||||||
firstLoopComponentUid={firstLoopComponentUid}
|
firstLoopComponentUid={firstLoopComponentUid}
|
||||||
isFromDynamicZone={isFromDynamicZone}
|
isFromDynamicZone={isFromDynamicZone}
|
||||||
secondLoopComponentName={secondLoopComponentName}
|
|
||||||
secondLoopComponentUid={secondLoopComponentUid}
|
secondLoopComponentUid={secondLoopComponentUid}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -256,11 +167,8 @@ function List({
|
|||||||
{...item}
|
{...item}
|
||||||
customRowComponent={customRowComponent}
|
customRowComponent={customRowComponent}
|
||||||
targetUid={targetUid}
|
targetUid={targetUid}
|
||||||
dzName={dzName}
|
|
||||||
isNestedInDZComponent={isFromDynamicZone}
|
isNestedInDZComponent={isFromDynamicZone}
|
||||||
mainTypeName={mainTypeName}
|
|
||||||
editTarget={editTarget}
|
editTarget={editTarget}
|
||||||
firstLoopComponentName={firstLoopComponentName}
|
|
||||||
firstLoopComponentUid={firstLoopComponentUid}
|
firstLoopComponentUid={firstLoopComponentUid}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
@ -271,7 +179,6 @@ function List({
|
|||||||
customRowComponent={customRowComponent}
|
customRowComponent={customRowComponent}
|
||||||
addComponent={addComponentToDZ}
|
addComponent={addComponentToDZ}
|
||||||
targetUid={targetUid}
|
targetUid={targetUid}
|
||||||
mainTypeName={mainTypeName}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
@ -315,15 +222,12 @@ function List({
|
|||||||
List.defaultProps = {
|
List.defaultProps = {
|
||||||
addComponentToDZ: () => {},
|
addComponentToDZ: () => {},
|
||||||
customRowComponent: null,
|
customRowComponent: null,
|
||||||
dzName: null,
|
|
||||||
firstLoopComponentName: null,
|
|
||||||
firstLoopComponentUid: null,
|
firstLoopComponentUid: null,
|
||||||
isFromDynamicZone: false,
|
isFromDynamicZone: false,
|
||||||
isNestedInDZComponent: false,
|
isNestedInDZComponent: false,
|
||||||
isMain: false,
|
isMain: false,
|
||||||
isSub: false,
|
isSub: false,
|
||||||
items: [],
|
items: [],
|
||||||
secondLoopComponentName: null,
|
|
||||||
secondLoopComponentUid: null,
|
secondLoopComponentUid: null,
|
||||||
targetUid: null,
|
targetUid: null,
|
||||||
};
|
};
|
||||||
@ -331,16 +235,12 @@ List.defaultProps = {
|
|||||||
List.propTypes = {
|
List.propTypes = {
|
||||||
addComponentToDZ: PropTypes.func,
|
addComponentToDZ: PropTypes.func,
|
||||||
customRowComponent: PropTypes.func,
|
customRowComponent: PropTypes.func,
|
||||||
dzName: PropTypes.string,
|
|
||||||
editTarget: PropTypes.string.isRequired,
|
editTarget: PropTypes.string.isRequired,
|
||||||
firstLoopComponentName: PropTypes.string,
|
|
||||||
firstLoopComponentUid: PropTypes.string,
|
firstLoopComponentUid: PropTypes.string,
|
||||||
isFromDynamicZone: PropTypes.bool,
|
isFromDynamicZone: PropTypes.bool,
|
||||||
isNestedInDZComponent: PropTypes.bool,
|
isNestedInDZComponent: PropTypes.bool,
|
||||||
isMain: PropTypes.bool,
|
isMain: PropTypes.bool,
|
||||||
items: PropTypes.instanceOf(Array),
|
items: PropTypes.instanceOf(Array),
|
||||||
mainTypeName: PropTypes.string.isRequired,
|
|
||||||
secondLoopComponentName: PropTypes.string,
|
|
||||||
secondLoopComponentUid: PropTypes.string,
|
secondLoopComponentUid: PropTypes.string,
|
||||||
targetUid: PropTypes.string,
|
targetUid: PropTypes.string,
|
||||||
isSub: PropTypes.bool,
|
isSub: PropTypes.bool,
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import React, { memo } from 'react';
|
import React, { memo } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { get } from 'lodash';
|
import get from 'lodash/get';
|
||||||
import upperFirst from 'lodash/upperFirst';
|
import upperFirst from 'lodash/upperFirst';
|
||||||
import { useIntl } from 'react-intl';
|
import { useIntl } from 'react-intl';
|
||||||
import { IconButton } from '@strapi/parts/IconButton';
|
import { IconButton } from '@strapi/parts/IconButton';
|
||||||
@ -20,25 +20,20 @@ import AttributeIcon from '../AttributeIcon';
|
|||||||
|
|
||||||
function ListRow({
|
function ListRow({
|
||||||
configurable,
|
configurable,
|
||||||
|
editTarget,
|
||||||
|
firstLoopComponentUid,
|
||||||
|
isFromDynamicZone,
|
||||||
name,
|
name,
|
||||||
dzName,
|
|
||||||
onClick,
|
onClick,
|
||||||
plugin,
|
plugin,
|
||||||
|
relation,
|
||||||
|
repeatable,
|
||||||
|
secondLoopComponentUid,
|
||||||
target,
|
target,
|
||||||
targetUid,
|
targetUid,
|
||||||
type,
|
type,
|
||||||
mainTypeName,
|
|
||||||
editTarget,
|
|
||||||
firstLoopComponentName,
|
|
||||||
firstLoopComponentUid,
|
|
||||||
isFromDynamicZone,
|
|
||||||
repeatable,
|
|
||||||
secondLoopComponentName,
|
|
||||||
secondLoopComponentUid,
|
|
||||||
isNestedInDZComponent,
|
|
||||||
relation,
|
|
||||||
}) {
|
}) {
|
||||||
const { contentTypes, isInDevelopmentMode, modifiedData, removeAttribute } = useDataManager();
|
const { contentTypes, isInDevelopmentMode, removeAttribute } = useDataManager();
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage } = useIntl();
|
||||||
|
|
||||||
const isMorph = type === 'relation' && relation.includes('morph');
|
const isMorph = type === 'relation' && relation.includes('morph');
|
||||||
@ -61,99 +56,8 @@ function ListRow({
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (configurable !== false) {
|
if (configurable !== false) {
|
||||||
const firstComponentCategory = get(
|
|
||||||
modifiedData,
|
|
||||||
['components', firstLoopComponentUid, 'category'],
|
|
||||||
null
|
|
||||||
);
|
|
||||||
const secondComponentCategory = get(
|
|
||||||
modifiedData,
|
|
||||||
['components', secondLoopComponentUid, 'category'],
|
|
||||||
null
|
|
||||||
);
|
|
||||||
|
|
||||||
const attrType = type;
|
const attrType = type;
|
||||||
|
|
||||||
let firstHeaderObject = {
|
|
||||||
header_label_1: mainTypeName,
|
|
||||||
header_info_category_1: null,
|
|
||||||
header_info_name_1: null,
|
|
||||||
};
|
|
||||||
let secondHeaderObject = {
|
|
||||||
header_label_2: name,
|
|
||||||
header_info_category_2: null,
|
|
||||||
header_info_name_2: null,
|
|
||||||
};
|
|
||||||
let thirdHeaderObject = {
|
|
||||||
header_info_category_3: null,
|
|
||||||
header_info_name_3: null,
|
|
||||||
};
|
|
||||||
let fourthHeaderObject = {
|
|
||||||
header_info_category_4: null,
|
|
||||||
header_info_name_4: null,
|
|
||||||
};
|
|
||||||
let fifthHeaderObject = {
|
|
||||||
header_info_category_5: null,
|
|
||||||
header_info_name_5: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (firstLoopComponentName) {
|
|
||||||
secondHeaderObject = {
|
|
||||||
header_label_2: firstLoopComponentName,
|
|
||||||
header_info_category_2: firstComponentCategory,
|
|
||||||
header_info_name_2: firstLoopComponentName,
|
|
||||||
};
|
|
||||||
|
|
||||||
thirdHeaderObject = {
|
|
||||||
...thirdHeaderObject,
|
|
||||||
header_label_3: name,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (secondLoopComponentUid) {
|
|
||||||
thirdHeaderObject = {
|
|
||||||
...thirdHeaderObject,
|
|
||||||
header_label_3: secondLoopComponentName,
|
|
||||||
header_info_category_3: secondComponentCategory,
|
|
||||||
header_info_name_3: secondLoopComponentName,
|
|
||||||
};
|
|
||||||
fourthHeaderObject = {
|
|
||||||
...fourthHeaderObject,
|
|
||||||
header_label_4: name,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isFromDynamicZone || isNestedInDZComponent) {
|
|
||||||
secondHeaderObject = {
|
|
||||||
header_label_2: dzName,
|
|
||||||
header_info_name_2: null,
|
|
||||||
header_info_category_2: null,
|
|
||||||
};
|
|
||||||
thirdHeaderObject = {
|
|
||||||
header_label_3: firstLoopComponentName,
|
|
||||||
header_info_name_3: firstComponentCategory,
|
|
||||||
header_info_category_3: firstComponentCategory,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!isNestedInDZComponent) {
|
|
||||||
fourthHeaderObject = {
|
|
||||||
header_info_category_4: null,
|
|
||||||
header_label_4: name,
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
fourthHeaderObject = {
|
|
||||||
header_info_category_4: secondComponentCategory,
|
|
||||||
header_info_name_4: secondLoopComponentName,
|
|
||||||
header_label_4: secondLoopComponentName,
|
|
||||||
};
|
|
||||||
|
|
||||||
fifthHeaderObject = {
|
|
||||||
...fifthHeaderObject,
|
|
||||||
header_label_5: name,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onClick(
|
onClick(
|
||||||
// Tells where the attribute is located in the main modifiedData object : contentType, component or components
|
// Tells where the attribute is located in the main modifiedData object : contentType, component or components
|
||||||
editTarget,
|
editTarget,
|
||||||
@ -162,12 +66,7 @@ function ListRow({
|
|||||||
// Name of the attribute
|
// Name of the attribute
|
||||||
name,
|
name,
|
||||||
// Type of the attribute
|
// Type of the attribute
|
||||||
attrType,
|
attrType
|
||||||
firstHeaderObject,
|
|
||||||
secondHeaderObject,
|
|
||||||
thirdHeaderObject,
|
|
||||||
fourthHeaderObject,
|
|
||||||
fifthHeaderObject
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -277,16 +176,12 @@ function ListRow({
|
|||||||
|
|
||||||
ListRow.defaultProps = {
|
ListRow.defaultProps = {
|
||||||
configurable: true,
|
configurable: true,
|
||||||
dzName: null,
|
|
||||||
firstLoopComponentName: null,
|
|
||||||
firstLoopComponentUid: null,
|
firstLoopComponentUid: null,
|
||||||
isFromDynamicZone: false,
|
isFromDynamicZone: false,
|
||||||
isNestedInDZComponent: false,
|
|
||||||
onClick: () => {},
|
onClick: () => {},
|
||||||
plugin: null,
|
plugin: null,
|
||||||
relation: '',
|
relation: '',
|
||||||
repeatable: false,
|
repeatable: false,
|
||||||
secondLoopComponentName: null,
|
|
||||||
secondLoopComponentUid: null,
|
secondLoopComponentUid: null,
|
||||||
target: null,
|
target: null,
|
||||||
targetUid: null,
|
targetUid: null,
|
||||||
@ -295,19 +190,14 @@ ListRow.defaultProps = {
|
|||||||
|
|
||||||
ListRow.propTypes = {
|
ListRow.propTypes = {
|
||||||
configurable: PropTypes.bool,
|
configurable: PropTypes.bool,
|
||||||
dzName: PropTypes.string,
|
|
||||||
editTarget: PropTypes.string.isRequired,
|
editTarget: PropTypes.string.isRequired,
|
||||||
firstLoopComponentName: PropTypes.string,
|
|
||||||
firstLoopComponentUid: PropTypes.string,
|
firstLoopComponentUid: PropTypes.string,
|
||||||
isFromDynamicZone: PropTypes.bool,
|
isFromDynamicZone: PropTypes.bool,
|
||||||
isNestedInDZComponent: PropTypes.bool,
|
|
||||||
mainTypeName: PropTypes.string.isRequired,
|
|
||||||
name: PropTypes.string.isRequired,
|
name: PropTypes.string.isRequired,
|
||||||
onClick: PropTypes.func,
|
onClick: PropTypes.func,
|
||||||
plugin: PropTypes.string,
|
plugin: PropTypes.string,
|
||||||
relation: PropTypes.string,
|
relation: PropTypes.string,
|
||||||
repeatable: PropTypes.bool,
|
repeatable: PropTypes.bool,
|
||||||
secondLoopComponentName: PropTypes.string,
|
|
||||||
secondLoopComponentUid: PropTypes.string,
|
secondLoopComponentUid: PropTypes.string,
|
||||||
target: PropTypes.string,
|
target: PropTypes.string,
|
||||||
targetUid: PropTypes.string,
|
targetUid: PropTypes.string,
|
||||||
|
@ -60,8 +60,6 @@ const SelectComponent = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (isCreatingComponentWhileAddingAField) {
|
if (isCreatingComponentWhileAddingAField) {
|
||||||
console.log({ componentToCreate });
|
|
||||||
|
|
||||||
options = [
|
options = [
|
||||||
{ uid: value, label: componentToCreate.name, categoryName: componentToCreate.category },
|
{ uid: value, label: componentToCreate.name, categoryName: componentToCreate.category },
|
||||||
];
|
];
|
||||||
|
@ -73,14 +73,7 @@ const ListView = () => {
|
|||||||
// const hasModelBeenModified = !isEqual(modifiedData, initialData);
|
// const hasModelBeenModified = !isEqual(modifiedData, initialData);
|
||||||
const forTarget = isInContentTypeView ? 'contentType' : 'component';
|
const forTarget = isInContentTypeView ? 'contentType' : 'component';
|
||||||
|
|
||||||
const handleClickAddField = async (
|
const handleClickAddField = async (forTarget, targetUid) => {
|
||||||
forTarget,
|
|
||||||
targetUid,
|
|
||||||
firstHeaderObj,
|
|
||||||
secondHeaderObj,
|
|
||||||
thirdHeaderObj,
|
|
||||||
fourthHeaderObj
|
|
||||||
) => {
|
|
||||||
// disable the prompt
|
// disable the prompt
|
||||||
// await wait();
|
// await wait();
|
||||||
|
|
||||||
@ -88,22 +81,12 @@ const ListView = () => {
|
|||||||
modalType: 'chooseAttribute',
|
modalType: 'chooseAttribute',
|
||||||
forTarget,
|
forTarget,
|
||||||
targetUid,
|
targetUid,
|
||||||
...firstHeaderObj,
|
|
||||||
...secondHeaderObj,
|
|
||||||
...thirdHeaderObj,
|
|
||||||
...fourthHeaderObj,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
push({ search: makeSearch(searchObj) });
|
push({ search: makeSearch(searchObj) });
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleClickAddComponentToDZ = async dzName => {
|
const handleClickAddComponentToDZ = async dzName => {
|
||||||
const firstHeaderObject = {
|
|
||||||
header_label_1: currentDataName,
|
|
||||||
};
|
|
||||||
const secondHeaderObj = {
|
|
||||||
header_label_2: dzName,
|
|
||||||
};
|
|
||||||
const search = {
|
const search = {
|
||||||
modalType: 'addComponentToDynamicZone',
|
modalType: 'addComponentToDynamicZone',
|
||||||
forTarget: 'contentType',
|
forTarget: 'contentType',
|
||||||
@ -112,8 +95,6 @@ const ListView = () => {
|
|||||||
settingType: 'base',
|
settingType: 'base',
|
||||||
step: '1',
|
step: '1',
|
||||||
actionType: 'edit',
|
actionType: 'edit',
|
||||||
...firstHeaderObject,
|
|
||||||
...secondHeaderObj,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// await wait();
|
// await wait();
|
||||||
@ -121,17 +102,7 @@ const ListView = () => {
|
|||||||
push({ search: makeSearch(search, true) });
|
push({ search: makeSearch(search, true) });
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleClickEditField = async (
|
const handleClickEditField = async (forTarget, targetUid, attributeName, type) => {
|
||||||
forTarget,
|
|
||||||
targetUid,
|
|
||||||
attributeName,
|
|
||||||
type,
|
|
||||||
firstHeaderObj,
|
|
||||||
secondHeaderObj,
|
|
||||||
thirdHeaderObj,
|
|
||||||
fourthHeaderObj,
|
|
||||||
fifthHeaderObj
|
|
||||||
) => {
|
|
||||||
const attributeType = getAttributeDisplayedType(type);
|
const attributeType = getAttributeDisplayedType(type);
|
||||||
|
|
||||||
// await wait();
|
// await wait();
|
||||||
@ -145,11 +116,6 @@ const ListView = () => {
|
|||||||
attributeName,
|
attributeName,
|
||||||
attributeType,
|
attributeType,
|
||||||
step: type === 'component' ? '2' : null,
|
step: type === 'component' ? '2' : null,
|
||||||
...firstHeaderObj,
|
|
||||||
...secondHeaderObj,
|
|
||||||
...thirdHeaderObj,
|
|
||||||
...fourthHeaderObj,
|
|
||||||
...fifthHeaderObj,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// await wait();
|
// await wait();
|
||||||
@ -214,7 +180,6 @@ const ListView = () => {
|
|||||||
settingType: 'base',
|
settingType: 'base',
|
||||||
forTarget: firstMainDataPath,
|
forTarget: firstMainDataPath,
|
||||||
targetUid,
|
targetUid,
|
||||||
header_label_1: label,
|
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@ -238,10 +203,7 @@ const ListView = () => {
|
|||||||
startIcon={<AddIcon />}
|
startIcon={<AddIcon />}
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
const headerDisplayObject = {
|
handleClickAddField(forTarget, targetUid);
|
||||||
header_label_1: currentDataName,
|
|
||||||
};
|
|
||||||
handleClickAddField(forTarget, targetUid, headerDisplayObject);
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{formatMessage({ id: getTrad('button.attributes.add.another') })}
|
{formatMessage({ id: getTrad('button.attributes.add.another') })}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user