Skip to content

Improve Player View Edit Form UX and Fix Application Settings #689

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sei-tspencer merged 5 commits into from
Mar 17, 2026
Merged

Improve Player View Edit Form UX and Fix Application Settings #689

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5c97a30
Simplify application field labels in view edit
sei-awelle Mar 16, 2026
aa88be1
Improve view edit form labels and file upload UX
sei-awelle Mar 16, 2026
bb9bce7
Fix application settings dropdowns toggling each other
sei-awelle Mar 16, 2026
a0af3f6
Improve file upload UX to match team section pattern
sei-awelle Mar 16, 2026
11ca78e
Convert application template fields to use mat-label
sei-awelle Mar 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions ...pp/admin-app-template-search/admin-template-details/admin-template-details.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,29 +5,29 @@

<div class="d-flex flex-column">
<mat-form-field>
<mat-label>Name</mat-label>
<input
matInput
placeholder="Name"
tabIndex="1"
name="name"
[(ngModel)]="appTemplate.name"
(change)="editAppTemplate()"
/>
</mat-form-field>
<mat-form-field>
<mat-label>URL</mat-label>
<input
matInput
placeholder="Url"
tabIndex="2"
name="url"
[(ngModel)]="appTemplate.url"
(change)="editAppTemplate()"
/>
</mat-form-field>
<mat-form-field>
<mat-label>Icon Path</mat-label>
<input
matInput
placeholder="icon"
tabIndex="3"
name="icon"
[(ngModel)]="appTemplate.icon"
Expand Down
188 changes: 109 additions & 79 deletions ...app/components/admin-app/admin-view-search/admin-view-edit/admin-view-edit.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,8 @@ <h4 class="header-text ms-2">Edit View: {{ view.name }}</h4>
<div class="add-margin">
<div>
<mat-form-field>
<mat-label>Status</mat-label>
<mat-select
placeholder="Status"
[(ngModel)]="view.status"
name="viewStatus"
(selectionChange)="saveViewStatus()"
Expand Down Expand Up @@ -129,7 +129,7 @@ <h4 class="header-text ms-2">Edit View: {{ view.name }}</h4>
</button>
</mat-menu>
<mat-menu #viewAppTemplates="matMenu">
@for (t of applicationTemplates; track t) {
@for (t of applicationTemplates; track t.id) {
<button mat-menu-item (click)="addViewApplication(t)">
{{ t.name }}
</button>
Expand Down Expand Up @@ -157,7 +157,7 @@ <h4 class="header-text ms-2">Edit View: {{ view.name }}</h4>
Add New Team
</button>
</div>
@for (teamContainer of teams; track teamContainer) {
@for (teamContainer of teams; track teamContainer.team.id) {
<mat-expansion-panel
[expanded]="
currentTeam !== undefined &&
Expand All @@ -168,6 +168,9 @@ <h4 class="header-text ms-2">Edit View: {{ view.name }}</h4>
<mat-expansion-panel-header>
<mat-panel-title>
{{ teamContainer.name }}
@if (view.defaultTeamId === teamContainer.team.id) {
<span class="default-badge">DEFAULT</span>
}
</mat-panel-title>
</mat-expansion-panel-header>
<div class="d-flex">
Expand All @@ -190,11 +193,11 @@ <h4 class="header-text ms-2">Edit View: {{ view.name }}</h4>
</span>
</div>
<mat-form-field>
<mat-label>Team Name (required)</mat-label>
<input
id="teamName{{ teamContainer.team.id }}"
matInput
[formControl]="teamNameFormControl"
placeholder="Team Name"
(change)="
saveTeamName(
$event.target.value,
Expand Down Expand Up @@ -287,73 +290,85 @@ <h4 class="header-text ms-2">Edit View: {{ view.name }}</h4>
</mat-step>
<mat-step label="Files">
<mat-accordion>
<div>
<input
hidden
(change)="selectFile($event.target.files)"
#fileInput
type="file"
/>
<div>
@if (staged.length === 0) {
<div class="top-button d-flex justify-content-end">
<button mat-stroked-button (click)="fileInput.click()">
Add New File
</button>
</div>
}
@if (staged.length !== 0) {
<div
class="top-button d-flex justify-content-end align-items-center"
>
<mat-list>
@for (playerFile of staged; track playerFile) {
<mat-list-item>
{{ playerFile.file.name }}
<div>
<button
mat-icon-button
(click)="removeFile(playerFile)"
>
<mat-icon
style="transform: scale(0.85)"
svgIcon="ic_clear_black_24px"
></mat-icon>
</button>
</div>
</mat-list-item>
}
</mat-list>
<div>
<mat-form-field id="teamSelect">
<mat-label>Select Teams</mat-label>
<mat-select multiple [(ngModel)]="teamsForFile">
@for (teamWrapper of teams; track teamWrapper) {
<input
hidden
(change)="selectFile($event.target.files)"
#fileInput
type="file"
/>
<div class="top-button d-flex justify-content-end">
<button mat-stroked-button (click)="fileInput.click()">
Add New File
</button>
</div>
@if (staged.length !== 0) {
<mat-expansion-panel [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
<div class="d-flex align-items-center">
<img
height="25"
src="assets/img/SP_Icon_Intel.png"
alt="File"
/>{{ staged[0].file.name }}
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<div>
<div class="d-flex flex-column align-items-center">
<div class="d-flex align-items-center">
<mat-checkbox
color="primary"
[(ngModel)]="selectAllTeamsForFile"
(change)="toggleAllTeamsForFile($event.checked)"
class="me-3"
>
Select All Teams
</mat-checkbox>
<mat-form-field id="teamSelect" style="width: 600px">
<mat-label>Teams with Access</mat-label>
<mat-select multiple [(ngModel)]="teamsForFile" (selectionChange)="onTeamsForFileChange()">
@for (teamWrapper of teams; track teamWrapper.team.id) {
<mat-option [value]="teamWrapper.team.id">{{
teamWrapper.team.name
}}</mat-option>
}
</mat-select>
</mat-form-field>
<button
mat-stroked-button
(click)="uploadFile()"
style="height: 35px"
>
Upload File
</button>
@if (uploading) {
<mat-progress-bar
mode="determinate"
[value]="uploadProgess"
></mat-progress-bar>
}
</div>
@if (teamsForFile.length === 0) {
<div class="team-warning">
At least one team must be selected
</div>
}
</div>
}
</div>
</div>
@for (viewFile of viewFiles; track viewFile) {
@if (uploading) {
<mat-progress-bar
mode="determinate"
[value]="uploadProgess"
class="mb-3"
></mat-progress-bar>
}
<div class="delete-button d-flex justify-content-end">
<button
mat-stroked-button
(click)="removeFile(staged[0])"
>
Cancel
</button>
<button
mat-stroked-button
(click)="uploadFile()"
[disabled]="teamsForFile.length === 0"
class="ms-2"
>
Upload File
</button>
</div>
</div>
</mat-expansion-panel>
}
@for (viewFile of viewFiles; track viewFile.id) {
<mat-expansion-panel
[expanded]="
currentFile !== undefined && viewFile.id === currentFile.id
Expand All @@ -372,23 +387,38 @@ <h4 class="header-text ms-2">Edit View: {{ view.name }}</h4>
</mat-panel-title>
</mat-expansion-panel-header>
<div>
<div class="d-flex justify-content-around">
<mat-form-field id="teamSelect" style="width: 600px">
<mat-label>Teams with Permission to View</mat-label>
<mat-select
multiple
[ngModel]="viewFile.teamIds"
(selectionChange)="
teamsForFileUpdated($event, viewFile)
"
<div class="d-flex flex-column align-items-center">
<div class="d-flex align-items-center">
<mat-checkbox
color="primary"
[checked]="isAllTeamsSelected(viewFile)"
(change)="toggleAllTeamsForViewFile($event.checked, viewFile)"
class="me-3"
>
@for (teamWrapper of teams; track teamWrapper) {
<mat-option [value]="teamWrapper.team.id">{{
teamWrapper.team.name
}}</mat-option>
}
</mat-select>
</mat-form-field>
Select All Teams
</mat-checkbox>
<mat-form-field id="teamSelect" style="width: 600px">
<mat-label>Teams with Access</mat-label>
<mat-select
multiple
[ngModel]="viewFile.teamIds"
(selectionChange)="
teamsForFileUpdated($event, viewFile)
"
>
@for (teamWrapper of teams; track teamWrapper.team.id) {
<mat-option [value]="teamWrapper.team.id">{{
teamWrapper.team.name
}}</mat-option>
}
</mat-select>
</mat-form-field>
</div>
@if (viewFile.teamIds && viewFile.teamIds.length === 0) {
<div class="team-warning">
At least one team must be selected
</div>
}
</div>
<div class="d-flex justify-content-around">
<button
Expand Down
19 changes: 19 additions & 0 deletions ...app/components/admin-app/admin-view-search/admin-view-edit/admin-view-edit.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,3 +70,22 @@
.view-info-container {
margin-left: 20%;
}

.default-badge {
display: inline-block;
padding: 2px 8px;
margin-left: 8px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
border-radius: 4px;
background-color: var(--mat-sys-primary-container);
color: var(--mat-sys-on-primary-container);
}

.team-warning {
color: var(--mat-sys-error);
font-size: 12px;
margin-top: 4px;
font-weight: 500;
}
Loading
Loading
⚡