start work for edit product

src/MistoxWebsite.Client/src/app/app.routes.ts

@@ -10,6 +10,7 @@ import { LogoutComponent } from './pages/account/logout/logout.component';
 import { ResetPasswordComponent } from './pages/account/resetpassword/resetpassword.component';
 import { VerifyEmailComponent } from './pages/account/verifyemail/verifyemail.component';
 import { NewItemComponent } from './pages/store/admin/newitem/new.component';
+import { EditItemComponent } from './pages/store/admin/edititem/edit.component';
 
 export const routes: Routes = [
 
@@ -30,6 +31,7 @@ export const routes: Routes = [
 
     // AdminPages
     { path: "store/admin/new", component: NewItemComponent },
+    { path: "store/admin/edit", component: EditItemComponent },
 
     // Legal
     { path: "about", component: AboutComponent },

src/MistoxWebsite.Client/src/app/pages/store/admin/edititem/edit.component.html

@@ -0,0 +1,46 @@
+<form class="center big-frame background-border" #accountForm="ngForm" (ngSubmit)="onSubmit()">
+  <h3>Edit Item</h3>
+
+  <div class="frame-item">
+    <input type="text" [(ngModel)]="newItem.name" name="ItemName" placeholder=" " />
+    <label>Item Name</label>
+  </div>
+
+  <div class="frame-item">
+    <input type="number" [(ngModel)]="newItem.cost" name="ItemCost" placeholder=" " />
+    <label>Cost</label>
+  </div>
+
+  <div class="frame-item">
+    <input type="text" [(ngModel)]="newItem.url" name="itemURL" placeholder=" " />
+    <label>URL</label>
+  </div>
+
+    <div class="frame-item">
+      <textarea [(ngModel)]="newItem.description" name="ItemDesc" cols="40" placeholder=" " ></textarea>
+      <label>Description</label>
+    </div>
+
+  <div class="frame-item">
+    <!-- Need to fix for image file upload -->
+     <div id="FileUploadPlaceholder" ></div>
+    <input type="file" (change)="onFileSelected($event)" accept="image/*" multiple />
+  </div>
+
+  <div class="flex-row">
+    <div class="frame-button">
+      <input class="submit" type="submit" value="Create Item" />
+    </div>
+  </div>
+
+  <ul *ngIf="errorMsgs.length > 0" >
+    <li *ngFor="let msg of errorMsgs" >{{ msg }}</li>
+  </ul>
+</form>
+
+<!-- Finish file preview for uploads -->
+<div class="center big-frame background-border">
+  <div *ngFor="let cur of imagePreviews" id="imageHolder">
+    <img [src]="cur" alt="Image Preview" style="max-width: 200px;"/>
+  </div>
+</div>

src/MistoxWebsite.Client/src/app/pages/store/admin/edititem/edit.component.ts

@@ -0,0 +1,122 @@
+import { Component } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Title } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+import { Authentication } from '../../../../services/Authentication';
+import { Product } from 'app/models/Product';
+
+@Component({
+  selector: 'item-edit',
+  templateUrl: './edit.component.html',
+  imports: [ FormsModule, CommonModule ]
+})
+export class EditItemComponent {
+
+  readonly maxFileMB = 16;
+
+  newItem: Product = new Product();
+  errorMsgs: string[] = [];
+
+  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication ) {
+    this.title.setTitle("Edit | ADMIN");
+    this.route.queryParams.subscribe(params => {
+      this.newItem.id = params['ProductID'] || '';
+    });
+
+    // If user is not logged in -> route home
+    if (!auth.isLoggedIn){
+      router.navigate(["/"]);
+    }
+
+    // If user is not Admin -> route home
+    if (auth.loggedInUser.siteData.role != "Admin"){
+      router.navigate(["/"]);
+    }
+
+    // Load product
+    const formData = new FormData();
+    formData.append("productID", this.newItem.id.toString());
+    this.http.post<Product>( "api/product/get", formData ).subscribe({
+        next: async (data) => {
+          this.newItem = data;
+          this.newItem.images.forEach(img => {
+            http.get("api/productimage/get?ProductID=" + img.productID + "&ImageID=" + img.imageID, { responseType: 'blob' }).subscribe(blob => {
+              img.imageSrc = URL.createObjectURL(blob);
+              this.imagePreviews.push(img.imageSrc);
+            });
+          });
+        },
+        error: err => {
+            console.log("Err loading product: ", err);
+        }
+    });
+  };
+
+  sleep(ms: number) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  selectedFiles: File[] = [];
+  imagePreviews: string[] = [];
+  onFileSelected(event: Event){
+    const fileInput = event.target as HTMLInputElement;
+    this.imagePreviews = [];
+    this.selectedFiles = [];
+
+    if (!fileInput.files?.length){
+      return;
+    }
+
+    for (let i=0; i<fileInput.files.length; i++){
+      let file = fileInput.files[i];
+      if (file.size > this.maxFileMB * 1024 * 1024){
+        this.errorMsgs.push("File exceeds max file size of 16MB");
+        continue;
+      }
+      // No issues add file to the list
+      this.selectedFiles.push( file );
+
+      const reader = new FileReader();
+      reader.onload= () => {
+        this.imagePreviews.push(reader.result as string);
+      }
+      reader.readAsDataURL(file);
+    }
+  }
+
+  onSubmit(){
+
+    const formData = new FormData();
+
+    // Append non-file fields
+    formData.append("Name", this.newItem.name);
+    formData.append("Description", this.newItem.description);
+    formData.append("Cost", this.newItem.cost.toString());
+    formData.append("Url", this.newItem.url);
+
+    // Add image fileds
+    if (this.selectedFiles.length > 0){
+      for(let i=0; i<this.selectedFiles.length; i++){
+        formData.append("images", this.selectedFiles[i], this.selectedFiles[i].name);
+      };
+    }
+
+    // Proccess data
+    this.http.post<boolean>( "api/product/create", formData ).subscribe({
+        next: async (data) => {
+            if (data == true){
+              this.errorMsgs = ["Product Created Successfully"];
+              await this.sleep(3000);
+              this.router.navigate(["/catalog"]);
+            }else{
+              this.errorMsgs = ["Error has ocurred"];
+            }
+        },
+        error: err => {
+            console.log("New Product Err: ", err);
+        }
+    });
+  }
+}

src/MistoxWebsite.Client/src/app/pages/store/admin/newitem/new.component.ts

@@ -5,12 +5,11 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 import { Authentication } from '../../../../services/Authentication';
-import { Product, ProductImage } from 'app/models/Product';
+import { Product } from 'app/models/Product';
 
 @Component({
   selector: 'item-new',
   templateUrl: './new.component.html',
-  styleUrl: './new.component.css',
   imports: [ FormsModule, CommonModule ]
 })
 export class NewItemComponent {
@@ -89,7 +88,7 @@ export class NewItemComponent {
             if (data == true){
               this.errorMsgs = ["Product Created Successfully"];
               await this.sleep(3000);
-              this.router.navigate(["/catalog"]);
+              this.router.navigate(["store/catalog"]);
             }else{
               this.errorMsgs = ["Error has ocurred"];
             }

src/MistoxWebsite.Client/src/app/pages/store/catalog/catalog.component.html

@@ -16,7 +16,7 @@
         <h2 class="gameCard-Price">${{ (product.cost/100).toFixed(2) }}</h2>
         <button class="gameCard-Button" disabled="">Add To Cart</button>
         <div *ngIf="auth.loggedInUser.siteData.role == 'Admin'">
-            <button style="width: calc(50% - 10px); margin: 5px;" onclick="">
+            <button style="width: calc(50% - 10px); margin: 5px;" [routerLink]="['/store/admin/edit']" [queryParams]="{ ProductID: product.id }" >
                 Edit
             </button>
             <button style="width: calc(50% - 10px); margin: 5px;" (click)="DeleteItem(product.id)" >

src/MistoxWebsite.Server/Controllers/ProductController.cs

@@ -91,7 +91,7 @@ namespace MistoxWebsite.Server.Controllers {
 
         [Route( "api/product/get" )]
         [HttpPost]
-        public async Task<ActionResult<Product>> GetProduct( [FromBody] int productID ) {
+        public async Task<ActionResult<Product>> GetProduct( [FromForm] int productID ) {
             try {
                 Product? x = await _databaseService.GetProduct(productID);
                 if (x != null) {