Dev (#8)

* working on profile component

* working on profile component

* improved ui and working on footer

* working on responsive footer

* working on spinner for search func

* impl search spinner

* working to reduce bundle size of storefront from 290.61 kB to below 200kb

src/app/admin-front/admin-guard.ts

@@ -1,7 +1,13 @@
 import {inject} from "@angular/core";
-import {DashboardService} from "./dashboard/dashboard.service";
+import {DashboardService} from "../service/dashboard.service";
 
 export const AdminGuard = () => {
-  const dashboardService: DashboardService = inject(DashboardService);
-  return dashboardService.getUser();
+  const service = inject(DashboardService);
+  return service.getUser('api/v1/worker/auth', '/admin', true);
+}
+
+export const ADMIN_IS_LOGGED_IN = () => {
+  const service = inject(DashboardService);
+  return service
+    .isLoggedIn('api/v1/worker/auth', '/admin/dashboard', '/admin');
 }

src/app/admin-front/auth/admin-authentication.component.ts

@@ -9,7 +9,7 @@ import {AuthService} from "../../service/auth.service";
 @Component({
   selector: 'app-admin-authentication',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, DirectiveModule, MatDialogModule],
+  imports: [CommonModule, ReactiveFormsModule, DirectiveModule], // MatDialogModule
   template: `
     <div class="h-full flex justify-center items-center bg-[var(--all-background)]">
       <form [formGroup]="loginForm" class="w-fit py-3 px-4 appearance-none shadow-md outline-none border-none block rounded-lg bg-[var(--white)]">
@@ -40,7 +40,7 @@ import {AuthService} from "../../service/auth.service";
                    class="w-full bg-gray-200 appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                    placeholder="password"
                    formControlName="password">
-            <button type="button" class="outline-none border-none bg-transparent" (click)="viewPassword = !viewPassword">
+            <button (click)="viewPassword = !viewPassword" type="button" class="outline-none border-none bg-transparent">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
               </svg>
@@ -66,7 +66,7 @@ import {AuthService} from "../../service/auth.service";
 export class AdminAuthenticationComponent {
 
   private readonly authService = inject(AuthService);
-  private readonly fb: FormBuilder = inject(FormBuilder);
+  private readonly fb = inject(FormBuilder);
 
   viewPassword = false;
 

src/app/admin-front/dashboard/admin-dashboard.component.ts

@@ -1,6 +1,6 @@
 import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {catchError, combineLatest, map, Observable, of, startWith, switchMap, tap} from "rxjs";
-import {DashboardService} from "./dashboard.service";
+import {DashboardService} from "../../service/dashboard.service";
 import {CategoryService} from "./category/category.service";
 import {CategoryResponse, CollectionResponse, ProductResponse} from "../shared-util";
 import {AuthResponse, Page, SarreCurrency} from "../../global-utils";
@@ -162,10 +162,10 @@ export class AdminDashboardComponent {
   dashBoardLinks: Display[] = DASHBOARDLINKS;
 
   // Toggle behaviour when a link are clicked
-  leftColumn: boolean = false;
+  leftColumn = false;
 
   // Principal (email)
-  private principal$: Observable<AuthResponse> = this.dashboardService._principal$.pipe();
+  private principal$: Observable<AuthResponse> = this.dashboardService.principal$.pipe();
 
   // Products
   private products$: Observable<Page<ProductResponse>> = this.productService.currency$

src/app/admin-front/dashboard/authmenu/auth-menu.component.ts

@@ -1,10 +1,9 @@
 import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {MatMenuModule} from "@angular/material/menu";
-import {Observable, tap} from "rxjs";
-import {Router} from "@angular/router";
-import {AuthMenuService} from "./auth-menu.service";
+import {Observable} from "rxjs";
 import {DirectiveModule} from "../../../directive/directive.module";
+import {AuthService} from "../../../service/auth.service";
 
 @Component({
   selector: 'app-auth-menu',
@@ -26,14 +25,11 @@ import {DirectiveModule} from "../../../directive/directive.module";
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AuthMenuComponent {
-  private authMenuService: AuthMenuService = inject(AuthMenuService);
-  private router: Router = inject(Router);
 
-  @Input() principal: string = '';
+  @Input() principal = '';
+
+  private readonly authMenuService = inject(AuthService);
+
+  logout = (): Observable<number> => this.authMenuService.logout('/admin');
 
-  /** Method logs out a user and then redirects back to auth component if status is 200 */
-  logout(): Observable<number> {
-    return this.authMenuService.logoutApi()
-      .pipe(tap(() => this.router.navigate(['/admin'])));
-  }
 }

src/app/admin-front/dashboard/create-variant/create-variant.component.ts

@@ -9,7 +9,7 @@ import {ProductDetailResponse, SizeInventory} from "../../shared-util";
 import {DirectiveModule} from "../../../directive/directive.module";
 import {catchError, Observable, of, switchMap, tap} from "rxjs";
 import {CreateVariantService} from "./create-variant.service";
-import {ToastService} from "../../../service/toast/toast.service";
+import {ToastService} from "../../../shared-comp/toast/toast.service";
 import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from "@angular/material/dialog";
 import {CreateVariantData} from "./createVariantData";
 import {HttpErrorResponse} from "@angular/common/http";

src/app/admin-front/dashboard/customer/customer.service.ts

@@ -3,7 +3,7 @@ import {environment} from "../../../../environments/environment";
 import {HttpClient} from "@angular/common/http";
 import {catchError, Observable, of} from "rxjs";
 import {Page, SarreUser} from "../../../global-utils";
-import {ToastService} from "../../../service/toast/toast.service";
+import {ToastService} from "../../../shared-comp/toast/toast.service";
 
 @Injectable({
   providedIn: 'root'

src/app/admin-front/dashboard/delete/delete.component.ts

@@ -5,7 +5,7 @@ import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from "@angular/material/
 import {DeleteData} from "./delete-data";
 import {DirectiveModule} from "../../../directive/directive.module";
 import {catchError, map, Observable, of} from "rxjs";
-import {ToastService} from "../../../service/toast/toast.service";
+import {ToastService} from "../../../shared-comp/toast/toast.service";
 import {HttpErrorResponse} from "@angular/common/http";
 
 @Component({

src/app/admin-front/dashboard/dynamictable/dynamic-table.component.ts

@@ -1,13 +1,13 @@
-import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from '@angular/core';
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output, signal} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {MatPaginatorModule, PageEvent} from "@angular/material/paginator";
 import {PageChange, TableContent} from "../../shared-util";
 import {Page} from "../../../global-utils";
+import {PaginatorComponent} from "../../../shared-comp/paginator/paginator.component";
 
 @Component({
   selector: 'app-dynamic-table',
   standalone: true,
-  imports: [CommonModule, MatPaginatorModule],
+  imports: [CommonModule, PaginatorComponent],
   template: `
     <!-- Product Template -->
     <ng-container *ngIf="paginationTable">
@@ -30,11 +30,12 @@ import {Page} from "../../../global-utils";
             <td *ngFor="let head of tHead">
               <ng-container [ngSwitch]="head">
 
-                <ng-container *ngSwitchCase="'product_id'">{{ i + 1 }}</ng-container>
+                <ng-container *ngSwitchCase="'product_id'">
+                  {{ (i + 1) + (currentPage() * 10) }}
+                </ng-container>
 
                 <!-- Image -->
-                <div class="rounded overflow-hidden min-w-[2.75rem] min-h-[2.75rem] max-w-[7rem] max-h-[4rem]"
-                     *ngSwitchCase="'image'">
+                <div *ngSwitchCase="'image'" class="rounded overflow-hidden min-w-[2.75rem] min-h-[2.75rem] max-w-[7rem] max-h-[4rem]">
                   <img [src]="data[head]" alt="image" class="w-full h-full object-cover object-center">
                 </div>
 
@@ -76,15 +77,16 @@ import {Page} from "../../../global-utils";
           </tr>
           </tbody>
         </table>
-        <mat-paginator
-          [length]="pageData.totalElements"
-          [pageSize]="pageData.size"
-          [pageIndex]="pageData.number"
-          (page)="changePage($event)"
-          [pageSizeOptions]="[5, 10, 15, 20]"
-          showFirstLastButtons
-          aria-label="Select page">
-        </mat-paginator>
+
+        <div class="w-full mt-6 p-1.5">
+          <app-paginator
+            [currentPage]="pageData.number"
+            [totalPages]="pageData.size"
+            [totalElements]="pageData.totalElements"
+            (goTo)="onPageNumber($event)"
+          ></app-paginator>
+        </div>
+
       </div>
     </ng-container>
 
@@ -215,6 +217,9 @@ import {Page} from "../../../global-utils";
 })
 export class DynamicTableComponent<T> {
 
+  // TODO validate why current pages isn't changing on html
+  protected currentPage = signal<number>(0);
+
   @Input() paginationTable: boolean = false; // validates if pagination table should be rendered
   @Input() tHead: (keyof T)[] = [];
   @Input() detail: boolean = false; // verifies if details button should be displayed
@@ -227,13 +232,6 @@ export class DynamicTableComponent<T> {
     return d === 0 ? '' : new Date(d).toDateString();
   }
 
-  /**
-   * Updates datasource to be rendered on table when next button is clicked
-   * */
-  changePage(event: PageEvent): void {
-    this.pageEmitter.emit({ page: event.pageIndex, size: event.pageSize });
-  }
-
   /**
    * Informs Parent component. Note the table clicked on is the table that does not require pagination
    *
@@ -242,12 +240,22 @@ export class DynamicTableComponent<T> {
    * @return void
    * */
   onClick(data: T, key: string): void {
-    this.eventEmitter.emit({data: data, key: key});
+    this.eventEmitter.emit({ data: data, key: key });
   }
 
-  /** Informs Product Component on the row clicked. Requires pagination */
+  /**
+   * Informs Product Component on the row clicked. Requires pagination
+   * */
   onclickProduct(data: T, key: string): void {
-    this.eventEmitter.emit({data: data, key: key});
+    this.eventEmitter.emit({ data: data, key: key });
+  }
+
+  /**
+   * Emits page number clicked
+   * */
+  onPageNumber(pageNumber: number): void {
+    this.currentPage.set(pageNumber);
+    this.pageEmitter.emit({ page: pageNumber, size: 20 });
   }
 
 }

src/app/admin-front/dashboard/navigation/navigation.component.ts

@@ -1,9 +1,7 @@
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {AuthMenuComponent} from "../authmenu/auth-menu.component";
-import {DashboardService} from "../dashboard.service";
-import {Observable} from "rxjs";
-import {AuthResponse} from "../../../global-utils";
+import {DashboardService} from "../../../service/dashboard.service";
 
 @Component({
   selector: 'app-navigation',
@@ -40,10 +38,9 @@ import {AuthResponse} from "../../../global-utils";
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class NavigationComponent {
-  principal$: Observable<AuthResponse>;
 
-  constructor(private dashboardService: DashboardService) {
-    this.principal$ = this.dashboardService._principal$.pipe();
-  }
+  private readonly dashboardService = inject(DashboardService);
+
+  principal$ = this.dashboardService.principal$;
 
 }

src/app/admin-front/dashboard/newcategory/new-category.component.ts

@@ -9,7 +9,7 @@ import {MatRadioModule} from "@angular/material/radio";
 import {DirectiveModule} from "../../../directive/directive.module";
 import {CategoryService} from "../category/category.service";
 import {HttpErrorResponse} from "@angular/common/http";
-import {ToastService} from "../../../service/toast/toast.service";
+import {ToastService} from "../../../shared-comp/toast/toast.service";
 import {Router} from "@angular/router";
 
 @Component({

src/app/admin-front/dashboard/newcollection/new-collection.component.ts

@@ -9,7 +9,7 @@ import {CollectionRequest} from "../../shared-util";
 import {DirectiveModule} from "../../../directive/directive.module";
 import {CollectionService} from "../collection/collection.service";
 import {HttpErrorResponse} from "@angular/common/http";
-import {ToastService} from "../../../service/toast/toast.service";
+import {ToastService} from "../../../shared-comp/toast/toast.service";
 import {Router} from "@angular/router";
 
 @Component({

src/app/admin-front/dashboard/newproduct/new-product.component.ts

@@ -14,7 +14,7 @@ import {MatRadioModule} from "@angular/material/radio";
 import {DirectiveModule} from "../../../directive/directive.module";
 import {ProductService} from "../product/product.service";
 import {HttpErrorResponse} from "@angular/common/http";
-import {ToastService} from "../../../service/toast/toast.service";
+import {ToastService} from "../../../shared-comp/toast/toast.service";
 import {SizeInventoryService} from "../sizeinventory/size-inventory.service";
 import {Router} from "@angular/router";
 import {SarreCurrency} from "../../../global-utils";
@@ -65,7 +65,7 @@ export class NewProductComponent {
     name: new FormControl('', [Validators.required, Validators.max(50)]),
     ngn: new FormControl('', Validators.required),
     usd: new FormControl('', Validators.required),
-    desc: new FormControl('', [Validators.required, Validators.max(400)]),
+    desc: new FormControl('', [Validators.required, Validators.max(700)]),
     visible: new FormControl(false, Validators.required),
     colour: new FormControl('', Validators.required),
   });

src/app/admin-front/dashboard/product/product.component.ts

@@ -94,8 +94,6 @@ export class ProductComponent {
    * Makes call to server on change of page or page size
    * */
   pageChange(page: PageChange): void {
-    console.log('Page ', page.page)
-    console.log('Size ', page.size)
     this.data$ = this.productService.currency$
       .pipe(
         switchMap((currency) => this.productService

src/app/admin-front/dashboard/updatecategory/update-category.component.ts

@@ -13,7 +13,7 @@ import {Page} from "../../../global-utils";
 import {CategoryService} from "../category/category.service";
 import {ActivatedRoute, Router} from "@angular/router";
 import {ProductService} from "../product/product.service";
-import {ToastService} from "../../../service/toast/toast.service";
+import {ToastService} from "../../../shared-comp/toast/toast.service";
 import {MatDialogModule} from "@angular/material/dialog";
 
 @Component({

src/app/admin-front/dashboard/updatecollection/update-collection.component.ts

@@ -14,7 +14,7 @@ import {MatRadioModule} from "@angular/material/radio";
 import {DirectiveModule} from "../../../directive/directive.module";
 import {ProductService} from "../product/product.service";
 import {MatDialogModule} from "@angular/material/dialog";
-import {ToastService} from "../../../service/toast/toast.service";
+import {ToastService} from "../../../shared-comp/toast/toast.service";
 
 @Component({
   selector: 'app-update-collection',