Created Empty attributes view

2025-11-02 19:04:38 +00:00 · 2017-08-18 11:17:26 +02:00 · 2017-08-18 11:17:26 +02:00 · c7ded6ab7b
commit c7ded6ab7b
parent 96713f1cea
16 changed files with 271 additions and 5 deletions
--- a/packages/strapi-plugin-content-type-builder/admin/src/assets/images/background-empty-attributes.svg
+++ b/packages/strapi-plugin-content-type-builder/admin/src/assets/images/background-empty-attributes.svg
@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="805px" height="229px" viewBox="0 0 805 229" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Group</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="-5.68434189e-14" y="0" width="797" height="221" rx="2"></rect>
+        <filter x="-0.9%" y="-2.3%" width="101.8%" height="106.3%" filterUnits="objectBoundingBox" id="filter-3">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.890196078   0 0 0 0 0.91372549   0 0 0 0 0.952941176  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Pages" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Content-Type-Builder---Content-Type-view" transform="translate(-535.000000, -159.000000)">
+            <g id="Container">
+                <g id="Content">
+                    <g id="Group" transform="translate(539.000000, 161.000000)">
+                        <mask id="mask-2" fill="white">
+                            <use xlink:href="#path-1"></use>
+                        </mask>
+                        <g id="Background">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
+                            <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+                        </g>
+                        <g id="Background-image" opacity="0.5" mask="url(#mask-2)">
+                            <g transform="translate(75.000000, -12.000000)">
+                                <rect id="Rectangle-9" stroke="#E3E3E5" stroke-width="2" fill="none" x="91" y="99" width="8" height="8" rx="4"></rect>
+                                <rect id="Rectangle-9" stroke="#E3E3E5" stroke-width="2" fill="none" x="21" y="149" width="4" height="4" rx="2"></rect>
+                                <rect id="Rectangle-9" stroke="none" fill="#F0F0F3" fill-rule="evenodd" x="0" y="228" width="12" height="12" rx="5"></rect>
+                                <rect id="Rectangle-9" stroke="#E3E3E5" stroke-width="2" fill="none" x="141" y="179" width="10" height="10" rx="5"></rect>
+                                <rect id="Rectangle-9" stroke="#E3E3E5" stroke-width="2" fill="none" x="531" y="189" width="12" height="12" rx="6"></rect>
+                                <rect id="Rectangle-9" stroke="#E3E3E5" stroke-width="2" fill="none" x="641" y="129" width="5" height="5" rx="2.5"></rect>
+                                <rect id="Rectangle-9" stroke="#E3E3E5" stroke-width="2" fill="none" x="441" y="229" width="3" height="3" rx="1.5"></rect>
+                                <rect id="Rectangle-9" stroke="none" fill="#F0F0F3" fill-rule="evenodd" x="520" y="88" width="10" height="10" rx="5"></rect>
+                                <rect id="Rectangle-9" stroke="#E3E3E5" stroke-width="2" fill="none" x="431" y="19" width="4" height="4" rx="2"></rect>
+                                <rect id="Rectangle-9" stroke="none" fill="#F0F0F3" fill-rule="evenodd" x="220" y="208" width="9" height="9" rx="4.5"></rect>
+                                <g id="star" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(557.000000, 0.000000)">
+                                    <path d="M13.0016379,4.80529286 C13.0016379,4.91989063 12.933921,5.04490638 12.7984873,5.18034011 L9.96219251,7.94631356 L10.6341522,11.8530557 C10.6393612,11.8895186 10.6419656,11.9416085 10.6419656,12.0093254 C10.6419656,12.1187142 10.6146185,12.2111737 10.5599241,12.2867041 C10.5052297,12.3622344 10.4257926,12.3999996 10.3216128,12.3999996 C10.222642,12.3999996 10.1184622,12.3687457 10.0090734,12.3062378 L6.50081896,10.4622555 L2.9925645,12.3062378 C2.87796673,12.3687457 2.77378693,12.3999996 2.68002512,12.3999996 C2.57063634,12.3999996 2.48859476,12.3622344 2.43390037,12.2867041 C2.37920598,12.2111737 2.35185878,12.1187142 2.35185878,12.0093254 C2.35185878,11.9780715 2.35706777,11.9259816 2.36748575,11.8530557 L3.0394454,7.94631356 L0.195337108,5.18034011 C0.0651123693,5.03969739 0,4.91468164 0,4.80529286 C0,4.61256024 0.145851707,4.49275348 0.437555122,4.44587258 L4.35992425,3.87548822 L6.11795822,0.320352857 C6.21692903,0.106784286 6.34454927,0 6.50081896,0 C6.65708864,0 6.78470889,0.106784286 6.88367969,0.320352857 L8.64171366,3.87548822 L12.5640828,4.44587258 C12.8557862,4.49275348 13.0016379,4.61256024 13.0016379,4.80529286 Z" id="Shape" fill="#E3E3E5" fill-rule="nonzero"></path>
+                                </g>
+                                <g id="star" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(407.000000, 153.000000)">
+                                    <path d="M10,3.69591346 C10,3.78405449 9.94791667,3.88020833 9.84375,3.984375 L7.66225962,6.11177885 L8.17908654,9.11658654 C8.18309295,9.14463141 8.18509615,9.18469551 8.18509615,9.23677885 C8.18509615,9.32091346 8.1640625,9.39202724 8.12199519,9.45012019 C8.07992788,9.50821314 8.01883013,9.53725962 7.93870192,9.53725962 C7.86258013,9.53725962 7.78245192,9.51322115 7.69831731,9.46514423 L5,8.046875 L2.30168269,9.46514423 C2.21354167,9.51322115 2.13341346,9.53725962 2.06129808,9.53725962 C1.97716346,9.53725962 1.9140625,9.50821314 1.87199519,9.45012019 C1.82992788,9.39202724 1.80889423,9.32091346 1.80889423,9.23677885 C1.80889423,9.21274038 1.81290064,9.17267628 1.82091346,9.11658654 L2.33774038,6.11177885 L0.150240385,3.984375 C0.0500801282,3.87620192 0,3.78004808 0,3.69591346 C0,3.54767628 0.112179487,3.45552885 0.336538462,3.41947115 L3.35336538,2.98076923 L4.70552885,0.246394231 C4.78165064,0.0821314103 4.87980769,0 5,0 C5.12019231,0 5.21834936,0.0821314103 5.29447115,0.246394231 L6.64663462,2.98076923 L9.66346154,3.41947115 C9.88782051,3.45552885 10,3.54767628 10,3.69591346 Z" id="Shape" fill="#E3E3E5" fill-rule="nonzero"></path>
+                                </g>
+                                <g id="star" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(167.000000, 33.000000)">
+                                    <path d="M10,3.69591346 C10,3.78405449 9.94791667,3.88020833 9.84375,3.984375 L7.66225962,6.11177885 L8.17908654,9.11658654 C8.18309295,9.14463141 8.18509615,9.18469551 8.18509615,9.23677885 C8.18509615,9.32091346 8.1640625,9.39202724 8.12199519,9.45012019 C8.07992788,9.50821314 8.01883013,9.53725962 7.93870192,9.53725962 C7.86258013,9.53725962 7.78245192,9.51322115 7.69831731,9.46514423 L5,8.046875 L2.30168269,9.46514423 C2.21354167,9.51322115 2.13341346,9.53725962 2.06129808,9.53725962 C1.97716346,9.53725962 1.9140625,9.50821314 1.87199519,9.45012019 C1.82992788,9.39202724 1.80889423,9.32091346 1.80889423,9.23677885 C1.80889423,9.21274038 1.81290064,9.17267628 1.82091346,9.11658654 L2.33774038,6.11177885 L0.150240385,3.984375 C0.0500801282,3.87620192 0,3.78004808 0,3.69591346 C0,3.54767628 0.112179487,3.45552885 0.336538462,3.41947115 L3.35336538,2.98076923 L4.70552885,0.246394231 C4.78165064,0.0821314103 4.87980769,0 5,0 C5.12019231,0 5.21834936,0.0821314103 5.29447115,0.246394231 L6.64663462,2.98076923 L9.66346154,3.41947115 C9.88782051,3.45552885 10,3.54767628 10,3.69591346 Z" id="Shape" fill="#E3E3E5" fill-rule="nonzero"></path>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/ContentHeader/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/ContentHeader/index.js
@ -1,16 +1,41 @@
 import React from 'react';
+import { isEmpty, startCase } from 'lodash';
 import { FormattedMessage } from 'react-intl';
 import styles from './styles.scss';

+/* eslint-disable jsx-a11y/no-static-element-interactions */
 class ContentHeader extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  edit = () => {
+    console.log('edit');
+  }
+
+  renderContentHeader = () => {
+    const containerClass = this.props.noMargin ? styles.contentHeaderNoMargin : styles.contentHeader;
+    const editIcon = this.props.editIcon ?
+      <i className="fa fa-pencil" onClick={this.edit} role="button" />
+       : '';
+    return (
+      <div className={containerClass}>
+        <div className={`${styles.title} ${styles.flex}`}>
+          <span>{startCase(this.props.name)}</span>
+          {editIcon}
+        </div>
+        <div className={styles.subTitle}>{this.props.description}</div>
+      </div>
+    );
+  }
+
  render() {
    const containerClass = this.props.noMargin ? styles.contentHeaderNoMargin : styles.contentHeader;
+    const description = isEmpty(this.props.description) ? '' : <FormattedMessage {...{id: this.props.description}} />;
+
+    if (this.props.noI18n) return this.renderContentHeader();
    return (
      <div className={containerClass}>
        <div className={styles.title}>
          <FormattedMessage {...{id: this.props.name }} />
        </div>
-        <div className={styles.subTitle}><FormattedMessage {...{id: this.props.description}} /></div>
+        <div className={styles.subTitle}>{description}</div>
      </div>
    );
  }
@ -18,7 +43,9 @@ class ContentHeader extends React.Component { // eslint-disable-line react/prefe

 ContentHeader.propTypes = {
  description: React.PropTypes.string,
+  editIcon: React.PropTypes.bool,
  name: React.PropTypes.string,
+  noI18n: React.PropTypes.bool,
  noMargin: React.PropTypes.bool,
 };

--- a/packages/strapi-plugin-content-type-builder/admin/src/components/ContentHeader/styles.scss
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/ContentHeader/styles.scss
@ -1,6 +1,6 @@
 .contentHeader { /* stylelint-disable */
  position: relative;
-  margin: 2.4rem 4rem 3.3rem 4rem;
+  margin: 2.4rem 0rem 3.3rem 0rem;
  font-family: Lato;
 }

@ -16,6 +16,13 @@
  font-size: 2.4rem;
  line-height: 2.9rem;
  font-weight: 600;
+  > i {
+    margin-top: 1.2rem;
+    margin-left: 1rem;
+    font-size: 1.2rem;
+    color: rgba(16,22,34,0.35);
+    cursor: pointer;
+  }
 }

 .subTitle {
@ -24,3 +31,18 @@
  font-size: 1.3rem;
  line-height: 1.5rem;
 }
+
+.flex {
+  display: flex;
+  flex-direction: row;
+}
+
+.icoContainer {
+  // padding-top: .3rem;
+  font-size: 1.2rem;
+  color: rgba(16,22,34,0.35);;
+  > i {
+    margin-left: 1rem;
+  }
+  // color: #101622;
+}
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/EmptyAttributesView/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/EmptyAttributesView/index.js
@ -0,0 +1,42 @@
+/**
+*
+* EmptyAttributesView
+*
+*/
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import Button from 'components/Button';
+import styles from './styles.scss';
+
+class EmptyAttributesView extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <div className={styles.emptyAttributesView}>
+        <div>
+          <FormattedMessage {...{id: 'home.emptyAttributes.title'}}>
+            {(title) => <div className={styles.title}>{title}</div>}
+          </FormattedMessage>
+          <FormattedMessage {...{id: 'home.emptyAttributes.description'}}>
+            {(description) => <div className={styles.description}>{description}</div>}
+          </FormattedMessage>
+          <div className={styles.buttonContainer}>
+            <Button
+              onClick={this.props.handleClick}
+              buttonBackground={'primary'}
+              label={'button.attributes.add'}
+              addShape
+              handlei18n
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+EmptyAttributesView.propTypes = {
+  handleClick: React.PropTypes.func,
+};
+
+export default EmptyAttributesView;
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/EmptyAttributesView/styles.scss
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/EmptyAttributesView/styles.scss
@ -0,0 +1,33 @@
+.emptyAttributesView { /* stylelint-disable */
+  height: 22.1rem;
+  margin-top: -.1rem;
+  padding-top: 5.8rem;
+  background: #FFFFFF;
+  background-image: url('../../assets/images/background-empty-attributes.svg');
+  text-align: center;
+  font-size: 1.4rem;
+  font-family: Lato;
+}
+
+.title {
+  margin-bottom: 1.8rem;
+  font-size: 1.8rem;
+  line-height: 1.8rem;
+  font-weight: bold;
+}
+
+.description {
+  color: #333740;
+}
+
+.buttonContainer {
+  margin-top: 4.6rem;
+  > button {
+    padding-left: 1rem;
+    padding-right: 1.5rem;
+    font-size: 1.3rem;
+    > i {
+      margin-right: 1rem!important;
+    }
+  }
+}
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/EmptyAttributesView/tests/index.test.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/EmptyAttributesView/tests/index.test.js
@ -0,0 +1,11 @@
+// import EmptyAttributesView from '../index';
+
+import expect from 'expect';
+// import { shallow } from 'enzyme';
+// import React from 'react';
+
+describe('<EmptyAttributesView />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/List/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/List/index.js
@ -0,0 +1,20 @@
+/**
+*
+* List
+*
+*/
+
+import React from 'react';
+
+import styles from './styles.scss';
+
+class List extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <div className={styles.list}>
+      </div>
+    );
+  }
+}
+
+export default List;
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/List/styles.scss
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/List/styles.scss
@ -0,0 +1,3 @@
+.list { /* stylelint-disable */
+
+}
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/List/tests/index.test.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/List/tests/index.test.js
@ -0,0 +1,11 @@
+// import List from '../index';
+
+import expect from 'expect';
+// import { shallow } from 'enzyme';
+// import React from 'react';
+
+describe('<List />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/TableList/styles.scss
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/TableList/styles.scss
@ -33,6 +33,7 @@
      background-color: #F3F3F4;
    }
    > li:not(:first-child) {
+      margin-top: 0!important;
      position: relative;
      height: 5.4rem;
      line-height: 5.4rem;
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/App/actions.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/App/actions.js
@ -17,7 +17,9 @@ export function modelsFetchSucceeded(data) {
  const sections = [];

  forEach(data.models, (model) => {
-    sections.push({icon: model.icon, name: model.name});
+    // TODO uncomment if we use icon from the API
+    // sections.push({icon: model.icon, name: model.name});
+    sections.push({icon: 'fa-caret-square-o-right', name: model.name});
  });

  sections.push({ icon: 'fa-plus', name: 'button.contentType.add' })
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/index.js
@ -12,6 +12,8 @@ import { bindActionCreators } from 'redux';
 // Global selectors
 import { makeSelectMenu } from 'containers/App/selectors';

+import ContentHeader from 'components/ContentHeader';
+import EmptyAttributesView from 'components/EmptyAttributesView';
 import PluginLeftMenu from 'components/PluginLeftMenu';

 import { modelFetch } from './actions';
@ -24,6 +26,16 @@ export class ModelPage extends React.Component { // eslint-disable-line react/pr
    this.props.modelFetch(this.props.params.modelName);
  }

+  componentDidUpdate(prevProps) {
+    if (prevProps.params.modelName !== this.props.params.modelName) {
+      this.props.modelFetch(this.props.params.modelName);
+    }
+  }
+
+  handleClick = () => {
+    console.log('click');
+  }
+
  render() {
    return (
      <div className={styles.modelPage}>
@ -32,6 +44,19 @@ export class ModelPage extends React.Component { // eslint-disable-line react/pr
            <PluginLeftMenu
              sections={this.props.menu}
            />
+            <div className="col-md-9">
+              <div className={styles.componentsContainer}>
+                <ContentHeader
+                  name={this.props.modelPage.model.name}
+                  description={this.props.modelPage.model.description}
+                  noI18n
+                  editIcon
+                />
+                <EmptyAttributesView
+                  handleClick={this.handleClick}
+                />
+              </div>
+            </div>
          </div>
        </div>
      </div>
@ -56,6 +81,7 @@ function mapDispatchToProps(dispatch) {
 ModelPage.propTypes = {
  menu: React.PropTypes.array,
  modelFetch: React.PropTypes.func,
+  modelPage: React.PropTypes.object,
  params: React.PropTypes.object,
 };

--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/reducer.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/reducer.js
@ -18,7 +18,7 @@ function modelPageReducer(state = initialState, action) {
  switch (action.type) {
    case MODEL_FETCH_SUCCEEDED:
      return state
-        .set('model', Map(action.model));
+        .set('model', Map(action.model.model));
    default:
      return state;
  }
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/styles.scss
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/styles.scss
@ -1,3 +1,8 @@
 .modelPage { /* stylelint-disable */
-
+  min-height: calc(100vh - 6rem);
+  background: rgba(14,22,34,0.02);
+}
+
+.componentsContainer {
+  padding: 0 1.5rem 0 1.5rem;
 }
--- a/packages/strapi-plugin-content-type-builder/admin/src/translations/en.json
+++ b/packages/strapi-plugin-content-type-builder/admin/src/translations/en.json
@ -4,8 +4,13 @@
  "home.emptyContentType.title": "There is no Content Type Available",
  "home.emptyContentType.description": "Create your first Content Type to be able to retrieve data from your API.",

+  "home.emptyAttributes.title": "There is no fields yet",
+  "home.emptyAttributes.description": "Add your first field to your new Content Type",
+
  "button.contentType.create": "Create Content Type",
  "button.contentType.add": "Add Content Type",
+  "button.attributes.add": "Add New Field",
+
  "menu.section.contentTypeBuilder.name.plural": "Content Types",
  "menu.section.contentTypeBuilder.name.singular": "Content Type",
  "menu.section.documentation.name": "Documentation",
--- a/packages/strapi-plugin-content-type-builder/admin/src/translations/fr.json
+++ b/packages/strapi-plugin-content-type-builder/admin/src/translations/fr.json
@ -4,8 +4,12 @@
  "home.emptyContentType.title": "Il n'y a pas de model disponible",
  "home.emptyContentType.description": "Créez votre premier modèle...",

+  "home.emptyAttributes.title": "Il n'y a pas encore de champs",
+  "home.emptyAttributes.description": "Ajoutez votre premier champ a votre modèle",
+
  "button.contentType.create": "Créer un modèle",
  "button.contentType.add": "Ajouter un modèle",
+  "button.attributes.add": "Ajouter un champs",

  "menu.section.contentTypeBuilder.name.plural": "Modèles",
  "menu.section.contentTypeBuilder.name.singular": "Modèle",