Updated formula manager page to work with new data

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

View File

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

View File

@ -51,7 +51,7 @@
<mat-card *ngIf="formula" class="my-4 mx-auto" style="max-width: 600px"> <mat-card *ngIf="formula" class="my-4 mx-auto" style="max-width: 600px">
<mat-card-header> <mat-card-header>
<mat-card-title class="mb-0"><h4>{{formula.name}}</h4></mat-card-title> <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"> <div *ngIf="store.user" class="ml-auto">
<h4>Approved: <h4>Approved:
<mat-icon *ngIf="formula.approved" class="text-success" style="transform: translateY(20%)">check_circle</mat-icon> <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"> <tr *ngFor="let c of formula.components">
<td style="width: 80%">{{c.component?.name}}</td> <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 | 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> </tbody>
</table> </table>
<div class="col-12 d-lg-block mb-3" style="height: 4px; background:black; width: 100%;"></div> <div class="col-12 d-lg-block mb-3" style="height: 4px; background:black; width: 100%;"></div>

View File

@ -52,7 +52,7 @@ export class FormulaManagerComponent {
cost() { cost() {
let cost = 0; let cost = 0;
this.formula.components.forEach( 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; return cost;
} }

View File

@ -10,15 +10,16 @@
<input matInput placeholder="Description" name="description" [(ngModel)]="description"> <input matInput placeholder="Description" name="description" [(ngModel)]="description">
</mat-form-field> </mat-form-field>
<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> <span matPrefix>$&nbsp;</span>
</mat-form-field> </mat-form-field>
</form> </form>
</mat-dialog-content> </mat-dialog-content>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<mat-dialog-actions class="justify-content-end"> <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">Update</span>
<span *ngIf="!data">Create</span> <span *ngIf="!data">Create</span>
</button> </button>
</mat-dialog-actions> <button *ngIf="data" mat-button class="ml-2" color="warn" (click)="delete()">Delete</button>
</mat-dialog-actions>

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 {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({ @Component({
selector: 'new-component', selector: 'new-component',
@ -9,31 +10,36 @@ import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
export class NewComponentComponent { export class NewComponentComponent {
name: string; name: string;
description: string; description: string;
cost: number; price: number;
constructor( constructor(
private dialogRef: MatDialogRef<NewComponentComponent>, private dialogRef: MatDialogRef<NewComponentComponent>,
private dialog: MatDialog,
private db: AngularFirestore, private db: AngularFirestore,
@Inject(MAT_DIALOG_DATA) public data @Inject(MAT_DIALOG_DATA) public data
) { ) {
if (data) { if (data) {
this.name = data.name; this.name = data.name;
this.description = data.description; 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() { 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) { if (!this.data) {
newComponent['created'] = new Date(); newComponent['created'] = new Date();
this.db this.db
.collection('components') .collection('components')
.add(newComponent) .doc(newComponent.name).set(newComponent)
.then(data => this.dialogRef.close()); .then(ignore => this.dialogRef.close());
} else { } else {
this.data.ref.update(newComponent).then(data => this.dialogRef.close()); this.data.ref.update(newComponent).then(ignore => this.dialogRef.close());
} }
} }
} }

View File

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

View File

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

View File

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