@@ -6,7 +6,7 @@ <h1 id="header" class="pb-2">{{labelPrefix + 'head' | translate}}</h1>
66
77 < div >
88 < button class ="me-auto btn btn-success addEPerson-button "
9- [routerLink] ="'create' ">
9+ [routerLink] ="'create' ">
1010 < i class ="fas fa-plus "> </ i >
1111 < span class ="d-none d-sm-inline ms-1 "> {{labelPrefix + 'button.add' | translate}}</ span >
1212 </ button >
@@ -18,77 +18,84 @@ <h2 id="search" class="border-bottom pb-2">
1818 </ h2 >
1919 < form [formGroup] ="searchForm " (ngSubmit) ="search(searchForm.value) " class ="d-flex justify-content-between ">
2020 < div >
21- < select name ="scope " id ="scope " formControlName ="scope " class ="form-select " aria-label ="Search scope ">
21+ < select name ="scope " id ="scope " formControlName ="scope " class ="form-select " aria-label ="Search scope ">
2222 < option value ="metadata "> {{labelPrefix + 'search.scope.metadata' | translate}}</ option >
2323 < option value ="email "> {{labelPrefix + 'search.scope.email' | translate}}</ option >
2424 </ select >
2525 </ div >
26- < div class ="flex-grow-1 me-3 ms-3 ">
27- < div class ="mb-3 input-group ">
26+ < div class ="flex-grow-1 me-3 ms-3 ">
27+ < div class ="mb-3 input-group ">
2828 < input type ="text " name ="query " id ="query " formControlName ="query "
29- class ="form-control " [attr.aria-label] ="labelPrefix + 'search.placeholder' | translate "
30- [placeholder] ="(labelPrefix + 'search.placeholder' | translate) ">
31- < span class ="input-group-append ">
32- < button type ="submit " class ="search-button btn btn-primary ">
33- < i class ="fas fa-search "> </ i > {{ labelPrefix + 'search.button' | translate }}
34- </ button >
35- </ span >
29+ class ="form-control " [attr.aria-label] ="labelPrefix + 'search.placeholder' | translate "
30+ [placeholder] ="(labelPrefix + 'search.placeholder' | translate) ">
31+ < span class ="input-group-append ">
32+ < button type ="submit " class ="search-button btn btn-primary ">
33+ < i class ="fas fa-search "> </ i > {{ labelPrefix + 'search.button' | translate }}
34+ </ button >
35+ </ span >
3636 </ div >
3737 </ div >
3838 < div >
3939 < button (click) ="clearFormAndResetResult(); "
40- class ="search-button btn btn-secondary "> {{labelPrefix + 'button.see-all' | translate}}</ button >
40+ class ="search-button btn btn-secondary "> {{labelPrefix + 'button.see-all' | translate}}</ button >
4141 </ div >
4242 </ form >
4343
44- < ds-loading *ngIf ="searching$ | async "> </ ds-loading >
45- < ds-pagination
46- *ngIf ="(pageInfoState$ | async)?.totalElements > 0 && (searching$ | async) !== true "
47- [paginationOptions] ="config "
48- [collectionSize] ="(pageInfoState$ | async)?.totalElements "
49- [hideGear] ="true "
50- [hidePagerWhenSinglePage] ="true ">
51-
52- < div class ="table-responsive ">
53- < table id ="epeople " class ="table table-striped table-hover table-bordered ">
54- < thead >
55- < tr >
56- < th scope ="col "> {{labelPrefix + 'table.id' | translate}}</ th >
57- < th scope ="col "> {{labelPrefix + 'table.name' | translate}}</ th >
58- < th scope ="col "> {{labelPrefix + 'table.email' | translate}}</ th >
59- < th > {{labelPrefix + 'table.edit' | translate}}</ th >
60- </ tr >
61- </ thead >
62- < tbody >
63- < tr *ngFor ="let epersonDto of (ePeopleDto$ | async)?.page "
64- [ngClass] ="{'table-primary' : (activeEPerson$ | async) === epersonDto.eperson} ">
65- < td > {{epersonDto.eperson.id}}</ td >
66- < td > {{ dsoNameService.getName(epersonDto.eperson) }}</ td >
67- < td > {{epersonDto.eperson.email}}</ td >
68- < td >
69- < div class ="btn-group edit-field ">
70- < button [routerLink] ="getEditEPeoplePage(epersonDto.eperson.id) "
44+ @if (searching$ | async) {
45+ < ds-loading > </ ds-loading >
46+ }
47+ @if ((pageInfoState$ | async)?.totalElements > 0 && (searching$ | async) !== true) {
48+ < ds-pagination
49+ [paginationOptions] ="config "
50+ [collectionSize] ="(pageInfoState$ | async)?.totalElements "
51+ [hideGear] ="true "
52+ [hidePagerWhenSinglePage] ="true ">
53+ < div class ="table-responsive ">
54+ < table id ="epeople " class ="table table-striped table-hover table-bordered ">
55+ < thead >
56+ < tr >
57+ < th scope ="col "> {{labelPrefix + 'table.id' | translate}}</ th >
58+ < th scope ="col "> {{labelPrefix + 'table.name' | translate}}</ th >
59+ < th scope ="col "> {{labelPrefix + 'table.email' | translate}}</ th >
60+ < th > {{labelPrefix + 'table.edit' | translate}}</ th >
61+ </ tr >
62+ </ thead >
63+ < tbody >
64+ @for (epersonDto of (ePeopleDto$ | async)?.page; track epersonDto) {
65+ < tr
66+ [ngClass] ="{'table-primary' : (activeEPerson$ | async) === epersonDto.eperson} ">
67+ < td > {{epersonDto.eperson.id}}</ td >
68+ < td > {{ dsoNameService.getName(epersonDto.eperson) }}</ td >
69+ < td > {{epersonDto.eperson.email}}</ td >
70+ < td >
71+ < div class ="btn-group edit-field ">
72+ < button [routerLink] ="getEditEPeoplePage(epersonDto.eperson.id) "
7173 class ="btn btn-outline-primary btn-sm access-control-editEPersonButton "
7274 title ="{{labelPrefix + 'table.edit.buttons.edit' | translate: { name: dsoNameService.getName(epersonDto.eperson) } }} ">
73- < i class ="fas fa-edit fa-fw "> </ i >
74- </ button >
75- < button *ngIf ="epersonDto.ableToDelete " (click) ="deleteEPerson(epersonDto.eperson) "
76- class ="delete-button btn btn-outline-danger btn-sm access-control-deleteEPersonButton "
77- title ="{{labelPrefix + 'table.edit.buttons.remove' | translate: { name: dsoNameService.getName(epersonDto.eperson) } }} ">
78- < i class ="fas fa-trash-alt fa-fw "> </ i >
79- </ button >
80- </ div >
81- </ td >
82- </ tr >
83- </ tbody >
84- </ table >
85- </ div >
86-
87- </ ds-pagination >
75+ < i class ="fas fa-edit fa-fw "> </ i >
76+ </ button >
77+ @if (epersonDto.ableToDelete) {
78+ < button (click) ="deleteEPerson(epersonDto.eperson) "
79+ class ="delete-button btn btn-outline-danger btn-sm access-control-deleteEPersonButton "
80+ title ="{{labelPrefix + 'table.edit.buttons.remove' | translate: { name: dsoNameService.getName(epersonDto.eperson) } }} ">
81+ < i class ="fas fa-trash-alt fa-fw "> </ i >
82+ </ button >
83+ }
84+ </ div >
85+ </ td >
86+ </ tr >
87+ }
88+ </ tbody >
89+ </ table >
90+ </ div >
91+ </ ds-pagination >
92+ }
8893
89- < div *ngIf ="(pageInfoState$ | async)?.totalElements === 0 " class ="alert alert-info w-100 mb-2 " role ="alert ">
90- {{labelPrefix + 'no-items' | translate}}
91- </ div >
94+ @if ((pageInfoState$ | async)?.totalElements === 0) {
95+ < div class ="alert alert-info w-100 mb-2 " role ="alert ">
96+ {{labelPrefix + 'no-items' | translate}}
97+ </ div >
98+ }
9299 </ div >
93100 </ div >
94101</ div >
0 commit comments