demo revisó este gist 5 months ago. Ir a la revisión
1 file changed, 1 insertion, 1 deletion
app-template.component.html
| @@ -10,7 +10,7 @@ | |||
| 10 | 10 | </div> | |
| 11 | 11 | <p-table [value]="templates" [rows]="10" [paginator]="true" | |
| 12 | 12 | [globalFilterFields]="['name','description','category']" | |
| 13 | - | [tableStyle]="{'min-width': '75rem'}" | |
| 13 | + | [tableStyle]="{'min-width': '75em'}" | |
| 14 | 14 | [loading]="isLoading" | |
| 15 | 15 | [sortField]="predicate" | |
| 16 | 16 | [sortOrder]="ascending ? 1 : -1" | |
demo revisó este gist 5 months ago. Ir a la revisión
1 file changed, 143 insertions
app-template.component.html(archivo creado)
| @@ -0,0 +1,143 @@ | |||
| 1 | + | <div class="card"> | |
| 2 | + | <p-toast></p-toast> | |
| 3 | + | <p-confirmDialog></p-confirmDialog> | |
| 4 | + | <div class="flex justify-content-between align-items-center mb-3 flex-wrap"> | |
| 5 | + | <h2 class="text-xxl col-12 sm:col" id="page-heading" data-cy="AppTemplateHeading"> | |
| 6 | + | <span>App Templates</span> | |
| 7 | + | </h2> | |
| 8 | + | <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" | |
| 9 | + | (click)="showDialog()" [class]="layoutService.config.colorScheme === 'light' ? '' : 'p-button-text'"></button> | |
| 10 | + | </div> | |
| 11 | + | <p-table [value]="templates" [rows]="10" [paginator]="true" | |
| 12 | + | [globalFilterFields]="['name','description','category']" | |
| 13 | + | [tableStyle]="{'min-width': '75rem'}" | |
| 14 | + | [loading]="isLoading" | |
| 15 | + | [sortField]="predicate" | |
| 16 | + | [sortOrder]="ascending ? 1 : -1" | |
| 17 | + | (onSort)="onSort($event)"> | |
| 18 | + | ||
| 19 | + | <ng-template pTemplate="header"> | |
| 20 | + | <tr> | |
| 21 | + | <th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th> | |
| 22 | + | <th pSortableColumn="description">Description <p-sortIcon field="description"></p-sortIcon></th> | |
| 23 | + | <th pSortableColumn="category" class="whitespace-nowrap">Category <p-sortIcon field="category"></p-sortIcon></th> | |
| 24 | + | <th>Actions</th> | |
| 25 | + | </tr> | |
| 26 | + | </ng-template> | |
| 27 | + | ||
| 28 | + | ||
| 29 | + | <ng-template pTemplate="body" let-template> | |
| 30 | + | <tr> | |
| 31 | + | <td>{{ template.name }}</td> | |
| 32 | + | <td>{{ template.description }}</td> | |
| 33 | + | <td>{{ template.category }}</td> | |
| 34 | + | <td class="flex"> | |
| 35 | + | <button pButton pRipple | |
| 36 | + | icon="pi pi-eye" | |
| 37 | + | class="p-button-rounded p-button-text" | |
| 38 | + | (click)="showDialog(template)" | |
| 39 | + | pTooltip="View/Edit"> | |
| 40 | + | </button> | |
| 41 | + | ||
| 42 | + | <button pButton pRipple | |
| 43 | + | icon="pi pi-trash" | |
| 44 | + | class="p-button-rounded p-button-text p-button-danger" | |
| 45 | + | (click)="confirmDelete(template)" | |
| 46 | + | pTooltip="Delete"> | |
| 47 | + | </button> | |
| 48 | + | </td> | |
| 49 | + | </tr> | |
| 50 | + | </ng-template> | |
| 51 | + | ||
| 52 | + | <ng-template pTemplate="emptymessage"> | |
| 53 | + | <tr> | |
| 54 | + | <td colspan="6">No app templates found.</td> | |
| 55 | + | </tr> | |
| 56 | + | </ng-template> | |
| 57 | + | </p-table> | |
| 58 | + | ||
| 59 | + | <!-- View/Edit Dialog --> | |
| 60 | + | <p-dialog [(visible)]="displayDialog" [style]="{width: '75%'}" | |
| 61 | + | [header]="isNewTemplate ? 'Create App Template' : 'View App Template'" | |
| 62 | + | [modal]="true"> | |
| 63 | + | <form [formGroup]="templateForm" (ngSubmit)="save()"> | |
| 64 | + | <div class="grid p-fluid"> | |
| 65 | + | <div class="col-12 mb-3"> | |
| 66 | + | <span class="p-float-label"> | |
| 67 | + | <input pInputText id="name" formControlName="name"/> | |
| 68 | + | <label for="name">Name</label> | |
| 69 | + | </span> | |
| 70 | + | <small class="p-error" *ngIf="templateForm.get('name')?.hasError('required') && | |
| 71 | + | templateForm.get('name')?.touched"> | |
| 72 | + | Name is required | |
| 73 | + | </small> | |
| 74 | + | </div> | |
| 75 | + | ||
| 76 | + | <div class="col-12 mb-3"> | |
| 77 | + | <span class="p-float-label"> | |
| 78 | + | <textarea rows="3" pInputTextarea id="description" formControlName="description"></textarea> | |
| 79 | + | <label for="description">Description</label> | |
| 80 | + | </span> | |
| 81 | + | <small class="p-error" *ngIf="templateForm.get('description')?.hasError('required') && | |
| 82 | + | templateForm.get('description')?.touched"> | |
| 83 | + | Description is required | |
| 84 | + | </small> | |
| 85 | + | </div> | |
| 86 | + | ||
| 87 | + | <div class="col-12 mb-3"> | |
| 88 | + | <span class="p-float-label"> | |
| 89 | + | <textarea rows="20" pInputTextarea id="longDescription" formControlName="longDescription"></textarea> | |
| 90 | + | <label for="description">Long Description</label> | |
| 91 | + | </span> | |
| 92 | + | <small class="p-error" *ngIf="templateForm.get('longDescription')?.hasError('required') && | |
| 93 | + | templateForm.get('longDescription')?.touched"> | |
| 94 | + | Long Description is required | |
| 95 | + | </small> | |
| 96 | + | </div> | |
| 97 | + | ||
| 98 | + | <div class="col-12 mb-3"> | |
| 99 | + | <span class="p-float-label"> | |
| 100 | + | <input pInputText id="category" formControlName="category"/> | |
| 101 | + | <label for="category">Category</label> | |
| 102 | + | </span> | |
| 103 | + | <small class="p-error" *ngIf="templateForm.get('cid')?.hasError('required') && | |
| 104 | + | templateForm.get('cid')?.touched"> | |
| 105 | + | Category is required | |
| 106 | + | </small> | |
| 107 | + | </div> | |
| 108 | + | ||
| 109 | + | <div class="col-12 mb-3"> | |
| 110 | + | <span class="p-float-label"> | |
| 111 | + | <input pInputText id="icon" formControlName="icon"/> | |
| 112 | + | <label for="icon">Icon URL</label> | |
| 113 | + | </span> | |
| 114 | + | </div> | |
| 115 | + | ||
| 116 | + | <div class="col-12 mb-3"> | |
| 117 | + | <span class="p-float-label"> | |
| 118 | + | <textarea pInputTextarea id="template" [rows]="20" formControlName="template"> | |
| 119 | + | </textarea> | |
| 120 | + | <label for="template">Template</label> | |
| 121 | + | </span> | |
| 122 | + | </div> | |
| 123 | + | ||
| 124 | + | <div class="col-12 mb-3"> | |
| 125 | + | <span class="p-float-label"> | |
| 126 | + | <p-inputNumber id="zorder" mode="decimal" inputId="zorder" | |
| 127 | + | [step]="1" [min]="0" [max]="1000" | |
| 128 | + | formControlName="zorder" [showButtons]="true"></p-inputNumber> | |
| 129 | + | <label for="zorder">Order</label> | |
| 130 | + | </span> | |
| 131 | + | </div> | |
| 132 | + | </div> | |
| 133 | + | ||
| 134 | + | <div class="flex justify-content-end mt-4"> | |
| 135 | + | <button pButton type="button" label="Close" | |
| 136 | + | class="p-button-secondary mr-2" (click)="hideDialog()"></button> | |
| 137 | + | ||
| 138 | + | <button pButton type="submit" label="Save" | |
| 139 | + | [disabled]="!templateForm.valid"></button> | |
| 140 | + | </div> | |
| 141 | + | </form> | |
| 142 | + | </p-dialog> | |
| 143 | + | </div> | |
Siguiente
Anterior