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

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

@@ -0,0 +1,71 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { get, isNull } from 'lodash';
+import Select from 'react-select';
+import SingleValue from './SingleValue';
+
+function SelectOne({
+  components,
+  mainField,
+  name,
+  isDisabled,
+  isLoading,
+  onChange,
+  onInputChange,
+  onMenuClose,
+  onMenuOpen,
+  onMenuScrollToBottom,
+  options,
+  placeholder,
+  styles,
+  value,
+}) {
+  return (
+    <Select
+      components={{ ...components, SingleValue }}
+      id={name}
+      isClearable
+      isDisabled={isDisabled}
+      isLoading={isLoading}
+      mainField={mainField}
+      options={options}
+      onChange={onChange}
+      onInputChange={onInputChange}
+      onMenuClose={onMenuClose}
+      onMenuOpen={onMenuOpen}
+      onMenuScrollToBottom={onMenuScrollToBottom}
+      placeholder={placeholder}
+      styles={styles}
+      value={isNull(value) ? null : { label: get(value, [mainField.name], ''), value }}
+    />
+  );
+}
+
+SelectOne.defaultProps = {
+  components: {},
+  value: null,
+};
+
+SelectOne.propTypes = {
+  components: PropTypes.object,
+  isDisabled: PropTypes.bool.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  mainField: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    schema: PropTypes.shape({
+      type: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onMenuClose: PropTypes.func.isRequired,
+  onMenuOpen: PropTypes.func.isRequired,
+  onMenuScrollToBottom: PropTypes.func.isRequired,
+  options: PropTypes.array.isRequired,
+  placeholder: PropTypes.node.isRequired,
+  styles: PropTypes.object.isRequired,
+  value: PropTypes.object,
+};
+
+export default memo(SelectOne);

package/admin/src/components/SelectWrapper/ClearIndicator.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Remove } from '@buffetjs/icons';
+import { components } from 'react-select';
+
+const ClearIndicator = props => {
+  const Component = components.ClearIndicator;
+
+  return (
+    <Component {...props}>
+      <Remove width="11px" height="11px" fill="#9EA7B8" />
+    </Component>
+  );
+};
+
+export default ClearIndicator;

package/admin/src/components/SelectWrapper/IndicatorSeparator.js

@@ -0,0 +1,3 @@
+const IndicatorSeparator = () => null;
+
+export default IndicatorSeparator;

package/admin/src/components/SelectWrapper/Option.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import styled from 'styled-components';
+import { components } from 'react-select';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { get, has, isEmpty } from 'lodash';
+import { Flex, Text } from '@buffetjs/core';
+import { RelationDPState } from 'strapi-helper-plugin';
+import { getDisplayedValue, getTrad } from '../../utils';
+
+const TextGrow = styled(Text)`
+  flex-grow: 2;
+`;
+
+const Option = props => {
+  const { formatMessage } = useIntl();
+  const Component = components.Option;
+  const hasDraftAndPublish = has(get(props, 'data.value'), 'published_at');
+  const isDraft = isEmpty(get(props, 'data.value.published_at'));
+  const titleLabelID = isDraft
+    ? 'components.Select.draft-info-title'
+    : 'components.Select.publish-info-title';
+  const title = formatMessage({ id: getTrad(titleLabelID) });
+  const fontWeight = props.isFocused ? 'bold' : 'regular';
+  const mainField = get(props, ['selectProps', 'mainField'], {});
+  const value = getDisplayedValue(mainField.schema.type, props.label, mainField.name);
+
+  if (hasDraftAndPublish) {
+    return (
+      <Component {...props}>
+        <Flex>
+          <RelationDPState
+            marginLeft="0"
+            marginTop="1px"
+            marginRight="10px"
+            isDraft={isDraft}
+            marginBottom="0"
+            title={title}
+          />
+
+          <TextGrow ellipsis as="div" fontWeight={fontWeight} title={value}>
+            {value}&nbsp;
+          </TextGrow>
+        </Flex>
+      </Component>
+    );
+  }
+
+  return (
+    <Component {...props}>
+      <Text ellipsis fontWeight={fontWeight} title={value}>
+        {value}
+      </Text>
+    </Component>
+  );
+};
+
+Option.defaultProps = {
+  label: '',
+};
+
+Option.propTypes = {
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  isFocused: PropTypes.bool.isRequired,
+  selectProps: PropTypes.shape({
+    hasDraftAndPublish: PropTypes.bool,
+    mainField: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      schema: PropTypes.shape({
+        type: PropTypes.string.isRequired,
+      }).isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+
+export default Option;

package/admin/src/components/SelectWrapper/components.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { Text } from '@buffetjs/core';
+
+const BaselineAlignment = styled.div`
+  padding-top: 1px;
+`;
+
+const A = styled(Text)`
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export { A, BaselineAlignment };

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

@@ -0,0 +1,393 @@
+import React, { useCallback, useState, useEffect, useMemo, memo } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Link, useLocation } from 'react-router-dom';
+import { findIndex, get, isArray, isEmpty, set } from 'lodash';
+import {
+  DropdownIndicator,
+  LabelIconWrapper,
+  NotAllowedInput,
+  request,
+  useContentManagerEditViewDataManager,
+  useQueryParams,
+} from 'strapi-helper-plugin';
+import { Flex, Text, Padded } from '@buffetjs/core';
+import { stringify } from 'qs';
+import pluginId from '../../pluginId';
+import SelectOne from '../SelectOne';
+import SelectMany from '../SelectMany';
+import ClearIndicator from './ClearIndicator';
+import IndicatorSeparator from './IndicatorSeparator';
+import Option from './Option';
+import { A, BaselineAlignment } from './components';
+import { connect, select, styles } from './utils';
+
+const initialPaginationState = {
+  _contains: '',
+  _limit: 20,
+  _start: 0,
+};
+
+const buildParams = (query, paramsToKeep) => {
+  if (!paramsToKeep) {
+    return {};
+  }
+
+  return paramsToKeep.reduce((acc, current) => {
+    const value = get(query, current, null);
+
+    if (value) {
+      set(acc, current, value);
+    }
+
+    return acc;
+  }, {});
+};
+function SelectWrapper({
+  description,
+  editable,
+  label,
+  labelIcon,
+  isCreatingEntry,
+  isFieldAllowed,
+  isFieldReadable,
+  mainField,
+  name,
+  relationType,
+  targetModel,
+  placeholder,
+  queryInfos,
+}) {
+  const { formatMessage } = useIntl();
+  const [{ query }] = useQueryParams();
+  // Disable the input in case of a polymorphic relation
+  const isMorph = useMemo(() => relationType.toLowerCase().includes('morph'), [relationType]);
+  const {
+    addRelation,
+    modifiedData,
+    moveRelation,
+    onChange,
+    onRemoveRelation,
+  } = useContentManagerEditViewDataManager();
+  const { pathname } = useLocation();
+
+  const value = get(modifiedData, name, null);
+  const [state, setState] = useState(initialPaginationState);
+  const [options, setOptions] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const filteredOptions = useMemo(() => {
+    return options.filter(option => {
+      if (!isEmpty(value)) {
+        // SelectMany
+        if (Array.isArray(value)) {
+          return findIndex(value, o => o.id === option.value.id) === -1;
+        }
+
+        // SelectOne
+        return get(value, 'id', '') !== option.value.id;
+      }
+
+      return true;
+    });
+  }, [options, value]);
+
+  const {
+    endPoint,
+    containsKey,
+    defaultParams,
+    shouldDisplayRelationLink,
+    paramsToKeep,
+  } = queryInfos;
+
+  const isSingle = ['oneWay', 'oneToOne', 'manyToOne', 'oneToManyMorph', 'oneToOneMorph'].includes(
+    relationType
+  );
+
+  const idsToOmit = useMemo(() => {
+    if (!value) {
+      return [];
+    }
+
+    if (isSingle) {
+      return [value.id];
+    }
+
+    return value.map(val => val.id);
+  }, [isSingle, value]);
+
+  const getData = useCallback(
+    async signal => {
+      // Currently polymorphic relations are not handled
+      if (isMorph) {
+        setIsLoading(false);
+
+        return;
+      }
+
+      if (!isFieldAllowed) {
+        setIsLoading(false);
+
+        return;
+      }
+
+      setIsLoading(true);
+
+      const params = { _limit: state._limit, ...defaultParams };
+
+      if (state._contains) {
+        params[containsKey] = state._contains;
+      }
+
+      try {
+        const data = await request(endPoint, {
+          method: 'POST',
+          params,
+          signal,
+          body: { idsToOmit },
+        });
+
+        const formattedData = data.map(obj => {
+          return { value: obj, label: obj[mainField.name] };
+        });
+
+        setOptions(prevState =>
+          prevState.concat(formattedData).filter((obj, index) => {
+            const objIndex = prevState.findIndex(el => el.value.id === obj.value.id);
+
+            if (objIndex === -1) {
+              return true;
+            }
+
+            return prevState.findIndex(el => el.value.id === obj.value.id) === index;
+          })
+        );
+        setIsLoading(false);
+      } catch (err) {
+        // Silent
+      }
+    },
+    [
+      isMorph,
+      isFieldAllowed,
+      state._limit,
+      state._contains,
+      defaultParams,
+      containsKey,
+      endPoint,
+      idsToOmit,
+      mainField.name,
+    ]
+  );
+
+  useEffect(() => {
+    const abortController = new AbortController();
+    const { signal } = abortController;
+
+    if (isOpen) {
+      getData(signal);
+    }
+
+    return () => abortController.abort();
+  }, [getData, isOpen]);
+
+  const handleInputChange = (inputValue, { action }) => {
+    if (action === 'input-change') {
+      setState(prevState => {
+        if (prevState._contains === inputValue) {
+          return prevState;
+        }
+
+        return { ...prevState, _contains: inputValue, _start: 0 };
+      });
+    }
+
+    return inputValue;
+  };
+
+  const handleMenuScrollToBottom = () => {
+    setState(prevState => ({ ...prevState, _limit: prevState._limit + 20 }));
+  };
+
+  const handleMenuClose = () => {
+    setState(initialPaginationState);
+    setIsOpen(false);
+  };
+
+  const handleChange = value => {
+    onChange({ target: { name, value: value ? value.value : value } });
+  };
+
+  const handleAddRelation = value => {
+    if (!isEmpty(value)) {
+      addRelation({ target: { name, value } });
+    }
+  };
+
+  const handleMenuOpen = () => {
+    setIsOpen(true);
+  };
+
+  const to = `/plugins/${pluginId}/collectionType/${targetModel}/${value ? value.id : null}`;
+
+  const searchToPersist = stringify(buildParams(query, paramsToKeep), { encode: false });
+
+  const link = useMemo(() => {
+    if (!value) {
+      return null;
+    }
+
+    if (!shouldDisplayRelationLink) {
+      return null;
+    }
+
+    return (
+      <Link to={{ pathname: to, state: { from: pathname }, search: searchToPersist }}>
+        <FormattedMessage id="content-manager.containers.Edit.seeDetails">
+          {msg => <A color="mediumBlue">{msg}</A>}
+        </FormattedMessage>
+      </Link>
+    );
+  }, [shouldDisplayRelationLink, pathname, to, value, searchToPersist]);
+
+  const Component = isSingle ? SelectOne : SelectMany;
+  const associationsLength = isArray(value) ? value.length : 0;
+
+  const isDisabled = useMemo(() => {
+    if (isMorph) {
+      return true;
+    }
+
+    if (!isCreatingEntry) {
+      return (!isFieldAllowed && isFieldReadable) || !editable;
+    }
+
+    return !editable;
+  }, [isMorph, isCreatingEntry, editable, isFieldAllowed, isFieldReadable]);
+
+  const labelIconformatted = labelIcon
+    ? { icon: labelIcon.icon, title: formatMessage(labelIcon.title) }
+    : labelIcon;
+
+  if (!isFieldAllowed && isCreatingEntry) {
+    return <NotAllowedInput label={label} labelIcon={labelIconformatted} />;
+  }
+
+  if (!isCreatingEntry && !isFieldAllowed && !isFieldReadable) {
+    return <NotAllowedInput label={label} labelIcon={labelIconformatted} />;
+  }
+
+  return (
+    <Padded>
+      <BaselineAlignment />
+      <Flex justifyContent="space-between">
+        <Flex>
+          <Text fontWeight="semiBold">
+            <span>
+              {label}
+              {!isSingle && ` (${associationsLength})`}
+            </span>
+          </Text>
+          {labelIconformatted && (
+            <div style={{ lineHeight: '13px' }}>
+              <LabelIconWrapper title={labelIconformatted.title}>
+                {labelIconformatted.icon}
+              </LabelIconWrapper>
+            </div>
+          )}
+        </Flex>
+        {isSingle && link}
+      </Flex>
+      {!isEmpty(description) && (
+        <Padded top size="xs">
+          <BaselineAlignment />
+          <Text fontSize="sm" color="grey" lineHeight="12px" ellipsis>
+            {description}
+          </Text>
+        </Padded>
+      )}
+      <Padded top size="sm">
+        <BaselineAlignment />
+
+        <Component
+          addRelation={handleAddRelation}
+          components={{ ClearIndicator, DropdownIndicator, IndicatorSeparator, Option }}
+          displayNavigationLink={shouldDisplayRelationLink}
+          id={name}
+          isDisabled={isDisabled}
+          isLoading={isLoading}
+          isClearable
+          mainField={mainField}
+          move={moveRelation}
+          name={name}
+          options={filteredOptions}
+          onChange={handleChange}
+          onInputChange={handleInputChange}
+          onMenuClose={handleMenuClose}
+          onMenuOpen={handleMenuOpen}
+          onMenuScrollToBottom={handleMenuScrollToBottom}
+          onRemove={onRemoveRelation}
+          placeholder={
+            isEmpty(placeholder) ? (
+              <FormattedMessage id={`${pluginId}.containers.Edit.addAnItem`} />
+            ) : (
+              placeholder
+            )
+          }
+          searchToPersist={searchToPersist}
+          styles={styles}
+          targetModel={targetModel}
+          value={value}
+        />
+      </Padded>
+      <div style={{ marginBottom: 28 }} />
+    </Padded>
+  );
+}
+
+SelectWrapper.defaultProps = {
+  editable: true,
+  description: '',
+  label: '',
+  labelIcon: null,
+  isFieldAllowed: true,
+  placeholder: '',
+};
+
+SelectWrapper.propTypes = {
+  editable: PropTypes.bool,
+  description: PropTypes.string,
+  label: PropTypes.string,
+  labelIcon: PropTypes.shape({
+    icon: PropTypes.node.isRequired,
+    title: PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      defaultMessage: PropTypes.string,
+    }),
+  }),
+  isCreatingEntry: PropTypes.bool.isRequired,
+  isFieldAllowed: PropTypes.bool,
+  isFieldReadable: PropTypes.bool.isRequired,
+  mainField: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    schema: PropTypes.shape({
+      type: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  name: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+  relationType: PropTypes.string.isRequired,
+  targetModel: PropTypes.string.isRequired,
+  queryInfos: PropTypes.shape({
+    containsKey: PropTypes.string.isRequired,
+    defaultParams: PropTypes.object,
+    endPoint: PropTypes.string.isRequired,
+    shouldDisplayRelationLink: PropTypes.bool.isRequired,
+    paramsToKeep: PropTypes.array,
+  }).isRequired,
+};
+
+const Memoized = memo(SelectWrapper);
+
+export default connect(Memoized, select);

package/admin/src/components/SelectWrapper/utils/connect.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+function connect(WrappedComponent, select) {
+  return function(props) {
+    // eslint-disable-next-line react/prop-types
+    const selectors = select(props);
+
+    return <WrappedComponent {...props} {...selectors} />;
+  };
+}
+
+export default connect;

package/admin/src/components/SelectWrapper/utils/index.js

@@ -0,0 +1,3 @@
+export { default as connect } from './connect';
+export { default as select } from './select';
+export { default as styles } from './styles';

package/admin/src/components/SelectWrapper/utils/select.js

@@ -0,0 +1,45 @@
+import { useMemo } from 'react';
+import { useContentManagerEditViewDataManager } from 'strapi-helper-plugin';
+
+function useSelect({ isUserAllowedToEditField, isUserAllowedToReadField, name }) {
+  const {
+    isCreatingEntry,
+    createActionAllowedFields,
+    readActionAllowedFields,
+    updateActionAllowedFields,
+  } = useContentManagerEditViewDataManager();
+
+  const isFieldAllowed = useMemo(() => {
+    if (isUserAllowedToEditField === true) {
+      return true;
+    }
+
+    const allowedFields = isCreatingEntry ? createActionAllowedFields : updateActionAllowedFields;
+
+    return allowedFields.includes(name);
+  }, [
+    isCreatingEntry,
+    createActionAllowedFields,
+    name,
+    isUserAllowedToEditField,
+    updateActionAllowedFields,
+  ]);
+
+  const isFieldReadable = useMemo(() => {
+    if (isUserAllowedToReadField) {
+      return true;
+    }
+
+    const allowedFields = isCreatingEntry ? [] : readActionAllowedFields;
+
+    return allowedFields.includes(name);
+  }, [isCreatingEntry, isUserAllowedToReadField, name, readActionAllowedFields]);
+
+  return {
+    isCreatingEntry,
+    isFieldAllowed,
+    isFieldReadable,
+  };
+}
+
+export default useSelect;