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

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

@@ -0,0 +1,88 @@
+/*
+ *
+ * Search
+ *
+ */
+
+import React, { memo } from 'react';
+import { isEmpty, upperFirst } from 'lodash';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { HeaderSearch, GlobalContext } from 'strapi-helper-plugin';
+import getTrad from '../../utils/getTrad';
+
+const WAIT = 400;
+
+class Search extends React.Component {
+  static contextType = GlobalContext;
+
+  state = { didType: false, value: this.props.initValue };
+
+  timer = null;
+
+  componentDidUpdate(prevProps) {
+    const { model, value } = this.props;
+
+    if (prevProps.model !== model || (!isEmpty(prevProps.value) && isEmpty(value))) {
+      this.resetState();
+    }
+  }
+
+  resetState = () => this.setState({ value: '' });
+
+  handleChange = ({ target }) => {
+    if (!this.state.didType) {
+      this.context.emitEvent('didSearch');
+    }
+
+    clearTimeout(this.timer);
+    this.setState({ value: target.value, didType: !!target.value });
+    this.timer = setTimeout(() => this.triggerChange(target.value), WAIT);
+  };
+
+  handleClick = () => {
+    this.setState({ value: '', didType: false });
+    this.triggerChange('');
+  };
+
+  triggerChange = value => {
+    const method = value ? 'push' : 'remove';
+    const params = method === 'push' ? { _q: value, page: 1 } : { _q: '' };
+
+    this.props.changeParams(params, method);
+  };
+
+  render() {
+    const { model } = this.props;
+    const { value } = this.state;
+
+    return (
+      <FormattedMessage id={getTrad('components.Search.placeholder')}>
+        {placeholder => (
+          <HeaderSearch
+            label={upperFirst(model)}
+            onChange={this.handleChange}
+            onClear={this.handleClick}
+            placeholder={placeholder}
+            value={value}
+          />
+        )}
+      </FormattedMessage>
+    );
+  }
+}
+
+Search.defaultProps = {
+  changeParams: () => {},
+  model: '',
+  value: '',
+};
+
+Search.propTypes = {
+  changeParams: PropTypes.func,
+  initValue: PropTypes.string.isRequired,
+  model: PropTypes.string,
+  value: PropTypes.string,
+};
+
+export default memo(Search);

package/admin/src/components/SectionTitle/Title.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const Title = styled.div`
+  color: #787e8f;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.77px;
+  text-transform: uppercase;
+`;
+
+export default Title;

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

@@ -0,0 +1,29 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import pluginId from '../../pluginId';
+import Title from './Title';
+
+const SectionTitle = ({ isSettings }) => {
+  const suffix = isSettings ? 'settings' : 'view';
+  const msgId = `${pluginId}.containers.SettingPage.${suffix}`;
+
+  return (
+    <div style={{ marginBottom: '18px' }}>
+      <FormattedMessage id={msgId}>
+        {msg => <Title>{msg}</Title>}
+      </FormattedMessage>
+    </div>
+  );
+};
+
+SectionTitle.propTypes = {
+  isSettings: PropTypes.bool,
+};
+
+SectionTitle.defaultProps = {
+  isSettings: false,
+};
+
+export default memo(SectionTitle);

package/admin/src/components/SelectMany/ListItem.js

@@ -0,0 +1,107 @@
+import React, { memo, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useDrag, useDrop } from 'react-dnd';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import { has } from 'lodash';
+
+import pluginId from '../../pluginId';
+import ItemTypes from '../../utils/ItemTypes';
+
+import { Li } from './components';
+import Relation from './Relation';
+
+function ListItem({
+  data,
+  displayNavigationLink,
+  findRelation,
+  isDisabled,
+  mainField,
+  moveRelation,
+  onRemove,
+  searchToPersist,
+  targetModel,
+}) {
+  const to = `/plugins/${pluginId}/collectionType/${targetModel}/${data.id}`;
+
+  const hasDraftAndPublish = has(data, 'published_at');
+
+  const originalIndex = findRelation(data.id).index;
+  const [{ isDragging }, drag, preview] = useDrag({
+    item: {
+      type: ItemTypes.RELATION,
+      id: data.id,
+      originalIndex,
+      data,
+      hasDraftAndPublish,
+      mainField,
+    },
+    collect: monitor => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+  const [, drop] = useDrop({
+    accept: ItemTypes.RELATION,
+    canDrop: () => false,
+    hover({ id: draggedId }) {
+      if (draggedId !== data.id) {
+        const { index: overIndex } = findRelation(data.id);
+        moveRelation(draggedId, overIndex);
+      }
+    },
+  });
+
+  useEffect(() => {
+    preview(getEmptyImage(), { captureDraggingState: true });
+  }, [preview]);
+
+  const opacity = isDragging ? 0.2 : 1;
+
+  return (
+    <Li
+      ref={node => {
+        if (!isDisabled) {
+          drag(drop(node));
+        }
+      }}
+      style={{ opacity }}
+    >
+      <Relation
+        displayNavigationLink={displayNavigationLink}
+        hasDraftAndPublish={hasDraftAndPublish}
+        mainField={mainField}
+        onRemove={onRemove}
+        data={data}
+        to={to}
+        isDisabled={isDisabled}
+        searchToPersist={searchToPersist}
+      />
+    </Li>
+  );
+}
+
+ListItem.defaultProps = {
+  findRelation: () => {},
+  moveRelation: () => {},
+  onRemove: () => {},
+  searchToPersist: null,
+  targetModel: '',
+};
+
+ListItem.propTypes = {
+  data: PropTypes.object.isRequired,
+  displayNavigationLink: PropTypes.bool.isRequired,
+  findRelation: PropTypes.func,
+  isDisabled: PropTypes.bool.isRequired,
+  mainField: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    schema: PropTypes.shape({
+      type: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  moveRelation: PropTypes.func,
+  onRemove: PropTypes.func,
+  searchToPersist: PropTypes.string,
+  targetModel: PropTypes.string,
+};
+
+export default memo(ListItem);

package/admin/src/components/SelectMany/Relation.js

@@ -0,0 +1,106 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { memo, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'react-router-dom';
+import { isEmpty } from 'lodash';
+import { useIntl } from 'react-intl';
+import { RelationDPState } from 'strapi-helper-plugin';
+import { getDisplayedValue, getTrad } from '../../utils';
+import IconRemove from '../../assets/images/icon_remove.svg';
+import { Span } from './components';
+
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+
+const Relation = ({
+  data,
+  displayNavigationLink,
+  hasDraftAndPublish,
+  isDisabled,
+  isDragging,
+  mainField,
+  onRemove,
+  searchToPersist,
+  to,
+}) => {
+  const { formatMessage } = useIntl();
+  const cursor = useMemo(() => {
+    if (isDisabled) {
+      return 'not-allowed';
+    }
+
+    if (!displayNavigationLink) {
+      return 'default';
+    }
+
+    return 'pointer';
+  }, [displayNavigationLink, isDisabled]);
+  const { pathname } = useLocation();
+  const isDraft = isEmpty(data.published_at);
+  const titleLabelID = isDraft
+    ? 'components.Select.draft-info-title'
+    : 'components.Select.publish-info-title';
+  let title = hasDraftAndPublish
+    ? formatMessage({ id: getTrad(titleLabelID) })
+    : formatMessage({ id: getTrad('containers.Edit.clickToJump') });
+
+  const value = data[mainField.name];
+  const formattedValue = getDisplayedValue(mainField.schema.type, value, mainField.name);
+
+  if (isDragging || !displayNavigationLink) {
+    title = '';
+  }
+
+  return (
+    <>
+      <div style={{ cursor }} title={title}>
+        <div className="dragHandle">
+          <span />
+        </div>
+        {hasDraftAndPublish && (
+          <div>
+            <RelationDPState isDraft={isDraft} />
+          </div>
+        )}
+        {displayNavigationLink ? (
+          <Link
+            to={{ pathname: to, state: { from: pathname }, search: searchToPersist }}
+            title={title}
+          >
+            <Span>{formattedValue}&nbsp;</Span>
+          </Link>
+        ) : (
+          <Span>{formattedValue}&nbsp;</Span>
+        )}
+      </div>
+      <div style={{ cursor, width: 'auto' }}>
+        <img src={IconRemove} alt="Remove Icon" onClick={onRemove} />
+      </div>
+    </>
+  );
+};
+
+Relation.defaultProps = {
+  isDragging: false,
+  onRemove: () => {},
+  searchToPersist: null,
+  to: '',
+};
+
+Relation.propTypes = {
+  data: PropTypes.object.isRequired,
+  displayNavigationLink: PropTypes.bool.isRequired,
+  hasDraftAndPublish: PropTypes.bool.isRequired,
+  isDisabled: PropTypes.bool.isRequired,
+  isDragging: PropTypes.bool,
+  mainField: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    schema: PropTypes.shape({
+      type: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  onRemove: PropTypes.func,
+  searchToPersist: PropTypes.string,
+  to: PropTypes.string,
+};
+
+export default memo(Relation);

package/admin/src/components/SelectMany/components.js

@@ -0,0 +1,153 @@
+import styled from 'styled-components';
+
+const ListWrapper = styled.div`
+  max-height: 116px;
+
+  > ul {
+    margin: 0 -20px 0;
+    padding: 0 20px !important;
+    list-style: none !important;
+    overflow: auto;
+    max-height: 110px;
+  }
+`;
+
+const ListShadow = styled.div`
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: 0px;
+
+  &:after {
+    position: absolute;
+    top: -15px;
+    left: -5px;
+    content: '';
+    display: inline-block;
+    width: calc(100% + 10px);
+    height: 1px;
+    margin-bottom: -25px;
+    box-shadow: 0px -2px 4px 0px rgba(227, 233, 243, 0.5);
+  }
+`;
+
+const Li = styled.li`
+  display: flex;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: space-between;
+  height: 18px;
+  margin-top: 9px;
+  line-height: 1;
+  &:last-of-type {
+    margin-bottom: 0px;
+  }
+  &:active {
+    .dragHandle {
+      > span {
+        background: #aed4fb;
+      }
+    }
+  }
+
+  .dragHandle {
+    outline: none;
+    text-decoration: none;
+    margin-top: -1px;
+
+    > span {
+      vertical-align: middle;
+      position: relative;
+      display: inline-block;
+      width: 6px;
+      height: 1px;
+      padding: 0px !important;
+      background: #b3b5b9;
+      overflow: visible !important;
+      transition: background 0.25s ease-out;
+
+      &:before,
+      &:after {
+        content: '';
+        display: inline-block;
+        width: 6px;
+        height: 1px;
+        background: inherit;
+      }
+
+      &:before {
+        position: absolute;
+        top: -2px;
+        left: 0;
+      }
+
+      &:after {
+        position: absolute;
+        bottom: -2px;
+        left: 0;
+      }
+    }
+  }
+
+  > div {
+    width: 90%;
+    > a {
+      flex-grow: 2;
+      max-width: 100%;
+      color: rgb(35, 56, 77);
+    }
+    > a:hover {
+      text-decoration: none;
+    }
+
+    &:first-of-type {
+      display: flex;
+      align-items: center;
+      transition: color 0.25s ease-out;
+
+      &:hover {
+        .dragHandle {
+          > span {
+            background: #007eff;
+          }
+        }
+        > a {
+          color: #007eff;
+        }
+        color: #007eff;
+      }
+
+      span {
+        &:last-of-type {
+          padding-left: 10px;
+        }
+      }
+    }
+
+    &:last-of-type {
+      display: inline-block;
+      height: 100%;
+      padding-right: 0px;
+      line-height: 18px;
+      text-align: right;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      img {
+        display: inline-block;
+        height: 14px;
+      }
+    }
+  }
+`;
+
+const Span = styled.span`
+  display: block;
+  max-width: calc(100% - 10px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export { ListShadow, ListWrapper, Li, Span };

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

@@ -0,0 +1,159 @@
+import React, { memo, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { isEmpty } from 'lodash';
+import { useDrop } from 'react-dnd';
+import Select, { createFilter } from 'react-select';
+import ItemTypes from '../../utils/ItemTypes';
+import { ListShadow, ListWrapper } from './components';
+import ListItem from './ListItem';
+
+function SelectMany({
+  addRelation,
+  components,
+  displayNavigationLink,
+  mainField,
+  name,
+  isDisabled,
+  isLoading,
+  move,
+  onInputChange,
+  onMenuClose,
+  onMenuOpen,
+  onMenuScrollToBottom,
+  onRemove,
+  options,
+  placeholder,
+  searchToPersist,
+  styles,
+  targetModel,
+  value,
+}) {
+  const [, drop] = useDrop({ accept: ItemTypes.RELATION });
+  const findRelation = id => {
+    const relation = value.filter(c => {
+      return `${c.id}` === `${id}`;
+    })[0];
+
+    return {
+      relation,
+      index: value.indexOf(relation),
+    };
+  };
+
+  const moveRelation = useCallback(
+    (id, atIndex) => {
+      const { index } = findRelation(id);
+
+      move(index, atIndex, name);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [value]
+  );
+
+  const filterConfig = {
+    ignoreCase: true,
+    ignoreAccents: true,
+    trim: false,
+    matchFrom: 'any',
+  };
+
+  return (
+    <>
+      <Select
+        components={components}
+        isDisabled={isDisabled}
+        id={name}
+        filterOption={(candidate, input) => {
+          if (!isEmpty(value)) {
+            const isSelected = value.findIndex(item => item.id === candidate.value.id) !== -1;
+
+            if (isSelected) {
+              return false;
+            }
+          }
+
+          if (input) {
+            return createFilter(filterConfig)(candidate, input);
+          }
+
+          return true;
+        }}
+        mainField={mainField}
+        isLoading={isLoading}
+        isMulti
+        isSearchable
+        options={options}
+        onChange={addRelation}
+        onInputChange={onInputChange}
+        onMenuClose={onMenuClose}
+        onMenuOpen={onMenuOpen}
+        onMenuScrollToBottom={onMenuScrollToBottom}
+        placeholder={placeholder}
+        styles={styles}
+        value={[]}
+      />
+
+      <ListWrapper ref={drop}>
+        {!isEmpty(value) && (
+          <ul>
+            {value.map((data, index) => (
+              <ListItem
+                key={data.id}
+                data={data}
+                displayNavigationLink={displayNavigationLink}
+                isDisabled={isDisabled}
+                findRelation={findRelation}
+                mainField={mainField}
+                moveRelation={moveRelation}
+                onRemove={() => {
+                  if (!isDisabled) {
+                    onRemove(`${name}.${index}`);
+                  }
+                }}
+                searchToPersist={searchToPersist}
+                targetModel={targetModel}
+              />
+            ))}
+          </ul>
+        )}
+        {!isEmpty(value) && value.length > 4 && <ListShadow />}
+      </ListWrapper>
+    </>
+  );
+}
+
+SelectMany.defaultProps = {
+  components: {},
+  move: () => {},
+  searchToPersist: null,
+  value: null,
+};
+
+SelectMany.propTypes = {
+  addRelation: PropTypes.func.isRequired,
+  components: PropTypes.object,
+  displayNavigationLink: PropTypes.bool.isRequired,
+  isDisabled: PropTypes.bool.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  mainField: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    schema: PropTypes.shape({
+      type: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  move: PropTypes.func,
+  name: PropTypes.string.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onMenuClose: PropTypes.func.isRequired,
+  onMenuOpen: PropTypes.func.isRequired,
+  onMenuScrollToBottom: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired,
+  options: PropTypes.array.isRequired,
+  placeholder: PropTypes.node.isRequired,
+  searchToPersist: PropTypes.string,
+  styles: PropTypes.object.isRequired,
+  targetModel: PropTypes.string.isRequired,
+  value: PropTypes.array,
+};
+
+export default memo(SelectMany);

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { components } from 'react-select';
+import PropTypes from 'prop-types';
+import { get, has, isEmpty } from 'lodash';
+import { Flex, Padded, Text } from '@buffetjs/core';
+import { RelationDPState } from 'strapi-helper-plugin';
+import { getDisplayedValue } from '../../utils';
+
+const SingleValue = props => {
+  const Component = components.SingleValue;
+  const hasDraftAndPublish = has(get(props, 'data.value'), 'published_at');
+  const isDraft = isEmpty(get(props, 'data.value.published_at'));
+  const mainField = get(props, ['selectProps', 'mainField'], {});
+  const value = getDisplayedValue(mainField.schema.type, props.data.label, mainField.name);
+
+  if (hasDraftAndPublish) {
+    return (
+      <Component {...props}>
+        <Padded left size="sm" right>
+          <Flex>
+            <RelationDPState
+              marginLeft="0"
+              marginTop="1px"
+              marginRight="10px"
+              isDraft={isDraft}
+              marginBottom="0"
+            />
+            <div>
+              <Text ellipsis>{value}</Text>
+            </div>
+          </Flex>
+        </Padded>
+      </Component>
+    );
+  }
+
+  return (
+    <Component {...props}>
+      <Padded left right size="sm">
+        {value}
+      </Padded>
+    </Component>
+  );
+};
+
+SingleValue.propTypes = {
+  data: PropTypes.object.isRequired,
+  selectProps: PropTypes.shape({
+    mainField: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      schema: PropTypes.shape({
+        type: PropTypes.string.isRequired,
+      }).isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+
+export default SingleValue;