Skip to content

Commit 4f62983

Browse files
nmykhalkevch-exoftnsemets
nmykhalkevch-exoft
and
nsemets
authored
Feat/550 file widget (#323)
* feat(file): file-widget * feat(file): fixed move file * Update src/app/features/project/overview/components/files-widget/files-widget.component.html Co-authored-by: nsemets <nsemets@exoft.net> * feat(file): resolve comments * feat(file): refactoring * feat(file): remove sorting storage * feat(file): navigate to file --------- Co-authored-by: nsemets <nsemets@exoft.net>
1 parent 7eaa041 commit 4f62983

File tree

48 files changed

+697
-230
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+697
-230
lines changed

‎src/app/features/files/components/move-file-dialog/move-file-dialog.component.html‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,11 @@
55
} @else {
66
<div class="flex flex-column gap-2">
77
<div class="flex gap-2">
8-
<img [ngSrc]="'assets/icons/colored/cos-shield.svg'" width="24" height="24" alt="cost-shield" />
9-
<h2 class="font-normal">{{ 'files.dialogs.moveFile.storage' | translate }}</h2>
8+
<h2 class="font-normal">{{ storageName }}</h2>
109
</div>
1110

1211
<div class="files-table flex flex-column">
13-
@if (currentFolder()?.relationships?.parentFolderLink) {
12+
@if (previousFolder) {
1413
<div class="files-table-row py-2 px-3">
1514
<div
1615
tabindex="0"
@@ -26,10 +25,7 @@ <h2 class="font-normal">{{ 'files.dialogs.moveFile.storage' | translate }}</h2>
2625
}
2726

2827
@for (file of files(); track $index) {
29-
<div
30-
class="files-table-row flex align-items-center py-2"
31-
[class]="currentFolder()?.relationships?.parentFolderLink ? 'pl-6' : 'px-3'"
32-
>
28+
<div class="files-table-row flex align-items-center py-2" [class]="foldersStack.length ? 'pl-6' : 'px-3'">
3329
<div class="flex align-items-center gap-2">
3430
@if (file.kind !== 'folder') {
3531
<osf-icon class="disabled-icon" iconClass="fas fa-file disabled-icon"></osf-icon>
@@ -55,6 +51,14 @@ <h2 class="font-normal">{{ 'files.dialogs.moveFile.storage' | translate }}</h2>
5551
</div>
5652
</div>
5753
}
54+
@if (filesTotalCount() > itemsPerPage) {
55+
<osf-custom-paginator
56+
class="mt-1 border-top-1 border-200"
57+
[first]="first"
58+
[totalCount]="filesTotalCount()"
59+
(pageChanged)="onFilesPageChange($event)"
60+
/>
61+
}
5862
@if (!files().length) {
5963
<div class="flex justify-content-center p-4">
6064
<h3 class="font-normal text-no-transform">{{ 'files.emptyState' | translate }}</h3>

‎src/app/features/files/components/move-file-dialog/move-file-dialog.component.ts‎

Lines changed: 65 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import { TranslatePipe, TranslateService } from '@ngx-translate/core';
44

55
import { Button } from 'primeng/button';
66
import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
7+
import { PaginatorState } from 'primeng/paginator';
78
import { Tooltip } from 'primeng/tooltip';
89

9-
import { finalize, take, throwError } from 'rxjs';
10+
import { finalize, throwError } from 'rxjs';
1011
import { catchError } from 'rxjs/operators';
1112

12-
import { NgOptimizedImage } from '@angular/common';
13-
import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
13+
import { ChangeDetectionStrategy, Component, computed, DestroyRef, effect, inject, signal } from '@angular/core';
1414
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
1515

1616
import {
@@ -21,13 +21,13 @@ import {
2121
SetCurrentFolder,
2222
SetMoveFileCurrentFolder,
2323
} from '@osf/features/files/store';
24-
import { IconComponent, LoadingSpinnerComponent } from '@shared/components';
24+
import { CustomPaginatorComponent, IconComponent, LoadingSpinnerComponent } from '@shared/components';
2525
import { OsfFile } from '@shared/models';
2626
import { FilesService, ToastService } from '@shared/services';
2727

2828
@Component({
2929
selector: 'osf-move-file-dialog',
30-
imports: [Button, LoadingSpinnerComponent, NgOptimizedImage, Tooltip, TranslatePipe, IconComponent],
30+
imports: [Button, LoadingSpinnerComponent, Tooltip, TranslatePipe, IconComponent, CustomPaginatorComponent],
3131
templateUrl: './move-file-dialog.component.html',
3232
styleUrl: './move-file-dialog.component.scss',
3333
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -41,64 +41,83 @@ export class MoveFileDialogComponent {
4141
private readonly translateService = inject(TranslateService);
4242
private readonly toastService = inject(ToastService);
4343

44-
protected readonly files = select(FilesSelectors.getMoveFileFiles);
45-
protected readonly isLoading = select(FilesSelectors.isMoveFileFilesLoading);
46-
protected readonly currentFolder = select(FilesSelectors.getMoveFileCurrentFolder);
47-
private readonly rootFolders = select(FilesSelectors.getRootFolders);
48-
protected readonly isFilesUpdating = signal(false);
49-
protected readonly isFolderSame = computed(() => {
44+
readonly files = select(FilesSelectors.getMoveFileFiles);
45+
readonly filesTotalCount = select(FilesSelectors.getMoveFileFilesTotalCount);
46+
readonly isLoading = select(FilesSelectors.isMoveFileFilesLoading);
47+
readonly currentFolder = select(FilesSelectors.getMoveFileCurrentFolder);
48+
readonly isFilesUpdating = signal(false);
49+
readonly rootFolders = select(FilesSelectors.getRootFolders);
50+
51+
readonly isFolderSame = computed(() => {
5052
return this.currentFolder()?.id === this.config.data.file.relationships.parentFolderId;
5153
});
52-
protected readonly provider = select(FilesSelectors.getProvider);
5354

54-
protected readonly dispatch = createDispatchMap({
55+
readonly storageName =
56+
this.config.data.storageName || this.translateService.instant('files.dialogs.moveFile.osfStorage');
57+
58+
readonly provider = select(FilesSelectors.getProvider);
59+
60+
readonly dispatch = createDispatchMap({
5561
getMoveFileFiles: GetMoveFileFiles,
5662
setMoveFileCurrentFolder: SetMoveFileCurrentFolder,
5763
setCurrentFolder: SetCurrentFolder,
5864
getFiles: GetFiles,
5965
getRootFolderFiles: GetRootFolderFiles,
6066
});
6167

68+
foldersStack: OsfFile[] = this.config.data.foldersStack ?? [];
69+
previousFolder: OsfFile | null = null;
70+
71+
pageNumber = signal(1);
72+
73+
itemsPerPage = 10;
74+
first = 0;
75+
filesLink = '';
76+
6277
constructor() {
63-
const filesLink = this.currentFolder()?.relationships.filesLink;
78+
this.initPreviousFolder();
79+
const filesLink = this.currentFolder()?.relationships?.filesLink;
6480
const rootFolders = this.rootFolders();
65-
if (filesLink) {
66-
this.dispatch.getMoveFileFiles(filesLink);
67-
} else if (rootFolders) {
68-
this.dispatch.getMoveFileFiles(rootFolders[0].relationships.filesLink);
81+
this.filesLink = filesLink ?? rootFolders?.[0].relationships?.filesLink ?? '';
82+
if (this.filesLink) {
83+
this.dispatch.getMoveFileFiles(this.filesLink, this.pageNumber());
84+
}
85+
86+
effect(() => {
87+
const page = this.pageNumber();
88+
if (this.filesLink) {
89+
this.dispatch.getMoveFileFiles(this.filesLink, page);
90+
}
91+
});
92+
}
93+
94+
initPreviousFolder() {
95+
const foldersStack = this.foldersStack;
96+
if (foldersStack.length === 0) {
97+
this.previousFolder = null;
98+
} else {
99+
this.previousFolder = foldersStack[foldersStack.length - 1];
69100
}
70101
}
71102

72103
openFolder(file: OsfFile) {
73104
if (file.kind !== 'folder') return;
74-
105+
const current = this.currentFolder();
106+
if (current) {
107+
this.previousFolder = current;
108+
this.foldersStack.push(current);
109+
}
75110
this.dispatch.getMoveFileFiles(file.relationships.filesLink);
76111
this.dispatch.setMoveFileCurrentFolder(file);
77112
}
78113

79114
openParentFolder() {
80-
const currentFolder = this.currentFolder();
81-
82-
if (!currentFolder) return;
83-
84-
this.isFilesUpdating.set(true);
85-
this.filesService
86-
.getFolder(currentFolder.relationships.parentFolderLink)
87-
.pipe(
88-
take(1),
89-
takeUntilDestroyed(this.destroyRef),
90-
finalize(() => {
91-
this.isFilesUpdating.set(false);
92-
}),
93-
catchError((error) => {
94-
this.toastService.showError(error.error.message);
95-
return throwError(() => error);
96-
})
97-
)
98-
.subscribe((folder) => {
99-
this.dispatch.setMoveFileCurrentFolder(folder);
100-
this.dispatch.getMoveFileFiles(folder.relationships.filesLink);
101-
});
115+
const previous = this.foldersStack.pop() ?? null;
116+
this.previousFolder = this.foldersStack.length > 0 ? this.foldersStack[this.foldersStack.length - 1] : null;
117+
if (previous) {
118+
this.dispatch.setMoveFileCurrentFolder(previous);
119+
this.dispatch.getMoveFileFiles(previous.relationships.filesLink);
120+
}
102121
}
103122

104123
moveFile(): void {
@@ -148,4 +167,9 @@ export class MoveFileDialogComponent {
148167
}
149168
});
150169
}
170+
171+
onFilesPageChange(event: PaginatorState): void {
172+
this.pageNumber.set(event.page! + 1);
173+
this.first = event.first!;
174+
}
151175
}

‎src/app/features/files/constants/file-provider.constants.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export const FileProvider = {
22
OsfStorage: 'osfstorage',
3-
GoogleDrive: 'google-drive',
3+
GoogleDrive: 'googledrive',
44
Box: 'box',
55
DropBox: 'dropbox',
66
OneDrive: 'onedrive',

‎src/app/features/files/pages/files/files.component.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<osf-sub-header [title]="'files.title' | translate"></osf-sub-header>
1+
<osf-sub-header [title]="'navigation.files' | translate"></osf-sub-header>
22

33
@if (!dataLoaded()) {
44
<osf-loading-spinner></osf-loading-spinner>
@@ -24,7 +24,7 @@
2424
<p class="provider-name">{{ option.label }}</p>
2525
</ng-template>
2626
</p-select>
27-
<label for="in_label">{{ 'files.storageLocation' | translate }}</label>
27+
<label for="in_label">{{ currentRootFolder()?.label }}</label>
2828
</p-floatlabel>
2929
</div>
3030

@@ -124,7 +124,9 @@
124124

125125
<osf-files-tree
126126
[files]="files()"
127+
[totalCount]="filesTotalCount()"
127128
[currentFolder]="currentFolder()"
129+
[storage]="currentRootFolder()"
128130
[isLoading]="isFilesLoading()"
129131
[actions]="filesTreeActions"
130132
[viewOnly]="isViewOnly()"
@@ -134,6 +136,7 @@
134136
(folderIsOpening)="folderIsOpening($event)"
135137
(entryFileClicked)="navigateToFile($event)"
136138
(uploadFileConfirmed)="uploadFile($event)"
139+
(filesPageChange)="onFilesPageChange($event)"
137140
>
138141
</osf-files-tree>
139142
</div>

0 commit comments

Comments
 (0)