@akemona-org/strapi-admin 3.7.0

package/admin/src/components/Users/Filter/index.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Option, Text } from '@buffetjs/core';
+
+const Filter = ({ displayName, filter, name, onClick, value }) => {
+  const { formatMessage } = useIntl();
+  const label = (
+    <>
+      <Text color="mediumBlue" as="span">
+        {displayName}
+      </Text>
+      <Text as="span" color="mediumBlue" fontWeight="bold">
+        &nbsp;{formatMessage({ id: `components.FilterOptions.FILTER_TYPES.${filter}` })}&nbsp;
+      </Text>
+      <Text as="span" color="mediumBlue">
+        {value}
+      </Text>
+    </>
+  );
+
+  const handleClick = () => {
+    onClick({ target: { name, value } });
+  };
+
+  return <Option label={label} margin="0 10px 6px 0" onClick={handleClick} />;
+};
+
+Filter.defaultProps = {
+  onClick: () => {},
+};
+
+Filter.propTypes = {
+  filter: PropTypes.string.isRequired,
+  displayName: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  value: PropTypes.string.isRequired,
+};
+
+export default Filter;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { FilterIcon } from 'strapi-helper-plugin';
+
+const Button = () => {
+  return (
+    <>
+      <FilterIcon />
+      <FormattedMessage id="app.utils.filters" />
+    </>
+  );
+};
+
+export default Button;

package/admin/src/components/Users/FilterPicker/Card/Input.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { InputText, Select, Toggle } from '@buffetjs/core';
+import { formatInputValue } from './utils';
+
+const getInputType = type => {
+  switch (type) {
+    case 'toggle':
+      return Toggle;
+    case 'booleanSelect':
+      return Select;
+    default:
+      return InputText;
+  }
+};
+
+function Input({ onChange, type, ...rest }) {
+  const Component = getInputType(type);
+  const handleChange = ({ target: { name, value } }) => {
+    onChange({ target: { name, value: formatInputValue(type, value) } });
+  };
+
+  return <Component onChange={handleChange} {...rest} autoComplete="off" />;
+}
+
+Input.defaultProps = {
+  onChange: () => {},
+};
+
+Input.propTypes = {
+  onChange: PropTypes.func,
+  type: PropTypes.string.isRequired,
+};
+
+export default Input;

package/admin/src/components/Users/FilterPicker/Card/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/Users/FilterPicker/Card/index.js

@@ -0,0 +1,91 @@
+import React, { useReducer } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Select, Padded } from '@buffetjs/core';
+import Button from '../../../FullWidthButton';
+import { form, getInputValue } from './utils';
+import { initialState, reducer } from './reducer';
+import init from './init';
+import Input from './Input';
+import Wrapper from './Wrapper';
+
+const Card = ({ onChange }) => {
+  const [
+    {
+      modifiedData: { name, filter, value },
+    },
+    dispatch,
+  ] = useReducer(reducer, initialState, init);
+
+  const handleChangeName = ({ target: { value } }) => {
+    dispatch({
+      type: 'ON_CHANGE_NAME',
+      value,
+    });
+  };
+
+  const handleChange = ({ target: { name, value } }) => {
+    dispatch({
+      type: 'ON_CHANGE',
+      keys: name,
+      value,
+    });
+  };
+
+  const renderFiltersOptions = () => {
+    return form[name].allowedFilters.map(filter => (
+      <FormattedMessage id={filter.id} key={filter.id}>
+        {msg => <option value={filter.value}>{msg}</option>}
+      </FormattedMessage>
+    ));
+  };
+
+  const handleSubmit = () => {
+    onChange({ name, filter, value });
+
+    dispatch({
+      type: 'RESET_FORM',
+    });
+  };
+
+  return (
+    <Wrapper>
+      <Padded bottom size="11px">
+        <Select name="name" onChange={handleChangeName} options={Object.keys(form)} value={name} />
+      </Padded>
+      <Padded bottom size="11px">
+        <Select
+          onChange={handleChange}
+          options={renderFiltersOptions()}
+          name="filter"
+          value={filter}
+        />
+      </Padded>
+      <Padded bottom size="11px">
+        <Input
+          onChange={handleChange}
+          name="value"
+          type={form[name].type}
+          value={getInputValue(form[name].type, value)}
+          options={[
+            { label: 'true', value: 'true' },
+            { label: 'false', value: 'false' },
+          ]}
+        />
+      </Padded>
+      <Button icon onClick={handleSubmit} type="button">
+        <FormattedMessage id="app.utils.add-filter" />
+      </Button>
+    </Wrapper>
+  );
+};
+
+Card.defaultProps = {
+  onChange: () => {},
+};
+
+Card.propTypes = {
+  onChange: PropTypes.func,
+};
+
+export default Card;

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

@@ -0,0 +1,5 @@
+const init = initialState => {
+  return initialState;
+};
+
+export default init;

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

@@ -0,0 +1,39 @@
+/* eslint-disable consistent-return */
+import produce from 'immer';
+import { get, set } from 'lodash';
+import form from './utils/form';
+
+const initialState = {
+  modifiedData: {
+    name: 'firstname',
+    filter: '',
+    value: '',
+  },
+};
+
+const reducer = (state, action) =>
+  produce(state, draftState => {
+    switch (action.type) {
+      case 'ON_CHANGE': {
+        set(draftState, ['modifiedData', ...action.keys.split('.')], action.value);
+        break;
+      }
+      case 'ON_CHANGE_NAME': {
+        // Change the name
+        set(draftState, ['modifiedData', 'name'], action.value);
+        // Reset the default filter
+        set(draftState, ['modifiedData', 'filter'], '');
+        // Reset the default value
+        const defaultValue = get(form, [action.value, 'defaultValue'], '');
+        set(draftState, ['modifiedData', 'value'], defaultValue);
+        break;
+      }
+      case 'RESET_FORM': {
+        return initialState;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export { initialState, reducer };

package/admin/src/components/Users/FilterPicker/Card/utils/form.js

@@ -0,0 +1,57 @@
+const textFilters = [
+  {
+    id: 'components.FilterOptions.FILTER_TYPES.=',
+    value: '',
+  },
+  {
+    id: 'components.FilterOptions.FILTER_TYPES._ne',
+    value: '_ne',
+  },
+  {
+    id: 'components.FilterOptions.FILTER_TYPES._contains',
+    value: '_contains',
+  },
+  {
+    id: 'components.FilterOptions.FILTER_TYPES._containss',
+    value: '_containss',
+  },
+];
+
+const form = {
+  firstname: {
+    type: 'text',
+    defaultValue: '',
+    allowedFilters: textFilters,
+  },
+  lastname: {
+    type: 'text',
+    defaultValue: '',
+    allowedFilters: textFilters,
+  },
+  email: {
+    type: 'email',
+    defaultValue: '',
+    allowedFilters: textFilters,
+  },
+  username: {
+    type: 'text',
+    defaultValue: '',
+    allowedFilters: textFilters,
+  },
+  isActive: {
+    type: 'booleanSelect',
+    defaultValue: true,
+    allowedFilters: [
+      {
+        id: 'components.FilterOptions.FILTER_TYPES.=',
+        value: '=',
+      },
+      {
+        id: 'components.FilterOptions.FILTER_TYPES._ne',
+        value: '_ne',
+      },
+    ],
+  },
+};
+
+export default form;

package/admin/src/components/Users/FilterPicker/Card/utils/formatInputValue.js

@@ -0,0 +1,9 @@
+const getInputValue = (type, value) => {
+  if (type === 'booleanSelect') {
+    return value === 'true';
+  }
+
+  return value;
+};
+
+export default getInputValue;

package/admin/src/components/Users/FilterPicker/Card/utils/getInputValue.js

@@ -0,0 +1,9 @@
+const getInputValue = (type, value) => {
+  if (type === 'booleanSelect') {
+    return value.toString();
+  }
+
+  return value;
+};
+
+export default getInputValue;

package/admin/src/components/Users/FilterPicker/Card/utils/index.js

@@ -0,0 +1,3 @@
+export { default as form } from './form';
+export { default as formatInputValue } from './formatInputValue';
+export { default as getInputValue } from './getInputValue';

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Picker } from '@buffetjs/core';
+
+import Button from './Button';
+import Card from './Card';
+
+const FilterPicker = ({ onChange }) => {
+  return (
+    <Picker
+      renderButtonContent={Button}
+      renderSectionContent={onToggle => (
+        <Card
+          onChange={({ value, ...rest }) => {
+            if (value !== '') {
+              onChange({ ...rest, value });
+            }
+
+            onToggle();
+          }}
+        />
+      )}
+    />
+  );
+};
+
+FilterPicker.defaultProps = {
+  onChange: () => {},
+};
+
+FilterPicker.propTypes = {
+  onChange: PropTypes.func,
+};
+
+export default FilterPicker;

package/admin/src/components/Users/Footer/Wrapper.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  padding: 12px 10px;
+`;
+
+export default Wrapper;

package/admin/src/components/Users/Footer/index.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { PageFooter } from 'strapi-helper-plugin';
+import { Padded } from '@buffetjs/core';
+import Wrapper from './Wrapper';
+
+const Footer = ({ count, onChange, params }) => {
+  return (
+    <Wrapper>
+      <Padded left right size="xs">
+        <PageFooter
+          context={{ emitEvent: () => {} }}
+          count={count}
+          onChangeParams={onChange}
+          params={params}
+        />
+      </Padded>
+    </Wrapper>
+  );
+};
+
+Footer.defaultProps = {
+  count: 0,
+  onChange: () => {},
+  params: {
+    _limit: 10,
+    _page: 1,
+  },
+};
+
+Footer.propTypes = {
+  count: PropTypes.number,
+  onChange: PropTypes.func,
+  params: PropTypes.shape({
+    _limit: PropTypes.number,
+    _page: PropTypes.number,
+  }),
+};
+
+export default Footer;

package/admin/src/components/Users/LinkNotification/Envelope.js

@@ -0,0 +1,20 @@
+/* eslint-disable jsx-a11y/accessible-emoji */
+import React from 'react';
+
+const Envelope = () => (
+  <svg width="24" height="17" xmlns="http://www.w3.org/2000/svg">
+    <text
+      transform="translate(-23 -9)"
+      fill="#4B515A"
+      fillRule="evenodd"
+      fontSize="24"
+      fontFamily="AppleColorEmoji, Apple Color Emoji"
+    >
+      <tspan x="23" y="28">
+        ✉️
+      </tspan>
+    </text>
+  </svg>
+);
+
+export default Envelope;

package/admin/src/components/Users/LinkNotification/IconWrapper.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { Flex } from '@buffetjs/core';
+
+const IconWrapper = styled(Flex)`
+  height: 100%;
+  margin-right: 18px;
+  transform: rotate(-20deg);
+`;
+
+IconWrapper.defaultProps = {
+  flexDirection: 'column',
+  justifyContent: 'center',
+};
+
+export default IconWrapper;

package/admin/src/components/Users/LinkNotification/Wrapper.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  height: 68px;
+  width: 100%;
+  display: flex;
+  margin-bottom: 4px;
+  &:before {
+    content: '';
+    width: 5px;
+    height: 100%;
+    margin-right: 16px;
+    background-color: #6dbb1a;
+    border-top-left-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+    border-bottom-left-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  }
+  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+
+  .icon-duplicate {
+    margin-left: 10px;
+    cursor: pointer;
+  }
+`;
+
+export default Wrapper;

package/admin/src/components/Users/LinkNotification/index.js

@@ -0,0 +1,47 @@
+// This component is a work in progress
+// It's made to be used when the users API is ready
+import React from 'react';
+import { Flex, Text } from '@buffetjs/core';
+import { Duplicate } from '@buffetjs/icons';
+import PropTypes from 'prop-types';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import IconWrapper from './IconWrapper';
+import Envelope from './Envelope';
+import Wrapper from './Wrapper';
+
+const LinkNotification = ({ target, children }) => {
+  const handleCopy = () => {
+    strapi.notification.toggle({ type: 'info', message: { id: 'notification.link-copied' } });
+  };
+
+  return (
+    <Wrapper>
+      <IconWrapper>
+        <Envelope />
+      </IconWrapper>
+      <Flex flexDirection="column" justifyContent="center">
+        <Text fontWeight="semiBold" color="black" fontSize="md" lineHeight="18px">
+          {target}
+          <CopyToClipboard onCopy={handleCopy} text={target}>
+            <Duplicate fill="#8B91A0" className="icon-duplicate" />
+          </CopyToClipboard>
+        </Text>
+        <Text fontWeight="regular" color="grey" fontSize="sm" lineHeight="18px">
+          {children}
+        </Text>
+      </Flex>
+    </Wrapper>
+  );
+};
+
+LinkNotification.defaultProps = {
+  target: '',
+  children: '',
+};
+
+LinkNotification.propTypes = {
+  target: PropTypes.string,
+  children: PropTypes.string,
+};
+
+export default LinkNotification;

package/admin/src/components/Users/List/ActiveStatus.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+const ActiveStatus = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:before {
+    content: '';
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    margin-bottom: 2px;
+    margin-right: 10px;
+    border-radius: 50%;
+    background-color: ${({ isActive }) => (isActive ? '#38cd29' : '#f64d0a')};
+  }
+`;
+
+export default ActiveStatus;

package/admin/src/components/Users/List/Wrapper.js

@@ -0,0 +1,34 @@
+// TODO: this component is used to provide a class to the Table component from buffet in order to reset the style
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  .table-wrapper {
+    table {
+      table-layout: fixed;
+      tbody {
+        tr {
+          height: ${({ withHigherHeight }) => (withHigherHeight ? '108px' : '54px')};
+          border-top: 0;
+        }
+        td {
+          height: ${({ withHigherHeight }) => (withHigherHeight ? '108px' : '53px')};
+          line-height: 1.8rem;
+          border-collapse: collapse;
+          border-top: 1px solid #f1f1f2 !important;
+        }
+      }
+      thead {
+        height: 43px;
+        tr,
+        td {
+          height: 43px;
+        }
+      }
+      p {
+        margin: 0;
+      }
+    }
+  }
+`;
+
+export default Wrapper;