filemanager: improve resource (app/volume/mail) handling

filemanager/src/views/Home.vue

@@ -128,7 +128,9 @@ export default {
       },
       accessToken: localStorage.token,
       apiOrigin: API_ORIGIN || '',
-      activeResource: null,
+      title: 'Cloudron',
+      resourceType: '',
+      resourceId: '',
       visible: true,
       newFileDialog: {
         visible: false,
@@ -176,7 +178,7 @@ export default {
   },
   watch: {
     cwd(newCwd, oldCwd) {
-      if (this.activeResource) this.$router.push(`/home/${this.activeResource.type}/${this.activeResource.id}${this.cwd}`);
+      if (this.resourceType && this.resourceId) this.$router.push(`/home/${this.resourceType}/${this.resourceId}${this.cwd}`);
       this.loadCwd();
     }
   },
@@ -275,7 +277,7 @@ export default {
       if (item.mimeType === 'inode/symlink') return;
 
       if (item.type === 'directory') this.cwd = sanitize(this.cwd + '/' + item.name);
-      else this.$router.push(`/viewer/${this.activeResource.type}/${this.activeResource.id}${sanitize(this.cwd + '/' + item.name)}`);
+      else this.$router.push(`/viewer/${this.resourceType}/${this.resourceId}${sanitize(this.cwd + '/' + item.name)}`);
     },
     async deleteHandler(files) {
       if (!files) return;
@@ -332,7 +334,7 @@ export default {
       this.items = await this.directoryModel.listFiles(this.cwd);
 
       const tmp = this.cwd.split('/').slice(1);
-      let name = this.activeResource.fqdn;
+      let name = this.title;
       if (tmp.length > 1) name = tmp[tmp.length-2];
 
       this.activeDirectoryItem = {
@@ -342,11 +344,6 @@ export default {
         mimeType: 'inode/directory',
         icon: `${BASE_URL}mime-types/inode-directory.svg`
       };
-    },
-    async loadResource(resource) {
-      this.activeResource = resource;
-      this.directoryModel = createDirectoryModel(this.apiOrigin, this.accessToken, resource.type === 'volume' ? `volumes/${resource.id}` : `apps/${resource.id}`);
-      this.loadCwd();
     }
   },
   async mounted() {
@@ -354,17 +351,50 @@ export default {
 
     const type = this.$route.params.type || 'app';
     const resourceId = this.$route.params.resourceId;
+    const cwd = this.$route.params.cwd;
 
-    // load via api to test
-    const resource = {
-      fqdn: 'FIXME',
-      type,
-      id: resourceId
-    };
+    if (type === 'app') {
+      let error, result;
+      try {
+        result = await superagent.get(`${this.apiOrigin}/api/v1/apps/${resourceId}`).query({ access_token: this.accessToken });
+      } catch (e) {
+        error = e;
+      }
 
-    this.cwd = sanitize('/' + (this.$route.params.cwd ? this.$route.params.cwd.join('/') : '/'));
+      if (error || result.statusCode !== 200) {
+        console.error(`Invalid resource ${type} ${resourceId}`, error || result.statusCode);
+        return;
+      }
 
-    this.loadResource(resource);
+      this.title = result.body.label || result.body.fqdn;
+    } else if (type === 'volume') {
+      let error, result;
+      try {
+        result = await superagent.get(`${this.apiOrigin}/api/v1/volumes/${resourceId}`).query({ access_token: this.accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.statusCode !== 200) {
+        console.error(`Invalid resource ${type} ${resourceId}`, error || result.statusCode);
+        return;
+      }
+
+      this.title = result.body.name;
+    } else if (type === 'mail') {
+      this.title = 'Mail';
+    } else {
+      console.error(`Unsupported type ${type}`);
+      return;
+    }
+
+    window.document.title = this.title + ' - File Manager';
+
+    this.cwd = sanitize('/' + (cwd ? cwd.join('/') : '/'));
+    this.resourceType = type;
+    this.resourceId = resourceId;
+    this.directoryModel = createDirectoryModel(this.apiOrigin, this.accessToken, type === 'volume' ? `volumes/${resourceId}` : `apps/${resourceId}`);
+    this.loadCwd();
 
     this.$watch(() => this.$route.params, (toParams, previousParams) => {
       if (toParams.type !== 'app' && toParams.type !== 'volume') {
@@ -372,14 +402,10 @@ export default {
         return;
       }
 
-      if ((toParams.type !== this.activeResource.type) || (toParams.resourceId !== this.activeResource.id)) {
-        const resource = {
-          fqdn: 'FIXME',
-          type: toParams.type,
-          id: toParams.resourceId
-        };
-
-        this.loadResource(resource);
+      if ((toParams.type !== this.resourceType) || (toParams.resourceId !== this.resourceId)) {
+        this.resourceType = toParams.type;
+        this.resourceId = toParams.resourceId;
+        this.directoryModel = createDirectoryModel(this.apiOrigin, this.accessToken, toParams.type === 'volume' ? `volumes/${toParams.resourceId}` : `apps/${toParams.resourceId}`);
       }
 
       this.cwd = toParams.cwd ? `/${toParams.cwd.join('/')}` : '/';