ListView UI ip

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

@@ -3,7 +3,11 @@ import PropTypes from 'prop-types';
 import { NavLink } from 'react-router-dom';
 
 function LeftMenuLink({ children, to }) {
-  return <NavLink to={to}>{children}</NavLink>;
+  return (
+    <NavLink to={to}>
+      <p>{children}</p>
+    </NavLink>
+  );
 }
 
 LeftMenuLink.defaultProps = {

packages/strapi-helper-plugin/lib/src/components/LeftMenuList/Wrapper.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import colors from '../../assets/styles/colors';
 
 const Wrapper = styled.div`
-  margin-bottom: 25px;
+  margin-bottom: 24px;
   button {
     outline: 0;
   }

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

@@ -1,6 +1,6 @@
 /**
  *
- * StyledViewContainer
+ * ViewContainer
  *
  */
 
@@ -8,9 +8,9 @@ import styled from 'styled-components';
 
 import sizes from '../../assets/styles/sizes';
 
-const StyledViewContainer = styled.div`
+const ViewContainer = styled.div`
   min-height: calc(100vh - ${sizes.header.height});
-  .components-container {
+  .content {
     padding: 1.8rem 1.5rem;
     > div:not(:first-of-type):not(:last-of-type) {
       > div:first-of-type {
@@ -44,4 +44,4 @@ const StyledViewContainer = styled.div`
   }
 `;
 
-export default StyledViewContainer;
+export default ViewContainer;

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

@@ -101,7 +101,6 @@ export { default as PluginHeader } from './components/PluginHeader';
 export { default as PopUpWarning } from './components/PopUpWarning';
 export { default as SelectNav } from './components/SelectNav';
 export { default as SelectWrapper } from './components/SelectWrapper';
-// export { default as StyledLeftMenu } from './components/StyledLeftMenu';
 export { default as TrashButton } from './components/TrashButton';
 export { default as ViewContainer } from './components/ViewContainer';
 

packages/strapi-plugin-content-type-builder/admin/src/components/CustomLink/StyledCustomLink.js

@@ -10,12 +10,14 @@ import { colors } from 'strapi-helper-plugin';
 
 const StyledCustomLink = styled.div`
   padding-left: 15px;
-  padding-top: 10px;
+  padding-top: 9px;
   line-height: 0;
   p {
     color: ${colors.blue};
     font-size: 13px;
     font-weight: 500;
+    line-height: 18px;
+    text-align: left;
     i {
       margin-right: 5px;
     }

packages/strapi-plugin-content-type-builder/admin/src/components/ListButton/index.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { Button } from '@buffetjs/core';
+
+const ListHeaderButton = styled(Button)`
+  padding-left: 15px;
+  padding-right: 15px;
+`;
+
+const ListButton = styled(Button)`
+  background-color: #e6f0fb;
+  width: 100%;
+  height: 54px;
+  border-top: 1px solid #aed4fb;
+  color: #007eff;
+  font-weight: 600;
+  border-radius: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  &:hover {
+    box-shadow: none;
+  }
+  &:focus {
+    outline: 0;
+  }
+`;
+
+export { ListButton, ListHeaderButton };

packages/strapi-plugin-content-type-builder/admin/src/components/ListHeader/Title.js

@@ -0,0 +1,19 @@
+/**
+ *
+ * Title
+ *
+ */
+
+import styled from 'styled-components';
+import { colors } from 'strapi-helper-plugin';
+
+const Title = styled.p`
+  margin-bottom: 0;
+  color: ${colors.blueTxt};
+  font-family: 'Lato';
+  font-size: 1.8rem;
+  font-weight: bold;
+  line-height: 2.2rem;
+`;
+
+export default Title;

packages/strapi-plugin-content-type-builder/admin/src/components/ListHeader/Wrapper.js

@@ -0,0 +1,21 @@
+/**
+ *
+ * Wrapper
+ *
+ */
+
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: relative;
+  padding: 1.9rem 3rem 1.8rem 3rem;
+  background-color: white;
+  button {
+    position: absolute;
+    top: 1.7rem;
+    right: 3rem;
+    outline: 0;
+  }
+`;
+
+export default Wrapper;

packages/strapi-plugin-content-type-builder/admin/src/components/ListHeader/index.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { ListHeaderButton } from '../ListButton';
+import Wrapper from './Wrapper';
+import Title from './Title';
+
+function ListHeader({ actions, title }) {
+  return (
+    <Wrapper>
+      {actions.map(action => {
+        const { disabled, label, onClick } = action;
+
+        return (
+          <ListHeaderButton
+            key={label}
+            onClick={onClick}
+            disabled={disabled || false}
+            {...action}
+          >
+            {label}
+          </ListHeaderButton>
+        );
+      })}
+      <div className="list-header-title">
+        {title.map(item => {
+          return <Title key={item}>{item}&nbsp;</Title>;
+        })}
+      </div>
+    </Wrapper>
+  );
+}
+
+ListHeader.defaultProps = {
+  actions: [],
+  title: [],
+};
+
+ListHeader.propTypes = {
+  actions: PropTypes.arrayOf(
+    PropTypes.shape({
+      disabled: PropTypes.bool,
+      onClick: PropTypes.func,
+      title: PropTypes.string,
+    })
+  ),
+  title: PropTypes.arrayOf(PropTypes.string),
+};
+
+export default ListHeader;

packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js

@@ -356,7 +356,6 @@ const FormModal = () => {
     ? { paddingTop: '0.5rem', paddingBottom: '3rem' }
     : {};
 
-  console.log({ formModal: modifiedData });
   return (
     <Modal
       isOpen={isOpen}

packages/strapi-plugin-content-type-builder/admin/src/containers/LeftMenu/index.js

@@ -103,7 +103,7 @@ function LeftMenu() {
   return (
     <Wrapper className="col-md-3">
       {data.map(list => {
-        return <LeftMenuList {...list} key={list.name}></LeftMenuList>;
+        return <LeftMenuList {...list} key={list.name} />;
       })}
     </Wrapper>
   );

packages/strapi-plugin-content-type-builder/admin/src/containers/ListPage/index.js

@@ -1,8 +1,19 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import { get, has } from 'lodash';
-import { ViewContainer } from 'strapi-helper-plugin';
+import { get, has, isEqual } from 'lodash';
+import { Header } from '@buffetjs/custom';
+import {
+  List,
+  ListWrapper,
+  ViewContainer,
+  useGlobalContext,
+} from 'strapi-helper-plugin';
+
+import ListHeader from '../../components/ListHeader';
+import { ListButton } from '../../components/ListButton';
 import useDataManager from '../../hooks/useDataManager';
+import pluginId from '../../pluginId';
+
 import LeftMenu from '../LeftMenu';
 
 const ListPage = () => {
@@ -21,6 +32,7 @@ const ListPage = () => {
     isInContentTypeView,
     removeAttribute,
   } = useDataManager();
+  const { formatMessage } = useGlobalContext();
   const { push } = useHistory();
   const firstMainDataPath = isInContentTypeView ? 'contentType' : 'component';
   const mainDataTypeAttributesPath = [
@@ -30,6 +42,8 @@ const ListPage = () => {
   ];
 
   const attributes = get(modifiedData, mainDataTypeAttributesPath, {});
+  const attributesLength = Object.keys(attributes).length;
+
   const currentDataName = get(
     initialData,
     [firstMainDataPath, 'schema', 'name'],
@@ -114,15 +128,98 @@ const ListPage = () => {
     });
   };
 
+  const getDescription = () => {
+    const description = get(
+      modifiedData,
+      [firstMainDataPath, 'schema', 'description'],
+      null
+    );
+
+    return description
+      ? description
+      : formatMessage({
+          id: `${pluginId}.modelPage.contentHeader.emptyDescription.description`,
+        });
+  };
+
+  const getActions = () => {
+    // const handleSubmit = () =>
+    //   this.isUpdatingTempFeature()
+    //     ? submitTempGroup(newGroup, this.context)
+    //     : submitGroup(
+    //         featureName,
+    //         get(modifiedDataGroup, featureName),
+    //         Object.assign(this.context, {
+    //           history: this.props.history,
+    //         }),
+    //         this.getSource()
+    //       );
+
+    // const handleCancel = resetEditExistingGroup(this.getFeatureName());
+
+    return [
+      {
+        color: 'cancel',
+        onClick: () => {},
+        title: formatMessage({
+          id: `${pluginId}.form.button.cancel`,
+        }),
+        type: 'button',
+        disabled: isEqual(modifiedData, initialData) ? true : false,
+      },
+      {
+        color: 'success',
+        onClick: () => {},
+        title: formatMessage({
+          id: `${pluginId}.form.button.save`,
+        }),
+        type: 'submit',
+        disabled: isEqual(modifiedData, initialData) ? true : false,
+      },
+    ];
+  };
+
+  const headerProps = {
+    actions: getActions(),
+    title: {
+      label: get(modifiedData, [firstMainDataPath, 'schema', 'name']),
+    },
+    content: getDescription(),
+  };
+
+  const listTitle = [
+    formatMessage(
+      {
+        id: `${pluginId}.table.attributes.title.${
+          attributesLength > 1 ? 'plural' : 'singular'
+        }`,
+      },
+      { number: attributesLength }
+    ),
+  ];
+
+  const addButtonProps = {
+    icon: true,
+    color: 'primary',
+    label: formatMessage({ id: `${pluginId}.button.attributes.add.another` }),
+    onClick: () => handleClickAddAttributeMainData(),
+  };
+
+  const listActions = [{ ...addButtonProps }];
+
   return (
     <ViewContainer>
       <div className="container-fluid">
         <div className="row">
           <LeftMenu />
-          <div className="col-md-9">
-            <button type="button" onClick={handleClickAddAttributeMainData}>
-              Add field
-            </button>
+          <div className="col-md-9 content">
+            <Header {...headerProps} />
+
+            <ListWrapper>
+              <ListHeader actions={listActions} title={listTitle} />
+              <List></List>
+              <ListButton {...addButtonProps}></ListButton>
+            </ListWrapper>
 
             {/* REALLY TEMPORARY SINCE IT DOESN T SUPPORT ANY NESTING COMPONENT*/}
             <ul>