Skip to content

Commit 2eebb71

Browse files
sei-awellesei-awelle
authored
Improve Player View Edit Form UX and Fix Application Settings (#689)
* Simplify application field labels in view edit - Change application field labels to simple titles - Application Name, Application URL, Icon Path, etc. * Improve view edit form labels and file upload UX - Simplify view information field labels to basic titles - Add DEFAULT badge to default team in team list - Add team selection validation for file uploads - Show red warning when no teams selected for files - Change upload button to 'Save Changes and Upload File' - Disable upload button when no teams selected - Allow clearing teams in UI without server errors - Only save to server when at least one team is selected * Fix application settings dropdowns toggling each other - Remove [(value)]="selected" binding from all dropdowns - Each dropdown now only uses [(ngModel)] for its specific property - Fixes issue where changing Embeddable would affect Load in Background - Simplify save methods to avoid change detection errors - Fix NG0100 ExpressionChangedAfterItHasBeenCheckedError * Improve file upload UX to match team section pattern - Restructure upload section as expansion panel (like teams) - Add file icon before filename in panel title - Move 'Add New File' button to always be visible at top - Match team selection layout to existing uploaded files - Change label to 'Teams with Access' - Add validation warning when no teams selected - Position Cancel and Upload buttons at bottom * Convert application template fields to use mat-label - Change from placeholder to mat-label for Name, URL, Icon Path - Consistent with other form fields across the application
1 parent 56537d6 commit 2eebb71

File tree

6 files changed

+230
-138
lines changed

6 files changed

+230
-138
lines changed

‎src/app/components/admin-app/admin-app-template-search/admin-template-details/admin-template-details.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,29 @@
55

66
<div class="d-flex flex-column">
77
<mat-form-field>
8+
<mat-label>Name</mat-label>
89
<input
910
matInput
10-
placeholder="Name"
1111
tabIndex="1"
1212
name="name"
1313
[(ngModel)]="appTemplate.name"
1414
(change)="editAppTemplate()"
1515
/>
1616
</mat-form-field>
1717
<mat-form-field>
18+
<mat-label>URL</mat-label>
1819
<input
1920
matInput
20-
placeholder="Url"
2121
tabIndex="2"
2222
name="url"
2323
[(ngModel)]="appTemplate.url"
2424
(change)="editAppTemplate()"
2525
/>
2626
</mat-form-field>
2727
<mat-form-field>
28+
<mat-label>Icon Path</mat-label>
2829
<input
2930
matInput
30-
placeholder="icon"
3131
tabIndex="3"
3232
name="icon"
3333
[(ngModel)]="appTemplate.icon"

‎src/app/components/admin-app/admin-view-search/admin-view-edit/admin-view-edit.component.html‎

Lines changed: 109 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,8 @@ <h4 class="header-text ms-2">Edit View: {{ view.name }}</h4>
7676
<div class="add-margin">
7777
<div>
7878
<mat-form-field>
79+
<mat-label>Status</mat-label>
7980
<mat-select
80-
placeholder="Status"
8181
[(ngModel)]="view.status"
8282
name="viewStatus"
8383
(selectionChange)="saveViewStatus()"
@@ -129,7 +129,7 @@ <h4 class="header-text ms-2">Edit View: {{ view.name }}</h4>
129129
</button>
130130
</mat-menu>
131131
<mat-menu #viewAppTemplates="matMenu">
132-
@for (t of applicationTemplates; track t) {
132+
@for (t of applicationTemplates; track t.id) {
133133
<button mat-menu-item (click)="addViewApplication(t)">
134134
{{ t.name }}
135135
</button>
@@ -157,7 +157,7 @@ <h4 class="header-text ms-2">Edit View: {{ view.name }}</h4>
157157
Add New Team
158158
</button>
159159
</div>
160-
@for (teamContainer of teams; track teamContainer) {
160+
@for (teamContainer of teams; track teamContainer.team.id) {
161161
<mat-expansion-panel
162162
[expanded]="
163163
currentTeam !== undefined &&
@@ -168,6 +168,9 @@ <h4 class="header-text ms-2">Edit View: {{ view.name }}</h4>
168168
<mat-expansion-panel-header>
169169
<mat-panel-title>
170170
{{ teamContainer.name }}
171+
@if (view.defaultTeamId === teamContainer.team.id) {
172+
<span class="default-badge">DEFAULT</span>
173+
}
171174
</mat-panel-title>
172175
</mat-expansion-panel-header>
173176
<div class="d-flex">
@@ -190,11 +193,11 @@ <h4 class="header-text ms-2">Edit View: {{ view.name }}</h4>
190193
</span>
191194
</div>
192195
<mat-form-field>
196+
<mat-label>Team Name (required)</mat-label>
193197
<input
194198
id="teamName{{ teamContainer.team.id }}"
195199
matInput
196200
[formControl]="teamNameFormControl"
197-
placeholder="Team Name"
198201
(change)="
199202
saveTeamName(
200203
$event.target.value,
@@ -287,73 +290,85 @@ <h4 class="header-text ms-2">Edit View: {{ view.name }}</h4>
287290
</mat-step>
288291
<mat-step label="Files">
289292
<mat-accordion>
290-
<div>
291-
<input
292-
hidden
293-
(change)="selectFile($event.target.files)"
294-
#fileInput
295-
type="file"
296-
/>
297-
<div>
298-
@if (staged.length === 0) {
299-
<div class="top-button d-flex justify-content-end">
300-
<button mat-stroked-button (click)="fileInput.click()">
301-
Add New File
302-
</button>
303-
</div>
304-
}
305-
@if (staged.length !== 0) {
306-
<div
307-
class="top-button d-flex justify-content-end align-items-center"
308-
>
309-
<mat-list>
310-
@for (playerFile of staged; track playerFile) {
311-
<mat-list-item>
312-
{{ playerFile.file.name }}
313-
<div>
314-
<button
315-
mat-icon-button
316-
(click)="removeFile(playerFile)"
317-
>
318-
<mat-icon
319-
style="transform: scale(0.85)"
320-
svgIcon="ic_clear_black_24px"
321-
></mat-icon>
322-
</button>
323-
</div>
324-
</mat-list-item>
325-
}
326-
</mat-list>
327-
<div>
328-
<mat-form-field id="teamSelect">
329-
<mat-label>Select Teams</mat-label>
330-
<mat-select multiple [(ngModel)]="teamsForFile">
331-
@for (teamWrapper of teams; track teamWrapper) {
293+
<input
294+
hidden
295+
(change)="selectFile($event.target.files)"
296+
#fileInput
297+
type="file"
298+
/>
299+
<div class="top-button d-flex justify-content-end">
300+
<button mat-stroked-button (click)="fileInput.click()">
301+
Add New File
302+
</button>
303+
</div>
304+
@if (staged.length !== 0) {
305+
<mat-expansion-panel [expanded]="true">
306+
<mat-expansion-panel-header>
307+
<mat-panel-title>
308+
<div class="d-flex align-items-center">
309+
<img
310+
height="25"
311+
src="assets/img/SP_Icon_Intel.png"
312+
alt="File"
313+
/>{{ staged[0].file.name }}
314+
</div>
315+
</mat-panel-title>
316+
</mat-expansion-panel-header>
317+
<div>
318+
<div class="d-flex flex-column align-items-center">
319+
<div class="d-flex align-items-center">
320+
<mat-checkbox
321+
color="primary"
322+
[(ngModel)]="selectAllTeamsForFile"
323+
(change)="toggleAllTeamsForFile($event.checked)"
324+
class="me-3"
325+
>
326+
Select All Teams
327+
</mat-checkbox>
328+
<mat-form-field id="teamSelect" style="width: 600px">
329+
<mat-label>Teams with Access</mat-label>
330+
<mat-select multiple [(ngModel)]="teamsForFile" (selectionChange)="onTeamsForFileChange()">
331+
@for (teamWrapper of teams; track teamWrapper.team.id) {
332332
<mat-option [value]="teamWrapper.team.id">{{
333333
teamWrapper.team.name
334334
}}</mat-option>
335335
}
336336
</mat-select>
337337
</mat-form-field>
338-
<button
339-
mat-stroked-button
340-
(click)="uploadFile()"
341-
style="height: 35px"
342-
>
343-
Upload File
344-
</button>
345-
@if (uploading) {
346-
<mat-progress-bar
347-
mode="determinate"
348-
[value]="uploadProgess"
349-
></mat-progress-bar>
350-
}
351338
</div>
339+
@if (teamsForFile.length === 0) {
340+
<div class="team-warning">
341+
At least one team must be selected
342+
</div>
343+
}
352344
</div>
353-
}
354-
</div>
355-
</div>
356-
@for (viewFile of viewFiles; track viewFile) {
345+
@if (uploading) {
346+
<mat-progress-bar
347+
mode="determinate"
348+
[value]="uploadProgess"
349+
class="mb-3"
350+
></mat-progress-bar>
351+
}
352+
<div class="delete-button d-flex justify-content-end">
353+
<button
354+
mat-stroked-button
355+
(click)="removeFile(staged[0])"
356+
>
357+
Cancel
358+
</button>
359+
<button
360+
mat-stroked-button
361+
(click)="uploadFile()"
362+
[disabled]="teamsForFile.length === 0"
363+
class="ms-2"
364+
>
365+
Upload File
366+
</button>
367+
</div>
368+
</div>
369+
</mat-expansion-panel>
370+
}
371+
@for (viewFile of viewFiles; track viewFile.id) {
357372
<mat-expansion-panel
358373
[expanded]="
359374
currentFile !== undefined && viewFile.id === currentFile.id
@@ -372,23 +387,38 @@ <h4 class="header-text ms-2">Edit View: {{ view.name }}</h4>
372387
</mat-panel-title>
373388
</mat-expansion-panel-header>
374389
<div>
375-
<div class="d-flex justify-content-around">
376-
<mat-form-field id="teamSelect" style="width: 600px">
377-
<mat-label>Teams with Permission to View</mat-label>
378-
<mat-select
379-
multiple
380-
[ngModel]="viewFile.teamIds"
381-
(selectionChange)="
382-
teamsForFileUpdated($event, viewFile)
383-
"
390+
<div class="d-flex flex-column align-items-center">
391+
<div class="d-flex align-items-center">
392+
<mat-checkbox
393+
color="primary"
394+
[checked]="isAllTeamsSelected(viewFile)"
395+
(change)="toggleAllTeamsForViewFile($event.checked, viewFile)"
396+
class="me-3"
384397
>
385-
@for (teamWrapper of teams; track teamWrapper) {
386-
<mat-option [value]="teamWrapper.team.id">{{
387-
teamWrapper.team.name
388-
}}</mat-option>
389-
}
390-
</mat-select>
391-
</mat-form-field>
398+
Select All Teams
399+
</mat-checkbox>
400+
<mat-form-field id="teamSelect" style="width: 600px">
401+
<mat-label>Teams with Access</mat-label>
402+
<mat-select
403+
multiple
404+
[ngModel]="viewFile.teamIds"
405+
(selectionChange)="
406+
teamsForFileUpdated($event, viewFile)
407+
"
408+
>
409+
@for (teamWrapper of teams; track teamWrapper.team.id) {
410+
<mat-option [value]="teamWrapper.team.id">{{
411+
teamWrapper.team.name
412+
}}</mat-option>
413+
}
414+
</mat-select>
415+
</mat-form-field>
416+
</div>
417+
@if (viewFile.teamIds && viewFile.teamIds.length === 0) {
418+
<div class="team-warning">
419+
At least one team must be selected
420+
</div>
421+
}
392422
</div>
393423
<div class="d-flex justify-content-around">
394424
<button

‎src/app/components/admin-app/admin-view-search/admin-view-edit/admin-view-edit.component.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,3 +70,22 @@
7070
.view-info-container {
7171
margin-left: 20%;
7272
}
73+
74+
.default-badge {
75+
display: inline-block;
76+
padding: 2px 8px;
77+
margin-left: 8px;
78+
font-size: 11px;
79+
font-weight: 600;
80+
text-transform: uppercase;
81+
border-radius: 4px;
82+
background-color: var(--mat-sys-primary-container);
83+
color: var(--mat-sys-on-primary-container);
84+
}
85+
86+
.team-warning {
87+
color: var(--mat-sys-error);
88+
font-size: 12px;
89+
margin-top: 4px;
90+
font-weight: 500;
91+
}

0 commit comments

Comments
 (0)
⚡