mirror of
https://github.com/bitwarden/jslib
synced 2025-12-22 11:13:17 +00:00
[refactor] Break down vault filter into several components
These changes rename and rewrite the GroupingsComponent into a VaultFiltersModule. The module follows typical angular patterns for structure and purpose, and contain components for each filter type. The mostly communicate via Input and Output, and depend on a VaultFilterService for sending and recieving data from other parts of the product.
This commit is contained in:
addison
@@ -1,253 +0,0 @@
|
|||||||
import { Directive, EventEmitter, Input, Output } from "@angular/core";
|
|
||||||
|
|
||||||
import { CipherService } from "jslib-common/abstractions/cipher.service";
|
|
||||||
import { CollectionService } from "jslib-common/abstractions/collection.service";
|
|
||||||
import { FolderService } from "jslib-common/abstractions/folder.service";
|
|
||||||
import { OrganizationService } from "jslib-common/abstractions/organization.service";
|
|
||||||
import { StateService } from "jslib-common/abstractions/state.service";
|
|
||||||
import { CipherType } from "jslib-common/enums/cipherType";
|
|
||||||
import { Organization } from "jslib-common/models/domain/organization";
|
|
||||||
import { ITreeNodeObject, TreeNode } from "jslib-common/models/domain/treeNode";
|
|
||||||
import { CollectionView } from "jslib-common/models/view/collectionView";
|
|
||||||
import { FolderView } from "jslib-common/models/view/folderView";
|
|
||||||
|
|
||||||
export type TopLevelGroupingId = "vaults" | "types" | "collections" | "folders";
|
|
||||||
export class TopLevelGroupingView implements ITreeNodeObject {
|
|
||||||
id: TopLevelGroupingId;
|
|
||||||
name: string; // localizationString
|
|
||||||
}
|
|
||||||
@Directive()
|
|
||||||
export class GroupingsComponent {
|
|
||||||
@Input() showFolders = true;
|
|
||||||
@Input() showCollections = true;
|
|
||||||
@Input() showFavorites = true;
|
|
||||||
@Input() showTrash = true;
|
|
||||||
@Input() showOrganizations = true;
|
|
||||||
|
|
||||||
@Output() onAllClicked = new EventEmitter();
|
|
||||||
@Output() onFavoritesClicked = new EventEmitter();
|
|
||||||
@Output() onTrashClicked = new EventEmitter();
|
|
||||||
@Output() onCipherTypeClicked = new EventEmitter<CipherType>();
|
|
||||||
@Output() onFolderClicked = new EventEmitter<FolderView>();
|
|
||||||
@Output() onAddFolder = new EventEmitter();
|
|
||||||
@Output() onEditFolder = new EventEmitter<FolderView>();
|
|
||||||
@Output() onCollectionClicked = new EventEmitter<CollectionView>();
|
|
||||||
@Output() onOrganizationClicked = new EventEmitter<Organization>();
|
|
||||||
@Output() onMyVaultClicked = new EventEmitter();
|
|
||||||
@Output() onAllVaultsClicked = new EventEmitter();
|
|
||||||
|
|
||||||
folders: FolderView[];
|
|
||||||
nestedFolders: TreeNode<FolderView>[];
|
|
||||||
collections: CollectionView[];
|
|
||||||
nestedCollections: TreeNode<CollectionView>[];
|
|
||||||
loaded = false;
|
|
||||||
cipherType = CipherType;
|
|
||||||
selectedAll = false;
|
|
||||||
selectedFavorites = false;
|
|
||||||
selectedTrash = false;
|
|
||||||
selectedType: CipherType = null;
|
|
||||||
selectedFolder = false;
|
|
||||||
selectedFolderId: string = null;
|
|
||||||
selectedCollectionId: string = null;
|
|
||||||
selectedOrganizationId: string = null;
|
|
||||||
organizations: Organization[];
|
|
||||||
myVaultOnly = false;
|
|
||||||
|
|
||||||
readonly vaultsGrouping: TopLevelGroupingView = {
|
|
||||||
id: "vaults",
|
|
||||||
name: "allVaults",
|
|
||||||
};
|
|
||||||
|
|
||||||
readonly typesGrouping: TopLevelGroupingView = {
|
|
||||||
id: "types",
|
|
||||||
name: "types",
|
|
||||||
};
|
|
||||||
|
|
||||||
readonly collectionsGrouping: TopLevelGroupingView = {
|
|
||||||
id: "collections",
|
|
||||||
name: "collections",
|
|
||||||
};
|
|
||||||
|
|
||||||
readonly foldersGrouping: TopLevelGroupingView = {
|
|
||||||
id: "folders",
|
|
||||||
name: "folders",
|
|
||||||
};
|
|
||||||
|
|
||||||
private collapsedGroupings: Set<string>;
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
protected collectionService: CollectionService,
|
|
||||||
protected folderService: FolderService,
|
|
||||||
protected stateService: StateService,
|
|
||||||
protected organizationService: OrganizationService,
|
|
||||||
protected cipherService: CipherService
|
|
||||||
) {}
|
|
||||||
|
|
||||||
async load(setLoaded = true) {
|
|
||||||
const collapsedGroupings = await this.stateService.getCollapsedGroupings();
|
|
||||||
if (collapsedGroupings == null) {
|
|
||||||
this.collapsedGroupings = new Set<string>();
|
|
||||||
} else {
|
|
||||||
this.collapsedGroupings = new Set(collapsedGroupings);
|
|
||||||
}
|
|
||||||
|
|
||||||
await this.loadFolders();
|
|
||||||
await this.loadCollections();
|
|
||||||
await this.loadOrganizations();
|
|
||||||
|
|
||||||
if (setLoaded) {
|
|
||||||
this.loaded = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async loadCollections(organizationId?: string) {
|
|
||||||
if (!this.showCollections) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const collections = await this.collectionService.getAllDecrypted();
|
|
||||||
if (organizationId != null) {
|
|
||||||
this.collections = collections.filter((c) => c.organizationId === organizationId);
|
|
||||||
} else {
|
|
||||||
this.collections = collections;
|
|
||||||
}
|
|
||||||
this.nestedCollections = await this.collectionService.getAllNested(this.collections);
|
|
||||||
}
|
|
||||||
|
|
||||||
async loadFolders(organizationId?: string) {
|
|
||||||
if (!this.showFolders) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const folders = await this.folderService.getAllDecrypted();
|
|
||||||
if (organizationId != null) {
|
|
||||||
const ciphers = await this.cipherService.getAllDecrypted();
|
|
||||||
const orgCiphers = ciphers.filter((c) => c.organizationId == organizationId);
|
|
||||||
this.folders = folders.filter(
|
|
||||||
(f) =>
|
|
||||||
f.id != null &&
|
|
||||||
(orgCiphers.filter((oc) => oc.folderId == f.id).length > 0 ||
|
|
||||||
ciphers.filter((c) => c.folderId == f.id).length < 1)
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
this.folders = folders;
|
|
||||||
}
|
|
||||||
this.nestedFolders = await this.folderService.getAllNested(this.folders);
|
|
||||||
}
|
|
||||||
|
|
||||||
async loadOrganizations() {
|
|
||||||
this.showOrganizations = await this.organizationService.hasOrganizations();
|
|
||||||
if (!this.showOrganizations) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.organizations = await this.organizationService.getAll();
|
|
||||||
}
|
|
||||||
|
|
||||||
selectAll() {
|
|
||||||
this.clearSelections();
|
|
||||||
this.selectedAll = true;
|
|
||||||
this.onAllClicked.emit();
|
|
||||||
}
|
|
||||||
|
|
||||||
selectFavorites() {
|
|
||||||
this.clearSelections();
|
|
||||||
this.selectedFavorites = true;
|
|
||||||
this.onFavoritesClicked.emit();
|
|
||||||
}
|
|
||||||
|
|
||||||
selectTrash() {
|
|
||||||
this.clearSelections();
|
|
||||||
this.selectedTrash = true;
|
|
||||||
this.onTrashClicked.emit();
|
|
||||||
}
|
|
||||||
|
|
||||||
selectType(type: CipherType) {
|
|
||||||
this.clearSelections();
|
|
||||||
this.selectedType = type;
|
|
||||||
this.onCipherTypeClicked.emit(type);
|
|
||||||
}
|
|
||||||
|
|
||||||
selectFolder(folder: FolderView) {
|
|
||||||
this.clearSelections();
|
|
||||||
this.selectedFolder = true;
|
|
||||||
this.selectedFolderId = folder.id;
|
|
||||||
this.onFolderClicked.emit(folder);
|
|
||||||
}
|
|
||||||
|
|
||||||
addFolder() {
|
|
||||||
this.onAddFolder.emit();
|
|
||||||
}
|
|
||||||
|
|
||||||
editFolder(folder: FolderView) {
|
|
||||||
this.onEditFolder.emit(folder);
|
|
||||||
}
|
|
||||||
|
|
||||||
selectCollection(collection: CollectionView) {
|
|
||||||
this.clearSelections();
|
|
||||||
this.selectedCollectionId = collection.id;
|
|
||||||
this.onCollectionClicked.emit(collection);
|
|
||||||
}
|
|
||||||
|
|
||||||
async selectOrganization(organization: Organization) {
|
|
||||||
this.clearSelectedOrganization();
|
|
||||||
this.selectedOrganizationId = organization.id;
|
|
||||||
await this.reloadCollectionsAndFolders(this.selectedOrganizationId);
|
|
||||||
this.onOrganizationClicked.emit(organization);
|
|
||||||
}
|
|
||||||
|
|
||||||
async selectMyVault() {
|
|
||||||
this.clearSelectedOrganization();
|
|
||||||
this.myVaultOnly = true;
|
|
||||||
await this.reloadCollectionsAndFolders(this.selectedOrganizationId);
|
|
||||||
this.onMyVaultClicked.emit();
|
|
||||||
}
|
|
||||||
|
|
||||||
async selectAllVaults() {
|
|
||||||
this.clearSelectedOrganization();
|
|
||||||
await this.reloadCollectionsAndFolders(this.selectedOrganizationId);
|
|
||||||
this.onAllVaultsClicked.emit();
|
|
||||||
}
|
|
||||||
|
|
||||||
clearSelections() {
|
|
||||||
this.selectedAll = false;
|
|
||||||
this.selectedFavorites = false;
|
|
||||||
this.selectedTrash = false;
|
|
||||||
this.selectedType = null;
|
|
||||||
this.selectedFolder = false;
|
|
||||||
this.selectedFolderId = null;
|
|
||||||
this.selectedCollectionId = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
clearSelectedOrganization() {
|
|
||||||
this.selectedOrganizationId = null;
|
|
||||||
this.myVaultOnly = false;
|
|
||||||
const clearingFolderOrCollectionSelection =
|
|
||||||
this.selectedFolderId != null || this.selectedCollectionId != null;
|
|
||||||
if (clearingFolderOrCollectionSelection) {
|
|
||||||
this.selectedFolder = false;
|
|
||||||
this.selectedFolderId = null;
|
|
||||||
this.selectedCollectionId = null;
|
|
||||||
this.selectedAll = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async collapse(node: ITreeNodeObject, idPrefix = "") {
|
|
||||||
if (node.id == null) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const id = idPrefix + node.id;
|
|
||||||
if (this.isCollapsed(node, idPrefix)) {
|
|
||||||
this.collapsedGroupings.delete(id);
|
|
||||||
} else {
|
|
||||||
this.collapsedGroupings.add(id);
|
|
||||||
}
|
|
||||||
await this.stateService.setCollapsedGroupings(Array.from(this.collapsedGroupings));
|
|
||||||
}
|
|
||||||
|
|
||||||
isCollapsed(node: ITreeNodeObject, idPrefix = "") {
|
|
||||||
return this.collapsedGroupings.has(idPrefix + node.id);
|
|
||||||
}
|
|
||||||
|
|
||||||
private async reloadCollectionsAndFolders(organizationId?: string) {
|
|
||||||
await this.loadCollections(organizationId);
|
|
||||||
await this.loadFolders(organizationId);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
import { Directive, EventEmitter, Input, Output } from "@angular/core";
|
||||||
|
|
||||||
|
import { ITreeNodeObject } from "jslib-common/models/domain/treeNode";
|
||||||
|
import { CollectionView } from "jslib-common/models/view/collectionView";
|
||||||
|
|
||||||
|
import { DynamicTreeNode } from "../models/dynamic-tree-node.model";
|
||||||
|
import { TopLevelTreeNode } from "../models/top-level-tree-node.model";
|
||||||
|
import { VaultFilter } from "../models/vault-filter.model";
|
||||||
|
|
||||||
|
@Directive()
|
||||||
|
export class CollectionFilterComponent {
|
||||||
|
@Input() hide = false;
|
||||||
|
@Input() collapsedFilterNodes: Set<string>;
|
||||||
|
@Input() collectionNodes: DynamicTreeNode<CollectionView>;
|
||||||
|
@Input() activeFilter: VaultFilter;
|
||||||
|
|
||||||
|
@Output() onNodeCollapseStateChange: EventEmitter<ITreeNodeObject> =
|
||||||
|
new EventEmitter<ITreeNodeObject>();
|
||||||
|
@Output() onFilterChange: EventEmitter<VaultFilter> = new EventEmitter<VaultFilter>();
|
||||||
|
|
||||||
|
readonly collectionsGrouping: TopLevelTreeNode = {
|
||||||
|
id: "collections",
|
||||||
|
name: "collections",
|
||||||
|
};
|
||||||
|
|
||||||
|
get collections() {
|
||||||
|
return this.collectionNodes?.fullList;
|
||||||
|
}
|
||||||
|
|
||||||
|
get nestedCollections() {
|
||||||
|
return this.collectionNodes?.nestedList;
|
||||||
|
}
|
||||||
|
|
||||||
|
get show() {
|
||||||
|
return !this.hide && this.collections != null && this.collections.length > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
isCollapsed(node: ITreeNodeObject) {
|
||||||
|
return this.collapsedFilterNodes.has(node.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
applyFilter(collection: CollectionView) {
|
||||||
|
this.activeFilter.resetFilter();
|
||||||
|
this.activeFilter.selectedCollectionId = collection.id;
|
||||||
|
this.onFilterChange.emit(this.activeFilter);
|
||||||
|
}
|
||||||
|
|
||||||
|
async toggleCollapse(node: ITreeNodeObject) {
|
||||||
|
this.onNodeCollapseStateChange.emit(node);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,58 @@
|
|||||||
|
import { Directive, EventEmitter, Input, Output } from "@angular/core";
|
||||||
|
|
||||||
|
import { ITreeNodeObject } from "jslib-common/models/domain/treeNode";
|
||||||
|
import { FolderView } from "jslib-common/models/view/folderView";
|
||||||
|
|
||||||
|
import { DynamicTreeNode } from "../models/dynamic-tree-node.model";
|
||||||
|
import { TopLevelTreeNode } from "../models/top-level-tree-node.model";
|
||||||
|
import { VaultFilter } from "../models/vault-filter.model";
|
||||||
|
|
||||||
|
@Directive()
|
||||||
|
export class FolderFilterComponent {
|
||||||
|
@Input() hide = false;
|
||||||
|
@Input() collapsedFilterNodes: Set<string>;
|
||||||
|
@Input() folderNodes: DynamicTreeNode<FolderView>;
|
||||||
|
@Input() activeFilter: VaultFilter;
|
||||||
|
|
||||||
|
@Output() onNodeCollapseStateChange: EventEmitter<ITreeNodeObject> =
|
||||||
|
new EventEmitter<ITreeNodeObject>();
|
||||||
|
@Output() onFilterChange: EventEmitter<VaultFilter> = new EventEmitter<VaultFilter>();
|
||||||
|
@Output() onAddFolder = new EventEmitter();
|
||||||
|
@Output() onEditFolder = new EventEmitter<FolderView>();
|
||||||
|
|
||||||
|
get folders() {
|
||||||
|
return this.folderNodes?.fullList;
|
||||||
|
}
|
||||||
|
|
||||||
|
get nestedFolders() {
|
||||||
|
return this.folderNodes?.nestedList;
|
||||||
|
}
|
||||||
|
|
||||||
|
readonly foldersGrouping: TopLevelTreeNode = {
|
||||||
|
id: "folders",
|
||||||
|
name: "folders",
|
||||||
|
};
|
||||||
|
|
||||||
|
applyFilter(folder: FolderView) {
|
||||||
|
this.activeFilter.resetFilter();
|
||||||
|
this.activeFilter.selectedFolder = true;
|
||||||
|
this.activeFilter.selectedFolderId = folder.id;
|
||||||
|
this.onFilterChange.emit(this.activeFilter);
|
||||||
|
}
|
||||||
|
|
||||||
|
addFolder() {
|
||||||
|
this.onAddFolder.emit();
|
||||||
|
}
|
||||||
|
|
||||||
|
editFolder(folder: FolderView) {
|
||||||
|
this.onEditFolder.emit(folder);
|
||||||
|
}
|
||||||
|
|
||||||
|
isCollapsed(node: ITreeNodeObject) {
|
||||||
|
return this.collapsedFilterNodes.has(node.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
async toggleCollapse(node: ITreeNodeObject) {
|
||||||
|
this.onNodeCollapseStateChange.emit(node);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
import { Directive, EventEmitter, Input, Output } from "@angular/core";
|
||||||
|
|
||||||
|
import { Organization } from "jslib-common/models/domain/organization";
|
||||||
|
import { ITreeNodeObject } from "jslib-common/models/domain/treeNode";
|
||||||
|
|
||||||
|
import { TopLevelTreeNode } from "../models/top-level-tree-node.model";
|
||||||
|
import { VaultFilter } from "../models/vault-filter.model";
|
||||||
|
|
||||||
|
type DisplayMode =
|
||||||
|
| "noOrganizations"
|
||||||
|
| "organizationMember"
|
||||||
|
| "singleOrganizationPolicy"
|
||||||
|
| "personalOwnershipPolicy"
|
||||||
|
| "singleOrganizationAndPersonalOwnershipPolicies";
|
||||||
|
|
||||||
|
@Directive()
|
||||||
|
export class OrganizationFilterComponent {
|
||||||
|
@Input() hide = false;
|
||||||
|
@Input() collapsedFilterNodes: Set<string>;
|
||||||
|
@Input() organizations: Organization[];
|
||||||
|
@Input() activeFilter: VaultFilter;
|
||||||
|
@Input() activePersonalOwnershipPolicy: boolean;
|
||||||
|
@Input() activeSingleOrganizationPolicy: boolean;
|
||||||
|
|
||||||
|
@Output() onNodeCollapseStateChange: EventEmitter<ITreeNodeObject> =
|
||||||
|
new EventEmitter<ITreeNodeObject>();
|
||||||
|
@Output() onFilterChange: EventEmitter<VaultFilter> = new EventEmitter<VaultFilter>();
|
||||||
|
|
||||||
|
get displayMode(): DisplayMode {
|
||||||
|
let displayMode: DisplayMode = "organizationMember";
|
||||||
|
if (this.organizations == null || this.organizations.length < 1) {
|
||||||
|
displayMode = "noOrganizations";
|
||||||
|
} else if (this.activePersonalOwnershipPolicy && !this.activeSingleOrganizationPolicy) {
|
||||||
|
displayMode = "personalOwnershipPolicy";
|
||||||
|
} else if (!this.activePersonalOwnershipPolicy && this.activeSingleOrganizationPolicy) {
|
||||||
|
displayMode = "singleOrganizationPolicy";
|
||||||
|
} else if (this.activePersonalOwnershipPolicy && this.activeSingleOrganizationPolicy) {
|
||||||
|
displayMode = "singleOrganizationAndPersonalOwnershipPolicies";
|
||||||
|
}
|
||||||
|
|
||||||
|
return displayMode;
|
||||||
|
}
|
||||||
|
|
||||||
|
get hasActiveFilter() {
|
||||||
|
return this.activeFilter.myVaultOnly || this.activeFilter.selectedOrganizationId != null;
|
||||||
|
}
|
||||||
|
|
||||||
|
readonly organizationGrouping: TopLevelTreeNode = {
|
||||||
|
id: "vaults",
|
||||||
|
name: "allVaults",
|
||||||
|
};
|
||||||
|
|
||||||
|
async applyOrganizationFilter(organization: Organization) {
|
||||||
|
this.activeFilter.selectedOrganizationId = organization.id;
|
||||||
|
this.activeFilter.myVaultOnly = false;
|
||||||
|
this.activeFilter.refreshCollectionsAndFolders = true;
|
||||||
|
this.applyFilter(this.activeFilter);
|
||||||
|
}
|
||||||
|
|
||||||
|
async applyMyVaultFilter() {
|
||||||
|
this.activeFilter.selectedOrganizationId = null;
|
||||||
|
this.activeFilter.myVaultOnly = true;
|
||||||
|
this.activeFilter.refreshCollectionsAndFolders = true;
|
||||||
|
this.applyFilter(this.activeFilter);
|
||||||
|
}
|
||||||
|
|
||||||
|
clearFilter() {
|
||||||
|
this.activeFilter.myVaultOnly = false;
|
||||||
|
this.activeFilter.selectedOrganizationId = null;
|
||||||
|
this.applyFilter(new VaultFilter(this.activeFilter));
|
||||||
|
}
|
||||||
|
|
||||||
|
private applyFilter(filter: VaultFilter) {
|
||||||
|
this.onFilterChange.emit(filter);
|
||||||
|
}
|
||||||
|
|
||||||
|
async toggleCollapse() {
|
||||||
|
this.onNodeCollapseStateChange.emit(this.organizationGrouping);
|
||||||
|
}
|
||||||
|
|
||||||
|
get isCollapsed() {
|
||||||
|
return this.collapsedFilterNodes.has(this.organizationGrouping.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
import { Directive, EventEmitter, Input, Output } from "@angular/core";
|
||||||
|
|
||||||
|
import { CipherStatus } from "../models/cipher-status.model";
|
||||||
|
import { VaultFilter } from "../models/vault-filter.model";
|
||||||
|
|
||||||
|
@Directive()
|
||||||
|
export class StatusFilterComponent {
|
||||||
|
@Input() hideFavorites = false;
|
||||||
|
@Input() hideTrash = false;
|
||||||
|
@Output() onFilterChange: EventEmitter<VaultFilter> = new EventEmitter<VaultFilter>();
|
||||||
|
@Input() activeFilter: VaultFilter;
|
||||||
|
|
||||||
|
get show() {
|
||||||
|
return !this.hideFavorites && !this.hideTrash;
|
||||||
|
}
|
||||||
|
|
||||||
|
applyFilter(cipherStatus: CipherStatus) {
|
||||||
|
this.activeFilter.resetFilter();
|
||||||
|
this.activeFilter.status = cipherStatus;
|
||||||
|
this.onFilterChange.emit(this.activeFilter);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
import { Directive, EventEmitter, Input, Output } from "@angular/core";
|
||||||
|
|
||||||
|
import { CipherType } from "jslib-common/enums/cipherType";
|
||||||
|
import { ITreeNodeObject } from "jslib-common/models/domain/treeNode";
|
||||||
|
|
||||||
|
import { TopLevelTreeNode } from "../models/top-level-tree-node.model";
|
||||||
|
import { VaultFilter } from "../models/vault-filter.model";
|
||||||
|
|
||||||
|
@Directive()
|
||||||
|
export class TypeFilterComponent {
|
||||||
|
@Input() hide = false;
|
||||||
|
@Input() collapsedFilterNodes: Set<string>;
|
||||||
|
@Input() selectedCipherType: CipherType = null;
|
||||||
|
@Input() activeFilter: VaultFilter;
|
||||||
|
|
||||||
|
@Output() onNodeCollapseStateChange: EventEmitter<ITreeNodeObject> =
|
||||||
|
new EventEmitter<ITreeNodeObject>();
|
||||||
|
@Output() onFilterChange: EventEmitter<VaultFilter> = new EventEmitter<VaultFilter>();
|
||||||
|
|
||||||
|
readonly typesNode: TopLevelTreeNode = {
|
||||||
|
id: "types",
|
||||||
|
name: "types",
|
||||||
|
};
|
||||||
|
|
||||||
|
cipherTypeEnum = CipherType; // used in the template
|
||||||
|
|
||||||
|
get isCollapsed() {
|
||||||
|
return this.collapsedFilterNodes.has(this.typesNode.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
applyFilter(cipherType: CipherType) {
|
||||||
|
this.activeFilter.resetFilter();
|
||||||
|
this.activeFilter.cipherType = cipherType;
|
||||||
|
this.onFilterChange.emit(this.activeFilter);
|
||||||
|
}
|
||||||
|
|
||||||
|
async toggleCollapse() {
|
||||||
|
this.onNodeCollapseStateChange.emit(this.typesNode);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export type CipherStatus = "all" | "favorites" | "trash";
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import { TreeNode } from "jslib-common/models/domain/treeNode";
|
||||||
|
import { CollectionView } from "jslib-common/models/view/collectionView";
|
||||||
|
import { FolderView } from "jslib-common/models/view/folderView";
|
||||||
|
|
||||||
|
export class DynamicTreeNode<T extends CollectionView | FolderView> {
|
||||||
|
fullList: T[];
|
||||||
|
nestedList: TreeNode<T>[];
|
||||||
|
|
||||||
|
hasId(id: string): boolean {
|
||||||
|
return this.fullList != null && this.fullList.filter((i: T) => i.id === id).length > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor(init?: Partial<DynamicTreeNode<T>>) {
|
||||||
|
Object.assign(this, init);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
import { ITreeNodeObject } from "jslib-common/models/domain/treeNode";
|
||||||
|
|
||||||
|
export type TopLevelTreeNodeId = "vaults" | "types" | "collections" | "folders";
|
||||||
|
export class TopLevelTreeNode implements ITreeNodeObject {
|
||||||
|
id: TopLevelTreeNodeId;
|
||||||
|
name: string; // localizationString
|
||||||
|
}
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
import { CipherType } from "jslib-common/enums/cipherType";
|
||||||
|
|
||||||
|
import { CipherStatus } from "./cipher-status.model";
|
||||||
|
|
||||||
|
export class VaultFilter {
|
||||||
|
cipherType?: CipherType;
|
||||||
|
selectedCollectionId?: string;
|
||||||
|
status?: CipherStatus;
|
||||||
|
selectedFolder = false; // This is needed because of how the "No Folder" folder works. It has a null id.
|
||||||
|
selectedFolderId?: string;
|
||||||
|
selectedOrganizationId?: string;
|
||||||
|
myVaultOnly = false;
|
||||||
|
refreshCollectionsAndFolders = false;
|
||||||
|
|
||||||
|
constructor(init?: Partial<VaultFilter>) {
|
||||||
|
Object.assign(this, init);
|
||||||
|
}
|
||||||
|
|
||||||
|
resetFilter() {
|
||||||
|
this.cipherType = null;
|
||||||
|
this.status = null;
|
||||||
|
this.selectedCollectionId = null;
|
||||||
|
this.selectedFolder = false;
|
||||||
|
this.selectedFolderId = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
resetOrganization() {
|
||||||
|
this.myVaultOnly = false;
|
||||||
|
this.selectedOrganizationId = null;
|
||||||
|
this.resetFilter();
|
||||||
|
}
|
||||||
|
}
|
||||||
95
angular/src/modules/vault-filter/vault-filter.component.ts
Normal file
95
angular/src/modules/vault-filter/vault-filter.component.ts
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
import { Directive, EventEmitter, Input, OnInit, Output } from "@angular/core";
|
||||||
|
|
||||||
|
import { Organization } from "jslib-common/models/domain/organization";
|
||||||
|
import { ITreeNodeObject } from "jslib-common/models/domain/treeNode";
|
||||||
|
import { CollectionView } from "jslib-common/models/view/collectionView";
|
||||||
|
import { FolderView } from "jslib-common/models/view/folderView";
|
||||||
|
|
||||||
|
import { DynamicTreeNode } from "./models/dynamic-tree-node.model";
|
||||||
|
import { VaultFilter } from "./models/vault-filter.model";
|
||||||
|
import { VaultFilterService } from "./vault-filter.service";
|
||||||
|
|
||||||
|
@Directive()
|
||||||
|
export class VaultFilterComponent implements OnInit {
|
||||||
|
@Input() activeFilter: VaultFilter = new VaultFilter();
|
||||||
|
@Input() hideFolders = false;
|
||||||
|
@Input() hideCollections = false;
|
||||||
|
@Input() hideFavorites = false;
|
||||||
|
@Input() hideTrash = false;
|
||||||
|
@Input() hideOrganizations = false;
|
||||||
|
|
||||||
|
@Output() onFilterChange = new EventEmitter<VaultFilter>();
|
||||||
|
|
||||||
|
isLoaded = false;
|
||||||
|
collapsedFilterNodes: Set<string>;
|
||||||
|
organizations: Organization[];
|
||||||
|
activePersonalOwnershipPolicy: boolean;
|
||||||
|
activeSingleOrganizationPolicy: boolean;
|
||||||
|
collections: DynamicTreeNode<CollectionView>;
|
||||||
|
folders: DynamicTreeNode<FolderView>;
|
||||||
|
|
||||||
|
constructor(protected vaultFilterService: VaultFilterService) {}
|
||||||
|
|
||||||
|
get displayCollections() {
|
||||||
|
return this.collections?.fullList != null && this.collections.fullList.length > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
async ngOnInit(): Promise<void> {
|
||||||
|
this.collapsedFilterNodes = await this.vaultFilterService.buildCollapsedFilterNodes();
|
||||||
|
this.organizations = await this.vaultFilterService.buildOrganizations();
|
||||||
|
if (this.organizations != null && this.organizations.length > 0) {
|
||||||
|
this.activePersonalOwnershipPolicy =
|
||||||
|
await this.vaultFilterService.checkForPersonalOwnershipPolicy();
|
||||||
|
this.activeSingleOrganizationPolicy =
|
||||||
|
await this.vaultFilterService.checkForSingleOrganizationPolicy();
|
||||||
|
}
|
||||||
|
this.folders = await this.vaultFilterService.buildFolders();
|
||||||
|
this.collections = await this.vaultFilterService.buildCollections();
|
||||||
|
this.isLoaded = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
async toggleFilterNodeCollapseState(node: ITreeNodeObject) {
|
||||||
|
if (this.collapsedFilterNodes.has(node.id)) {
|
||||||
|
this.collapsedFilterNodes.delete(node.id);
|
||||||
|
} else {
|
||||||
|
this.collapsedFilterNodes.add(node.id);
|
||||||
|
}
|
||||||
|
await this.vaultFilterService.storeCollapsedFilterNodes(this.collapsedFilterNodes);
|
||||||
|
}
|
||||||
|
|
||||||
|
async applyFilter(filter: VaultFilter) {
|
||||||
|
if (filter.refreshCollectionsAndFolders) {
|
||||||
|
await this.reloadCollectionsAndFolders(filter);
|
||||||
|
}
|
||||||
|
this.fixInvalidFilterSelections(filter);
|
||||||
|
this.onFilterChange.emit(filter);
|
||||||
|
}
|
||||||
|
|
||||||
|
async reloadCollectionsAndFolders(filter: VaultFilter) {
|
||||||
|
this.folders = await this.vaultFilterService.buildFolders(filter.selectedOrganizationId);
|
||||||
|
this.collections = filter.myVaultOnly
|
||||||
|
? null
|
||||||
|
: await this.vaultFilterService.buildCollections(filter.selectedOrganizationId);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected fixInvalidFilterSelections(filter: VaultFilter) {
|
||||||
|
this.fixInvalidFolderSelection(filter);
|
||||||
|
this.fixInvalidCollectionSelection(filter);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected fixInvalidFolderSelection(filter: VaultFilter) {
|
||||||
|
if (filter.selectedFolder && !this.folders.hasId(filter.selectedFolderId)) {
|
||||||
|
this.activeFilter.selectedFolder = false;
|
||||||
|
this.activeFilter.selectedFolderId = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
protected fixInvalidCollectionSelection(filter: VaultFilter) {
|
||||||
|
if (
|
||||||
|
filter.selectedCollectionId != null &&
|
||||||
|
!this.collections.hasId(filter.selectedCollectionId)
|
||||||
|
) {
|
||||||
|
this.activeFilter.selectedCollectionId = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
79
angular/src/modules/vault-filter/vault-filter.service.ts
Normal file
79
angular/src/modules/vault-filter/vault-filter.service.ts
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
import { CipherService } from "jslib-common/abstractions/cipher.service";
|
||||||
|
import { CollectionService } from "jslib-common/abstractions/collection.service";
|
||||||
|
import { FolderService } from "jslib-common/abstractions/folder.service";
|
||||||
|
import { OrganizationService } from "jslib-common/abstractions/organization.service";
|
||||||
|
import { PolicyService } from "jslib-common/abstractions/policy.service";
|
||||||
|
import { StateService } from "jslib-common/abstractions/state.service";
|
||||||
|
import { PolicyType } from "jslib-common/enums/policyType";
|
||||||
|
import { Organization } from "jslib-common/models/domain/organization";
|
||||||
|
import { CollectionView } from "jslib-common/models/view/collectionView";
|
||||||
|
import { FolderView } from "jslib-common/models/view/folderView";
|
||||||
|
|
||||||
|
import { DynamicTreeNode } from "./models/dynamic-tree-node.model";
|
||||||
|
|
||||||
|
export class VaultFilterService {
|
||||||
|
constructor(
|
||||||
|
protected stateService: StateService,
|
||||||
|
protected organizationService: OrganizationService,
|
||||||
|
protected folderService: FolderService,
|
||||||
|
protected cipherService: CipherService,
|
||||||
|
protected collectionService: CollectionService,
|
||||||
|
protected policyService: PolicyService
|
||||||
|
) {}
|
||||||
|
|
||||||
|
async storeCollapsedFilterNodes(collapsedFilterNodes: Set<string>): Promise<void> {
|
||||||
|
await this.stateService.setCollapsedGroupings(Array.from(collapsedFilterNodes));
|
||||||
|
}
|
||||||
|
|
||||||
|
async buildCollapsedFilterNodes(): Promise<Set<string>> {
|
||||||
|
return new Set(await this.stateService.getCollapsedGroupings());
|
||||||
|
}
|
||||||
|
|
||||||
|
async buildOrganizations(): Promise<Organization[]> {
|
||||||
|
return await this.organizationService.getAll();
|
||||||
|
}
|
||||||
|
|
||||||
|
async buildFolders(organizationId?: string): Promise<DynamicTreeNode<FolderView>> {
|
||||||
|
const storedFolders = await this.folderService.getAllDecrypted();
|
||||||
|
let folders: FolderView[];
|
||||||
|
if (organizationId != null) {
|
||||||
|
const ciphers = await this.cipherService.getAllDecrypted();
|
||||||
|
const orgCiphers = ciphers.filter((c) => c.organizationId == organizationId);
|
||||||
|
folders = storedFolders.filter(
|
||||||
|
(f) =>
|
||||||
|
orgCiphers.filter((oc) => oc.folderId == f.id).length > 0 ||
|
||||||
|
ciphers.filter((c) => c.folderId == f.id).length < 1
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
folders = storedFolders;
|
||||||
|
}
|
||||||
|
const nestedFolders = await this.folderService.getAllNested(folders);
|
||||||
|
return new DynamicTreeNode<FolderView>({
|
||||||
|
fullList: folders,
|
||||||
|
nestedList: nestedFolders,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async buildCollections(organizationId?: string): Promise<DynamicTreeNode<CollectionView>> {
|
||||||
|
const storedCollections = await this.collectionService.getAllDecrypted();
|
||||||
|
let collections: CollectionView[];
|
||||||
|
if (organizationId != null) {
|
||||||
|
collections = storedCollections.filter((c) => c.organizationId === organizationId);
|
||||||
|
} else {
|
||||||
|
collections = storedCollections;
|
||||||
|
}
|
||||||
|
const nestedCollections = await this.collectionService.getAllNested(collections);
|
||||||
|
return new DynamicTreeNode<CollectionView>({
|
||||||
|
fullList: collections,
|
||||||
|
nestedList: nestedCollections,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async checkForSingleOrganizationPolicy(): Promise<boolean> {
|
||||||
|
return await this.policyService.policyAppliesToUser(PolicyType.SingleOrg);
|
||||||
|
}
|
||||||
|
|
||||||
|
async checkForPersonalOwnershipPolicy(): Promise<boolean> {
|
||||||
|
return await this.policyService.policyAppliesToUser(PolicyType.PersonalOwnership);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user