New Features:

1.Logic to see a product detail
New Pages:

Bugs Corrected:

To Be Corrected:
1.Delete a product
2. Edit a product

src/app/app-routing.module.ts

@@ -42,6 +42,10 @@ const routes: Routes = [
     loadChildren: () => import('./pages/new-product/new-product.module').then( m => m.NewProductPageModule),
     ...canActivate(redirectUnauthorizedToLogin),
   },
+  {
+    path: 'view-product',
+    loadChildren: () => import('./pages/view-product/view-product.module').then( m => m.ViewProductPageModule)
+  },
 ];
 
 @NgModule({

src/app/pages/model-product/model-product.page.html

@@ -13,7 +13,7 @@
       <ion-col size="12">
         <ion-list [inset]="true" class="bg-white">
           @for (product of products; track product){
-            <ion-item color="dark">
+            <ion-item color="dark" (click)="viewProduct(product)">
               <ion-label>{{product.productObjective}}</ion-label>
             </ion-item>
           }

src/app/pages/model-product/model-product.page.ts

@@ -3,6 +3,7 @@ import {ProductService} from "../../services/product.service";
 import {Product} from "../../interfaces/product";
 import {User} from "../../interfaces/user";
 import {AlertController, LoadingController} from "@ionic/angular";
+import {Router} from "@angular/router";
 
 @Component({
   selector: 'app-model-product',
@@ -18,7 +19,8 @@ export class ModelProductPage implements OnInit {
   constructor(
     private productService: ProductService,
     private alertCtrl: AlertController,
-    private loadingCtrl: LoadingController
+    private loadingCtrl: LoadingController,
+    private router: Router
 
   ) { }
 
@@ -55,6 +57,11 @@ export class ModelProductPage implements OnInit {
     }
   }
 
+  async viewProduct(product: Product) {
+    //navigate to the product page
+    await this.router.navigate(['/view-product'],{queryParams:{product:JSON.stringify(product)}});
+  }
+
 
   /**
    * Show an alert with the given message.

src/app/pages/view-product/view-product-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ViewProductPage } from './view-product.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ViewProductPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ViewProductPageRoutingModule {}

src/app/pages/view-product/view-product.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ViewProductPageRoutingModule } from './view-product-routing.module';
+
+import { ViewProductPage } from './view-product.page';
+import {ComponentsModule} from "../../components/components.module";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        IonicModule,
+        ViewProductPageRoutingModule,
+        ComponentsModule
+    ],
+  declarations: [ViewProductPage]
+})
+export class ViewProductPageModule {}

src/app/pages/view-product/view-product.page.html

@@ -0,0 +1,69 @@
+
+<app-header [title]=product.productObjective!></app-header>
+
+
+<ion-content [fullscreen]="true">
+  <div class="flex flex-col flex-grow lg:flex-row md:flex-row min-w-full h-full">
+    <ion-card class="flex flex-col flex-grow">
+      <ion-card-header class="flex flex-row justify-center">
+        <ion-card-title>Product Steps</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-list #stepList>
+          @for (step of product.productSteps; track step){
+          <ion-item>
+            <ion-input value="{{step}}"></ion-input>
+          </ion-item>
+          }
+        </ion-list>
+      </ion-card-content>
+    </ion-card>
+    <ion-card class="flex flex-col flex-grow">
+      <ion-card-header class="flex flex-row justify-center">
+        <ion-card-title>Product Services</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-list>
+          @for (step of product.productServices; track step){
+            <ion-item>
+              <ion-input value="{{step}}"></ion-input>
+            </ion-item>
+          }
+        </ion-list>
+      </ion-card-content>
+    </ion-card>
+    <ion-card class="flex flex-col flex-grow">
+      <ion-card-header class="flex flex-row justify-center">
+        <ion-card-title>Product SLOs</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-list>
+          @for (step of product.productSLOs; track step){
+            <ion-item>
+              <ion-input value="{{step}}"></ion-input>
+            </ion-item>
+          }
+        </ion-list>
+      </ion-card-content>
+    </ion-card>
+  </div>
+  <div class="flex flex-row justify-center items-center mt-auto">
+    <ion-item-divider color="light">
+      <div class="flex justify-center items-center min-w-full p-4">
+        <div class="p-1">
+          <ion-button color="success">Add Step</ion-button>
+        </div>
+        <div class="p-1">
+          <ion-button color="primary" (click)="getAllInputValues()">Edit Product</ion-button>
+        </div>
+        <div class="p-1">
+          <ion-button color="danger">Delete Product</ion-button>
+        </div>
+      </div>
+    </ion-item-divider>
+  </div>
+
+
+
+
+</ion-content>

src/app/pages/view-product/view-product.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ViewProductPage } from './view-product.page';
+
+describe('ViewProductPage', () => {
+  let component: ViewProductPage;
+  let fixture: ComponentFixture<ViewProductPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ViewProductPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/view-product/view-product.page.ts

@@ -0,0 +1,65 @@
+import {Component, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core';
+import {Product} from "../../interfaces/product";
+import {ActivatedRoute} from "@angular/router";
+import {IonInput, IonList} from "@ionic/angular";
+
+@Component({
+  selector: 'app-view-product',
+  templateUrl: './view-product.page.html',
+  styleUrls: ['./view-product.page.scss'],
+})
+export class ViewProductPage implements OnInit {
+  /**
+   * Product object.
+   */
+  product: Product = {
+    productObjective: '',
+    productSteps: [],
+    productServices: [],
+    productSLOs: []
+  }
+
+  @ViewChildren(IonInput) inputs: QueryList<IonInput> | undefined;
+
+  constructor(
+    private route: ActivatedRoute
+  ) { }
+
+  async ngOnInit() {
+    this.getProductFromParams();
+  }
+
+
+
+
+  getProductFromParams() {
+    // Get product from URL params
+    this.route.queryParams.subscribe(params => {
+      this.product = JSON.parse(params['product']);
+    });
+    console.log(this.product);
+
+  }
+
+
+  getAllInputValues() {
+    const inputValues = this.inputs!.map(input => input.value);
+
+    //dividing the input values into productSteps, productServices, and productSLOs
+    const itemsPerSection = this.product!.productSteps!.length;
+
+    const productSteps = inputValues.slice(0, itemsPerSection);
+    const productServices = inputValues.slice(itemsPerSection, itemsPerSection * 2);
+    const productSLOs = inputValues.slice(itemsPerSection * 2, itemsPerSection * 3);
+
+    console.log(productSteps);
+    console.log(productServices);
+    console.log(productSLOs);
+
+  }
+
+
+
+
+
+}