Created filterpicker

packages/strapi-helper-plugin/lib/src/components/PluginHeaderTitle/index.js

@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react';
+import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { isEmpty, isFunction, isObject } from 'lodash';
@@ -13,7 +13,14 @@ import LoadingBar from '../LoadingBar';
 
 import styles from './styles.scss';
 
-function PluginHeaderTitle({ description, title, titleId, withDescriptionAnim, icon, onClickIcon }) {
+function PluginHeaderTitle({
+  description,
+  title,
+  titleId,
+  withDescriptionAnim,
+  icon,
+  onClickIcon,
+}) {
   const contentTitle = formatData(title);
   const contentDescription = formatData(description);
 
@@ -24,22 +31,34 @@ function PluginHeaderTitle({ description, title, titleId, withDescriptionAnim, i
           {contentTitle} 
         </h1>
         {icon && (
-          <i className={`${icon} ${styles.icon}`} id="editCTName" onClick={onClickIcon} role="button" />
+          <i
+            className={`${icon} ${styles.icon}`}
+            id="editCTName"
+            onClick={onClickIcon}
+            role="button"
+          />
         )}
       </div>
       {withDescriptionAnim ? (
         <LoadingBar />
       ) : (
-        <p className={styles.pluginHeaderTitleDescription}>{contentDescription}&nbsp;</p>
+        <p className={styles.pluginHeaderTitleDescription}>
+          {contentDescription}&nbsp;
+        </p>
       )}
     </div>
   );
 }
 
 const formatData = data => {
-
-  if (isObject(data)) {
-    return isEmpty(data.id) ? null : <FormattedMessage id={data.id} defaultMessage={data.id} values={data.values} />;
+  if (isObject(data) && !isEmpty(data.id)) {
+    return (
+      <FormattedMessage
+        id={data.id}
+        defaultMessage={data.id}
+        values={data.values}
+      />
+    );
   }
 
   if (isFunction(data)) {
@@ -81,4 +100,4 @@ PluginHeaderTitle.propTypes = {
   withDescriptionAnim: PropTypes.bool,
 };
 
-export default PluginHeaderTitle;
+export default memo(PluginHeaderTitle);

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

@@ -0,0 +1,51 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { capitalize } from 'lodash';
+import { Collapse } from 'reactstrap';
+import { FormattedMessage } from 'react-intl';
+import { PluginHeader } from 'strapi-helper-plugin';
+
+import Container from '../Container';
+import pluginId from '../../pluginId';
+
+function FilterPicker({ actions, isOpen, name }) {
+  const renderTitle = () => (
+    <FormattedMessage
+      id={`${pluginId}.components.FiltersPickWrapper.PluginHeader.title.filter`}
+    >
+      {message => (
+        <span>
+          {capitalize(name)}&nbsp;-&nbsp;
+          <span>{message}</span>
+        </span>
+      )}
+    </FormattedMessage>
+  );
+  return (
+    <Collapse isOpen={isOpen}>
+      <Container style={{ backgroundColor: 'white' }}>
+        <PluginHeader
+          actions={actions}
+          title={renderTitle}
+          description={{
+            id: `${pluginId}.components.FiltersPickWrapper.PluginHeader.description`,
+          }}
+        />
+      </Container>
+    </Collapse>
+  );
+}
+
+FilterPicker.defaultProps = {
+  actions: [],
+  isOpen: false,
+  name: '',
+};
+
+FilterPicker.propTypes = {
+  actions: PropTypes.array,
+  isOpen: PropTypes.bool,
+  name: PropTypes.string,
+};
+
+export default memo(FilterPicker);

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

@@ -18,6 +18,7 @@ import pluginId from '../../pluginId';
 import FilterLogo from '../../assets/images/icon_filter.png';
 
 import Container from '../../components/Container';
+import FilterPicker from '../../components/FilterPicker';
 import InputCheckbox from '../../components/InputCheckbox';
 import Search from '../../components/Search';
 
@@ -48,6 +49,7 @@ function ListView({
   strapi.useInjectReducer({ key: 'listView', reducer, pluginId });
   strapi.useInjectSaga({ key: 'listView', saga, pluginId });
   const [isLabelPickerOpen, setLabelPickerState] = useState(false);
+  const [isFilterPickerOpen, setFilterPickerState] = useState(false);
   const getLayoutSettingRef = useRef();
   getLayoutSettingRef.current = settingName =>
     get(layouts, [slug, 'settings', settingName], '');
@@ -74,6 +76,8 @@ function ListView({
 
   const toggleLabelPickerState = () =>
     setLabelPickerState(prevState => !prevState);
+  const toggleFilterPickerState = () =>
+    setFilterPickerState(prevState => !prevState);
 
   useEffect(() => {
     getData(slug, generateSearchParams());
@@ -127,26 +131,72 @@ function ListView({
       target: { name: `${slug}.${name}`, value: !value },
     });
   };
+  const filterPickerActions = [
+    {
+      label: `${pluginId}.components.FiltersPickWrapper.PluginHeader.actions.clearAll`,
+      kind: 'secondary',
+      onClick: () => {
+        toggleFilterPickerState();
+        // this.props.close();
+        // this.props.removeAllFilters();
+      },
+    },
+    {
+      label: `${pluginId}.components.FiltersPickWrapper.PluginHeader.actions.apply`,
+      kind: 'primary',
+      type: 'submit',
+      onClick: () => {
+        emitEvent('didFilterEntries');
+        toggleFilterPickerState();
+        // this.props.onSubmit(e);
+      },
+    },
+  ];
 
   return (
     <>
+      <FilterPicker
+        actions={filterPickerActions}
+        isOpen={isFilterPickerOpen}
+        name={slug}
+      />
       <Container>
-        <PluginHeader
-          actions={pluginHeaderActions}
-          description={{
-            id:
-              count > 1
-                ? `${pluginId}.containers.List.pluginHeaderDescription`
-                : `${pluginId}.containers.List.pluginHeaderDescription.singular`,
-            values: {
-              label: count,
-            },
-          }}
-          title={{
-            id: slug || 'Content Manager',
-          }}
-          withDescriptionAnim={isLoading}
-        />
+        {!isFilterPickerOpen && (
+          <PluginHeader
+            actions={pluginHeaderActions}
+            description={{
+              id:
+                count > 1
+                  ? `${pluginId}.containers.List.pluginHeaderDescription`
+                  : `${pluginId}.containers.List.pluginHeaderDescription.singular`,
+              values: {
+                label: count,
+              },
+            }}
+            title={{
+              id: slug || 'Content Manager',
+            }}
+            withDescriptionAnim={isLoading}
+          />
+        )}
+        {/* <StyledCollapse isOpen={!isFilterPickerOpen}>
+          <PluginHeader
+            actions={pluginHeaderActions}
+            description={{
+              id:
+                count > 1
+                  ? `${pluginId}.containers.List.pluginHeaderDescription`
+                  : `${pluginId}.containers.List.pluginHeaderDescription.singular`,
+              values: {
+                label: count,
+              },
+            }}
+            title={{
+              id: slug || 'Content Manager',
+            }}
+            withDescriptionAnim={isLoading}
+          />
+        </StyledCollapse> */}
         {getLayoutSettingRef.current('searchable') && (
           <Search
             changeParams={handleChangeParams}
@@ -158,7 +208,7 @@ function ListView({
         <Wrapper>
           <div className="row">
             <div className="col-10">
-              <AddFilterCta type="button">
+              <AddFilterCta type="button" onClick={toggleFilterPickerState}>
                 <Img src={FilterLogo} alt="filter_logo" />
                 <FormattedMessage
                   id={`${pluginId}.components.AddFilterCTA.add`}