feature : implement single product view as shared component

mBahrawy · Aug 17, 2023 · 4b8303c · 4b8303c
1 parent 156d63b
commit 4b8303c
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 25 deletions.
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -15,7 +15,7 @@ const routes: Routes = [
     canActivate: [DeAuthGuard],
   },
   {
-    path: '',
+    path: 'store',
     loadChildren: () =>
       import('./modules/user/user.module').then((m) => m.UserModule),
     canActivate: [AuthGuard, UserGuard],

diff --git a/src/app/components/product-view/product-view.component.html b/src/app/components/product-view/product-view.component.html
@@ -1,29 +1,31 @@
-<div class="container mt-5" *ngIf="product">
+<div class="container my-5" *ngIf="product">
   <div class="row">
     <div class="col-md-12">
 
       <mat-card class="product-card">
-        <mat-card-header class="mb-3 d-flex">
+        <mat-card-header class="mb-3 d-flex justify-content-between">
 
-          <button (click)="handleBack()" mat-icon-button color="primary" aria-label="Back">
+          <button (click)="handleBack()" mat-icon-button  color="primary" aria-label="Back">
             <mat-icon>keyboard_arrow_left</mat-icon>
           </button>
 
-          <div>
+          <div class="d-flex flex-column flex-grow-1">
             <mat-card-title>{{ product.title }}</mat-card-title>
           <mat-card-subtitle>Category: {{ product.category }}</mat-card-subtitle>
           </div>
 
 
+
         </mat-card-header>
+        <mat-divider class=""></mat-divider>
         <mat-card-content>
 
           <div class="row p-0">
-            <div class="col-md-4">
+            <div class="col-md-6 py-4">
               <img class="img-fluid" [src]="product.image" [alt]="product.title" />
 
             </div>
-            <div class="col-md-8">
+            <div class="col-md-6 py-4">
 
               <div class="mb-5">
                 <h4><b>Product description</b></h4>
@@ -35,11 +37,10 @@ <h4><b>Product description</b></h4>
             </div>
           </div>
 
-          <mat-divider class="mt-3"></mat-divider>
-
+          <mat-divider *ngIf="isShowingActions" class="mt-3"></mat-divider>
         </mat-card-content>
 
-        <mat-card-actions class="d-flex justify-content-end">
+        <mat-card-actions *ngIf="isShowingActions" class="d-flex justify-content-end">
 
           <button (click)="delete()" mat-button color="warn" aria-label="Delete">
             <mat-icon>delete</mat-icon> Delete

diff --git a/src/app/components/product-view/product-view.component.ts b/src/app/components/product-view/product-view.component.ts
@@ -13,6 +13,8 @@ import { Location } from '@angular/common';
 })
 export class ProductViewComponent implements OnInit, OnDestroy {
   product!: Product;
+  isShowingActions!: boolean;
+
   private productSub$: Subscription = new Subscription();
 
   constructor(
@@ -34,6 +36,7 @@ export class ProductViewComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     const id = this.route.snapshot.paramMap.get('id');
+    this.isShowingActions = this.route.snapshot.data['isShowingActions'] || false;
     if (id) {
       this.productSub$ = this.products.single(id).subscribe((product) => {
         this.product = product;

diff --git a/src/app/core/services/auth.service.ts b/src/app/core/services/auth.service.ts
@@ -65,7 +65,7 @@ export class AuthService {
 
   redirectUser(): void {
     if (!this.currentUserRole || !this.getToken()) return;
-    this.currentUserRole === UserRole.USER && this.router.navigate(['/']);
+    this.currentUserRole === UserRole.USER && this.router.navigate(['/store']);
     this.currentUserRole === UserRole.ADMIN && this.router.navigate(['/admin']);
   }
 

diff --git a/src/app/modules/admin/admin-routing.module.ts b/src/app/modules/admin/admin-routing.module.ts
@@ -1,9 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { ProductViewComponent } from 'src/app/components/product-view/product-view.component';
-import { ProductsTableComponent } from './products-table/products-table.component';
-import { ProductFormComponent } from './product-form/product-form.component';
 import { CategoriesResolver } from 'src/app/core/resolvers/categories.resolver';
+import { ProductFormComponent } from './product-form/product-form.component';
 
 const routes: Routes = [
   {
@@ -22,6 +21,9 @@ const routes: Routes = [
   {
     path: ':id',
     component: ProductViewComponent,
+    data: {
+      isShowingActions: true,
+    }
   },
   {
     path: ':id/edit',

diff --git a/src/app/modules/admin/products-table/products-table.component.html b/src/app/modules/admin/products-table/products-table.component.html
@@ -2,37 +2,45 @@
   <div class="row">
     <div class="col-12 d-flex mb-3 justify-content-end">
       <button [routerLink]="['new']" mat-raised-button color="primary" aria-label="Add">
-       Create new product <mat-icon>add</mat-icon>
+        Create new product <mat-icon>add</mat-icon>
       </button>
     </div>
   </div>
-  <div class="row">
+  <div class="row" [ngStyle]="{display: dataSource.data.length ? 'block' :'none'}">
+    <!-- <div class="row"> -->
     <div class="col-12">
 
       <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
 
         <!-- ID Column -->
         <ng-container matColumnDef="id">
           <th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
-          <td mat-cell *matCellDef="let product"><div>{{ product.id }}</div></td>
+          <td mat-cell *matCellDef="let product">
+            <div>{{ product.id }}</div>
+          </td>
         </ng-container>
 
         <!-- Title Column -->
         <ng-container matColumnDef="title">
           <th class="p-1" mat-header-cell *matHeaderCellDef mat-sort-header>Title</th>
-          <td class="p-1" mat-cell *matCellDef="let product"><button [routerLink]="[product.id]" class="btn btn-link link">{{ product.title }}</button></td>
+          <td class="p-1" mat-cell *matCellDef="let product"><button [routerLink]="[product.id]"
+              class="btn btn-link link">{{ product.title }}</button></td>
         </ng-container>
 
         <!-- Price Column -->
         <ng-container matColumnDef="price">
           <th class="p-1" mat-header-cell *matHeaderCellDef mat-sort-header>Price</th>
-          <td class="p-1" mat-cell *matCellDef="let product"><div>{{ product.price }}</div></td>
+          <td class="p-1" mat-cell *matCellDef="let product">
+            <div>{{ product.price }}</div>
+          </td>
         </ng-container>
 
         <!-- Category Column -->
         <ng-container matColumnDef="category">
           <th class="p-1" mat-header-cell *matHeaderCellDef mat-sort-header>Category</th>
-          <td class="p-1" mat-cell *matCellDef="let product"><div>{{ product.category }}</div></td>
+          <td class="p-1" mat-cell *matCellDef="let product">
+            <div>{{ product.category }}</div>
+          </td>
         </ng-container>
 
         <!-- Rating Column -->
@@ -61,7 +69,8 @@
               <button class="p-0 m-0" [routerLink]="[product.id]" mat-icon-button color="primary" aria-label="View">
                 <mat-icon>remove_red_eye</mat-icon>
               </button>
-              <button class="p-0 m-0" [routerLink]="[product.id + '/edit']" mat-icon-button color="primary" aria-label="Edit">
+              <button class="p-0 m-0" [routerLink]="[product.id + '/edit']" mat-icon-button color="primary"
+                aria-label="Edit">
                 <mat-icon>edit</mat-icon>
               </button>
             </div>
@@ -73,10 +82,11 @@
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
       </table>
 
-      <div class="d-flex justify-content-end">
+      <div class="d-flex justify-content-end" [ngStyle]="{display: dataSource.data.length ? 'flex' :'none'}">
+        <!-- <div class="d-flex justify-content-end"> -->
         <mat-paginator class="my-4" [pageSizeOptions]="[5, 10, 25, 50]" [pageSize]="pageSize" [pageIndex]="pageIndex"
-        [length]="totalItems" (page)="onPageChange($event)">
-      </mat-paginator>
+          [length]="totalItems" (page)="onPageChange($event)">
+        </mat-paginator>
       </div>
 
     </div>

diff --git a/src/app/modules/user/products/products.component.html b/src/app/modules/user/products/products.component.html
@@ -9,7 +9,8 @@
 
     <div class="col-md-9">
 
-      <div class="row">
+      <!-- <div class="row"> -->
+      <div class="row" [ngStyle]="{display: filterdProductsList.length ? 'block' :'none'}">
         <mat-paginator class="my-4" [pageSizeOptions]="[6, 12, 24, 48]" [pageSize]="pageSize" [pageIndex]="pageIndex"
           [length]="totalItems" (page)="onPageChange($event)">
         </mat-paginator>
@@ -40,7 +41,8 @@ <h4 class="mb-1"><b>Stock: </b>{{product.rating.count}}</h4>
             <mat-divider class="mt-2"></mat-divider>
             <mat-card-actions class="d-flex justify-content-between">
               <h4 class="mb-1 ms-1"><b>Price: </b>{{product.price | currency}}</h4>
-              <button mat-raised-button color="primary">View</button>
+              <button [routerLink]="[product.id]" mat-raised-button color="primary">View</button>
+              <!-- <button mat-raised-button color="primary">View</button> -->
 
             </mat-card-actions>
           </mat-card>

diff --git a/src/app/modules/user/user-routing.module.ts b/src/app/modules/user/user-routing.module.ts
@@ -2,13 +2,21 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { ProductsComponent } from './products/products.component';
 import { CategoriesResolver } from 'src/app/core/resolvers/categories.resolver';
+import { ProductViewComponent } from 'src/app/components/product-view/product-view.component';
 
 const routes: Routes = [
   {
     path: '',
     component: ProductsComponent,
     resolve: { categories: CategoriesResolver },
   },
+  {
+    path: ':id',
+    component: ProductViewComponent,
+    data: {
+      isShowingActions: false,
+    }
+  },
 ];
 
 @NgModule({