Merge pull request #337 from ezsystems/ezp-24824_subitems

EZP-24824: As an editor, I want to be able to see and browse the subitems of a Location.

Resources/config/css.yml

@@ -26,6 +26,7 @@ system:
                 - 'bundles/ezplatformui/css/views/loginform.css'
                 - 'bundles/ezplatformui/css/views/contentedit.css'
                 - 'bundles/ezplatformui/css/views/locationview.css'
+                - 'bundles/ezplatformui/css/views/subitemlist.css'
                 - 'bundles/ezplatformui/css/views/rawcontent.css'
                 - 'bundles/ezplatformui/css/views/languageswitcher.css'
                 - 'bundles/ezplatformui/css/views/tabs/details.css'
@@ -114,6 +115,7 @@ system:
                 - 'bundles/ezplatformui/css/theme/views/serverside.css'
                 - 'bundles/ezplatformui/css/theme/views/navigationhub.css'
                 - 'bundles/ezplatformui/css/theme/views/locationview.css'
+                - 'bundles/ezplatformui/css/theme/views/subitemlist.css'
                 - 'bundles/ezplatformui/css/theme/views/rawcontent.css'
                 - 'bundles/ezplatformui/css/theme/views/languageswitcher.css'
                 - 'bundles/ezplatformui/css/theme/views/asynchronous.css'

Resources/config/yui.yml

@@ -200,13 +200,21 @@ system:
                         - 'ez-locationviewviewtabview'
                         - 'ez-locationviewdetailstabview'
                         - 'ez-tabs'
+                        - 'ez-subitemlistview'
+                        - 'ez-locationsearchplugin'
                         - 'event-tap'
                         - 'array-extras'
                         - 'locationviewview-ez-template'
                     path: %ez_platformui.public_dir%/js/views/ez-locationviewview.js
                 locationviewview-ez-template:
                     type: 'template'
                     path: %ez_platformui.public_dir%/templates/locationview.hbt
+                ez-subitemlistview:
+                    requires: ['ez-templatebasedview', 'ez-asynchronousview', 'event-tap', 'subitemlistview-ez-template']
+                    path: %ez_platformui.public_dir%/js/views/ez-subitemlistview.js
+                subitemlistview-ez-template:
+                    type: 'template'
+                    path: %ez_platformui.public_dir%/templates/subitemlist.hbt
                 ez-locationviewtabview:
                     requires: ['ez-templatebasedview']
                     path: %ez_platformui.public_dir%/js/views/ez-locationviewtabview.js
@@ -860,6 +868,9 @@ system:
                 ez-contenttreeplugin:
                     requires: ['ez-viewservicebaseplugin', 'ez-contentmodel', 'ez-contenttypemodel', 'ez-locationmodel', 'ez-contenttree', 'parallel']
                     path: %ez_platformui.public_dir%/js/views/services/plugins/ez-contenttreeplugin.js
+                ez-locationsearchplugin:
+                    requires: ['parallel', 'ez-viewservicebaseplugin', 'ez-pluginregistry', 'ez-locationmodel']
+                    path: %ez_platformui.public_dir%/js/views/services/plugins/ez-locationsearchplugin.js
                 ez-contentcreateplugin:
                     requires: ['ez-viewservicebaseplugin', 'ez-pluginregistry', 'ez-createcontentactionview', 'ez-contenttypegroupmodel']
                     path: %ez_platformui.public_dir%/js/views/services/plugins/ez-contentcreateplugin.js

Resources/public/css/theme/views/subitemlist.css

@@ -0,0 +1,90 @@
+/**
+ * Copyright (C) eZ Systems AS. All rights reserved.
+ * For full copyright and license information view LICENSE file distributed with this source code.
+ */
+
+.ez-view-subitemlistview .ez-subitemlist-box {
+    border: 1px solid #ccc;
+    background: #F5F4F2;
+}
+
+.ez-view-subitemlistview .ez-subitemlist-title {
+    background: #fff;
+    font-size: 1.1em;
+    font-weight: bold;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+}
+
+.ez-view-subitemlistview .ez-subitemlist-content {
+    transition: all ease 0.3s;
+    opacity: 1;
+}
+
+.ez-view-subitemlistview.is-page-loading .ez-subitemlist-content {
+    opacity: 0.3;
+}
+
+.ez-view-subitemlistview .ez-subitemlist-table {
+    box-shadow: 0 0 2px #ccc;
+}
+
+.ez-view-subitemlistview .ez-subitemlist-table td {
+    background: #fff;
+}
+
+.ez-view-subitemlistview .ez-subitemlist-table tr:nth-child(2n-1) td {
+    background: #fafafa;
+}
+
+.ez-view-subitemlistview .ez-subitemlist-navigation {
+    list-style-type: none;
+    font-size: 90%;
+}
+
+.ez-view-subitemlistview .ez-subitemlist-navigation-link.is-disabled {
+    color: #999;
+    cursor: default;
+}
+
+.ez-view-subitemlistview .ez-subitemlist-navigation-link[rel="first"]:before {
+    content: "«";
+    padding-right: 0.3em;
+}
+
+.ez-view-subitemlistview .ez-subitemlist-navigation-link[rel="next"]:after {
+    content: "›";
+    padding-left: 0.3em;
+}
+
+.ez-view-subitemlistview .ez-subitemlist-navigation-link[rel="prev"]:before {
+    content: "‹";
+    padding-right: 0.3em;
+}
+
+.ez-view-subitemlistview .ez-subitemlist-navigation-link[rel="last"]:after {
+    content: "»";
+    padding-left: 0.3em;
+}
+
+.ez-view-subitemlistview .ez-subitemlist-loader-mask {
+    transition: all ease 0.3s;
+}
+
+.ez-view-subitemlistview .ez-subitemlist-loader-mask:before {
+    -webkit-animation: spin 0.5s infinite linear;
+            animation: spin 0.5s infinite linear;
+    box-sizing: border-box;
+    border-radius: 100%;
+    border-width: 0.5em;
+    border-style: solid;
+    border-color: rgba(50, 50, 50, 0.8) rgba(50, 50, 50, 0.8) rgba(50, 50, 50, 0.8) rgba(50, 50, 50, 0.1);
+    opacity: 1;
+    z-index: 10000;
+    width: 3em;
+    height: 3em;
+    content: " ";
+    display: block;
+    top: 50%;
+    left: 50%;
+    position: absolute;
+}

Resources/public/css/views/locationview.css

@@ -25,3 +25,7 @@
 .ez-view-locationviewview .ez-locationview-content {
     width: 100%;
 }
+
+.ez-view-locationviewview .ez-subitemlist-container {
+    padding: 0 2em 2em 2em;
+}

Resources/public/css/views/subitemlist.css

@@ -0,0 +1,79 @@
+/**
+ * Copyright (C) eZ Systems AS. All rights reserved.
+ * For full copyright and license information view LICENSE file distributed with this source code.
+ */
+
+.ez-view-subitemlistview .ez-subitemlist-box {
+    position: relative;
+}
+
+.ez-view-subitemlistview .ez-subitemlist-loader-mask {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: -1;
+}
+
+.ez-view-subitemlistview.is-page-loading .ez-subitemlist-loader-mask {
+    z-index: 10;
+}
+
+.ez-view-subitemlistview .ez-subitemlist-title {
+    margin: 0;
+    padding: 0 1em;
+    line-height: 2.5em;
+}
+
+.ez-view-subitemlistview .ez-subitemlist-content {
+    margin: 1em;
+}
+
+.ez-view-subitemlistview .ez-subitemlist-table {
+    width: 100%;
+}
+
+.ez-view-subitemlistview .ez-subitemlist-navigation {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+    padding: 0;
+    margin: 0.5em 0;
+}
+
+.ez-view-subitemlistview .ez-subitemlist-navigation-item {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+    width: 25%;
+    padding: 0;
+    margin: 0;
+}
+
+.ez-view-subitemlistview .ez-subitemlist-navigation-link {
+    display: block;
+}
+
+.ez-view-subitemlistview .ez-subitemlist-navigation-link[rel="first"],
+.ez-view-subitemlistview .ez-subitemlist-navigation-link[rel="next"] {
+    text-align: left;
+}
+
+.ez-view-subitemlistview .ez-subitemlist-navigation-link[rel="prev"],
+.ez-view-subitemlistview .ez-subitemlist-navigation-link[rel="last"] {
+    text-align: right;
+}
+
+.ez-view-subitemlistview .ez-subitemlist-navigation-link[rel="next"] {
+    padding-left: 1em;
+}
+
+.ez-view-subitemlistview .ez-subitemlist-navigation-link[rel="prev"] {
+    padding-right: 1em;
+}

Resources/public/js/models/ez-locationmodel.js

@@ -104,7 +104,7 @@ YUI.add('ez-locationmodel', function (Y) {
         ATTRS_REST_MAP: [
             'childCount', 'depth', 'hidden', 'invisible', 'pathString',
             'priority', 'remoteId', 'sortField', 'sortOrder',
-            {'id': 'locationId'}
+            {'id': 'locationId'}, {'_href': 'id'},
         ],
         LINKS_MAP: ['ParentLocation', 'Content'],
         ATTRS: {

Resources/public/js/models/ez-restmodel.js

@@ -197,6 +197,24 @@ YUI.add('ez-restmodel', function (Y) {
             }
             return ret;
         },
+
+        /**
+         * Overrides the default implementation to make sure the models in
+         * attributes are also jsonified.
+         *
+         * @method toJSON
+         * @return {Object}
+         */
+        toJSON: function () {
+            var attrs = Y.Model.prototype.toJSON.call(this);
+
+            Y.Object.each(attrs, function (value, key) {
+                if ( L.isObject(value) && L.isFunction(value.toJSON) ) {
+                    attrs[key] = value.toJSON();
+                }
+            });
+            return attrs;
+        },
     }, {
         /**
          * Root element in the REST API response where the data is located.

Resources/public/js/views/ez-locationviewview.js

@@ -45,23 +45,16 @@ YUI.add('ez-locationviewview', function (Y) {
         },
 
         /**
-         * Converts each location and content model in the path to a plain
-         * object representation
+         * Converts each location in the path to a plain object representation
          *
          * @method _pathToJSON
          * @private
          * @return Array
          */
         _pathToJSON: function () {
-            var path = [];
-
-            Y.Array.each(this.get('path'), function (location, key) {
-                path[key] = {
-                    location: location.toJSON(),
-                    contentInfo: location.get('contentInfo').toJSON()
-                };
+            return Y.Array.map(this.get('path'), function (location) {
+                return location.toJSON();
             });
-            return path;
         },
 
         /**
@@ -71,7 +64,8 @@ YUI.add('ez-locationviewview', function (Y) {
          * @return {eZ.LocationViewView} the view itself
          */
         render: function () {
-            var container = this.get('container');
+            var container = this.get('container'),
+                subitemList = this.get('subitemList');
 
             container.setHTML(this.template({
                 location: this.get('location').toJSON(),
@@ -84,6 +78,11 @@ YUI.add('ez-locationviewview', function (Y) {
                 this.get('actionBar').render().get('container')
             );
             this._renderTabViews();
+            if ( subitemList ) {
+                container.one('.ez-subitemlist-container').append(
+                    subitemList.render().get('container')
+                );
+            }
 
             this._uiSetMinHeight();
             return this;
@@ -219,14 +218,19 @@ YUI.add('ez-locationviewview', function (Y) {
         },
 
         destructor: function () {
-            var bar = this.get('actionBar');
+            var bar = this.get('actionBar'),
+                subitemList = this.get('subitemList');
 
             bar.removeTarget(this);
             bar.destroy();
             Y.Array.each(this.get('tabs'), function (tab) {
                 tab.removeTarget(this);
                 tab.destroy();
             });
+            if ( subitemList ) {
+                subitemList.removeTarget(this);
+                subitemList.destroy();
+            }
         }
     }, {
         ATTRS: {
@@ -347,6 +351,30 @@ YUI.add('ez-locationviewview', function (Y) {
                 writeOnce: 'initOnly',
             },
 
+            /**
+             * The subitem list view or null if the content (type) is not
+             * configured to be a container.
+             *
+             * @attribute subitemList
+             * @type {eZ.SubitemListView|Null}
+             * @writeOnce
+             */
+            subitemList: {
+                valueFn: function () {
+                    var contentType = this.get('contentType');
+
+                    if ( contentType && contentType.get('isContainer') ) {
+                        return new Y.eZ.SubitemListView({
+                            location: this.get('location'),
+                            config: this.get('config'),
+                            bubbleTargets: this,
+                        });
+                    }
+                    return null;
+                },
+                writeOnce: 'initOnly',
+            },
+
             /**
              * Stores the identifier of the selected tab.
              *