Skip to content

Commit 7be850c

Browse files
alexcibotarialexcibotari
committed
Add File Upload From Asset Selector Dialog
1 parent 04530cf commit 7be850c

22 files changed

+290
-223
lines changed

‎src/app/features/admin/settings/ui/ui.component.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@
22
<mat-toolbar-row>
33
User Interface
44
<span class="spacer"></span>
5-
<button mat-stroked-button color="primary" [disabled]="!form.valid" (click)="save()">
6-
<mat-icon>save</mat-icon>
7-
Save
8-
</button>
5+
<div class="actions">
6+
<button mat-stroked-button color="primary" [disabled]="!form.valid" (click)="save()">
7+
<mat-icon>save</mat-icon>
8+
Save
9+
</button>
10+
</div>
911
</mat-toolbar-row>
1012
</mat-toolbar>
1113

‎src/app/features/admin/spaces/spaces.component.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@
22
<mat-toolbar-row>
33
Spaces
44
<span class="spacer"></span>
5-
<button mat-stroked-button color="primary" (click)="openAddDialog()">
6-
<mat-icon>add</mat-icon>
7-
Add Space
8-
</button>
5+
<div class="actions">
6+
<button mat-stroked-button color="primary" (click)="openAddDialog()">
7+
<mat-icon>add</mat-icon>
8+
Add Space
9+
</button>
10+
</div>
911
</mat-toolbar-row>
1012
</mat-toolbar>
1113
@if (isLoading) {

‎src/app/features/admin/users/users.component.html‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,17 @@
22
<mat-toolbar-row>
33
Users
44
<span class="spacer"></span>
5-
<button mat-stroked-button color="accent" matTooltip="Synchronize Users with Database." (click)="sync()">
6-
<ll-icon [animate]="isSyncLoading()" start="sync" end="sync" />
7-
Sync
8-
</button>
5+
<div class="actions">
6+
<button mat-stroked-button color="accent" matTooltip="Synchronize Users with Database." (click)="sync()">
7+
<ll-icon [animate]="isSyncLoading()" start="sync" end="sync" />
8+
Sync
9+
</button>
910

10-
<button mat-stroked-button color="primary" (click)="inviteDialog()">
11-
<mat-icon>person_add</mat-icon>
12-
Invite
13-
</button>
11+
<button mat-stroked-button color="primary" (click)="inviteDialog()">
12+
<mat-icon>person_add</mat-icon>
13+
Invite
14+
</button>
15+
</div>
1416
</mat-toolbar-row>
1517
</mat-toolbar>
1618
@if (isLoading()) {

‎src/app/features/spaces/assets/assets.component.html‎

Lines changed: 70 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -5,50 +5,55 @@
55
<mat-icon>help</mat-icon>
66
</a>
77
<span class="spacer"></span>
8-
<mat-button-toggle-group
9-
hideSingleSelectionIndicator="true"
10-
(change)="settingsStore.setAssetLayout($event.value)"
11-
[value]="settingsStore.assetLayout()">
12-
<mat-button-toggle value="list" matTooltip="List Layout">
13-
<mat-icon>view_list</mat-icon>
14-
</mat-button-toggle>
15-
<mat-button-toggle value="grid" matTooltip="Grid Layout">
16-
<mat-icon>grid_view</mat-icon>
17-
</mat-button-toggle>
18-
</mat-button-toggle-group>
19-
@if ('ASSET_CREATE' | canUserPerform | async) {
20-
<button mat-stroked-button color="primary" (click)="fileInput.click()">
21-
<mat-icon>upload_file</mat-icon>
22-
Upload Assets
23-
</button>
24-
<input hidden type="file" multiple #fileInput (change)="onFileUpload($event)" />
25-
26-
<button mat-stroked-button color="primary" (click)="openAddFolderDialog()">
27-
<mat-icon>add</mat-icon>
28-
Create Folder
29-
</button>
30-
}
31-
32-
@if (['ASSET_IMPORT', 'ASSET_EXPORT'] | canUserPerform | async) {
33-
<button mat-icon-button [matMenuTriggerFor]="extraMenu">
34-
<mat-icon>more_vert</mat-icon>
35-
</button>
36-
}
8+
<div class="actions">
9+
@if (fileUploadQueue().length > 0) {
10+
<ll-icon [animate]="true" start="save" end="progress_activity" [matBadge]="fileUploadQueue().length" />
11+
}
12+
<mat-button-toggle-group
13+
hideSingleSelectionIndicator="true"
14+
(change)="settingsStore.setAssetLayout($event.value)"
15+
[value]="settingsStore.assetLayout()">
16+
<mat-button-toggle value="list" matTooltip="List Layout">
17+
<mat-icon>view_list</mat-icon>
18+
</mat-button-toggle>
19+
<mat-button-toggle value="grid" matTooltip="Grid Layout">
20+
<mat-icon>grid_view</mat-icon>
21+
</mat-button-toggle>
22+
</mat-button-toggle-group>
23+
@if ('ASSET_CREATE' | canUserPerform | async) {
24+
<button mat-stroked-button color="primary" (click)="fileInput.click()">
25+
<mat-icon>upload_file</mat-icon>
26+
Upload Assets
27+
</button>
28+
<input hidden type="file" multiple #fileInput (change)="onFileUpload($event)" />
3729

38-
<mat-menu #extraMenu="matMenu">
39-
@if ('ASSET_IMPORT' | canUserPerform | async) {
40-
<button mat-menu-item (click)="openImportDialog()">
41-
<mat-icon>cloud_upload</mat-icon>
42-
<span>Import</span>
30+
<button mat-stroked-button color="primary" (click)="openAddFolderDialog()">
31+
<mat-icon>add</mat-icon>
32+
Create Folder
4333
</button>
4434
}
45-
@if ('ASSET_EXPORT' | canUserPerform | async) {
46-
<button mat-menu-item (click)="openExportDialog()">
47-
<mat-icon>cloud_download</mat-icon>
48-
<span>Export</span>
35+
36+
@if (['ASSET_IMPORT', 'ASSET_EXPORT'] | canUserPerform | async) {
37+
<button mat-icon-button [matMenuTriggerFor]="extraMenu">
38+
<mat-icon>more_vert</mat-icon>
4939
</button>
5040
}
51-
</mat-menu>
41+
42+
<mat-menu #extraMenu="matMenu">
43+
@if ('ASSET_IMPORT' | canUserPerform | async) {
44+
<button mat-menu-item (click)="openImportDialog()">
45+
<mat-icon>cloud_upload</mat-icon>
46+
<span>Import</span>
47+
</button>
48+
}
49+
@if ('ASSET_EXPORT' | canUserPerform | async) {
50+
<button mat-menu-item (click)="openExportDialog()">
51+
<mat-icon>cloud_download</mat-icon>
52+
<span>Export</span>
53+
</button>
54+
}
55+
</mat-menu>
56+
</div>
5257
</mat-toolbar-row>
5358
</mat-toolbar>
5459
@if (isLoading()) {
@@ -131,12 +136,28 @@
131136
</mat-cell>
132137
</ng-container>
133138
<ng-container matColumnDef="size">
134-
<mat-header-cell *matHeaderCellDef mat-sort-header="size"> Size</mat-header-cell>
135-
<mat-cell *matCellDef="let element"> {{ element.size | digitalStore }}</mat-cell>
139+
<mat-header-cell *matHeaderCellDef mat-sort-header="size"> File Size</mat-header-cell>
140+
<mat-cell *matCellDef="let element">
141+
@if (element.size) {
142+
{{ element.size | digitalStore }}
143+
} @else {
144+
<mat-icon>remove</mat-icon>
145+
}
146+
</mat-cell>
136147
</ng-container>
137148
<ng-container matColumnDef="type">
138149
<mat-header-cell *matHeaderCellDef mat-sort-header="type"> Type</mat-header-cell>
139-
<mat-cell *matCellDef="let element"> {{ element.type }}</mat-cell>
150+
<mat-cell *matCellDef="let element">
151+
@if (element.kind === 'FILE') {
152+
@if (element.type) {
153+
{{ element.type }}
154+
} @else {
155+
unknown
156+
}
157+
} @else {
158+
Folder
159+
}
160+
</mat-cell>
140161
</ng-container>
141162
<ng-container matColumnDef="createdAt">
142163
<mat-header-cell *matHeaderCellDef mat-sort-header="createdAt"> Created At</mat-header-cell>
@@ -244,21 +265,21 @@
244265
</mat-card-header>
245266
<mat-card-content>
246267
@if (item.kind === 'FILE') {
268+
@if (item.size; as size) {
269+
<p>{{ size | digitalStore }}</p>
270+
}
247271
@if (item.metadata; as metadata) {
248272
@if (metadata.width && metadata.height) {
249273
<code class="fw-light"> W{{ metadata.width }} x H{{ metadata.height }} </code>
250274
}
251275
}
252-
@if (item.size; as size) {
253-
<p>{{ size | digitalStore }}</p>
254-
}
255276
}
256277
<p [matTooltip]="item.updatedAt?.toDate() | date: 'medium'">
257278
{{ item.updatedAt?.toDate() | date: 'mediumDate' }}
258279
</p>
259280
</mat-card-content>
260281
<span class="spacer"></span>
261-
<mat-card-actions>
282+
<mat-card-actions align="end">
262283
<button
263284
mat-icon-button
264285
(click)="onDownload($event, item)"
@@ -288,7 +309,7 @@
288309
</mat-card-actions>
289310
</mat-card>
290311
} @empty {
291-
<div class="text-center align-middle">
312+
<div class="basis-full text-center align-middle">
292313
<br />
293314
<br />
294315
Drag and Drop a file here or use the "Upload Asset" button
@@ -301,7 +322,7 @@
301322
}
302323
</div>
303324
<mat-paginator class="mat-paginator-sticky"></mat-paginator>
304-
@if (fileUploadQueue.length > 0) {
325+
@if (false || fileUploadQueue().length > 0) {
305326
<div class="file-progress-upload">
306327
<mat-card>
307328
<mat-card-header>
@@ -310,7 +331,7 @@
310331
<mat-card-content>
311332
<mat-divider></mat-divider>
312333
<mat-list role="list">
313-
@for (file of fileUploadQueue; track file.name; let idx = $index) {
334+
@for (file of fileUploadQueue(); track file.name; let idx = $index) {
314335
<mat-list-item role="listitem">
315336
{{ file.name.length < 30 ? file.name : file.name.slice(0, 27).concat('...') }}
316337
@if (idx === 0) {

‎src/app/features/spaces/assets/assets.component.ts‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,9 @@ export class AssetsComponent implements OnInit {
5656
private destroyRef = inject(DestroyRef);
5757
dataSource: MatTableDataSource<Asset> = new MatTableDataSource<Asset>([]);
5858
displayedColumns: string[] = [/*'select',*/ 'icon', 'preview', 'name', 'size', 'type', /*'createdAt',*/ 'updatedAt', 'actions'];
59-
selection = new SelectionModel<Asset>(true, []);
59+
selection = new SelectionModel<Asset>(true, [], undefined, (o1, o2) => o1.id === o2.id);
6060
assets: Asset[] = [];
61-
fileUploadQueue: File[] = [];
61+
fileUploadQueue = signal<File[]>([]);
6262
now = Date.now();
6363

6464
get parentPath(): string {
@@ -112,7 +112,10 @@ export class AssetsComponent implements OnInit {
112112
)
113113
.subscribe({
114114
next: () => {
115-
this.fileUploadQueue.shift();
115+
this.fileUploadQueue.update(files => {
116+
files.shift();
117+
return files;
118+
});
116119
},
117120
error: () => {
118121
this.notificationService.error(`Asset can not be uploaded.`);
@@ -126,7 +129,10 @@ export class AssetsComponent implements OnInit {
126129
if (target.files && target.files.length > 0) {
127130
for (let idx = 0; idx < target.files.length; idx++) {
128131
const file = target.files[idx];
129-
this.fileUploadQueue.push(file);
132+
this.fileUploadQueue.update(files => {
133+
files.push(file);
134+
return files;
135+
});
130136
this.fileUploadQueue$.next(file);
131137
}
132138
}
@@ -422,7 +428,10 @@ export class AssetsComponent implements OnInit {
422428

423429
filesDragAndDrop(event: File[]) {
424430
event.forEach(file => {
425-
this.fileUploadQueue.push(file);
431+
this.fileUploadQueue.update(files => {
432+
files.push(file);
433+
return files;
434+
});
426435
this.fileUploadQueue$.next(file);
427436
});
428437
}

‎src/app/features/spaces/contents/contents.component.html‎

Lines changed: 38 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -5,48 +5,49 @@
55
<mat-icon>help</mat-icon>
66
</a>
77
<span class="spacer"></span>
8-
9-
@if ('CONTENT_CREATE' | canUserPerform | async) {
10-
<button mat-stroked-button color="primary" [matMenuTriggerFor]="contentCreateMenu">
11-
<mat-icon>add</mat-icon>
12-
Add Content
13-
</button>
14-
<mat-menu #contentCreateMenu="matMenu">
15-
<button mat-menu-item (click)="openAddDocumentDialog()">
16-
<mat-icon>post_add</mat-icon>
17-
<span>Document</span>
18-
</button>
19-
<button mat-menu-item (click)="openAddFolderDialog()">
20-
<mat-icon>create_new_folder</mat-icon>
21-
<span>Folder</span>
8+
<div class="actions">
9+
@if ('CONTENT_CREATE' | canUserPerform | async) {
10+
<button mat-stroked-button color="primary" [matMenuTriggerFor]="contentCreateMenu">
11+
<mat-icon>add</mat-icon>
12+
Add Content
2213
</button>
23-
</mat-menu>
24-
}
25-
26-
<button mat-icon-button [matMenuTriggerFor]="extraMenu">
27-
<mat-icon>more_vert</mat-icon>
28-
</button>
14+
<mat-menu #contentCreateMenu="matMenu">
15+
<button mat-menu-item (click)="openAddDocumentDialog()">
16+
<mat-icon>post_add</mat-icon>
17+
<span>Document</span>
18+
</button>
19+
<button mat-menu-item (click)="openAddFolderDialog()">
20+
<mat-icon>create_new_folder</mat-icon>
21+
<span>Folder</span>
22+
</button>
23+
</mat-menu>
24+
}
2925

30-
<mat-menu #extraMenu="matMenu">
31-
<button mat-menu-item (click)="openLinksInNewTab()">
32-
<mat-icon>link</mat-icon>
33-
<span>Links</span>
26+
<button mat-icon-button [matMenuTriggerFor]="extraMenu">
27+
<mat-icon>more_vert</mat-icon>
3428
</button>
3529

36-
<mat-divider></mat-divider>
37-
@if ('CONTENT_IMPORT' | canUserPerform | async) {
38-
<button mat-menu-item (click)="openImportDialog()">
39-
<mat-icon>cloud_upload</mat-icon>
40-
<span>Import</span>
30+
<mat-menu #extraMenu="matMenu">
31+
<button mat-menu-item (click)="openLinksInNewTab()">
32+
<mat-icon>link</mat-icon>
33+
<span>Links</span>
4134
</button>
42-
}
43-
@if ('CONTENT_EXPORT' | canUserPerform | async) {
44-
<button mat-menu-item (click)="openExportDialog()">
45-
<mat-icon>cloud_download</mat-icon>
46-
<span>Export</span>
47-
</button>
48-
}
49-
</mat-menu>
35+
36+
<mat-divider></mat-divider>
37+
@if ('CONTENT_IMPORT' | canUserPerform | async) {
38+
<button mat-menu-item (click)="openImportDialog()">
39+
<mat-icon>cloud_upload</mat-icon>
40+
<span>Import</span>
41+
</button>
42+
}
43+
@if ('CONTENT_EXPORT' | canUserPerform | async) {
44+
<button mat-menu-item (click)="openExportDialog()">
45+
<mat-icon>cloud_download</mat-icon>
46+
<span>Export</span>
47+
</button>
48+
}
49+
</mat-menu>
50+
</div>
5051
</mat-toolbar-row>
5152
</mat-toolbar>
5253
@if (isLoading()) {

‎src/app/features/spaces/contents/contents.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export class ContentsComponent {
5252
isLoading = signal(true);
5353
dataSource: MatTableDataSource<Content> = new MatTableDataSource<Content>([]);
5454
displayedColumns: string[] = [/*'select',*/ 'status', 'name', 'slug', 'schema', /*'publishedAt', 'createdAt',*/ 'updatedAt', 'actions'];
55-
selection = new SelectionModel<Content>(true, []);
55+
selection = new SelectionModel<Content>(true, [], undefined, (o1, o2) => o1.id === o2.id);
5656

5757
schemas: Schema[] = [];
5858
schemasMapById: Map<string, Schema> = new Map<string, Schema>();

0 commit comments

Comments
 (0)