65f121c451
Key highlights: - Written from scratch to cater specifically to privacy.sexy's needs and requirements. - The visual look mimics the previous component with minimal changes, but its internal code is completely rewritten. - Lays groundwork for future functionalities like the "expand all" button a flat view mode as discussed in #158. - Facilitates the transition to Vue 3 by omitting the Vue 2.0 dependent `liquour-tree` as part of #230. Improvements and features: - Caching for quicker node queries. - Gradual rendering of nodes that introduces a noticable boost in performance, particularly during search/filtering. - `TreeView` solely governs the check states of branch nodes. Changes: - Keyboard interactions now alter the background color to highlight the focused item. Previously, it was changing the color of the text. - Better state management with clear separation of concerns: - `TreeView` exclusively manages indeterminate states. - `TreeView` solely governs the check states of branch nodes. - Introduce transaction pattern to update state in batches to minimize amount of events handled. - Improve keyboard focus, style background instead of foreground. Use hover/touch color on keyboard focus. - `SelectableTree` has been removed. Instead, `TreeView` is now directly integrated with `ScriptsTree`. - `ScriptsTree` has been refactored to incorporate hooks for clearer code and separation of duties. - Adopt Vue-idiomatic bindings instead of keeping a reference of the tree component. - Simplify and change filter event management. - Abandon global styles in favor of class-scoped styles. - Use global mixins with descriptive names to clarify indended functionality.
67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
import { IApplicationCode } from '@/application/Context/State/Code/IApplicationCode';
|
|
import { IUserFilter } from '@/application/Context/State/Filter/IUserFilter';
|
|
import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
|
|
import { OperatingSystem } from '@/domain/OperatingSystem';
|
|
import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
|
|
import { IScript } from '@/domain/IScript';
|
|
import { ScriptStub } from '@tests/unit/shared/Stubs/ScriptStub';
|
|
import { ICategoryCollection } from '@/domain/ICategoryCollection';
|
|
import { IUserSelection } from '@/application/Context/State/Selection/IUserSelection';
|
|
import { CategoryCollectionStub } from './CategoryCollectionStub';
|
|
import { UserSelectionStub } from './UserSelectionStub';
|
|
import { UserFilterStub } from './UserFilterStub';
|
|
import { ApplicationCodeStub } from './ApplicationCodeStub';
|
|
import { CategoryStub } from './CategoryStub';
|
|
|
|
export class CategoryCollectionStateStub implements ICategoryCollectionState {
|
|
public readonly code: IApplicationCode = new ApplicationCodeStub();
|
|
|
|
public filter: IUserFilter = new UserFilterStub();
|
|
|
|
public get os(): OperatingSystem {
|
|
return this.collection.os;
|
|
}
|
|
|
|
public collection: ICategoryCollection = new CategoryCollectionStub();
|
|
|
|
public selection: IUserSelection = new UserSelectionStub([]);
|
|
|
|
constructor(readonly allScripts: IScript[] = [new ScriptStub('script-id')]) {
|
|
this.selection = new UserSelectionStub(allScripts);
|
|
this.collection = new CategoryCollectionStub()
|
|
.withOs(this.os)
|
|
.withTotalScripts(this.allScripts.length)
|
|
.withAction(new CategoryStub(0).withScripts(...allScripts));
|
|
}
|
|
|
|
public withCollection(collection: ICategoryCollection): this {
|
|
this.collection = collection;
|
|
return this;
|
|
}
|
|
|
|
public withOs(os: OperatingSystem): this {
|
|
if (this.collection instanceof CategoryCollectionStub) {
|
|
this.collection = this.collection.withOs(os);
|
|
} else {
|
|
this.collection = new CategoryCollectionStub().withOs(os);
|
|
}
|
|
return this;
|
|
}
|
|
|
|
public withFilter(filter: IUserFilter): this {
|
|
this.filter = filter;
|
|
return this;
|
|
}
|
|
|
|
public withSelectedScripts(initialScripts: readonly SelectedScript[]): this {
|
|
return this.withSelection(
|
|
new UserSelectionStub([]).withSelectedScripts(initialScripts),
|
|
);
|
|
}
|
|
|
|
public withSelection(selection: IUserSelection) {
|
|
this.selection = selection;
|
|
return this;
|
|
}
|
|
}
|