112 lines
3.7 KiB
Vue
112 lines
3.7 KiB
Vue
<template>
|
|
<span id="container">
|
|
<span v-if="nodes != null && nodes.length > 0">
|
|
<SelectableTree
|
|
:nodes="nodes"
|
|
:selectedNodeIds="selectedNodeIds"
|
|
:filterPredicate="filterPredicate"
|
|
:filterText="filterText"
|
|
v-on:nodeSelected="checkNodeAsync($event)">
|
|
</SelectableTree>
|
|
</span>
|
|
<span v-else>Nooo 😢</span>
|
|
</span>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
|
|
import { StatefulVue } from '@/presentation/StatefulVue';
|
|
import { Category } from '@/domain/Category';
|
|
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';
|
|
import SelectableTree, { FilterPredicate } from './SelectableTree/SelectableTree.vue';
|
|
import { INode } from './SelectableTree/INode';
|
|
|
|
@Component({
|
|
components: {
|
|
SelectableTree,
|
|
},
|
|
})
|
|
export default class ScriptsTree extends StatefulVue {
|
|
@Prop() public categoryId?: number;
|
|
|
|
public nodes?: INode[] = null;
|
|
public selectedNodeIds?: string[] = null;
|
|
public filterText?: string = null;
|
|
|
|
private filtered?: IFilterResult;
|
|
|
|
public async mounted() {
|
|
const state = await this.getCurrentStateAsync();
|
|
// React to state changes
|
|
state.selection.changed.on(this.handleSelectionChanged);
|
|
state.filter.filterRemoved.on(this.handleFilterRemoved);
|
|
state.filter.filtered.on(this.handleFiltered);
|
|
// Update initial state
|
|
await this.initializeNodesAsync(this.categoryId);
|
|
}
|
|
|
|
public async checkNodeAsync(node: INode) {
|
|
if (node.children != null && node.children.length > 0) {
|
|
return; // only interested in script nodes
|
|
}
|
|
const state = await this.getCurrentStateAsync();
|
|
if (node.selected) {
|
|
state.selection.addSelectedScript(node.id);
|
|
} else {
|
|
state.selection.removeSelectedScript(node.id);
|
|
}
|
|
}
|
|
|
|
@Watch('categoryId')
|
|
public async initializeNodesAsync(categoryId?: number) {
|
|
const state = await this.getCurrentStateAsync();
|
|
if (categoryId) {
|
|
this.nodes = parseSingleCategory(categoryId, state);
|
|
} else {
|
|
this.nodes = parseAllCategories(state);
|
|
}
|
|
}
|
|
|
|
public filterPredicate(node: INode): boolean {
|
|
return this.filtered.scriptMatches.some(
|
|
(script: IScript) => node.id === getScriptNodeId(script))
|
|
|| this.filtered.categoryMatches.some(
|
|
(category: ICategory) => node.id === getCategoryNodeId(category));
|
|
}
|
|
|
|
private handleSelectionChanged(selectedScripts: ReadonlyArray<IScript>) {
|
|
this.nodes = this.nodes.map((node: INode) => updateNodeSelection(node, selectedScripts));
|
|
}
|
|
|
|
private handleFilterRemoved() {
|
|
this.filterText = '';
|
|
}
|
|
|
|
private handleFiltered(result: IFilterResult) {
|
|
this.filterText = result.query;
|
|
this.filtered = result;
|
|
}
|
|
}
|
|
|
|
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">
|
|
|
|
</style>
|