diff --git a/backend/i18n/frontend_en.json b/backend/i18n/frontend_en.json index 721b55fdf..0898103a9 100644 --- a/backend/i18n/frontend_en.json +++ b/backend/i18n/frontend_en.json @@ -246,6 +246,7 @@ "common.field": "Field", "common.files": "Files", "common.filters": "Filters", + "common.folder": "Folder", "common.folders": "Folders", "common.generalSettings": "Common", "common.generate": "Generate", diff --git a/backend/i18n/frontend_it.json b/backend/i18n/frontend_it.json index e79f979e9..a10b1c580 100644 --- a/backend/i18n/frontend_it.json +++ b/backend/i18n/frontend_it.json @@ -246,6 +246,7 @@ "common.field": "Campo", "common.files": "Campi", "common.filters": "Filtri", + "common.folder": "Folder", "common.folders": "Cartelle", "common.generalSettings": "Impostazioni generali", "common.generate": "Genera", diff --git a/backend/i18n/frontend_nl.json b/backend/i18n/frontend_nl.json index 72e4ceb2c..b659aab99 100644 --- a/backend/i18n/frontend_nl.json +++ b/backend/i18n/frontend_nl.json @@ -246,6 +246,7 @@ "common.field": "Veld", "common.files": "Bestanden", "common.filters": "Filters", + "common.folder": "Folder", "common.folders": "Mappen", "common.generalSettings": "Algemeen", "common.generate": "Genereren", diff --git a/backend/i18n/source/frontend_en.json b/backend/i18n/source/frontend_en.json index 721b55fdf..0898103a9 100644 --- a/backend/i18n/source/frontend_en.json +++ b/backend/i18n/source/frontend_en.json @@ -246,6 +246,7 @@ "common.field": "Field", "common.files": "Files", "common.filters": "Filters", + "common.folder": "Folder", "common.folders": "Folders", "common.generalSettings": "Common", "common.generate": "Generate", diff --git a/frontend/app/shared/components/assets/asset-dialog.component.html b/frontend/app/shared/components/assets/asset-dialog.component.html index dcb949266..b07ce7203 100644 --- a/frontend/app/shared/components/assets/asset-dialog.component.html +++ b/frontend/app/shared/components/assets/asset-dialog.component.html @@ -33,7 +33,11 @@
- +
@@ -43,15 +47,28 @@
- +
+
+
+ + +
+ +
+
+
@@ -66,6 +83,21 @@
+ +
+ + +
+
+ +
+
+ +
+
+
diff --git a/frontend/app/shared/components/assets/asset-dialog.component.scss b/frontend/app/shared/components/assets/asset-dialog.component.scss index cdb623fee..520f2044b 100644 --- a/frontend/app/shared/components/assets/asset-dialog.component.scss +++ b/frontend/app/shared/components/assets/asset-dialog.component.scss @@ -22,16 +22,20 @@ } } -.invisible { - visibility: hidden; -} - .metadata { margin: 1rem auto; max-width: 500px; min-width: 0; } +.invisible { + visibility: hidden; +} + +.path { + min-height: 2.5rem; +} + .slug { padding-right: 6rem; } diff --git a/frontend/app/shared/components/assets/asset-dialog.component.ts b/frontend/app/shared/components/assets/asset-dialog.component.ts index 930950596..0d8e7cd58 100644 --- a/frontend/app/shared/components/assets/asset-dialog.component.ts +++ b/frontend/app/shared/components/assets/asset-dialog.component.ts @@ -7,7 +7,11 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output, QueryList, ViewChildren } from '@angular/core'; import { FormBuilder } from '@angular/forms'; -import { AnnotateAssetDto, AnnotateAssetForm, AssetDto, AssetsState, AssetUploaderState, AuthService, DialogService, Types, UploadCanceled } from '@app/shared/internal'; +import { AnnotateAssetDto, AnnotateAssetForm, AppsState, AssetDto, AssetsState, AssetUploaderState, AuthService, DialogService, Types, UploadCanceled } from '@app/shared/internal'; +import { AssetsService } from '@app/shared/services/assets.service'; +import { AssetPathItem, ROOT_ITEM } from '@app/shared/state/assets.state'; +import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; import { ImageCropperComponent } from './image-cropper.component'; import { ImageFocusPointComponent } from './image-focus-point.component'; @@ -48,6 +52,8 @@ export class AssetDialogComponent implements OnChanges { @ViewChildren(ImageFocusPointComponent) public imageFocus: QueryList; + public path: Observable>; + public isEditable = false; public isEditableAny = false; public isUploadable = false; @@ -60,8 +66,10 @@ export class AssetDialogComponent implements OnChanges { public annotateForm = new AnnotateAssetForm(this.formBuilder); constructor( + private readonly appsState: AppsState, private readonly assetsState: AssetsState, private readonly assetUploader: AssetUploaderState, + private readonly assetsService: AssetsService, private readonly changeDetector: ChangeDetectorRef, private readonly dialogs: DialogService, private readonly formBuilder: FormBuilder, @@ -85,6 +93,14 @@ export class AssetDialogComponent implements OnChanges { if (this.selectableTabs.indexOf(this.selectedTab) < 0) { this.selectTab(this.selectableTabs[0]); } + + this.path = + this.assetsService.getAssetFolders(this.appsState.appName, this.asset.parentId).pipe( + map(folders => [ROOT_ITEM, ...folders.path])); + } + + public navigate(id: string) { + this.assetsState.navigate(id); } public selectTab(tab: string) { diff --git a/frontend/app/shared/components/assets/asset-path.component.html b/frontend/app/shared/components/assets/asset-path.component.html index 5c1283e0f..a5d962109 100644 --- a/frontend/app/shared/components/assets/asset-path.component.html +++ b/frontend/app/shared/components/assets/asset-path.component.html @@ -1,12 +1,14 @@ - - {{ 'common.searchResults' | sqxTranslate }} - - - - - - - {{item.folderName | sqxTranslate}} - + + + {{ 'common.searchResults' | sqxTranslate }} - \ No newline at end of file + + + + + + {{item.folderName | sqxTranslate}} + + + + \ No newline at end of file diff --git a/frontend/app/shared/components/assets/asset-path.component.scss b/frontend/app/shared/components/assets/asset-path.component.scss index 2ef6a98f9..bc61d977b 100644 --- a/frontend/app/shared/components/assets/asset-path.component.scss +++ b/frontend/app/shared/components/assets/asset-path.component.scss @@ -1,3 +1,7 @@ i { vertical-align: middle; +} + +.first { + padding-left: 0; } \ No newline at end of file diff --git a/frontend/app/shared/components/assets/asset-path.component.ts b/frontend/app/shared/components/assets/asset-path.component.ts index 0858b5b60..54eba861d 100644 --- a/frontend/app/shared/components/assets/asset-path.component.ts +++ b/frontend/app/shared/components/assets/asset-path.component.ts @@ -19,5 +19,8 @@ export class AssetPathComponent { public navigate = new EventEmitter(); @Input() - public path: ReadonlyArray; + public path?: ReadonlyArray; + + @Input() + public all = false; } \ No newline at end of file diff --git a/frontend/app/shared/components/assets/asset-uploader.component.html b/frontend/app/shared/components/assets/asset-uploader.component.html index 6fc1628c0..9cf71637f 100644 --- a/frontend/app/shared/components/assets/asset-uploader.component.html +++ b/frontend/app/shared/components/assets/asset-uploader.component.html @@ -31,7 +31,13 @@
{{upload.name}}
- + +
- +
diff --git a/frontend/app/shared/components/assets/asset.component.scss b/frontend/app/shared/components/assets/asset.component.scss index f82c6d702..8f4396081 100644 --- a/frontend/app/shared/components/assets/asset.component.scss +++ b/frontend/app/shared/components/assets/asset.component.scss @@ -235,6 +235,10 @@ $list-height: 2.25rem; } &-actions { + width: 6rem; + } + + &-delete { width: 3rem; } diff --git a/frontend/app/shared/components/assets/asset.component.ts b/frontend/app/shared/components/assets/asset.component.ts index 56f9bc137..c905858c1 100644 --- a/frontend/app/shared/components/assets/asset.component.ts +++ b/frontend/app/shared/components/assets/asset.component.ts @@ -30,6 +30,9 @@ export class AssetComponent implements OnInit { @Output() public select = new EventEmitter(); + @Output() + public selectFolder = new EventEmitter(); + @Input() public assetFile: File; diff --git a/frontend/app/shared/components/assets/assets-list.component.html b/frontend/app/shared/components/assets/assets-list.component.html index 7c9a46622..b2657ddf9 100644 --- a/frontend/app/shared/components/assets/assets-list.component.html +++ b/frontend/app/shared/components/assets/assets-list.component.html @@ -78,7 +78,8 @@ [isSelectable]="!!selectedIds" [isSelected]="isSelected(asset)" [allTags]="tags" - (select)="select.emit(asset)" (delete)="deleteAsset(asset)"> + (select)="select.emit(asset)" (delete)="deleteAsset(asset)" + (selectFolder)="selectFolder(asset)">
diff --git a/frontend/app/shared/components/assets/assets-list.component.ts b/frontend/app/shared/components/assets/assets-list.component.ts index 5c27905f8..93bdf9613 100644 --- a/frontend/app/shared/components/assets/assets-list.component.ts +++ b/frontend/app/shared/components/assets/assets-list.component.ts @@ -70,6 +70,10 @@ export class AssetsListComponent { } } + public selectFolder(asset: AssetDto) { + this.state.navigate(asset.parentId); + } + public deleteAsset(asset: AssetDto) { this.state.deleteAsset(asset); } diff --git a/frontend/app/shared/components/assets/pipes.ts b/frontend/app/shared/components/assets/pipes.ts index d8b26e10f..e55fddc15 100644 --- a/frontend/app/shared/components/assets/pipes.ts +++ b/frontend/app/shared/components/assets/pipes.ts @@ -18,10 +18,12 @@ export class AssetUrlPipe implements PipeTransform { ) { } - public transform(asset: AssetDto, version?: number): string { + public transform(asset: AssetDto, version?: number, withQuery = false): string { let url = asset.fullUrl(this.apiUrl); - url = StringHelper.appendToUrl(url, 'sq', MathHelper.guid()); + if (withQuery) { + url = StringHelper.appendToUrl(url, 'sq', MathHelper.guid()); + } if (Types.isNumber(version)) { url = StringHelper.appendToUrl(url, 'version', version); diff --git a/frontend/app/shared/state/assets.state.ts b/frontend/app/shared/state/assets.state.ts index 74c34fb4a..f654c72db 100644 --- a/frontend/app/shared/state/assets.state.ts +++ b/frontend/app/shared/state/assets.state.ts @@ -21,7 +21,7 @@ export type Tag = { name: string, count: number; }; const EMPTY_FOLDERS: { canCreate: boolean, items: ReadonlyArray, path?: ReadonlyArray } = { canCreate: false, items: [] }; -const ROOT_ITEM: AssetPathItem = { id: MathHelper.EMPTY_GUID, folderName: 'i18n:assets.specialFolder.root' }; +export const ROOT_ITEM: AssetPathItem = { id: MathHelper.EMPTY_GUID, folderName: 'i18n:assets.specialFolder.root' }; interface Snapshot { // All assets tags. @@ -367,7 +367,7 @@ export class AssetsState extends State { } public navigate(parentId: string) { - this.next({ parentId }); + this.next({ parentId, assetsQuery: undefined, tagsSelected: {} }); return this.loadInternal(false); }