Event Management Dashboard
<div class="min h screen"> <table class="table custom "> <thead> <tr> <th>Events</th> <th class="w 1/12"> <button *ngIf="role !== 'ROLE_USER'" class="mx auto border border green 400 hover:bg gray 200 focus:shadow outline focus:outline none hover:text green 500 py 1 px 4 rounded" type="button" (click)="addEvent()" > Add </button> </th> </tr> <tr class="!bg gray 600 text sm"> <th class="!px 4 !py 2">Event Name</th> <th *ngIf="role !== 'ROLE_USER'" class="!px 4 !py 2 w 1/12">Action</th> <th *ngIf="role == 'ROLE_USER'" class="!px 4 !py 2 w 1/12"></th> </tr> </thead> <tbody> <tr *ngFor="let event of listOfEvent"> <td >{{ event.name }}</td> <td > <button *ngIf="role !== 'ROLE_USER'" class="tooltip mx auto border border green 400 hover:bg gray 200 focus:shadow outline focus:outline none hover:text green 500 py 1 px 3 m 1 rounded" type="button" (click)="updateEventAdmin(event.id)"> <span class="tooltiptext">Edit</span> <i class="fas fa pencil alt"></i> </button> <button *ngIf="role == 'ROLE_USER'" class="tooltip mx auto border border green 400 hover:bg gray 200 focus:shadow outline focus:outline none hover:text green 500 py 1 px 3 m 1 rounded" type="button" (click)="updateEvent(event.id)"> <span class="tooltiptext">Edit</span> <i class="fas fa pencil alt"></i> </button> <button *ngIf="role !== 'ROLE_USER'" class="tooltip mx auto border border red 400 hover:bg gray 200 focus:shadow outline focus:outline none hover:text red 500 py 1 px 3 m 1 rounded" type="button" (click)="showDeleteConfirmation($event, event.id)"> <span class="tooltiptext">Delete</span> <i class="fas fa trash"></i> </button> </td> </tr> </tbody> </table> <p *ngIf="listOfEvent.length==0" class="text center mt 8">Events Not Available</p> <! Stylish Confirmation Dialog > <div *ngIf="deleteEventId !== null" class="confirmation dialog"> <div class="dialog content"> <p class="dialog text">Are you sure you want to delete this?</p> <div class="dialog actions"> <button (click)="confirmDelete()" class="dialog btn dialog btn confirm">Yes</button> <button (click)="cancelDelete()" class="dialog btn dialog btn cancel">No</button> </div> </div> </div> </div>
