mirror of
https://github.com/bitwarden/web
synced 2025-12-06 00:03:28 +00:00
[feat] Allow the org badge click event to expand collapsed vault filters
1. Extend the BaseVaultFiltersService to manage an observable for collapsed nodes that can be modified from outside the VaultFiltersComponent 2. Subscribe to the new observable in VaultFiltersComponent.ngOnInit() to update the collapsed state of filters when changed from outside the VaultFiltersComponent 3. Add a helper method to VaultFiltersService for expanding vault filters if they are collapsed that sends a new value through the subscription 4. Wire everything up in the IndividualVaultComponent so applying a not null organization filter expanded the vault filters
This commit is contained in:
@@ -1,9 +1,10 @@
|
||||
import { Component, EventEmitter, Input, Output } from "@angular/core";
|
||||
|
||||
import { VaultFilterComponent as BaseVaultFilterComponent } from "jslib-angular/modules/vault-filter/vault-filter.component";
|
||||
import { VaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
|
||||
import { Organization } from "jslib-common/models/domain/organization";
|
||||
|
||||
import { VaultFilterService } from "./vault-filter.service";
|
||||
|
||||
@Component({
|
||||
selector: "app-vault-filter",
|
||||
templateUrl: "vault-filter.component.html",
|
||||
@@ -20,10 +21,17 @@ export class VaultFilterComponent extends BaseVaultFilterComponent {
|
||||
|
||||
organization: Organization;
|
||||
|
||||
constructor(vaultFilterService: VaultFilterService) {
|
||||
constructor(protected vaultFilterService: VaultFilterService) {
|
||||
super(vaultFilterService);
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
await super.ngOnInit();
|
||||
this.vaultFilterService.collapsedFilterNodes.subscribe((nodes) => {
|
||||
this.collapsedFilterNodes = nodes;
|
||||
});
|
||||
}
|
||||
|
||||
searchTextChanged() {
|
||||
this.onSearchTextChanged.emit(this.searchText);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { NgModule } from "@angular/core";
|
||||
|
||||
import { VaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
|
||||
import { CipherService } from "jslib-common/abstractions/cipher.service";
|
||||
import { CollectionService } from "jslib-common/abstractions/collection.service";
|
||||
import { FolderService } from "jslib-common/abstractions/folder.service";
|
||||
@@ -17,6 +16,7 @@ import { OrganizationOptionsComponent } from "./components/organization-options.
|
||||
import { StatusFilterComponent } from "./components/status-filter.component";
|
||||
import { TypeFilterComponent } from "./components/type-filter.component";
|
||||
import { VaultFilterComponent } from "./vault-filter.component";
|
||||
import { VaultFilterService } from "./vault-filter.service";
|
||||
|
||||
@NgModule({
|
||||
imports: [SharedModule],
|
||||
|
||||
@@ -1,3 +1,27 @@
|
||||
import { BehaviorSubject } from "rxjs";
|
||||
|
||||
import { VaultFilterService as BaseVaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
|
||||
|
||||
export class VaultFilterService extends BaseVaultFilterService {}
|
||||
export class VaultFilterService extends BaseVaultFilterService {
|
||||
collapsedFilterNodes = new BehaviorSubject<Set<string>>(null);
|
||||
|
||||
async buildCollapsedFilterNodes(): Promise<Set<string>> {
|
||||
const nodes = await super.buildCollapsedFilterNodes();
|
||||
this.collapsedFilterNodes.next(nodes);
|
||||
return nodes;
|
||||
}
|
||||
|
||||
async storeCollapsedFilterNodes(collapsedFilterNodes: Set<string>): Promise<void> {
|
||||
await super.storeCollapsedFilterNodes(collapsedFilterNodes);
|
||||
this.collapsedFilterNodes.next(collapsedFilterNodes);
|
||||
}
|
||||
|
||||
async ensureVaultFiltersAreExpanded() {
|
||||
const collapsedFilterNodes = await super.buildCollapsedFilterNodes();
|
||||
if (!collapsedFilterNodes.has("vaults")) {
|
||||
return;
|
||||
}
|
||||
collapsedFilterNodes.delete("vaults");
|
||||
await this.storeCollapsedFilterNodes(collapsedFilterNodes);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -34,6 +34,7 @@ import { CollectionsComponent } from "../../../../vault/collections.component";
|
||||
import { FolderAddEditComponent } from "../../../../vault/folder-add-edit.component";
|
||||
import { ShareComponent } from "../../../../vault/share.component";
|
||||
import { VaultFilterComponent } from "../../../vault-filter/vault-filter.component";
|
||||
import { VaultFilterService } from "../../../vault-filter/vault-filter.service";
|
||||
import { VaultService } from "../../vault.service";
|
||||
|
||||
const BroadcasterSubscriptionId = "VaultComponent";
|
||||
@@ -88,7 +89,8 @@ export class IndividualVaultComponent implements OnInit, OnDestroy {
|
||||
private organizationService: OrganizationService,
|
||||
private vaultService: VaultService,
|
||||
private cipherService: CipherService,
|
||||
private passwordRepromptService: PasswordRepromptService
|
||||
private passwordRepromptService: PasswordRepromptService,
|
||||
private vaultFilterService: VaultFilterService
|
||||
) {}
|
||||
|
||||
async ngOnInit() {
|
||||
@@ -187,6 +189,7 @@ export class IndividualVaultComponent implements OnInit, OnDestroy {
|
||||
this.activeFilter.myVaultOnly = true;
|
||||
} else {
|
||||
this.activeFilter.selectedOrganizationId = orgId;
|
||||
await this.vaultFilterService.ensureVaultFiltersAreExpanded();
|
||||
}
|
||||
await this.applyVaultFilter(this.activeFilter);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user