Vergara_Tech/zgo
Vergara_Tech/zgo
2
1
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity

Items Create/Edit Forms updated

Browse source
This commit is contained in:
Rene V. Vergara A. 2022-07-26 20:37:14 -05:00
parent 1e14ab0c5a
commit fd1cb67f5d
15 changed files with 331 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/app.module.ts
View file

@ -25,6 +25,7 @@ import { ViewerComponent } from './viewer/viewer.component';
import { LoginComponent } from './login/login.component';
import { ItemListComponent } from './items/item-list/item-list.component';
import { ItemCreateComponent } from './items/item-create/item-create.component';
import { ItemEditComponent } from './items/item-edit/item-edit.component';
import { ItemDeleteComponent } from './items/item-delete/item-delete.component';
import { ItemAddComponent} from './items/item-add/item-add.component';
import { OrderComponent } from './order/order.component';
@ -54,6 +55,7 @@ import { NotifierComponent } from './notifier/notifier.component';
LoginComponent,
OrderComponent,
ItemCreateComponent,
ItemEditComponent,
ItemDeleteComponent,
ItemAddComponent,
CancelComponent,

9
src/app/items/item-add/item-add.component.css
View file

@ -5,3 +5,12 @@
input[type=number]{
text-align: right;
}
.itemDataTitle {
font-family: 'Spartan', sans-serif;
background: #ff5722;
color: white;
font-size: 26px;
text-align: center;
padding: 5px;
}

30
src/app/items/item-add/item-add.component.html
View file

@ -1,13 +1,21 @@
<h2 mat-dialog-title class="text">Add to Order</h2>
<div class='itemDataTitle'>Add to Order</div>
<mat-dialog-content [formGroup]="orderForm">
<p class="text">{{lineItem.name}}</p>
<mat-form-field>
<input matInput type="number" placeholder="Quantity" formControlName="qty">
</mat-form-field>
</mat-dialog-content>
<div class='container'>
<mat-dialog-content [formGroup]="orderForm">
<p class="text">{{lineItem.name}}</p>
<mat-form-field [style.width.%]="100">
<input matInput type="number" placeholder="Quantity" formControlName="qty">
</mat-form-field>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-raised-button class="text" (click)="close()">Cancel</button>
<button mat-raised-button class="text" color="primary" (click)="save()">Add</button>
</mat-dialog-actions>
<div style="display: flex;
justify-content: space-between;">
<button mat-raised-button
class="text"
(click)="close()">Cancel</button>
<button mat-raised-button
class="text"
color="primary"
(click)="save()">Add</button>
</div>
</div>

2
src/app/items/item-add/item-add.component.ts
View file

@ -1,4 +1,4 @@
import { Inject, Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
import { Inject, Component, OnInit, OnDestroy, ViewEncapsulation} from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { UntypedFormBuilder, Validators, UntypedFormGroup, FormControl } from '@angular/forms';
import { LineItem } from '../lineitem.model';

9
src/app/items/item-create/item-create.component.css
View file

@ -5,3 +5,12 @@
input[type=number]{
text-align: right;
}
.itemDataTitle {
font-family: 'Spartan', sans-serif;
background: #ff5722;
color: white;
font-size: 26px;
text-align: center;
padding: 5px;
}

60
src/app/items/item-create/item-create.component.html
View file

@ -1,25 +1,39 @@
<h2 mat-dialog-title class="text">Add item</h2>
<mat-dialog-content [formGroup]="form">
<mat-form-field class="text" appearance="outline">
<mat-label>Item</mat-label>
<input type="hidden" formControlName="id">
<input matInput placeholder="Item" formControlName="name">
</mat-form-field>
<mat-form-field class="text" appearance="outline">
<mat-label>Description</mat-label>
<textarea matInput placeholder="Description" formControlName="description"></textarea>
</mat-form-field>
<mat-form-field class="text" appearance="outline">
<mat-label>Price</mat-label>
<input matInput type="number" placeholder="Price" formControlName="cost">
<div *ngIf="!form.controls['cost'].valid && form.controls['cost'].touched">
<div *ngIf="form.controls['cost'].errors?.pattern">Use only numbers</div>
</div>
</mat-form-field>
</mat-dialog-content>
<div class='itemDataTitle'>Add Item</div>
<mat-dialog-actions>
<button mat-raised-button class="text" (click)="close()">Close</button>
<button mat-raised-button class="text" color="primary" (click)="save()">Save</button>
</mat-dialog-actions>
<div class='container' style="margin-top: 20px;">
<mat-dialog-content [formGroup]="form">
<span style="line-height: 10px;"></span>
<mat-form-field class="text" [style.width.%]="100">
<mat-label>Item</mat-label>
<input type="hidden" formControlName="id">
<input matInput
placeholder="Item"
formControlName="name"
maxlength="16">
</mat-form-field >
<mat-form-field class="text" [style.width.%]="100">
<mat-label>Description</mat-label>
<textarea matInput
placeholder="Description"
formControlName="description"
maxlength="30"
style="line-height:20px;
overflow:auto;"></textarea>
</mat-form-field>
<mat-form-field class="text" [style.width.%]="100">
<mat-label>Price</mat-label>
<input matInput type="number" placeholder="Price" formControlName="cost">
<div *ngIf="!form.controls['cost'].valid && form.controls['cost'].touched">
<div *ngIf="form.controls['cost'].errors?.pattern">Use only numbers</div>
</div>
</mat-form-field>
</mat-dialog-content>
<div style="display: flex;
justify-content: space-between;">
<button mat-raised-button class="text" (click)="close()">Close</button>
<button mat-raised-button class="text" color="primary" (click)="save()">Save</button>
</div>
</div>

16
src/app/items/item-edit/item-edit.component.css Normal file
View file

@ -0,0 +1,16 @@
.text {
font-family: 'Spartan', sans-serif;
}
input[type=number]{
text-align: right;
}
.itemDataTitle {
font-family: 'Spartan', sans-serif;
background: #ff5722;
color: white;
font-size: 26px;
text-align: center;
padding: 5px;
}

39
src/app/items/item-edit/item-edit.component.html Normal file
View file

@ -0,0 +1,39 @@
<div class='itemDataTitle'>Edit Item</div>
<div class='container' style="margin-top: 20px;">
<mat-dialog-content [formGroup]="form">
<span style="line-height: 10px;"></span>
<mat-form-field class="text" [style.width.%]="100">
<mat-label>Item</mat-label>
<input type="hidden" formControlName="id">
<input matInput
placeholder="Item"
formControlName="name"
maxlength="16">
</mat-form-field >
<mat-form-field class="text" [style.width.%]="100">
<mat-label>Description</mat-label>
<textarea matInput
placeholder="Description"
formControlName="description"
maxlength="30"
style="line-height:20px;
overflow:auto;"></textarea>
</mat-form-field>
<mat-form-field class="text" [style.width.%]="100">
<mat-label>Price</mat-label>
<input matInput type="number" placeholder="Price" formControlName="cost">
<div *ngIf="!form.controls['cost'].valid && form.controls['cost'].touched">
<div *ngIf="form.controls['cost'].errors?.pattern">Use only numbers</div>
</div>
</mat-form-field>
</mat-dialog-content>
<div style="display: flex;
justify-content: space-between;">
<button mat-raised-button class="text" (click)="close()">Close</button>
<button mat-raised-button class="text" color="primary" (click)="save()">Save</button>
</div>
</div>

59
src/app/items/item-edit/item-edit.component.ts Normal file
View file

@ -0,0 +1,59 @@
import { Inject, Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { UntypedFormBuilder, Validators, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
import { Item } from '../item.model';
@Component({
selector: 'app-item-edit',
templateUrl: './item-edit.component.html',
styleUrls: ['./item-edit.component.css']
})
export class ItemEditComponent implements OnInit {
form: UntypedFormGroup;
id: string | undefined = '';
numberRegEx = /\d*\.?\d{1,2}/;
constructor(
private fb: UntypedFormBuilder,
private dialogRef: MatDialogRef<ItemEditComponent>,
@Inject(MAT_DIALOG_DATA) public data: Item
){
if (data._id === '') {
this.form = fb.group({
id: [''],
name: [null, Validators.required],
description: [null, Validators.required],
cost: new UntypedFormControl('', {
validators: [Validators.required, Validators.pattern(this.numberRegEx)],
updateOn: "blur"
})
});
} else {
this.id = data._id;
this.form = fb.group({
id: [data._id],
name: [data.name, Validators.required],
description: [data.description, Validators.required],
cost: new UntypedFormControl(data.cost, {
validators: [Validators.required, Validators.pattern(this.numberRegEx)],
updateOn: "blur"
})
});
}
}
ngOnInit () {
}
save() {
// console.log(this.form.value);
this.dialogRef.close(this.form.value);
}
close () {
this.dialogRef.close();
}
}

24
src/app/items/item-list/item-list.component.css
View file

@ -1,5 +1,5 @@
.card {
font-family: 'Spartan', sans-serif;
font-family: 'Spartan', sans-serif;
}
.text {
@ -35,12 +35,26 @@ p.price{
text-align: right;
}
.buttons-class {
background-color: #ff5722;
color: white;
font-family: 'Spartan', sans-serif;
font-size: 12px !important;
font-weight: 700;
height: 25px !important;
width: 100px !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.buttons-class-cart{
background-color: #ff5722;
color: white;
font-size: 18px;
font-weight: 700;
height: 25px !important;
height:30px !important;
width: 50px !important;
display: flex;
align-items: center;
@ -49,10 +63,14 @@ p.price{
}
.availableItems{
display: flex;
justify-content: space-between;
background: lightblue;
font-family: Roboto Mono;
font-family: 'Spartan', sans-serif !important;
font-size: 18px;
font-weight: 700;
text-align: left;
margin: 5px;
height: 25px;
padding: 12px;
}

147
src/app/items/item-list/item-list.component.html
View file

@ -1,76 +1,93 @@
<div *ngIf="items.length > 0">
<div class="availableItems" >
Available Items:
<button mat-raised-button
class="buttons-class"
(click)="openDialog()">
<mat-icon class="icon">
add
</mat-icon>
Add item
</button>
</div>
<div class="card" *ngFor="let item of itemsUpdate | async">
<mat-card>
<table cellspacing="0" width="100%" >
<tr>
<td style="font-family: Roboto Mono;
font-size: 16px;
font-weight: 700;
height: 20px;">
{{item.name}}
</td>
<td></td>
</tr>
<tr>
<td style="font-family: Roboto Mono;
font-size: 16px;
font-weight: 400;
height: 20px;">
{{item.description}}
</td>
<td>
<div class="rv_price"
*ngIf="!owner.zats">
<img class="icon"
src="/assets/zec_rv.png"
height="16px">
{{(item.cost/zecPrice) | number: '1.08'}}
[{{item.cost | number: '1.02' | currency: getCurrency() }}]
</div>
<p class="rv_price"
*ngIf="owner.zats">
&#x24e9;{{(item.cost/zecPrice)*100000000 | number: '1.0-0'}}
</p>
</td>
</tr>
</table>
<mat-card-actions>
<table cellspacing="0" width="100%">
<div style="display: block;
overflow-y: auto;
height: 500px;">
<div class="card" *ngFor="let item of itemsUpdate | async">
<mat-card>
<table cellspacing="0" width="100%" >
<tr>
<td>
<button mat-icon-button class="icons" (click)="edit(item._id!)">
<mat-icon inline=true>edit</mat-icon>
</button>
<button mat-icon-button class="icons" (click)="delete(item._id!)">
<mat-icon inline=true>delete</mat-icon>
</button>
<td style="font-family: Roboto Mono;
font-size: 16px;
font-weight: 700;
height: 20px;">
{{item.name}}
</td>
<td align="right">
<button mat-raised-button
color="primary"
class="buttons-class-cart"
(click)="addToOrder(item._id!)">
<mat-icon [inline]="true">
shopping_cart
</mat-icon>
</button>
<td></td>
</tr>
<tr>
<td style="font-family: Roboto Mono;
font-size: 16px;
font-weight: 400;
height: 20px;">
{{item.description}}
</td>
<td>
<div class="rv_price"
*ngIf="!owner.zats">
<img class="icon"
src="/assets/zec_rv.png"
height="16px">
{{(item.cost/zecPrice) | number: '1.08'}}
[{{item.cost | number: '1.02' | currency: getCurrency() }}]
</div>
<p class="rv_price"
*ngIf="owner.zats">
&#x24e9;{{(item.cost/zecPrice)*100000000 | number: '1.0-0'}}
</p>
</td>
</tr>
</table>
</mat-card-actions>
</mat-card>
</div>
<mat-card-actions>
<table cellspacing="0" width="100%">
<tr>
<td>
<button mat-icon-button class="icons" (click)="edit(item._id!)">
<mat-icon inline=true>edit</mat-icon>
</button>
<button mat-icon-button class="icons" (click)="delete(item._id!)">
<mat-icon inline=true>delete</mat-icon>
</button>
</td>
<td align="right">
<button mat-raised-button
color="primary"
class="buttons-class-cart"
(click)="addToOrder(item._id!)">
<mat-icon [inline]="true">
shopping_cart
</mat-icon>
</button>
</td>
</tr>
</table>
</mat-card-actions>
</mat-card>
</div>
</div>
</div>
<p *ngIf = "items.length <= 0">No items yet!</p>
<div *ngIf = "items.length <= 0">
<div class="availableItems" >
No items yet!
<button mat-raised-button
class="buttons-class"
(click)="openDialog()">
<mat-icon class="icon">
add
</mat-icon>
Add item
</button>
</div>
</div>
<br>
<button class="text"
mat-raised-button
(click)="openDialog()">
<mat-icon class="icon">
add
</mat-icon>
Add item
</button>

38
src/app/items/item-list/item-list.component.ts
View file

@ -1,4 +1,4 @@
import { Component, OnInit, Input } from '@angular/core';
import { Input, Inject, Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogConfig} from '@angular/material/dialog';
import { faCartShopping } from '@fortawesome/free-solid-svg-icons';
@ -11,9 +11,10 @@ import { UserService } from '../../user.service';
import { ItemService } from '../items.service';
import { OrderService} from '../../order/order.service';
import { ItemCreateComponent } from '../item-create/item-create.component';
import { ItemEditComponent } from '../item-edit/item-edit.component';
import { ItemDeleteComponent } from '../item-delete/item-delete.component';
import { ItemAddComponent } from '../item-add/item-add.component';
import { NotifierService } from '../../notifier.service';
@Component({
selector: 'app-item-list',
@ -64,18 +65,19 @@ export class ItemListComponent implements OnInit{
userService: UserService,
public orderService: OrderService,
public fullnodeService: FullnodeService,
private dialog: MatDialog
) {
this.ownerUpdate = userService.ownerUpdate;
this.itemsUpdate = itemService.itemsUpdated;
this.ownerUpdate.subscribe((owner) => {
this.owner = owner;
itemService.getItems(this.owner.address);
this.itemsUpdate.subscribe((items) => {
this.items = items;
private dialog: MatDialog,
private notifierService: NotifierService )
{
this.ownerUpdate = userService.ownerUpdate;
this.itemsUpdate = itemService.itemsUpdated;
this.ownerUpdate.subscribe((owner) => {
this.owner = owner;
itemService.getItems(this.owner.address);
this.itemsUpdate.subscribe((items) => {
this.items = items;
});
});
});
this.zecPrice = 1;
this.zecPrice = 1;
}
ngOnInit(){
@ -97,6 +99,9 @@ export class ItemListComponent implements OnInit{
if(val != null) {
var item:Item = {_id: '', name: val.name, description: val.description, cost: val.cost, owner: this.owner.address};
this.itemService.addItem(item);
this.notifierService
.showNotification("Item successfully created!",
"Close","success");
}
this.itemService.getItems(this.owner.address);
this.itemsUpdate.subscribe((items) => {
@ -115,7 +120,7 @@ export class ItemListComponent implements OnInit{
dialogConfig.autoFocus = true;
dialogConfig.data = item;
const dialogRef = this.dialog.open(ItemCreateComponent, dialogConfig);
const dialogRef = this.dialog.open(ItemEditComponent, dialogConfig);
dialogRef.afterClosed().subscribe((val) => {
if (val != null) {
var editItem: Item = {
@ -128,7 +133,10 @@ export class ItemListComponent implements OnInit{
//console.log('Edit:', editItem);
this.itemService.addItem(editItem).subscribe((response) => {
this.itemService.getItems(this.owner.address);
});;
});
this.notifierService
.showNotification("Item information updated!!",
"Close","success");
}
this.itemService.getItems(this.owner.address);
});

6
src/app/listorders/listorders.component.css
View file

@ -110,6 +110,12 @@ img.icon{
.minibutton {
font-family: 'Spartan', sans-serif;
font-size: 12px;
background: #ff5722;
color: white;
height: 24px;
line-height: 20px;
padding: 2px;
}
.spacer {

6
src/app/listorders/listorders.component.html
View file

@ -122,7 +122,11 @@
</tr>
</tbody>
</table>
<div align="center">
<div style="display: flex;
justify-content: space-between;
padding-left: 20%;
padding-right: 20%;
margin-top: 10px;">
<span>
<button mat-stroked-button class="minibutton" color="primary" (click)="invoice(order)">Invoice</button>
</span>

6
src/app/order/order.component.css
View file

@ -12,7 +12,7 @@ img.icon{
}
.noOrderMsg {
font-family: Roboto Mono;
font-family: 'Roboto Mono';
font-size: 20px;
font-weight: 700;
margin: 10px;
@ -21,7 +21,7 @@ img.icon{
}
.newOrder {
font-family: Roboto Mono !important;
font-family: 'Roboto Mono' !important;
}
.newOrderTitle1 {
@ -78,7 +78,7 @@ img.icon{
.availableItems{
background: lightblue;
font-family: Roboto Mono;
font-family: 'Roboto Mono';
font-size: 18px;
font-weight: 700;
text-align: left;