Add «Add to favorites» functionality;

volodyakurpita · volodyakurpita · commit de7c93098b7c · 2017-08-29T12:52:36.000+03:00
add small changes in calendar functionality
diff --git a/app/app.css b/app/app.css
@@ -15,6 +15,6 @@
 }
 
 .action-item {
-    padding-right: 10;
+    padding-right: 20;
     font-size: 16pt;
 }
diff --git a/app/list/list.component.css b/app/list/list.component.css
@@ -3,5 +3,8 @@
     vertical-align: middle;
     color: #7d7d7d;
     font-size: 14pt;
-    padding-right: 20pt;
+}
+
+.list-group-item-favorite {
+    vertical-align: middle;
 }
diff --git a/app/list/list.component.html b/app/list/list.component.html
@@ -1,21 +1,25 @@
 <ListView row="1"
-              [items]="items" 
-              class="list-group">
+          [items]="items" 
+          class="list-group">
         <ng-template let-item="item">
             <GridLayout row="0" 
-                        columns="*, auto, 10">
+                        columns="*, 100, 100, 100">
                 <Label [nsRouterLink]="['/cost', item.id]" 
                        [text]="item.quantity"
                        class="list-group-item"
                        col="0"></Label>
                 <Label [nsRouterLink]="['/cost', item.id]" 
                        [text]="item.changesDate"
                        class="list-group-item-date"
-                       col="0"></Label>       
+                       col="1"></Label>             
                 <Label [nsRouterLink]="['/cost', item.id]" 
                        [text]="item.type"
                        class="tag-item"
-                       col="1"></Label>
+                       col="2"></Label>    
+                <Label [nsRouterLink]="['/cost', item.id]" 
+                       [text]="item.isFavorite === true ? 'Favorite' : 'Not Favorite'"
+                       class="list-group-item-favorite"
+                       col="3"></Label>              
             </GridLayout>
         </ng-template>
 </ListView>
diff --git a/app/tabs/calendar/calendar.component.html b/app/tabs/calendar/calendar.component.html
@@ -5,5 +5,5 @@
                         (stateChanged)="onDateRangeStateChangedHandler()"></calendar-date-range>
    <calendar-date-range-cost-list *ngIf="state == 'dateFilteredList'"
                                   (stateChanged)="onDateRangeCostListChangedHandler()"
-                                  [filteredCostList]="filteredCostList"></calendar-date-range-cost-list>
+                                  [filteredCosts]="filteredCosts"></calendar-date-range-cost-list>
 </StackLayout>
diff --git a/app/tabs/calendar/calendar.component.ts b/app/tabs/calendar/calendar.component.ts
@@ -12,26 +12,31 @@ import { Cost } from "../cost/cost";
 })
 export class CalendarComponent {
     private state: string = 'dateSelect';
-    private costList:Array<Cost> = new Array<Cost>();
-    public filteredCostList:Array<Cost> = new Array<Cost>();
+    public filteredCosts: Cost[] = new Array<Cost>();
+    public allCosts: Cost[] = new Array<Cost>();
 
     constructor(private costService:CostService){}
+
+    ngOnInit() {
+        this.costService.costsListObservable.subscribe((costs) => {
+            this.allCosts = costs;
+        });
+    }
     
     onSendDateChange(args) {
         let startDateRange = new Date(args.startDate);
         let endDateRange = new Date(args.endDate);
+        let costs: Cost[] = new Array<Cost>();
 
-        this.costService.costsListObservable.subscribe((costs) => {
-            for (var index = 0; index < costs.length; index++) {
-                let currentCostDate = new Date(costs[index].changesDate);
-                if(currentCostDate >= startDateRange && currentCostDate <= endDateRange) {
-                    this.costList.push(costs[index]);
-                }
+        this.allCosts.forEach(cost => {
+            let currentCostDate = new Date(cost.changesDate);
+            if(currentCostDate >= startDateRange && currentCostDate <= endDateRange) {
+                costs.push(cost);
             }
-            this.filteredCostList = this.costList;
-            //this.costList.pop();
-            //this.filterDate.pop();
         });
+        this.filteredCosts = costs;
+        //this.costList.pop();
+        //this.filterDate.pop();
     }
 
     onDateRangeStateChangedHandler() {
diff --git a/app/tabs/calendar/date-range-cost-list/calendar-date-range-cost-list.component.html b/app/tabs/calendar/date-range-cost-list/calendar-date-range-cost-list.component.html
@@ -1,2 +1,2 @@
-<list [items]="filteredCostList"></list>
+<list [items]="filteredCosts"></list>
 <Label text="Back to 'Calendar'" (tap)="onTap()"></Label>
diff --git a/app/tabs/calendar/date-range-cost-list/calendar-date-range-cost-list.component.ts b/app/tabs/calendar/date-range-cost-list/calendar-date-range-cost-list.component.ts
@@ -12,7 +12,7 @@ import { CostService } from "../../../tabs/cost/cost.service";
 export class CalendarDateRangeCostListComponent {
    
     @Output() stateChanged = new EventEmitter();
-    @Input() filteredCostList:Array<Cost>;
+    @Input() filteredCosts:Array<Cost>;
 
     onTap(){
         this.stateChanged.next("");
diff --git a/app/tabs/calendar/date-range/calendar-date-range.component.html b/app/tabs/calendar/date-range/calendar-date-range.component.html
@@ -1,11 +1,11 @@
 <StackLayout orientation="vertical" 
              id="date-picker-from">     
-    <DatePicker (loaded)="onPickerLoaded($event)" 
+    <DatePicker (loaded)="onStartPickerLoaded($event)" 
                 (dateChange)="onStartDateChange($event)"></DatePicker>
 </StackLayout>
 <StackLayout orientation="vertical" 
              id="date-picker-to"> 
-    <DatePicker (loaded)="onPickerLoaded($event)" 
+    <DatePicker (loaded)="onEndPickerLoaded($event)" 
                 (dateChange)="onEndDateChange($event)"></DatePicker>
 </StackLayout>
     
diff --git a/app/tabs/calendar/date-range/calendar-date-range.component.ts b/app/tabs/calendar/date-range/calendar-date-range.component.ts
@@ -28,20 +28,29 @@ export class CalendarDateRangeComponent {
         this.sendDateChange.next(dateRange);
     }
 
-    onPickerLoaded(args) {
+    onStartPickerLoaded(args) {
         let datePicker = <DatePicker>args.object;
-        
-        datePicker.minDate = new Date(2017, 0, 1);
-        datePicker.maxDate = new Date(2017, 11, 12);
+        datePicker.date = new Date();
+        this._startDate = datePicker.date.toDateString();
+        console.log(this._startDate);
+    }
+    
+    onEndPickerLoaded(args) {
+        let datePicker = <DatePicker>args.object;
+        datePicker.date = new Date();
+        this._endDate = datePicker.date.toDateString();
+        console.log(this._endDate);
     }
 
     onStartDateChange(args) {
         let startDateStr: string = args.value;
         this._startDate = startDateStr;
+        console.log(this._startDate);
     }
 
     onEndDateChange(args) {
         let endDateStr: string = args.value;
         this._endDate = endDateStr;
+        console.log(this._endDate);
     }
 }
diff --git a/app/tabs/cost/cost.service.ts b/app/tabs/cost/cost.service.ts
@@ -14,19 +14,19 @@ export class CostService {
     }
 
     private costs = new Array<Cost>(
-        { id: 0, quantity: 310, type: "Products", changesDate: "Jul 01 2017" },
-        { id: 1, quantity: 25, type: "Products", changesDate: "Aug 03 2017" },
-        { id: 2, quantity: 127, type: "ForHome", changesDate: "Jun 09 2017" },
-        { id: 3, quantity: 80, type: "Products", changesDate: "May 22 2017" },
-        { id: 4, quantity: 32, type: "Products", changesDate: "Nov 13 2017" },
-        { id: 5, quantity: 235, type: "Products", changesDate: "Jan 31 2017" },
-        { id: 6, quantity: 98, type: "ForHome", changesDate: "Feb 20 2017" },
-        { id: 7, quantity: 105, type: "Products", changesDate: "Oct 01 2017" },
-        { id: 8, quantity: 80, type: "Products", changesDate: "Aug 15 2017" },
-        { id: 9, quantity: 75, type: "Products", changesDate: "Aug 08 2017" },
-        { id: 10, quantity: 235, type: "Products", changesDate: "Aug 26 2017" },
-        { id: 11, quantity: 264, type: "ForHome", changesDate: "May 30 2017" },
-        { id: 12, quantity: 78, type: "Products", changesDate: "April 04 2017" }
+        { id: 0, quantity: 310, type: "Products", changesDate: "Jul 01 2017", isFavorite: false },
+        { id: 1, quantity: 25, type: "Products", changesDate: "Aug 03 2017", isFavorite: false },
+        { id: 2, quantity: 127, type: "ForHome", changesDate: "Aug 29 2017", isFavorite: false },
+        { id: 3, quantity: 80, type: "Products", changesDate: "Aug 29 2017", isFavorite: false },
+        { id: 4, quantity: 32, type: "Products", changesDate: "Nov 13 2017", isFavorite: false },
+        { id: 5, quantity: 235, type: "Products", changesDate: "Jan 31 2017", isFavorite: false },
+        { id: 6, quantity: 98, type: "ForHome", changesDate: "Feb 20 2017", isFavorite: false },
+        { id: 7, quantity: 105, type: "Products", changesDate: "Oct 01 2017", isFavorite: false },
+        { id: 8, quantity: 80, type: "Products", changesDate: "Aug 29 2017", isFavorite: false },
+        { id: 9, quantity: 75, type: "Products", changesDate: "Aug 08 2017", isFavorite: false },
+        { id: 10, quantity: 235, type: "Products", changesDate: "Aug 26 2017", isFavorite: false },
+        { id: 11, quantity: 264, type: "ForHome", changesDate: "May 30 2017", isFavorite: false },
+        { id: 12, quantity: 78, type: "Products", changesDate: "April 04 2017", isFavorite: false }
     );
 
     public get costsListObservable(): Rx.Observable<Cost[]> {
diff --git a/app/tabs/cost/cost.ts b/app/tabs/cost/cost.ts
@@ -3,4 +3,5 @@ export class Cost {
     quantity: number;
     type: string;
     changesDate: string;
+    isFavorite:boolean;
 }
diff --git a/app/tabs/cost/costs.component.ts b/app/tabs/cost/costs.component.ts
@@ -38,6 +38,7 @@ export class CostsComponent implements OnInit {
         cost.quantity = Number(this.newCost);
         cost.type = "TestType";
         cost.changesDate = Date.now().toString();
+        cost.isFavorite = false;
 
         this.costService.addCost(cost);
         this.newCost = "";
diff --git a/app/tabs/cost/detail/cost-detail.component.css b/app/tabs/cost/detail/cost-detail.component.css
@@ -10,3 +10,8 @@ ActionBar {
     font-size: 16pt;
     padding-top: 5pt;
 }
+
+.favorite-label {
+    text-align: center;
+    vertical-align: middle;
+}
diff --git a/app/tabs/cost/detail/cost-detail.component.html b/app/tabs/cost/detail/cost-detail.component.html
@@ -11,7 +11,7 @@
                 ios.systemIcon="16" 
                 ios.position="right" 
                 android.position="right">
-        <Label text="Delete" 
+        <Label text="Delete"
                class="action-item"></Label>
     </ActionItem>
 </ActionBar>
@@ -22,8 +22,13 @@
         <Label class="h2" 
                [text]="cost.quantity"></Label>
         <Label class="date-label" 
-               [text]="cost.changesDate"></Label>       
+               [text]="cost.changesDate"></Label>            
     </FlexboxLayout>        
     <Label class="tag-item small-tag-item"
            [text]="cost.type"></Label>
+
+    <Label class="favorite-label" 
+           [text]="cost.isFavorite === true ? 'Favorite' : 'Not Favorite'"
+           (tap)="onTap()"></Label>
+                      
 </StackLayout>
diff --git a/app/tabs/cost/detail/cost-detail.component.ts b/app/tabs/cost/detail/cost-detail.component.ts
@@ -1,44 +1,48 @@
-import { Component, OnInit } from "@angular/core";
-import { ActivatedRoute } from "@angular/router";
-import { RouterExtensions } from "nativescript-angular/router";
-
-import { Cost } from "../cost";
-import { CostService } from "../cost.service";
-
-@Component({
-    selector: "details",
-    moduleId: module.id,
-    templateUrl: "./cost-detail.component.html",
-    styleUrls: ["./cost-detail.component.css"]
-})
-export class CostDetailComponent implements OnInit {
-    cost: Cost;
-
-    constructor(
-        private costService: CostService,
-        private route: ActivatedRoute,
-        private routerExtensions: RouterExtensions
-    ) { }
-
-    ngOnInit(): void {
-        const id = +this.route.snapshot.params["id"];
-        this.cost = this.costService.getCost(id);
-    }
-
-    onEditButtonTap(): void{
-        this.routerExtensions.navigate(["/cost-edit", this.cost.id],
-        {
-            animated: true,
-            transition: {
-                name: "slideTop",
-                duration: 200,
-                curve: "ease"
-            }
-        });
-    }
-
-    onDeleteButtonTap(): void{
-        this.costService.deleteCost(this.cost);
-        this.routerExtensions.back();
-    }
-}
+import { Component, OnInit, Output, EventEmitter } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+import { RouterExtensions } from "nativescript-angular/router";
+
+import { Cost } from "../cost";
+import { CostService } from "../cost.service";
+
+@Component({
+    selector: "details",
+    moduleId: module.id,
+    templateUrl: "./cost-detail.component.html",
+    styleUrls: ["./cost-detail.component.css"]
+})
+export class CostDetailComponent implements OnInit {
+    cost: Cost;
+    
+    constructor(
+        private costService: CostService,
+        private route: ActivatedRoute,
+        private routerExtensions: RouterExtensions
+    ) { }
+
+    ngOnInit(): void {
+        const id = +this.route.snapshot.params["id"];
+        this.cost = this.costService.getCost(id);
+    }
+
+    onEditButtonTap(): void{
+        this.routerExtensions.navigate(["/cost-edit", this.cost.id],
+        {
+            animated: true,
+            transition: {
+                name: "slideTop",
+                duration: 200,
+                curve: "ease"
+            }
+        });
+    }
+
+    onDeleteButtonTap(): void{
+        this.costService.deleteCost(this.cost);
+        this.routerExtensions.back();
+    }
+
+    onTap() {
+        this.cost.isFavorite = !this.cost.isFavorite;
+    }
+}

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,6 @@`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`.action-item {`
`18`		`- padding-right: 10;`
	`18`	`+ padding-right: 20;`
`19`	`19`	`font-size: 16pt;`
`20`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`		`-<list [items]="filteredCostList"></list>`
	`1`	`+<list [items]="filteredCosts"></list>`
`2`	`2`	`<Label text="Back to 'Calendar'" (tap)="onTap()"></Label>`