e901aefbf5
- added organizations - added industries - added logo in 2 colors for light and dark theme - improved authorization to allow multi tenancy
92 lines
3.3 KiB
HTML
92 lines
3.3 KiB
HTML
<p-toast />
|
|
|
|
<p-toolbar class="mb-6">
|
|
<ng-template #start>
|
|
<p-button label="Neu" icon="pi pi-plus" severity="secondary" class="mr-2" (onClick)="openNew()" />
|
|
<p-button label="Löschen" icon="pi pi-trash" severity="danger" outlined (onClick)="deleteSelected()" [disabled]="!selectedIndustries || !selectedIndustries.length" />
|
|
</ng-template>
|
|
|
|
<ng-template #end>
|
|
<p-button label="Exportieren" icon="pi pi-upload" severity="secondary" (onClick)="exportCSV()" />
|
|
</ng-template>
|
|
</p-toolbar>
|
|
|
|
<p-table
|
|
#dt
|
|
[value]="industries()"
|
|
[rows]="10"
|
|
[columns]="cols"
|
|
[paginator]="true"
|
|
[globalFilterFields]="['name', 'street', 'houseNumber', 'zipCode', 'city', 'country', 'notes']"
|
|
[tableStyle]="{ 'min-width': '75rem' }"
|
|
[(selection)]="selectedIndustries"
|
|
[rowHover]="true"
|
|
dataKey="id"
|
|
currentPageReportTemplate="Zeige {first} bis {last} von {totalRecords} Einträgen"
|
|
[showCurrentPageReport]="true"
|
|
[rowsPerPageOptions]="[10, 20, 30]"
|
|
>
|
|
<ng-template #caption>
|
|
<div class="flex items-center justify-between">
|
|
<h5 class="m-0" >Verwalte Branchen</h5>
|
|
<p-iconfield>
|
|
<p-inputicon class="pi pi-search" />
|
|
<input pInputText type="text" (input)="onGlobalFilter(dt, $event)" placeholder="Suche..." />
|
|
</p-iconfield>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<ng-template #header>
|
|
<tr>
|
|
<th style="width: 3rem">
|
|
<p-tableHeaderCheckbox />
|
|
</th>
|
|
<th style="min-width:8rem" >
|
|
ID
|
|
</th>
|
|
<th pSortableColumn="name" style="min-width:8rem" >
|
|
Name
|
|
<p-sortIcon field="name" />
|
|
</th>
|
|
<th style="min-width: 12rem"></th>
|
|
</tr>
|
|
</ng-template>
|
|
<ng-template #body let-industry>
|
|
<tr>
|
|
<td>
|
|
<p-tableCheckbox [value]="industry" />
|
|
</td>
|
|
<td>{{ industry.id }}</td>
|
|
<td>{{ industry.name }}</td>
|
|
<td class="text-center">
|
|
<p-button icon="pi pi-pencil" class="mr-2" [rounded]="true" [outlined]="true" (click)="editIndustry(industry)" />
|
|
<p-button icon="pi pi-trash" severity="danger" [rounded]="true" [outlined]="true" (click)="deleteIndustry(industry)" />
|
|
</td>
|
|
</tr>
|
|
</ng-template>
|
|
</p-table>
|
|
|
|
<p-dialog [(visible)]="industryDialog" [style]="{ width: '900px' }" i18n-header header="Branchen Details" [modal]="true">
|
|
<ng-template #content>
|
|
|
|
<div class="grid gap-4 max-w-3xl mx-auto p-4">
|
|
<!-- Name -->
|
|
<div class="flex flex-col">
|
|
<label for="name" class="block font-bold mb-3">Name</label>
|
|
<input type="text" pInputText id="name" [(ngModel)]="industry().name" required autofocus fluid />
|
|
@if (submitted && !industry().name) {
|
|
<small class="text-red-500">Name is required.</small>
|
|
}
|
|
</div>
|
|
|
|
</div>
|
|
</ng-template>
|
|
|
|
<ng-template #footer>
|
|
<p-button label="Abbrechen" icon="pi pi-times" text (click)="hideDialog()" />
|
|
<p-button label="Speichern" icon="pi pi-check" (click)="saveIndustry()" />
|
|
</ng-template>
|
|
</p-dialog>
|
|
|
|
<p-confirmdialog [style]="{ width: '450px' }" />
|