Merge pull request #41 from DLL-S/desenvolvimento

Atualiza base de código de produção

README.md

@@ -7,3 +7,4 @@ Este repositório contém a implementação da WebApp para o projeto COMCER (Com
 - 🗃 [COMCER Projeto](https://github.com/DLL-S/comcer-projeto)
 - 🖥 [COMCER Api](https://github.com/DLL-S/comcer-backend)
 - 📱 [COMCER Mobile](https://github.com/DLL-S/comcer-mobile)
+

package.json

@@ -16,6 +16,7 @@
 		"@angular/common": "~13.2.0",
 		"@angular/compiler": "~13.2.0",
 		"@angular/core": "~13.2.0",
+		"@angular/flex-layout": "^13.0.0-beta.38",
 		"@angular/forms": "~13.2.0",
 		"@angular/material": "^13.2.6",
 		"@angular/platform-browser": "~13.2.0",

src/app/app-routing.module.ts

@@ -23,11 +23,13 @@ const routes: Routes = [
 		canActivate: [ BaseGuard ]
 	},
 	{
-		path: "comandas", component: PaginaEmConstrucaoComponent,
+		path: "comandas", loadChildren: () =>
+			import("./modules/comandas/comandas.module").then(m => m.ComandasModule),
 		canActivate: [ BaseGuard ]
 	},
 	{
-		path: "mesas", component: PaginaEmConstrucaoComponent,
+		path: "mesas", loadChildren: () =>
+			import("./modules/mesas/mesas.module").then(m => m.MesasModule),
 		canActivate: [ BaseGuard ]
 	},
 	{
@@ -43,8 +45,6 @@ const routes: Routes = [
 
 
 	// { path: "comandas", loadChildren: () => import("./modules/comandas/comandas.module").then(m => m.ComandasModule) },
-	// { path: "mesas", loadChildren: () => import("./modules/mesas/mesas.module").then(m => m.MesasModule) },
-	// { path: "produtos", loadChildren: () => import("./modules/produtos/produtos.module").then(m => m.ProdutosModule) },
 	{
 		path: "pagina-em-construcao", component: PaginaEmConstrucaoComponent,
 		canActivate: [ BaseGuard ]

src/app/modules/comandas/comandas-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+import { ComandasListComponent } from "./containers/comandas-list/comandas-list.component";
+
+const comandasRoutes: Routes = [
+	{ path: "", component: ComandasListComponent }
+];
+
+@NgModule({
+	imports: [
+		RouterModule.forChild(comandasRoutes)
+	],
+	exports: []
+})
+export class ComandasRoutingModule { }

src/app/modules/comandas/comandas.module.ts

@@ -1,12 +1,65 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-
-
-@NgModule({
-	declarations: [],
-	imports: [
-		CommonModule
-	]
-})
-export class ComandasModule { }
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatRippleModule } from '@angular/material/core';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { NgxMaskModule } from 'ngx-mask';
+import { CoreModule } from './../../core/core.module';
+import { SharedModule } from './../../shared/shared.module';
+import { ComandasRoutingModule } from './comandas-routing.module';
+import { ComandaConfirmDialogComponent } from './components/comanda-confirm-dialog/comanda-confirm-dialog.component';
+import { ComandaViewComponent } from './components/comanda-view/comanda-view.component';
+import { ComandasListComponent } from './containers/comandas-list/comandas-list.component';
+import { ComandasService } from './services/comandas.service';
+import { ComandasState } from './state/comandas-state';
+
+
+@NgModule({
+	declarations: [
+		ComandasListComponent,
+		ComandaViewComponent,
+		ComandaConfirmDialogComponent,
+	],
+	imports: [
+		CommonModule,
+		ComandasRoutingModule,
+		SharedModule,
+		CoreModule,
+		FormsModule,
+		ReactiveFormsModule,
+		MatTableModule,
+		MatIconModule,
+		MatRippleModule,
+		MatSortModule,
+		MatPaginatorModule,
+		MatSelectModule,
+		MatProgressSpinnerModule,
+		MatExpansionModule,
+		MatButtonModule,
+		MatInputModule,
+		MatListModule,
+		MatFormFieldModule,
+		MatTooltipModule,
+		MatDialogModule,
+		MatGridListModule,
+		NgxMaskModule.forRoot(),
+	],
+	providers: [
+		ComandasState,
+		ComandasService
+	]
+})
+export class ComandasModule { }

src/app/modules/comandas/components/comanda-confirm-dialog/comanda-confirm-dialog.component.html

@@ -0,0 +1,13 @@
+<h1 mat-dialog-title>Encerrar comanda {{data.id}}</h1>
+<div mat-dialog-content>
+   <p>Deseja realmente encerrar a comanda <strong>{{data.nome}}</strong> ?</p>
+</div>
+<div mat-dialog-actions>
+   <button mat-button
+      color="warn"
+      cdkFocusInitial
+      (click)="cancelar()">Não</button>
+   <button mat-button
+      color="primary"
+      (click)="confirmar()">Sim</button>
+</div>

src/app/modules/comandas/components/comanda-confirm-dialog/comanda-confirm-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComandaConfirmDialogComponent } from './comanda-confirm-dialog.component';
+
+describe('ComandaConfirmDialogComponent', () => {
+  let component: ComandaConfirmDialogComponent;
+  let fixture: ComponentFixture<ComandaConfirmDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ComandaConfirmDialogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ComandaConfirmDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/comandas/components/comanda-confirm-dialog/comanda-confirm-dialog.component.ts

@@ -0,0 +1,32 @@
+import { Component, Inject, Optional } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Comanda } from '../../models/comanda.model';
+
+@Component({
+	selector: 'app-comanda-confirm-dialog',
+	templateUrl: './comanda-confirm-dialog.component.html',
+	styleUrls: [ './comanda-confirm-dialog.component.css' ]
+})
+export class ComandaConfirmDialogComponent {
+
+	dados: Comanda;
+
+	constructor (
+		public dialogRef: MatDialogRef<ComandaConfirmDialogComponent>,
+		@Optional() @Inject(MAT_DIALOG_DATA) public data: Comanda
+	) {
+		this.dados = { ...data };
+	}
+
+	confirmar() {
+		this.dialogRef.close({
+			confirmacao: true
+		});
+	}
+
+	cancelar() {
+		this.dialogRef.close({
+			confirmacao: false
+		});
+	}
+}

src/app/modules/comandas/components/comanda-view/comanda-view.component.css

@@ -0,0 +1,27 @@
+.label {
+   color: rgb(73, 73, 73);
+}
+
+.content:not(:first-child) {
+   margin-top: 25px;
+}
+
+.linha {
+   margin-bottom: 4px;
+}
+
+.mat-expansion-panel {
+   margin-top: 10px;
+}
+
+.mat-accordion > .mat-expansion-panel-spacing:first-child,
+.mat-accordion > *:first-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing {
+   margin-top: 10px !important;
+}
+
+img {
+   border-radius: 2px;
+   max-width: 120px;
+   min-width: 120px;
+   object-fit: cover;
+}

src/app/modules/comandas/components/comanda-view/comanda-view.component.html

@@ -0,0 +1,41 @@
+<h1 mat-dialog-title>Detalhes da comanda {{data.id}} ({{data.nome}})</h1>
+
+<div *ngFor="let item of data.listaPedidos"
+   class="content">
+   <div class="linha">
+      <span class="label">Id do pedido:</span>
+      <span class="valor"> {{item.id}}</span>
+   </div>
+   <div class="linha">
+      <span class="label">Horário:</span>
+      <span class="valor"> {{item.dataHoraPedido | date:"dd/MM/yyyy HH:MM"}}</span>
+   </div>
+   <div class="linha">
+      <span class="label">Valor total:</span>
+      <span class="valor"> {{getValorToral(item) | currency:"BRL"}}</span>
+   </div>
+
+   <mat-accordion>
+      <mat-expansion-panel [expanded]="true">
+         <mat-expansion-panel-header>
+            <mat-panel-title>
+               Produtos
+            </mat-panel-title>
+            <mat-panel-description>
+               Lista de produtos deste pedido
+            </mat-panel-description>
+         </mat-expansion-panel-header>
+
+         <mat-list>
+            <mat-list-item *ngFor="let produto of item.produtosDoPedido">
+               <img class="imagem"
+                  src='data:image/png;base64,{{produto.produto.foto}}' />
+               <div mat-line>{{produto.produto.nome}}</div>
+               <div mat-line>Preço: {{produto.produto.preco | currency:"BRL"}}</div>
+               <div mat-line>Quantidade: {{produto.quantidade}}x</div>
+               <div mat-line>Status: {{getStatusProdutoPedido(produto.status)}}</div>
+            </mat-list-item>
+         </mat-list>
+      </mat-expansion-panel>
+   </mat-accordion>
+</div>

src/app/modules/comandas/components/comanda-view/comanda-view.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComandaViewComponent } from './comanda-view.component';
+
+describe('ComandaViewComponent', () => {
+  let component: ComandaViewComponent;
+  let fixture: ComponentFixture<ComandaViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ComandaViewComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ComandaViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/comandas/components/comanda-view/comanda-view.component.ts

@@ -0,0 +1,32 @@
+import { Component, Inject, OnInit, Optional } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { NotificationService } from 'src/app/core/services/notification.service';
+import { Pedido } from 'src/app/modules/pedidos/models/pedido.model';
+import { EnumStatusProdutoDoPedido } from './../../../../shared/models/enums/status-produto-pedido.enum';
+import { Comanda } from './../../models/comanda.model';
+import { ComandasService } from './../../services/comandas.service';
+
+@Component({
+	selector: 'app-comanda-view',
+	templateUrl: './comanda-view.component.html',
+	styleUrls: [ './comanda-view.component.css' ]
+})
+export class ComandaViewComponent implements OnInit {
+
+	constructor (private comandaService: ComandasService,
+		private notificationService: NotificationService,
+		@Optional() @Inject(MAT_DIALOG_DATA) public data: Comanda
+	) { }
+
+	ngOnInit(): void {
+		console.log(this.data);
+	}
+
+	getStatusProdutoPedido(status: EnumStatusProdutoDoPedido) {
+		return EnumStatusProdutoDoPedido[ status ];
+	}
+
+	getValorToral(pedido: Pedido) {
+		return pedido.produtosDoPedido.reduce((partialSum, a) => partialSum + (a.produto.preco * a.quantidade), 0);
+	}
+}