Converted views/Layout.vue

frontend/src/views/Layout.vue

@@ -1,19 +1,19 @@
 <template>
   <div>
-    <div v-if="progress" class="progress">
-      <div v-bind:style="{ width: this.progress + '%' }"></div>
+    <div v-if="false" class="layoutStore.progress">
+      <!-- <div v-bind:style="{ width: this.layoutStore.progress + '%' }"></div> -->
     </div>
     <sidebar></sidebar>
     <main>
       <router-view></router-view>
-      <shell v-if="isExecEnabled && isLoggedIn && user.perm.execute" />
+      <shell v-if="enableExec && authStore.isLoggedIn && authStore.user?.perm.execute" />
     </main>
     <prompts></prompts>
     <upload-files></upload-files>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { mapActions, mapState, mapWritableState } from "pinia";
 import { useAuthStore } from "@/stores/auth";
 import { useLayoutStore } from "@/stores/layout";
@@ -23,32 +23,20 @@ import Prompts from "@/components/prompts/Prompts.vue";
 import Shell from "@/components/Shell.vue";
 import UploadFiles from "@/components/prompts/UploadFiles.vue";
 import { enableExec } from "@/utils/constants";
+import { computed, watch } from "vue";
+import { useRoute } from "vue-router";
 
-export default {
-  name: "layout",
-  components: {
-    Sidebar,
-    Prompts,
-    Shell,
-    UploadFiles,
-  },
-  computed: {
-    ...mapState(useAuthStore, ["isLoggedIn", "user"]),
-    ...mapState(useLayoutStore, ["progress", "show"]),
-    ...mapWritableState(useFileStore, ["selected", "multiple"]),
-    isExecEnabled: () => enableExec,
-  },
-  methods: {
-    ...mapActions(useLayoutStore, ["closeHovers"]),
-  },
-  watch: {
-    $route: function () {
-      this.selected = [];
-      this.multiple = false;
-      if (this.show !== "success") {
-        this.closeHovers();
+const layoutStore = useLayoutStore();
+const authStore = useAuthStore();
+const fileStore = useFileStore();
+const route = useRoute();
+
+watch(route, (newval, oldval) => {
+  fileStore.selected = [];
+      fileStore.multiple = false;
+      if (layoutStore.show !== "success") {
+        layoutStore.closeHovers();
       }
-    },
-  },
-};
+})
+
 </script>