From 6430ec8a16845bda32593acb08d00022495c4d67 Mon Sep 17 00:00:00 2001 From: Derek Holloway Date: Sat, 28 Jun 2025 18:39:02 -0700 Subject: [PATCH] start work for edit product --- .../src/app/app.routes.ts | 2 + .../store/admin/edititem/edit.component.html | 46 +++++++ .../store/admin/edititem/edit.component.ts | 122 ++++++++++++++++++ .../store/admin/newitem/new.component.ts | 5 +- .../store/catalog/catalog.component.html | 2 +- .../Controllers/ProductController.cs | 2 +- 6 files changed, 174 insertions(+), 5 deletions(-) create mode 100644 src/MistoxWebsite.Client/src/app/pages/store/admin/edititem/edit.component.html create mode 100644 src/MistoxWebsite.Client/src/app/pages/store/admin/edititem/edit.component.ts diff --git a/src/MistoxWebsite.Client/src/app/app.routes.ts b/src/MistoxWebsite.Client/src/app/app.routes.ts index b25b7ee..53efab3 100644 --- a/src/MistoxWebsite.Client/src/app/app.routes.ts +++ b/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 }, diff --git a/src/MistoxWebsite.Client/src/app/pages/store/admin/edititem/edit.component.html b/src/MistoxWebsite.Client/src/app/pages/store/admin/edititem/edit.component.html new file mode 100644 index 0000000..c3e2432 --- /dev/null +++ b/src/MistoxWebsite.Client/src/app/pages/store/admin/edititem/edit.component.html @@ -0,0 +1,46 @@ +
+

Edit Item

+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ +
+ +
+
+ +
+
+ + +
+ + +
+
+ Image Preview +
+
\ No newline at end of file diff --git a/src/MistoxWebsite.Client/src/app/pages/store/admin/edititem/edit.component.ts b/src/MistoxWebsite.Client/src/app/pages/store/admin/edititem/edit.component.ts new file mode 100644 index 0000000..0c6b7f6 --- /dev/null +++ b/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( "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 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( "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); + } + }); + } +} \ No newline at end of file diff --git a/src/MistoxWebsite.Client/src/app/pages/store/admin/newitem/new.component.ts b/src/MistoxWebsite.Client/src/app/pages/store/admin/newitem/new.component.ts index 24c0b6c..2171eb7 100644 --- a/src/MistoxWebsite.Client/src/app/pages/store/admin/newitem/new.component.ts +++ b/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"]; } diff --git a/src/MistoxWebsite.Client/src/app/pages/store/catalog/catalog.component.html b/src/MistoxWebsite.Client/src/app/pages/store/catalog/catalog.component.html index d077d98..98a49fd 100644 --- a/src/MistoxWebsite.Client/src/app/pages/store/catalog/catalog.component.html +++ b/src/MistoxWebsite.Client/src/app/pages/store/catalog/catalog.component.html @@ -16,7 +16,7 @@

${{ (product.cost/100).toFixed(2) }}

-