Added delete and approve to formulas
This commit is contained in:
		@@ -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>
 | 
			
		||||
@@ -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'});
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user