Skip to content

Commit bed29c4

Browse files
volodyakurpitavolodyakurpita
committed
Add date of last update to list view - implement base functionality
1 parent 8492e3c commit bed29c4

File tree

8 files changed

+264
-232
lines changed

8 files changed

+264
-232
lines changed

‎app/tabs/cost/cost.component.css‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
1-
ActionBar {
2-
background-color: #7ada2f;
3-
color: aliceblue;
4-
}
5-
6-
.list-header-button {
7-
text-align: center;
8-
vertical-align: middle;
9-
color: #7d7d7d;
10-
font-weight: bold;
11-
font-size: 16pt;
12-
}
13-
14-
.add-bar {
15-
height: 60;
1+
ActionBar {
2+
background-color: #7ada2f;
3+
color: aliceblue;
4+
}
5+
6+
.list-header-button {
7+
text-align: center;
8+
vertical-align: middle;
9+
color: #7d7d7d;
10+
font-weight: bold;
11+
font-size: 16pt;
12+
}
13+
14+
.list-group-item-date {
15+
text-align: right;
16+
vertical-align: middle;
17+
color: #7d7d7d;
18+
font-size: 14pt;
19+
padding-right: 30pt;
20+
}
21+
22+
.add-bar {
23+
height: 60;
1624
}

‎app/tabs/cost/cost.service.ts‎

Lines changed: 54 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,54 @@
1-
import { Injectable } from "@angular/core";
2-
import * as Rx from "rxjs/Rx";
3-
4-
import { Cost } from "./cost";
5-
6-
@Injectable()
7-
export class CostService {
8-
private costsListSource: Rx.BehaviorSubject<Cost[]>;
9-
private backing_costsListObservable: Rx.Observable<Cost[]>;
10-
11-
constructor() {
12-
this.costsListSource = new Rx.BehaviorSubject<Cost[]>(this.costs);
13-
this.backing_costsListObservable = this.costsListSource.asObservable();
14-
}
15-
16-
private costs = new Array<Cost>(
17-
{ id: 0, quantity: 310, type: "Products" },
18-
{ id: 1, quantity: 25, type: "Products" },
19-
{ id: 2, quantity: 127, type: "ForHome" },
20-
{ id: 3, quantity: 80, type: "Products" },
21-
{ id: 4, quantity: 32, type: "Products" },
22-
{ id: 5, quantity: 235, type: "Products" },
23-
{ id: 6, quantity: 98, type: "ForHome" },
24-
{ id: 7, quantity: 105, type: "Products" },
25-
{ id: 8, quantity: 80, type: "Products" },
26-
{ id: 9, quantity: 75, type: "Products" },
27-
{ id: 10, quantity: 235, type: "Products" },
28-
{ id: 11, quantity: 264, type: "ForHome" },
29-
{ id: 12, quantity: 78, type: "Products" }
30-
);
31-
32-
public get costsListObservable(): Rx.Observable<Cost[]> {
33-
return this.backing_costsListObservable;
34-
}
35-
36-
getCost(id: number): Cost {
37-
return this.costsListSource.getValue().filter(cost => cost.id === id)[0];
38-
}
39-
40-
addCost(newCost: Cost) {
41-
let activeCosts = this.costsListSource.getValue();
42-
activeCosts.push(newCost);
43-
this.costsListSource.next(activeCosts);
44-
}
45-
46-
deleteCost(costForDelete: Cost) {
47-
let activeCosts = this.costsListSource.getValue();
48-
var index = activeCosts.indexOf(costForDelete);
49-
activeCosts.splice(index, 1);
50-
this.costsListSource.next(activeCosts);
51-
52-
alert(costForDelete.quantity + " removed!");
53-
}
54-
}
1+
import { Injectable } from "@angular/core";
2+
import * as Rx from "rxjs/Rx";
3+
4+
import { Cost } from "./cost";
5+
6+
@Injectable()
7+
export class CostService {
8+
private costsListSource: Rx.BehaviorSubject<Cost[]>;
9+
private backing_costsListObservable: Rx.Observable<Cost[]>;
10+
11+
constructor() {
12+
this.costsListSource = new Rx.BehaviorSubject<Cost[]>(this.costs);
13+
this.backing_costsListObservable = this.costsListSource.asObservable();
14+
}
15+
16+
private costs = new Array<Cost>(
17+
{ id: 0, quantity: 310, type: "Products", changesDate: "July 23 2017" },
18+
{ id: 1, quantity: 25, type: "Products", changesDate: "Aug 03 2017" },
19+
{ id: 2, quantity: 127, type: "ForHome", changesDate: "Sep 09 2017" },
20+
{ id: 3, quantity: 80, type: "Products", changesDate: "May 22 2017" },
21+
{ id: 4, quantity: 32, type: "Products", changesDate: "Nov 13 2017" },
22+
{ id: 5, quantity: 235, type: "Products", changesDate: "Jan 31 2017" },
23+
{ id: 6, quantity: 98, type: "ForHome", changesDate: "Feb 20 2017" },
24+
{ id: 7, quantity: 105, type: "Products", changesDate: "Oct 01 2017" },
25+
{ id: 8, quantity: 80, type: "Products", changesDate: "June 15 2017" },
26+
{ id: 9, quantity: 75, type: "Products", changesDate: "Sep 08 2017" },
27+
{ id: 10, quantity: 235, type: "Products", changesDate: "Nov 26 2017" },
28+
{ id: 11, quantity: 264, type: "ForHome", changesDate: "May 30 2017" },
29+
{ id: 12, quantity: 78, type: "Products", changesDate: "April 04 2017" }
30+
);
31+
32+
public get costsListObservable(): Rx.Observable<Cost[]> {
33+
return this.backing_costsListObservable;
34+
}
35+
36+
getCost(id: number): Cost {
37+
return this.costsListSource.getValue().filter(cost => cost.id === id)[0];
38+
}
39+
40+
addCost(newCost: Cost) {
41+
let activeCosts = this.costsListSource.getValue();
42+
activeCosts.push(newCost);
43+
this.costsListSource.next(activeCosts);
44+
}
45+
46+
deleteCost(costForDelete: Cost) {
47+
let activeCosts = this.costsListSource.getValue();
48+
var index = activeCosts.indexOf(costForDelete);
49+
activeCosts.splice(index, 1);
50+
this.costsListSource.next(activeCosts);
51+
52+
alert(costForDelete.quantity + " removed!");
53+
}
54+
}

‎app/tabs/cost/cost.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
export class Cost {
2-
id: number;
3-
quantity: number;
4-
type: string;
5-
}
1+
export class Cost {
2+
id: number;
3+
quantity: number;
4+
type: string;
5+
changesDate: string;
6+
}

‎app/tabs/cost/costs.component.html‎

Lines changed: 43 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,43 @@
1-
<ActionBar title="Last Costs"
2-
class="action-bar">
3-
</ActionBar>
4-
5-
<StackLayout class="page"
6-
orientation="vertical">
7-
<GridLayout row="0"
8-
columns="*, 70"
9-
class="add-bar">
10-
<TextField #newCostTextField
11-
[(ngModel)]="newCost"
12-
hint="Enter a cost item"
13-
col="0"></TextField>
14-
<!-- <Image src="res://add"
15-
col="1"
16-
(tap)="add()"></Image> -->
17-
<Label col="1"
18-
text="Add"
19-
(tap)="add()"
20-
class="list-header-button"></Label>
21-
</GridLayout>
22-
<ListView row="1"
23-
[items]="costService.costsListObservable | async"
24-
class="list-group">
25-
<ng-template let-item="item">
26-
<GridLayout row="0"
27-
columns="*, auto, 10">
28-
<Label [nsRouterLink]="['/cost', item.id]"
29-
[text]="item.quantity"
30-
class="list-group-item"
31-
col="0"></Label>
32-
<Label [nsRouterLink]="['/cost', item.id]"
33-
[text]="item.type"
34-
class="tag-item"
35-
col="1"></Label>
36-
</GridLayout>
37-
</ng-template>
38-
</ListView>
39-
</StackLayout>
1+
<ActionBar title="Last Costs"
2+
class="action-bar">
3+
</ActionBar>
4+
5+
<StackLayout class="page"
6+
orientation="vertical">
7+
<GridLayout row="0"
8+
columns="*, 70"
9+
class="add-bar">
10+
<TextField #newCostTextField
11+
[(ngModel)]="newCost"
12+
hint="Enter a cost item"
13+
col="0"></TextField>
14+
<!-- <Image src="res://add"
15+
col="1"
16+
(tap)="add()"></Image> -->
17+
<Label col="1"
18+
text="Add"
19+
(tap)="add()"
20+
class="list-header-button"></Label>
21+
</GridLayout>
22+
<ListView row="1"
23+
[items]="costService.costsListObservable | async"
24+
class="list-group">
25+
<ng-template let-item="item">
26+
<GridLayout row="0"
27+
columns="*, auto, 10">
28+
<Label [nsRouterLink]="['/cost', item.id]"
29+
[text]="item.quantity"
30+
class="list-group-item"
31+
col="0"></Label>
32+
<Label [nsRouterLink]="['/cost', item.id]"
33+
[text]="item.changesDate"
34+
class="list-group-item-date"
35+
col="0"></Label>
36+
<Label [nsRouterLink]="['/cost', item.id]"
37+
[text]="item.type"
38+
class="tag-item"
39+
col="1"></Label>
40+
</GridLayout>
41+
</ng-template>
42+
</ListView>
43+
</StackLayout>

‎app/tabs/cost/costs.component.ts‎

Lines changed: 44 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,45 @@
1-
import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
2-
import { TextField } from "ui/text-field";
3-
4-
import { Cost } from "./cost";
5-
import { CostService } from "./cost.service";
6-
7-
@Component({
8-
selector: "costs",
9-
moduleId: module.id,
10-
templateUrl: "./costs.component.html",
11-
styleUrls: ["./cost.component.css"]
12-
})
13-
export class CostsComponent implements OnInit {
14-
newCost: string = '';
15-
16-
@ViewChild("newCostTextField") newCostTextField: ElementRef;
17-
18-
constructor(private costService: CostService) { }
19-
20-
ngOnInit(): void {
21-
// this.costService.costsListObservable.subscribe((costs) => {
22-
// if(costs) {
23-
// this.costs = costs;
24-
// }
25-
// });
26-
}
27-
28-
add() {
29-
if (this.newCost.trim() === "") {
30-
alert("Enter a grocery item");
31-
return;
32-
}
33-
let textField = <TextField>this.newCostTextField.nativeElement;
34-
textField.dismissSoftInput();
35-
36-
let cost:Cost = new Cost();
37-
cost.id = Math.random();
38-
cost.quantity = Number(this.newCost);
39-
cost.type = "TestType";
40-
41-
this.costService.addCost(cost);
42-
this.newCost = "";
43-
}
1+
import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
2+
import { TextField } from "ui/text-field";
3+
4+
import { Cost } from "./cost";
5+
import { CostService } from "./cost.service";
6+
7+
@Component({
8+
selector: "costs",
9+
moduleId: module.id,
10+
templateUrl: "./costs.component.html",
11+
styleUrls: ["./cost.component.css"]
12+
})
13+
export class CostsComponent implements OnInit {
14+
newCost: string = '';
15+
16+
@ViewChild("newCostTextField") newCostTextField: ElementRef;
17+
18+
constructor(private costService: CostService) { }
19+
20+
ngOnInit(): void {
21+
// this.costService.costsListObservable.subscribe((costs) => {
22+
// if(costs) {
23+
// this.costs = costs;
24+
// }
25+
// });
26+
}
27+
28+
add() {
29+
if (this.newCost.trim() === "") {
30+
alert("Enter a grocery item");
31+
return;
32+
}
33+
let textField = <TextField>this.newCostTextField.nativeElement;
34+
textField.dismissSoftInput();
35+
36+
let cost:Cost = new Cost();
37+
cost.id = Math.random();
38+
cost.quantity = Number(this.newCost);
39+
cost.type = "TestType";
40+
cost.changesDate = Date.now().toString();
41+
42+
this.costService.addCost(cost);
43+
this.newCost = "";
44+
}
4445
}

‎app/tabs/cost/detail/cost-detail.component.css‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
ActionBar {
2-
background-color: #7ada2f;
3-
color: aliceblue;
4-
}
1+
ActionBar {
2+
background-color: #7ada2f;
3+
color: aliceblue;
4+
}
5+
6+
.item-details {
7+
text-align: right;
8+
margin-left: 60%;
9+
vertical-align: middle;
10+
font-size: 16pt;
11+
padding-top: 5pt;
12+
}

0 commit comments

Comments
 (0)