Products: have two tabs for products and its presentation #38 #39

src/app/app.module.ts

@@ -57,6 +57,7 @@ import { VCustomersService } from './services/vendei/v-customers.service';
 import { VConfigService } from './services/vendei/v-config.service';
 // reg services
 import { RProductService } from "./services/reg/r-product.service";
+import { RProductPresentationService } from "./services/reg/r-product-presentation.service";
 import { RCategoryService } from "./services/reg/r-category.service";
 import { RConfigService } from "./services/reg/r-config.service";
 // inv services
@@ -200,6 +201,7 @@ const appRoutes: Routes = [
     VCustomersService,
     VConfigService,
     RProductService,
+    RProductPresentationService,
     RCategoryService,
     RConfigService,
     RCustomerService,

src/app/pages/reg/reg-product-list/reg-product-list.component.css

@@ -0,0 +1,33 @@
+.tabs {
+  background-color: black;
+}
+
+.tab {
+  padding: 0.5rem;
+  background-color: skyblue;
+  color: black;
+  border-bottom: none;
+  width: 8rem;
+}
+
+.active-tab {
+  background-color: white;
+  border-bottom: none;
+}
+
+.tab:first-child {
+  margin-left: 0;
+}
+
+.tab-container {
+  background-color: white;
+}
+
+table th {
+  background-color: black;
+  color: white
+}
+
+table tr:nth-child(even) {
+  background-color: #f2f2f2;
+}

src/app/pages/reg/reg-product-list/reg-product-list.component.html

@@ -1,23 +1,47 @@
 <div class="container">
-<button class="btn" (click)="newProduct()"><i class="fa fa-plus fa-lg"></i></button>
+  <button class="btn" (click)="newProduct()"><i class="fa fa-plus fa-lg"></i></button>
   <button class="btn" (click)="openCart()"><i class="fa fa-shopping-cart fa-lg"></i></button>
-  <table class="table">
-    <tr>
-      <th>Product</th>
-      <th>Price</th>
-      <th>Cost</th>
-      <th *ngIf="false">Category</th>
-      <th></th>
-    </tr>
-    <tr *ngFor="let product of products">
-      <td>{{product.name}}</td>
-      <td>{{product.price}}</td>
-      <td>{{product.cost}}</td>
-      <td *ngIf="false">{{product.category?.name}}</td>
-      <td>
-        <button class="btn" (click)="openProduct(product.id)">Edit</button> &nbsp;
-        <button class="btn btn-danger" (click)="removeProduct(product.id)">Delete</button>
-      </td>
-    </tr>
-  </table>
-</div>
+  <div class="tabs">
+    <button class="tab" [ngClass]="{'active-tab': displayProductsTab}" (click)="setProducts()">Products</button>
+    <button class="tab" [ngClass]="{'active-tab': !displayProductsTab}"
+      (click)="setProductPresentations()">Details</button>
+  </div>
+  <div *ngIf="displayProductsTab" class="tab-container">
+    <table class="table">
+      <tr>
+        <th>Product</th>
+        <th>Price</th>
+        <th>Cost</th>
+        <th *ngIf="false">Category</th>
+        <th></th>
+      </tr>
+      <tr *ngFor="let product of products">
+        <td>{{product.name}}</td>
+        <td>{{product.price}}</td>
+        <td>{{product.cost}}</td>
+        <td *ngIf="false">{{product.category?.name}}</td>
+        <td>
+          <button class="btn" (click)="openProduct(product.id)">Edit</button> &nbsp;
+          <button class="btn btn-danger" (click)="removeProduct(product.id)">Delete</button>
+        </td>
+      </tr>
+    </table>
+  </div>
+  <div *ngIf="!displayProductsTab" class="tab-container">
+    <table class="table">
+      <tr>
+        <th>Product</th>
+        <th>Price</th>
+        <th>Actions</th>
+      </tr>
+      <tr *ngFor="let product of productPresentations">
+        <td>{{product.Product.name}}</td>
+        <td>{{product.currentPrice}}</td>
+        <td>
+          <button class="btn" (click)="openProduct(product.id)">Edit</button> &nbsp;
+          <button class="btn btn-danger" (click)="removeProduct(product.id)">Delete</button>
+        </td>
+      </tr>
+    </table>
+  </div>
+</div>

src/app/pages/reg/reg-product-list/reg-product-list.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { RProductService, IProduct } from '../../../services/reg/r-product.service'
+import { RProductPresentationService, IProductPresentation } from '../../../services/reg/r-product-presentation.service'
 import { Router } from "@angular/router";
 
 @Component({
@@ -9,10 +10,13 @@ import { Router } from "@angular/router";
 })
 export class RegProductListComponent implements OnInit {
   products: IProduct[];
-  constructor(private productSvc: RProductService, private router: Router) {}
+  productPresentations: IProductPresentation[];
+  displayProductsTab = true;
+  constructor(private productSvc: RProductService, private productPresentationSvc: RProductPresentationService, private router: Router) {}
 
   ngOnInit() {
     this.loadProducts();
+    this.loadProductPresentations();
   }
 
   loadProducts() {
@@ -21,6 +25,12 @@ export class RegProductListComponent implements OnInit {
     });
   }
 
+  loadProductPresentations() {
+    this.productPresentationSvc.getAll().subscribe(productPresentations => {
+      this.productPresentations = productPresentations;
+    });
+  }
+
   newProduct() {
     this.router.navigate(["/reg/products/new"]);
   }
@@ -38,4 +48,18 @@ export class RegProductListComponent implements OnInit {
       this.loadProducts();
     });
   }
+
+  removeProductPresentation(productPId: string) {
+    this.productPresentationSvc.remove(productPId).subscribe(productP => {
+      this.loadProductPresentations();
+    });
+  }
+
+  setProducts() {
+    this.displayProductsTab = true;
+  }
+
+  setProductPresentations() {
+    this.displayProductsTab = false;
+  }
 }

src/app/services/reg/r-product-presentation.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { RProductPresentationService } from './r-product-presentation.service';
+
+describe('RProductPresentationService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [RProductPresentationService]
+    });
+  });
+
+  it('should be created', inject([RProductPresentationService], (service: RProductPresentationService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/services/reg/r-product-presentation.service.ts

@@ -0,0 +1,47 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from "@angular/common/http";
+import { RConfigService } from "./r-config.service";
+
+import { RCrudInterface } from './r-crud.interface';
+import { Observable } from 'rxjs';
+
+export interface IProductPresentation {
+  id: string;
+  code: string;
+  currentPrice: number;
+  img: string;
+  unitOfMeasure: string;
+  productId: string;
+  quantity: number;
+}
+
+@Injectable({
+  providedIn: "root"
+})
+export class RProductPresentationService implements RCrudInterface {
+  modelUrl: string;
+  constructor(private http: HttpClient, private configSvc: RConfigService) {
+    this.modelUrl = this.configSvc.baseUrl + "/productPresentations";
+  }
+
+  getAll(): Observable<any> {
+    return this.http.get(`${this.modelUrl}`);
+  }
+
+  getById(id: string): Observable<any> {
+    return this.http.get(`${this.modelUrl}/${id}`);
+  }
+
+  save(data: any): Observable<any> {
+    return this.http.post(this.modelUrl, data);
+  }
+
+  update(data: any): Observable<any> {
+    return this.http.put(`${this.modelUrl}/${data.id}`, data);
+  }
+
+  remove(productId: any): Observable<any> {
+    return this.http.delete(`${this.modelUrl}/${productId}`);
+  }
+
+}

src/app/services/reg/r-product.service.ts

@@ -22,7 +22,6 @@ export interface IProduct {
 })
 export class RProductService implements RCrudInterface {
   modelUrl: string;
-  includeCat: string;
   constructor(private http: HttpClient, private configSvc: RConfigService) {
     this.modelUrl = this.configSvc.baseUrl + "/products";
   }