3457fe18cf
This commit resolves a rendering bug in the tree view component. Previously, updating the tree collection prior to node updates led to rendering errors due to the presence of non-existent nodes in the new collection. Changes: - Implement manual control over the rendering process in tree view. This includes clearing the rendering queue and currently rendered nodes before updates, aligning the rendering process with the updated collection. - Add Cypress E2E tests to test switching between all operating systems and script views, ensuring no uncaught errors and preventing regression. - Replace hardcoded operating system lists in the download URL list view with a unified `getSupportedOsList()` method from the application, reducing duplication and simplifying future updates. - Rename `initial-nodes` to `nodes` in `TreeView.vue` to reflect their mutable nature. - Centralize the function for getting operating system names into `OperatingSystemNames.ts`, improving reusability in E2E tests.
62 lines
1.6 KiB
Vue
62 lines
1.6 KiB
Vue
<template>
|
|
<MenuOptionList>
|
|
<MenuOptionListItem
|
|
v-for="os in allOses"
|
|
:key="os.name"
|
|
:enabled="currentOs !== os.os"
|
|
:label="os.name"
|
|
@click="changeOs(os.os)"
|
|
/>
|
|
</MenuOptionList>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, computed } from 'vue';
|
|
import { injectKey } from '@/presentation/injectionSymbols';
|
|
import { OperatingSystem } from '@/domain/OperatingSystem';
|
|
import { getOperatingSystemDisplayName } from '@/presentation/components/Shared/OperatingSystemNames';
|
|
import MenuOptionList from './MenuOptionList.vue';
|
|
import MenuOptionListItem from './MenuOptionListItem.vue';
|
|
|
|
interface OperatingSystemOption {
|
|
readonly name: string;
|
|
readonly os: OperatingSystem;
|
|
}
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
MenuOptionList,
|
|
MenuOptionListItem,
|
|
},
|
|
setup() {
|
|
const { modifyCurrentContext, currentState } = injectKey((keys) => keys.useCollectionState);
|
|
const { application } = injectKey((keys) => keys.useApplication);
|
|
|
|
const allOses = computed<ReadonlyArray<OperatingSystemOption>>(
|
|
() => application
|
|
.getSupportedOsList()
|
|
.map((os) : OperatingSystemOption => ({
|
|
os,
|
|
name: getOperatingSystemDisplayName(os),
|
|
})),
|
|
);
|
|
|
|
const currentOs = computed<OperatingSystem>(() => {
|
|
return currentState.value.os;
|
|
});
|
|
|
|
function changeOs(newOs: OperatingSystem) {
|
|
modifyCurrentContext((context) => {
|
|
context.changeContext(newOs);
|
|
});
|
|
}
|
|
|
|
return {
|
|
allOses,
|
|
currentOs,
|
|
changeOs,
|
|
};
|
|
},
|
|
});
|
|
</script>
|