modules/zone/front/delivery-days/index.html

@@ -33,10 +33,59 @@
     </form>
 </vn-side-menu>
 
+<vn-crud-model vn-id="zoneModel"
+    url="Zones"
+    filter="::$ctrl.filter"
+    limit="20"
+    data="zones"
+    auto-load="false">
+</vn-crud-model>
+
 <!-- Zone Popover -->
 <vn-popover vn-id="zoneEvents">
     <div class="zoneEvents">
         <div class="header vn-pa-sm" translate>Zones</div>
-        <vn-zone-index vn-id="zoneIndex"></vn-zone-index>
+        <vn-data-viewer
+            model="zoneModel"
+            class="vn-w-md vn-mb-xl">
+            <vn-card>
+            <vn-table model="zoneModel">
+                <vn-thead>
+                    <vn-tr>
+                        <vn-th field="id" number>Id</vn-th>
+                        <vn-th field="name" expand>Name</vn-th>
+                        <vn-th field="agencyModeFk">Agency</vn-th>
+                        <vn-th field="hour" shrink>Closing</vn-th>
+                        <vn-th field="price" number>Price</vn-th>
+                        <vn-th shrink></vn-th>
+                    </vn-tr>
+                </vn-thead>
+                <vn-tbody>
+                    <vn-tr
+                        ng-repeat="zone in zoneModel.data"
+                        ui-sref="zone.card.summary({id: zone.id})"
+                        class="clickable search-result">
+                        <vn-td number>{{::zone.id}}</vn-td>
+                        <vn-td expand>{{::zone.name}}</vn-td>
+                        <vn-td>{{::zone.agencyMode.name}}</vn-td>
+                        <vn-td shrink>{{::zone.hour | date: 'HH:mm'}}</vn-td>
+                        <vn-td number>{{::zone.price | currency: 'EUR':2}}</vn-td>
+                        <vn-td shrink>
+                            <vn-horizontal class="buttons">
+                                <vn-icon-button
+                                    ng-click="$ctrl.preview($event, zone)"
+                                    vn-tooltip="Preview"
+                                    icon="desktop_windows">
+                                </vn-icon-button>
+                            </vn-horizontal>
+                        </vn-td>
+                    </vn-tr>
+                </vn-tbody>
+            </vn-table>
+            </vn-card>
+        </vn-data-viewer>
     </div>
-</vn-popover>
+</vn-popover>
+<vn-popup vn-id="summary">
+    <vn-zone-summary zone="$ctrl.selectedZone"></vn-zone-summary>
+</vn-popup>

modules/zone/front/delivery-days/index.js

@@ -26,8 +26,7 @@ class Controller extends Section {
             zones.push(event.zoneFk);
 
         this.$.zoneEvents.show($event.target);
-        const zoneIndex = this.$.zoneIndex;
-        const zoneModel = zoneIndex.$scope.model;
+        const zoneModel = this.$.zoneModel;
         zoneModel.applyFilter({
             include: {
                 relation: 'agencyMode',
@@ -38,6 +37,12 @@ class Controller extends Section {
             }
         });
     }
+
+    preview(event, zone) {
+        this.stopEvent(event);
+        this.selectedZone = zone;
+        this.$.summary.show();
+    }
 }
 
 ngModule.component('vnZoneDeliveryDays', {

modules/zone/front/delivery-days/index.spec.js

@@ -14,11 +14,7 @@ describe('Zone Component vnZoneDeliveryDays', () => {
         $element = angular.element('<vn-zone-delivery-days></vn-zone-delivery-days');
         controller = $componentController('vnZoneDeliveryDays', {$element});
         controller.$.zoneEvents = popover;
-        controller.$.zoneIndex = {
-            $scope: {
-                model: crudModel
-            }
-        };
+        controller.$.zoneModel = crudModel;
     }));
 
     describe('onSubmit()', () => {
@@ -60,7 +56,7 @@ describe('Zone Component vnZoneDeliveryDays', () => {
         });
 
         it('should call the show() method and then call the applyFilter() method with the expected ids', () => {
-            const zoneModel = controller.$.zoneIndex.$scope.model;
+            const zoneModel = controller.$.zoneModel;
             jest.spyOn(controller.$.zoneEvents, 'show');
             jest.spyOn(zoneModel, 'applyFilter');
 

modules/zone/front/delivery-days/style.scss

@@ -19,11 +19,7 @@ vn-zone-delivery-days {
 .zoneEvents {
     width: 700px;
     max-height: 450px;
-
-    vn-float-button {
-        display: none
-    }
-
+    
     vn-data-viewer {
         margin-bottom: 0;
         vn-pagination {