· 6 years ago · Jan 29, 2019, 09:42 AM
1import { Component } from '@angular/core';
2import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
3import { ModalReportsProfitsRankingsPage } from '../modal-reports-profits-rankings/modal-reports-profits-rankings';
4import { HTTP } from '@ionic-native/http';
5import { HelperProvider } from '../../providers/helper/helper';
6import { PassportProvider } from '../../providers/passport/passport';
7
8@IonicPage()
9@Component({
10 selector: 'page-reports',
11 templateUrl: 'reports.html',
12})
13export class ReportsPage {
14
15 oauthToken: any
16 productList: any
17 loader: string = 'show'
18 reports: any
19 reportList: Array<{
20 name: string
21 }>
22 reportListFiltered: any
23 query: string
24
25 constructor(
26 public navCtrl: NavController,
27 public navParams: NavParams,
28 public modalCtrl: ModalController,
29 public http: HTTP,
30 public helper: HelperProvider,
31 public passport: PassportProvider
32 ) {
33 this.reportList = []
34 this.reportListFiltered = []
35 this.passport.oauthToken(
36 this.helper.getApi(),
37 1,
38 this.helper.GetclientSecret()
39 ).then(data => {
40 this.oauthToken = JSON.parse(data.data)
41 this.loadReports()
42 })
43 }
44
45 loadReports() {
46 this.http.get(this.helper.getApi() + '/api/store-reports', {}, {
47 'Accept': 'application/json',
48 'Authorization': 'Bearer ' + this.oauthToken.access_token
49 }).then(data => {
50 let res = JSON.parse(data.data)
51 this.reportList = res.data
52
53 this.reportList.forEach(element => {
54 let tmp = element
55 this.reportListFiltered.push({
56 invoice_no: tmp.invoice_no,
57 type: tmp.type,
58 payment: tmp.payment,
59 exchange: tmp.exchange,
60 total: tmp.total
61 })
62 })
63 })
64 }
65
66<ion-header>
67 <ion-navbar hideBackButton>
68 <button ion-button menuToggle>
69 <span class="lnr lnr-menu"></span>
70 </button>
71 <ion-title>
72 Reports
73 </ion-title>
74 </ion-navbar>
75</ion-header>
76
77<ion-content padding>
78
79 <div class="fluid big ui buttons">
80 <button class="blue ui button">Profits</button>
81 <button class="ui button">Expenses</button>
82 <button class="ui button">Invoices</button>
83 </div>
84
85 <div class="fluid ui card my-5">
86 <div class="content">
87 <div class="header">Sales report</div>
88 <div class="mini fluid basic ui buttons my-3">
89 <button class="ui button">Day</button>
90 <button class="ui button">Week</button>
91 <button class="ui button">Month</button>
92 </div>
93 <div class="description">
94 <table class="unstackable ui celled table">
95 <tbody>
96 <tr>
97 <td>
98 Purchase cost:
99 <br>
100 <small>
101 P555 <!-- This is where I want to print the total -->
102 </small>
103 </td>
104 <td>
105 Gross sales:
106 <br>
107 <small>
108 P36,020
109 (P10,000)
110 </small>
111 </td>
112 </tr>
113 <tr>
114 <td>
115 Expenses:
116 <br>
117 <small>
118 P36,020
119 </small>
120 </td>
121 <td>
122 Gross profit:
123 <br>
124 <small>
125 P36,020
126 </small>
127 </td>
128 </tr>
129 </tbody>
130 </table>
131 </div>
132 </div>
133 <div class="extra content">
134 <span class="right floated" (click)="showModalReportsProfitsRankings()">
135 View rankings <i class="chevron right icon"></i>
136 </span>
137 </div>
138 </div>
139
140</ion-content>
141
142<ion-footer>
143 <ion-toolbar>
144 <ion-grid>
145 <ion-row>
146 <ion-col>
147 <h4 class="my-3 text-center">December 23 - February 25</h4>
148 <div class="big fluid ui icon buttons">
149 </div>
150 </ion-col>
151 </ion-row>
152 </ion-grid>
153 </ion-toolbar>
154</ion-footer>