feat: add manage products page placeholder

Author: gultyayev

src/app/admin/admin-routing.module.ts

@@ -1,12 +1,17 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { OrdersComponent } from './orders/orders.component';
+import { ManageProductsComponent } from './manage-products/manage-products.component';
 
 const routes: Routes = [
   {
     path: 'orders',
     component: OrdersComponent,
   },
+  {
+    path: 'products',
+    component: ManageProductsComponent,
+  },
 ];
 
 @NgModule({

src/app/admin/admin.module.ts

@@ -5,10 +5,12 @@ import { AdminRoutingModule } from './admin-routing.module';
 import { OrdersComponent } from './orders/orders.component';
 import { MatTableModule } from '@angular/material/table';
 import { OrdersService } from './orders/orders.service';
+import { ManageProductsComponent } from './manage-products/manage-products.component';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
-  declarations: [OrdersComponent],
-  imports: [CommonModule, AdminRoutingModule, MatTableModule],
+  declarations: [OrdersComponent, ManageProductsComponent],
+  imports: [CommonModule, AdminRoutingModule, MatTableModule, MatButtonModule],
   providers: [OrdersService],
 })
 export class AdminModule {}

src/app/admin/manage-products/manage-products.component.html

@@ -0,0 +1,38 @@
+<h1>Manage products</h1>
+
+<table class="w-100" [dataSource]="products$" mat-table>
+  <ng-container matColumnDef="from">
+    <th mat-header-cell *matHeaderCellDef>Title</th>
+    <td mat-cell *matCellDef="let product">
+      {{ product.title }}
+    </td>
+  </ng-container>
+  <ng-container matColumnDef="description">
+    <th mat-header-cell *matHeaderCellDef>Description</th>
+    <td mat-cell *matCellDef="let product">{{ product.description }}</td>
+  </ng-container>
+  <ng-container matColumnDef="price">
+    <th mat-header-cell *matHeaderCellDef>Price</th>
+    <td mat-cell *matCellDef="let product">
+      {{ product.price | number: "1.2-2" | currency }}
+    </td>
+  </ng-container>
+  <ng-container matColumnDef="count">
+    <th mat-header-cell *matHeaderCellDef>Count</th>
+    <td mat-cell *matCellDef="let product">{{ product.count }}</td>
+  </ng-container>
+  <ng-container matColumnDef="action">
+    <th mat-header-cell *matHeaderCellDef>Action</th>
+    <td mat-cell *matCellDef="let product">
+      <button class="text-uppercase mr-2" color="primary" mat-flat-button>
+        manage
+      </button>
+      <button class="text-uppercase" color="warn" mat-flat-button>
+        delete
+      </button>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="columns"></tr>
+  <tr mat-row *matRowDef="let row; columns: columns"></tr>
+</table>

src/app/admin/manage-products/manage-products.component.scss

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

src/app/admin/manage-products/manage-products.component.spec.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Product } from '../../products/product.interface';
+import { ProductsService } from '../../products/products.service';
+
+@Component({
+  selector: 'app-manage-products',
+  templateUrl: './manage-products.component.html',
+  styleUrls: ['./manage-products.component.scss'],
+})
+export class ManageProductsComponent implements OnInit {
+  readonly columns = ['from', 'description', 'price', 'count', 'action'];
+
+  products$!: Observable<Product[]>;
+
+  constructor(private readonly productsService: ProductsService) {}
+
+  ngOnInit(): void {
+    this.products$ = this.productsService.getProducts();
+  }
+}

src/app/admin/manage-products/manage-products.component.ts

@@ -22,5 +22,5 @@
 
 <mat-menu #menu="matMenu">
   <a routerLink="admin/orders" mat-menu-item>Manage orders</a>
-  <a routerLink="/" mat-menu-item>Manage products</a>
+  <a routerLink="admin/products" mat-menu-item>Manage products</a>
 </mat-menu>