Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fixed category viewing and editing on several pages

Browse source
This commit is contained in:
piratefinn 2018-03-19 17:52:54 +00:00
parent cd2a47bfdd
commit e7c718250f
10 changed files with 37 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/app/dashboard/add-data.component.html
View file

@ -75,13 +75,13 @@
<label class="btn btn-secondary mb-0" [class.active]="categoryId == ''">
<input value="" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">Uncategorised
</label>
<label *ngFor="let category of leftCategoryList" class="btn btn-secondary mb-0" [class.active]="categoryId == category.id">
<input [value]="category.id" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ category.name }}
<label *ngFor="let category of leftCategoryList" class="btn btn-secondary mb-0" [class.active]="categoryId == category">
<input [value]="category" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ categoryList[category] }}
</label>
</div>
<div class="col-md-6 btn-group-vertical">
<label *ngFor="let category2 of rightCategoryList" class="btn btn-secondary mb-0" [class.active]=" categoryId == category2.id">
<input [value]="category2.id" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ category2.name }}
<label *ngFor="let category2 of rightCategoryList" class="btn btn-secondary mb-0" [class.active]=" categoryId == category2">
<input [value]="category2" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ categoryList[category2] }}
</label>
</div>
</div>

6
src/app/dashboard/add-data.component.ts
View file

@ -40,6 +40,8 @@ export class AddDataComponent implements OnInit {
transactionFormInvalid = true;
myDate: any;
minDate: any;
categoryList: any;
categoryIdList: any;
leftCategoryList: number[] = [];
rightCategoryList: string[] = [];
categoryId: number;
@ -72,7 +74,9 @@ export class AddDataComponent implements OnInit {
// this.myDate = new Date().toISOString().slice(0, 16);
this.api.categoryList().subscribe(
result => {
this.setCategoryList(result.categories);
this.categoryList = result.categories;
this.categoryIdList = Object.keys(this.categoryList);
this.setCategoryList(this.categoryIdList);
},
error => {
console.log('Retrieval Error');

24
src/app/dashboard/category-month.component.html
View file

@ -12,8 +12,8 @@
<ul *ngIf="weekList1" class="horizontal-bars type-2">
<li *ngIf="weekEssential1">
<span class="title">Essential Purchases</span>
<span class="value">{{ ( weekEssential1.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (weekEssential1.value || 0 ) / weekListValueSum1 | percent:'1.0-0' }})</span></span>
<span class="value">{{ ( weekEssential1 ? weekEssential1.value : 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ ( weekEssential1 ? weekEssential1.value : 0 ) / weekListValueSum1 | percent:'1.0-0' }})</span></span>
<div class="bars">
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar"
@ -22,7 +22,7 @@
</div>
</li>
<li *ngFor="let categoryEntry of weekList1 | slice:0:categoryLimit1; let i=index;">
<span class="title">{{ categoryNameList[categoryEntry.category - 1] || 'Uncategorised' }}</span>
<span class="title">{{ categoryList[categoryEntry.category] || 'Uncategorised' }}</span>
<span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (categoryEntry.value || 0 ) / weekListValueSum1 | percent:'1.0-0' }})</span></span>
<div class="bars">
@ -54,8 +54,8 @@
<ul *ngIf="weekList2" class="horizontal-bars type-2">
<li *ngIf="weekEssential2">
<span class="title">Essential Purchases</span>
<span class="value">{{ ( weekEssential2.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (weekEssential2.value || 0 ) / weekListValueSum2 | percent:'1.0-0' }})</span></span>
<span class="value">{{ ( weekEssential2 ? weekEssential2.value : 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ ( weekEssential2 ? weekEssential2.value : 0 ) / weekListValueSum2 | percent:'1.0-0' }})</span></span>
<div class="bars">
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar"
@ -64,7 +64,7 @@
</div>
</li>
<li *ngFor="let categoryEntry of weekList2 | slice:0:categoryLimit2; let i=index;">
<span class="title">{{ categoryNameList[categoryEntry.category - 1] || 'Uncategorised' }}</span>
<span class="title">{{ categoryList[categoryEntry.category] || 'Uncategorised' }}</span>
<span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (categoryEntry.value || 0 ) / weekListValueSum2 | percent:'1.0-0' }})</span></span>
<div class="bars">
@ -96,8 +96,8 @@
<ul *ngIf="weekList3" class="horizontal-bars type-2">
<li *ngIf="weekEssential3">
<span class="title">Essential Purchases</span>
<span class="value">{{ ( weekEssential1.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (weekEssential3.value || 0 ) / weekListValueSum3 | percent:'1.0-0' }})</span></span>
<span class="value">{{ ( weekEssential3 ? weekEssential3.value : 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ ( weekEssential3 ? weekEssential3.value : 0 ) / weekListValueSum3 | percent:'1.0-0' }})</span></span>
<div class="bars">
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar"
@ -106,7 +106,7 @@
</div>
</li>
<li *ngFor="let categoryEntry of weekList3 | slice:0:categoryLimit3; let i=index;">
<span class="title">{{ categoryNameList[categoryEntry.category - 1] || 'Uncategorised' }}</span>
<span class="title">{{ categoryList[categoryEntry.category] || 'Uncategorised' }}</span>
<span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (categoryEntry.value || 0 ) / weekListValueSum3 | percent:'1.0-0' }})</span></span>
<div class="bars">
@ -138,8 +138,8 @@
<ul *ngIf="weekList4" class="horizontal-bars type-2">
<li *ngIf="weekEssential4">
<span class="title">Essential Purchases</span>
<span class="value">{{ ( weekEssential4.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (weekEssential4.value || 0 ) / weekListValueSum4 | percent:'1.0-0' }})</span></span>
<span class="value">{{ ( weekEssential4 ? weekEssential4.value : 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ ( weekEssential4 ? weekEssential4.value : 0 ) / weekListValueSum4 | percent:'1.0-0' }})</span></span>
<div class="bars">
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar"
@ -148,7 +148,7 @@
</div>
</li>
<li *ngFor="let categoryEntry of weekList4 | slice:0:categoryLimit4; let i=index;">
<span class="title">{{ categoryNameList[categoryEntry.category - 1] || 'Uncategorised' }}</span>
<span class="title">{{ categoryList[categoryEntry.category] || 'Uncategorised' }}</span>
<span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (categoryEntry.value || 0 ) / weekListValueSum4 | percent:'1.0-0' }})</span></span>
<div class="bars">

12
src/app/dashboard/category-month.component.ts
View file

@ -31,15 +31,13 @@ export class CategoryMonthComponent implements OnInit {
weekEssential3: number = 0;
weekEssential4: number = 0;
categoryList: number[] = [];
categoryList: any;
dayList: any[] = [];
valueList: number[] = [];
myWeek1: any;
myWeek2: any;
myWeek3: any;
myWeek4: any;
categoryIdList: number[] = [];
categoryNameList: string[] = [];
categoryLimit1: number = 6;
categoryLimit2: number = 6;
categoryLimit3: number = 6;
@ -51,7 +49,8 @@ export class CategoryMonthComponent implements OnInit {
this.setDate();
this.api.categoryList().subscribe(
result => {
this.setCategoryList(result.categories);
this.categoryList = result.categories;
console.log('Category List received');
},
error => {
console.log('Retrieval Error');
@ -72,11 +71,6 @@ export class CategoryMonthComponent implements OnInit {
ngOnInit(): void {
}
private setCategoryList(data: any) {
this.categoryIdList = Object.keys(data.ids).map(key => data.ids[key]);
this.categoryNameList = Object.keys(data.names).map(key => data.names[key]);
}
private setDate () {
this.myWeek1 = moment().startOf('isoWeek').format('YYYY-MM-DD');
this.myWeek2 = moment(this.myWeek1).subtract(1, 'weeks').format('YYYY-MM-DD');

8
src/app/dashboard/transaction-log.component.html
View file

@ -50,7 +50,7 @@
<small>Select a Recurring Transaction below to edit it.</small>
</div>
<div *ngIf="!noRecurringList" class="card-block">
<recur-table [recurList]="recurringTransactionList" (onClick)="recurringTransactionDetails($event, template)"></recur-table>
<recur-table [recurList]="recurringTransactionList" [categories]="categoryList" (onClick)="recurringTransactionDetails($event, template)"></recur-table>
<ng-template #template>
<div class="modal-header d-flex justify-content-between">
<h4 class="modal-title">Edit Recurring Transaction</h4>
@ -105,9 +105,9 @@
<div class="col-md-9">
<div class="input-group">
<select type="text" class="form-control" [compareWith]="byId" [(ngModel)]="clickedRecur.category">
<option value="Uncategorised">Uncategorised</option>
<option *ngFor="let category of categoryIdList, let i=index" [ngValue]="category">
{{ category.name }}
<option value="0">Uncategorised</option>
<option *ngFor="let category of categoryIdList" [ngValue]="category">
{{ categoryList[category] }}
</option>
</select>
</div>

10
src/app/dashboard/transaction-log.component.ts
View file

@ -23,6 +23,7 @@ export class TransactionLogComponent implements OnInit {
public updatedDate: string;
public startTime: string;
categoryIdList: number[] = [];
categoryList: any;
categoryNameList: string[] = [];
public paginateConfig: PaginationInstance = {
@ -39,8 +40,8 @@ export class TransactionLogComponent implements OnInit {
this.myDate = moment().format('YYYY-MM-DD[T]HH:mm');
this.api.categoryList().subscribe(
result => {
//this.setCategoryList(result.categories);
this.categoryIdList = result.categories;
this.categoryList = result.categories;
this.categoryIdList = Object.keys(this.categoryList);
},
error => {
console.log('Retrieval Error');
@ -54,11 +55,6 @@ export class TransactionLogComponent implements OnInit {
this.loadTransactions(1);
}
private setCategoryList(data: any) {
this.categoryIdList = Object.keys(data.ids).map(key => data.ids[key]);
this.categoryNameList = Object.keys(data.names).map(key => data.names[key]);
}
byId(c1: ItemModel, c2: ItemModel) {
return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

2
src/app/shared/recur-result.component.html
View file

@ -1,5 +1,5 @@
<td (click)="recurClick()">{{recur.seller}}</td>
<td (click)="recurClick()">{{recur.category}}</td>
<td (click)="recurClick()">{{categories[recur.category] || 'Uncategorised'}}</td>
<td (click)="recurClick()">{{recur.essential}}</td>
<td (click)="recurClick()">{{updatedDate}}</td>
<td (click)="recurClick()">{{recur.recurring_period}}</td>

3
src/app/shared/recur-result.component.ts
View file

@ -2,7 +2,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as moment from 'moment';
interface RecurData {
category: string;
category: number;
essential: number;
id: number;
last_updated: string;
@ -20,6 +20,7 @@ interface RecurData {
export class RecurResultComponent {
@Input() public recur: RecurData;
@Output() public onClick = new EventEmitter();
@Input() public categories: any;
public updatedDate: string;
ngOnInit(): void {

2
src/app/shared/recur-table.component.html
View file

@ -11,7 +11,7 @@
</tr>
</thead>
<tbody>
<tr recur-result *ngFor="let recur of recurList" [recur]="recur" (onClick)="recurClick($event, template)"></tr>
<tr recur-result *ngFor="let recur of recurList" [categories]="categories" [recur]="recur" (onClick)="recurClick($event, template)"></tr>
</tbody>
</table>
</div>

2
src/app/shared/recur-table.component.ts
View file

@ -20,6 +20,8 @@ interface RecurData {
export class RecurTableComponent {
@Input() public recurList: Array<RecurData>;
@Output() public onClick = new EventEmitter();
@Input() public categories: any;
public recurClick(event: any): void {
this.onClick.emit( event );