feat: enhance active route selection and table logic

Author: jmdotdev

eventz-ui/src/components/admin/side-nav/side-nav.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ISideNav } from '../../../interfaces/interface';
 import { sideNavLinks } from '../data/side-nav-links';
 import { FaIconComponent } from "@fortawesome/angular-fontawesome";
@@ -12,10 +12,21 @@ import { Router } from '@angular/router';
   templateUrl: './side-nav.component.html',
   styleUrl: './side-nav.component.scss'
 })
-export class SideNavComponent {
+export class SideNavComponent implements OnInit {
   links: ISideNav[] = sideNavLinks;
+  activeLink: ISideNav | undefined;
 
   constructor ( private router:Router) {}
+  ngOnInit(): void {
+    console.log(this.router.url.split('/')[2]);
+    this.activeLink = this.links.find(link => link.name.toLowerCase() === (this.router.url.split('/')[2] || 'dashboard'));
+    if (this.activeLink) {
+      this.links = this.links.map((l) => ({
+        ...l,
+        isActive: l.name === this.activeLink?.name ? true : false
+      }));
+    }
+  }
 
   handleNavigation (link: ISideNav) {
     this.links = this.links.map((l) => ({

eventz-ui/src/pages/admin/ticket-list-table/ticket-list-table.component.html

@@ -15,7 +15,7 @@ <h2 class="font-semibold text-lg text-eventTableColor">Tickets List</h2>
     </div>
     <div
             *ngIf="showHeaderDropDown"
-            class="absolute right-4 mt-28 w-28 bg-white border rounded shadow z-10 cursor-pointer"
+            class="absolute right-4 mt-28 w-auto bg-white border rounded shadow z-10 cursor-pointer"
           >
             <button class="block w-full text-left px-4 py-2 hover:bg-gray-100">
               Add Ticket
@@ -37,8 +37,8 @@ <h2 class="font-semibold text-lg text-eventTableColor">Tickets List</h2>
     </thead>
 
     <tbody>
+      @for (ticket of paginatedTickets; let i = $index; track $index) {
       <tr
-        *ngFor="let ticket of paginatedTickets; let i = index"
         class="hover:bg-gray-50 hover:cursor-pointer text-eventTableColor"
       >
         <td class="px-4 py-3 font-medium">{{ ticket.ticketNo }}</td>
@@ -72,11 +72,18 @@ <h2 class="font-semibold text-lg text-eventTableColor">Tickets List</h2>
             class="absolute right-4 mt-2 w-32 bg-white border rounded shadow z-10"
           >
             <button class="block w-full text-left px-4 py-2 text-red-600 hover:bg-gray-100">
-              Deactivate
+              Revoke
             </button>
           </div>
         </td>
       </tr>
+      } @empty {
+        <tr>
+            <td colspan="6" class="px-4 py-3 text-center text-eventTableColor">
+            No tickets found.
+            </td>
+        </tr>
+      }
     </tbody>
   </table>
 

eventz-ui/src/pages/admin/ticket-list-table/ticket-list-table.component.ts

@@ -35,7 +35,7 @@ export class TicketListTableComponent {
     return Math.ceil(this.tickets.length / this.pageSize);
   }
 
-  get paginatedTickets(): Ticket[] {
+  get paginatedTickets(): Ticket[] | [] {
     const start = (this.currentPage - 1) * this.pageSize;
     return this.tickets.slice(start, start + this.pageSize);
   }

eventz-ui/src/pages/admin/user-list-table/user-list-table.component.html

@@ -70,6 +70,9 @@ <h2 class="font-semibold text-lg text-eventTableColor">Users List</h2>
             *ngIf="openMenuIndex === i"
             class="absolute right-4 mt-2 w-32 bg-white border rounded shadow z-10"
           >
+            <button class="block w-full text-left px-4 py-2  hover:bg-gray-100">
+              View
+            </button>
             <button class="block w-full text-left px-4 py-2 text-red-600 hover:bg-gray-100">
               Deactivate
             </button>