fix: preserve tab state when switching between views

src/App.vue

@@ -28,7 +28,9 @@ onMounted(() => {
         PageTabs
 
         .p-4#router
-            router-view
+            router-view(v-slot="{ Component }")
+                KeepAlive
+                    component(:is="Component")
 </template>
 
 <style scoped>

src/views/AbilitiesView.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { storeToRefs } from "pinia";
-import { reactive, ref, inject, onMounted, computed } from "vue";
+import { reactive, ref, inject, onMounted, onActivated, computed } from "vue";
 import { useRoute } from "vue-router";
 import { useAbilityStore } from "@/stores/abilityStore";
 import { getAbilityPlatforms } from "@/utils/abilityUtil.js";
@@ -39,6 +39,10 @@ onMounted(async () => {
     filters.plugin = route.query.plugin || "";
 });
 
+onActivated(async () => {
+    await abilityStore.getAbilities($api);
+});
+
 function clearFilters() {
     Object.keys(filters).forEach((k) => filters[k] = "");
 }

src/views/AdversariesView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { inject, reactive, ref, onMounted, computed } from "vue";
+import { inject, reactive, ref, onMounted, onActivated, computed } from "vue";
 import { storeToRefs } from "pinia";
 
 import { useAdversaryStore } from "@/stores/adversaryStore";
@@ -31,6 +31,12 @@ onMounted(async () => {
     await objectiveStore.getObjectives($api);
 });
 
+onActivated(async () => {
+    await abilityStore.getAbilities($api);
+    await adversaryStore.getAdversaries($api);
+    await objectiveStore.getObjectives($api);
+});
+
 function selectAdversary(adversary) {
     selectedAdversary.value = adversary; 
     adversaryStore.updateSelectedAdversaryAbilities();

src/views/AgentsView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { inject, onMounted, onBeforeUnmount, ref } from "vue";
+import { inject, onMounted, onActivated, onDeactivated, ref } from "vue";
 import { storeToRefs } from "pinia";
 
 import { useAgentStore } from '@/stores/agentStore';
@@ -26,9 +26,16 @@ onMounted(async () => {
     }, 3000);
 });
 
-onBeforeUnmount(() => {
+onActivated(async () => {
+    await agentStore.getAgents($api);
+    agentRefreshInterval.value = setInterval(async () => {
+        await agentStore.getAgents($api);
+    }, 3000);
+});
+
+onDeactivated(() => {
     clearInterval(agentRefreshInterval.value);
-})
+});
 
 function removeDeadAgents() {
     agents.value.forEach((agent, index) => {

src/views/ContactsView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { inject, onMounted } from "vue";
+import { inject, onMounted, onActivated } from "vue";
 import { useCoreStore } from "../stores/coreStore";
 import { storeToRefs } from "pinia";
 
@@ -14,6 +14,11 @@ onMounted(async () => {
   await coreStore.getAvailableContacts($api);
 });
 
+onActivated(async () => {
+  await coreStore.getContacts($api);
+  await coreStore.getAvailableContacts($api);
+});
+
 async function downloadReport(contact) {
   await coreStore.downloadContactReport($api, contact);
 }

src/views/ExfilledFilesView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, ref, inject, onMounted, watch } from "vue";
+import { reactive, ref, inject, onMounted, onActivated, watch } from "vue";
 import { storeToRefs } from "pinia";
 import { useCoreStore } from "@/stores/coreStore";
 import { useOperationStore } from "@/stores/operationStore";
@@ -29,6 +29,11 @@ onMounted(async () => {
   });
 });
 
+onActivated(async () => {
+  await operationStore.getOperations($api);
+  exfilStore.loadFiles($api, selectedOperationId.value);
+});
+
 function toggleAllFiles() {
   if (selectedFiles.value.length < numFiles.value) {
     Object.keys(files.value).forEach((agentName) => {

src/views/FactSourcesView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, inject, onMounted } from "vue";
+import { ref, inject, onMounted, onActivated } from "vue";
 import { storeToRefs } from "pinia";
 
 import { useSourceStore } from "@/stores/sourceStore.js";
@@ -19,6 +19,10 @@ onMounted(() => {
   sourceStore.getSources($api);
 });
 
+onActivated(() => {
+  sourceStore.getSources($api);
+});
+
 function saveSource() {
   selectedSource.value.name = newSourceName.value;
   sourceStore.saveSource($api, selectedSource);

src/views/HomeView.vue

@@ -6,7 +6,7 @@ import AdversaryChartStatus from "@/components/adversaries/AdversaryChartStatus.
 import CodeEditor from "@/components/core/CodeEditor.vue";
 import { useCoreStore } from "@/stores/coreStore";
 import { storeToRefs } from "pinia";
-import { onMounted, inject } from "vue";
+import { onMounted, onActivated, inject } from "vue";
 
 const coreStore = useCoreStore();
 const $api = inject("$api");
@@ -17,6 +17,14 @@ onMounted(async () => {
     console.error(error);
   }
 });
+
+onActivated(async () => {
+  try {
+    await coreStore.getMainConfig($api);
+  } catch (error) {
+    console.error(error);
+  }
+});
 </script>
 
 <template lang="pug">

src/views/ObfuscatorsView.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { storeToRefs } from "pinia";
-import { inject, onMounted } from "vue";
+import { inject, onMounted, onActivated } from "vue";
 import { useCoreStore } from "../stores/coreStore";
 
 const coreStore = useCoreStore();
@@ -11,6 +11,10 @@ const $api = inject("$api");
 onMounted(async () => {
     await coreStore.getObfuscators($api);
 });
+
+onActivated(async () => {
+    await coreStore.getObfuscators($api);
+});
 </script>
 
 <template lang="pug">

src/views/ObjectivesView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, inject, onMounted } from "vue";
+import { ref, inject, onMounted, onActivated } from "vue";
 import { storeToRefs } from "pinia";
 
 import { useAdversaryStore } from "@/stores/adversaryStore.js";
@@ -18,6 +18,10 @@ onMounted(async () => {
     await adversaryStore.getObjectives($api);
 });
 
+onActivated(async () => {
+    await adversaryStore.getObjectives($api);
+});
+
 function editNameDesc() {
     newObjectiveName.value = selectedObjective.value.name;
     newObjectiveDescription.value = selectedObjective.value.description;

src/views/OperationsView.vue

@@ -3,7 +3,8 @@ import {
   inject,
   ref,
   onMounted,
-  onBeforeUnmount,
+  onActivated,
+  onDeactivated,
   computed,
   watch,
   reactive,
@@ -179,7 +180,14 @@ onMounted(async () => {
   selectOperation();
 });
 
-onBeforeUnmount(() => {
+onActivated(async () => {
+  await operationStore.getOperations($api);
+  await agentStore.getAgents($api);
+  agentStore.updateAgentGroups();
+  selectOperation();
+});
+
+onDeactivated(() => {
   if (updateInterval) clearInterval(updateInterval);
 });
 

src/views/PayloadsView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { inject, onMounted, computed } from "vue";
+import { inject, onMounted, onActivated, computed } from "vue";
 import { storeToRefs } from "pinia";
 
 import { useCoreDisplayStore } from "@/stores/coreDisplayStore";
@@ -43,6 +43,10 @@ onMounted(async () => {
     await abilityStore.getPayloads($api, true, false, true);
 });
 
+onActivated(async () => {
+    await abilityStore.getPayloads($api, true, false, true);
+});
+
 </script>
 
 <template lang="pug">

src/views/PlannersView.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { storeToRefs } from "pinia";
-import { inject, onMounted } from "vue";
+import { inject, onMounted, onActivated } from "vue";
 import { useCoreStore } from "../stores/coreStore";
 
 const coreStore = useCoreStore();
@@ -11,6 +11,10 @@ const $api = inject("$api");
 onMounted(async () => {
     await coreStore.getPlanners($api);
 });
+
+onActivated(async () => {
+    await coreStore.getPlanners($api);
+});
 </script>
 
 <template lang="pug">

src/views/SchedulesView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, inject, onMounted } from 'vue';
+import { computed, inject, onMounted, onActivated } from 'vue';
 import { storeToRefs } from "pinia";
 
 import CreateScheduleModal from "@/components/schedules/CreateScheduleModal.vue";
@@ -32,6 +32,12 @@ onMounted(async () => {
   await agentStore.getAgents($api);
   agentStore.updateAgentGroups();
 });
+
+onActivated(async () => {
+  await scheduleStore.getSchedules($api);
+  await agentStore.getAgents($api);
+  agentStore.updateAgentGroups();
+});
 </script>
 
 <template lang="pug">

src/views/SettingsView.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { storeToRefs } from "pinia";
-import { ref, inject, onMounted, computed, watch } from "vue";
+import { ref, inject, onMounted, onActivated, computed, watch } from "vue";
 import { useCoreStore } from "../stores/coreStore";
 
 const coreStore = useCoreStore();
@@ -20,6 +20,10 @@ onMounted(async () => {
     await coreStore.getMainConfig($api);
 });
 
+onActivated(async () => {
+    await coreStore.getMainConfig($api);
+});
+
 function isSettingChanged(setting) {
     return settings.value[setting] === mainConfig.value[setting];
 }