mirror of
https://github.com/bitwarden/browser
synced 2025-12-22 11:13:46 +00:00
d3539a4a44
* [EC-886] Fix i18n key in vault filter section * [EC-886] Add shared functionality to vault-filter model Common patterns for determining the current filter status are used in the vault header, filter, and items components that could be extracted to the filter model to be consistent and less repetitive. * [EC-886] Add the individual vault header component Create a vault header component for encapsulation and to reduce the complexity of the vault component. * [EC-886] Add the organizational vault header component Create a vault header component for encapsulation and to reduce the complexity of the organizational vault component. * [EC-886] Use the new vault header component in the individual vault - Remove the old header template from the vault component and introduce the <app-vault-header> component instead. - Remove redundant logic from vault component that was moved to the header component and/or vault filter model. * [EC-886] Use the new vault header component in the organization vault - Remove the old header template from the org vault component and introduce the <app-org-vault-header> component instead. - Remove redundant logic from vault component that was moved to the header component and/or vault filter model. * [EC-886] Adjust vault header to make the word "vault" lowercase * [EC-886] Top align vault header to prevent button jumping * [EC-886] Center align collection icon/button with header text
86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
import { Component, EventEmitter, Input, Output } from "@angular/core";
|
|
|
|
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
|
|
import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
|
|
import { TreeNode } from "@bitwarden/common/models/domain/tree-node";
|
|
|
|
import { VaultFilter } from "../vault-filter/shared/models/vault-filter.model";
|
|
import { CollectionFilter } from "../vault-filter/shared/models/vault-filter.type";
|
|
|
|
@Component({
|
|
selector: "app-vault-header",
|
|
templateUrl: "./vault-header.component.html",
|
|
})
|
|
export class VaultHeaderComponent {
|
|
/**
|
|
* Promise that is used to determine the loading state of the header via the ApiAction directive.
|
|
* When the promise exists and is not resolved, the loading spinner will be shown.
|
|
*/
|
|
@Input() actionPromise: Promise<any>;
|
|
|
|
/**
|
|
* The filter being actively applied to the vault view
|
|
*/
|
|
@Input() activeFilter: VaultFilter;
|
|
|
|
/**
|
|
* Emits when the active filter has been modified by the header
|
|
*/
|
|
@Output() activeFilterChanged = new EventEmitter<VaultFilter>();
|
|
|
|
/**
|
|
* Emits an event when the new item button is clicked in the header
|
|
*/
|
|
@Output() onAddCipher = new EventEmitter<void>();
|
|
|
|
organizations$ = this.organizationService.organizations$;
|
|
|
|
constructor(private organizationService: OrganizationService, private i18nService: I18nService) {}
|
|
|
|
/**
|
|
* The id of the organization that is currently being filtered on.
|
|
* This can come from a collection filter or organization filter, if applied.
|
|
*/
|
|
get activeOrganizationId() {
|
|
if (this.activeFilter.selectedCollectionNode != null) {
|
|
return this.activeFilter.selectedCollectionNode.node.organizationId;
|
|
}
|
|
if (this.activeFilter.selectedOrganizationNode != null) {
|
|
return this.activeFilter.selectedOrganizationNode.node.id;
|
|
}
|
|
return undefined;
|
|
}
|
|
|
|
get title() {
|
|
if (this.activeFilter.isCollectionSelected) {
|
|
if (this.activeFilter.isUnassignedCollectionSelected) {
|
|
return this.i18nService.t("unassigned");
|
|
}
|
|
return this.activeFilter.selectedCollectionNode.node.name;
|
|
}
|
|
|
|
if (this.activeFilter.isMyVaultSelected) {
|
|
return this.i18nService.t("myVault");
|
|
}
|
|
|
|
if (this.activeFilter?.selectedOrganizationNode != null) {
|
|
return `${this.activeFilter.selectedOrganizationNode.node.name} ${this.i18nService
|
|
.t("vault")
|
|
.toLowerCase()}`;
|
|
}
|
|
|
|
return this.i18nService.t("allVaults");
|
|
}
|
|
|
|
applyCollectionFilter(collection: TreeNode<CollectionFilter>) {
|
|
const filter = this.activeFilter;
|
|
filter.resetFilter();
|
|
filter.selectedCollectionNode = collection;
|
|
this.activeFilterChanged.emit(filter);
|
|
}
|
|
|
|
addCipher() {
|
|
this.onAddCipher.emit();
|
|
}
|
|
}
|