fhsons/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Updated formula manager page to work with new data

Browse Source
This commit is contained in:
Zakary Timson
2019-02-03 20:30:30 -05:00
parent 077cb0b774
commit 10eb16d7f2
8 changed files with 48 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/app.store.ts
View File

@@ -39,7 +39,6 @@ export class AppStore {
map(rows =>
rows.map((row: any) => {
let temp = Object.assign({ id: row.payload.doc.id, ref: row.payload.doc.ref }, row.payload.doc.data());
temp.created = temp.created.toDate();
return <Component>temp;
})
),
@@ -53,13 +52,7 @@ export class AppStore {
map(data =>
data[0].map(row => {
let temp = <any>Object.assign({ id: row.payload.doc.id, ref: row.payload.doc.ref }, row.payload.doc.data());
temp.created = temp.created.toDate();
temp.components = temp.components.map(row => {
let component = data[1].filter(c => c.id == row.component.id)[0];
return { component: component, quantity: row.quantity };
});
temp.components = temp.components.map(row => ({component: data[1].find(c => c.id == row.component), quantity: row.quantity}));
return <Formula>temp;
})
),

4
src/app/formulaManager/formulaManager.component.html
View File

@@ -51,7 +51,7 @@
<mat-card *ngIf="formula" class="my-4 mx-auto" style="max-width: 600px">
<mat-card-header>
<mat-card-title class="mb-0"><h4>{{formula.name}}</h4></mat-card-title>
<mat-card-subtitle>{{formula.created | date}}</mat-card-subtitle>
<mat-card-subtitle>{{formula.createdOn.seconds * 1000 | date}}</mat-card-subtitle>
<div *ngIf="store.user" class="ml-auto">
<h4>Approved:
<mat-icon *ngIf="formula.approved" class="text-success" style="transform: translateY(20%)">check_circle</mat-icon>
@@ -72,7 +72,7 @@
<tr *ngFor="let c of formula.components">
<td style="width: 80%">{{c.component?.name}}</td>
<td class="text-right" style="width: 10%">{{c.quantity | scale: formula.total : _newTotal | convertFromG: unit}} {{unit}}</td>
<td class="text-right" style="width: 10%">{{c.quantity | scale: formula.total : _newTotal / 1000 * c.component.cost | currency}}</td>
<td class="text-right" style="width: 10%">{{c.quantity | scale: formula.total : _newTotal / 1000 * c.component.price | currency}}</td>
</tbody>
</table>
<div class="col-12 d-lg-block mb-3" style="height: 4px; background:black; width: 100%;"></div>

2
src/app/formulaManager/formulaManager.component.ts
View File

@@ -52,7 +52,7 @@ export class FormulaManagerComponent {
cost() {
let cost = 0;
this.formula.components.forEach(
row => (cost += (((row.quantity / this.formula.total) * this._newTotal) / 1000) * row.component.cost)
row => (cost += (((row.quantity / this.formula.total) * this._newTotal) / 1000) * row.component.price)
);
return cost;
}

7
src/app/formulaManager/newComponent/newComponent.component.html
View File

@@ -10,15 +10,16 @@
<input matInput placeholder="Description" name="description" [(ngModel)]="description">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Cost Per Kg" type="number" name="cost" [(ngModel)]="cost">
<input matInput placeholder="Price ($/Kg)" type="number" name="cost" [(ngModel)]="price">
<span matPrefix>$&nbsp;</span>
</mat-form-field>
</form>
</mat-dialog-content>
<mat-divider></mat-divider>
<mat-dialog-actions class="justify-content-end">
<button mat-button type="submit" form="createForm" (click)="submit()" [disabled]="!name || !cost">
<button mat-button type="submit" form="createForm" (click)="submit()" [disabled]="!name || !price">
<span *ngIf="data">Update</span>
<span *ngIf="!data">Create</span>
</button>
</mat-dialog-actions>
<button *ngIf="data" mat-button class="ml-2" color="warn" (click)="delete()">Delete</button>
</mat-dialog-actions>

22
src/app/formulaManager/newComponent/newComponent.component.ts
View File

@@ -1,6 +1,7 @@
import {Component, ViewChild, Inject} from '@angular/core';
import {Component, Inject} from '@angular/core';
import {AngularFirestore} from 'angularfire2/firestore';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
import {DeleteComponent} from '../../delete/delete.component';
@Component({
selector: 'new-component',
@@ -9,31 +10,36 @@ import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
export class NewComponentComponent {
name: string;
description: string;
cost: number;
price: number;
constructor(
private dialogRef: MatDialogRef<NewComponentComponent>,
private dialog: MatDialog,
private db: AngularFirestore,
@Inject(MAT_DIALOG_DATA) public data
) {
if (data) {
this.name = data.name;
this.description = data.description;
this.cost = data.cost;
this.price = data.price;
}
}
delete() {
this.dialog.open(DeleteComponent, {data: this.data}).afterClosed().subscribe(() => this.dialogRef.close());
}
submit() {
let newComponent = {name: this.name, description: this.description, cost: Number(this.cost)};
let newComponent = {name: this.name, description: this.description, price: Number(this.price), createdOn: new Date()};
if (!this.data) {
newComponent['created'] = new Date();
this.db
.collection('components')
.add(newComponent)
.then(data => this.dialogRef.close());
.doc(newComponent.name).set(newComponent)
.then(ignore => this.dialogRef.close());
} else {
this.data.ref.update(newComponent).then(data => this.dialogRef.close());
this.data.ref.update(newComponent).then(ignore => this.dialogRef.close());
}
}
}

4
src/app/formulaManager/newFormula/newFormula.component.html
View File

@@ -42,7 +42,7 @@
</thead>
<tbody>
<tr *ngFor="let c of components; let i = index">
<td>{{c.name}}</td>
<td>{{c.component.name}}</td>
<td>{{c.quantity | convertFromG: unit}} {{unit}}</td>
<td>
<button mat-icon-button (click)="remove(i)">
@@ -62,4 +62,4 @@
<span *ngIf="data">Update</span>
<span *ngIf="!data">Create</span>
</button>
</mat-dialog-actions>
</mat-dialog-actions>

24
src/app/formulaManager/newFormula/newFormula.component.ts
View File

@@ -14,7 +14,7 @@ export class NewFormulaComponent {
amount: number;
approved: boolean = false;
component: string;
components: { component: string; name: string; quantity: number }[] = [];
components: { component: Component; quantity: number }[] = [];
componentsList = [];
@LocalStorage({ defaultValue: 'kg', fieldName: 'newFormulaUnit' })
unit;
@@ -30,17 +30,14 @@ export class NewFormulaComponent {
if (this.data) {
this.name = this.data.name;
this.approved = this.data.approved;
this.components = this.data.components.map(row => {
return { component: row.component.id, name: row.component.name, quantity: row.quantity };
});
this.components = this.data.components;
}
}
add() {
let id = this.componentsList.filter(row => row.name == this.component)[0].id;
console.log(id);
let component = this.componentsList.find(row => row.name == this.component);
let amount = new ConvertToGPipe().transform(Number(this.amount), this.unit);
this.components.push({ component: id, name: this.component, quantity: amount });
this.components.push({ component: component, quantity: amount });
this.component = null;
this.amount = null;
}
@@ -53,19 +50,14 @@ export class NewFormulaComponent {
let newFormula = {
name: this.name,
approved: this.approved,
components: this.components.map((row: any) => {
return { component: this.db.collection('components').doc(row.component).ref, quantity: row.quantity };
})
components: this.components.map((row: any) => ({component: row.component.id, quantity: row.quantity})),
createdOn: new Date()
};
if (!this.data) {
newFormula['created'] = new Date();
this.db
.collection('formulas')
.add(newFormula)
.then(data => this.dialogRef.close());
this.db.collection('formulas').doc(this.name).set(newFormula).then(ignore => this.dialogRef.close());
} else {
this.data.ref.update(newFormula).then(data => this.dialogRef.close());
this.data.ref.update(newFormula).then(ignore => this.dialogRef.close());
}
}

52
src/app/formulaManager/viewComponents/viewComponents.component.html
View File

@@ -1,37 +1,17 @@
<div class="bg-white text-right p-2" style="overflow: auto">
<button mat-raised-button class="float-right mb-3" (click)="createComponent()">
<mat-icon>add</mat-icon> Create
</button>
</div>
<div class="px-2">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Created</th>
<th>Cost Per Kg</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let c of store.components | async">
<td>{{c.name}}</td>
<td>{{c.description}}</td>
<td>{{c.created | date}}</td>
<td class="text-center">{{c.cost | currency}}</td>
<td>
<button mat-icon-button (click)="createComponent(c)">
<mat-icon class="curs-pointer">edit</mat-icon>
</button>
</td>
<td>
<button mat-icon-button (click)="delete(c)">
<mat-icon class="curs-pointer">delete</mat-icon>
</button>
</td>
</tr>
</tbody>
</table>
<div>
<div class="border-bottom font-weight-bold d-flex w-100" style="border-width: 3px !important;">
<div class="p-2" style="width: 150px">Name</div>
<div class="p-2" style="flex-grow: 1">Description</div>
<div class="p-2 text-center" style="width: 100px">Created</div>
<div class="p-2 text-right" style="width: 100px">$/Kg</div>
</div>
<div class="border-bottom w-100 py-2 text-center">
<a (click)="createComponent()" [routerLink]="">+ Add Component</a>
</div>
<div *ngFor="let c of store.components | async" class="border-bottom d-flex w-100 py-2">
<div class="px-2" style="width: 150px"><a (click)="createComponent(c)" [routerLink]="">{{c.name}}</a></div>
<div class="px-2" style="flex-grow: 1">{{c.description}}</div>
<div class="px-2 text-center" style="width: 100px">{{c.createdOn.seconds * 1000 | date}}</div>
<div class="px-2 text-right" style="width: 100px">{{c.price | currency}}</div>
</div>
</div>