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

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

@@ -0,0 +1,102 @@
+import React, { memo, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { get } from 'lodash';
+
+import useLayoutDnd from '../../hooks/useLayoutDnd';
+
+import Add from '../AddDropdown';
+import SortWrapper from '../SortWrapper';
+import Wrapper from './components';
+import Item from './Item';
+
+const FieldsReorder = ({ className }) => {
+  const {
+    attributes,
+    buttonData,
+    layout,
+    moveItem,
+    moveRow,
+    onAddData,
+    removeField,
+  } = useLayoutDnd();
+
+  const getComponent = useCallback(
+    attributeName => {
+      return get(attributes, [attributeName, 'component'], '');
+    },
+    [attributes]
+  );
+  const getType = useCallback(
+    attributeName => {
+      const attribute = get(attributes, [attributeName], {});
+
+      return attribute.type;
+    },
+    [attributes]
+  );
+  const getDynamicZoneComponents = useCallback(
+    attributeName => {
+      const attribute = get(attributes, [attributeName], {});
+
+      return attribute.components || [];
+    },
+    [attributes]
+  );
+
+  return (
+    <div className={className}>
+      <SortWrapper
+        style={{
+          marginTop: 7,
+          paddingTop: 11,
+          paddingLeft: 5,
+          paddingRight: 5,
+          border: '1px dashed #e3e9f3',
+        }}
+      >
+        {layout.map((row, rowIndex) => {
+          return (
+            <Wrapper key={row.rowId} style={{}}>
+              {row.rowContent.map((rowContent, index) => {
+                const { name, size } = rowContent;
+
+                return (
+                  <Item
+                    componentUid={getComponent(name)}
+                    dynamicZoneComponents={getDynamicZoneComponents(name)}
+                    itemIndex={index}
+                    key={name}
+                    moveRow={moveRow}
+                    moveItem={moveItem}
+                    name={name}
+                    removeField={removeField}
+                    rowIndex={rowIndex}
+                    size={size}
+                    type={getType(name)}
+                  />
+                );
+              })}
+            </Wrapper>
+          );
+        })}
+        <Wrapper style={{ marginBottom: 10 }}>
+          <Add
+            data={buttonData}
+            onClick={onAddData}
+            style={{ width: '100%', margin: '0 5px' }}
+          />
+        </Wrapper>
+      </SortWrapper>
+    </div>
+  );
+};
+
+FieldsReorder.defaultProps = {
+  className: 'col-8',
+};
+
+FieldsReorder.propTypes = {
+  className: PropTypes.string,
+};
+
+export default memo(FieldsReorder);

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

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+const FilterOptionsCTA = styled.button`
+  display: flex;
+  justify-content: center;
+  height: 20px;
+  width: 20px;
+  margin: 8px 5px 0px 0px;
+  border-radius: 50%;
+  border: 1px solid #E3E9F3;
+  cursor: pointer;
+`;
+
+export default FilterOptionsCTA;

package/admin/src/components/FilterPicker/components.js

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+
+/* eslint-disable indent */
+const Wrapper = styled.div`
+  margin-top: -6px;
+  > div {
+    padding-top: 2px;
+    &:not(:first-of-type) {
+      padding-top: 9px;
+      padding-bottom: 2px;
+      &:last-of-type:nth-of-type(even) {
+        padding-bottom: 11px;
+      }
+    }
+  }
+`;
+
+const Span = styled.span`
+  vertical-align: text-top;
+  cursor: pointer;
+
+  &:after {
+    margin-left: 2px;
+    content: '\f077';
+    font-family: FontAwesome;
+    font-size: 10px;
+  }
+`;
+
+const Flex = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 0 10px 30px !important;
+  margin-top: -10px;
+  color: #c3c5c8;
+  font-size: 13px;
+`;
+
+const Div = styled.div`
+  width: calc(100% + 60px);
+  margin: ${props => (props.show ? '-100px -30px 30px' : `-${props.number}px -30px 103px`)};
+  background: #fff;
+  box-shadow: 3px 2px 4px #e3e9f3;
+  padding: 18px 30px 0px 30px;
+  transition: ${props => {
+    if (props.anim) {
+      return props.show
+        ? 'margin-top .3s ease-out, margin-bottom .2s ease-out'
+        : 'margin .3s ease-in';
+    }
+
+    return '';
+  }};
+`;
+
+export { Div, Flex, Span, Wrapper };

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

@@ -0,0 +1,258 @@
+import React, { memo, useCallback, useMemo, useReducer, useRef } from 'react';
+import { withRouter } from 'react-router';
+import PropTypes from 'prop-types';
+import { capitalize, get } from 'lodash';
+import { Collapse } from 'reactstrap';
+import { FormattedMessage } from 'react-intl';
+import {
+  PluginHeader,
+  getFilterType,
+  useUser,
+  findMatchingPermissions,
+  useGlobalContext,
+} from 'strapi-helper-plugin';
+
+import pluginId from '../../pluginId';
+import { formatFiltersToQuery, getTrad } from '../../utils';
+import Container from '../Container';
+import FilterPickerOption from '../FilterPickerOption';
+import { Flex, Span, Wrapper } from './components';
+import init from './init';
+import reducer, { initialState } from './reducer';
+
+const NOT_ALLOWED_FILTERS = ['json', 'component', 'media', 'richtext', 'dynamiczone'];
+
+function FilterPicker({
+  contentType,
+  filters,
+  isOpen,
+  metadatas,
+  name,
+  toggleFilterPickerState,
+  setQuery,
+  slug,
+}) {
+  const { emitEvent } = useGlobalContext();
+  const emitEventRef = useRef(emitEvent);
+  const { userPermissions } = useUser();
+  const readActionAllowedFields = useMemo(() => {
+    const matchingPermissions = findMatchingPermissions(userPermissions, [
+      {
+        action: 'plugins::content-manager.explorer.read',
+        subject: slug,
+      },
+    ]);
+
+    return get(matchingPermissions, ['0', 'properties', 'fields'], []);
+  }, [userPermissions, slug]);
+
+  let timestamps = get(contentType, ['options', 'timestamps']);
+
+  if (!Array.isArray(timestamps)) {
+    timestamps = [];
+  }
+
+  const actions = [
+    {
+      label: getTrad('components.FiltersPickWrapper.PluginHeader.actions.clearAll'),
+      kind: 'secondary',
+      onClick: () => {
+        toggleFilterPickerState();
+        setQuery({ _where: [] }, 'remove');
+      },
+    },
+    {
+      label: getTrad('components.FiltersPickWrapper.PluginHeader.actions.apply'),
+      kind: 'primary',
+      type: 'submit',
+    },
+  ];
+
+  const allowedAttributes = Object.keys(get(contentType, ['attributes']), {})
+    .filter(attr => {
+      const current = get(contentType, ['attributes', attr], {});
+
+      if (!readActionAllowedFields.includes(attr) && attr !== 'id' && !timestamps.includes(attr)) {
+        return false;
+      }
+
+      return !NOT_ALLOWED_FILTERS.includes(current.type) && current.type !== undefined;
+    })
+    .sort()
+    .map(attr => {
+      const current = get(contentType, ['attributes', attr], {});
+
+      return { name: attr, type: current.type, options: current.enum || null };
+    });
+
+  const [state, dispatch] = useReducer(reducer, initialState, () =>
+    init(initialState, allowedAttributes[0] || {})
+  );
+
+  const modifiedData = state.get('modifiedData').toJS();
+  const handleChange = ({ target: { name, value } }) => {
+    dispatch({
+      type: 'ON_CHANGE',
+      keys: name.split('.'),
+      value,
+    });
+  };
+
+  const renderTitle = () => (
+    <FormattedMessage id={`${pluginId}.components.FiltersPickWrapper.PluginHeader.title.filter`}>
+      {message => (
+        <span>
+          {capitalize(name)}&nbsp;-&nbsp;
+          <span>{message}</span>
+        </span>
+      )}
+    </FormattedMessage>
+  );
+
+  const initialFilter = useMemo(() => {
+    const type = get(allowedAttributes, [0, 'type'], '');
+    const [filter] = getFilterType(type);
+
+    let value = '';
+
+    switch (type) {
+      case 'boolean': {
+        value = 'true';
+        break;
+      }
+      case 'number': {
+        value = 0;
+        break;
+      }
+      case 'enumeration': {
+        value = get(allowedAttributes, [0, 'options', 0], '');
+        break;
+      }
+      default: {
+        value = '';
+      }
+    }
+
+    const initFilter = {
+      name: get(allowedAttributes, [0, 'name'], ''),
+      filter: filter.value,
+      value,
+    };
+
+    return initFilter;
+  }, [allowedAttributes]);
+
+  // Set the filters when the collapse is opening
+  const handleEntering = () => {
+    const currentFilters = filters;
+    const initialFilters = currentFilters.length ? currentFilters : [initialFilter];
+
+    dispatch({
+      type: 'SET_FILTERS',
+      initialFilters,
+      attributes: get(contentType, 'attributes', {}),
+    });
+  };
+
+  const addFilter = () => {
+    dispatch({
+      type: 'ADD_FILTER',
+      filter: initialFilter,
+    });
+  };
+
+  const handleSubmit = useCallback(
+    e => {
+      e.preventDefault();
+      const nextFilters = formatFiltersToQuery(modifiedData, metadatas);
+      const useRelation = nextFilters._where.some(obj => Object.keys(obj)[0].includes('.'));
+
+      emitEventRef.current('didFilterEntries', { useRelation });
+      setQuery({ ...nextFilters, page: 1 });
+      toggleFilterPickerState();
+    },
+    [modifiedData, setQuery, toggleFilterPickerState, metadatas]
+  );
+
+  const handleRemoveFilter = index => {
+    if (index === 0 && modifiedData.length === 1) {
+      toggleFilterPickerState();
+
+      return;
+    }
+
+    dispatch({
+      type: 'REMOVE_FILTER',
+      index,
+    });
+  };
+
+  const getAttributeType = useCallback(
+    filter => {
+      const attributeType = get(contentType, ['attributes', filter.name, 'type'], '');
+
+      if (attributeType === 'relation') {
+        return get(metadatas, [filter.name, 'list', 'mainField', 'schema', 'type'], 'string');
+      }
+
+      return attributeType;
+    },
+    [contentType, metadatas]
+  );
+
+  return (
+    <Collapse isOpen={isOpen} onEntering={handleEntering}>
+      <Container style={{ backgroundColor: 'white', paddingBottom: 0 }}>
+        <form onSubmit={handleSubmit}>
+          <PluginHeader
+            actions={actions}
+            title={renderTitle}
+            description={{
+              id: `${pluginId}.components.FiltersPickWrapper.PluginHeader.description`,
+            }}
+          />
+          <Wrapper>
+            {modifiedData.map((filter, key) => (
+              <FilterPickerOption
+                {...filter}
+                allowedAttributes={allowedAttributes}
+                index={key}
+                modifiedData={modifiedData}
+                onChange={handleChange}
+                onClickAddFilter={addFilter}
+                onRemoveFilter={handleRemoveFilter}
+                type={getAttributeType(filter)}
+                showAddButton={key === modifiedData.length - 1}
+                // eslint-disable-next-line react/no-array-index-key
+                key={key}
+              />
+            ))}
+          </Wrapper>
+          <Flex>
+            <Span onClick={toggleFilterPickerState}>
+              <FormattedMessage id="content-manager.components.FiltersPickWrapper.hide" />
+              &nbsp;
+            </Span>
+          </Flex>
+        </form>
+      </Container>
+    </Collapse>
+  );
+}
+
+FilterPicker.defaultProps = {
+  name: '',
+};
+
+FilterPicker.propTypes = {
+  contentType: PropTypes.object.isRequired,
+  filters: PropTypes.array.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  metadatas: PropTypes.object.isRequired,
+  name: PropTypes.string,
+  setQuery: PropTypes.func.isRequired,
+  slug: PropTypes.string.isRequired,
+  toggleFilterPickerState: PropTypes.func.isRequired,
+};
+
+export default withRouter(memo(FilterPicker));

package/admin/src/components/FilterPicker/init.js

@@ -0,0 +1,25 @@
+import { fromJS } from 'immutable';
+import { getFilterType } from 'strapi-helper-plugin';
+import { get } from 'lodash';
+
+function init(initialState, { name, type, options }) {
+  // Create the first filter
+  const [filter] = getFilterType(type);
+  let value = '';
+
+  if (type === 'boolean') {
+    value = 'true';
+  } else if (type === 'number') {
+    value = 0;
+  } else if (type === 'enumeration') {
+    value = get(options, [0], '');
+  }
+
+  const initialFilter = { name, filter: filter.value, value };
+
+  return initialState
+    .update('initialData', () => fromJS([initialFilter]))
+    .update('modifiedData', () => fromJS([initialFilter]));
+}
+
+export default init;

package/admin/src/components/FilterPicker/reducer.js

@@ -0,0 +1,58 @@
+import { fromJS } from 'immutable';
+
+const initialState = fromJS({
+  attributes: {},
+  initialData: [],
+  modifiedData: [],
+});
+
+function reducer(state, action) {
+  switch (action.type) {
+    case 'ADD_FILTER':
+      return state.update('modifiedData', list => list.push(fromJS(action.filter)));
+    case 'ON_CHANGE': {
+      const [index, key] = action.keys;
+
+      return state
+        .updateIn(['modifiedData', ...action.keys], () => {
+          if (action.value && action.value._isAMomentObject === true) {
+            return action.value.toISOString();
+          }
+
+          return action.value;
+        })
+        .updateIn(['modifiedData', index, 'value'], value => {
+          if (key === 'name') {
+            const attribute = state.getIn(['attributes', action.value]);
+            const attributeType = attribute.get('type');
+
+            if (attributeType === 'boolean') {
+              return 'true';
+            }
+
+            if (attributeType === 'enumeration') {
+              return attribute.getIn(['enum', '0']) || '';
+            }
+
+            return '';
+          }
+
+          return value;
+        });
+    }
+    case 'REMOVE_FILTER':
+      return state.removeIn(['modifiedData', action.index]);
+    case 'RESET_FILTERS':
+      return initialState;
+    case 'SET_FILTERS':
+      return state
+        .update('attributes', () => fromJS(action.attributes))
+        .update('initialData', () => fromJS(action.initialFilters))
+        .update('modifiedData', () => fromJS(action.initialFilters));
+    default:
+      return state;
+  }
+}
+
+export default reducer;
+export { initialState };

package/admin/src/components/FilterPickerOption/Input.js

@@ -0,0 +1,58 @@
+/**
+ *
+ * InputWithAutoFocus that programatically manage the autofocus of another one
+ */
+
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+
+import { DateTime } from '@buffetjs/custom';
+import { DatePicker, InputText, InputNumber, Select, TimePicker } from '@buffetjs/core';
+import { InputWrapperDate } from './components';
+
+const getInputType = attrType => {
+  switch (attrType) {
+    case 'boolean':
+      return Select;
+    case 'date':
+    case 'timestamp':
+    case 'timestampUpdate':
+      return DatePicker;
+    case 'datetime':
+      return DateTime;
+    case 'enumeration':
+      return Select;
+    case 'integer':
+    case 'biginteger':
+    case 'decimal':
+    case 'float':
+      return InputNumber;
+    case 'time':
+      return TimePicker;
+    default:
+      return InputText;
+  }
+};
+
+function Input({ type, ...rest }) {
+  const Component = getInputType(type);
+  let style = type !== 'time' ? { width: '210px' } : {};
+
+  if (['integer', 'biginteger', 'float', 'decimal'].includes(type)) {
+    style = { marginRight: '15px' };
+  }
+  const styles = type === 'boolean' ? { minWidth: '100px', maxWidth: '200px' } : style;
+  const wrapperStyle = { marginRight: '15px' };
+
+  return (
+    <InputWrapperDate type={type || 'text'} style={wrapperStyle}>
+      <Component {...rest} style={styles} autoComplete="off" />
+    </InputWrapperDate>
+  );
+}
+
+Input.propTypes = {
+  type: PropTypes.string.isRequired,
+};
+
+export default memo(Input);

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+
+const Option = ({ id, value }) => {
+  return (
+    <FormattedMessage id={id}>
+      {msg => <option value={value}>{msg}</option>}
+    </FormattedMessage>
+  );
+};
+
+Option.propTypes = {
+  id: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+};
+
+export default Option;

package/admin/src/components/FilterPickerOption/components.js

@@ -0,0 +1,60 @@
+import styled from 'styled-components';
+
+/* eslint-disable */
+
+const Wrapper = styled.div`
+  min-height: 38px;
+  border-left: ${props => props.borderLeft && '3px solid #007EFF'};
+  padding-left: ${props => (props.borderLeft ? '10px' : '13px')};
+  margin-bottom: 0px !important;
+`;
+
+const InputWrapper = styled.div`
+  display: flex;
+  input,
+  select {
+    margin: 0px 5px !important;
+  }
+`;
+
+const InputWrapperDate = styled.div`
+  margin-right: 10px;
+  span {
+    left: 5px;
+  }
+  .rc-input-number-handler-wrap {
+    right: -5px !important;
+  }
+  .rc-input-number-input-wrap {
+    max-width: 210px;
+    overflow: visible;
+  }
+  > div {
+    width: 210px;
+  }
+
+  ${({ type }) => {
+    if (type === 'datetime') {
+      return `
+      > div {
+        width: 300px;
+      }
+
+      `;
+    }
+  }}
+`;
+
+const Input = styled.input`
+  height: 3.4rem;
+  margin-top: 0.9rem;
+  padding-left: 1rem;
+  background-size: 0 !important;
+  border: 1px solid #e3e9f3;
+  border-radius: 0.25rem;
+  line-height: 3.4rem;
+  font-size: 1.3rem;
+  font-family: 'Lato' !important;
+  box-shadow: 0px 1px 1px rgba(104, 118, 142, 0.05);
+`;
+export { InputWrapper, Wrapper, InputWrapperDate, Input };