Feature/ezp 25979 search

Resources/config/css.yml

@@ -28,6 +28,8 @@ system:
                 - 'bundles/ezplatformui/css/views/contentedit.css'
                 - 'bundles/ezplatformui/css/views/locationview.css'
                 - 'bundles/ezplatformui/css/views/trash.css'
+                - 'bundles/ezplatformui/css/views/search.css'
+                - 'bundles/ezplatformui/css/views/searchlist.css'
                 - 'bundles/ezplatformui/css/views/subitembox.css'
                 - 'bundles/ezplatformui/css/views/subitem/listmore.css'
                 - 'bundles/ezplatformui/css/views/subitem/listitem.css'
@@ -138,6 +140,8 @@ system:
                 - 'bundles/ezplatformui/css/theme/views/navigationhub.css'
                 - 'bundles/ezplatformui/css/theme/views/locationview.css'
                 - 'bundles/ezplatformui/css/theme/views/trash.css'
+                - 'bundles/ezplatformui/css/theme/views/search.css'
+                - 'bundles/ezplatformui/css/theme/views/searchlist.css'
                 - 'bundles/ezplatformui/css/theme/views/subitembox.css'
                 - 'bundles/ezplatformui/css/theme/views/subitem/listmore.css'
                 - 'bundles/ezplatformui/css/theme/views/subitem/listitem.css'

Resources/config/yui.yml

@@ -203,7 +203,9 @@ system:
                         - 'ez-positionplugin'
                         - 'ez-updatetreeplugin'
                         - 'ez-translateproperty'
-                    path: "%ez_platformui.public_dir%/js/apps/ez-platformuiapp.js"
+                        - 'ez-searchviewservice'
+                        - 'ez-searchview'
+                    path: %ez_platformui.public_dir%/js/apps/ez-platformuiapp.js
                 ez-viewservice:
                     requires: ['base', 'parallel']
                     path: "%ez_platformui.public_dir%/js/views/services/ez-viewservice.js"
@@ -1348,3 +1350,18 @@ system:
                         - 'ez-viewservicebaseplugin'
                         - 'ez-pluginregistry'
                     path: "%ez_platformui.public_dir%/js/views/services/plugins/ez-locationswapplugin.js"
+                ez-searchview:
+                    requires: ['ez-templatebasedview', 'ez-searchlistview', 'searchview-ez-template', 'node-style']
+                    path: "%ez_platformui.public_dir%/js/views/ez-searchview.js"
+                ez-searchlistview:
+                    requires: ['ez-templatebasedview', 'searchlistview-ez-template', 'ez-subitemlistitemview', 'ez-loadmorepagination']
+                    path: "%ez_platformui.public_dir%/js/views/ez-searchlistview.js"
+                searchview-ez-template:
+                    type: 'template'
+                    path: "%ez_platformui.public_dir%/templates/searchview.hbt"
+                searchlistview-ez-template:
+                    type: 'template'
+                    path: "%ez_platformui.public_dir%/templates/searchlistview.hbt"
+                ez-searchviewservice:
+                    requires: ['ez-viewservice', 'ez-searchplugin']
+                    path: "%ez_platformui.public_dir%/js/views/services/ez-searchviewservice.js"

Resources/public/css/theme/views/actions/button.css

@@ -145,3 +145,7 @@
 .ez-view-buttonactionview .ez-action[data-action="preview"] .action-trigger[data-action-option="mobile"]:before {
     content: "\E60a";
 }
+
+.ez-view-buttonactionview .ez-action[data-action="viewSearch"] .action-icon:before {
+    content: "\E986";
+}

Resources/public/css/theme/views/search.css

@@ -0,0 +1,18 @@
+/**
+ * Copyright (C) eZ Systems AS. All rights reserved.
+ * For full copyright and license information view LICENSE file distributed with this source code.
+ */
+
+.ez-view-searchview {
+    background: #fff;
+}
+
+.ez-view-searchview .ez-page-header {
+    background: #f5f4f2;
+    border-bottom: 1px solid #ccc;
+}
+
+.ez-view-searchview .ez-searchview-search-form .ez-search-form-label {
+    font-weight: bold;
+}
+

Resources/public/css/theme/views/searchlist.css

@@ -0,0 +1,29 @@
+/**
+ * Copyright (C) eZ Systems AS. All rights reserved.
+ * For full copyright and license information view LICENSE file distributed with this source code.
+ */
+.ez-view-searchlistview {
+    border: 1px solid #ccc;
+    background: #F5F4F2;
+}
+
+.ez-view-searchlistview .ez-searchlist-pagination {
+    text-align: center;
+}
+
+.ez-view-searchlistview .ez-searchlist-resultlist {
+    background: #F5F4F2;
+}
+
+.ez-view-searchlistview .ez-searchlist-count {
+    background: #fff;
+    font-size: 1.1em;
+    font-weight: bold;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+    border-bottom: 1px solid #ccc;
+}
+
+.ez-view-searchlistview .ez-searchlist-column-head {
+    border-bottom: 2px solid #999;
+    background: #F5F4F2;
+}

Resources/public/css/theme/views/subitem/listitem.css

@@ -8,7 +8,7 @@
 }
 
 .ez-view-subitemlistitemview:nth-child(2n-1) {
-    background: #f5f4f2;
+    background: #f2f2f2;
 }
 
 .ez-view-subitemlistitemview .ez-subitemlistitem-cell {

Resources/public/css/views/search.css

@@ -0,0 +1,37 @@
+/**
+ * Copyright (C) eZ Systems AS. All rights reserved.
+ * For full copyright and license information view LICENSE file distributed with this source code.
+ */
+.ez-view-searchview {
+    width: 100%;
+    padding-bottom: 1em;
+    height: 100%;
+}
+
+.ez-view-searchview .ez-searchview-content {
+    width: 100%;
+}
+
+.ez-view-searchview .ez-searchview-search-form {
+    margin: 2em;
+}
+
+.ez-view-searchview .ez-search-form  {
+    margin-bottom: 3em;
+}
+
+.ez-view-searchview .ez-searchview-search-form .ez-search-form-label {
+    display: block;
+}
+
+.ez-view-searchview .ez-searchview-search-form .ez-search-form-input {
+    width: 40%;
+}
+
+.ez-view-searchview .ez-search-form .ez-search-form-input,
+.ez-view-searchview .ez-search-form-button {
+    line-height: 2.2em;
+    padding-top: 0;
+    padding-bottom: 0;
+    height: auto;
+}

Resources/public/css/views/searchlist.css

@@ -0,0 +1,24 @@
+/**
+ * Copyright (C) eZ Systems AS. All rights reserved.
+ * For full copyright and license information view LICENSE file distributed with this source code.
+ */
+.ez-view-searchlistview .ez-resultlist-table {
+    width: 100%;
+}
+
+.ez-view-searchlistview .ez-searchlist-resultlist {
+    padding: 1em;
+}
+
+
+.ez-view-searchlistview .ez-searchlist-count {
+    margin: 0;
+    padding: 0 1rem 0 1em;
+    line-height: 2.5em;
+}
+
+.ez-view-searchlistview .ez-searchlist-column-head {
+    text-align: left;
+    vertical-align: middle;
+    padding: 0.8em 0.5em;
+}

Resources/public/js/apps/ez-platformuiapp.js

@@ -105,6 +105,10 @@ YUI.add('ez-platformuiapp', function (Y) {
                 type: Y.eZ.TrashView,
                 parent: 'locationViewView'
             },
+            searchView: {
+                type: Y.eZ.SearchView,
+                parent: 'locationViewView'
+            },
             serverSideView: {
                 type: Y.eZ.ServerSideView,
             },
@@ -934,6 +938,20 @@ YUI.add('ez-platformuiapp', function (Y) {
                     sideViews: {'navigationHub': true, 'discoveryBar': true},
                     view: 'trashView',
                     callbacks: ['open', 'checkUser', 'handleSideViews', 'handleMainView']
+                }, {
+                    name: "viewSearch",
+                    path: "/search",
+                    service: Y.eZ.SearchViewService,
+                    view: "searchView",
+                    sideViews: {'navigationHub': true, 'discoveryBar': true},
+                    callbacks: ['open', 'checkUser', 'handleSideViews', 'handleMainView'],
+                }, {
+                    name: "doSearch",
+                    path: "/search/:searchString/:limit",
+                    service: Y.eZ.SearchViewService,
+                    view: "searchView",
+                    sideViews: {'navigationHub': true, 'discoveryBar': true},
+                    callbacks: ['open', 'checkUser', 'handleSideViews', 'handleMainView'],
                 }, {
                     name: "adminSection",
                     regex: /\/admin\/(pjax%2Fsection%2F.*)/,
@@ -986,7 +1004,7 @@ YUI.add('ez-platformuiapp', function (Y) {
                     service: Y.eZ.ServerSideViewService,
                     view: "serverSideView",
                     callbacks: ['open', 'checkUser', 'handleSideViews', 'handleMainView']
-                },]
+                }]
             },
             serverRouting: {
                 value: false

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

@@ -48,6 +48,12 @@ YUI.add('ez-discoverybarview', function (Y) {
                             label: "Minimize",
                             priority: 1000
                         }),
+                        new Y.eZ.ButtonActionView({
+                            actionId: "viewSearch",
+                            disabled: false,
+                            label: "Search",
+                            priority: 900
+                        }),
                         new Y.eZ.TreeActionView({
                             actionId: "tree",
                             disabled: false,

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

@@ -0,0 +1,156 @@
+/*
+ * Copyright (C) eZ Systems AS. All rights reserved.
+ * For full copyright and license information view LICENSE file distributed with this source code.
+ */
+YUI.add('ez-searchlistview', function (Y) {
+    "use strict";
+
+    /**
+     * Provides the search list view class
+     *
+     * @module ez-searchlistview
+     */
+    Y.namespace('eZ');
+
+    /**
+     * The search list view
+     *
+     * @namespace eZ
+     * @class SearchListView
+     * @constructor
+     * @extends Y.eZ.TemplateBasedView
+     */
+    Y.eZ.SearchListView = Y.Base.create('searchListView', Y.eZ.TemplateBasedView, [Y.eZ.LoadMorePagination], {
+        initializer: function () {
+            this._ItemView = this.get('itemViewConstructor');
+            this._itemViewBaseConfig = {
+                displayedProperties: this.get('displayedProperties'),
+            };
+            this._getExpectedItemsCount = this._getSearchResultCount;
+        },
+
+        render: function () {
+            var itemsCount = this.get('items').length,
+                remainingItemsCount = this._getSearchResultCount() - itemsCount;
+
+            this.get('container').setHTML(this.template({
+                searchResultCount: this._getSearchResultCount(),
+                displayCount: itemsCount,
+                remainingCount: Math.min(this.get('limit'), remainingItemsCount),
+                columns: this._getColumns(),
+            }));
+            this._renderItems();
+            if( this._getSearchResultCount() > this._countLoadedItems() ) {
+                this._enableLoadMore();
+            }
+            return this;
+        },
+
+        /**
+         * Returns the search result count.
+         *
+         * @protected
+         * @method _getSearchResultCount
+         */
+        _getSearchResultCount: function () {
+            return this.get('searchResultCount');
+        },
+
+        /**
+         * Renders an item view per result item.
+         *
+         * @protected
+         * @method _renderItems
+         */
+        _renderItems: function () {
+            var contentNode = this.get('container').one('.ez-searchlist-content'),
+                ItemView = this.get('itemViewConstructor');
+
+            if ( !this.get('items') || this.get('items').length === 0 ) {
+                return;
+            }
+            this.get('items').forEach(function (struct) {
+                var view = new ItemView({
+                    displayedProperties: this.get('displayedProperties'),
+                    location: struct.location,
+                    content: struct.content,
+                    contentType: struct.contentType,
+                    bubbleTargets: this,
+                });
+
+                this._itemViews.push(view);
+
+                contentNode.append(view.render().get('container'));
+            }, this);
+
+        },
+
+        /**
+         * Returns an array of objects describing the columns to add to the
+         * list. Each object contains an `identifier` and a `name`.
+         *
+         * @method _getColumns
+         * @protected
+         * @return Array
+         */
+        _getColumns: function () {
+            return this.get('displayedProperties').map(function (identifier) {
+                return {
+                    name: this.get('propertyNames')[identifier],
+                    identifier: identifier,
+                };
+            }, this);
+        },
+
+    }, {
+        ATTRS: {
+            /**
+             * The number of item returned by the searchRequest
+             *
+             * @attribute searchResultCount
+             * @type Number
+             */
+            searchResultCount: {},
+
+            /**
+             * The properties to display
+             *
+             * @attribute displayedProperties
+             * @type Array
+             */
+            displayedProperties: {
+                value: ['name', 'lastModificationDate', 'contentType', 'translations'],
+            },
+
+            /**
+             * A key value object to store the human readable names of the
+             * columns.
+             *
+             * @attribute propertyNames
+             * @type {Object}
+             */
+            propertyNames: {
+                value: {
+                    'name': 'Name',
+                    'lastModificationDate': 'Modified',
+                    'contentType': 'Content type',
+                    'translations': 'Translations',
+                }
+            },
+
+            /**
+             * The constructor function to use to instance the item view
+             * instances.
+             *
+             * @attribute itemViewConstructor
+             * @type {Function}
+             * @default {Y.eZ.SubitemListItemView}
+             */
+            itemViewConstructor: {
+                valueFn: function () {
+                    return Y.eZ.SubitemListItemView;
+                },
+            },
+        }
+    });
+});