demo / app-template.component.html

<div class="card"> <p-toast></p-toast> <p-confirmDialog></p-confirmDialog> <div class="flex justify-content-between align-items-center mb-3 flex-wrap"> <h2 class="text-xxl col-12 sm:col" id="page-heading" data-cy="AppTemplateHeading"> <span>App Templates</span> </h2> <button pButton pRipple label="Create a new app template" icon="pi pi-plus" class="col-6 xl:col-1 p-button sm:mr-2 xl:ml-auto w-auto" (click)="showDialog()" [class]="layoutService.config.colorScheme === 'light' ? '' : 'p-button-text'"></button> </div> <p-table [value]="templates" [rows]="10" [paginator]="true" [globalFilterFields]="['name','description','category']" [tableStyle]="{'min-width': '75rem'}" [loading]="isLoading" [sortField]="predicate" [sortOrder]="ascending ? 1 : -1" (onSort)="onSort($event)"> <ng-template pTemplate="header"> <tr> <th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th> <th pSortableColumn="description">Description <p-sortIcon field="description"></p-sortIcon></th> <th pSortableColumn="category" class="whitespace-nowrap">Category <p-sortIcon field="category"></p-sortIcon></th> <th>Actions</th> </tr> </ng-template> <ng-template pTemplate="body" let-template> <tr> <td>{{ template.name }}</td> <td>{{ template.description }}</td> <td>{{ template.category }}</td> <td class="flex"> <button pButton pRipple icon="pi pi-eye" class="p-button-rounded p-button-text" (click)="showDialog(template)" pTooltip="View/Edit"> </button> <button pButton pRipple icon="pi pi-trash" class="p-button-rounded p-button-text p-button-danger" (click)="confirmDelete(template)" pTooltip="Delete"> </button> </td> </tr> </ng-template> <ng-template pTemplate="emptymessage"> <tr> <td colspan="6">No app templates found.</td> </tr> </ng-template> </p-table> <!-- View/Edit Dialog --> <p-dialog [(visible)]="displayDialog" [style]="{width: '75%'}" [header]="isNewTemplate ? 'Create App Template' : 'View App Template'" [modal]="true"> <form [formGroup]="templateForm" (ngSubmit)="save()"> <div class="grid p-fluid"> <div class="col-12 mb-3"> <span class="p-float-label"> <input pInputText id="name" formControlName="name"/> <label for="name">Name</label> </span> <small class="p-error" *ngIf="templateForm.get('name')?.hasError('required') && templateForm.get('name')?.touched"> Name is required </small> </div> <div class="col-12 mb-3"> <span class="p-float-label"> <textarea rows="3" pInputTextarea id="description" formControlName="description"></textarea> <label for="description">Description</label> </span> <small class="p-error" *ngIf="templateForm.get('description')?.hasError('required') && templateForm.get('description')?.touched"> Description is required </small> </div> <div class="col-12 mb-3"> <span class="p-float-label"> <textarea rows="20" pInputTextarea id="longDescription" formControlName="longDescription"></textarea> <label for="description">Long Description</label> </span> <small class="p-error" *ngIf="templateForm.get('longDescription')?.hasError('required') && templateForm.get('longDescription')?.touched"> Long Description is required </small> </div> <div class="col-12 mb-3"> <span class="p-float-label"> <input pInputText id="category" formControlName="category"/> <label for="category">Category</label> </span> <small class="p-error" *ngIf="templateForm.get('cid')?.hasError('required') && templateForm.get('cid')?.touched"> Category is required </small> </div> <div class="col-12 mb-3"> <span class="p-float-label"> <input pInputText id="icon" formControlName="icon"/> <label for="icon">Icon URL</label> </span> </div> <div class="col-12 mb-3"> <span class="p-float-label"> <textarea pInputTextarea id="template" [rows]="20" formControlName="template"> </textarea> <label for="template">Template</label> </span> </div> <div class="col-12 mb-3"> <span class="p-float-label"> <p-inputNumber id="zorder" mode="decimal" inputId="zorder" [step]="1" [min]="0" [max]="1000" formControlName="zorder" [showButtons]="true"></p-inputNumber> <label for="zorder">Order</label> </span> </div> </div> <div class="flex justify-content-end mt-4"> <button pButton type="button" label="Close" class="p-button-secondary mr-2" (click)="hideDialog()"></button> <button pButton type="submit" label="Save" [disabled]="!templateForm.valid"></button> </div> </form> </p-dialog> </div>