@akemona-org/strapi-plugin-content-manager 3.7.0

package/admin/src/components/RelationPreviewList/CountWrapper.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const CountWrapper = styled.div`
+  padding-top: 0.3rem;
+`;
+
+export default CountWrapper;

package/admin/src/components/RelationPreviewList/RelationPreviewTooltip.js

@@ -0,0 +1,117 @@
+import React, { useState, useEffect, useCallback, useRef, useLayoutEffect } from 'react';
+import { Text, Padded } from '@buffetjs/core';
+import { request } from 'strapi-helper-plugin';
+import { LoadingIndicator, Tooltip } from '@buffetjs/styles';
+import PropTypes from 'prop-types';
+import { getDisplayedValue, getRequestUrl } from '../../utils';
+
+const RelationPreviewTooltip = ({
+  tooltipId,
+  rowId,
+  mainField,
+  name,
+  queryInfos: { endPoint },
+  size,
+}) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [relationData, setRelationData] = useState([]);
+  const tooltipRef = useRef();
+
+  const fetchRelationData = useCallback(
+    async signal => {
+      const requestURL = getRequestUrl(`${endPoint}/${rowId}/${name}`);
+      try {
+        const { results } = await request(requestURL, {
+          method: 'GET',
+          signal,
+        });
+
+        setRelationData(results);
+        setIsLoading(false);
+      } catch (err) {
+        console.error({ err });
+        setIsLoading(false);
+      }
+    },
+    [endPoint, name, rowId]
+  );
+
+  useEffect(() => {
+    const abortController = new AbortController();
+    const { signal } = abortController;
+
+    const timeout = setTimeout(() => {
+      fetchRelationData(signal);
+    }, 500);
+
+    return () => {
+      clearTimeout(timeout);
+      abortController.abort();
+    };
+  }, [fetchRelationData]);
+
+  const getValueToDisplay = useCallback(
+    item => {
+      return getDisplayedValue(mainField.schema.type, item[mainField.name], mainField.name);
+    },
+    [mainField]
+  );
+
+  // Used to update the position after the loader
+  useLayoutEffect(() => {
+    if (!isLoading && tooltipRef.current) {
+      // A react-tooltip uncaught error is triggered when updatePosition is called in firefox.
+      // https://github.com/wwayne/react-tooltip/issues/619
+      try {
+        tooltipRef.current.updatePosition();
+      } catch (err) {
+        console.log(err);
+      }
+    }
+  }, [isLoading]);
+
+  return (
+    <Tooltip ref={tooltipRef} id={tooltipId}>
+      <div>
+        {isLoading ? (
+          <Padded left right size="sm">
+            <LoadingIndicator borderWidth="3px" size="2rem" />
+          </Padded>
+        ) : (
+          <>
+            {relationData.map(item => (
+              <Padded key={item.id} top bottom size="xs">
+                <Text ellipsis color="white">
+                  {getValueToDisplay(item)}
+                </Text>
+              </Padded>
+            ))}
+            {size > 10 && (
+              <Padded top size="xs">
+                <Text color="white">[...]</Text>
+              </Padded>
+            )}
+          </>
+        )}
+      </div>
+    </Tooltip>
+  );
+};
+
+RelationPreviewTooltip.propTypes = {
+  tooltipId: PropTypes.string.isRequired,
+  mainField: PropTypes.exact({
+    name: PropTypes.string.isRequired,
+    schema: PropTypes.shape({
+      type: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  name: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  rowId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  queryInfos: PropTypes.shape({
+    endPoint: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default RelationPreviewTooltip;

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

@@ -0,0 +1,111 @@
+import React, { memo, useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { Flex, Padded, Count } from '@buffetjs/core';
+import { Tooltip } from '@buffetjs/styles';
+import { useIntl } from 'react-intl';
+
+import { getTrad } from '../../utils';
+import Truncate from '../Truncate';
+import Truncated from '../Truncated';
+import CountWrapper from './CountWrapper';
+import RelationPreviewTooltip from './RelationPreviewTooltip';
+
+const RelationPreviewList = ({
+  options: {
+    metadatas: { mainField },
+    relationType,
+    value,
+    rowId,
+    cellId,
+    name,
+    queryInfos,
+  },
+}) => {
+  const { formatMessage } = useIntl();
+  const [tooltipIsDisplayed, setDisplayTooltip] = useState(false);
+  const isSingle = ['oneWay', 'oneToOne', 'manyToOne'].includes(relationType);
+  const tooltipId = useMemo(() => `${rowId}-${cellId}`, [rowId, cellId]);
+  const valueToDisplay = value ? value[mainField.name] : '-';
+
+  if (value === undefined) {
+    return (
+      <Truncate>
+        <Truncated>-</Truncated>
+      </Truncate>
+    );
+  }
+
+  if (isSingle) {
+    return (
+      <Truncate>
+        <Truncated>
+          <span data-for={tooltipId} data-tip={valueToDisplay}>
+            {valueToDisplay}
+          </span>
+        </Truncated>
+        <Tooltip id={tooltipId} />
+      </Truncate>
+    );
+  }
+
+  const size = value ? value.count : 0;
+
+  const handleTooltipToggle = () => {
+    setDisplayTooltip(prev => !prev);
+  };
+
+  return (
+    <Truncate style={{ maxWidth: 'fit-content' }}>
+      <Flex
+        // This is useful to avoid the render of every tooltips of the list at the same time.
+        // https://github.com/wwayne/react-tooltip/issues/524
+        onMouseEnter={handleTooltipToggle}
+        onMouseLeave={handleTooltipToggle}
+        data-for={tooltipId}
+        data-tip={JSON.stringify(value)}
+      >
+        <CountWrapper>
+          <Count count={size} />
+        </CountWrapper>
+        <Padded left size="xs" />
+        <Truncated>
+          {formatMessage({
+            id: getTrad(
+              size > 1 ? 'containers.ListPage.items.plural' : 'containers.ListPage.items.singular'
+            ),
+          })}
+        </Truncated>
+      </Flex>
+      {size > 0 && tooltipIsDisplayed && (
+        <RelationPreviewTooltip
+          name={name}
+          rowId={rowId}
+          tooltipId={tooltipId}
+          value={value}
+          mainField={mainField}
+          queryInfos={queryInfos}
+          size={size}
+        />
+      )}
+    </Truncate>
+  );
+};
+
+RelationPreviewList.propTypes = {
+  options: PropTypes.shape({
+    cellId: PropTypes.string.isRequired,
+    metadatas: PropTypes.shape({
+      mainField: PropTypes.object.isRequired,
+    }).isRequired,
+    name: PropTypes.string.isRequired,
+    relationType: PropTypes.string,
+    rowId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    type: PropTypes.string,
+    queryInfos: PropTypes.shape({
+      endPoint: PropTypes.string.isRequired,
+    }).isRequired,
+    value: PropTypes.any,
+  }).isRequired,
+};
+
+export default memo(RelationPreviewList);

package/admin/src/components/RepeatableComponent/AddFieldButton.js

@@ -0,0 +1,64 @@
+import styled, { css } from 'styled-components';
+
+/* eslint-disable indent */
+const Button = styled.button`
+  width: 100%;
+  height: 37px;
+  margin-bottom: 25px;
+  padding: 0 0 3px 0;
+  text-align: center;
+  border: 1px solid rgba(227, 233, 243, 0.75);
+  border-top: 1px solid
+    ${({ doesPreviousFieldContainErrorsAndIsClosed }) =>
+      doesPreviousFieldContainErrorsAndIsClosed ? '#FFA784' : 'rgba(227, 233, 243, 0.75)'};
+
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+  ${({ withBorderRadius }) => {
+    if (withBorderRadius) {
+      return css`
+        border-radius: 2px;
+      `;
+    }
+
+    return '';
+  }}
+
+  ${({ hasMinError }) => {
+    if (hasMinError) {
+      return `
+        border-color: #FAA684;
+        border-top-color: rgba(227, 233, 243, 0.75);
+      `;
+    }
+
+    return '';
+  }}
+
+  color: ${({ disabled }) => (disabled ? '#9EA7B8' : ' #007eff')};
+  font-size: 12px;
+  font-weight: 700;
+  -webkit-font-smoothing: antialiased;
+  line-height: normal;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  background-color: #fff;
+  &:focus {
+    outline: 0;
+  }
+  > i,
+  svg {
+    margin-right: 10px;
+  }
+  & + p {
+    margin-bottom: 17px;
+    margin-top: -18px;
+  }
+`;
+
+Button.defaultProps = {
+  disabled: false,
+};
+
+export default Button;

package/admin/src/components/RepeatableComponent/Banner.js

@@ -0,0 +1,112 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { forwardRef } from 'react';
+import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Carret, Grab } from '@buffetjs/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import pluginId from '../../pluginId';
+import PreviewCarret from '../PreviewCarret';
+import BannerWrapper from './BannerWrapper';
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
+const Banner = forwardRef(
+  (
+    {
+      displayedValue,
+      doesPreviousFieldContainErrorsAndIsOpen,
+      hasErrors,
+      hasMinError,
+      isFirst,
+      isReadOnly,
+      isDragging,
+      isOpen,
+      onClickToggle,
+      onClickRemove,
+      style,
+    },
+    refs
+  ) => {
+    const display = isDragging ? 'none' : '';
+
+    return (
+      <BannerWrapper
+        doesPreviousFieldContainErrorsAndIsOpen={doesPreviousFieldContainErrorsAndIsOpen}
+        type="button"
+        hasMinError={hasMinError}
+        hasErrors={hasErrors}
+        isFirst={isFirst}
+        isOpen={isOpen}
+        isReadOnly={isReadOnly}
+        onClick={onClickToggle}
+        ref={refs ? refs.dropRef : null}
+        style={style}
+      >
+        {isDragging && <PreviewCarret isComponent />}
+        <>
+          <div className="img-wrapper" style={{ display }}>
+            <Carret />
+          </div>
+
+          <FormattedMessage id={`${pluginId}.containers.Edit.pluginHeader.title.new`}>
+            {msg => {
+              // The displayed value may be "falsey" when the main field is a number or boolean
+              return <div style={{ display }}>{displayedValue ?? msg}</div>;
+            }}
+          </FormattedMessage>
+          <div className="cta-wrapper" style={{ display }}>
+            {!isReadOnly && (
+              <>
+                <div
+                  className="trash-icon"
+                  style={{ marginRight: 10, padding: '0 5px' }}
+                  onClick={e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onClickRemove();
+                  }}
+                >
+                  <FontAwesomeIcon icon="trash-alt" />
+                </div>
+                <div className="grab" ref={refs ? refs.dragRef : null}>
+                  <Grab />
+                </div>
+              </>
+            )}
+          </div>
+        </>
+      </BannerWrapper>
+    );
+  }
+);
+
+Banner.defaultProps = {
+  displayedValue: null,
+  doesPreviousFieldContainErrorsAndIsOpen: false,
+  hasErrors: false,
+  hasMinError: false,
+  isDragging: false,
+  isFirst: false,
+  isOpen: false,
+  onClickRemove: () => {},
+  onClickToggle: () => {},
+  style: {},
+};
+
+Banner.propTypes = {
+  displayedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
+  doesPreviousFieldContainErrorsAndIsOpen: PropTypes.bool,
+  hasErrors: PropTypes.bool,
+  hasMinError: PropTypes.bool,
+  isDragging: PropTypes.bool,
+  isFirst: PropTypes.bool,
+  isOpen: PropTypes.bool,
+  isReadOnly: PropTypes.bool.isRequired,
+  onClickToggle: PropTypes.func,
+  onClickRemove: PropTypes.func,
+  style: PropTypes.object,
+};
+
+Banner.displayName = 'Banner';
+
+export default Banner;

package/admin/src/components/RepeatableComponent/BannerWrapper.js

@@ -0,0 +1,194 @@
+import styled from 'styled-components';
+
+/* eslint-disable */
+
+const BannerWrapper = styled.button`
+  display: flex;
+  height: 36px;
+  width: 100%;
+  padding: 0 15px;
+  border: 1px solid
+    ${({ hasErrors, isOpen, isReadOnly }) => {
+      if (hasErrors) {
+        return '#FFA784';
+      } else if (isOpen && !isReadOnly) {
+        return '#AED4FB';
+      } else {
+        return 'rgba(227, 233, 243, 0.75)';
+      }
+    }};
+
+  ${({ doesPreviousFieldContainErrorsAndIsOpen }) => {
+    if (doesPreviousFieldContainErrorsAndIsOpen) {
+      return `
+        border-top: 1px solid #ffa784;
+      `;
+    }
+  }}
+
+  ${({ isFirst }) => {
+    if (isFirst) {
+      return `
+        border-top-right-radius: 2px;
+        border-top-left-radius: 2px;
+      `;
+    }
+  }}
+
+  ${({ hasMinError, isFirst }) => {
+    if (hasMinError) {
+      return `
+        border-color: #FAA684;
+        border-top-color: ${isFirst ? '#FAA684' : 'rgba(227, 233, 243, 0.75)'};
+        border-bottom-color: rgba(227, 233, 243, 0.75);
+        `;
+    }
+  }}
+
+  border-bottom: 0;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+
+  background-color: ${({ hasErrors, isOpen, isReadOnly }) => {
+    if (isReadOnly) {
+      return '#fafafb';
+    }
+
+    if (hasErrors && isOpen) {
+      return '#FFE9E0';
+    } else if (isOpen) {
+      return '#E6F0FB';
+    } else {
+      return '#ffffff';
+    }
+  }};
+
+  ${({ hasErrors, isOpen, isReadOnly }) => {
+    if (hasErrors) {
+      return `
+        color: #f64d0a;
+        font-weight: 600;
+      `;
+    }
+
+    if (isReadOnly) {
+      return `
+        color: #9EA7B8;
+        font-weight: 600;
+      `;
+    }
+
+    if (isOpen) {
+      return `
+        color: #007eff;
+        font-weight: 600;
+      `;
+    }
+  }}
+
+  ${({ isOpen }) => {
+    if (isOpen) {
+      return `
+        &.trash-icon {
+          svg {
+            path {
+              fill: #007eff;
+            }
+          }
+        }
+      `;
+    }
+  }}
+
+  &:focus {
+    outline: 0;
+  }
+
+
+  .img-wrapper {
+    width: 19px;
+    height: 19px;
+    margin-right: 19px;
+    border-radius: 50%;
+    background-color: ${({ hasErrors, isOpen, isReadOnly }) => {
+      if (hasErrors) {
+        return '#FAA684';
+      } else if (isOpen && !isReadOnly) {
+        return '#AED4FB';
+      } else {
+        return '#F3F4F4';
+      }
+    }};
+    text-align: center;
+
+    ${({ isOpen }) => !isOpen && 'transform: rotate(180deg)'};
+  }
+
+  .cta-wrapper {
+    display: flex;
+    margin-left: auto;
+    > button {
+      padding: 0;
+    }
+
+    .trash-icon {
+      svg {
+        font-size: 10px;
+        path {
+          fill: #4B515A;
+        }
+      }
+    }
+
+    .grab {
+      cursor: move;
+      svg {
+        vertical-align: initial;
+      }
+    }
+  }
+
+  ${({ hasErrors, isOpen, isReadOnly }) => {
+    let fill = '#ABB3C2';
+    let trashFill = '#4B515A';
+
+    if (isOpen && !isReadOnly) {
+      fill = '#007EFF';
+      trashFill = '#007EFF';
+    }
+
+    if (hasErrors) {
+      fill = '#F64D0A';
+      trashFill = '#F64D0A';
+    }
+
+    return `
+      svg {
+        path {
+          fill: ${fill} !important;
+        }
+      }
+      .trash-icon {
+        svg {
+          path {
+            fill: ${trashFill} !important;
+          }
+        }
+      }
+    `;
+  }}
+
+  -webkit-font-smoothing: antialiased;
+
+  > div {
+    align-self: center;
+    margin-top: -2px;
+  }
+`;
+
+BannerWrapper.defaultProps = {
+  isReadOnly: false,
+};
+
+export default BannerWrapper;

package/admin/src/components/RepeatableComponent/CarretTop.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const CarretTop = () => {
+  return (
+    <svg width="7" height="5" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M0 .469c0 .127.043.237.13.33l3.062 3.28a.407.407 0 0 0 .616 0L6.87.8A.467.467 0 0 0 7 .468a.467.467 0 0 0-.13-.33A.407.407 0 0 0 6.563 0H.438A.407.407 0 0 0 .13.14.467.467 0 0 0 0 .468z"
+        fillRule="nonzero"
+      />
+    </svg>
+  );
+};
+
+export default CarretTop;