Add back button

src/views/Home.vue

@@ -3,7 +3,8 @@
     <template #header>
       <TopBar class="navbar">
         <template #left>
-          <span>Location: {{ currentPath }}</span>
+          <Button icon="pi pi-chevron-left" @click="onGoUp()" :disabled="currentPath === '/'"/>
+          <span style="margin-left: 20px;">Location: {{ currentPath }}</span>
         </template>
         <template #right>
           <Dropdown v-model="selectedApp" :options="apps" optionLabel="fqdn" placeholder="Select an App" style="margin-right: 10px" />
@@ -41,6 +42,7 @@ import { DirectoryView, TopBar, BottomBar, MainLayout } from 'pankow';
 
 import PreviewPanel from '../components/PreviewPanel.vue';
 import { createDirectoryModel } from '../models/DirectoryModel.js';
+import { sanitize } from '../utils';
 
 const BASE_URL = import.meta.env.VITE_API_ORIGIN ? 'https://' + import.meta.env.VITE_API_ORIGIN : '';
 
@@ -57,7 +59,7 @@ export default {
   },
   data() {
     return {
-      currentPath: '',
+      currentPath: '/',
       activeItem: {},
       items: [],
       apps: [],
@@ -84,6 +86,9 @@ export default {
   watch: {
     selectedApp(newApp, oldApp) {
       this.loadApp(newApp.id);
+    },
+    currentPath(newCurrentPath, oldCurrentPath) {
+      this.loadCurrentPath();
     }
   },
   methods: {
@@ -94,18 +99,15 @@ export default {
     onSelectionChanged(items) {
       this.activeItem = items[0];
     },
-    onItemActivated(item) {
-      console.log(item);
-      if (item.type === 'directory') {
-        this.currentPath = item.name;
-      }
+    onGoUp() {
+      this.currentPath = sanitize(this.currentPath.split('/').slice(0, -1).join('/'));
+      console.log('---', this.currentPath)
     },
-    async loadApp(appId) {
-      // const appId = 'e8cd3c78-9b5e-435e-a785-6ae2b574ff8a';
-
-      this.directoryModel = createDirectoryModel(BASE_URL, localStorage.accessToken, appId);
-
-      const items = await this.directoryModel.listFiles('');
+    onItemActivated(item) {
+      if (item.type === 'directory') this.currentPath = sanitize(this.currentPath + '/' + item.name);
+    },
+    async loadCurrentPath() {
+      const items = await this.directoryModel.listFiles(this.currentPath);
 
       // convert to format DirectoryView currently wants
       this.items = items.map(function (i) {
@@ -116,9 +118,15 @@ export default {
           modified: new Date(i.mtime),
           type: i.isDirectory ? 'directory' : 'file',
           mimeType: i.mimeType,
-          icon: `/mime-types/${i.mimeType.split('/').join('-')}.svg`
+          icon: `/mime-types/${i.mimeType === 'inode/symlink' ? 'none' : i.mimeType.split('/').join('-')}.svg`
         };
       });
+    },
+    async loadApp(appId) {
+      // const appId = 'e8cd3c78-9b5e-435e-a785-6ae2b574ff8a';
+
+      this.directoryModel = createDirectoryModel(BASE_URL, localStorage.accessToken, appId);
+      this.loadCurrentPath();
     }
   },
   async mounted() {
@@ -130,6 +138,9 @@ export default {
     } else {
       this.apps = result.body.apps.filter(a => !!a.manifest.addons.localstorage);
     }
+
+    this.selectedApp = this.apps.find(a => a.id === 'e78a515c-2153-48a6-aa62-badd6a540d4e');
+    if (this.selectedApp) this.loadApp(this.selectedApp.id);
   }
 };