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

package/admin/src/containers/ListView/Filter.js

@@ -0,0 +1,83 @@
+import React, { memo, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { get, toString } from 'lodash';
+import moment from 'moment';
+import { FilterButton } from 'strapi-helper-plugin';
+import { dateFormats, formatFiltersToQuery } from '../../utils';
+
+function Filter({
+  contentType,
+  filterName,
+  filters,
+  index,
+  metadatas,
+  name,
+  value,
+  toggleFilterPickerState,
+  isFilterPickerOpen,
+  setQuery,
+}) {
+  const attributeType = get(contentType, ['attributes', name, 'type'], 'string');
+  let type = attributeType;
+
+  if (attributeType === 'relation') {
+    type = get(contentType, ['metadatas', name, 'list', 'mainField', 'schema', 'type'], 'string');
+  }
+  let displayedValue = toString(value);
+
+  if (type.includes('date') || type.includes('timestamp')) {
+    const date = moment(value, moment.ISO_8601);
+
+    let format;
+
+    if (type === 'date' || type === 'timestamp') {
+      format = dateFormats.date;
+    } else {
+      format = dateFormats.datetime;
+    }
+
+    displayedValue = moment
+      .parseZone(date)
+      .utc()
+      .format(format);
+  }
+  const displayedName = name.split('.')[0];
+
+  const label = {
+    name: displayedName,
+    filter: filterName,
+    value: displayedValue,
+  };
+
+  const handleClick = useCallback(() => {
+    const updatedFilters = filters.slice().filter((_, i) => i !== index);
+
+    if (isFilterPickerOpen) {
+      toggleFilterPickerState();
+    }
+
+    setQuery({ page: 1, ...formatFiltersToQuery(updatedFilters, metadatas) });
+  }, [filters, index, isFilterPickerOpen, metadatas, setQuery, toggleFilterPickerState]);
+
+  return <FilterButton onClick={handleClick} label={label} type={type} />;
+}
+
+Filter.defaultProps = {
+  name: '',
+  value: '',
+};
+
+Filter.propTypes = {
+  contentType: PropTypes.shape({ attributes: PropTypes.object.isRequired }).isRequired,
+  filterName: PropTypes.string.isRequired,
+  filters: PropTypes.array.isRequired,
+  index: PropTypes.number.isRequired,
+  isFilterPickerOpen: PropTypes.bool.isRequired,
+  metadatas: PropTypes.object.isRequired,
+  name: PropTypes.string,
+  setQuery: PropTypes.func.isRequired,
+  toggleFilterPickerState: PropTypes.func.isRequired,
+  value: PropTypes.any,
+};
+
+export default memo(Filter);

package/admin/src/containers/ListView/Footer.js

@@ -0,0 +1,60 @@
+import React, { memo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+import { GlobalPagination, InputSelect, useGlobalContext } from 'strapi-helper-plugin';
+
+import { FooterWrapper, SelectWrapper, Label } from './components';
+
+function Footer({ count, onChange, params }) {
+  const { emitEvent } = useGlobalContext();
+  const _limit = parseInt(params.pageSize, 10);
+  const _page = parseInt(params.page, 10);
+
+  const handleChangePage = ({ target: { value } }) => {
+    onChange({ page: value });
+  };
+
+  const handleChangeLimit = ({ target: { value } }) => {
+    emitEvent('willChangeNumberOfEntriesPerPage');
+
+    onChange({ pageSize: value });
+  };
+
+  return (
+    <FooterWrapper className="row">
+      <div className="col-6">
+        <SelectWrapper>
+          <InputSelect
+            style={{ width: '75px', height: '32px', marginTop: '-1px' }}
+            name="_limit"
+            onChange={handleChangeLimit}
+            selectOptions={['10', '20', '50', '100']}
+            value={_limit}
+          />
+          <Label htmlFor="_limit">
+            <FormattedMessage id="components.PageFooter.select" />
+          </Label>
+        </SelectWrapper>
+      </div>
+      <div className="col-6">
+        <GlobalPagination
+          count={count}
+          onChangeParams={handleChangePage}
+          params={{
+            currentPage: _page,
+            _limit,
+            _page,
+          }}
+        />
+      </div>
+    </FooterWrapper>
+  );
+}
+
+Footer.propTypes = {
+  count: PropTypes.number.isRequired,
+  onChange: PropTypes.func.isRequired,
+  params: PropTypes.object.isRequired,
+};
+
+export default memo(Footer);

package/admin/src/containers/ListView/actions.js

@@ -0,0 +1,91 @@
+import {
+  GET_DATA,
+  GET_DATA_SUCCEEDED,
+  ON_CHANGE_BULK,
+  ON_CHANGE_BULK_SELECT_ALL,
+  ON_CHANGE_LIST_HEADERS,
+  ON_RESET_LIST_HEADERS,
+  ON_DELETE_DATA_ERROR,
+  ON_DELETE_DATA_SUCCEEDED,
+  ON_DELETE_SEVERAL_DATA_SUCCEEDED,
+  RESET_PROPS,
+  SET_LIST_LAYOUT,
+  SET_MODAL_LOADING_STATE,
+  TOGGLE_MODAL_DELETE,
+  TOGGLE_MODAL_DELETE_ALL,
+} from './constants';
+
+export const getData = () => ({ type: GET_DATA });
+
+export const getDataSucceeded = (pagination, data) => ({
+  type: GET_DATA_SUCCEEDED,
+  pagination,
+  data,
+});
+
+export function onChangeBulk({ target: { name } }) {
+  return {
+    type: ON_CHANGE_BULK,
+    name,
+  };
+}
+
+export function onChangeBulkSelectall() {
+  return {
+    type: ON_CHANGE_BULK_SELECT_ALL,
+  };
+}
+
+export function onDeleteDataError() {
+  return {
+    type: ON_DELETE_DATA_ERROR,
+  };
+}
+
+export function onDeleteDataSucceeded() {
+  return {
+    type: ON_DELETE_DATA_SUCCEEDED,
+  };
+}
+
+export function onDeleteSeveralDataSucceeded() {
+  return {
+    type: ON_DELETE_SEVERAL_DATA_SUCCEEDED,
+  };
+}
+
+export const onResetListHeaders = () => ({ type: ON_RESET_LIST_HEADERS });
+
+export function resetProps() {
+  return { type: RESET_PROPS };
+}
+
+export function setModalLoadingState() {
+  return {
+    type: SET_MODAL_LOADING_STATE,
+  };
+}
+
+export function toggleModalDeleteAll() {
+  return {
+    type: TOGGLE_MODAL_DELETE_ALL,
+  };
+}
+
+export function toggleModalDelete() {
+  return {
+    type: TOGGLE_MODAL_DELETE,
+  };
+}
+
+export const setLayout = contentType => {
+  const { layouts } = contentType;
+
+  return {
+    contentType,
+    displayedHeaders: layouts.list,
+    type: SET_LIST_LAYOUT,
+  };
+};
+
+export const onChangeListHeaders = target => ({ type: ON_CHANGE_LIST_HEADERS, target });

package/admin/src/containers/ListView/components.js

@@ -0,0 +1,138 @@
+import styled from 'styled-components';
+import { Button, FilterIcon as Filter } from 'strapi-helper-plugin';
+import RemoveIcon from '../../assets/images/icon-cross-blue.svg';
+
+const Wrapper = styled.div`
+  padding-top: 1px;
+`;
+
+const FilterIcon = styled(Filter)`
+  padding: 0 !important;
+  margin: auto !important;
+  > g {
+    stroke: #282b2c;
+  }
+`;
+
+const AddFilterCta = styled(Button)`
+  display: flex;
+  height: 30px;
+  margin-right: 10px;
+  padding: 0 10px;
+  text-align: center;
+  background-color: #ffffff;
+  border: 1px solid #e3e9f3;
+  border-radius: 2px;
+  line-height: 28px;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: Lato;
+  -webkit-font-smoothing: antialiased;
+  cursor: pointer;
+  &:hover {
+    background: #f7f8f8;
+  }
+  &:focus,
+  &:active {
+    outline: 0;
+  }
+  > span {
+    margin-left: 10px;
+  }
+`;
+
+const Img = styled.img`
+  height: 7px;
+  margin: auto;
+  margin-right: 0px;
+  font-size: 12px;
+`;
+
+const FooterWrapper = styled.div`
+  padding-top: 3rem;
+`;
+
+const Label = styled.label`
+  display: inline-block;
+  height: 32px;
+  margin-left: 10px;
+  line-height: 32px;
+  color: #787e8f;
+  font-size: 13px;
+  font-style: italic;
+`;
+
+const SelectWrapper = styled.div`
+  display: flex;
+`;
+
+const FilterWrapper = styled.div`
+  display: inline-block;
+  height: 30px;
+  margin-bottom: 6px;
+  margin-right: 10px;
+  padding: 0 10px;
+  background: rgba(0, 126, 255, 0.08);
+  border: 1px solid rgba(0, 126, 255, 0.24);
+  border-radius: 2px;
+  line-height: 28px;
+  color: #007eff;
+  font-size: 13px;
+
+  > span {
+    display: inline-block;
+    margin-top: -1px;
+  }
+
+  > span:nth-child(2) {
+    font-weight: 700;
+  }
+
+  > span:nth-child(3) {
+    cursor: pointer;
+  }
+
+  -webkit-font-smoothing: antialiased;
+`;
+
+const Separator = styled.span`
+  height: 30px;
+  margin-left: 10px;
+  margin-right: 10px;
+  line-height: 30px;
+  &:after {
+    content: '';
+    height: 15px;
+    border-left: 1px solid #007eff;
+    opacity: 0.1;
+  }
+`;
+
+const Remove = styled.span`
+  height: 28px;
+  cursor: pointer;
+  vertical-align: middle;
+
+  &:after {
+    display: inline-block;
+    content: '';
+    width: 8px;
+    height: 8px;
+    margin: auto;
+    margin-top: -3px;
+    background-image: url(${RemoveIcon});
+  }
+`;
+
+export {
+  AddFilterCta,
+  FilterIcon,
+  FooterWrapper,
+  Img,
+  Label,
+  SelectWrapper,
+  FilterWrapper,
+  Separator,
+  Remove,
+  Wrapper,
+};

package/admin/src/containers/ListView/constants.js

@@ -0,0 +1,16 @@
+export const GET_DATA = 'ContentManager/ListView/GET_DATA';
+export const GET_DATA_SUCCEEDED = 'ContentManager/ListView/GET_DATA_SUCCEEDED';
+export const ON_CHANGE_BULK = 'ContentManager/ListView/ON_CHANGE_BULK';
+export const ON_CHANGE_BULK_SELECT_ALL = 'ContentManager/ListView/ON_CHANGE_BULK_SELECT_ALL';
+export const ON_DELETE_DATA_SUCCEEDED = 'ContentManager/ListView/ON_DELETE_DATA_SUCCEEDED';
+export const ON_DELETE_DATA_ERROR = 'ContentManager/ListView/ON_DELETE_DATA_ERROR';
+export const ON_DELETE_SEVERAL_DATA_SUCCEEDED =
+  'ContentManager/ListView/ON_DELETE_SEVERAL_DATA_SUCCEEDED';
+export const RESET_PROPS = 'ContentManager/ListView/RESET_PROPS';
+export const TOGGLE_MODAL_DELETE_ALL = 'ContentManager/ListView/TOGGLE_MODAL_DELETE_ALL';
+export const TOGGLE_MODAL_DELETE = 'ContentManager/ListView/TOGGLE_MODAL_DELETE';
+export const SET_MODAL_LOADING_STATE = 'ContentManager/ListView/SET_MODAL_LOADING_STATE';
+
+export const ON_CHANGE_LIST_HEADERS = 'ContentManager/ListView/ON_CHANGE_LIST_HEADERS ';
+export const ON_RESET_LIST_HEADERS = 'ContentManager/ListView/ON_RESET_LIST_HEADERS ';
+export const SET_LIST_LAYOUT = 'ContentManager/ListView/SET_LIST_LAYOUT ';