@akemona-org/strapi-plugin-upload 3.7.0

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FilterButton } from 'strapi-helper-plugin';
+
+import formatFilter from './utils/formatFilter';
+
+const FiltersList = ({ filters, onClick }) => {
+  return filters.map((item, index) => {
+    const formattedValue = formatFilter(item);
+    const { name, filter, value, isDisabled } = formattedValue;
+
+    return (
+      !isDisabled && (
+        <FilterButton
+          onClick={() => onClick(index)}
+          key={`${name}${filter}${value}`}
+          label={formattedValue}
+        />
+      )
+    );
+  });
+};
+
+FiltersList.defaultProps = {
+  filters: [],
+  onClick: () => {},
+};
+
+FiltersList.propTypes = {
+  onClick: PropTypes.func,
+  filters: PropTypes.arrayOf(PropTypes.object),
+};
+
+export default FiltersList;

package/admin/src/components/FiltersList/utils/formatFilter.js

@@ -0,0 +1,36 @@
+import moment from 'moment';
+import { dateFormats, dateToUtcTime } from 'strapi-helper-plugin';
+import { formatBytes } from '../../../utils';
+
+const formatFilter = filterToFormat => {
+  const { name, filter, value } = filterToFormat;
+
+  // Size filter - Convert bites to human-readable format
+  if (name === 'size') {
+    return {
+      ...filterToFormat,
+      value: formatBytes(value),
+    };
+  }
+
+  // Mime filter - Display different wording than the received ones
+  if (name === 'mime') {
+    return {
+      ...filterToFormat,
+      name: 'type',
+      filter: filter === '_contains' ? '=' : '_ne',
+    };
+  }
+
+  // Format date to readable format
+  if (moment(value)._isValid === true) {
+    return {
+      ...filterToFormat,
+      value: dateToUtcTime(value).format(dateFormats.datetime),
+    };
+  }
+
+  return filterToFormat;
+};
+
+export default formatFilter;

package/admin/src/components/FiltersPicker/FiltersCard/FilterButton.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Button } from '@buffetjs/core';
+
+const FilterButton = styled(Button)`
+  width: 100%;
+`;
+
+export default FilterButton;

package/admin/src/components/FiltersPicker/FiltersCard/FilterInput.js

@@ -0,0 +1,35 @@
+/**
+ *
+ * InputWithAutoFocus that programatically manage the autofocus of another one
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { InputText, Select } from '@buffetjs/core';
+import { DateTime } from '@buffetjs/custom';
+import SizeInput from './SizeInput';
+
+const getInputType = type => {
+  switch (type) {
+    case 'datetime':
+      return DateTime;
+    case 'integer':
+      return SizeInput;
+    case 'enum':
+      return Select;
+    default:
+      return InputText;
+  }
+};
+
+function Input({ type, ...rest }) {
+  const Component = getInputType(type);
+
+  return <Component {...rest} autoComplete="off" />;
+}
+
+Input.propTypes = {
+  type: PropTypes.string.isRequired,
+};
+
+export default Input;

package/admin/src/components/FiltersPicker/FiltersCard/InputWrapper.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const InputWrapper = styled.div`
+  margin-bottom: 11px;
+  #datetime {
+    max-width: 130px;
+  }
+`;
+
+export default InputWrapper;

package/admin/src/components/FiltersPicker/FiltersCard/SizeInput.js

@@ -0,0 +1,57 @@
+/**
+ *
+ * SizeInput
+ */
+
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { InputNumber, Select, Padded, Flex } from '@buffetjs/core';
+
+function SizeInput({ onChange, value, ...rest }) {
+  const options = ['KB', 'MB', 'GB'];
+  const [size, setSize] = useState(0);
+  const [format, setFormat] = useState('KB');
+
+  const handleChangeValue = ({ target: { value } }) => {
+    setSize(value);
+
+    onChange({
+      target: {
+        name: 'value',
+        value: `${value}${format}`,
+      },
+    });
+  };
+
+  const handleChangeFormat = ({ target: { value } }) => {
+    setFormat(value);
+
+    onChange({
+      target: {
+        name: 'value',
+        value: `${size}${value}`,
+      },
+    });
+  };
+
+  return (
+    <Flex justifyContent="space-between">
+      <InputNumber {...rest} name="size_value" onChange={handleChangeValue} value={size} />
+      <Padded left />
+      <Select name="format_value" onChange={handleChangeFormat} options={options} value={format} />
+    </Flex>
+  );
+}
+
+SizeInput.defaultProps = {
+  onChange: () => {},
+  value: null,
+};
+
+SizeInput.propTypes = {
+  onChange: PropTypes.func,
+  value: PropTypes.string,
+};
+
+export default SizeInput;

package/admin/src/components/FiltersPicker/FiltersCard/Wrapper.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  width: 260px;
+  padding: 13px 15px;
+`;
+
+export default Wrapper;

package/admin/src/components/FiltersPicker/FiltersCard/index.js

@@ -0,0 +1,97 @@
+import React, { useReducer } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Select } from '@buffetjs/core';
+import { getFilterType, useGlobalContext } from 'strapi-helper-plugin';
+import { getTrad, getFileModelTimestamps } from '../../../utils';
+import init from './init';
+import reducer, { initialState } from './reducer';
+
+import Wrapper from './Wrapper';
+import InputWrapper from './InputWrapper';
+import FilterButton from './FilterButton';
+import FilterInput from './FilterInput';
+
+const FiltersCard = ({ onChange }) => {
+  const { plugins } = useGlobalContext();
+  const timestamps = getFileModelTimestamps(plugins);
+  const [state, dispatch] = useReducer(reducer, initialState, () => init(initialState, timestamps));
+  const { name, filter, filtersForm, value } = state.toJS();
+
+  const type = filtersForm[name].type;
+  const filtersOptions = getFilterType(type);
+  const options = ['image', 'video', 'file'];
+
+  const handleChange = ({ target: { name, value } }) => {
+    dispatch({
+      type: 'ON_CHANGE',
+      name,
+      value,
+      defaultValue: value === 'mime' ? options[0] : null,
+    });
+  };
+
+  const addFilter = () => {
+    onChange({ target: { value: { name, filter, value } } });
+
+    dispatch({
+      type: 'RESET_FORM',
+    });
+  };
+
+  const renderFiltersOptions = () => {
+    return filtersOptions.map(({ id, value }) => (
+      <FormattedMessage id={id} key={id}>
+        {msg => <option value={value}>{msg}</option>}
+      </FormattedMessage>
+    ));
+  };
+
+  const renderNamesOptions = () => {
+    return Object.keys(filtersForm).map(key => {
+      return (
+        <option key={key} value={key}>
+          {key === 'mime' ? 'type' : key}
+        </option>
+      );
+    });
+  };
+
+  return (
+    <Wrapper>
+      <InputWrapper>
+        <Select onChange={handleChange} name="name" options={renderNamesOptions()} value={name} />
+      </InputWrapper>
+      <InputWrapper>
+        <Select
+          onChange={handleChange}
+          name="filter"
+          options={renderFiltersOptions()}
+          value={filter}
+        />
+      </InputWrapper>
+      <InputWrapper>
+        <FilterInput
+          type={type}
+          onChange={handleChange}
+          name="value"
+          options={options}
+          value={value}
+        />
+      </InputWrapper>
+      <FilterButton icon onClick={addFilter}>
+        <FormattedMessage id={getTrad('filter.add')} />
+      </FilterButton>
+    </Wrapper>
+  );
+};
+
+FiltersCard.defaultProps = {
+  onChange: () => {},
+};
+
+FiltersCard.propTypes = {
+  onChange: PropTypes.func,
+};
+
+export default FiltersCard;

package/admin/src/components/FiltersPicker/FiltersCard/init.js

@@ -0,0 +1,21 @@
+const init = (initialState, timestamps) => {
+  const [created_at, updated_at] = timestamps;
+
+  return initialState
+    .update('name', () => created_at)
+    .updateIn(['filtersForm'], object => {
+      return object.keySeq().reduce((acc, current) => {
+        if (current === 'created_at' && created_at !== 'created_at') {
+          return acc.set(created_at, object.get('created_at')).remove('created_at');
+        }
+
+        if (current === 'updated_at' && updated_at !== 'updated_at') {
+          return acc.set(updated_at, object.get('updated_at')).remove('updated_at');
+        }
+
+        return acc;
+      }, object);
+    });
+};
+
+export default init;

package/admin/src/components/FiltersPicker/FiltersCard/reducer.js

@@ -0,0 +1,47 @@
+import { fromJS } from 'immutable';
+import { dateToUtcTime } from 'strapi-helper-plugin';
+import moment from 'moment';
+
+import filtersForm from './utils/filtersForm';
+
+const initialState = fromJS({
+  name: 'created_at',
+  filter: '=',
+  value: dateToUtcTime(moment()),
+  filtersForm,
+});
+
+function reducer(state, action) {
+  switch (action.type) {
+    case 'ON_CHANGE': {
+      const { name, value, defaultValue } = action;
+
+      if (name === 'name') {
+        return state
+          .update(name, () => value)
+          .update('filter', () => state.getIn(['filtersForm', value, 'defaultFilter']))
+          .update(
+            'value',
+            () => defaultValue || state.getIn(['filtersForm', value, 'defaultValue'])
+          );
+      }
+
+      return state.update(name, () => value);
+    }
+    case 'RESET_FORM':
+      return initialState
+        .set(
+          'name',
+          state
+            .get('filtersForm')
+            .keySeq()
+            .first()
+        )
+        .update('filtersForm', () => state.get('filtersForm'));
+    default:
+      return state;
+  }
+}
+
+export default reducer;
+export { initialState };

package/admin/src/components/FiltersPicker/FiltersCard/utils/filtersForm.js

@@ -0,0 +1,27 @@
+import { dateToUtcTime } from 'strapi-helper-plugin';
+import moment from 'moment';
+
+const filtersForm = {
+  created_at: {
+    type: 'datetime',
+    defaultFilter: '=',
+    defaultValue: dateToUtcTime(moment()),
+  },
+  updated_at: {
+    type: 'datetime',
+    defaultFilter: '=',
+    defaultValue: dateToUtcTime(moment()),
+  },
+  size: {
+    type: 'integer',
+    defaultFilter: '=',
+    defaultValue: '0KB',
+  },
+  mime: {
+    type: 'enum',
+    defaultFilter: '_contains',
+    defaultValue: 'image',
+  },
+};
+
+export default filtersForm;

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { FilterIcon } from 'strapi-helper-plugin';
+import { Picker } from '@buffetjs/core';
+import FiltersCard from './FiltersCard';
+
+import formatFilter from './utils/formatFilter';
+
+const FiltersPicker = ({ onChange }) => {
+  const handleChange = ({ target: { value } }) => {
+    onChange({ target: { name: 'filters', value: formatFilter(value) } });
+  };
+
+  return (
+    <Picker
+      renderButtonContent={() => (
+        <>
+          <FilterIcon />
+          <FormattedMessage id="app.utils.filters" />
+        </>
+      )}
+      renderSectionContent={onToggle => (
+        <FiltersCard
+          onChange={e => {
+            handleChange(e);
+            onToggle();
+          }}
+        />
+      )}
+    />
+  );
+};
+
+FiltersPicker.defaultProps = {
+  onChange: () => {},
+};
+
+FiltersPicker.propTypes = {
+  onChange: PropTypes.func,
+};
+
+export default FiltersPicker;

package/admin/src/components/FiltersPicker/utils/formatFilter.js

@@ -0,0 +1,18 @@
+import moment from 'moment';
+import { unformatBytes } from '../../../utils';
+
+const formatFilter = filter => {
+  const { name, value } = filter;
+
+  if (value._isAMomentObject === true) {
+    return { ...filter, value: moment(value).format() };
+  }
+
+  if (name === 'size') {
+    return { ...filter, value: unformatBytes(value) };
+  }
+
+  return filter;
+};
+
+export default formatFilter;

package/admin/src/components/InfiniteLoadingIndicator/Button.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+const Button = styled.button`
+  margin-top: 8px;
+
+  &:active {
+    outline: 0;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  > svg {
+    margin-top: -1px;
+    margin-left: 10px;
+  }
+`;
+
+export default Button;

package/admin/src/components/InfiniteLoadingIndicator/Container.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  margin: auto;
+  padding-top: 32px;
+`;
+
+export default Container;

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

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import { themePropTypes } from 'strapi-helper-plugin';
+
+const Wrapper = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background-color: ${({ theme }) => theme.main.colors.black};
+`;
+
+Wrapper.propTypes = {
+  ...themePropTypes,
+};
+
+export default Wrapper;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ClearIcon } from 'strapi-helper-plugin';
+
+import LoadingIndicator from '../LoadingIndicator';
+import IntlText from '../IntlText';
+import Button from './Button';
+import Container from './Container';
+import Wrapper from './Wrapper';
+
+const InfiniteLoadingIndicator = ({ onClick }) => {
+  return (
+    <Wrapper>
+      <Container>
+        <LoadingIndicator />
+        <Button type="button" onClick={onClick}>
+          <IntlText
+            as="span"
+            fontSize="xs"
+            fontWeight="semiBold"
+            color="grey"
+            id="app.components.Button.cancel"
+          />
+          <ClearIcon />
+        </Button>
+      </Container>
+    </Wrapper>
+  );
+};
+
+InfiniteLoadingIndicator.defaultProps = {
+  onClick: () => {},
+};
+
+InfiniteLoadingIndicator.propTypes = {
+  onClick: PropTypes.func,
+};
+
+export default InfiniteLoadingIndicator;

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

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const Input = styled.input`
+  display: none;
+`;
+
+export default Input;

package/admin/src/components/InputFileModal/Label.js

@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { themePropTypes } from 'strapi-helper-plugin';
+
+const Label = styled.label`
+  position: relative;
+  height: 203px;
+  width: 100%;
+  margin-top: 36px;
+  margin-bottom: 18px;
+  padding-top: 46px;
+  text-align: center;
+  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  border: 2px dashed ${({ theme }) => theme.main.colors.darkGrey};
+  background-color: ${({ theme }) => theme.main.colors.lightGrey};
+
+  .dragzone {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  ${({ isDragging, theme }) =>
+    isDragging &&
+    `
+      background-color: ${theme.main.colors.lightestBlue};
+      border: 2px dashed ${theme.main.colors.darkBlue};
+      >svg {
+        >g {
+          fill: ${theme.main.colors.darkBlue};
+        }
+      }
+    `}
+`;
+
+Label.defaultProps = {
+  isDragging: false,
+};
+
+Label.propTypes = {
+  ...themePropTypes,
+  isDragging: PropTypes.bool,
+};
+
+export default Label;

package/admin/src/components/InputFileModal/P.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+const P = styled.p`
+  margin-top: 5px;
+  font-size: 13px;
+  font-weight: 500;
+
+  .bold {
+    font-weight: 700;
+  }
+
+  ${({ isDragging, theme }) => isDragging && `color: ${theme.main.colors.mediumBlue};`}
+`;
+
+export default P;

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

@@ -0,0 +1,73 @@
+import React, { createRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@buffetjs/core';
+import { useGlobalContext } from 'strapi-helper-plugin';
+import { getTrad } from '../../utils';
+import Cloud from '../../icons/Cloud';
+import Label from './Label';
+import Input from '../Input';
+import P from './P';
+
+const InputFileModal = ({ name, onChange }) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const { formatMessage } = useGlobalContext();
+  const ref = createRef();
+
+  const handleAllowDrop = e => e.preventDefault();
+
+  const handleChange = ({ target: { files } }) => {
+    onChange({ target: { name, value: files } });
+  };
+
+  const handleClick = () => {
+    ref.current.click();
+  };
+
+  const handleDragEnter = () => {
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = () => {
+    setIsDragging(false);
+  };
+
+  const handleDrop = e => {
+    e.preventDefault();
+
+    setIsDragging(false);
+    onChange({ target: { name, value: e.dataTransfer.files } });
+  };
+
+  return (
+    <Label
+      htmlFor={name}
+      isDragging={isDragging}
+      onDragOver={handleAllowDrop}
+      onDragEnter={handleDragEnter}
+      onDrop={handleDrop}
+    >
+      <Cloud />
+      <P isDragging={isDragging}>
+        <span className="bold">{formatMessage({ id: getTrad('input.label-bold') })}&nbsp;</span>
+        <span>{formatMessage({ id: getTrad('input.label-normal') })}</span>
+      </P>
+      <Button type="button" id="button" name="button" color="primary" onClick={handleClick}>
+        {formatMessage({ id: getTrad('input.button.label') })}
+      </Button>
+      <Input ref={ref} type="file" multiple name={name} onChange={handleChange} />
+      {isDragging && <div className="dragzone" onDragLeave={handleDragLeave} />}
+    </Label>
+  );
+};
+
+InputFileModal.defaultProps = {
+  name: 'files',
+  onChange: () => {},
+};
+
+InputFileModal.propTypes = {
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+export default InputFileModal;