Created fields picker

Signed-off-by: soupette <cyril.lpz@gmail.com>

packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/index.js

@@ -1,3 +1,5 @@
+// TODO delete this file
+
 import React, { memo, useCallback, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { ButtonDropdown } from 'reactstrap';

packages/strapi-plugin-content-manager/admin/src/components/InputCheckbox/index.js

@@ -3,6 +3,7 @@
  * InputCheckbox
  */
 
+// TODO delete this file
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { Div, Label } from './components';

packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/ConfigureLink/StyledLink.js

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+const StyledLink = styled(Link)`
+  display: block;
+  width: 100%;
+
+  text-decoration: none;
+  color: #333740;
+  font-size: 13px;
+  svg {
+    margin-right: 10px;
+    vertical-align: middle;
+  }
+  &:hover {
+    text-decoration: none;
+    span {
+      color: #007eff;
+    }
+    svg {
+      g {
+        fill: #007eff;
+      }
+    }
+  }
+`;
+
+export default StyledLink;

packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/ConfigureLink/Wrapper.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  padding: 10px 15px;
+  border-bottom: 1px solid rgb(247, 248, 248);
+`;
+
+export default Wrapper;

packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/ConfigureLink/index.js

@@ -0,0 +1,29 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { LayoutIcon, useGlobalContext } from 'strapi-helper-plugin';
+import { FormattedMessage } from 'react-intl';
+import Link from './StyledLink';
+import Wrapper from './Wrapper';
+
+const ConfigureLink = ({ slug }) => {
+  const { emitEvent } = useGlobalContext();
+
+  const handleClick = () => {
+    emitEvent('willEditListLayout');
+  };
+
+  return (
+    <Wrapper>
+      <Link to={`${slug}/configurations/list`} onClick={handleClick}>
+        <LayoutIcon />
+        <FormattedMessage id="app.links.configure-view" />
+      </Link>
+    </Wrapper>
+  );
+};
+
+ConfigureLink.propTypes = {
+  slug: PropTypes.string.isRequired,
+};
+
+export default memo(ConfigureLink);

packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Field/Wrapper.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.li`
+  padding: 0 14px;
+  height: 36px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  &:hover {
+    cursor: pointer;
+    background-color: ${({ theme }) => theme.main.colors.mediumGrey};
+  }
+`;
+
+export default Wrapper;

packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Field/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Checkbox } from '@buffetjs/core';
+import Wrapper from './Wrapper';
+
+const Field = ({ name, onChange, value }) => {
+  const handleChange = ({ target: { name, value } }) => {
+    onChange({ name, value: !value });
+  };
+
+  return (
+    <Wrapper>
+      <Checkbox name={name} message={name} onChange={handleChange} value={value} />
+    </Wrapper>
+  );
+};
+
+Field.propTypes = {
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.bool.isRequired,
+};
+
+export default Field;

packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Fields/Wrapper.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from 'styled-components';
+import { themePropTypes } from 'strapi-helper-plugin';
+import { Text } from '@buffetjs/core';
+
+const Wrapper = styled(props => <Text as="ul" fontSize="md" {...props} />)`
+  margin-bottom: 0;
+  padding: 9px 0 0 0;
+  min-width: 228px;
+  list-style-type: none;
+  background-color: ${({ theme }) => theme.main.colors.white};
+`;
+
+Wrapper.propTypes = {
+  ...themePropTypes,
+};
+
+export default Wrapper;

packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Fields/index.js

@@ -0,0 +1,29 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import Field from '../Field';
+import Wrapper from './Wrapper';
+
+const Fields = ({ displayedHeaders, items, onChange }) => {
+  console.log({ displayedHeaders, items });
+
+  const getInputValue = useCallback(
+    headerName => displayedHeaders.findIndex(({ name }) => name === headerName) !== -1,
+    [displayedHeaders]
+  );
+
+  return (
+    <Wrapper>
+      {items.map(header => (
+        <Field key={header} name={header} onChange={onChange} value={getInputValue(header)} />
+      ))}
+    </Wrapper>
+  );
+};
+
+Fields.propTypes = {
+  displayedHeaders: PropTypes.array.isRequired,
+  items: PropTypes.array.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default Fields;

packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Header/Reset.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Text } from '@buffetjs/core';
+
+const Reset = styled(Text)`
+  cursor: pointer;
+`;
+
+export default Reset;

packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Header/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Flex, Padded, Text } from '@buffetjs/core';
+import { BaselineAlignement, useGlobalContext } from 'strapi-helper-plugin';
+import { getTrad } from '../../../../utils';
+import Reset from './Reset';
+
+const Header = ({ onClick, onToggle }) => {
+  const { emitEvent } = useGlobalContext();
+
+  const handleClick = () => {
+    onClick();
+    onToggle();
+
+    emitEvent('willChangeListFieldsSettings');
+  };
+
+  return (
+    <BaselineAlignement top size="19px">
+      <Padded left right size="xs">
+        <Padded left right size="sm">
+          <Flex justifyContent="space-between">
+            <Text fontWeight="bold">
+              <FormattedMessage id={getTrad('containers.ListPage.displayedFields')} />
+            </Text>
+            <Reset color="mediumBlue" cursor="pointer" onClick={handleClick}>
+              <FormattedMessage id={getTrad('containers.Edit.reset')} />
+            </Reset>
+          </Flex>
+        </Padded>
+      </Padded>
+    </BaselineAlignement>
+  );
+};
+
+Header.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  onToggle: PropTypes.func.isRequired,
+};
+
+export default Header;

packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Wrapper.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  display: flex;
+  margin-bottom: 6px;
+  justify-content: flex-end;
+  /* TODO: temporary until update in buffet.js */
+  > div {
+    > div {
+      left: auto;
+      right: 0 !important;
+    }
+  }
+`;
+
+export default Wrapper;

packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/index.js

@@ -0,0 +1,45 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { Flex, Padded, Picker } from '@buffetjs/core';
+import { Carret } from '@buffetjs/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Fields from './Fields';
+import Header from './Header';
+import Wrapper from './Wrapper';
+import ConfigureLink from './ConfigureLink';
+
+const FieldPicker = ({ displayedHeaders, items, onChange, onClickReset, slug }) => {
+  return (
+    <Wrapper>
+      <Picker
+        renderButtonContent={isOpen => (
+          <Flex>
+            <div>
+              <FontAwesomeIcon icon="cog" style={{ marginRighte: 10 }} />
+            </div>
+            <Padded left size="sm">
+              <Carret fill={isOpen ? '#007eff' : '#292b2c'} />
+            </Padded>
+          </Flex>
+        )}
+        renderSectionContent={onToggle => (
+          <>
+            <ConfigureLink slug={slug} />
+            <Header onClick={onClickReset} onToggle={onToggle} />
+            <Fields displayedHeaders={displayedHeaders} items={items} onChange={onChange} />
+          </>
+        )}
+      />
+    </Wrapper>
+  );
+};
+
+FieldPicker.propTypes = {
+  displayedHeaders: PropTypes.array.isRequired,
+  items: PropTypes.array.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onClickReset: PropTypes.func.isRequired,
+  slug: PropTypes.string.isRequired,
+};
+
+export default memo(FieldPicker);

packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js

@@ -24,13 +24,14 @@ import {
   getRequestUrl,
   getTrad,
 } from '../../utils';
-import DisplayedFieldsDropdown from '../../components/DisplayedFieldsDropdown';
+// import DisplayedFieldsDropdown from '../../components/DisplayedFieldsDropdown';
 import Container from '../../components/Container';
 import CustomTable from '../../components/CustomTable';
 import FilterPicker from '../../components/FilterPicker';
 import Search from '../../components/Search';
 import ListViewProvider from '../ListViewProvider';
 import { AddFilterCta, FilterIcon, Wrapper } from './components';
+import FieldPicker from './FieldPicker';
 import Filter from './Filter';
 import Footer from './Footer';
 import {
@@ -421,13 +422,20 @@ function ListView({
                 </div>
                 <div className="col-2">
                   <CheckPermissions permissions={pluginPermissions.collectionTypesConfigurations}>
-                    <DisplayedFieldsDropdown
+                    <FieldPicker
                       displayedHeaders={displayedHeaders}
                       items={allAllowedHeaders}
                       onChange={handleChangeListLabels}
                       onClickReset={onResetListHeaders}
                       slug={slug}
                     />
+                    {/* <DisplayedFieldsDropdown
+                      displayedHeaders={displayedHeaders}
+                      items={allAllowedHeaders}
+                      onChange={handleChangeListLabels}
+                      onClickReset={onResetListHeaders}
+                      slug={slug}
+                    /> */}
                   </CheckPermissions>
                 </div>
               </div>