Skip to content

Commit a0af3f6

Browse files
sei-awellesei-awelle
committed
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
1 parent bb9bce7 commit a0af3f6

File tree

2 files changed

+76
-101
lines changed

2 files changed

+76
-101
lines changed

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

Lines changed: 76 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -290,89 +290,84 @@ <h4 class="header-text ms-2">Edit View: {{ view.name }}</h4>
290290
</mat-step>
291291
<mat-step label="Files">
292292
<mat-accordion>
293-
<div>
294-
<input
295-
hidden
296-
(change)="selectFile($event.target.files)"
297-
#fileInput
298-
type="file"
299-
/>
300-
<div>
301-
@if (staged.length === 0) {
302-
<div class="top-button d-flex justify-content-end">
303-
<button mat-stroked-button (click)="fileInput.click()">
304-
Add New File
305-
</button>
306-
</div>
307-
}
308-
@if (staged.length !== 0) {
309-
<div
310-
class="top-button d-flex justify-content-end align-items-start"
311-
>
312-
<div class="staged-files-list">
313-
@for (playerFile of staged; track playerFile.file.name) {
314-
<div class="staged-file-item">
315-
<button
316-
mat-icon-button
317-
(click)="removeFile(playerFile)"
318-
title="Remove file"
319-
>
320-
<mat-icon
321-
class="mdi-24px"
322-
fontIcon="mdi-delete"
323-
[ngStyle]="{'color': 'var(--mat-sys-primary)'}"
324-
></mat-icon>
325-
</button>
326-
<span class="file-name">{{ playerFile.file.name }}</span>
327-
</div>
328-
}
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 }}
329314
</div>
330-
<div class="d-flex flex-column">
331-
<div class="d-flex align-items-center">
332-
<mat-checkbox
333-
color="primary"
334-
[(ngModel)]="selectAllTeamsForFile"
335-
(change)="toggleAllTeamsForFile($event.checked)"
336-
class="me-3"
337-
>
338-
Select All Teams
339-
</mat-checkbox>
340-
<mat-form-field id="teamSelect">
341-
<mat-label>Select Teams</mat-label>
342-
<mat-select multiple [(ngModel)]="teamsForFile" (selectionChange)="onTeamsForFileChange()">
343-
@for (teamWrapper of teams; track teamWrapper.team.id) {
344-
<mat-option [value]="teamWrapper.team.id">{{
345-
teamWrapper.team.name
346-
}}</mat-option>
347-
}
348-
</mat-select>
349-
</mat-form-field>
350-
<button
351-
mat-stroked-button
352-
(click)="uploadFile()"
353-
class="ms-3"
354-
style="height: 35px"
355-
[disabled]="teamsForFile.length === 0"
356-
>
357-
Save Changes and Upload File
358-
</button>
359-
</div>
360-
@if (teamsForFile.length === 0) {
361-
<div class="team-warning">
362-
At least one team must be selected
363-
</div>
364-
}
365-
@if (uploading) {
366-
<mat-progress-bar
367-
mode="determinate"
368-
[value]="uploadProgess"
369-
></mat-progress-bar>
370-
}
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) {
332+
<mat-option [value]="teamWrapper.team.id">{{
333+
teamWrapper.team.name
334+
}}</mat-option>
335+
}
336+
</mat-select>
337+
</mat-form-field>
371338
</div>
339+
@if (teamsForFile.length === 0) {
340+
<div class="team-warning">
341+
At least one team must be selected
342+
</div>
343+
}
372344
</div>
373-
}
374-
</div>
375-
</div>
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+
}
376371
@for (viewFile of viewFiles; track viewFile.id) {
377372
<mat-expansion-panel
378373
[expanded]="
@@ -403,7 +398,7 @@ <h4 class="header-text ms-2">Edit View: {{ view.name }}</h4>
403398
Select All Teams
404399
</mat-checkbox>
405400
<mat-form-field id="teamSelect" style="width: 600px">
406-
<mat-label>Teams with Permission to View</mat-label>
401+
<mat-label>Teams with Access</mat-label>
407402
<mat-select
408403
multiple
409404
[ngModel]="viewFile.teamIds"

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

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -71,26 +71,6 @@
7171
margin-left: 20%;
7272
}
7373

74-
.staged-files-list {
75-
display: flex;
76-
flex-direction: column;
77-
gap: 8px;
78-
}
79-
80-
.staged-file-item {
81-
display: flex;
82-
align-items: center;
83-
gap: 8px;
84-
padding: 4px 0;
85-
86-
.file-name {
87-
flex: 1;
88-
overflow: hidden;
89-
text-overflow: ellipsis;
90-
white-space: nowrap;
91-
}
92-
}
93-
9474
.default-badge {
9575
display: inline-block;
9676
padding: 2px 8px;

0 commit comments

Comments
 (0)
⚡