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

show icons on cards during indeterminate and fully selected states

Browse Source
This commit is contained in:
undergroundwires
2020-09-17 21:46:20 +01:00
parent 07fc555324
commit 1072505219
10 changed files with 200 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/application/State/Selection/IUserSelection.ts
View File

@@ -1,11 +1,14 @@
import { SelectedScript } from './SelectedScript';
import { ISignal } from '@/infrastructure/Events/Signal';
import { IScript } from '@/domain/IScript';
import { ICategory } from '@/domain/ICategory';
export interface IUserSelection {
readonly changed: ISignal<ReadonlyArray<SelectedScript>>;
readonly selectedScripts: ReadonlyArray<SelectedScript>;
readonly totalSelected: number;
areAllSelected(category: ICategory): boolean;
isAnySelected(category: ICategory): boolean;
removeAllInCategory(categoryId: number): void;
addOrUpdateAllInCategory(categoryId: number, revert: boolean): void;
addSelectedScript(scriptId: string, revert: boolean): void;

20
src/application/State/Selection/UserSelection.ts
View File

@@ -1,5 +1,5 @@
import { SelectedScript } from './SelectedScript';
import { IApplication } from '@/domain/IApplication';
import { IApplication, ICategory } from '@/domain/IApplication';
import { IUserSelection } from './IUserSelection';
import { InMemoryRepository } from '@/infrastructure/Repository/InMemoryRepository';
import { IScript } from '@/domain/IScript';
@@ -21,6 +21,24 @@ export class UserSelection implements IUserSelection {
}
}
public areAllSelected(category: ICategory): boolean {
if (this.selectedScripts.length === 0) {
return false;
}
const scripts = category.getAllScriptsRecursively();
if (this.selectedScripts.length < scripts.length) {
return false;
}
return scripts.every((script) => this.selectedScripts.some((selected) => selected.id === script.id));
}
public isAnySelected(category: ICategory): boolean {
if (this.selectedScripts.length === 0) {
return false;
}
return this.selectedScripts.some((s) => category.includes(s.script));
}
public removeAllInCategory(categoryId: number): void {
const category = this.app.findCategory(categoryId);
const scriptsToRemove = category.getAllScriptsRecursively()

4
src/domain/Category.ts
View File

@@ -15,6 +15,10 @@ export class Category extends BaseEntity<number> implements ICategory {
validateCategory(this);
}
public includes(script: IScript): boolean {
return this.getAllScriptsRecursively().some((childScript) => childScript.id === script.id);
}
public getAllScriptsRecursively(): readonly IScript[] {
return this.allSubScripts || (this.allSubScripts = parseScriptsRecursively(this));
}

1
src/domain/ICategory.ts
View File

@@ -7,6 +7,7 @@ export interface ICategory extends IEntity<number>, IDocumentable {
readonly name: string;
readonly subCategories?: ReadonlyArray<ICategory>;
readonly scripts?: ReadonlyArray<IScript>;
includes(script: IScript): boolean;
getAllScriptsRecursively(): ReadonlyArray<IScript>;
}

4
src/presentation/Bootstrapping/Modules/IconBootstrapper.ts
View File

@@ -6,7 +6,8 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
/** REGULAR ICONS (PREFIX: far) */
import { faFolderOpen, faFolder, faSmile } from '@fortawesome/free-regular-svg-icons';
/** SOLID ICONS (PREFIX: fas (default)) */
import { faTimes, faFileDownload, faCopy, faSearch, faInfoCircle, faUserSecret, faDesktop, faTag, faGlobe, faSave } from '@fortawesome/free-solid-svg-icons';
import { faTimes, faFileDownload, faCopy, faSearch, faInfoCircle, faUserSecret, faDesktop,
faTag, faGlobe, faSave, faBatteryFull, faBatteryHalf } from '@fortawesome/free-solid-svg-icons';
export class IconBootstrapper implements IVueBootstrapper {
@@ -24,6 +25,7 @@ export class IconBootstrapper implements IVueBootstrapper {
faFileDownload, faSave,
faCopy,
faSearch,
faBatteryFull, faBatteryHalf,
faInfoCircle);
vue.component('font-awesome-icon', FontAwesomeIcon);
}

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

@@ -8,9 +8,17 @@
}"
ref="cardElement">
<div class="card__inner">
<span v-if="cardTitle && cardTitle.length > 0">{{cardTitle}}</span>
<span v-if="cardTitle && cardTitle.length > 0">
<span>{{cardTitle}}</span>
</span>
<span v-else>Oh no 😢</span>
<!-- Expand icon -->
<font-awesome-icon :icon="['far', isExpanded ? 'folder-open' : 'folder']" class="card__inner__expand-icon" />
<!-- Indeterminate and full states -->
<div class="card__inner__state-icons">
<font-awesome-icon v-if="isAnyChildSelected && !areAllChildrenSelected" :icon="['fa', 'battery-half']" />
<font-awesome-icon v-if="areAllChildrenSelected" :icon="['fa', 'battery-full']" />
</div>
</div>
<div class="card__expander" v-on:click.stop>
<div class="card__expander__content">
@@ -27,6 +35,8 @@
import { Component, Prop, Watch, Emit } from 'vue-property-decorator';
import ScriptsTree from '@/presentation/Scripts/ScriptsTree/ScriptsTree.vue';
import { StatefulVue } from '@/presentation/StatefulVue';
import { ICategory } from '@/domain/ICategory';
import { IUserSelection } from '@/application/State/IApplicationState';
@Component({
components: {
@@ -36,17 +46,21 @@ import { StatefulVue } from '@/presentation/StatefulVue';
export default class CardListItem extends StatefulVue {
@Prop() public categoryId!: number;
@Prop() public activeCategoryId!: number;
public cardTitle?: string = '';
public isExpanded: boolean = false;
public cardTitle = '';
public isExpanded = false;
public isAnyChildSelected = false;
public areAllChildrenSelected = false;
@Emit('selected')
@Emit('selected')
public onSelected(isExpanded: boolean) {
this.isExpanded = isExpanded;
}
@Watch('activeCategoryId')
public async onActiveCategoryChanged(value: |number) {
this.isExpanded = value === this.categoryId;
}
@Watch('isExpanded')
public async onExpansionChangedAsync(newValue: number, oldValue: number) {
if (!oldValue && newValue) {
@@ -57,20 +71,23 @@ export default class CardListItem extends StatefulVue {
}
public async mounted() {
this.cardTitle = this.categoryId ? await this.getCardTitleAsync(this.categoryId) : undefined;
const state = await this.getCurrentStateAsync();
state.selection.changed.on(() => {
this.updateStateAsync(this.categoryId);
});
this.updateStateAsync(this.categoryId);
}
@Watch('categoryId')
public async onCategoryIdChanged(value: |number) {
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);
return category ? category.name : undefined;
public async updateStateAsync(value: |number) {
const state = await this.getCurrentStateAsync();
const category = !value ? undefined : state.app.findCategory(this.categoryId);
this.cardTitle = category ? category.name : undefined;
this.isAnyChildSelected = category ? state.selection.isAnySelected(category) : false;
this.areAllChildrenSelected = category ? state.selection.areAllSelected(category) : false;
}
}
</script>
<style scoped lang="scss">
@@ -93,7 +110,7 @@ $expanded-margin-top: 30px;
@media screen and (max-width: $small-screen-width) { width: 90%; }
&__inner {
padding: $card-padding;
padding: $card-padding $card-padding 0 $card-padding;
position: relative;
cursor: pointer;
background-color: $gray;
@@ -116,12 +133,20 @@ $expanded-margin-top: 30px;
transition: all 0.3s ease-in-out;
}
&__state-icons {
height: $card-padding;
margin-right: -$card-padding;
padding-right: 10px;
display: flex;
justify-content: flex-end;
}
&__expand-icon {
width: 100%;
margin-top: .25em;
vertical-align: middle;
}
}
&__expander {
transition: all 0.2s ease-in-out;
position: relative;

2
src/presentation/Scripts/Selector/TheSelector.vue
View File

@@ -45,7 +45,7 @@
import { Component } from 'vue-property-decorator';
import { StatefulVue } from '@/presentation/StatefulVue';
import SelectableOption from './SelectableOption.vue';
import { IApplicationState, IUserSelection } from '@/application/State/IApplicationState';
import { IApplicationState } from '@/application/State/IApplicationState';
import { IScript } from '@/domain/IScript';
import { SelectedScript } from '@/application/State/Selection/SelectedScript';
import { RecommendationLevel } from '@/domain/RecommendationLevel';

88
tests/unit/application/State/Selection/UserSelection.spec.ts
View File

@@ -292,4 +292,92 @@ describe('UserSelection', () => {
expect(actual).to.equal(true);
});
});
describe('category state', () => {
describe('when no scripts are selected', () => {
// arrange
const category = new CategoryStub(1)
.withScriptIds('non-selected-script-1', 'non-selected-script-2');
const app = new ApplicationStub().withAction(category);
const sut = new UserSelection(app, [ ]);
it('areAllSelected returns false', () => {
// act
const actual = sut.areAllSelected(category);
// assert
expect(actual).to.equal(false);
});
it('isAnySelected returns false', () => {
// act
const actual = sut.isAnySelected(category);
// assert
expect(actual).to.equal(false);
});
});
describe('when no subscript exists in selected scripts', () => {
// arrange
const category = new CategoryStub(1)
.withScriptIds('non-selected-script-1', 'non-selected-script-2');
const selectedScript = new ScriptStub('selected');
const app = new ApplicationStub()
.withAction(category)
.withAction(new CategoryStub(22).withScript(selectedScript));
const sut = new UserSelection(app, [ new SelectedScript(selectedScript, false) ]);
it('areAllSelected returns false', () => {
// act
const actual = sut.areAllSelected(category);
// assert
expect(actual).to.equal(false);
});
it('isAnySelected returns false', () => {
// act
const actual = sut.isAnySelected(category);
// assert
expect(actual).to.equal(false);
});
});
describe('when one of the scripts are selected', () => {
// arrange
const selectedScript = new ScriptStub('selected');
const category = new CategoryStub(1)
.withScriptIds('non-selected-script-1', 'non-selected-script-2')
.withCategory(new CategoryStub(12).withScript(selectedScript));
const app = new ApplicationStub().withAction(category);
const sut = new UserSelection(app, [ new SelectedScript(selectedScript, false) ]);
it('areAllSelected returns false', () => {
// act
const actual = sut.areAllSelected(category);
// assert
expect(actual).to.equal(false);
});
it('isAnySelected returns true', () => {
// act
const actual = sut.isAnySelected(category);
// assert
expect(actual).to.equal(true);
});
});
describe('when all scripts are selected', () => {
// arrange
const firstSelectedScript = new ScriptStub('selected1');
const secondSelectedScript = new ScriptStub('selected2');
const category = new CategoryStub(1)
.withScript(firstSelectedScript)
.withCategory(new CategoryStub(12).withScript(secondSelectedScript));
const app = new ApplicationStub().withAction(category);
const sut = new UserSelection(app,
[ firstSelectedScript, secondSelectedScript ].map((s) => new SelectedScript(s, false)));
it('areAllSelected returns true', () => {
// act
const actual = sut.areAllSelected(category);
// assert
expect(actual).to.equal(true);
});
it('isAnySelected returns true', () => {
// act
const actual = sut.isAnySelected(category);
// assert
expect(actual).to.equal(true);
});
});
});
});

37
tests/unit/domain/Category.spec.ts
View File

@@ -86,4 +86,41 @@ describe('Category', () => {
expect(actualIds).to.have.deep.members(expectedScriptIds);
});
});
describe('includes', () => {
it('return false when does not include', () => {
// assert
const script = new ScriptStub('3');
const sut = new Category(0, 'category', [], [new CategoryStub(33).withScriptIds('1', '2')], []);
// act
const actual = sut.includes(script);
// assert
expect(actual).to.equal(false);
});
it('return true when includes as subscript', () => {
// assert
const script = new ScriptStub('3');
const sut = new Category(0, 'category', [], [
new CategoryStub(33).withScript(script).withScriptIds('non-related'),
], []);
// act
const actual = sut.includes(script);
// assert
expect(actual).to.equal(true);
});
it('return true when includes as nested category script', () => {
// assert
const script = new ScriptStub('3');
const sut = new Category(11, 'category', [],
[
new CategoryStub(22)
.withScriptIds('non-relatedd')
.withCategory(new CategoryStub(33).withScript(script)),
],
[]);
// act
const actual = sut.includes(script);
// assert
expect(actual).to.equal(true);
});
});
});

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

@@ -12,6 +12,10 @@ export class CategoryStub extends BaseEntity<number> implements ICategory {
super(id);
}
public includes(script: IScript): boolean {
return this.getAllScriptsRecursively().some((s) => s.id === script.id);
}
public getAllScriptsRecursively(): readonly IScript[] {
return [
...this.scripts,