diff --git a/src/components/interaction-designer/toolbar/TreeBuilderToolbar.vue b/src/components/interaction-designer/toolbar/TreeBuilderToolbar.vue index fd9a57353..47009363a 100644 --- a/src/components/interaction-designer/toolbar/TreeBuilderToolbar.vue +++ b/src/components/interaction-designer/toolbar/TreeBuilderToolbar.vue @@ -363,7 +363,6 @@ const validationVuexNamespace = namespace('validation') // TreeUpdateConflictModal, // InteractionTotalsDateRangeConfiguration }, - }) export default class TreeBuilderToolbar extends mixins(Routes, Permissions, Lang) { isImporterVisible = false @@ -496,12 +495,7 @@ export default class TreeBuilderToolbar extends mixins(Routes, Permissions, Lang return (this.can('view-result-totals') && this.isFeatureViewResultsEnabled) } - get hasSimulator() { - return this.hasOfflineMode && this.isFeatureSimulatorEnabled - } - // Methods ##################### - async handleAddBlockByTypeSelected({type}: { type: IBlock['type'] }): Promise { const {uuid: blockId} = await this.flow_addBlankBlockByType({ type, @@ -667,6 +661,7 @@ export default class TreeBuilderToolbar extends mixins(Routes, Permissions, Lang // Clipboard @clipboardVuexNamespace.Action setSimulatorActive!: (value: boolean) => void + @clipboardVuexNamespace.Getter hasSimulator!: boolean @validationVuexNamespace.Action remove_block_validation!: ({blockId}: { blockId: IBlock['uuid'] | undefined}) => void } diff --git a/src/router/trees.js b/src/router/trees.js index 12d4b8fe2..fbc491251 100644 --- a/src/router/trees.js +++ b/src/router/trees.js @@ -32,6 +32,11 @@ export const routes = [ name: 'flow-details', meta: {isFlowEditorShown: true}, }, + { + path: 'simulator', + name: 'flow-simulator', + meta: { isSidebarShown: true }, + }, { path: 'block/:blockId', name: 'block-selected', diff --git a/src/store/clipboard/index.ts b/src/store/clipboard/index.ts index 37814a410..3a6dbe1b1 100644 --- a/src/store/clipboard/index.ts +++ b/src/store/clipboard/index.ts @@ -2,7 +2,8 @@ import { ActionTree, GetterTree, Module, MutationTree, } from 'vuex' import { IRootState } from '@/store' -import { IPrompt } from '@floip/flow-runner'; +import { router } from '@/router' +import { IPrompt } from '@floip/flow-runner' export interface BlocksData { isFocused: boolean; @@ -24,6 +25,7 @@ export const getters: GetterTree = { blocksData: (state) => state.blocksData, getBlockPrompt: (state) => (index: number) => state.blocksData[index].prompt, isBlockFocused: (state) => (index: number) => state.blocksData[index].isFocused, + hasSimulator: (_, _2, _3, rootGetters) => rootGetters['flow/hasOfflineMode'] && rootGetters.isFeatureSimulatorEnabled && !rootGetters['builder/isEditable'], } export const mutations: MutationTree = { @@ -38,6 +40,10 @@ export const mutations: MutationTree = { export const actions: ActionTree = { setSimulatorActive({ commit }, value) { commit('setSimulatorActive', value) + const routeName = value ? 'flow-simulator' : 'flow-canvas' + router.replace({ + name: routeName, + }) }, resetBlocksData({ state }) { state.blocksData = [] @@ -58,7 +64,7 @@ export const actions: ActionTree = { }, removeFromBlocksData({ state }, index: number) { state.blocksData.splice(index) - } + }, } export const store: Module = { diff --git a/src/views/InteractionDesigner.vue b/src/views/InteractionDesigner.vue index 575765242..7013fdf6f 100644 --- a/src/views/InteractionDesigner.vue +++ b/src/views/InteractionDesigner.vue @@ -11,22 +11,7 @@ v-if="isSimulatorActive" class="tree-sidebar-container" :class="{ 'slide-out': !$route.meta.isSidebarShown,}"> - - -
+
@@ -148,7 +133,7 @@ export default { ...mapGetters('flow', ['activeFlow']), ...mapGetters('builder', ['activeBlock', 'isEditable', 'interactionDesignerBoundingClientRect']), - ...mapGetters('clipboard', ['isSimulatorActive']), + ...mapGetters('clipboard', ['hasSimulator', 'isSimulatorActive']), jsKey() { return get(this.selectedBlock, 'jsKey') @@ -221,6 +206,9 @@ export default { if (this.$route.meta?.isBlockEditorShown) { this.setIsBlockEditorOpen(true) } + if (this.$route.name === 'flow-simulator' && this.hasSimulator()) { + this.setSimulatorActive(true) + } }, 500) console.debug('Vuej tree interaction designer mounted!') @@ -242,6 +230,7 @@ export default { ...mapMutations('builder', ['activateBlock', 'setIsBlockEditorOpen', 'setInteractionDesignerBoundingClientRect']), ...mapActions('builder', ['setIsEditable']), ...mapMutations('flow', ['flow_setActiveFlowId']), + ...mapActions('clipboard', ['setSimulatorActive']), ...mapActions([ 'attemptSaveTree',