Anonymous

Modules

<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>--<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>-merge-that-event-on-module-each-module-contain-multiple-associated-event-different-idea-using-which-i-can-show-multiple-event-of-mdouel-within-one-page-module-code-as-below-<h1-class="text-gray-800-text-2xl-font-bold-px-4-py-2">Modules</h1>-<div-class="grid-grid-cols-1-sm:grid-cols-2-md:grid-cols-3-gap-12-px-8-min-h-screen">-<a-*ngIf="role-!==-'ROLE_USER'"-(click)="addModule()"-class="hover:scale-105-transform-transition">-<div-class="card-!h-48-relative-flex-flex-col-my-6-bg-white-shadow-lg-border-border-gray-200-rounded-lg-p-6-hover:shadow-xl-h-full">-<div-class="flex-items-center-justify-center-h-full">-<div-class="flex-flex-col-items-center-justify-center-text-gray-600">-<svg-xmlns="http://www.w3.org/2000/svg"-fill="none"-viewBox="0-0-24-24"-stroke="currentColor"-class="w-12-h-12-mb-4">-<path-stroke-linecap="round"-stroke-linejoin="round"-stroke-width="2"-d="M12-4v16m8-8H4"/>-</svg>-<h6-class="mb-2-text-gray-800-text-xl-font-semibold">Add-Module</h6>-</div>-</div>-</div>-</a>-<p-*ngIf="listOfModule.length==0"-class="text-center-mt-8">Modules-Not-Available</p>-<div-*ngFor="let-module-of-listOfModule"-class="card-!h-48-relative-flex-flex-col-my-6-bg-white-shadow-lg-border-border-gray-200-rounded-lg-p-6-hover:shadow-xl-h-full-cursor-pointer"-(click)="fetchEvent(module.id)">-<h6-class="mb-2-text-gray-800-text-xl-font-semibold">{{-module.name-}}</h6>-<p-class="text-gray-600-leading-normal-font-light-flex-grow">{{-module.name-}}</p>-<div-class="flex-flex-row-justify-between-mt-auto-space-x-4">-<button-class="tooltip"-*ngIf="role-!==-'ROLE_USER'"-(click)="updateById($event,-module.id)">-<span-class="tooltiptext">Update</span>-<i-class="fas-fa-pencil-alt-rounded-full-bg-blue-200-py-2-px-4-border-border-transparent-text-xs-text-blue-700-transition-all-shadow-sm-text-center-font-semibold-hover:bg-blue-300-hover:shadow-lg-flex-items-center-justify-center"></i>-</button>-<button-class="tooltip"-*ngIf="role-!==-'ROLE_USER'"-(click)="showDeleteConfirmation($event,-module.id)">-<span-class="tooltiptext">Delete</span>-<i-class="fas-fa-trash-rounded-full-bg-red-200-py-2-px-4-border-border-transparent-text-xs-text-red-700-transition-all-shadow-sm-text-center-font-semibold-hover:bg-red-300-hover:shadow-lg-flex-items-center-justify-center"></i>-</button>-</div>-</div>-</div>--<div-*ngIf="deleteModuleId-!==-null"-class="confirmation-dialog">-<div-class="dialog-content">-<p-class="dialog-text">Are-you-sure-you-want-to-delete-this-module?</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>

Prompt

About

Create dynamic module and event management interfaces using Angular and Tailwind CSS. Easily add, update, and delete modules and events within a single page for efficient administration.

Modules

About

Tags

Share