Added delete and approve to formulas

This commit is contained in:
Zakary Timson 2018-07-24 20:50:20 -04:00
parent 0c03326e03
commit ee4a6f3fc0
2 changed files with 36 additions and 6 deletions

View File

@ -34,15 +34,18 @@
</div>
</div>
<div class="row mt-3 mb-5">
<div class="col-12 col-lg-3" style="height: 500px; overflow: auto">
<div class="col-12 col-lg-3" style="height: 500px; overflow-y: scroll">
<mat-form-field class="w-100">
<input #search matInput placeholder="Search">
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<mat-list>
<ng-container *ngFor="let f of store.formulas | async; let i = index">
<ng-container *ngFor="let f of formulas | async; let i = index">
<mat-divider *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1 && i > 0"></mat-divider>
<mat-list-item *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1" (click)="displayFormula(f)" [ngClass]="{'active': f.id == formula?.id}">{{f.name}}</mat-list-item>
<mat-list-item *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1" (click)="displayFormula(f)" [ngClass]="{'active': f.id == formula?.id}">
<mat-icon *ngIf="!f.approved" class="mr-3 text-danger">remove_circle</mat-icon>
{{f.name}}
</mat-list-item>
</ng-container>
</mat-list>
</div>
@ -109,6 +112,19 @@
</td>
</tr>
</table>
<div *ngIf="store.user" class="w-100 mt-4">
<div class="float-right">
<button *ngIf="!formula.approved" mat-raised-button class="mr-3" (click)="approve(formula)">
<mat-icon>check</mat-icon>Approve
</button>
<button mat-raised-button class="mr-3" (click)="edit(formula)">
<mat-icon>edit</mat-icon>Edit
</button>
<button mat-raised-button (click)="delete(formula)">
<mat-icon>delete</mat-icon>Delete
</button>
</div>
</div>
</div>
</div>
</div>

View File

@ -6,6 +6,8 @@ import {MatDialog} from '@angular/material';
import {ViewComponents} from './viewComponents/viewComponents.component';
import {NewFormulaComponent} from './newFormula/newFormula.component';
import {AppStore} from '../app.store';
import {map} from 'rxjs/operators';
import {DeleteComponent} from '../delete/delete.component';
@Component({
selector: 'formula-manager',
@ -20,6 +22,7 @@ import {AppStore} from '../app.store';
})
export class FormulaManagerComponent {
formula;
formulas;
@LocalStorage({defaultValue: 'g'})
unit;
@ -31,10 +34,13 @@ export class FormulaManagerComponent {
this._newTotal = new ConvertToGPipe().transform(total, this.unit);
}
constructor(public electron: ElectronService, private dialog: MatDialog, public store: AppStore) {}
constructor(public electron: ElectronService, private dialog: MatDialog, public store: AppStore) {
this.formulas = this.store.formulas.pipe(map(rows => rows.filter(row => this.store.user || row.approved)));
}
openComponents() {
this.dialog.open(ViewComponents, {height: '500px'});
approve(formula) {
formula.approved = true;
formula.ref.update({approved: true});
}
cost() {
@ -45,6 +51,10 @@ export class FormulaManagerComponent {
return cost;
}
delete(formula) {
this.dialog.open(DeleteComponent, {data: formula});
}
displayFormula(formula) {
formula.total = formula.components.reduce((acc, row) => (acc += row.quantity), 0);
this.newTotal = new ConvertFromGPipe().transform(formula.total, this.unit);
@ -54,4 +64,8 @@ export class FormulaManagerComponent {
newFormula() {
this.dialog.open(NewFormulaComponent);
}
openComponents() {
this.dialog.open(ViewComponents, {height: '500px'});
}
}