refactor

ALPNP · Aug 9, 2017 · 6d7c57a · 6d7c57a
1 parent c08c393
commit 6d7c57a
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 39 deletions.
diff --git a/src/app/modules/finance/components/costs-chart-layout/costs-chart-layout.component.html b/src/app/modules/finance/components/costs-chart-layout/costs-chart-layout.component.html
@@ -1,6 +1,4 @@
 <div *ngIf="chartDataSet">
-    <p>Финансовый отчет с {{chartLabels[0]}} по {{chartLabels[chartLabels.length - 1]}}</p>
-    <p>Текущий интервал - {{intervalViewName}}.</p>
     <div class="chart-switch-container">
         <button md-icon-button mdTooltip="Линейный график" [mdTooltipPosition]="'above'" (click)="switchChart('line')">
             <md-icon>

diff --git a/src/app/modules/finance/components/costs-chart-layout/costs-chart-layout.component.ts b/src/app/modules/finance/components/costs-chart-layout/costs-chart-layout.component.ts
@@ -1,28 +1,48 @@
-import {Component, Output, EventEmitter} from "@angular/core";
+import {Component, Output, EventEmitter, OnInit, Input} from "@angular/core";
 
 @Component({
     selector: 'costs-chart-layout',
     templateUrl: 'costs-chart-layout.component.html',
     styleUrls: ['costs-chart-layout.component.scss']
 })
-export class CostsChartLayoutComponent {
-
+export class CostsChartLayoutComponent implements OnInit {
+    @Input() service: any;
+    @Input() params: any;
     @Output() chartClick = new EventEmitter<boolean>();
     @Output() chartHover = new EventEmitter<boolean>();
-
-    public intervalViewName: string = 'последние 7 дней';
-
     public chartDataSet: boolean = false;
     public chartData: Array<any> = [{data: []}];
     public chartLabels: Array<any> = [];
-
     public chartType: string = 'line';
     public chartLegend: boolean = true;
+    public currentDay: string;
 
     constructor() {
 
     }
 
+    ngOnInit() {
+        this.getChart();
+    }
+
+    getChart(options?: any) {
+        let fetchMethod = 'fetch';
+
+        if (this.params && this.params['fetchMethod']) {
+            fetchMethod = this.params['fetchMethod'];
+        }
+
+        this.service[fetchMethod](options).subscribe(
+            data => {
+                this.currentDay = data['currentDay'];
+                this.setChartData(data['chart']);
+            },
+            err => {
+                console.log(err);
+            }
+        );
+    }
+
     setChartData(chartData) {
         this.chartData = chartData['chartData'];
         this.chartLabels = chartData['chartLabels'];

diff --git a/src/app/modules/finance/components/costs-chart/costs-chart.component.html b/src/app/modules/finance/components/costs-chart/costs-chart.component.html
@@ -1,9 +1,9 @@
 <md-card class="costs-chart">
     <md-card-header class="costs-chart-header">
-        <md-card-title>Бюджет:</md-card-title>
+        <md-card-title>График операций:</md-card-title>
         <md-card-subtitle></md-card-subtitle>
     </md-card-header>
     <md-card-content>
-        <costs-chart-layout (chartClick)="chartClick($event)" (charthover)="chartHover($event)"></costs-chart-layout>
+        <costs-chart-layout (chartClick)="chartClick($event)" (charthover)="chartHover($event)" [service]="costsService" [params]="chartLayoutParams"></costs-chart-layout>
     </md-card-content>
 </md-card>
diff --git a/src/app/modules/finance/components/costs-chart/costs-chart.component.ts b/src/app/modules/finance/components/costs-chart/costs-chart.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, ViewChild} from '@angular/core';
 import {CostsChartLayoutComponent} from "../costs-chart-layout/costs-chart-layout.component";
 import {CostsService} from "../../services/costs.service";
 
@@ -7,29 +7,18 @@ import {CostsService} from "../../services/costs.service";
     templateUrl: 'costs-chart.component.html',
     styleUrls: ['costs-chart.component.scss']
 })
-export class CostsChartComponent implements OnInit {
-
+export class CostsChartComponent {
     @ViewChild(CostsChartLayoutComponent) private costsChartLayoutComponent: CostsChartLayoutComponent;
-    public currentDay: string;
-
-    constructor(private costsService: CostsService) {
-
-    }
+    chartLayoutParams: any;
 
-    ngOnInit() {
-        this.getChart();
+    constructor(public costsService: CostsService) {
+            this.chartLayoutParams = {
+                fetchMethod: 'getCostsChart'
+            }
     }
 
-    getChart(options?: any) {
-        this.costsService.getCostsChart(options).subscribe(
-            data => {
-                this.currentDay = data['currentDay'];
-                this.costsChartLayoutComponent.setChartData(data['chart']);
-            },
-            err => {
-                console.log(err);
-            }
-        );
+    updateChart() {
+        this.costsChartLayoutComponent.getChart();
     }
 
     chartClick(e: any) {

diff --git a/src/app/modules/finance/components/costs-list/costs-list.component.html b/src/app/modules/finance/components/costs-list/costs-list.component.html
@@ -1,4 +1,11 @@
 <md-card class="costs-list">
+    <div class="costs-list-cost-counter">
+        <md-chip-list>
+            <md-chip>
+                {{costs['length']}}
+            </md-chip>
+        </md-chip-list>
+    </div>
     <md-card-header class="costs-list-header">
         <md-card-title>Операции:</md-card-title>
         <md-card-subtitle></md-card-subtitle>

diff --git a/src/app/modules/finance/components/costs-list/costs-list.component.scss b/src/app/modules/finance/components/costs-list/costs-list.component.scss
@@ -10,6 +10,18 @@
     overflow: hidden;
 }
 
+.costs-list-cost-counter {
+    position: absolute;
+    right: 1.5rem;
+    top: 1.0rem;
+
+    md-chip-list {
+        :focus {
+            outline: none;
+        }
+    }
+}
+
 .costs-list-cost {
 
     :first-child {
@@ -21,6 +33,3 @@
     border: solid 1px $primary-color-light;
     border-radius: 5px;
 }
-
-.costs-list {
-}
diff --git a/src/app/modules/finance/components/costs-statistic/costs-statistic.component.html b/src/app/modules/finance/components/costs-statistic/costs-statistic.component.html
@@ -4,6 +4,7 @@
         <md-card-subtitle></md-card-subtitle>
     </md-card-header>
     <md-card-content>
-
+        <p>Финансовый отчет с {{firstDay}} по {{lastDay}}</p>
+        <p>Текущий интервал - {{'интервал'}}.</p>
     </md-card-content>
 </md-card>
diff --git a/src/app/modules/finance/components/costs-statistic/costs-statistic.component.ts b/src/app/modules/finance/components/costs-statistic/costs-statistic.component.ts
@@ -1,11 +1,21 @@
-import {Component} from "@angular/core";
+import {Component, OnInit} from "@angular/core";
 
 @Component({
     selector: 'costs-statistic',
     templateUrl: './costs-statistic.component.html',
     styleUrls: ['./costs-statistic.component.scss']
 })
-export class CostsStatisticComponent {
+export class CostsStatisticComponent implements OnInit {
+
+    firstDay: string;
+    lastDay: string;
+    statisticData: any;
+
     constructor() {
+
+    }
+
+    ngOnInit() {
+
     }
 }
diff --git a/src/app/modules/finance/components/costs/costs.component.ts b/src/app/modules/finance/components/costs/costs.component.ts
@@ -19,6 +19,6 @@ export class CostsComponent {
 
     requestModifiedData() {
         this.costsListComponent.getCosts();
-        this.costsChartComponent.getChart();
+        this.costsChartComponent.updateChart();
     }
 }
diff --git a/src/app/modules/finance/finance.module.ts b/src/app/modules/finance/finance.module.ts
@@ -20,7 +20,7 @@ import {
     MdSelectModule,
     MdGridListModule,
     MdProgressSpinnerModule,
-    MdListModule
+    MdListModule, MdChipsModule
 } from '@angular/material';
 import {CommonModule} from "@angular/common";
 import {ReactiveFormsModule} from "@angular/forms";
@@ -39,6 +39,7 @@ import {CostsStatisticComponent} from "./components/costs-statistic/costs-statis
         MdDialogModule,
         MdGridListModule,
         MdCardModule,
+        MdChipsModule,
         MdInputModule,
         MdTooltipModule,
         MdIconModule,