optimise breakpoint observer

This commit is contained in:
Denys Vuika
2023-05-06 12:46:35 +01:00
parent 684e8667ce
commit 2def30ec63
10 changed files with 26 additions and 102 deletions

View File

@@ -22,7 +22,6 @@
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>. * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
*/ */
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { SiteEntry, FavoritePaging, Pagination } from '@alfresco/js-api'; import { SiteEntry, FavoritePaging, Pagination } from '@alfresco/js-api';
import { AppHookService, ContentApiService, PageComponent } from '@alfresco/aca-shared'; import { AppHookService, ContentApiService, PageComponent } from '@alfresco/aca-shared';
@@ -41,13 +40,11 @@ export class FavoriteLibrariesComponent extends PageComponent implements OnInit
}); });
isLoading = false; isLoading = false;
list: FavoritePaging; list: FavoritePaging;
isSmallScreen = false;
columns: DocumentListPresetRef[] = []; columns: DocumentListPresetRef[] = [];
constructor( constructor(
private appHookService: AppHookService, private appHookService: AppHookService,
private contentApiService: ContentApiService, private contentApiService: ContentApiService,
private breakpointObserver: BreakpointObserver,
private preferences: UserPreferencesService, private preferences: UserPreferencesService,
private changeDetectorRef: ChangeDetectorRef private changeDetectorRef: ChangeDetectorRef
) { ) {
@@ -64,11 +61,7 @@ export class FavoriteLibrariesComponent extends PageComponent implements OnInit
this.appHookService.libraryUpdated.subscribe(() => this.reloadList()), this.appHookService.libraryUpdated.subscribe(() => this.reloadList()),
this.appHookService.libraryJoined.subscribe(() => this.reloadList()), this.appHookService.libraryJoined.subscribe(() => this.reloadList()),
this.appHookService.libraryLeft.subscribe(() => this.reloadList()), this.appHookService.libraryLeft.subscribe(() => this.reloadList()),
this.appHookService.favoriteLibraryToggle.subscribe(() => this.reloadList()), this.appHookService.favoriteLibraryToggle.subscribe(() => this.reloadList())
this.breakpointObserver.observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape]).subscribe((result) => {
this.isSmallScreen = result.matches;
})
]); ]);
this.columns = this.extensions.documentListPresets.favoriteLibraries || []; this.columns = this.extensions.documentListPresets.favoriteLibraries || [];
} }

View File

@@ -25,7 +25,6 @@
import { ContentApiService, PageComponent } from '@alfresco/aca-shared'; import { ContentApiService, PageComponent } from '@alfresco/aca-shared';
import { UploadService } from '@alfresco/adf-content-services'; import { UploadService } from '@alfresco/adf-content-services';
import { MinimalNodeEntity, MinimalNodeEntryEntity, PathElementEntity, PathInfo } from '@alfresco/js-api'; import { MinimalNodeEntity, MinimalNodeEntryEntity, PathElementEntity, PathInfo } from '@alfresco/js-api';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { debounceTime, map } from 'rxjs/operators'; import { debounceTime, map } from 'rxjs/operators';
@@ -35,16 +34,9 @@ import { DocumentListPresetRef } from '@alfresco/adf-extensions';
templateUrl: './favorites.component.html' templateUrl: './favorites.component.html'
}) })
export class FavoritesComponent extends PageComponent implements OnInit { export class FavoritesComponent extends PageComponent implements OnInit {
isSmallScreen = false;
columns: DocumentListPresetRef[] = []; columns: DocumentListPresetRef[] = [];
constructor( constructor(private router: Router, private contentApi: ContentApiService, private uploadService: UploadService) {
private router: Router,
private contentApi: ContentApiService,
private uploadService: UploadService,
private breakpointObserver: BreakpointObserver
) {
super(); super();
} }
@@ -52,12 +44,8 @@ export class FavoritesComponent extends PageComponent implements OnInit {
super.ngOnInit(); super.ngOnInit();
this.subscriptions = this.subscriptions.concat([ this.subscriptions = this.subscriptions.concat([
this.uploadService.fileUploadComplete.pipe(debounceTime(300)).subscribe((_) => this.reload()), this.uploadService.fileUploadComplete.pipe(debounceTime(300)).subscribe(() => this.reload()),
this.uploadService.fileUploadDeleted.pipe(debounceTime(300)).subscribe((_) => this.reload()), this.uploadService.fileUploadDeleted.pipe(debounceTime(300)).subscribe(() => this.reload())
this.breakpointObserver.observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape]).subscribe((result) => {
this.isSmallScreen = result.matches;
})
]); ]);
this.columns = this.extensions.documentListPresets.favorites; this.columns = this.extensions.documentListPresets.favorites;

View File

@@ -29,7 +29,6 @@ import { MinimalNodeEntity, MinimalNodeEntryEntity, PathElement, PathElementEnti
import { NodeActionsService } from '../../services/node-actions.service'; import { NodeActionsService } from '../../services/node-actions.service';
import { ContentApiService, PageComponent } from '@alfresco/aca-shared'; import { ContentApiService, PageComponent } from '@alfresco/aca-shared';
import { SetCurrentFolderAction, isAdmin, UploadFileVersionAction, showLoaderSelector } from '@alfresco/aca-shared/store'; import { SetCurrentFolderAction, isAdmin, UploadFileVersionAction, showLoaderSelector } from '@alfresco/aca-shared/store';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { debounceTime, takeUntil } from 'rxjs/operators'; import { debounceTime, takeUntil } from 'rxjs/operators';
import { FilterSearch, ShareDataRow, UploadService, FileUploadEvent } from '@alfresco/adf-content-services'; import { FilterSearch, ShareDataRow, UploadService, FileUploadEvent } from '@alfresco/adf-content-services';
import { DocumentListPresetRef } from '@alfresco/adf-extensions'; import { DocumentListPresetRef } from '@alfresco/adf-extensions';
@@ -40,7 +39,6 @@ import { Observable } from 'rxjs';
}) })
export class FilesComponent extends PageComponent implements OnInit, OnDestroy { export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
isValidPath = true; isValidPath = true;
isSmallScreen = false;
isAdmin = false; isAdmin = false;
selectedNode: MinimalNodeEntity; selectedNode: MinimalNodeEntity;
queryParams = null; queryParams = null;
@@ -55,8 +53,7 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
private route: ActivatedRoute, private route: ActivatedRoute,
private contentApi: ContentApiService, private contentApi: ContentApiService,
private nodeActionsService: NodeActionsService, private nodeActionsService: NodeActionsService,
private uploadService: UploadService, private uploadService: UploadService
private breakpointObserver: BreakpointObserver
) { ) {
super(); super();
} }
@@ -96,11 +93,7 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
this.subscriptions = this.subscriptions.concat([ this.subscriptions = this.subscriptions.concat([
nodeActionsService.contentCopied.subscribe((nodes) => this.onContentCopied(nodes)), nodeActionsService.contentCopied.subscribe((nodes) => this.onContentCopied(nodes)),
uploadService.fileUploadComplete.pipe(debounceTime(300)).subscribe((file) => this.onFileUploadedEvent(file)), uploadService.fileUploadComplete.pipe(debounceTime(300)).subscribe((file) => this.onFileUploadedEvent(file)),
uploadService.fileUploadDeleted.pipe(debounceTime(300)).subscribe((file) => this.onFileUploadedEvent(file)), uploadService.fileUploadDeleted.pipe(debounceTime(300)).subscribe((file) => this.onFileUploadedEvent(file))
this.breakpointObserver.observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape]).subscribe((result) => {
this.isSmallScreen = result.matches;
})
]); ]);
this.store this.store

View File

@@ -24,7 +24,6 @@
import { NavigateLibraryAction } from '@alfresco/aca-shared/store'; import { NavigateLibraryAction } from '@alfresco/aca-shared/store';
import { SiteEntry } from '@alfresco/js-api'; import { SiteEntry } from '@alfresco/js-api';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { AppHookService, PageComponent } from '@alfresco/aca-shared'; import { AppHookService, PageComponent } from '@alfresco/aca-shared';
import { DocumentListPresetRef } from '@alfresco/adf-extensions'; import { DocumentListPresetRef } from '@alfresco/adf-extensions';
@@ -33,11 +32,9 @@ import { DocumentListPresetRef } from '@alfresco/adf-extensions';
templateUrl: './libraries.component.html' templateUrl: './libraries.component.html'
}) })
export class LibrariesComponent extends PageComponent implements OnInit { export class LibrariesComponent extends PageComponent implements OnInit {
isSmallScreen = false;
columns: DocumentListPresetRef[] = []; columns: DocumentListPresetRef[] = [];
constructor(private appHookService: AppHookService, private breakpointObserver: BreakpointObserver) { constructor(private appHookService: AppHookService) {
super(); super();
} }
@@ -47,11 +44,7 @@ export class LibrariesComponent extends PageComponent implements OnInit {
this.subscriptions.push( this.subscriptions.push(
this.appHookService.libraryDeleted.subscribe(() => this.reload()), this.appHookService.libraryDeleted.subscribe(() => this.reload()),
this.appHookService.libraryUpdated.subscribe(() => this.reload()), this.appHookService.libraryUpdated.subscribe(() => this.reload()),
this.appHookService.libraryLeft.subscribe(() => this.reload()), this.appHookService.libraryLeft.subscribe(() => this.reload())
this.breakpointObserver.observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape]).subscribe((result) => {
this.isSmallScreen = result.matches;
})
); );
this.columns = this.extensions.documentListPresets.libraries || []; this.columns = this.extensions.documentListPresets.libraries || [];

View File

@@ -23,7 +23,6 @@
*/ */
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { MinimalNodeEntity } from '@alfresco/js-api'; import { MinimalNodeEntity } from '@alfresco/js-api';
import { UploadService } from '@alfresco/adf-content-services'; import { UploadService } from '@alfresco/adf-content-services';
import { debounceTime } from 'rxjs/operators'; import { debounceTime } from 'rxjs/operators';
@@ -35,11 +34,9 @@ import { DocumentListPresetRef } from '@alfresco/adf-extensions';
templateUrl: './recent-files.component.html' templateUrl: './recent-files.component.html'
}) })
export class RecentFilesComponent extends PageComponent implements OnInit { export class RecentFilesComponent extends PageComponent implements OnInit {
isSmallScreen = false;
columns: DocumentListPresetRef[] = []; columns: DocumentListPresetRef[] = [];
constructor(private uploadService: UploadService, private breakpointObserver: BreakpointObserver, private router: Router) { constructor(private uploadService: UploadService, private router: Router) {
super(); super();
} }
@@ -48,11 +45,7 @@ export class RecentFilesComponent extends PageComponent implements OnInit {
this.subscriptions = this.subscriptions.concat([ this.subscriptions = this.subscriptions.concat([
this.uploadService.fileUploadComplete.pipe(debounceTime(300)).subscribe(() => this.onFileUploadedEvent()), this.uploadService.fileUploadComplete.pipe(debounceTime(300)).subscribe(() => this.onFileUploadedEvent()),
this.uploadService.fileUploadDeleted.pipe(debounceTime(300)).subscribe(() => this.onFileUploadedEvent()), this.uploadService.fileUploadDeleted.pipe(debounceTime(300)).subscribe(() => this.onFileUploadedEvent())
this.breakpointObserver.observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape]).subscribe((result) => {
this.isSmallScreen = result.matches;
})
]); ]);
this.columns = this.extensions.documentListPresets.recent || []; this.columns = this.extensions.documentListPresets.recent || [];

View File

@@ -24,7 +24,6 @@
import { NavigateLibraryAction } from '@alfresco/aca-shared/store'; import { NavigateLibraryAction } from '@alfresco/aca-shared/store';
import { NodePaging, Pagination, SiteEntry } from '@alfresco/js-api'; import { NodePaging, Pagination, SiteEntry } from '@alfresco/js-api';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router'; import { ActivatedRoute, Params } from '@angular/router';
import { SearchLibrariesQueryBuilderService } from './search-libraries-query-builder.service'; import { SearchLibrariesQueryBuilderService } from './search-libraries-query-builder.service';
@@ -37,7 +36,6 @@ import { DocumentListPresetRef } from '@alfresco/adf-extensions';
styleUrls: ['./search-libraries-results.component.scss'] styleUrls: ['./search-libraries-results.component.scss']
}) })
export class SearchLibrariesResultsComponent extends PageComponent implements OnInit { export class SearchLibrariesResultsComponent extends PageComponent implements OnInit {
isSmallScreen = false;
searchedWord: string; searchedWord: string;
queryParamName = 'q'; queryParamName = 'q';
data: NodePaging; data: NodePaging;
@@ -46,7 +44,6 @@ export class SearchLibrariesResultsComponent extends PageComponent implements On
columns: DocumentListPresetRef[] = []; columns: DocumentListPresetRef[] = [];
constructor( constructor(
private breakpointObserver: BreakpointObserver,
private librariesQueryBuilder: SearchLibrariesQueryBuilderService, private librariesQueryBuilder: SearchLibrariesQueryBuilderService,
private route: ActivatedRoute, private route: ActivatedRoute,
private appHookService: AppHookService, private appHookService: AppHookService,
@@ -91,10 +88,6 @@ export class SearchLibrariesResultsComponent extends PageComponent implements On
this.appHookService.library400Error.next(); this.appHookService.library400Error.next();
} }
} catch (e) {} } catch (e) {}
}),
this.breakpointObserver.observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape]).subscribe((result) => {
this.isSmallScreen = result.matches;
}) })
); );

View File

@@ -40,7 +40,6 @@ import { combineLatest, Observable } from 'rxjs';
import { PageComponent } from '@alfresco/aca-shared'; import { PageComponent } from '@alfresco/aca-shared';
import { SearchSortingDefinition } from '@alfresco/adf-content-services/lib/search/models/search-sorting-definition.interface'; import { SearchSortingDefinition } from '@alfresco/adf-content-services/lib/search/models/search-sorting-definition.interface';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
@Component({ @Component({
selector: 'aca-search-results', selector: 'aca-search-results',
@@ -57,14 +56,12 @@ export class SearchResultsComponent extends PageComponent implements OnInit {
data: ResultSetPaging; data: ResultSetPaging;
sorting = ['name', 'asc']; sorting = ['name', 'asc'];
isLoading = false; isLoading = false;
isSmallScreen = false;
constructor( constructor(
private queryBuilder: SearchQueryBuilderService, private queryBuilder: SearchQueryBuilderService,
private route: ActivatedRoute, private route: ActivatedRoute,
private translationService: TranslationService, private translationService: TranslationService,
private router: Router, private router: Router
private breakpointObserver: BreakpointObserver
) { ) {
super(); super();
@@ -85,13 +82,6 @@ export class SearchResultsComponent extends PageComponent implements OnInit {
this.queryBuilder.userQuery = decodeURIComponent(query); this.queryBuilder.userQuery = decodeURIComponent(query);
} }
}); });
this.breakpointObserver
.observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape])
.pipe(takeUntil(this.onDestroy$))
.subscribe((result) => {
this.isSmallScreen = result.matches;
});
} }
ngOnInit() { ngOnInit() {

View File

@@ -23,7 +23,6 @@
*/ */
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { debounceTime } from 'rxjs/operators'; import { debounceTime } from 'rxjs/operators';
import { UploadService } from '@alfresco/adf-content-services'; import { UploadService } from '@alfresco/adf-content-services';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
@@ -34,16 +33,9 @@ import { DocumentListPresetRef } from '@alfresco/adf-extensions';
templateUrl: './shared-files.component.html' templateUrl: './shared-files.component.html'
}) })
export class SharedFilesComponent extends PageComponent implements OnInit { export class SharedFilesComponent extends PageComponent implements OnInit {
isSmallScreen = false;
columns: DocumentListPresetRef[] = []; columns: DocumentListPresetRef[] = [];
constructor( constructor(private appHookService: AppHookService, private uploadService: UploadService, private router: Router) {
private appHookService: AppHookService,
private uploadService: UploadService,
private breakpointObserver: BreakpointObserver,
private router: Router
) {
super(); super();
} }
@@ -52,13 +44,8 @@ export class SharedFilesComponent extends PageComponent implements OnInit {
this.subscriptions = this.subscriptions.concat([ this.subscriptions = this.subscriptions.concat([
this.appHookService.linksUnshared.pipe(debounceTime(300)).subscribe(() => this.reload()), this.appHookService.linksUnshared.pipe(debounceTime(300)).subscribe(() => this.reload()),
this.uploadService.fileUploadComplete.pipe(debounceTime(300)).subscribe(() => this.reload()),
this.uploadService.fileUploadComplete.pipe(debounceTime(300)).subscribe((_) => this.reload()), this.uploadService.fileUploadDeleted.pipe(debounceTime(300)).subscribe(() => this.reload())
this.uploadService.fileUploadDeleted.pipe(debounceTime(300)).subscribe((_) => this.reload()),
this.breakpointObserver.observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape]).subscribe((result) => {
this.isSmallScreen = result.matches;
})
]); ]);
this.columns = this.extensions.documentListPresets.shared || []; this.columns = this.extensions.documentListPresets.shared || [];

View File

@@ -23,35 +23,19 @@
*/ */
import { getUserProfile } from '@alfresco/aca-shared/store'; import { getUserProfile } from '@alfresco/aca-shared/store';
import { DocumentListPresetRef, ProfileState } from '@alfresco/adf-extensions'; import { DocumentListPresetRef } from '@alfresco/adf-extensions';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { PageComponent } from '@alfresco/aca-shared'; import { PageComponent } from '@alfresco/aca-shared';
@Component({ @Component({
templateUrl: './trashcan.component.html' templateUrl: './trashcan.component.html'
}) })
export class TrashcanComponent extends PageComponent implements OnInit { export class TrashcanComponent extends PageComponent implements OnInit {
isSmallScreen = false; user$ = this.store.select(getUserProfile);
user$: Observable<ProfileState>;
columns: DocumentListPresetRef[] = []; columns: DocumentListPresetRef[] = [];
constructor(private breakpointObserver: BreakpointObserver) {
super();
this.user$ = this.store.select(getUserProfile);
}
ngOnInit() { ngOnInit() {
super.ngOnInit(); super.ngOnInit();
this.subscriptions.push(
this.breakpointObserver.observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape]).subscribe((result) => {
this.isSmallScreen = result.matches;
})
);
this.columns = this.extensions.documentListPresets.trashcan || []; this.columns = this.extensions.documentListPresets.trashcan || [];
} }
} }

View File

@@ -46,6 +46,7 @@ import {
import { AppExtensionService } from '../../services/app.extension.service'; import { AppExtensionService } from '../../services/app.extension.service';
import { isLibrary, isLocked } from '../../utils/node.utils'; import { isLibrary, isLocked } from '../../utils/node.utils';
import { AcaFileAutoDownloadService } from '../../services/aca-file-auto-download.service'; import { AcaFileAutoDownloadService } from '../../services/aca-file-auto-download.service';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
/* eslint-disable @angular-eslint/directive-class-suffix */ /* eslint-disable @angular-eslint/directive-class-suffix */
@Directive() @Directive()
@@ -69,10 +70,12 @@ export abstract class PageComponent implements OnInit, OnDestroy, OnChanges {
showHeader = ShowHeaderMode.Data; showHeader = ShowHeaderMode.Data;
filterSorting = 'name-asc'; filterSorting = 'name-asc';
createActions: Array<ContentActionRef> = []; createActions: Array<ContentActionRef> = [];
isSmallScreen = false;
protected extensions = inject(AppExtensionService); protected extensions = inject(AppExtensionService);
protected content = inject(DocumentBasePageService); protected content = inject(DocumentBasePageService);
protected store = inject<Store<AppStore>>(Store<AppStore>); protected store = inject<Store<AppStore>>(Store<AppStore>);
protected breakpointObserver = inject(BreakpointObserver);
private fileAutoDownloadService = inject(AcaFileAutoDownloadService, { optional: true }); private fileAutoDownloadService = inject(AcaFileAutoDownloadService, { optional: true });
protected subscriptions: Subscription[] = []; protected subscriptions: Subscription[] = [];
@@ -118,6 +121,13 @@ export abstract class PageComponent implements OnInit, OnDestroy, OnChanges {
.subscribe((node) => { .subscribe((node) => {
this.canUpload = node && this.content.canUploadContent(node); this.canUpload = node && this.content.canUploadContent(node);
}); });
this.breakpointObserver
.observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape])
.pipe(takeUntil(this.onDestroy$))
.subscribe((result) => {
this.isSmallScreen = result.matches;
});
} }
ngOnChanges(changes: SimpleChanges) { ngOnChanges(changes: SimpleChanges) {