Use mutation for collapsed state updates

This commit is contained in:
James Lyne 2021-05-26 17:43:15 +01:00
parent 1fb28739cf
commit b096240651
4 changed files with 34 additions and 11 deletions

View File

@ -20,6 +20,7 @@
import {defineComponent} from "@vue/runtime-core";
import SvgIcon from "@/components/SvgIcon.vue";
import '@/assets/icons/arrow.svg';
import {MutationTypes} from "@/store/mutation-types";
export default defineComponent({
name: 'CollapsibleSection',
@ -37,7 +38,7 @@
},
collapsed(): boolean {
return useStore().state.ui.collapsedSections.has(this.name);
return useStore().state.ui.sidebar.collapsedSections.has(this.name);
},
},
@ -53,13 +54,7 @@
},
toggle() {
const store = useStore();
if(this.collapsed) {
store.state.ui.collapsedSections.delete(this.name);
} else {
store.state.ui.collapsedSections.add(this.name);
}
useStore().commit(MutationTypes.TOGGLE_SIDEBAR_SECTION_COLLAPSED_STATE, this.name);
}
}
});

View File

@ -60,5 +60,8 @@ export enum MutationTypes {
TOGGLE_UI_ELEMENT_VISIBILITY = 'toggleUIElementVisibility',
SET_UI_ELEMENT_VISIBILITY = 'setUIElementVisibility',
TOGGLE_SIDEBAR_SECTION_COLLAPSED_STATE = 'toggleSidebarSectionCollapsedState',
SET_SIDEBAR_SECTION_COLLAPSED_STATE = 'setSidebarSectionCollapsedState',
SET_LOGGED_IN = 'setLoggedIn',
}

View File

@ -31,7 +31,7 @@ import {
DynmapWorldState, DynmapParsedUrl, DynmapChat
} from "@/dynmap";
import {DynmapProjection} from "@/leaflet/projection/DynmapProjection";
import {LiveAtlasMessageConfig, LiveAtlasServerDefinition, LiveAtlasUIElement} from "@/index";
import {LiveAtlasMessageConfig, LiveAtlasServerDefinition, LiveAtlasSidebarSection, LiveAtlasUIElement} from "@/index";
export type CurrentMapPayload = {
worldName: string;
@ -83,6 +83,9 @@ export type Mutations<S = State> = {
[MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY](state: S, payload: LiveAtlasUIElement): void
[MutationTypes.SET_UI_ELEMENT_VISIBILITY](state: S, payload: {element: LiveAtlasUIElement, state: boolean}): void
[MutationTypes.TOGGLE_SIDEBAR_SECTION_COLLAPSED_STATE](state: S, section: LiveAtlasSidebarSection): void
[MutationTypes.SET_SIDEBAR_SECTION_COLLAPSED_STATE](state: S, payload: {section: LiveAtlasSidebarSection, state: boolean}): void
[MutationTypes.SET_LOGGED_IN](state: S, payload: boolean): void
}
@ -532,6 +535,22 @@ export const mutations: MutationTree<State> & Mutations = {
payload.state ? state.ui.visibleElements.add(payload.element) : state.ui.visibleElements.delete(payload.element);
},
[MutationTypes.TOGGLE_SIDEBAR_SECTION_COLLAPSED_STATE](state: State, section: LiveAtlasSidebarSection): void {
if(state.ui.sidebar.collapsedSections.has(section)) {
state.ui.sidebar.collapsedSections.delete(section);
} else {
state.ui.sidebar.collapsedSections.add(section);
}
},
[MutationTypes.SET_SIDEBAR_SECTION_COLLAPSED_STATE](state: State, payload: {section: LiveAtlasSidebarSection, state: boolean}): void {
if (payload.state) {
state.ui.sidebar.collapsedSections.delete(payload.section);
} else {
state.ui.sidebar.collapsedSections.add(payload.section);
}
},
[MutationTypes.SET_LOGGED_IN](state: State, payload: boolean): void {
state.loggedIn = payload;
}

View File

@ -65,7 +65,10 @@ export type State = {
smallScreen: boolean;
visibleElements: Set<LiveAtlasUIElement>;
previouslyVisibleElements: Set<LiveAtlasUIElement>;
sidebar: {
collapsedSections: Set<LiveAtlasSidebarSection>;
}
};
parsedUrl: DynmapParsedUrl;
@ -209,8 +212,11 @@ export const state: State = {
smallScreen: false,
visibleElements:new Set(),
previouslyVisibleElements: new Set(),
sidebar: {
collapsedSections: new Set(),
},
},
parsedUrl: {
world: undefined,