ff84f5676e
- Migrate to newer `eslint-config-airbnb-with-typescript` from `eslint-config-airbnb`. - Add also `rushstack/eslint-patch` as per instructed by `eslint-config-airbnb-with-typescript` docs. - Update codebase to align with new linting standards. - Add script to configure VS Code for effective linting for project developers, move it to `scripts` directory along with clean npm install script for better organization.
63 lines
1.8 KiB
Vue
63 lines
1.8 KiB
Vue
<template>
|
|
<MenuOptionList>
|
|
<MenuOptionListItem
|
|
v-for="os in this.allOses"
|
|
:key="os.name"
|
|
:enabled="currentOs !== os.os"
|
|
@click="changeOs(os.os)"
|
|
:label="os.name"
|
|
/>
|
|
</MenuOptionList>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component } from 'vue-property-decorator';
|
|
import { OperatingSystem } from '@/domain/OperatingSystem';
|
|
import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
|
|
import { IReadOnlyCategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
|
|
import { ApplicationFactory } from '@/application/ApplicationFactory';
|
|
import MenuOptionList from './MenuOptionList.vue';
|
|
import MenuOptionListItem from './MenuOptionListItem.vue';
|
|
|
|
@Component({
|
|
components: {
|
|
MenuOptionList,
|
|
MenuOptionListItem,
|
|
},
|
|
})
|
|
export default class TheOsChanger extends StatefulVue {
|
|
public allOses: Array<{ name: string, os: OperatingSystem }> = [];
|
|
|
|
public currentOs?: OperatingSystem = null;
|
|
|
|
public async created() {
|
|
const app = await ApplicationFactory.Current.getApp();
|
|
this.allOses = app.getSupportedOsList()
|
|
.map((os) => ({ os, name: renderOsName(os) }));
|
|
}
|
|
|
|
public async changeOs(newOs: OperatingSystem) {
|
|
const context = await this.getCurrentContext();
|
|
context.changeContext(newOs);
|
|
}
|
|
|
|
protected handleCollectionState(newState: IReadOnlyCategoryCollectionState): void {
|
|
this.currentOs = newState.os;
|
|
this.$forceUpdate(); // v-bind:class is not updated otherwise
|
|
}
|
|
}
|
|
|
|
function renderOsName(os: OperatingSystem): string {
|
|
switch (os) {
|
|
case OperatingSystem.Windows: return 'Windows';
|
|
case OperatingSystem.macOS: return 'macOS';
|
|
case OperatingSystem.Linux: return 'Linux (preview)';
|
|
default: throw new RangeError(`Cannot render os name: ${OperatingSystem[os]}`);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|