Styles fixed

e2e/helpers/selectors.js

@@ -23,7 +23,7 @@ export default {
     clientsIndex: {
         searchClientInput: `${components.vnTextfield}`,
         searchButton: `vn-searchbar vn-icon[icon="search"]`,
-        searchResult: `vn-item-client a`,
+        searchResult: `vn-client-index .vn-list-item`,
         createClientButton: `${components.vnFloatButton}`,
         othersButton: `vn-left-menu li[name="Others"] > a`
     },

front/salix/styles/misc.scss

@@ -152,43 +152,45 @@ vn-tool-bar {
 .vn-list {
     max-width: 36em;
     margin: 0 auto;
-}
-a.vn-list-item {
-    @extend %clickable;
-}
-.vn-list-item {
-    padding: $pad-medium;
-    border-bottom: $border-thin solid $color-spacer;
 
-    display: block;
+    a.vn-list-item {
-    text-decoration: none;
+        @extend %clickable;
-    color: inherit;
+    }
-
+    .vn-list-item {
-    & > vn-horizontal {
+        border-bottom: $border-thin solid $color-spacer;
-        & > vn-one {
+        display: block;
-            overflow: hidden;
+        text-decoration: none;
-        }
+        color: inherit;
-        & > .buttons {
+    
-            align-items: center;
+        & > vn-horizontal {
-
+            padding: $pad-medium;
-            vn-icon {
+    
-                opacity: .4;
+            & > vn-one {
-                color: $color-main;
+                overflow: hidden;
-                margin-left: .5em;
+            }
-                transition: opacity 250ms ease-out;
+            & > .buttons {
-                font-size: 2em;
+                align-items: center;
-
+    
-                &:hover {
+                vn-icon {
-                    opacity: 1;
+                    opacity: .4;
+                    color: $color-main;
+                    margin-left: .5em;
+                    transition: opacity 250ms ease-out;
+                    font-size: 2em;
+    
+                    &:hover {
+                        opacity: 1;
+                    }
                 }
             }
         }
     }
-}
+    vn-empty-rows {
-vn-empty-rows.vn-list-item {
+        display: block;
-    text-align: center;
+        text-align: center;
-    padding: 1.5em;
+        padding: 1.5em;
-    box-sizing: border-box;
+        box-sizing: border-box;
+    }
 }
 
 /** START - FORM ELEMENTS DISABLED **/

modules/client/front/index/index.html

@@ -17,11 +17,42 @@
             </vn-searchbar>
         </vn-card>
         <vn-card margin-medium-v>
-            <vn-item-client
+            <a
-                class="searchResult"
                 ng-repeat="client in clients track by client.id"
-                client="::client">
+                ui-sref="client.card.summary({ id: {{::client.id}} })"
-            </vn-item-client>
+                translate-attr="{title: 'View client'}"
+                class="vn-list-item searchResult">
+                <vn-horizontal ng-click="$ctrl.onClick($event)">
+                    <vn-one>
+                        <h6>{{::client.name}}</h6>
+                        <vn-label-value label="Id" 
+                            value="{{::client.id}}">
+                        </vn-label-value>
+                        <vn-label-value label="Phone" 
+                            value="{{::client.phone | phone}}">
+                        </vn-label-value>
+                        <vn-label-value label="Town/City" 
+                            value="{{::client.city}}">
+                        </vn-label-value>
+                        <vn-label-value label="Email" 
+                            value="{{::client.email}}">
+                        </vn-label-value>
+                    </vn-one>
+                    <vn-horizontal class="buttons">
+                        <vn-icon
+                            ng-click="$ctrl.openSummary(client, $event)"
+                            vn-tooltip="Preview"
+                            icon="desktop_windows">
+                        </vn-icon>
+                    </vn-horizontal>
+                </vn-horizontal>
+            </a>
+            <vn-empty-rows translate ng-if="model.data.length === 0">
+                No results
+            </vn-empty-rows>
+            <vn-empty-rows translate ng-if="model.data === null">
+                Enter a new search
+            </vn-empty-rows>
         </vn-card>
         <vn-pagination model="model"></vn-pagination>
     </div>

modules/client/front/index/index.js

@@ -1,5 +1,4 @@
 import ngModule from '../module';
-import './item-client';
 
 export default class Controller {
     constructor($scope, $stateParams) {
@@ -33,7 +32,13 @@ export default class Controller {
         }
     }
 
-    openSummary(client) {
+    onClick(event) {
+        if (event.defaultPrevented)
+            event.stopImmediatePropagation();
+    }
+
+    openSummary(client, event) {
+        event.preventDefault();
         this.clientSelected = client;
         this.$.dialogSummaryClient.show();
     }

modules/client/front/index/item-client.html

@@ -1,29 +0,0 @@
-<a
-    ui-sref="client.card.summary({ id: {{::$ctrl.client.id}} })"
-    translate-attr="{title: 'View client'}"
-    class="vn-list-item">
-    <vn-horizontal ng-click="$ctrl.onClick($event)">
-        <vn-one>
-            <h6>{{::$ctrl.client.name}}</h6>
-            <vn-label-value label="Id" 
-                value="{{::$ctrl.client.id}}">
-            </vn-label-value>
-            <vn-label-value label="Phone" 
-                value="{{::$ctrl.client.phone | phone}}">
-            </vn-label-value>
-            <vn-label-value label="Town/City" 
-                value="{{::$ctrl.client.city}}">
-            </vn-label-value>
-            <vn-label-value label="Email" 
-                value="{{::$ctrl.client.email}}">
-            </vn-label-value>
-        </vn-one>
-        <vn-horizontal class="buttons">
-            <vn-icon
-                ng-click="$ctrl.preview($event)"
-                vn-tooltip="Preview"
-                icon="desktop_windows">
-            </vn-icon>
-        </vn-horizontal>
-    </vn-horizontal>
-</a>

modules/client/front/index/item-client.js

@@ -1,24 +0,0 @@
-import ngModule from '../module';
-
-class Controller {
-    onClick(event) {
-        if (event.defaultPrevented)
-            event.stopImmediatePropagation();
-    }
-
-    preview(event) {
-        event.preventDefault();
-        this.list.openSummary(this.client);
-    }
-}
-
-ngModule.component('vnItemClient', {
-    template: require('./item-client.html'),
-    controller: Controller,
-    bindings: {
-        client: '<'
-    },
-    require: {
-        list: '^vnClientIndex'
-    }
-});

modules/client/front/index/style.scss

@@ -1,3 +0,0 @@
-vn-item-client {
-    display: block;
-}

modules/worker/front/index/index.html

@@ -48,6 +48,12 @@
                     </vn-horizontal>
                 </vn-horizontal>
             </a>
+            <vn-empty-rows translate ng-if="model.data.length === 0">
+                No results
+            </vn-empty-rows>
+            <vn-empty-rows translate ng-if="model.data === null">
+                Enter a new search
+            </vn-empty-rows>
         </vn-card>
         <vn-pagination model="model"></vn-pagination>
     </div>