44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactorings

Browse Source
This commit is contained in:
undergroundwires
2020-01-11 05:13:03 +01:00
parent 95baf3175b
commit e3f82e069e
9 changed files with 159 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/global.d.ts vendored
View File

@@ -37,6 +37,18 @@ declare module 'liquor-tree' {
children: ReadonlyArray<ILiquorTreeNewNode> | undefined;
data: ICustomLiquorTreeData;
}
// https://amsik.github.io/liquor-tree/#Component-Options
export interface ILiquorTreeOptions {
multiple: boolean;
checkbox: boolean;
checkOnSelect: boolean;
autoCheckChildren: boolean;
parentSelect: boolean;
keyboardNavigation: boolean;
deletion: (node: ILiquorTreeExistingNode) => void;
filter: ILiquorTreeFilter;
}
// https://github.com/amsik/liquor-tree/blob/master/src/lib/Node.js
interface ILiquorTreeNodeState {
@@ -58,7 +70,7 @@ declare module 'liquor-tree' {
// https://github.com/amsik/liquor-tree/blob/master/src/components/TreeRoot.vue
interface ILiquorTreeFilter {
emptyText: string;
matcher(query: string, node: ILiquorTreeNewNode): boolean;
matcher(query: string, node: ILiquorTreeExistingNode): boolean;
}
const LiquorTree: PluginObject<any> & VueClass<any>;

1
src/presentation/Scripts/Cards/CardListItem.vue
View File

@@ -52,7 +52,6 @@ export default class CardListItem extends StatefulVue {
this.cardTitle = value ? await this.getCardTitleAsync(value) : undefined;
}
private async getCardTitleAsync(categoryId: number): Promise<string | undefined> {
const state = await this.getCurrentStateAsync();
const category = state.app.findCategory(this.categoryId);

5
src/presentation/Scripts/Grouping/TheGrouper.vue
View File

@@ -20,15 +20,18 @@ import { StatefulVue } from '@/presentation/StatefulVue';
import { IApplicationState } from '@/application/State/IApplicationState';
import { Grouping } from './Grouping';
const DefaultGrouping = Grouping.Cards;
@Component
export default class TheGrouper extends StatefulVue {
public cardsSelected = false;
public noneSelected = false;
private currentGrouping: Grouping;
public mounted() {
this.changeGrouping(Grouping.Cards);
this.changeGrouping(DefaultGrouping);
}
public groupByCard() {

28
src/presentation/Scripts/ScriptsTree/ScriptNodeParser.ts
View File

@@ -1,22 +1,22 @@
import { IApplicationState, IUserSelection } from '@/application/State/IApplicationState';
import { IApplication } from './../../../domain/IApplication';
import { ICategory, IScript } from '@/domain/ICategory';
import { INode } from './SelectableTree/INode';
export function parseAllCategories(state: IApplicationState): INode[] | undefined {
export function parseAllCategories(app: IApplication): INode[] | undefined {
const nodes = new Array<INode>();
for (const category of state.app.categories) {
const children = parseCategoryRecursively(category, state.selection);
for (const category of app.categories) {
const children = parseCategoryRecursively(category);
nodes.push(convertCategoryToNode(category, children));
}
return nodes;
}
export function parseSingleCategory(categoryId: number, state: IApplicationState): INode[] | undefined {
const category = state.app.findCategory(categoryId);
export function parseSingleCategory(categoryId: number, app: IApplication): INode[] | undefined {
const category = app.findCategory(categoryId);
if (!category) {
throw new Error(`Category with id ${categoryId} does not exist`);
}
const tree = parseCategoryRecursively(category, state.selection);
const tree = parseCategoryRecursively(category);
return tree;
}
@@ -24,25 +24,23 @@ export function getScriptNodeId(script: IScript): string {
return script.id;
}
export function getCategoryNodeId(category: ICategory): string {
return `${category.id}`;
return `Category${category.id}`;
}
function parseCategoryRecursively(
parentCategory: ICategory,
selection: IUserSelection): INode[] {
parentCategory: ICategory): INode[] {
if (!parentCategory) { throw new Error('parentCategory is undefined'); }
if (!selection) { throw new Error('selection is undefined'); }
const nodes = new Array<INode>();
if (parentCategory.subCategories && parentCategory.subCategories.length > 0) {
for (const subCategory of parentCategory.subCategories) {
const subCategoryNodes = parseCategoryRecursively(subCategory, selection);
const subCategoryNodes = parseCategoryRecursively(subCategory);
nodes.push(convertCategoryToNode(subCategory, subCategoryNodes));
}
}
if (parentCategory.scripts && parentCategory.scripts.length > 0) {
for (const script of parentCategory.scripts) {
nodes.push(convertScriptToNode(script, selection));
nodes.push(convertScriptToNode(script));
}
}
return nodes;
@@ -53,17 +51,15 @@ function convertCategoryToNode(
return {
id: getCategoryNodeId(category),
text: category.name,
selected: false,
children,
documentationUrls: category.documentationUrls,
};
}
function convertScriptToNode(script: IScript, selection: IUserSelection): INode {
function convertScriptToNode(script: IScript): INode {
return {
id: getScriptNodeId(script),
text: script.name,
selected: selection.isSelected(script),
children: undefined,
documentationUrls: script.documentationUrls,
};

30
src/presentation/Scripts/ScriptsTree/ScriptsTree.vue
View File

@@ -2,7 +2,7 @@
<span id="container">
<span v-if="nodes != null && nodes.length > 0">
<SelectableTree
:nodes="nodes"
:initialNodes="nodes"
:selectedNodeIds="selectedNodeIds"
:filterPredicate="filterPredicate"
:filterText="filterText"
@@ -20,7 +20,6 @@
import { IRepository } from '@/infrastructure/Repository/IRepository';
import { IScript } from '@/domain/IScript';
import { ICategory } from '@/domain/ICategory';
import { IApplicationState, IUserSelection } from '@/application/State/IApplicationState';
import { IFilterResult } from '@/application/State/Filter/IFilterResult';
import { parseAllCategories, parseSingleCategory, getScriptNodeId, getCategoryNodeId } from './ScriptNodeParser';
@@ -35,8 +34,8 @@
export default class ScriptsTree extends StatefulVue {
@Prop() public categoryId?: number;
public nodes?: INode[] = null;
public selectedNodeIds?: string[] = null;
public nodes?: ReadonlyArray<INode> = null;
public selectedNodeIds?: ReadonlyArray<string> = [];
public filterText?: string = null;
private filtered?: IFilterResult;
@@ -56,7 +55,7 @@
return; // only interested in script nodes
}
const state = await this.getCurrentStateAsync();
if (node.selected) {
if (!this.selectedNodeIds.some((id) => id === node.id)) {
state.selection.addSelectedScript(node.id);
} else {
state.selection.removeSelectedScript(node.id);
@@ -67,10 +66,12 @@
public async initializeNodesAsync(categoryId?: number) {
const state = await this.getCurrentStateAsync();
if (categoryId) {
this.nodes = parseSingleCategory(categoryId, state);
this.nodes = parseSingleCategory(categoryId, state.app);
} else {
this.nodes = parseAllCategories(state);
this.nodes = parseAllCategories(state.app);
}
this.selectedNodeIds = state.selection.selectedScripts
.map((script) => getScriptNodeId(script));
}
public filterPredicate(node: INode): boolean {
@@ -80,8 +81,9 @@
(category: ICategory) => node.id === getCategoryNodeId(category));
}
private handleSelectionChanged(selectedScripts: ReadonlyArray<IScript>) {
this.nodes = this.nodes.map((node: INode) => updateNodeSelection(node, selectedScripts));
private handleSelectionChanged(selectedScripts: ReadonlyArray<IScript>): void {
this.selectedNodeIds = selectedScripts
.map((node) => node.id);
}
private handleFilterRemoved() {
@@ -94,16 +96,6 @@
}
}
function updateNodeSelection(node: INode, selectedScripts: ReadonlyArray<IScript>): INode {
return {
id: node.id,
text: node.text,
selected: selectedScripts.some((script) => script.id === node.id),
children: node.children ? node.children.map((child) => updateNodeSelection(child, selectedScripts)) : [],
documentationUrls: node.documentationUrls,
};
}
</script>
<style scoped lang="scss">

1
src/presentation/Scripts/ScriptsTree/SelectableTree/INode.ts
View File

@@ -3,5 +3,4 @@ export interface INode {
readonly text: string;
readonly documentationUrls: ReadonlyArray<string>;
readonly children?: ReadonlyArray<INode>;
readonly selected: boolean;
}

2
src/presentation/Scripts/ScriptsTree/SelectableTree/Node.vue
View File

@@ -7,7 +7,7 @@
<a :href="url"
:alt="url"
target="_blank" class="docs"
v-tooltip.top-center="url"
v-tooltip.top-center="url"
v-on:click.stop>
<font-awesome-icon :icon="['fas', 'info-circle']" />
</a>

32
src/presentation/Scripts/ScriptsTree/SelectableTree/NodeTranslator.ts Normal file
View File

@@ -0,0 +1,32 @@
import { ILiquorTreeNewNode, ILiquorTreeExistingNode } from 'liquor-tree';
import { INode } from './INode';
// Functions to translate INode to LiqourTree models and vice versa for anti-corruption
export function convertExistingToNode(liquorTreeNode: ILiquorTreeExistingNode): INode {
if (!liquorTreeNode) { throw new Error('liquorTreeNode is undefined'); }
return {
id: liquorTreeNode.id,
text: liquorTreeNode.data.text,
// selected: liquorTreeNode.states && liquorTreeNode.states.checked,
children: (!liquorTreeNode.children || liquorTreeNode.children.length === 0)
? [] : liquorTreeNode.children.map((childNode) => convertExistingToNode(childNode)),
documentationUrls: liquorTreeNode.data.documentationUrls,
};
}
export function toNewLiquorTreeNode(node: INode): ILiquorTreeNewNode {
if (!node) { throw new Error('node is undefined'); }
return {
id: node.id,
text: node.text,
state: {
checked: false,
},
children: (!node.children || node.children.length === 0) ? [] :
node.children.map((childNode) => toNewLiquorTreeNode(childNode)),
data: {
documentationUrls: node.documentationUrls,
},
};
}

193
src/presentation/Scripts/ScriptsTree/SelectableTree/SelectableTree.vue
View File

@@ -1,8 +1,8 @@
<template>
<span>
<span v-if="initialNodes != null && initialNodes.length > 0">
<span v-if="initialLiquourTreeNodes != null && initialLiquourTreeNodes.length > 0">
<tree :options="liquorTreeOptions"
:data="this.initialNodes"
:data="initialLiquourTreeNodes"
v-on:node:checked="nodeSelected($event)"
v-on:node:unchecked="nodeSelected($event)"
ref="treeElement"
@@ -18,9 +18,10 @@
<script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator';
import LiquorTree, { ILiquorTreeNewNode, ILiquorTreeExistingNode, ILiquorTree } from 'liquor-tree';
import LiquorTree, { ILiquorTreeNewNode, ILiquorTreeExistingNode, ILiquorTree, ILiquorTreeOptions } from 'liquor-tree';
import Node from './Node.vue';
import { INode } from './INode';
import { convertExistingToNode, toNewLiquorTreeNode } from './NodeTranslator';
export type FilterPredicate = (node: INode) => boolean;
/** Wrapper for Liquor Tree, reveals only abstracted INode for communication */
@@ -33,28 +34,31 @@
export default class SelectableTree extends Vue {
@Prop() public filterPredicate?: FilterPredicate;
@Prop() public filterText?: string;
@Prop() public nodes?: INode[];
@Prop() public selectedNodeIds?: ReadonlyArray<string>;
@Prop() public initialNodes?: ReadonlyArray<INode>;
public initialNodes?: ILiquorTreeNewNode[] = null;
public liquorTreeOptions = this.getLiquorTreeOptions();
public initialLiquourTreeNodes?: ILiquorTreeNewNode[] = null;
public liquorTreeOptions = DefaultOptions;
public convertExistingToNode = convertExistingToNode;
public mounted() {
// console.log('Mounted', 'initial nodes', this.nodes);
// console.log('Mounted', 'initial model', this.getLiquorTreeApi().model);
if (this.nodes) {
this.initialNodes = this.nodes.map((node) => this.toLiquorTreeNode(node));
if (this.initialNodes) {
const initialNodes = this.initialNodes.map((node) => toNewLiquorTreeNode(node));
if (this.selectedNodeIds) {
recurseDown(initialNodes,
(node) => node.state.checked = this.selectedNodeIds.includes(node.id));
}
this.initialLiquourTreeNodes = initialNodes;
} else {
throw new Error('Initial nodes are null or empty');
}
if (this.filterText) {
this.updateFilterText(this.filterText);
}
}
public nodeSelected(node: ILiquorTreeExistingNode) {
this.$emit('nodeSelected', this.convertExistingToNode(node));
this.$emit('nodeSelected', convertExistingToNode(node));
return;
}
@@ -64,104 +68,28 @@
if (!filterText) {
api.clearFilter();
} else {
api.filter('filtered'); // text does not matter, it'll trigger the predicate
api.filter('filtered'); // text does not matter, it'll trigger the filterPredicate
}
}
@Watch('nodes', {deep: true})
public setSelectedStatus(nodes: |ReadonlyArray<INode>) {
if (!nodes || nodes.length === 0) {
throw new Error('Updated nodes are null or empty');
@Watch('selectedNodeIds')
public setSelectedStatus(selectedNodeIds: ReadonlyArray<string>) {
if (!selectedNodeIds) {
throw new Error('Selected nodes are undefined');
}
// Update old node properties, re-setting it changes expanded status etc.
// It'll not be needed when this is merged: https://github.com/amsik/liquor-tree/pull/141
const updateCheckedState = (
oldNodes: ReadonlyArray<ILiquorTreeExistingNode>,
updatedNodes: ReadonlyArray<INode>): ILiquorTreeNewNode[] => {
const newNodes = new Array<ILiquorTreeNewNode>();
for (const oldNode of oldNodes) {
for (const updatedNode of updatedNodes) {
if (oldNode.id === updatedNode.id) {
const newState = oldNode.states;
newState.checked = updatedNode.selected;
newNodes.push({
id: oldNode.id,
text: updatedNode.text,
children: oldNode.children == null ? [] :
updateCheckedState(
oldNode.children,
updatedNode.children),
state: newState,
data: {
documentationUrls: oldNode.data.documentationUrls,
},
});
}
}
}
return newNodes;
};
const newModel = updateCheckedState(
this.getLiquorTreeApi().model, nodes);
this.getLiquorTreeApi().setModel(newModel);
}
private convertItem(liquorTreeNode: ILiquorTreeNewNode): INode {
if (!liquorTreeNode) { throw new Error('liquorTreeNode is undefined'); }
return {
id: liquorTreeNode.id,
text: liquorTreeNode.text,
selected: liquorTreeNode.state && liquorTreeNode.state.checked,
children: (!liquorTreeNode.children || liquorTreeNode.children.length === 0)
? [] : liquorTreeNode.children.map((childNode) => this.convertItem(childNode)),
documentationUrls: liquorTreeNode.data.documentationUrls,
};
}
private convertExistingToNode(liquorTreeNode: ILiquorTreeExistingNode): INode {
if (!liquorTreeNode) { throw new Error('liquorTreeNode is undefined'); }
return {
id: liquorTreeNode.id,
text: liquorTreeNode.data.text,
selected: liquorTreeNode.states && liquorTreeNode.states.checked,
children: (!liquorTreeNode.children || liquorTreeNode.children.length === 0)
? [] : liquorTreeNode.children.map((childNode) => this.convertExistingToNode(childNode)),
documentationUrls: liquorTreeNode.data.documentationUrls,
};
}
private toLiquorTreeNode(node: INode): ILiquorTreeNewNode {
if (!node) { throw new Error('node is undefined'); }
return {
id: node.id,
text: node.text,
state: {
checked: node.selected,
},
children: (!node.children || node.children.length === 0) ? [] :
node.children.map((childNode) => this.toLiquorTreeNode(childNode)),
data: {
documentationUrls: node.documentationUrls,
},
};
}
private getLiquorTreeOptions(): any {
return {
checkbox: true,
checkOnSelect: true,
deletion: (node) => !node.children || node.children.length === 0,
filter: {
matcher: (query: string, node: ILiquorTreeExistingNode) => {
if (!this.filterPredicate) {
throw new Error('Cannot filter as predicate is null');
}
return this.filterPredicate(this.convertExistingToNode(node));
},
emptyText: '🕵️Hmm.. Can not see one 🧐',
},
};
const newNodes = updateCheckedState(this.getLiquorTreeApi().model, selectedNodeIds);
this.getLiquorTreeApi().setModel(newNodes);
/* Alternative:
this.getLiquorTreeApi().recurseDown((node) => {
node.states.checked = selectedNodeIds.includes(node.id);
});
Problem: Does not check their parent if all children are checked, because it does not
trigger update on parent as we work with scripts not categories. */
/* Alternative:
this.getLiquorTreeApi().recurseDown((node) => {
if(selectedNodeIds.includes(node.id)) { node.select(); } else { node.unselect(); }
});
Problem: Emits nodeSelected() event again which will cause an infinite loop. */
}
private getLiquorTreeApi(): ILiquorTree {
@@ -172,6 +100,57 @@
}
}
function recurseDown(
nodes: ReadonlyArray<ILiquorTreeNewNode>,
handler: (node: ILiquorTreeNewNode) => void) {
for (const node of nodes) {
handler(node);
if (node.children) {
recurseDown(node.children, handler);
}
}
}
function updateCheckedState(
oldNodes: ReadonlyArray<ILiquorTreeExistingNode>,
selectedNodeIds: ReadonlyArray<string>): ReadonlyArray<ILiquorTreeNewNode> {
const result = new Array<ILiquorTreeNewNode>();
for (const oldNode of oldNodes) {
const newState = oldNode.states;
newState.checked = selectedNodeIds.some((id) => id === oldNode.id);
const newNode: ILiquorTreeNewNode = {
id: oldNode.id,
text: oldNode.data.text,
data: {
documentationUrls: oldNode.data.documentationUrls,
},
children: oldNode.children == null ? [] :
updateCheckedState(oldNode.children, selectedNodeIds),
state: newState,
};
result.push(newNode);
}
return result;
}
const DefaultOptions: ILiquorTreeOptions = {
multiple: true,
checkbox: true,
checkOnSelect: true,
autoCheckChildren: true,
parentSelect: false,
keyboardNavigation: true,
deletion: (node) => !node.children || node.children.length === 0,
filter: {
matcher: (query: string, node: ILiquorTreeExistingNode) => {
if (!this.filterPredicate) {
throw new Error('Cannot filter as predicate is null');
}
return this.filterPredicate(convertExistingToNode(node));
},
emptyText: '🕵️Hmm.. Can not see one 🧐',
},
};
</script>