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

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { get, isEmpty } from 'lodash';
+import { useGlobalContext } from 'strapi-helper-plugin';
+import RelationFormBox from '../RelationFormBox';
+import RelationFormNaturePicker from '../RelationFormNaturePicker';
+import Wrapper from './Wrapper';
+
+const RelationForm = ({
+  errors,
+  mainBoxHeader,
+  modifiedData,
+  naturePickerType,
+  onChange,
+}) => {
+  const { formatMessage } = useGlobalContext();
+  const getError = name => {
+    const errorId = get(errors, [name, 'id'], null);
+
+    return isEmpty(errorId) ? null : formatMessage({ id: errorId });
+  };
+
+  return (
+    <Wrapper>
+      <RelationFormBox
+        isMain
+        header={mainBoxHeader}
+        error={getError('name')}
+        name="name"
+        onChange={onChange}
+        value={get(modifiedData, 'name', '')}
+      />
+      <RelationFormNaturePicker
+        oneThatIsCreatingARelationWithAnother={mainBoxHeader}
+        target={modifiedData.target}
+        nature={modifiedData.nature}
+        naturePickerType={naturePickerType}
+        onChange={onChange}
+      />
+      <RelationFormBox
+        disabled={['oneWay', 'manyWay'].includes(modifiedData.nature)}
+        error={getError('targetAttribute')}
+        name="targetAttribute"
+        onChange={onChange}
+        oneThatIsCreatingARelationWithAnother={mainBoxHeader}
+        target={modifiedData.target}
+        value={get(modifiedData, 'targetAttribute', '')}
+      />
+    </Wrapper>
+  );
+};
+
+RelationForm.defaultProps = {
+  errors: {},
+  modifiedData: {},
+};
+
+RelationForm.propTypes = {
+  errors: PropTypes.object,
+  mainBoxHeader: PropTypes.string.isRequired,
+  modifiedData: PropTypes.object,
+  naturePickerType: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default RelationForm;

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

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+
+import { colors } from 'strapi-helper-plugin';
+
+const Wrapper = styled.div`
+  width: 22rem;
+  height: 13.8rem;
+  flex-shrink: 0;
+  background-color: ${colors.relations.boxBkgd};
+  box-shadow: 0 1px 2px ${colors.relations.boxShadow};
+  border-radius: 2px;
+  .box-header {
+    height: 3.6rem;
+    line-height: 3.6rem;
+    text-transform: capitalize;
+    background-color: ${colors.relations.headerBkgd};
+    &,
+    .dropdown-toggle p {
+      text-align: center;
+      font-size: 1.4rem;
+      font-weight: 700;
+    }
+    i,
+    svg {
+      margin-right: 8px;
+    }
+  }
+  .box-body {
+    padding: 0 15px;
+    padding-top: 1rem;
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Inputs } from '@buffetjs/custom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useGlobalContext } from 'strapi-helper-plugin';
+import getTrad from '../../utils/getTrad';
+import RelationTargetPicker from '../RelationTargetPicker';
+import Wrapper from './Wrapper';
+
+const RelationFormBox = ({
+  disabled,
+  error,
+  header,
+  isMain,
+  name,
+  onChange,
+  oneThatIsCreatingARelationWithAnother,
+  target,
+  value,
+}) => {
+  const { formatMessage } = useGlobalContext();
+
+  return (
+    <Wrapper>
+      <div className="box-header">
+        {isMain ? (
+          <p>
+            <FontAwesomeIcon
+              icon={['far', 'caret-square-right']}
+              style={{ fontSize: 12, marginTop: '-3px' }}
+            />
+            {header}
+          </p>
+        ) : (
+          <RelationTargetPicker
+            target={target}
+            onChange={onChange}
+            oneThatIsCreatingARelationWithAnother={
+              oneThatIsCreatingARelationWithAnother
+            }
+          />
+        )}
+      </div>
+      <div className="box-body">
+        <Inputs
+          autoFocus={isMain}
+          disabled={disabled}
+          label={formatMessage({
+            id: getTrad('form.attribute.item.defineRelation.fieldName'),
+          })}
+          error={error}
+          type="text"
+          onChange={onChange}
+          name={name}
+          value={value}
+        />
+      </div>
+    </Wrapper>
+  );
+};
+
+RelationFormBox.defaultProps = {
+  disabled: false,
+  error: null,
+  header: null,
+  isMain: false,
+  onChange: () => {},
+  oneThatIsCreatingARelationWithAnother: null,
+  target: null,
+  value: '',
+};
+
+RelationFormBox.propTypes = {
+  disabled: PropTypes.bool,
+  error: PropTypes.string,
+  header: PropTypes.string,
+  isMain: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  oneThatIsCreatingARelationWithAnother: PropTypes.string,
+  target: PropTypes.string,
+  value: PropTypes.string,
+};
+
+export default RelationFormBox;

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

@@ -0,0 +1,53 @@
+import styled from 'styled-components';
+
+import { colors } from 'strapi-helper-plugin';
+
+const StyledRelationNaturePicker = styled.div`
+  position: relative;
+  width: 100%;
+  .nature-container {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: fit-content;
+    &::before {
+      content: '';
+      position: absolute;
+      top: 2.2rem;
+      height: 1px;
+      width: 100%;
+      background-color: ${colors.relations.border};
+      z-index: 0;
+    }
+    .nature-buttons {
+      position: relative;
+      width: fit-content;
+      display: block;
+      margin: 0 auto;
+      z-index: 1;
+    }
+    .nature-txt {
+      padding: 0 1rem;
+      font-size: 1.3rem;
+      text-align: center;
+      margin-top: 6px;
+      margin-bottom: 2px;
+      span {
+        &:first-of-type,
+        &:nth-of-type(3) {
+          text-transform: capitalize;
+        }
+        &:nth-of-type(2) {
+          color: ${colors.relations.border};
+        }
+      }
+    }
+    svg {
+      margin: 0 1rem;
+      cursor: pointer;
+    }
+  }
+`;
+
+export default StyledRelationNaturePicker;

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

@@ -0,0 +1,112 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { get, truncate } from 'lodash';
+import pluralize from 'pluralize';
+import useDataManager from '../../hooks/useDataManager';
+import ManyToMany from '../../icons/ManyToMany';
+import ManyToOne from '../../icons/ManyToOne';
+import ManyWay from '../../icons/ManyWay';
+import OneToMany from '../../icons/OneToMany';
+import OneToOne from '../../icons/OneToOne';
+import OneWay from '../../icons/OneWay';
+import getTrad from '../../utils/getTrad';
+import Wrapper from './Wrapper';
+
+const relations = {
+  oneWay: OneWay,
+  oneToOne: OneToOne,
+  oneToMany: OneToMany,
+  manyToOne: ManyToOne,
+  manyToMany: ManyToMany,
+  manyWay: ManyWay,
+};
+
+const RelationFormNaturePicker = ({
+  nature,
+  naturePickerType,
+  onChange,
+  oneThatIsCreatingARelationWithAnother,
+  target,
+}) => {
+  const { contentTypes, modifiedData } = useDataManager();
+  const ctRelations = ['oneWay', 'oneToOne', 'oneToMany', 'manyToOne', 'manyToMany', 'manyWay'];
+  const componentRelations = ['oneWay', 'manyWay'];
+  const dataType =
+    naturePickerType === 'contentType'
+      ? get(modifiedData, [naturePickerType, 'schema', 'kind'], '')
+      : naturePickerType;
+  const relationsType = dataType === 'collectionType' ? ctRelations : componentRelations;
+
+  const areDisplayedNamesInverted = nature === 'manyToOne';
+  const targetLabel = get(contentTypes, [target, 'schema', 'name'], 'unknown');
+  const leftTarget = areDisplayedNamesInverted
+    ? targetLabel
+    : oneThatIsCreatingARelationWithAnother;
+  const rightTarget = areDisplayedNamesInverted
+    ? oneThatIsCreatingARelationWithAnother
+    : targetLabel;
+  const leftDisplayedValue = pluralize(leftTarget, nature === 'manyToMany' ? 2 : 1);
+  const restrictedRelations = get(contentTypes, [target, 'schema', 'restrictRelationsTo'], null);
+
+  const rightDisplayedValue = pluralize(
+    rightTarget,
+    ['manyToMany', 'oneToMany', 'manyToOne', 'manyWay'].includes(nature) ? 2 : 1
+  );
+
+  return (
+    <Wrapper>
+      <div className="nature-container">
+        <div className="nature-buttons">
+          {relationsType.map(relationNature => {
+            const Asset = relations[relationNature];
+            const isEnabled =
+              restrictedRelations === null || restrictedRelations.includes(relationNature);
+
+            return (
+              <Asset
+                key={relationNature}
+                isSelected={nature === relationNature}
+                style={{ cursor: isEnabled ? 'pointer' : 'not-allowed' }}
+                onClick={() => {
+                  if (isEnabled) {
+                    onChange({
+                      target: {
+                        name: 'nature',
+                        value: relationNature,
+                        targetContentType: target,
+                        oneThatIsCreatingARelationWithAnother,
+                        type: 'relation',
+                      },
+                    });
+                  }
+                }}
+              />
+            );
+          })}
+        </div>
+        <div className="nature-txt">
+          <span>{truncate(leftDisplayedValue, { length: 24 })}</span>
+          &nbsp;
+          <FormattedMessage id={getTrad(`relation.${nature}`)} />
+          &nbsp;
+          <span>{truncate(rightDisplayedValue, { length: 24 })}</span>
+        </div>
+      </div>
+    </Wrapper>
+  );
+};
+
+RelationFormNaturePicker.defaultProps = {
+  nature: 'oneWay',
+};
+
+RelationFormNaturePicker.propTypes = {
+  nature: PropTypes.string,
+  naturePickerType: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  oneThatIsCreatingARelationWithAnother: PropTypes.string.isRequired,
+  target: PropTypes.string.isRequired,
+};
+
+export default RelationFormNaturePicker;

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

@@ -0,0 +1,62 @@
+import React, { memo } from 'react';
+import { DropdownItem } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import PropTypes from 'prop-types';
+import { Text } from '@buffetjs/core';
+
+const Item = ({
+  onChange,
+  oneThatIsCreatingARelationWithAnother,
+  plugin,
+  restrictRelationsTo,
+  title,
+  uid,
+}) => {
+  const handleChange = () => {
+    const selectedContentTypeFriendlyName = plugin ? `${plugin}_${title}` : title;
+
+    onChange({
+      target: {
+        name: 'target',
+        value: uid,
+        type: 'relation',
+        oneThatIsCreatingARelationWithAnother,
+        selectedContentTypeFriendlyName,
+        targetContentTypeAllowedRelations: restrictRelationsTo,
+      },
+    });
+  };
+
+  return (
+    <DropdownItem key={uid} onClick={handleChange}>
+      <p>
+        <FontAwesomeIcon
+          icon={['far', 'caret-square-right']}
+          style={{ fontSize: 12, marginTop: '-3px' }}
+        />
+        {title}
+        {plugin && (
+          <Text as="span" fontStyle="italic" textTransform="none" color="rgba(50,55,64,0.75)">
+            &nbsp; (from: {plugin})
+          </Text>
+        )}
+      </p>
+    </DropdownItem>
+  );
+};
+
+Item.defaultProps = {
+  plugin: null,
+  restrictRelationsTo: null,
+};
+
+Item.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  oneThatIsCreatingARelationWithAnother: PropTypes.string.isRequired,
+  plugin: PropTypes.string,
+  restrictRelationsTo: PropTypes.array,
+  title: PropTypes.string.isRequired,
+  uid: PropTypes.string.isRequired,
+};
+
+export default memo(Item);

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

@@ -0,0 +1,89 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  > div {
+    width: 100%;
+    > button {
+      position: relative;
+      width: 100%;
+      font-size: 1.4rem;
+      line-height: 3.6rem;
+      background-color: transparent;
+      border: none;
+      cursor: pointer;
+      text-transform: capitalize;
+      color: black;
+      &:focus,
+      &:active,
+      &:hover,
+      &:visited {
+        background-color: transparent !important;
+        box-shadow: none;
+        color: black;
+      }
+      &:after {
+        position: absolute;
+        top: calc(50% - 0.1rem);
+        right: 1.5rem;
+      }
+      > p {
+        margin-top: -1px;
+        margin-bottom: 0;
+        padding: 0 20px 0 10px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        > i,
+        > svg {
+          margin-right: 8px;
+        }
+        span {
+          font-style: italic;
+          font-weight: 500;
+        }
+      }
+    }
+    /* Dropdown List */
+    > button + div {
+      max-width: 100%;
+      max-height: 180px;
+      width: 100%;
+      margin-top: -4px;
+      padding: 0;
+      border-radius: 0;
+      overflow: scroll;
+      > button {
+        height: 3.6rem;
+        border-bottom: 1px solid #f6f6f6;
+        font-size: 1.3rem;
+        font-family: Lato;
+        font-weight: 400;
+        text-transform: capitalize;
+        -webkit-font-smoothing: antialiased;
+        cursor: pointer;
+        &:focus,
+        &:active {
+          outline: 0;
+          background-color: rgb(255, 255, 255) !important;
+          color: rgba(50, 55, 64, 0.75);
+        }
+        > p {
+          color: rgba(50, 55, 64, 0.75);
+          line-height: 3rem;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          i,
+          svg {
+            margin-right: 10px;
+          }
+          span {
+            font-style: italic;
+          }
+        }
+      }
+    }
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,88 @@
+import React, { useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { get } from 'lodash';
+import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap';
+
+import useDataManager from '../../hooks/useDataManager';
+import Item from './Item';
+import Wrapper from './Wrapper';
+
+const RelationTargetPicker = ({ onChange, oneThatIsCreatingARelationWithAnother, target }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { contentTypes, sortedContentTypesList } = useDataManager();
+  const allowedContentTypesForRelation = useMemo(
+    () =>
+      sortedContentTypesList
+        .filter(obj => obj.kind === 'collectionType')
+        .filter(
+          obj =>
+            obj.restrictRelationsTo === null ||
+            (Array.isArray(obj.restrictRelationsTo) && obj.restrictRelationsTo.length > 0)
+        ),
+    [sortedContentTypesList]
+  );
+
+  const pluginInfo = useMemo(() => {
+    const plugin = get(contentTypes, [target, 'plugin'], null);
+
+    if (plugin) {
+      return (
+        <span style={{ fontStyle: 'italic', textTransform: 'none' }}>&nbsp; (from: {plugin})</span>
+      );
+    }
+
+    return null;
+  }, [contentTypes, target]);
+
+  const targetFriendlyName = useMemo(() => {
+    const name = get(contentTypes, [target, 'schema', 'name'], 'error');
+
+    return name;
+  }, [contentTypes, target]);
+
+  return (
+    <Wrapper>
+      <Dropdown
+        isOpen={isOpen}
+        toggle={() => {
+          setIsOpen(!isOpen);
+        }}
+      >
+        <DropdownToggle caret>
+          <p>
+            <FontAwesomeIcon
+              icon={['far', 'caret-square-right']}
+              style={{ fontSize: 12, marginTop: '-3px' }}
+            />
+            {targetFriendlyName}
+            {pluginInfo}
+          </p>
+        </DropdownToggle>
+        <DropdownMenu style={{ paddingTop: '3px' }}>
+          {allowedContentTypesForRelation.map(({ uid, title, restrictRelationsTo, plugin }) => {
+            return (
+              <Item
+                key={uid}
+                uid={uid}
+                title={title}
+                restrictRelationsTo={restrictRelationsTo}
+                plugin={plugin}
+                onChange={onChange}
+                oneThatIsCreatingARelationWithAnother={oneThatIsCreatingARelationWithAnother}
+              />
+            );
+          })}
+        </DropdownMenu>
+      </Dropdown>
+    </Wrapper>
+  );
+};
+
+RelationTargetPicker.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  oneThatIsCreatingARelationWithAnother: PropTypes.string.isRequired,
+  target: PropTypes.string.isRequired,
+};
+
+export default RelationTargetPicker;

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

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Checkbox } from '@buffetjs/styles';
+
+const SelectCheckbox = styled(Checkbox)`
+  margin-right: 10px;
+`;
+
+export default SelectCheckbox;

package/admin/src/components/SelectMenuSubUl/ToggleUl.js

@@ -0,0 +1,23 @@
+import { Collapse } from 'reactstrap';
+import styled from 'styled-components';
+
+const ToggleUl = styled(Collapse)`
+  padding: 0 15px;
+  background-color: #fff;
+  list-style: none;
+  font-size: 13px;
+  > li {
+    label {
+      cursor: pointer;
+    }
+
+    .check-wrapper {
+      z-index: 9;
+      > input {
+        z-index: 1;
+      }
+    }
+  }
+`;
+
+export default ToggleUl;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ToggleUl from './ToggleUl';
+
+const SubUl = ({ children, isOpen }) => {
+  return (
+    <ToggleUl tag="ul" isOpen={isOpen}>
+      {children}
+    </ToggleUl>
+  );
+};
+
+SubUl.defaultProps = {
+  children: null,
+  isOpen: false,
+};
+
+SubUl.propTypes = {
+  children: PropTypes.node,
+  isOpen: PropTypes.bool,
+};
+
+export default SubUl;