minor code improvements

MiguelPelegrina · Dec 10, 2023 · 3ed3fca · 3ed3fca
1 parent 26cc51c
commit 3ed3fca
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 51 deletions.
diff --git a/src/app/components/book/add-edit-book-form/add-edit-book-form.component.html b/src/app/components/book/add-edit-book-form/add-edit-book-form.component.html
@@ -1,5 +1,5 @@
-<h2 class="text-center" *ngIf="isAddMode">Add a new book</h2>
-<h2 class="text-center" *ngIf="!isAddMode">Edit book</h2>
+<h1 class="text-center m-2 p-2" *ngIf="isAddMode">Add a new book</h1>
+<h1 class="text-center m-2 p-2" *ngIf="!isAddMode">Edit book</h1>
 
 <div class="container form-container mat-elevation-z8">
   <div class="loading-shade" *ngIf="isLoading">
@@ -100,15 +100,6 @@ <h2 class="text-center" *ngIf="!isAddMode">Edit book</h2>
     <div class="row">
       <div class="col-sm">
       <!-- COLUMN -->
-        <!-- KILLER FEATURE: Table for different prices depending on currencies
-            Option 1: Create a auto incremental table -> one row with empty fields for price and currency.
-            If the fields of the row are set, generate a new row with empty. <-- I favor this option
-            Option 2: Create a table with as many rows as currencies are supported. At least one must be filled.
-            Optional: Checkbox or toggle to enable currency converter. The conversion values need to be managed by someone (employees?).
-            Problem: What if more then one price is manually set?
-            Solution: Only allow one currency to be inserted manully, disable the fields of other rows and convert the prices from
-            the setted one to the others?
-          -->
           <!-- PRICE -->
         <mat-form-field class="form-group w-100" floatLabel="always">
             <mat-label>Price</mat-label>
@@ -120,7 +111,7 @@ <h2 class="text-center" *ngIf="!isAddMode">Edit book</h2>
             required
           >
 
-          <span class="text-white" matTextSuffix>€&nbsp;</span>
+          <span class="text-white" matTextSuffix>$&nbsp;</span>
           <!-- /PRICE -->
 
           <mat-error *ngIf="f['price'].invalid">{{getErrorMessage('price')}}</mat-error>
@@ -139,7 +130,7 @@ <h2 class="text-center" *ngIf="!isAddMode">Edit book</h2>
           placeholder="Enter the stock"
           type="number"
           >
-          <mat-error *ngIf="form.controls['stock'].invalid">{{getErrorMessage('stock')}}</mat-error>
+          <mat-error *ngIf="f['stock'].invalid">{{getErrorMessage('stock')}}</mat-error>
           <!-- /STOCK -->
         </mat-form-field>
         <!-- /COLUMN -->
@@ -157,6 +148,7 @@ <h2 class="text-center" *ngIf="!isAddMode">Edit book</h2>
 
           <div class="d-flex justify-content-center m-3 ">
             <img *ngIf="this.image" [src]="this.image" alt="Uploaded File">
+            <mat-error *ngIf="f['image'].invalid">{{getErrorMessage('image')}}</mat-error>
           </div>
 
           <div class="d-flex justify-content-center">

diff --git a/src/app/components/book/book-excel-parser/book-excel-parser.component.html b/src/app/components/book/book-excel-parser/book-excel-parser.component.html
@@ -1,25 +1,31 @@
 <div class="d-flex justify-content-center m-2 p-2">
   <div class="d-flex flex-column justify-content-center">
-    <h1 class="m-1 p-1">Excel parser</h1>
+    <h1 class="m-1 p-1">Excel importer</h1>
   </div>
 </div>
 <div class="container">
   <h2>Instructions</h2>
   <p>
-    1. This excel parser allows you to choose an excel file, see all the values of it in a table and then import those books into the database.
+    1. This importer allows you to choose an excel file, see all the values of it in a table and then import those books into the database.
   </p>
   <p>
-    2. Currently <b>supported extensions: .xlsx</b>.
+    2. Currently <b>supported extensions:</b>.
   </p>
+    <ul>
+      <li><b>.xlsx</b></li>
+    </ul>
   <p>
     3. All <b>new genres</b> used in the excel <b>will be created</b>.
   </p>
   <p>
     4. All <b>new formats</b> used in the excel <b>will be created</b>.
   </p>
   <p>
-    5. Every book will be added. No book will be updated and no book with apparent same data will be ignored.
-  </p>
+    5. Books are <b>identified by their ISBN</b>. This has the following consequences:</p>
+    <ul>
+      <li>If the ISBN is <b>not assigned yet</b>, the book will be <b>added</b>.</li>
+      <li>If the ISBN is <b>already assigned</b>, the book will be <b>updated</b>.</li>
+    </ul>
 </div>
 
 <div class="d-flex justify-content-center">
@@ -59,6 +65,13 @@ <h2>Instructions</h2>
     </ng-container>
     <!-- /ACTIVE -->
 
+     <!-- ISBN -->
+     <ng-container matColumnDef="isbn">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="ISBN of the book" sortActionDescription="Sort by price">ISBN</th>
+      <td mat-cell *matCellDef="let book"> {{book.ISBN}}</td>
+    </ng-container>
+    <!-- /ISBN -->
+
     <!-- PRICE -->
     <ng-container matColumnDef="price">
       <th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Price of the book" sortActionDescription="Sort by price">Price</th>

diff --git a/src/app/components/book/book-excel-parser/book-excel-parser.component.ts b/src/app/components/book/book-excel-parser/book-excel-parser.component.ts
@@ -17,7 +17,7 @@ import { capitalizeFirstLetter, informUserOfError } from 'src/app/shared/utils/u
 })
 export class BookExcelParserComponent {
   // Fields
-  protected columnsToDisplay: string [] = ['title', 'active', 'price', 'stock', 'genre', 'parameters.author', 'parameters.format'];
+  protected columnsToDisplay: string [] = ['title', 'isbn', 'active', 'price', 'stock', 'genre', 'parameters.author', 'parameters.format'];
 
   protected data: ExcelBook[] = [];
 
@@ -39,21 +39,35 @@ export class BookExcelParserComponent {
    * Initiates the process of importing and parsing Excel data into books.
    */
   protected importExcel(){
-    this.isLoading = true;
 
-    this.parseExcelBooksToBooks();
+    Swal.fire({
+      title: "Possible data loss",
+      titleText: "Books which share the same ISBN will be updated, be careful!",
+      icon: 'warning',
+      showCloseButton: true,
+      showCancelButton: true,
+      focusConfirm: false,
+      confirmButtonText: 'Okay',
+      cancelButtonText: 'Cancel',
+    }).then((result) => {
+      if(result.isConfirmed){
+        this.isLoading = true;
 
-    this.service.createAll(this.parsedData).subscribe({
-      next: (response) => {
-        this.isLoading = false;
-        Swal.fire('Books imported!','All books where imported successfully!','success');
-        console.log(response);
-      },
-      error: (error) => {
-        this.isLoading = false;
-        informUserOfError(error);
-      }}
-    );
+        this.parseExcelBooksToBooks();
+
+        this.service.createAll(this.parsedData).subscribe({
+          next: (response) => {
+            this.isLoading = false;
+            Swal.fire('Books created/updated!','All books where created/updated successfully!','success');
+            console.log(response);
+          },
+          error: (error) => {
+            this.isLoading = false;
+            informUserOfError(error);
+          }}
+        );
+      }
+    });
   }
 
   /**
@@ -114,7 +128,6 @@ export class BookExcelParserComponent {
    * @returns - The corresponding Book object.
    */
   private parseExcelBookToBook(excelBook: ExcelBook): Book {
-    // TODO Image?
     const book: Book = {
       id: 0,
       title: excelBook.Title,

diff --git a/src/app/components/book/view-book/view-book.component.html b/src/app/components/book/view-book/view-book.component.html
@@ -13,7 +13,7 @@ <h2 *ngIf="isLoading" class="text-center m-3">Details of {{book.title}}</h2>
 
   <div class="row">
     <div class="col text-center">
-      <img alt="Book Cover" *ngIf="book.image" [src]="book.image">
+      <img alt="No image available" *ngIf="book.image" [src]="book.image">
     </div>
     <div class="col">
       <div class="row text-white">
@@ -45,7 +45,8 @@ <h2 *ngIf="isLoading" class="text-center m-3">Details of {{book.title}}</h2>
       </div>
 
       <div class="row text-white">
-        <label>Active for sale</label> <mat-slide-toggle [(ngModel)]="book.active" disabled></mat-slide-toggle>
+        <label>Active for sale</label>
+        <mat-slide-toggle class="mx-2 px-2" [(ngModel)]="book.active" disabled></mat-slide-toggle>
       </div>
     </div>
   </div>

diff --git a/src/app/components/cart/cart.component.html b/src/app/components/cart/cart.component.html
@@ -10,7 +10,7 @@ <h1 class="text-center">Cart</h1>
         <ng-container matColumnDef="book">
           <th mat-header-cell *matHeaderCellDef>Book</th>
           <td mat-cell *matCellDef="let element">
-            <img src="{{element.image}}" alt="book" class="small-image my-5">
+            <img src="{{element.image}}" alt="Book Cover" class="small-image my-5">
           </td>
           <td mat-footer-cell *matFooterCellDef>
             <button color="primary" mat-raised-button routerLink="/catalog">Continue shopping</button>

diff --git a/src/app/components/catalog/books-header/books-header.component.html b/src/app/components/catalog/books-header/books-header.component.html
@@ -21,17 +21,6 @@
 
     <!-- SHOW ITEMS MENU -->
     <div class="d-flex align-items-center">
-      <!-- <div>
-        <button mat-button [matMenuTriggerFor]="menu">
-          Show {{ itemsShowCount }}
-          <mat-icon>keyboard_arrow_down</mat-icon>
-        </button>
-        <mat-menu #menu="matMenu">
-          <button (click)="onItemsUpdated(12)" mat-menu-item>12</button>
-          <button (click)="onItemsUpdated(24)" mat-menu-item>24</button>
-          <button (click)="onItemsUpdated(36)" mat-menu-item>36</button>
-        </mat-menu>
-      </div> -->
       <button class="btn btn-default icon" (click)="onColumnsUpdated(1)">
         <mat-icon color="accent">view_list</mat-icon>
       </button>

diff --git a/src/app/components/user/forms/user/add-edit-user-form.component.html b/src/app/components/user/forms/user/add-edit-user-form.component.html
@@ -39,7 +39,8 @@
       <div class="col-sm">
         <mat-form-field class="form-group w-100" appearance="fill">
           <mat-label>Password</mat-label>
-          <input formControlName="password" matInput placeholder="Enter your password" required type="password">
+          <input formControlName="password" matInput minlength="6" placeholder="Enter your password" required type="password">
+          <mat-hint class="text-white">Min 6 characters</mat-hint>
           <mat-error *ngIf="f['password'].invalid">{{getErrorMessage('password')}}</mat-error>
         </mat-form-field>
       </div>
@@ -50,7 +51,7 @@
         <mat-form-field class="form-group w-100">
           <mat-label>Your date of birth </mat-label>
           <input formControlName="dateOfBirth" matInput [matDatepicker]="picker" required>
-          <mat-hint>DD/MM/YYYY</mat-hint>
+          <mat-hint class="text-white">DD/MM/YYYY</mat-hint>
           <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
           <mat-datepicker #picker></mat-datepicker>
           <mat-error *ngIf="f['dateOfBirth'].invalid">{{getErrorMessage('dateOfBirth')}}</mat-error>
@@ -60,10 +61,9 @@
       <div class="col-sm">
         <mat-form-field class="form-group w-100">
           <mat-label>Phone number</mat-label>
-          <!-- TODO Might need to establish another mask -->
           <input formControlName="phone" mask="(00) 000 000 000" matInput required type="text">
           <mat-icon matSuffix>phone</mat-icon>
-          <mat-hint>Include area code</mat-hint>
+          <mat-hint class="text-white">Include area code</mat-hint>
           <mat-error *ngIf="f['phone'].invalid">{{getErrorMessage('phone')}}</mat-error>
         </mat-form-field>
       </div>