Moved from tslint to eslint as tslint was depreciated.
Added prettier and also prettied all the typescript files using prettier ESLint is using the AirBnB rules which are the most strict to lint the files.
This commit is contained in:
@ -5,59 +5,93 @@
|
||||
</mat-card-title-group>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" fxLayout="column">
|
||||
<div fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-md="column" fxLayoutGap="20px"
|
||||
fxLayoutGap.lt-md="0px">
|
||||
<div
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-around start"
|
||||
fxLayout.lt-md="column"
|
||||
fxLayoutGap="20px"
|
||||
fxLayoutGap.lt-md="0px"
|
||||
>
|
||||
<mat-form-field fxFlex>
|
||||
<mat-label>Code</mat-label>
|
||||
<input matInput placeholder="Code" formControlName="code">
|
||||
<input matInput placeholder="Code" formControlName="code" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-md="column" fxLayoutGap="20px"
|
||||
fxLayoutGap.lt-md="0px">
|
||||
<div
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-around start"
|
||||
fxLayout.lt-md="column"
|
||||
fxLayoutGap="20px"
|
||||
fxLayoutGap.lt-md="0px"
|
||||
>
|
||||
<mat-form-field fxFlex="75">
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput #nameElement placeholder="Name" formControlName="name">
|
||||
<input matInput #nameElement placeholder="Name" formControlName="name" />
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="25">
|
||||
<mat-label>Units</mat-label>
|
||||
<input matInput placeholder="Units" formControlName="units">
|
||||
<input matInput placeholder="Units" formControlName="units" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-md="column" fxLayoutGap="20px"
|
||||
fxLayoutGap.lt-md="0px">
|
||||
<div
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-around start"
|
||||
fxLayout.lt-md="column"
|
||||
fxLayoutGap="20px"
|
||||
fxLayoutGap.lt-md="0px"
|
||||
>
|
||||
<mat-form-field fxFlex>
|
||||
<mat-label>Fraction</mat-label>
|
||||
<input matInput type="number" placeholder="Fraction" formControlName="fraction">
|
||||
<input matInput type="number" placeholder="Fraction" formControlName="fraction" />
|
||||
</mat-form-field>
|
||||
<mat-form-field cdk-overlay-origin="">
|
||||
<mat-label>Fraction Units</mat-label>
|
||||
<input matInput placeholder="Fraction Units" formControlName="fractionUnits">
|
||||
<input matInput placeholder="Fraction Units" formControlName="fractionUnits" />
|
||||
</mat-form-field>
|
||||
<mat-form-field cdk-overlay-origin="">
|
||||
<mat-label>Yield</mat-label>
|
||||
<input matInput type="number" placeholder="Yield" formControlName="productYield">
|
||||
<input matInput type="number" placeholder="Yield" formControlName="productYield" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-md="column" fxLayoutGap="20px"
|
||||
fxLayoutGap.lt-md="0px">
|
||||
<div
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-around start"
|
||||
fxLayout.lt-md="column"
|
||||
fxLayoutGap="20px"
|
||||
fxLayoutGap.lt-md="0px"
|
||||
>
|
||||
<mat-form-field fxFlex>
|
||||
<mat-label>{{item.isPurchased ? 'Purchase Price' : 'Cost Price' }}</mat-label>
|
||||
<input matInput type="number" placeholder="{{item.isPurchased ? 'Purchase Price' : 'Cost Price' }}"
|
||||
formControlName="price">
|
||||
<mat-label>{{ item.isPurchased ? 'Purchase Price' : 'Cost Price' }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
type="number"
|
||||
placeholder="{{ item.isPurchased ? 'Purchase Price' : 'Cost Price' }}"
|
||||
formControlName="price"
|
||||
/>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex [hidden]="!item.isSold">
|
||||
<mat-label>Sale Price</mat-label>
|
||||
<input matInput type="number" placeholder="Sale Price" formControlName="salePrice">
|
||||
<input matInput type="number" placeholder="Sale Price" formControlName="salePrice" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-md="column" fxLayoutGap="20px"
|
||||
fxLayoutGap.lt-md="0px">
|
||||
<div
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-around start"
|
||||
fxLayout.lt-md="column"
|
||||
fxLayoutGap="20px"
|
||||
fxLayoutGap.lt-md="0px"
|
||||
>
|
||||
<mat-checkbox formControlName="isPurchased">Is Purchased?</mat-checkbox>
|
||||
<mat-checkbox formControlName="isSold">Is Sold?</mat-checkbox>
|
||||
<mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-md="column" fxLayoutGap="20px"
|
||||
fxLayoutGap.lt-md="0px">
|
||||
<div
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-around start"
|
||||
fxLayout.lt-md="column"
|
||||
fxLayoutGap="20px"
|
||||
fxLayoutGap.lt-md="0px"
|
||||
>
|
||||
<mat-form-field fxFlex>
|
||||
<mat-label>Product Type</mat-label>
|
||||
<mat-select placeholder="Product Group" formControlName="productGroup">
|
||||
@ -71,7 +105,9 @@
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button color="primary" (click)="save()">Save</button>
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">Delete</button>
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">
|
||||
Delete
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import {ProductDetailComponent} from './product-detail.component';
|
||||
import { ProductDetailComponent } from './product-detail.component';
|
||||
|
||||
describe('ProductDetailComponent', () => {
|
||||
let component: ProductDetailComponent;
|
||||
@ -8,9 +8,8 @@ describe('ProductDetailComponent', () => {
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ProductDetailComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
declarations: [ProductDetailComponent],
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
|
||||
import {ToasterService} from '../../core/toaster.service';
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
import {ProductService} from '../product.service';
|
||||
import {Product} from '../../core/product';
|
||||
import {ProductGroup} from '../../core/product-group';
|
||||
import {ConfirmDialogComponent} from '../../shared/confirm-dialog/confirm-dialog.component';
|
||||
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
|
||||
import { ToasterService } from '../../core/toaster.service';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ProductService } from '../product.service';
|
||||
import { Product } from '../../core/product';
|
||||
import { ProductGroup } from '../../core/product-group';
|
||||
import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import {FormBuilder, FormGroup} from '@angular/forms';
|
||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-product-detail',
|
||||
templateUrl: './product-detail.component.html',
|
||||
styleUrls: ['./product-detail.component.css']
|
||||
styleUrls: ['./product-detail.component.css'],
|
||||
})
|
||||
export class ProductDetailComponent implements OnInit, AfterViewInit {
|
||||
@ViewChild('nameElement', { static: true }) nameElement: ElementRef;
|
||||
@ -25,14 +25,14 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
|
||||
private dialog: MatDialog,
|
||||
private fb: FormBuilder,
|
||||
private toaster: ToasterService,
|
||||
private ser: ProductService
|
||||
private ser: ProductService,
|
||||
) {
|
||||
this.createForm();
|
||||
}
|
||||
|
||||
createForm() {
|
||||
this.form = this.fb.group({
|
||||
code: {value: '', disabled: true},
|
||||
code: { value: '', disabled: true },
|
||||
name: '',
|
||||
units: '',
|
||||
fraction: '',
|
||||
@ -43,16 +43,15 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
|
||||
isPurchased: '',
|
||||
isSold: '',
|
||||
isActive: '',
|
||||
productGroup: ''
|
||||
productGroup: '',
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.route.data
|
||||
.subscribe((data: { item: Product, productGroups: ProductGroup[] }) => {
|
||||
this.productGroups = data.productGroups;
|
||||
this.showItem(data.item);
|
||||
});
|
||||
this.route.data.subscribe((data: { item: Product; productGroups: ProductGroup[] }) => {
|
||||
this.productGroups = data.productGroups;
|
||||
this.showItem(data.item);
|
||||
});
|
||||
}
|
||||
|
||||
showItem(item: Product) {
|
||||
@ -69,7 +68,7 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
|
||||
isPurchased: this.item.isPurchased,
|
||||
isSold: this.item.isSold,
|
||||
isActive: this.item.isActive,
|
||||
productGroup: this.item.productGroup.id ? this.item.productGroup.id : ''
|
||||
productGroup: this.item.productGroup.id ? this.item.productGroup.id : '',
|
||||
});
|
||||
}
|
||||
|
||||
@ -80,35 +79,33 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
|
||||
}
|
||||
|
||||
save() {
|
||||
this.ser.saveOrUpdate(this.getItem())
|
||||
.subscribe(
|
||||
(result) => {
|
||||
this.toaster.show('Success', '');
|
||||
this.router.navigateByUrl('/products');
|
||||
},
|
||||
(error) => {
|
||||
this.toaster.show('Danger', error);
|
||||
}
|
||||
);
|
||||
this.ser.saveOrUpdate(this.getItem()).subscribe(
|
||||
(result) => {
|
||||
this.toaster.show('Success', '');
|
||||
this.router.navigateByUrl('/products');
|
||||
},
|
||||
(error) => {
|
||||
this.toaster.show('Danger', error);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
delete() {
|
||||
this.ser.delete(this.item.id)
|
||||
.subscribe(
|
||||
(result) => {
|
||||
this.toaster.show('Success', '');
|
||||
this.router.navigateByUrl('/products');
|
||||
},
|
||||
(error) => {
|
||||
this.toaster.show('Danger', error);
|
||||
}
|
||||
);
|
||||
this.ser.delete(this.item.id).subscribe(
|
||||
(result) => {
|
||||
this.toaster.show('Success', '');
|
||||
this.router.navigateByUrl('/products');
|
||||
},
|
||||
(error) => {
|
||||
this.toaster.show('Danger', error);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
confirmDelete(): void {
|
||||
const dialogRef = this.dialog.open(ConfirmDialogComponent, {
|
||||
width: '250px',
|
||||
data: {title: 'Delete Product?', content: 'Are you sure? This cannot be undone.'}
|
||||
data: { title: 'Delete Product?', content: 'Are you sure? This cannot be undone.' },
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe((result: boolean) => {
|
||||
|
||||
Reference in New Issue
Block a user