control applying saved state and when to show groupings

This commit is contained in:
Kyle Spearrin 2018-10-29 09:29:21 -04:00
parent 0cdc343ce0
commit bc5cec82cc
3 changed files with 52 additions and 38 deletions

View File

@ -59,7 +59,6 @@ export class AppComponent implements OnInit {
});
private lastActivity: number = null;
private previousUrl: string = '';
constructor(private angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics, private analytics: Angulartics2,
private toasterService: ToasterService, private storageService: StorageService,
@ -124,14 +123,15 @@ export class AppComponent implements OnInit {
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
const url = event.urlAfterRedirects || event.url || '';
if (url.startsWith('/tabs/') && this.previousUrl.startsWith('/tabs/')) {
if (url.startsWith('/tabs/') && (window as any).previousPopupUrl != null &&
(window as any).previousPopupUrl.startsWith('/tabs/')) {
this.stateService.remove('GroupingsComponent');
this.stateService.remove('CiphersComponent');
}
if (url.startsWith('/tabs/')) {
this.stateService.remove('addEditCipher');
}
this.previousUrl = url;
(window as any).previousPopupUrl = url;
// Clear route direction after animation (400ms)
if ((window as any).routeDirection != null) {

View File

@ -16,40 +16,42 @@
</button>
</div>
</header>
<content [ngClass]="{'stacked-boxes': nestedFolders && nestedFolders.length || nestedCollections && nestedCollections.length}">
<div class="box list" *ngIf="nestedFolders && nestedFolders.length">
<div class="box-header">
{{'folders' | i18n}}
</div>
<div class="box-content single-line">
<a *ngFor="let f of nestedFolders" href="#" class="box-content-row"
appStopClick appBlurClick (click)="selectFolder(f.node)">
<div class="row-main">
<div class="icon">
<i class="fa fa-fw fa-lg"
[ngClass]="{'fa-folder-open': f.node.id, 'fa-folder-open-o': !f.node.id}"></i>
<content [ngClass]="{'stacked-boxes': showGroupings()}">
<ng-container *ngIf="showGroupings()">
<div class="box list" *ngIf="nestedFolders && nestedFolders.length">
<div class="box-header">
{{'folders' | i18n}}
</div>
<div class="box-content single-line">
<a *ngFor="let f of nestedFolders" href="#" class="box-content-row"
appStopClick appBlurClick (click)="selectFolder(f.node)">
<div class="row-main">
<div class="icon">
<i class="fa fa-fw fa-lg"
[ngClass]="{'fa-folder-open': f.node.id, 'fa-folder-open-o': !f.node.id}"></i>
</div>
<span class="text">{{f.node.name}}</span>
</div>
<span class="text">{{f.node.name}}</span>
</div>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
</a>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
</a>
</div>
</div>
</div>
<div class="box list" *ngIf="nestedCollections && nestedCollections.length">
<div class="box-header">
{{'collections' | i18n}}
<div class="box list" *ngIf="nestedCollections && nestedCollections.length">
<div class="box-header">
{{'collections' | i18n}}
</div>
<div class="box-content single-line">
<a *ngFor="let c of nestedCollections" href="#" class="box-content-row"
appStopClick appBlurClick (click)="selectCollection(c.node)">
<div class="row-main">
<div class="icon"><i class="fa fa-fw fa-lg fa-cube"></i></div>
<span class="text">{{c.node.name}}</span>
</div>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
</a>
</div>
</div>
<div class="box-content single-line">
<a *ngFor="let c of nestedCollections" href="#" class="box-content-row"
appStopClick appBlurClick (click)="selectCollection(c.node)">
<div class="row-main">
<div class="icon"><i class="fa fa-fw fa-lg fa-cube"></i></div>
<span class="text">{{c.node.name}}</span>
</div>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
</a>
</div>
</div>
</ng-container>
<ng-container *ngIf="(!isPaging() ? ciphers : pagedCiphers) as filteredCiphers">
<div class="no-items" *ngIf="!filteredCiphers.length">
<i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded"></i>

View File

@ -56,6 +56,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
private selectedTimeout: number;
private preventSelected = false;
private pageSize = 100;
private applySavedState = true;
constructor(searchService: SearchService, private route: ActivatedRoute,
private router: Router, private location: Location,
@ -66,6 +67,8 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
private analytics: Angulartics2, private platformUtilsService: PlatformUtilsService) {
super(searchService);
this.pageSize = platformUtilsService.isEdge() ? 25 : 100;
this.applySavedState = (window as any).previousPopupUrl != null &&
!(window as any).previousPopupUrl.startsWith('/ciphers');
}
async ngOnInit() {
@ -120,11 +123,14 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
}
this.loadMore();
this.state = (await this.stateService.get<any>(ComponentId)) || {};
if (this.state.searchText) {
this.searchText = this.state.searchText;
if (this.applySavedState) {
this.state = (await this.stateService.get<any>(ComponentId)) || {};
if (this.state.searchText) {
this.searchText = this.state.searchText;
}
window.setTimeout(() => this.popupUtils.setContentScrollY(window, this.state.scrollY), 0);
}
window.setTimeout(() => this.popupUtils.setContentScrollY(window, this.state.scrollY), 0);
this.stateService.remove(ComponentId);
});
this.broadcasterService.subscribe(ComponentId, (message: any) => {
@ -209,6 +215,12 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
this.didScroll = this.pagedCiphers.length > this.pageSize;
}
showGroupings() {
return !this.isSearching() &&
((this.nestedFolders && this.nestedFolders.length) ||
(this.nestedCollections && this.nestedCollections.length));
}
isSearching() {
return !this.searchPending && this.searchService.isSearchable(this.searchText);
}