Report popover added

src/app/app.module.ts

@@ -45,6 +45,7 @@ import { CategoryFormPage } from "../pages/categories/form/category-form";
 import { ReportsPage } from "../pages/reports/index/reports";
 import { ReportsViewPage } from "../pages/reports/view/reports-view";
 import { ReportsDetailPage } from "../pages/reports/detail/reports-detail";
+import { ReportPopoverComponent } from "../components/report-popover/report-popover";
 
 registerLocaleData(localePt);
 
@@ -94,7 +95,8 @@ export class MyErrorHandler implements ErrorHandler {
         UserFormPage,
         ReportsPage,
         ReportsViewPage,
-        ReportsDetailPage
+        ReportsDetailPage,
+        ReportPopoverComponent
     ],
     imports: [
         BrowserModule,
@@ -141,7 +143,8 @@ export class MyErrorHandler implements ErrorHandler {
         UserFormPage,
         ReportsPage,
         ReportsViewPage,
-        ReportsDetailPage
+        ReportsDetailPage,
+        ReportPopoverComponent
     ],
     providers: [
         StatusBar,

src/components/components.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { ReportPopoverComponent } from './report-popover/report-popover';
+@NgModule({
+	declarations: [ReportPopoverComponent],
+	imports: [],
+	exports: [ReportPopoverComponent]
+})
+export class ComponentsModule {}

src/components/report-popover/report-popover.html

@@ -0,0 +1,16 @@
+<!-- Generated template for the ReportPopoverComponent component -->
+<div>
+    <ion-list no-lines>
+        <ion-list-header>Período</ion-list-header>
+        <ion-item>
+            <ion-label>De</ion-label>
+            <ion-datetime displayFormat="DDD DD/MM/YYYY" pickerFormat="DD MM YYYY" [(ngModel)]="from"></ion-datetime>
+        </ion-item>
+        <ion-item>
+            <ion-label>Até</ion-label>
+            <ion-datetime displayFormat="DDD DD/MM/YYYY" pickerFormat="DD MM YYYY" [(ngModel)]="to"></ion-datetime>
+        </ion-item>
+        <button ion-item (click)="clear()">Limpar filtro</button>
+        <button ion-item (click)="save()">Salvar</button>
+    </ion-list>
+</div>

src/components/report-popover/report-popover.scss

@@ -0,0 +1,3 @@
+report-popover {
+
+}

src/components/report-popover/report-popover.ts

@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+import { NavParams, ViewController } from "ionic-angular";
+import * as moment from 'moment';
+import 'moment/locale/pt-br';
+
+/**
+ * Generated class for the ReportPopoverComponent component.
+ *
+ * See https://angular.io/api/core/Component for more info on Angular
+ * Components.
+ */
+@Component({
+    selector: 'report-popover',
+    templateUrl: 'report-popover.html'
+})
+export class ReportPopoverComponent {
+    private from;
+    private to;
+
+    constructor(public viewCtrl: ViewController, public navParams: NavParams) {
+        let period = this.navParams.get('period');
+
+        moment.locale('pt-BR');
+
+        if (Array.isArray(period) && period.length > 0) {
+            this.from = moment(period[0]).format();
+            this.to = moment(period[1]).format();
+        } else {
+            this.to = moment().format();
+        }
+    }
+
+    save() {
+        this.viewCtrl.dismiss({from: this.from, to: this.to});
+    }
+
+    clear() {
+        this.to = moment().format();
+        this.from = null;
+    }
+}

src/pages/reports/detail/reports-detail.html

@@ -6,24 +6,49 @@
 -->
 <ion-header>
     <ion-navbar>
-        <ion-title>Detalhes</ion-title>
+        <ion-title>{{ pageTitle }}</ion-title>
+
+        <ion-buttons end>
+            <button ion-button icon-only (click)="presentPopover($event)">
+                <ion-icon name="more"></ion-icon>
+            </button>
+        </ion-buttons>
     </ion-navbar>
 </ion-header>
 
 <ion-content>
-    <ion-list class="single-item" *ngIf="report">
-        <ion-item class="list-item">
+    <div class="list-item" *ngIf="report">
+        <div class="list-item__header">Informações</div>
+
+        <div class="list-item__content">
             <div class="highlight">{{ report.name }}</div>
             <div>Total: {{ report.total | currency:'BRL':'R$' }}</div>
-        </ion-item>
+        </div>
+
+        <div class="list-item__header list__header">{{ listTitle }}</div>
 
-        <ion-item *ngFor="let item of report.list" class="list-item">
-            <ion-avatar item-start>
-                <img src="assets/images/placeholder-60.jpg" alt="" width="60" height="60">
-            </ion-avatar>
+        <ion-list class="product-list" *ngIf="report.list && report.list.length > 0">
+            <ion-item *ngFor="let item of report.list">
+                <ion-avatar item-start>
+                    <img src="assets/images/placeholder-60.jpg" alt="" width="60" height="60">
+                </ion-avatar>
 
-            <p class="highlight">{{ item.name }}</p>
-            <p>Preço Un: {{ item.total | currency:'BRL':'R$' }}</p>
-        </ion-item>
-    </ion-list>
+                <p class="highlight" *ngIf="item.created_at">{{ item.created_at }}</p>
+                <p class="highlight" *ngIf="item.name">{{ item.name }}</p>
+                <p>Total: {{ item.total | currency:'BRL':'R$' }}</p>
+            </ion-item>
+        </ion-list>
+
+        <ion-list class="product-list" *ngIf="!report.list || (report.list && report.list.length == 0)">
+            <ion-item class="no-items">
+                <p>Nenhum item encontrado</p>
+            </ion-item>
+        </ion-list>
+    </div>
 </ion-content>
+
+<ion-footer>
+    <ion-toolbar>
+        <ion-title>Período: {{ periodTitle }}</ion-title>
+    </ion-toolbar>
+</ion-footer>

src/pages/reports/detail/reports-detail.scss

@@ -1,3 +1,24 @@
 page-reports-detail {
+    ion-item {
+        > ion-avatar {
+            margin-bottom: 1rem !important;
+            margin-top: 1rem !important;
+        }
 
+        &:last-child {
+            > ion-avatar {
+                margin-bottom: 0 !important;
+            }
+        }
+    }
+
+    .product-list {
+        > .no-items {
+            min-height: auto;
+
+            ion-label {
+                margin-bottom: 0 !important;
+            }
+        }
+    }
 }

src/pages/reports/detail/reports-detail.ts

@@ -1,6 +1,9 @@
 import { Component } from '@angular/core';
-import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import { IonicPage, NavController, NavParams, PopoverController } from 'ionic-angular';
 import { ApiProvider } from "../../../providers/api/api";
+import * as moment from 'moment';
+import 'moment/locale/pt-br';
+import { ReportPopoverComponent } from "../../../components/report-popover/report-popover";
 
 /**
  * Generated class for the ReportsDetailPage page.
@@ -18,19 +21,88 @@ export class ReportsDetailPage {
     private id;
     private category;
     private report;
+    private pageTitle;
+    private listTitle;
+    private period;
+    private periodTitle;
+
+    constructor(public navCtrl: NavController, public navParams: NavParams, private apiProvider: ApiProvider,
+                public popoverCtrl: PopoverController) {
+        moment.locale('pt-BR');
 
-    constructor(public navCtrl: NavController, public navParams: NavParams, private apiProvider: ApiProvider) {
         this.id = this.navParams.get('id');
         this.category = this.navParams.get('category');
+
+        let categoryName;
+
+        switch (this.category) {
+            case 'categories':
+                categoryName = 'categoria';
+                this.listTitle = 'Lista de produtos';
+                break;
+            case 'sellers':
+                categoryName = 'vendedor';
+                this.listTitle = 'Lista de pedidos';
+                break;
+            case 'products':
+                categoryName = 'produto';
+                this.listTitle = 'Lista de pedidos';
+                break;
+            default:
+                this.listTitle = 'Listagem';
+        }
+
+        this.pageTitle = 'Relatório de ' + categoryName;
+
+        this.updatePeriod(this.navParams.get('period'));
+    }
+
+    /**
+     *
+     * @param myEvent
+     */
+    presentPopover(myEvent) {
+        let popover = this.popoverCtrl.create(ReportPopoverComponent, {period: this.period});
+        popover.present();
+        popover.onDidDismiss(data => {
+            if (data) {
+                this.updatePeriod([data.from, data.to]);
+            }
+        });
+    }
+
+    /**
+     * @param period
+     */
+    updatePeriod(period) {
+        if (period && period[0] && period[1]) {
+            this.period = [period[0], period[1]];
+            this.periodTitle = moment(period[0]).format('DD/MM/YYYY') + ' - ' + moment(period[1]).format('DD/MM/YYYY');
+
+            this.apiProvider.builder('reports/' + this.category + '/' + this.id + '/' + period[0] + '/' + period[1]).loader().get()
+                .subscribe((res) => this.updateListDate(res));
+        } else {
+            this.period = [];
+            this.periodTitle = 'Sempre';
+
+            this.apiProvider.builder('reports/' + this.category + '/' + this.id).loader().get()
+                .subscribe((res) => this.updateListDate(res));
+        }
     }
 
     /**
      *
+     * @param res
      */
-    ionViewWillEnter() {
-        console.log('will enter');
+    updateListDate(res) {
+        if (res.list && res.list.length > 0) {
+            res.list.forEach((e, i) => {
+                if (e.created_at) {
+                    res.list[i].created_at = moment(e.created_at).format('DD/MM/YYYY HH:mm:ss')
+                }
+            });
+        }
 
-        this.apiProvider.builder('reports/' + this.category + '/' + this.id).loader().get()
-            .subscribe((res) => this.report = res);
+        this.report = res;
     }
 }

src/pages/reports/index/reports.html

@@ -10,18 +10,18 @@
     </ion-navbar>
 </ion-header>
 
-<ion-content padding>
-    <button ion-button (click)="goToReportView('products')" block large>
+<ion-content>
+    <button ion-button (click)="goToReportView('products')" full clear icon-left large>
         <ion-icon name="alarm"></ion-icon>
         Produtos
     </button>
 
-    <button ion-button (click)="goToReportView('categories')" block large>
+    <button ion-button (click)="goToReportView('categories')" full clear icon-left large>
         <ion-icon name="list"></ion-icon>
         Categorias
     </button>
 
-    <button ion-button (click)="goToReportView('sellers')" block large>
+    <button ion-button (click)="goToReportView('sellers')" full clear icon-left large>
         <ion-icon name="briefcase"></ion-icon>
         Vendedores
     </button>

src/pages/reports/index/reports.scss

@@ -1,3 +1,16 @@
 page-reports {
+    .button-clear-wp,
+    .button-clear-md,
+    .button-clear-ios {
+        color: #FFF;
+    }
 
+    .button-clear-md {
+        border-top: 1px solid rgba(255, 255, 255, .2);
+        text-transform: capitalize;
+
+        &:last-child {
+            border-bottom: 1px solid rgba(255, 255, 255, .2);
+        }
+    }
 }

src/pages/reports/view/reports-view.html

@@ -6,15 +6,35 @@
 -->
 <ion-header>
     <ion-navbar>
-        <ion-title>Listagem</ion-title>
+        <ion-title>{{ pageTitle }}</ion-title>
+
+        <ion-buttons end>
+            <button ion-button icon-only (click)="presentPopover($event)">
+                <ion-icon name="more"></ion-icon>
+            </button>
+        </ion-buttons>
     </ion-navbar>
+
+    <ion-toolbar>
+        <ion-title *ngIf="loaded">Total: {{ reports.total | currency:'BRL':'R$' }}</ion-title>
+    </ion-toolbar>
 </ion-header>
 
 <ion-content>
-    <ion-list class="single-item">
-        <ion-item *ngFor="let report of reports" class="list-item" (click)="goToDetails(report.id)">
+    <ion-list class="single-item" *ngIf="loaded">
+        <ion-item *ngFor="let report of reports.list" class="list-item" (click)="goToDetails(report.id)">
+            <ion-avatar item-start>
+                <img src="assets/images/placeholder-60.jpg" alt="" width="60" height="60">
+            </ion-avatar>
+
             <div class="highlight">{{ report.name }}</div>
             <div>Total: {{ report.total | currency:'BRL':'R$' }}</div>
         </ion-item>
     </ion-list>
 </ion-content>
+
+<ion-footer>
+    <ion-toolbar>
+        <ion-title>Período: {{ periodTitle }}</ion-title>
+    </ion-toolbar>
+</ion-footer>