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

🔍 support for search

Browse Source
This commit is contained in:
undergroundwires
2020-01-09 23:02:36 +01:00
parent cafe6e809a
commit 89862b2775
19 changed files with 202 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@@ -4,6 +4,9 @@
## [Unreleased]
- Added search
- Some styling improvements
## [0.3.0] - 2020-01-09
- Added support for grouping

19
src/App.vue
View File

@@ -1,9 +1,8 @@
<template>
<div id="app">
<div class="wrapper">
<TheHeader class="row"
github-url="https://github.com/undergroundwires/privacy.sexy" />
<!-- <TheSearchBar> </TheSearchBar> -->
<TheHeader class="row" />
<TheSearchBar class="row" />
<TheScripts class="row"/>
<TheCodeArea class="row" theme="xcode" />
<TheCodeButtons class="row" />
@@ -15,20 +14,20 @@
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { ApplicationState, IApplicationState } from '@/application/State/ApplicationState';
import TheHeader from './presentation/TheHeader.vue';
import TheFooter from './presentation/TheFooter.vue';
import TheCodeArea from './presentation/TheCodeArea.vue';
import TheCodeButtons from './presentation/TheCodeButtons.vue';
import TheSearchBar from './presentation/TheSearchBar.vue';
import TheScripts from './presentation/Scripts/TheScripts.vue';
import TheHeader from '@/presentation/TheHeader.vue';
import TheFooter from '@/presentation/TheFooter.vue';
import TheCodeArea from '@/presentation/TheCodeArea.vue';
import TheCodeButtons from '@/presentation/TheCodeButtons.vue';
import TheSearchBar from '@/presentation/TheSearchBar.vue';
import TheScripts from '@/presentation/Scripts/TheScripts.vue';
@Component({
components: {
TheHeader,
TheCodeArea,
TheCodeButtons,
TheSearchBar,
TheScripts,
TheSearchBar,
TheFooter,
},
})

8
src/application/Parser/ApplicationParser.ts
View File

@@ -4,8 +4,6 @@ import applicationFile from 'js-yaml-loader!./../application.yaml';
import { parseCategory } from './CategoryParser';
export function parseApplication(): Application {
const name = applicationFile.name as string;
const version = applicationFile.version as number;
const categories = new Array<Category>();
if (!applicationFile.actions || applicationFile.actions.length <= 0) {
throw new Error('Application does not define any action');
@@ -14,6 +12,10 @@ export function parseApplication(): Application {
const category = parseCategory(action);
categories.push(category);
}
const app = new Application(name, version, categories);
const app = new Application(
applicationFile.name,
applicationFile.repositoryUrl,
applicationFile.version,
categories);
return app;
}

18
src/application/State/Filter/FilterResult.ts Normal file
View File

@@ -0,0 +1,18 @@
import { IFilterResult } from './IFilterResult';
import { IScript } from '@/domain/Script';
import { ICategory } from '@/domain/ICategory';
export class FilterResult implements IFilterResult {
constructor(
public readonly scriptMatches: ReadonlyArray<IScript>,
public readonly categoryMatches: ReadonlyArray<ICategory>,
public readonly query: string) {
if (!query) { throw new Error('Query is empty or undefined'); }
if (!scriptMatches) { throw new Error('Script matches is undefined'); }
if (!categoryMatches) { throw new Error('Category matches is undefined'); }
}
public hasAnyMatches(): boolean {
return this.scriptMatches.length > 0
|| this.categoryMatches.length > 0;
}
}

5
src/application/State/Filter/IFilterMatches.ts → src/application/State/Filter/IFilterResult.ts
View File

@@ -1,7 +1,8 @@
import { IScript, ICategory } from '@/domain/ICategory';
export interface IFilterMatches {
readonly scriptMatches: ReadonlyArray<IScript>;
export interface IFilterResult {
readonly categoryMatches: ReadonlyArray<ICategory>;
readonly scriptMatches: ReadonlyArray<IScript>;
readonly query: string;
hasAnyMatches(): boolean;
}

4
src/application/State/Filter/IUserFilter.ts
View File

@@ -1,8 +1,8 @@
import { IFilterMatches } from './IFilterMatches';
import { IFilterResult } from './IFilterResult';
import { ISignal } from '@/infrastructure/Events/Signal';
export interface IUserFilter {
readonly filtered: ISignal<IFilterMatches>;
readonly filtered: ISignal<IFilterResult>;
readonly filterRemoved: ISignal<void>;
setFilter(filter: string): void;
removeFilter(): void;

20
src/application/State/Filter/UserFilter.ts
View File

@@ -1,10 +1,11 @@
import { IFilterMatches } from './IFilterMatches';
import { FilterResult } from './FilterResult';
import { IFilterResult } from './IFilterResult';
import { Application } from '../../../domain/Application';
import { IUserFilter } from './IUserFilter';
import { Signal } from '@/infrastructure/Events/Signal';
export class UserFilter implements IUserFilter {
public readonly filtered = new Signal<IFilterMatches>();
public readonly filtered = new Signal<IFilterResult>();
public readonly filterRemoved = new Signal<void>();
constructor(private application: Application) {
@@ -16,14 +17,17 @@ export class UserFilter implements IUserFilter {
throw new Error('Filter must be defined and not empty. Use removeFilter() to remove the filter');
}
const filteredScripts = this.application.getAllScripts().filter(
(script) => script.name.toLowerCase().includes(filter.toLowerCase()) ||
(script) =>
script.name.toLowerCase().includes(filter.toLowerCase()) ||
script.code.toLowerCase().includes(filter.toLowerCase()));
const filteredCategories = this.application.getAllCategories().filter(
(script) => script.name.toLowerCase().includes(filter.toLowerCase()));
const matches: IFilterMatches = {
scriptMatches: filteredScripts,
categoryMatches: null,
query: filter,
};
const matches = new FilterResult(
filteredScripts,
filteredCategories,
filter,
);
this.filtered.notify(matches);
}

1
src/application/application.yaml
View File

@@ -1,5 +1,6 @@
name: privacy.sexy
version: 0.3.0
repositoryUrl: https://github.com/undergroundwires/privacy.sexy
actions:
-
category: Privacy cleanup

1
src/application/application.yaml.d.ts vendored
View File

@@ -20,6 +20,7 @@ declare module 'js-yaml-loader!*' {
interface ApplicationYaml {
name: string;
version: number;
repositoryUrl: string;
actions: ReadonlyArray<YamlCategory>;
}

14
src/domain/Application.ts
View File

@@ -11,14 +11,12 @@ export class Application implements IApplication {
constructor(
public readonly name: string,
public readonly repositoryUrl: string,
public readonly version: number,
public readonly categories: ReadonlyArray<ICategory>) {
if (!name) {
throw Error('Application has no name');
}
if (!version) {
throw Error('Version cannot be zero');
}
if (!name) { throw Error('Application has no name'); }
if (!repositoryUrl) { throw Error('Application has no repository url'); }
if (!version) { throw Error('Version cannot be zero'); }
this.flattened = flatten(categories);
if (this.flattened.allCategories.length === 0) {
throw new Error('Application must consist of at least one category');
@@ -48,6 +46,10 @@ export class Application implements IApplication {
public getAllScripts(): IScript[] {
return this.flattened.allScripts;
}
public getAllCategories(): ICategory[] {
return this.flattened.allCategories;
}
}
function ensureNoDuplicates<TKey>(entities: ReadonlyArray<IEntity<TKey>>) {

2
src/domain/IApplication.ts
View File

@@ -3,6 +3,7 @@ import { ICategory } from '@/domain/ICategory';
export interface IApplication {
readonly name: string;
readonly repositoryUrl: string;
readonly version: number;
readonly categories: ReadonlyArray<ICategory>;
readonly totalScripts: number;
@@ -12,6 +13,7 @@ export interface IApplication {
findCategory(categoryId: number): ICategory | undefined;
findScript(scriptId: string): IScript | undefined;
getAllScripts(): ReadonlyArray<IScript>;
getAllCategories(): ReadonlyArray<ICategory>;
}
export { IScript } from '@/domain/IScript';

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

@@ -4,12 +4,12 @@
<span class="part">
<span
class="part"
v-bind:class="{ 'disabled': isGrouped, 'enabled': !isGrouped}"
@click="!isGrouped ? toggleGrouping() : undefined">Cards</span>
v-bind:class="{ 'disabled': cardsSelected, 'enabled': !cardsSelected}"
@click="groupByCard()">Cards</span>
<span class="part">|</span>
<span class="part"
v-bind:class="{ 'disabled': !isGrouped, 'enabled': isGrouped}"
@click="isGrouped ? toggleGrouping() : undefined">None</span>
v-bind:class="{ 'disabled': noneSelected, 'enabled': !noneSelected}"
@click="groupByNone()">None</span>
</span>
</div>
</template>
@@ -22,12 +22,30 @@ import { Grouping } from './Grouping';
@Component
export default class TheGrouper extends StatefulVue {
public currentGrouping: Grouping;
public isGrouped = true;
public cardsSelected = false;
public noneSelected = false;
public toggleGrouping() {
this.currentGrouping = this.currentGrouping === Grouping.None ? Grouping.Cards : Grouping.None;
this.isGrouped = this.currentGrouping === Grouping.Cards;
private currentGrouping: Grouping;
public mounted() {
this.changeGrouping(Grouping.Cards);
}
public groupByCard() {
this.changeGrouping(Grouping.Cards);
}
public groupByNone() {
this.changeGrouping(Grouping.None);
}
private changeGrouping(newGrouping: Grouping) {
if (this.currentGrouping === newGrouping) {
return;
}
this.currentGrouping = newGrouping;
this.cardsSelected = newGrouping === Grouping.Cards;
this.noneSelected = newGrouping === Grouping.None;
this.$emit('groupingChanged', this.currentGrouping);
}
}

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

@@ -20,6 +20,13 @@ export function parseSingleCategory(categoryId: number, state: IApplicationState
return tree;
}
export function getScriptNodeId(script: IScript): string {
return script.id;
}
export function getCategoryNodeId(category: ICategory): string {
return `${category.id}`;
}
function parseCategoryRecursively(
parentCategory: ICategory,
selection: IUserSelection): INode[] {
@@ -44,7 +51,7 @@ function parseCategoryRecursively(
function convertCategoryToNode(
category: ICategory, children: readonly INode[]): INode {
return {
id: `${category.id}`,
id: getCategoryNodeId(category),
text: category.name,
selected: false,
children,
@@ -54,7 +61,7 @@ function convertCategoryToNode(
function convertScriptToNode(script: IScript, selection: IUserSelection): INode {
return {
id: `${script.id}`,
id: getScriptNodeId(script),
text: script.name,
selected: selection.isSelected(script),
children: undefined,

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

@@ -2,11 +2,11 @@
<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)">
:nodes="nodes"
:selectedNodeIds="selectedNodeIds"
:filterPredicate="filterPredicate"
:filterText="filterText"
v-on:nodeSelected="checkNodeAsync($event)">
</SelectableTree>
</span>
<span v-else>Nooo 😢</span>
@@ -19,9 +19,11 @@
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 { IFilterMatches } from '@/application/State/Filter/IFilterMatches';
import { parseAllCategories, parseSingleCategory } from './ScriptNodeParser';
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';
@@ -37,11 +39,11 @@
public selectedNodeIds?: string[] = null;
public filterText?: string = null;
private matches?: IFilterMatches;
private filtered?: IFilterResult;
public async mounted() {
// React to state changes
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);
@@ -72,7 +74,10 @@
}
public filterPredicate(node: INode): boolean {
return this.matches.scriptMatches.some((script: IScript) => script.id === node.id);
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>) {
@@ -83,9 +88,9 @@
this.filterText = '';
}
private handleFiltered(matches: IFilterMatches) {
this.filterText = matches.query;
this.matches = matches;
private handleFiltered(result: IFilterResult) {
this.filterText = result.query;
this.filtered = result;
}
}

86
src/presentation/Scripts/TheScripts.vue
View File

@@ -5,8 +5,18 @@
<TheGrouper class="right"
v-on:groupingChanged="onGroupingChanged($event)" />
</div>
<CardList v-if="showCards" />
<ScriptsTree v-if="showList" />
<div class="scripts">
<div v-if="!isSearching || searchHasMatches">
<CardList v-if="showCards" />
<div v-else-if="showList" class="tree">
<ScriptsTree />
</div>
</div>
<div v-else class="search-no-matches">
Search has no matches 😞
Feel free to extend the scripts <a :href="repositoryUrl" target="_blank" class="child github" >here</a>.
</div>
</div>
</div>
</template>
@@ -14,11 +24,13 @@
import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
import { Category } from '@/domain/Category';
import { StatefulVue } from '@/presentation/StatefulVue';
import { Grouping } from './Grouping/Grouping';
import { IFilterResult } from '@/application/State/Filter/IFilterResult';
import TheGrouper from '@/presentation/Scripts/Grouping/TheGrouper.vue';
import TheSelector from '@/presentation/Scripts/Selector/TheSelector.vue';
import ScriptsTree from '@/presentation/Scripts/ScriptsTree/ScriptsTree.vue';
import CardList from '@/presentation/Scripts/Cards/CardList.vue';
import { Grouping } from './Grouping/Grouping';
/** Shows content of single category or many categories */
@Component({
@@ -30,33 +42,70 @@
},
})
export default class TheScripts extends StatefulVue {
public showCards = true;
public showCards = false;
public showList = false;
public repositoryUrl = '';
private isSearching = false;
private searchHasMatches = false;
@Prop() public data!: Category | Category[];
private currentGrouping: Grouping;
public async mounted() {
const state = await this.getCurrentStateAsync();
this.repositoryUrl = state.app.repositoryUrl;
state.filter.filterRemoved.on(() => {
this.isSearching = false;
this.updateGroups();
});
state.filter.filtered.on((result: IFilterResult) => {
this.isSearching = true;
this.searchHasMatches = result.hasAnyMatches();
this.updateGroups();
});
}
public onGroupingChanged(group: Grouping) {
switch (group) {
case Grouping.Cards:
this.showCards = true;
this.showList = false;
break;
case Grouping.None:
this.showCards = false;
this.showList = true;
break;
default:
throw new Error('Unknown grouping');
}
this.currentGrouping = group;
this.updateGroups();
}
private updateGroups(): void {
this.showCards = !this.isSearching && this.currentGrouping === Grouping.Cards;
this.showList = this.isSearching || this.currentGrouping === Grouping.None;
}
}
</script>
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@import "@/presentation/styles/fonts.scss";
.scripts {
margin-top:10px;
.search-no-matches {
word-break:break-word;
color: $white;
text-transform: uppercase;
color: $light-gray;
font-size: 1.5em;
background-color: $slate;
padding:5%;
text-align:center;
> a {
color: $gray;
}
}
.tree {
padding-left: 3%;
margin-top: 15px; // Card margin
}
}
.help-container {
display: flex;
justify-content: space-between;
align-items: center;
.center {
justify-content: center;
}
.left {
justify-content: flex-start;
}
@@ -64,4 +113,5 @@
justify-content: flex-end;
}
}
</style>

9
src/presentation/TheHeader.vue
View File

@@ -2,7 +2,7 @@
<div id="container">
<h1 class="child title" >{{ title }}</h1>
<h2 class="child subtitle">{{ subtitle }}</h2>
<a :href="githubUrl" target="_blank" class="child github" >
<a :href="repositoryUrl" target="_blank" class="child github" >
<font-awesome-icon :icon="['fab', 'github']" size="3x" />
</a>
</div>
@@ -14,14 +14,15 @@ import { StatefulVue } from './StatefulVue';
@Component
export default class TheHeader extends StatefulVue {
private title: string = '';
private subtitle: string = '';
@Prop() private githubUrl!: string;
public title = '';
public subtitle = '';
public repositoryUrl = '';
public async mounted() {
const state = await this.getCurrentStateAsync();
this.title = state.app.name;
this.subtitle = 'Enforce privacy & security on Windows';
this.repositoryUrl = state.app.repositoryUrl;
}
}
</script>

8
src/presentation/TheSearchBar.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="container">
<div class="search">
<input type="text" class="searchTerm" placeholder="Search for configurations"
<input type="text" class="searchTerm" placeholder="Search"
@input="updateFilterAsync($event.target.value)" >
<div class="iconWrapper">
<font-awesome-icon :icon="['fas', 'search']" />
@@ -16,8 +16,6 @@ import { StatefulVue } from './StatefulVue';
@Component
export default class TheSearchBar extends StatefulVue {
public async updateFilterAsync(filter: |string) {
const state = await this.getCurrentStateAsync();
if (!filter) {
@@ -35,9 +33,6 @@ export default class TheSearchBar extends StatefulVue {
@import "@/presentation/styles/fonts.scss";
.container {
padding-top: 30px;
padding-right: 30%;
padding-left: 30%;
font: $normal-font;
}
@@ -49,6 +44,7 @@ export default class TheSearchBar extends StatefulVue {
.searchTerm {
width: 100%;
min-width: 60px;
border: 1.5px solid $gray;
border-right: none;
height: 36px;

8
tests/unit/domain/Application.spec.ts
View File

@@ -11,7 +11,7 @@ describe('Application', () => {
new ScriptStub('S3').withIsRecommended(true),
new ScriptStub('S4').withIsRecommended(true),
];
const sut = new Application('name', 2, [
const sut = new Application('name', 'repo', 2, [
new CategoryStub(3).withScripts(expected[0], new ScriptStub('S1').withIsRecommended(false)),
new CategoryStub(2).withScripts(expected[1], new ScriptStub('S2').withIsRecommended(false)),
]);
@@ -28,7 +28,7 @@ describe('Application', () => {
const categories = [];
// act
function construct() { return new Application('name', 2, categories); }
function construct() { return new Application('name', 'repo', 2, categories); }
// assert
expect(construct).to.throw('Application must consist of at least one category');
@@ -41,7 +41,7 @@ describe('Application', () => {
];
// act
function construct() { return new Application('name', 2, categories); }
function construct() { return new Application('name', 'repo', 2, categories); }
// assert
expect(construct).to.throw('Application must consist of at least one script');
@@ -54,7 +54,7 @@ describe('Application', () => {
];
// act
function construct() { return new Application('name', 2, categories); }
function construct() { return new Application('name', 'repo', 2, categories); }
// assert
expect(construct).to.throw('Application must consist of at least one recommended script');

4
tests/unit/stubs/ApplicationStub.ts
View File

@@ -4,6 +4,7 @@ export class ApplicationStub implements IApplication {
public readonly totalScripts = 0;
public readonly totalCategories = 0;
public readonly name = 'StubApplication';
public readonly repositoryUrl = 'https://privacy.sexy';
public readonly version = 1;
public readonly categories = new Array<ICategory>();
@@ -23,4 +24,7 @@ export class ApplicationStub implements IApplication {
public getAllScripts(): ReadonlyArray<IScript> {
throw new Error('Method not implemented.');
}
public getAllCategories(): ReadonlyArray<ICategory> {
throw new Error('Method not implemented.');
}
}