Skip to content

Commit ee9599a

Browse files
sei-aschlackmansei-aschlackman
committed
fix more search fields
1 parent 07d2510 commit ee9599a

File tree

2 files changed

+160
-163
lines changed

2 files changed

+160
-163
lines changed

‎src/app/components/player/user-presence-page/user-presence/user-presence.component.html‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,24 @@
44
-->
55

66
<div>
7-
<div class="d-flex align-items-center w-100">
7+
<div class="d-flex align-items-center w-100 mx-1 my-1">
88
<span class="d-flex align-items-center w-100 gap-4">
99
<div class="d-flex align-items-center">
10-
<mat-icon svgIcon="ic_magnify_search"></mat-icon>
11-
<mat-form-field>
10+
<mat-form-field subscriptSizing="dynamic">
11+
<mat-icon svgIcon="ic_magnify_search" matPrefix></mat-icon>
1212
<input
1313
matInput
1414
[(ngModel)]="searchTerm"
1515
(keyup)="applyFilter($event.target.value)"
1616
placeholder="Search"
17-
/>
17+
/>
1818
@if (searchTerm !== '') {
1919
<button
2020
matSuffix
2121
mat-icon-button
2222
(click)="clearFilter()"
2323
matTooltip="Clear Search"
24-
>
24+
>
2525
<mat-icon svgIcon="ic_cancel_circle"></mat-icon>
2626
</button>
2727
}
@@ -38,33 +38,33 @@
3838
color="primary"
3939
(change)="setHideInactive($event.checked)"
4040
>Hide Offline</mat-checkbox
41-
>
42-
</span>
43-
<span>
44-
<button
45-
mat-icon-button
46-
(click)="closeMe.emit()"
47-
title="Close"
48-
tabindex="-1"
49-
>
50-
<mat-icon
51-
class="mdi-24px self-center"
52-
fontIcon="mdi-close-circle-outline"
53-
></mat-icon>
54-
</button>
55-
</span>
56-
</div>
57-
58-
<mat-accordion multi>
59-
@for (team of _teams | async; track trackByTeamId(team)) {
60-
<div>
61-
<app-team-user-presence
62-
[team]="team"
63-
[users]="getPresenceByTeamId(team.id) | async"
64-
[searchTerm]="searchTerm$ | async"
65-
[hideInactive]="hideInactive"
66-
></app-team-user-presence>
67-
</div>
68-
}
69-
</mat-accordion>
41+
>
42+
</span>
43+
<span>
44+
<button
45+
mat-icon-button
46+
(click)="closeMe.emit()"
47+
title="Close"
48+
tabindex="-1"
49+
>
50+
<mat-icon
51+
class="mdi-24px self-center"
52+
fontIcon="mdi-close-circle-outline"
53+
></mat-icon>
54+
</button>
55+
</span>
7056
</div>
57+
58+
<mat-accordion multi>
59+
@for (team of _teams | async; track trackByTeamId(team)) {
60+
<div>
61+
<app-team-user-presence
62+
[team]="team"
63+
[users]="getPresenceByTeamId(team.id) | async"
64+
[searchTerm]="searchTerm$ | async"
65+
[hideInactive]="hideInactive"
66+
></app-team-user-presence>
67+
</div>
68+
}
69+
</mat-accordion>
70+
</div>

‎src/app/components/shared/add-remove-users-dialog/add-remove-users-dialog.component.html‎

Lines changed: 126 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,26 @@
1010
All Users
1111
</div>
1212
<div class="d-flex align-items-center">
13-
<mat-icon
14-
style="transform: scale(0.85); margin-right: 5px; margin-left: 10px"
15-
svgIcon="ic_magnify_search"
16-
></mat-icon>
17-
<mat-form-field style="width: 220px">
13+
<mat-form-field class="w-100 my-1" subscriptSizing="dynamic">
14+
<mat-icon
15+
matPrefix
16+
style="transform: scale(0.85); margin-right: 5px; margin-left: 10px"
17+
svgIcon="ic_magnify_search"
18+
></mat-icon>
1819
<input
1920
matInput
2021
[(ngModel)]="filterString"
2122
(keyup)="applyFilter($event.target.value)"
2223
placeholder="Search"
2324
#searchBox
24-
/>
25+
/>
2526
@if (filterString !== '') {
2627
<button
2728
mat-icon-button
2829
matSuffix
2930
(click)="clearFilter()"
3031
title="Clear Search"
31-
>
32+
>
3233
<mat-icon
3334
style="transform: scale(0.85)"
3435
svgIcon="ic_cancel_circle"
@@ -39,9 +40,7 @@
3940
</div>
4041

4142
@if (isLoading) {
42-
<mat-card
43-
class="d-flex justify-content-center align-items-center"
44-
>
43+
<mat-card class="d-flex justify-content-center align-items-center">
4544
<mat-progress-spinner color="primary" mode="indeterminate">
4645
</mat-progress-spinner>
4746
</mat-card>
@@ -52,143 +51,141 @@
5251
#table
5352
[dataSource]="userDataSource"
5453
matSort
55-
>
54+
>
5655
<ng-container matColumnDef="name">
5756
<mat-header-cell *matHeaderCellDef mat-sort-header
5857
>User Name</mat-header-cell
58+
>
59+
<mat-cell *matCellDef="let element">
60+
@if (element.name !== null) {
61+
<div>{{ element.name }}</div>
62+
}
63+
@if (element.name === null) {
64+
<div>{{ element.id }}</div>
65+
}
66+
</mat-cell>
67+
</ng-container>
68+
69+
<ng-container matColumnDef="id">
70+
<mat-header-cell *matHeaderCellDef>&nbsp;</mat-header-cell>
71+
<mat-cell *matCellDef="let element">
72+
<div>
73+
<button mat-stroked-button (click)="addUserToTeam(element)">
74+
Add User
75+
</button>
76+
</div>
77+
</mat-cell>
78+
</ng-container>
79+
80+
<mat-header-row *matHeaderRowDef="displayedUserColumns"></mat-header-row>
81+
<mat-row *matRowDef="let row; columns: displayedUserColumns"></mat-row>
82+
</mat-table>
83+
84+
@if (userDataSource.filteredData.length === 0) {
85+
<div>No results found</div>
86+
}
87+
<mat-paginator
88+
#paginator
89+
[pageSize]="defaultPageSize"
90+
[showFirstLastButtons]="true"
91+
(page)="pageEvent = $event"
92+
>
93+
</mat-paginator>
94+
</div>
95+
96+
<div style="margin-left: 20px">
97+
<div class="team-list-container mat-elevation-z8">
98+
<div id="userImport">
99+
<div class="sp-icon">
100+
<img height="35" src="assets/img/SP_Icon_Team.png" alt="Users" />
101+
Team Users
102+
</div>
103+
<div>
104+
<button
105+
mat-stroked-button
106+
(click)="fileInput.click()"
107+
title="Import users from a CSV containing a single column of user IDs"
59108
>
109+
Import Users
110+
</button>
111+
</div>
112+
<input
113+
hidden
114+
(change)="uploadUsers($event.target.files)"
115+
#fileInput
116+
type="file"
117+
/>
118+
</div>
119+
120+
@if (isLoading) {
121+
<mat-card class="d-flex justify-content-center align-items-center">
122+
<mat-progress-spinner color="primary" mode="indeterminate">
123+
</mat-progress-spinner>
124+
</mat-card>
125+
}
126+
127+
<mat-table
128+
class="mat-table-team-users"
129+
#table
130+
[dataSource]="teamUserDataSource"
131+
>
132+
<ng-container matColumnDef="name">
133+
<mat-header-cell *matHeaderCellDef>User Name</mat-header-cell>
60134
<mat-cell *matCellDef="let element">
61-
@if (element.name !== null) {
62-
<div>{{ element.name }}</div>
135+
@if (element.user.name !== null) {
136+
<div>
137+
{{ element.user.name }}
138+
</div>
63139
}
64-
@if (element.name === null) {
65-
<div>{{ element.id }}</div>
140+
@if (element.user.name === null) {
141+
<div>{{ element.user.id }}</div>
66142
}
67143
</mat-cell>
68144
</ng-container>
69145

70-
<ng-container matColumnDef="id">
71-
<mat-header-cell *matHeaderCellDef>&nbsp;</mat-header-cell>
146+
<ng-container matColumnDef="teamMembership">
147+
<mat-header-cell *matHeaderCellDef>Role</mat-header-cell>
72148
<mat-cell *matCellDef="let element">
149+
<mat-form-field>
150+
<mat-select
151+
placeholder="Role"
152+
name="teamMembershipRole"
153+
[(ngModel)]="element.teamMembership.roleId"
154+
(selectionChange)="updateMembership(element)"
155+
[(value)]="element.teamMembership.roleId"
156+
>
157+
@for (role of roles; track role) {
158+
<mat-option [value]="role.id">
159+
{{ role.name }}
160+
</mat-option>
161+
}
162+
</mat-select>
163+
</mat-form-field>
164+
</mat-cell>
165+
</ng-container>
166+
167+
<ng-container matColumnDef="user">
168+
<mat-header-cell *matHeaderCellDef>&nbsp;</mat-header-cell>
169+
<mat-cell style="margin-left: 20px" *matCellDef="let element">
73170
<div>
74-
<button mat-stroked-button (click)="addUserToTeam(element)">
75-
Add User
171+
<button mat-stroked-button (click)="removeUserFromTeam(element)">
172+
Remove
76173
</button>
77174
</div>
78175
</mat-cell>
79176
</ng-container>
80177

81-
<mat-header-row *matHeaderRowDef="displayedUserColumns"></mat-header-row>
82-
<mat-row *matRowDef="let row; columns: displayedUserColumns"></mat-row>
178+
<mat-header-row
179+
*matHeaderRowDef="displayedTeamColumns"
180+
></mat-header-row>
181+
<mat-row *matRowDef="let row; columns: displayedTeamColumns"></mat-row>
83182
</mat-table>
84-
85-
@if (userDataSource.filteredData.length === 0) {
86-
<div>No results found</div>
87-
}
88-
<mat-paginator
89-
#paginator
90-
[pageSize]="defaultPageSize"
91-
[showFirstLastButtons]="true"
92-
(page)="pageEvent = $event"
93-
>
94-
</mat-paginator>
95-
</div>
96-
97-
<div style="margin-left: 20px">
98-
<div class="team-list-container mat-elevation-z8">
99-
<div id="userImport">
100-
<div class="sp-icon">
101-
<img height="35" src="assets/img/SP_Icon_Team.png" alt="Users" />
102-
Team Users
103-
</div>
104-
<div>
105-
<button
106-
mat-stroked-button
107-
(click)="fileInput.click()"
108-
title="Import users from a CSV containing a single column of user IDs"
109-
>
110-
Import Users
111-
</button>
112-
</div>
113-
<input
114-
hidden
115-
(change)="uploadUsers($event.target.files)"
116-
#fileInput
117-
type="file"
118-
/>
119-
</div>
120-
121-
@if (isLoading) {
122-
<mat-card
123-
class="d-flex justify-content-center align-items-center"
124-
>
125-
<mat-progress-spinner color="primary" mode="indeterminate">
126-
</mat-progress-spinner>
127-
</mat-card>
128-
}
129-
130-
<mat-table
131-
class="mat-table-team-users"
132-
#table
133-
[dataSource]="teamUserDataSource"
134-
>
135-
<ng-container matColumnDef="name">
136-
<mat-header-cell *matHeaderCellDef>User Name</mat-header-cell>
137-
<mat-cell *matCellDef="let element">
138-
@if (element.user.name !== null) {
139-
<div>
140-
{{ element.user.name }}
141-
</div>
142-
}
143-
@if (element.user.name === null) {
144-
<div>{{ element.user.id }}</div>
145-
}
146-
</mat-cell>
147-
</ng-container>
148-
149-
<ng-container matColumnDef="teamMembership">
150-
<mat-header-cell *matHeaderCellDef>Role</mat-header-cell>
151-
<mat-cell *matCellDef="let element">
152-
<mat-form-field>
153-
<mat-select
154-
placeholder="Role"
155-
name="teamMembershipRole"
156-
[(ngModel)]="element.teamMembership.roleId"
157-
(selectionChange)="updateMembership(element)"
158-
[(value)]="element.teamMembership.roleId"
159-
>
160-
@for (role of roles; track role) {
161-
<mat-option [value]="role.id">
162-
{{ role.name }}
163-
</mat-option>
164-
}
165-
</mat-select>
166-
</mat-form-field>
167-
</mat-cell>
168-
</ng-container>
169-
170-
<ng-container matColumnDef="user">
171-
<mat-header-cell *matHeaderCellDef>&nbsp;</mat-header-cell>
172-
<mat-cell style="margin-left: 20px" *matCellDef="let element">
173-
<div>
174-
<button mat-stroked-button (click)="removeUserFromTeam(element)">
175-
Remove
176-
</button>
177-
</div>
178-
</mat-cell>
179-
</ng-container>
180-
181-
<mat-header-row
182-
*matHeaderRowDef="displayedTeamColumns"
183-
></mat-header-row>
184-
<mat-row *matRowDef="let row; columns: displayedTeamColumns"></mat-row>
185-
</mat-table>
186-
</div>
187183
</div>
188184
</div>
185+
</div>
189186

190-
<div class="d-flex justify-content-center">
191-
<mat-dialog-actions>
192-
<button mat-stroked-button (click)="done()">Done</button>
193-
</mat-dialog-actions>
194-
</div>
187+
<div class="d-flex justify-content-center">
188+
<mat-dialog-actions>
189+
<button mat-stroked-button (click)="done()">Done</button>
190+
</mat-dialog-actions>
191+
</div>

0 commit comments

Comments
 (0)
⚡