Skip to content

Commit

Permalink
Add File Upload From Asset Selector Dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexcibotari
alexcibotari committed Jan 15, 2025
1 parent 04530cf commit 7be850c
Show file tree
Hide file tree
Showing 22 changed files with 290 additions and 223 deletions.
10 changes: 6 additions & 4 deletions src/app/features/admin/settings/ui/ui.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@
<mat-toolbar-row>
User Interface
<span class="spacer"></span>
<button mat-stroked-button color="primary" [disabled]="!form.valid" (click)="save()">
<mat-icon>save</mat-icon>
Save
</button>
<div class="actions">
<button mat-stroked-button color="primary" [disabled]="!form.valid" (click)="save()">
<mat-icon>save</mat-icon>
Save
</button>
</div>
</mat-toolbar-row>
</mat-toolbar>

Expand Down
10 changes: 6 additions & 4 deletions src/app/features/admin/spaces/spaces.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@
<mat-toolbar-row>
Spaces
<span class="spacer"></span>
<button mat-stroked-button color="primary" (click)="openAddDialog()">
<mat-icon>add</mat-icon>
Add Space
</button>
<div class="actions">
<button mat-stroked-button color="primary" (click)="openAddDialog()">
<mat-icon>add</mat-icon>
Add Space
</button>
</div>
</mat-toolbar-row>
</mat-toolbar>
@if (isLoading) {
Expand Down
18 changes: 10 additions & 8 deletions src/app/features/admin/users/users.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,17 @@
<mat-toolbar-row>
Users
<span class="spacer"></span>
<button mat-stroked-button color="accent" matTooltip="Synchronize Users with Database." (click)="sync()">
<ll-icon [animate]="isSyncLoading()" start="sync" end="sync" />
Sync
</button>
<div class="actions">
<button mat-stroked-button color="accent" matTooltip="Synchronize Users with Database." (click)="sync()">
<ll-icon [animate]="isSyncLoading()" start="sync" end="sync" />
Sync
</button>

<button mat-stroked-button color="primary" (click)="inviteDialog()">
<mat-icon>person_add</mat-icon>
Invite
</button>
<button mat-stroked-button color="primary" (click)="inviteDialog()">
<mat-icon>person_add</mat-icon>
Invite
</button>
</div>
</mat-toolbar-row>
</mat-toolbar>
@if (isLoading()) {
Expand Down
119 changes: 70 additions & 49 deletions src/app/features/spaces/assets/assets.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,50 +5,55 @@
<mat-icon>help</mat-icon>
</a>
<span class="spacer"></span>
<mat-button-toggle-group
hideSingleSelectionIndicator="true"
(change)="settingsStore.setAssetLayout($event.value)"
[value]="settingsStore.assetLayout()">
<mat-button-toggle value="list" matTooltip="List Layout">
<mat-icon>view_list</mat-icon>
</mat-button-toggle>
<mat-button-toggle value="grid" matTooltip="Grid Layout">
<mat-icon>grid_view</mat-icon>
</mat-button-toggle>
</mat-button-toggle-group>
@if ('ASSET_CREATE' | canUserPerform | async) {
<button mat-stroked-button color="primary" (click)="fileInput.click()">
<mat-icon>upload_file</mat-icon>
Upload Assets
</button>
<input hidden type="file" multiple #fileInput (change)="onFileUpload($event)" />

<button mat-stroked-button color="primary" (click)="openAddFolderDialog()">
<mat-icon>add</mat-icon>
Create Folder
</button>
}

@if (['ASSET_IMPORT', 'ASSET_EXPORT'] | canUserPerform | async) {
<button mat-icon-button [matMenuTriggerFor]="extraMenu">
<mat-icon>more_vert</mat-icon>
</button>
}
<div class="actions">
@if (fileUploadQueue().length > 0) {
<ll-icon [animate]="true" start="save" end="progress_activity" [matBadge]="fileUploadQueue().length" />
}
<mat-button-toggle-group
hideSingleSelectionIndicator="true"
(change)="settingsStore.setAssetLayout($event.value)"
[value]="settingsStore.assetLayout()">
<mat-button-toggle value="list" matTooltip="List Layout">
<mat-icon>view_list</mat-icon>
</mat-button-toggle>
<mat-button-toggle value="grid" matTooltip="Grid Layout">
<mat-icon>grid_view</mat-icon>
</mat-button-toggle>
</mat-button-toggle-group>
@if ('ASSET_CREATE' | canUserPerform | async) {
<button mat-stroked-button color="primary" (click)="fileInput.click()">
<mat-icon>upload_file</mat-icon>
Upload Assets
</button>
<input hidden type="file" multiple #fileInput (change)="onFileUpload($event)" />

<mat-menu #extraMenu="matMenu">
@if ('ASSET_IMPORT' | canUserPerform | async) {
<button mat-menu-item (click)="openImportDialog()">
<mat-icon>cloud_upload</mat-icon>
<span>Import</span>
<button mat-stroked-button color="primary" (click)="openAddFolderDialog()">
<mat-icon>add</mat-icon>
Create Folder
</button>
}
@if ('ASSET_EXPORT' | canUserPerform | async) {
<button mat-menu-item (click)="openExportDialog()">
<mat-icon>cloud_download</mat-icon>
<span>Export</span>

@if (['ASSET_IMPORT', 'ASSET_EXPORT'] | canUserPerform | async) {
<button mat-icon-button [matMenuTriggerFor]="extraMenu">
<mat-icon>more_vert</mat-icon>
</button>
}
</mat-menu>

<mat-menu #extraMenu="matMenu">
@if ('ASSET_IMPORT' | canUserPerform | async) {
<button mat-menu-item (click)="openImportDialog()">
<mat-icon>cloud_upload</mat-icon>
<span>Import</span>
</button>
}
@if ('ASSET_EXPORT' | canUserPerform | async) {
<button mat-menu-item (click)="openExportDialog()">
<mat-icon>cloud_download</mat-icon>
<span>Export</span>
</button>
}
</mat-menu>
</div>
</mat-toolbar-row>
</mat-toolbar>
@if (isLoading()) {
Expand Down Expand Up @@ -131,12 +136,28 @@
</mat-cell>
</ng-container>
<ng-container matColumnDef="size">
<mat-header-cell *matHeaderCellDef mat-sort-header="size"> Size</mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.size | digitalStore }}</mat-cell>
<mat-header-cell *matHeaderCellDef mat-sort-header="size"> File Size</mat-header-cell>
<mat-cell *matCellDef="let element">
@if (element.size) {
{{ element.size | digitalStore }}
} @else {
<mat-icon>remove</mat-icon>
}
</mat-cell>
</ng-container>
<ng-container matColumnDef="type">
<mat-header-cell *matHeaderCellDef mat-sort-header="type"> Type</mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.type }}</mat-cell>
<mat-cell *matCellDef="let element">
@if (element.kind === 'FILE') {
@if (element.type) {
{{ element.type }}
} @else {
unknown
}
} @else {
Folder
}
</mat-cell>
</ng-container>
<ng-container matColumnDef="createdAt">
<mat-header-cell *matHeaderCellDef mat-sort-header="createdAt"> Created At</mat-header-cell>
Expand Down Expand Up @@ -244,21 +265,21 @@
</mat-card-header>
<mat-card-content>
@if (item.kind === 'FILE') {
@if (item.size; as size) {
<p>{{ size | digitalStore }}</p>
}
@if (item.metadata; as metadata) {
@if (metadata.width && metadata.height) {
<code class="fw-light"> W{{ metadata.width }} x H{{ metadata.height }} </code>
}
}
@if (item.size; as size) {
<p>{{ size | digitalStore }}</p>
}
}
<p [matTooltip]="item.updatedAt?.toDate() | date: 'medium'">
{{ item.updatedAt?.toDate() | date: 'mediumDate' }}
</p>
</mat-card-content>
<span class="spacer"></span>
<mat-card-actions>
<mat-card-actions align="end">
<button
mat-icon-button
(click)="onDownload($event, item)"
Expand Down Expand Up @@ -288,7 +309,7 @@
</mat-card-actions>
</mat-card>
} @empty {
<div class="text-center align-middle">
<div class="basis-full text-center align-middle">
<br />
<br />
Drag and Drop a file here or use the "Upload Asset" button
Expand All @@ -301,7 +322,7 @@
}
</div>
<mat-paginator class="mat-paginator-sticky"></mat-paginator>
@if (fileUploadQueue.length > 0) {
@if (false || fileUploadQueue().length > 0) {
<div class="file-progress-upload">
<mat-card>
<mat-card-header>
Expand All @@ -310,7 +331,7 @@
<mat-card-content>
<mat-divider></mat-divider>
<mat-list role="list">
@for (file of fileUploadQueue; track file.name; let idx = $index) {
@for (file of fileUploadQueue(); track file.name; let idx = $index) {
<mat-list-item role="listitem">
{{ file.name.length < 30 ? file.name : file.name.slice(0, 27).concat('...') }}
@if (idx === 0) {
Expand Down
19 changes: 14 additions & 5 deletions src/app/features/spaces/assets/assets.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,9 @@ export class AssetsComponent implements OnInit {
private destroyRef = inject(DestroyRef);
dataSource: MatTableDataSource<Asset> = new MatTableDataSource<Asset>([]);
displayedColumns: string[] = [/*'select',*/ 'icon', 'preview', 'name', 'size', 'type', /*'createdAt',*/ 'updatedAt', 'actions'];
selection = new SelectionModel<Asset>(true, []);
selection = new SelectionModel<Asset>(true, [], undefined, (o1, o2) => o1.id === o2.id);
assets: Asset[] = [];
fileUploadQueue: File[] = [];
fileUploadQueue = signal<File[]>([]);
now = Date.now();

get parentPath(): string {
Expand Down Expand Up @@ -112,7 +112,10 @@ export class AssetsComponent implements OnInit {
)
.subscribe({
next: () => {
this.fileUploadQueue.shift();
this.fileUploadQueue.update(files => {
files.shift();
return files;
});
},
error: () => {
this.notificationService.error(`Asset can not be uploaded.`);
Expand All @@ -126,7 +129,10 @@ export class AssetsComponent implements OnInit {
if (target.files && target.files.length > 0) {
for (let idx = 0; idx < target.files.length; idx++) {
const file = target.files[idx];
this.fileUploadQueue.push(file);
this.fileUploadQueue.update(files => {
files.push(file);
return files;
});
this.fileUploadQueue$.next(file);
}
}
Expand Down Expand Up @@ -422,7 +428,10 @@ export class AssetsComponent implements OnInit {

filesDragAndDrop(event: File[]) {
event.forEach(file => {
this.fileUploadQueue.push(file);
this.fileUploadQueue.update(files => {
files.push(file);
return files;
});
this.fileUploadQueue$.next(file);
});
}
Expand Down
75 changes: 38 additions & 37 deletions src/app/features/spaces/contents/contents.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,48 +5,49 @@
<mat-icon>help</mat-icon>
</a>
<span class="spacer"></span>

@if ('CONTENT_CREATE' | canUserPerform | async) {
<button mat-stroked-button color="primary" [matMenuTriggerFor]="contentCreateMenu">
<mat-icon>add</mat-icon>
Add Content
</button>
<mat-menu #contentCreateMenu="matMenu">
<button mat-menu-item (click)="openAddDocumentDialog()">
<mat-icon>post_add</mat-icon>
<span>Document</span>
</button>
<button mat-menu-item (click)="openAddFolderDialog()">
<mat-icon>create_new_folder</mat-icon>
<span>Folder</span>
<div class="actions">
@if ('CONTENT_CREATE' | canUserPerform | async) {
<button mat-stroked-button color="primary" [matMenuTriggerFor]="contentCreateMenu">
<mat-icon>add</mat-icon>
Add Content
</button>
</mat-menu>
}

<button mat-icon-button [matMenuTriggerFor]="extraMenu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #contentCreateMenu="matMenu">
<button mat-menu-item (click)="openAddDocumentDialog()">
<mat-icon>post_add</mat-icon>
<span>Document</span>
</button>
<button mat-menu-item (click)="openAddFolderDialog()">
<mat-icon>create_new_folder</mat-icon>
<span>Folder</span>
</button>
</mat-menu>
}

<mat-menu #extraMenu="matMenu">
<button mat-menu-item (click)="openLinksInNewTab()">
<mat-icon>link</mat-icon>
<span>Links</span>
<button mat-icon-button [matMenuTriggerFor]="extraMenu">
<mat-icon>more_vert</mat-icon>
</button>

<mat-divider></mat-divider>
@if ('CONTENT_IMPORT' | canUserPerform | async) {
<button mat-menu-item (click)="openImportDialog()">
<mat-icon>cloud_upload</mat-icon>
<span>Import</span>
<mat-menu #extraMenu="matMenu">
<button mat-menu-item (click)="openLinksInNewTab()">
<mat-icon>link</mat-icon>
<span>Links</span>
</button>
}
@if ('CONTENT_EXPORT' | canUserPerform | async) {
<button mat-menu-item (click)="openExportDialog()">
<mat-icon>cloud_download</mat-icon>
<span>Export</span>
</button>
}
</mat-menu>

<mat-divider></mat-divider>
@if ('CONTENT_IMPORT' | canUserPerform | async) {
<button mat-menu-item (click)="openImportDialog()">
<mat-icon>cloud_upload</mat-icon>
<span>Import</span>
</button>
}
@if ('CONTENT_EXPORT' | canUserPerform | async) {
<button mat-menu-item (click)="openExportDialog()">
<mat-icon>cloud_download</mat-icon>
<span>Export</span>
</button>
}
</mat-menu>
</div>
</mat-toolbar-row>
</mat-toolbar>
@if (isLoading()) {
Expand Down
2 changes: 1 addition & 1 deletion src/app/features/spaces/contents/contents.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export class ContentsComponent {
isLoading = signal(true);
dataSource: MatTableDataSource<Content> = new MatTableDataSource<Content>([]);
displayedColumns: string[] = [/*'select',*/ 'status', 'name', 'slug', 'schema', /*'publishedAt', 'createdAt',*/ 'updatedAt', 'actions'];
selection = new SelectionModel<Content>(true, []);
selection = new SelectionModel<Content>(true, [], undefined, (o1, o2) => o1.id === o2.id);

schemas: Schema[] = [];
schemasMapById: Map<string, Schema> = new Map<string, Schema>();
Expand Down
Loading

0 comments on commit 7be850c

Please sign in to comment.