@akemona-org/strapi-plugin-content-type-builder 3.7.0

package/admin/src/components/ListRow/index.js

@@ -0,0 +1,334 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { get } from 'lodash';
+import { FormattedMessage } from 'react-intl';
+import { AttributeIcon, IconLinks } from '@buffetjs/core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import pluginId from '../../pluginId';
+import useDataManager from '../../hooks/useDataManager';
+import getAttributeDisplayedType from '../../utils/getAttributeDisplayedType';
+import getTrad from '../../utils/getTrad';
+import Curve from '../../icons/Curve';
+import UpperFist from '../UpperFirst';
+import Wrapper from './Wrapper';
+
+function ListRow({
+  configurable,
+  name,
+  dzName,
+  nature,
+  onClick,
+  plugin,
+  target,
+  targetUid,
+  type,
+  mainTypeName,
+  editTarget,
+  firstLoopComponentName,
+  firstLoopComponentUid,
+  isFromDynamicZone,
+  repeatable,
+  secondLoopComponentName,
+  secondLoopComponentUid,
+  isNestedInDZComponent,
+}) {
+  const { contentTypes, isInDevelopmentMode, modifiedData, removeAttribute } = useDataManager();
+  const isMorph = target === '*';
+  const ico = ['integer', 'biginteger', 'float', 'decimal'].includes(type) ? 'number' : type;
+
+  let readableType = type;
+
+  if (['integer', 'biginteger', 'float', 'decimal'].includes(type)) {
+    readableType = 'number';
+  } else if (['string'].includes(type)) {
+    readableType = 'text';
+  }
+
+  const contentTypeFriendlyName = get(contentTypes, [target, 'schema', 'name'], '');
+  const src = target ? 'relation' : ico;
+
+  const handleClick = () => {
+    if (isMorph) {
+      return;
+    }
+
+    if (configurable !== false) {
+      const firstComponentCategory = get(
+        modifiedData,
+        ['components', firstLoopComponentUid, 'category'],
+        null
+      );
+      const secondComponentCategory = get(
+        modifiedData,
+        ['components', secondLoopComponentUid, 'category'],
+        null
+      );
+
+      const attrType = nature ? 'relation' : type;
+      const icoType = getAttributeDisplayedType(attrType);
+
+      let firstHeaderObject = {
+        header_label_1: mainTypeName,
+        header_icon_name_1: icoType,
+        header_icon_isCustom_1: false,
+        header_info_category_1: null,
+        header_info_name_1: null,
+      };
+      let secondHeaderObject = {
+        header_label_2: name,
+        header_icon_name_2: null,
+        header_icon_isCustom_2: false,
+        header_info_category_2: null,
+        header_info_name_2: null,
+      };
+      let thirdHeaderObject = {
+        header_icon_name_3: 'component',
+        header_icon_isCustom_3: false,
+        header_info_category_3: null,
+        header_info_name_3: null,
+      };
+      let fourthHeaderObject = {
+        header_icon_name_4: null,
+        header_icon_isCustom_4: false,
+        header_info_category_4: null,
+        header_info_name_4: null,
+      };
+      let fifthHeaderObject = {
+        header_icon_name_5: null,
+        header_icon_isCustom_5: false,
+        header_info_category_5: null,
+        header_info_name_5: null,
+      };
+
+      if (firstLoopComponentName) {
+        secondHeaderObject = {
+          header_label_2: firstLoopComponentName,
+          header_icon_name_2: 'component',
+          header_icon_isCustom_2: false,
+          header_info_category_2: firstComponentCategory,
+          header_info_name_2: firstLoopComponentName,
+        };
+
+        thirdHeaderObject = {
+          ...thirdHeaderObject,
+          header_label_3: name,
+          header_icon_name_3: null,
+        };
+      }
+
+      if (secondLoopComponentUid) {
+        thirdHeaderObject = {
+          ...thirdHeaderObject,
+          header_label_3: secondLoopComponentName,
+          header_icon_name_3: 'component',
+          header_info_category_3: secondComponentCategory,
+          header_info_name_3: secondLoopComponentName,
+        };
+        fourthHeaderObject = {
+          ...fourthHeaderObject,
+          header_label_4: name,
+          header_icon_name_4: null,
+        };
+      }
+
+      if (isFromDynamicZone || isNestedInDZComponent) {
+        secondHeaderObject = {
+          header_label_2: dzName,
+          header_icon_name_2: 'dynamiczone',
+          header_icon_isCustom_2: false,
+          header_info_name_2: null,
+          header_info_category_2: null,
+        };
+        thirdHeaderObject = {
+          header_icon_name_3: 'component',
+          header_label_3: firstLoopComponentName,
+          header_info_name_3: firstComponentCategory,
+          header_info_category_3: firstComponentCategory,
+        };
+
+        if (!isNestedInDZComponent) {
+          fourthHeaderObject = {
+            header_icon_name_4: null,
+            header_icon_isCustom_4: false,
+            header_info_category_4: null,
+            header_label_4: name,
+          };
+        } else {
+          fourthHeaderObject = {
+            header_icon_name_4: 'components',
+            header_icon_isCustom_4: false,
+            header_info_category_4: secondComponentCategory,
+            header_info_name_4: secondLoopComponentName,
+            header_label_4: secondLoopComponentName,
+          };
+
+          fifthHeaderObject = {
+            ...fifthHeaderObject,
+            header_label_5: name,
+          };
+        }
+      }
+
+      onClick(
+        // Tells where the attribute is located in the main modifiedData object : contentType, component or components
+        editTarget,
+        // main data type uid
+        secondLoopComponentUid || firstLoopComponentUid || targetUid,
+        // Name of the attribute
+        name,
+        // Type of the attribute
+        attrType,
+        firstHeaderObject,
+        secondHeaderObject,
+        thirdHeaderObject,
+        fourthHeaderObject,
+        fifthHeaderObject
+      );
+    }
+  };
+  let loopNumber;
+
+  if (secondLoopComponentUid && firstLoopComponentUid) {
+    loopNumber = 2;
+  } else if (firstLoopComponentUid) {
+    loopNumber = 1;
+  } else {
+    loopNumber = 0;
+  }
+
+  return (
+    <Wrapper
+      onClick={handleClick}
+      className={[target ? 'relation-row' : '', configurable ? 'clickable' : '']}
+      loopNumber={loopNumber}
+    >
+      <td>
+        <AttributeIcon key={src} type={src} />
+        <Curve fill={isFromDynamicZone ? '#AED4FB' : '#f3f4f4'} />
+      </td>
+      <td style={{ fontWeight: 600 }}>
+        <p>{name}</p>
+      </td>
+      <td>
+        {target ? (
+          <div>
+            <FormattedMessage
+              id={`${pluginId}.modelPage.attribute.${
+                isMorph ? 'relation-polymorphic' : 'relationWith'
+              }`}
+            />
+            &nbsp;
+            <FormattedMessage id={`${pluginId}.from`}>
+              {msg => (
+                <span style={{ fontStyle: 'italic' }}>
+                  <UpperFist content={contentTypeFriendlyName} />
+                  &nbsp;
+                  {plugin && `(${msg}: ${plugin})`}
+                </span>
+              )}
+            </FormattedMessage>
+          </div>
+        ) : (
+          <>
+            <FormattedMessage id={`${pluginId}.attribute.${readableType}`} defaultMessage={type} />
+            &nbsp;
+            {repeatable && <FormattedMessage id={getTrad('component.repeatable')} />}
+          </>
+        )}
+      </td>
+      <td className="button-container">
+        {isInDevelopmentMode && (
+          <>
+            {configurable ? (
+              <>
+                {!isMorph ? (
+                  <IconLinks
+                    links={[
+                      {
+                        icon: <FontAwesomeIcon icon="pencil-alt" />,
+                        onClick: () => handleClick(),
+                      },
+                      {
+                        icon: <FontAwesomeIcon icon="trash-alt" />,
+                        onClick: e => {
+                          e.stopPropagation();
+                          removeAttribute(
+                            editTarget,
+                            name,
+                            secondLoopComponentUid || firstLoopComponentUid || ''
+                          );
+                        },
+                      },
+                    ]}
+                  />
+                ) : (
+                  <IconLinks
+                    links={[
+                      {
+                        icon: <FontAwesomeIcon icon="trash-alt" />,
+                        onClick: e => {
+                          e.stopPropagation();
+                          removeAttribute(
+                            editTarget,
+                            name,
+                            secondLoopComponentUid || firstLoopComponentUid || ''
+                          );
+                        },
+                      },
+                    ]}
+                  />
+                )}
+              </>
+            ) : (
+              <button type="button">
+                <FontAwesomeIcon icon="lock" />
+              </button>
+            )}
+          </>
+        )}
+      </td>
+    </Wrapper>
+  );
+}
+
+ListRow.defaultProps = {
+  configurable: true,
+  dzName: null,
+  firstLoopComponentName: null,
+  firstLoopComponentUid: null,
+  isFromDynamicZone: false,
+  isNestedInDZComponent: false,
+  nature: null,
+  onClick: () => {},
+  plugin: null,
+  repeatable: false,
+  secondLoopComponentName: null,
+  secondLoopComponentUid: null,
+  target: null,
+  targetUid: null,
+  type: null,
+};
+
+ListRow.propTypes = {
+  configurable: PropTypes.bool,
+  dzName: PropTypes.string,
+  editTarget: PropTypes.string.isRequired,
+  firstLoopComponentName: PropTypes.string,
+  firstLoopComponentUid: PropTypes.string,
+  isFromDynamicZone: PropTypes.bool,
+  isNestedInDZComponent: PropTypes.bool,
+  mainTypeName: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  nature: PropTypes.string,
+  onClick: PropTypes.func,
+  plugin: PropTypes.string,
+  repeatable: PropTypes.bool,
+  secondLoopComponentName: PropTypes.string,
+  secondLoopComponentUid: PropTypes.string,
+  target: PropTypes.string,
+  targetUid: PropTypes.string,
+  type: PropTypes.string,
+};
+
+export default memo(ListRow);
+export { ListRow };

package/admin/src/components/ModalHeader/ComponentIcon.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+const ComponentIcon = styled.div`
+  margin: 12px 0;
+  margin-right: 20px;
+  display: flex;
+  width: 35px;
+  height: 35px;
+  align-items: center;
+  text-align: center;
+  border-radius: 50%;
+  background-color: #aed4fb;
+
+  svg {
+    margin: auto;
+    font-size: 16px;
+    color: #007eff;
+  }
+`;
+
+export default ComponentIcon;

package/admin/src/components/ModalHeader/ComponentInfos.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import UpperFirst from '../UpperFirst';
+import ComponentInfosWrapper from './ComponentInfosWrapper';
+
+/* eslint-disable react/jsx-one-expression-per-line */
+
+const ComponentInfos = ({ category, name }) => {
+  return (
+    <ComponentInfosWrapper>
+      &nbsp; (<UpperFirst content={category} /> &nbsp;—&nbsp;
+      <UpperFirst content={name} />)
+    </ComponentInfosWrapper>
+  );
+};
+
+ComponentInfos.propTypes = {
+  category: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+};
+
+export default ComponentInfos;

package/admin/src/components/ModalHeader/ComponentInfosWrapper.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const ComponentInfosWrapper = styled.span`
+  color: #9ea7b8;
+  font-size: 13px;
+  font-weight: 500;
+`;
+
+export default ComponentInfosWrapper;

package/admin/src/components/ModalHeader/DropdownInfos.js

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import UpperFirst from '../UpperFirst';
+import Icon from './Icon';
+import Item from './Item';
+import Menu from './Menu';
+import Toggle from './Toggle';
+import Wrapper from './Wrapper';
+
+/* eslint-disable react/no-array-index-key */
+
+const DropdownInfos = ({ headers, shouldDisplaySecondHeader }) => {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  const toggle = () => setDropdownOpen(prevState => !prevState);
+
+  return (
+    <Wrapper isOpen={dropdownOpen} toggle={toggle} style={{ margin: 'auto 0' }}>
+      <Toggle>...</Toggle>
+      <Menu style={{ top: '8px' }}>
+        {headers.map((header, index) => {
+          if (!shouldDisplaySecondHeader && index === 1) {
+            return null;
+          }
+
+          return (
+            <Item key={index}>
+              <Icon type={header.icon.name} />
+              <span>
+                <UpperFirst content={header.label} />
+              </span>
+            </Item>
+          );
+        })}
+      </Menu>
+    </Wrapper>
+  );
+};
+
+DropdownInfos.defaultProps = {
+  headers: [],
+  shouldDisplaySecondHeader: false,
+};
+
+DropdownInfos.propTypes = {
+  headers: PropTypes.array,
+  shouldDisplaySecondHeader: PropTypes.bool,
+};
+
+export default DropdownInfos;

package/admin/src/components/ModalHeader/Icon.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { AttributeIcon } from '@buffetjs/core';
+import PropTypes from 'prop-types';
+
+const Icon = ({ type, style }) => {
+  const icoName = type === 'collectionType' ? 'contentType' : type;
+
+  return (
+    <AttributeIcon
+      type={icoName || 'dynamiczone'}
+      style={{ ...style, margin: 'auto 20px auto 0' }}
+    />
+  );
+};
+
+Icon.defaultProps = {
+  style: null,
+  type: 'dynamiczone',
+};
+
+Icon.propTypes = {
+  style: PropTypes.object,
+  type: PropTypes.string,
+};
+
+export default Icon;

package/admin/src/components/ModalHeader/IconWrapper.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const IconWrapper = styled.span`
+  color: #919bae;
+  font-size: 11px;
+  > svg {
+    margin: 0 10px;
+  }
+`;
+
+export default IconWrapper;

package/admin/src/components/ModalHeader/Item.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import { DropdownItem } from 'reactstrap';
+
+const Item = styled(DropdownItem)`
+  display: flex;
+  padding-left: 10px;
+  padding-right: 10px;
+  color: #3b3b3b;
+  font-weight: 600;
+  font-size: 14px;
+  &:active,
+  &:focus,
+  &:hover {
+    background-color: transparent;
+    outline: 0;
+  }
+`;
+
+export default Item;

package/admin/src/components/ModalHeader/Menu.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { DropdownMenu } from 'reactstrap';
+
+const Menu = styled(DropdownMenu)`
+  top: 8px;
+`;
+
+export default Menu;

package/admin/src/components/ModalHeader/Toggle.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { DropdownToggle } from 'reactstrap';
+
+const Toggle = styled(DropdownToggle)`
+  height: 12px;
+  background: transparent;
+  border: 0;
+  margin-top: -14px;
+  color: #3b3b3b;
+  font-weight: 600;
+  font-size: 14px;
+`;
+
+export default Toggle;

package/admin/src/components/ModalHeader/Wrapper.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { Dropdown } from 'reactstrap';
+
+const Wrapper = styled(Dropdown)`
+  .dropdown-menu {
+    top: 8px !important;
+    box-shadow: 0 2px 4px #e3e9f3;
+    border: 0;
+  }
+`;
+
+export default Wrapper;

package/admin/src/components/ModalHeader/index.js

@@ -0,0 +1,105 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { HeaderModalTitle } from 'strapi-helper-plugin';
+import { get } from 'lodash';
+import { FormattedMessage } from 'react-intl';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import UpperFirst from '../UpperFirst';
+import ComponentIcon from './ComponentIcon';
+import ComponentInfos from './ComponentInfos';
+import Icon from './Icon';
+import IconWrapper from './IconWrapper';
+import DropdownInfos from './DropdownInfos';
+
+/* eslint-disable react/no-array-index-key */
+
+const ModalHeader = ({ headerId, headers }) => {
+  const shouldDisplayDropDown = headers.length > 3;
+
+  return (
+    <section>
+      <HeaderModalTitle style={{ textTransform: 'none' }}>
+        {headerId && (
+          <>
+            <Icon type={get(headers, [0, 'icon', 'name'], '')} />
+            <FormattedMessage
+              id={headerId}
+              values={{ name: get(headers, [0, 'label'], '') }}
+            />
+          </>
+        )}
+        {!headerId &&
+          headers.map((header, index) => {
+            const iconName = get(header, ['icon', 'name'], '');
+            const iconType = iconName === null ? '' : iconName;
+            const icon = get(header, ['icon', 'isCustom'], false) ? (
+              <ComponentIcon isSelected>
+                <FontAwesomeIcon icon={iconType} />
+              </ComponentIcon>
+            ) : (
+              <Icon type={iconType} />
+            );
+
+            if (shouldDisplayDropDown && index === 1) {
+              return (
+                <Fragment key={index}>
+                  <IconWrapper>
+                    <FontAwesomeIcon icon="chevron-right" />
+                  </IconWrapper>
+                  <DropdownInfos
+                    headers={[headers[1], headers[2]]}
+                    shouldDisplaySecondHeader={headers.length > 4}
+                  />
+                </Fragment>
+              );
+            }
+
+            if (shouldDisplayDropDown && index === 2 && headers.length > 4) {
+              return null;
+            }
+
+            if (index === 0) {
+              return (
+                <Fragment key={index}>
+                  {icon}
+                  <span>
+                    <UpperFirst content={get(header, ['label'], '')} />
+                  </span>
+                </Fragment>
+              );
+            }
+
+            return (
+              <Fragment key={index}>
+                <IconWrapper>
+                  <FontAwesomeIcon icon="chevron-right" />
+                </IconWrapper>
+
+                <span>
+                  <UpperFirst content={get(header, ['label'], '')} />
+                </span>
+                {header.info.category && (
+                  <ComponentInfos
+                    category={header.info.category}
+                    name={header.info.name}
+                  />
+                )}
+              </Fragment>
+            );
+          })}
+      </HeaderModalTitle>
+    </section>
+  );
+};
+
+ModalHeader.defaultProps = {
+  headerId: '',
+  headers: [],
+};
+
+ModalHeader.propTypes = {
+  headerId: PropTypes.string,
+  headers: PropTypes.array,
+};
+
+export default ModalHeader;

package/admin/src/components/RelationForm/Wrapper.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  width: 100%;
+  display: flex;
+  padding: 2.7rem 15px 3.3rem 15px;
+`;
+
+export default Wrapper;