Merge pull request #2191 from threefoldtech/development_reload_component

reload component when user clicks on back from any solution

packages/playground/src/components/view_layout.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="border px-4 pb-4 rounded position-relative mt-10" :class="{ 'pt-10': hasInfo, 'pt-6': !hasInfo }">
+  <div
+    class="border px-4 pb-4 rounded position-relative mt-10"
+    :class="{ 'pt-10': hasInfo, 'pt-6': !hasInfo }"
+    ref="viewLayoutContainer"
+  >
     <div
       class="mb-6"
       :style="{ opacity: $vuetify.theme.name === 'dark' ? 'var(--v-medium-emphasis-opacity)' : '' }"
@@ -24,7 +28,7 @@
       <VAlert variant="tonal" type="error" :text="title + ' requires public ssh key.'" class="mb-4" />
       <SshkeyView />
     </template>
-    <slot v-else />
+    <slot v-else :key="tick" />
 
     <div class="mt-4" v-if="$slots.list">
       <slot name="list" />
@@ -33,7 +37,7 @@
 </template>
 
 <script lang="ts">
-import { computed } from "vue";
+import { computed, onMounted, onUnmounted, ref } from "vue";
 import { useRoute } from "vue-router";
 
 import { useProfileManager } from "@/stores";
@@ -47,12 +51,31 @@ export default {
   setup() {
     const route = useRoute();
     const profileManager = useProfileManager();
+    const viewLayoutContainer = ref<HTMLElement>();
+    const tick = ref(0);
+
+    function reRender(e: Event) {
+      e.stopPropagation();
+      tick.value++;
+    }
+
+    onMounted(() => {
+      if (viewLayoutContainer.value) {
+        viewLayoutContainer.value?.addEventListener("render:solution", reRender);
+      }
+    });
+
+    onUnmounted(() => {
+      viewLayoutContainer.value?.removeEventListener("render:solution", reRender);
+    });
 
     return {
       title: computed(() => route.meta.title),
       hasInfo: computed(() => profileManager.profile && route.meta.info),
       ssh: computed(() => profileManager.profile?.ssh),
       requireSSH: computed(() => route.meta.requireSSH),
+      tick,
+      viewLayoutContainer,
     };
   },
 };

packages/playground/src/components/weblet_layout.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card>
+  <v-card ref="webletLayoutContainer">
     <section class="d-flex align-center">
       <div>
         <v-card-title v-if="$slots.title" class="font-weight-bold d-flex align-center title">
@@ -158,7 +158,7 @@ const props = defineProps({
 const emits = defineEmits<{ (event: "mount"): void; (event: "back"): void }>();
 const baseUrl = import.meta.env.BASE_URL;
 const profileManager = useProfileManager();
-
+const webletLayoutContainer = ref<VCard>();
 const status = ref<WebletStatus>();
 const message = ref<string>();
 function onLogMessage(msg: string) {
@@ -220,6 +220,12 @@ defineExpose({
 });
 
 function reset() {
+  if (status.value === "success") {
+    const element = webletLayoutContainer.value?.$el as HTMLElement;
+    if (element) {
+      element.dispatchEvent(new CustomEvent("render:solution", { bubbles: true, cancelable: true, composed: true }));
+    }
+  }
   status.value = undefined;
   message.value = undefined;
   emits("back");
@@ -316,6 +322,7 @@ async function loadCost(profile: { mnemonic: string }) {
 
 <script lang="ts">
 import type { ComputedRef, PropType, Ref } from "vue";
+import type { VCard } from "vuetify/components/VCard";
 
 import type { Balance } from "../utils/grid";
 import DeploymentDataDialog from "./deployment_data_dialog.vue";