110 lines
3.4 KiB
Vue
110 lines
3.4 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="part select">Select:</div>
|
|
<div class="part">
|
|
<div class="part">
|
|
<SelectableOption
|
|
label="None"
|
|
:enabled="isNoneSelected"
|
|
@click="selectNoneAsync()">
|
|
</SelectableOption>
|
|
</div>
|
|
<div class="part"> | </div>
|
|
<div class="part">
|
|
<SelectableOption
|
|
label="Recommended"
|
|
:enabled="isRecommendedSelected"
|
|
@click="selectRecommendedAsync()" />
|
|
</div>
|
|
<div class="part"> | </div>
|
|
<div class="part">
|
|
<SelectableOption
|
|
label="All"
|
|
:enabled="isAllSelected"
|
|
@click="selectAllAsync()" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component } from 'vue-property-decorator';
|
|
import { StatefulVue } from '@/presentation/StatefulVue';
|
|
import SelectableOption from './SelectableOption.vue';
|
|
import { IApplicationState } from '@/application/State/IApplicationState';
|
|
import { IScript } from '@/domain/IScript';
|
|
import { SelectedScript } from '../../../application/State/Selection/SelectedScript';
|
|
|
|
@Component({
|
|
components: {
|
|
SelectableOption,
|
|
},
|
|
})
|
|
export default class TheSelector extends StatefulVue {
|
|
public isAllSelected = false;
|
|
public isNoneSelected = false;
|
|
public isRecommendedSelected = false;
|
|
|
|
public async mounted() {
|
|
const state = await this.getCurrentStateAsync();
|
|
this.updateSelections(state);
|
|
state.selection.changed.on(() => {
|
|
this.updateSelections(state);
|
|
});
|
|
}
|
|
|
|
public async selectAllAsync(): Promise<void> {
|
|
if (this.isAllSelected) {
|
|
return;
|
|
}
|
|
const state = await this.getCurrentStateAsync();
|
|
state.selection.selectAll();
|
|
}
|
|
|
|
public async selectRecommendedAsync(): Promise<void> {
|
|
if (this.isRecommendedSelected) {
|
|
return;
|
|
}
|
|
const state = await this.getCurrentStateAsync();
|
|
state.selection.selectOnly(state.app.getRecommendedScripts());
|
|
}
|
|
|
|
public async selectNoneAsync(): Promise<void> {
|
|
if (this.isNoneSelected) {
|
|
return;
|
|
}
|
|
const state = await this.getCurrentStateAsync();
|
|
state.selection.deselectAll();
|
|
}
|
|
|
|
private updateSelections(state: IApplicationState) {
|
|
this.isNoneSelected = state.selection.totalSelected === 0;
|
|
this.isAllSelected = state.selection.totalSelected === state.app.totalScripts;
|
|
this.isRecommendedSelected = this.areAllRecommended(state.app.getRecommendedScripts(),
|
|
state.selection.selectedScripts);
|
|
}
|
|
|
|
private areAllRecommended(scripts: ReadonlyArray<IScript>, other: ReadonlyArray<SelectedScript>): boolean {
|
|
other = other.filter((selected) => !(selected).revert);
|
|
return (scripts.length === other.length) &&
|
|
scripts.every((script) => other.some((selected) => selected.id === script.id));
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/presentation/styles/fonts.scss";
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
.part {
|
|
display: flex;
|
|
margin-right:5px;
|
|
}
|
|
font-family: $normal-font;
|
|
}
|
|
|
|
</style>
|