cloudron-box/filemanager/src/views/Home.vue

<template>
  <MainLayout>
    <template #dialogs>
      <!-- have to use v-model instead of : bind - https://github.com/primefaces/primevue/issues/815 -->
      <Dialog v-model:visible="newFileDialog.visible" modal :style="{ width: '50vw' }" @show="onDialogShow('newFileDialogNameInput')">
        <template #header>
          <label class="dialog-header" for="newFileDialogNameInput">New file name</label>
        </template>
        <template #default>
          <form @submit="onNewFileDialogSubmit" @submit.prevent>
            <InputText class="dialog-single-input" id="newFileDialogNameInput" v-model="newFileDialog.name" :disabled="newFileDialog.busy" required/>
            <Button class="dialog-single-input-submit" type="submit" label="Create" :loading="newFileDialog.busy" :disabled="newFileDialog.busy || !newFileDialog.name"/>
          </form>
        </template>
      </Dialog>
      <Dialog v-model:visible="newFolderDialog.visible" modal :style="{ width: '50vw' }" @show="onDialogShow('newFolderDialogNameInput')">
        <template #header>
          <label class="dialog-header" for="newFolderDialogNameInput">New folder name</label>
        </template>
        <template #default>
          <form @submit="onNewFolderDialogSubmit" @submit.prevent>
            <InputText class="dialog-single-input" id="newFolderDialogNameInput" v-model="newFolderDialog.name" :disabled="newFolderDialog.busy" required/>
            <Button class="dialog-single-input-submit" type="submit" label="Create" :loading="newFolderDialog.busy" :disabled="newFolderDialog.busy || !newFolderDialog.name"/>
          </form>
        </template>
      </Dialog>
    </template>
    <template #header>
      <TopBar class="navbar">
        <template #left>
          <Button icon="pi pi-chevron-left" @click="onGoUp()" text :disabled="cwd === '/'"/>
          <span style="margin-left: 20px;">{{ cwd }}</span>
        </template>
        <template #right>
          <Button type="button" label="New" icon="pi pi-plus" @click="onCreateMenu" aria-haspopup="true" aria-controls="create_menu" style="margin-right: 10px" />
          <Menu ref="createMenu" id="create_menu" :model="createMenuModel" :popup="true" />
          <Button type="button" label="Upload" icon="pi pi-upload" @click="onUploadMenu" aria-haspopup="true" aria-controls="upload_menu" style="margin-right: 10px" />
          <Menu ref="uploadMenu" id="upload_menu" :model="uploadMenuModel" :popup="true" />
          <Dropdown v-model="activeResource" filter :options="resourcesDropdownModel" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" dataKey="id" @change="onAppChange" placeholder="Select an App or Volume" style="margin-right: 10px" />
        </template>
      </TopBar>
    </template>
    <template #body>
      <div class="main-view">
        <div class="main-view-col">
          <DirectoryView
            :show-owner="true"
            :show-size="true"
            :show-modified="true"
            @selection-changed="onSelectionChanged"
            @item-activated="onItemActivated"
            :delete-handler="deleteHandler"
            :rename-handler="renameHandler"
            :copy-handler="copyHandler"
            :cut-handler="cutHandler"
            :items="items"
          />
        </div>
        <div class="main-view-col" style="max-width: 300px;">
          <PreviewPanel :item="activeItem || activeDirectoryItem"/>
        </div>
      </div>
    </template>
    <template #footer>
      <FileUploader
        ref="fileUploader"
        :cwd="cwd"
        :upload-handler="uploadHandler"
        @finished="onUploadFinished"
      />
      <BottomBar />
    </template>
  </MainLayout>
</template>

<script>

import superagent from 'superagent';

import Button from 'primevue/button';
import Dialog from 'primevue/dialog';
import Dropdown from 'primevue/dropdown';
import InputText from 'primevue/inputtext';
import Menu from 'primevue/menu';

import { useConfirm } from 'primevue/useconfirm';

import { DirectoryView, TopBar, BottomBar, MainLayout, FileUploader } from 'pankow';
import { sanitize, buildFilePath } from 'pankow/utils';

import PreviewPanel from '../components/PreviewPanel.vue';
import { createDirectoryModel } from '../models/DirectoryModel.js';

const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? 'https://' + import.meta.env.VITE_API_ORIGIN : '';
const BASE_URL = import.meta.env.BASE_URL || '/';

export default {
  name: 'Home',
  components: {
    BottomBar,
    Button,
    Dialog,
    DirectoryView,
    Dropdown,
    FileUploader,
    InputText,
    MainLayout,
    Menu,
    PreviewPanel,
    TopBar
  },
  data() {
    return {
      cwd: '/',
      activeItem: null,
      activeDirectoryItem: {},
      items: [],
      selectedItems: [],
      clipboard: {},
      accessToken: localStorage.token,
      apiOrigin: API_ORIGIN || '',
      apps: [],
      volumes: [],
      resources: [],
      resourcesDropdownModel: [],
      selectedAppId: '',
      activeResource: null,
      visible: true,
      newFileDialog: {
        visible: false,
        busy: false,
        name: ''
      },
      newFolderDialog: {
        visible: false,
        busy: false,
        name: ''
      },
      // contextMenuModel will have activeItem attached if any command() is called
      createMenuModel: [{
        label: 'File',
        icon: 'pi pi-file',
        command: this.onNewFile
      }, {
        label: 'Folder',
        icon: 'pi pi-folder',
        command: this.onNewFolder
      }],
      uploadMenuModel: [{
        label: 'File',
        icon: 'pi pi-file',
        command: () => {
          this.$refs.fileUploader.onUploadFile();
        }
      }, {
        label: 'Folder',
        icon: 'pi pi-folder',
        command: () => {
          this.$refs.fileUploader.onUploadFolder();
        }
      }]
    };
  },
  watch: {
    cwd(newCwd, oldCwd) {
      if (this.activeResource) this.$router.push(`/home/${this.activeResource.type}/${this.activeResource.id}${this.cwd}`);
      this.loadCwd();
    }
  },
  methods: {
    onCreateMenu(event) {
      this.$refs.createMenu.toggle(event);
    },
    onUploadMenu(event) {
      this.$refs.uploadMenu.toggle(event);
    },
    // generic dialog focus handler
    onDialogShow(focusElementId) {
      setTimeout(() => document.getElementById(focusElementId).focus(), 0);
    },
    onNewFile() {
      this.newFileDialog.busy = false;
      this.newFileDialog.name = '';
      this.newFileDialog.visible = true;
    },
    async onNewFileDialogSubmit() {
      this.newFileDialog.busy = true;
      await this.directoryModel.newFile(buildFilePath(this.cwd, this.newFileDialog.name), this.newFileDialog.name);
      await this.loadCwd();
      this.newFileDialog.visible = false;
    },
    onNewFolder() {
      this.newFolderDialog.busy = false;
      this.newFolderDialog.name = '';
      this.newFolderDialog.visible = true;
    },
    async onNewFolderDialogSubmit() {
      this.newFolderDialog.busy = true;
      await this.directoryModel.newFolder(buildFilePath(this.cwd, this.newFolderDialog.name));
      await this.loadCwd();
      this.newFolderDialog.visible = false;
    },
    onUploadFinished() {
      this.loadCwd();
    },
    onAppChange(event) {
      this.$router.push(`/home/${event.value.type}/${event.value.id}`);
      this.cwd = '/';
      this.loadResource(event.value);
    },
    onSelectionChanged(items) {
      this.activeItem = items[0] || null;
      this.selectedItems = items;
    },
    onGoUp() {
      this.cwd = sanitize(this.cwd.split('/').slice(0, -1).join('/'));
    },
    onItemActivated(item) {
      if (!item) 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)}`);
    },
    async deleteHandler(files) {
      if (!files) return;

      for (let i in files) {
        await this.directoryModel.remove(buildFilePath(this.cwd, files[i].name));
      }

      await this.loadCwd();
    },
    async renameHandler(file, newName) {
      await this.directoryModel.rename(buildFilePath(this.cwd, file.name), sanitize(this.cwd + '/' + newName));
      await this.loadCwd();
    },
    async copyHandler(files) {
      if (!files) return;

      this.clipboard = {
        action: 'copy',
        files
      };
    },
    async cutHandler(files) {
      if (!files) return;

      this.clipboard = {
        action: 'cut',
        files
      };
    },
    async uploadHandler(targetDir, file, progressHandler) {
      await this.directoryModel.upload(targetDir, file, progressHandler);
      await this.loadCwd();
    },
    async loadCwd() {
      this.items = await this.directoryModel.listFiles(this.cwd);

      const tmp = this.cwd.split('/').slice(1);
      let name = this.activeResource.fqdn;
      if (tmp.length > 1) name = tmp[tmp.length-2];

      this.activeDirectoryItem = {
        id: name,
        name: name,
        type: 'directory',
        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() {
    useConfirm();

    // load all apps
    let error, result;
    try {
      result = await superagent.get(`${this.apiOrigin}/api/v1/apps`).query({ access_token: this.accessToken });
    } catch (e) {
      error = e;
    }

    if (error || result.statusCode !== 200) {
      console.error('Failed to list apps', error || result.statusCode);
      this.apps = [];
    } else {
      this.apps = result.body ? result.body.apps.filter(a => !!a.manifest.addons.localstorage) : [];
    }
    this.apps.forEach(function (a) { a.type = 'app'; a.label = a.fqdn; });

    // load all volumes
    try {
      result = await superagent.get(`${this.apiOrigin}/api/v1/volumes`).query({ access_token: this.accessToken });
    } catch (e) {
      error = e;
    }

    if (error || result.statusCode !== 200) {
      console.error('Failed to list volumes', error || result.statusCode);
      this.volumes = [];
    } else {
      this.volumes = result.body ? result.body.volumes : [];
    }
    this.volumes.forEach(function (a) { a.type = 'volume'; a.label = a.name; });

    this.resources = this.apps.concat(this.volumes);

    this.resourcesDropdownModel = [{
      label: 'Apps',
      items: this.apps
    }, {
      label: 'Volumes',
      items: this.volumes
    }];

    const type = this.$route.params.type || 'app';
    const resourceId = this.$route.params.resourceId;

    if (type === 'volume') {
      this.activeResource = this.volumes.find(a => a.id === resourceId);
      if (!this.activeResource) this.activeResource = this.volumes[0];
      if (!this.activeResource) return console.error('Unable to find volumes', resourceId);
    } else if (type === 'app') {
      this.activeResource = this.apps.find(a => a.id === resourceId);
      if (!this.activeResource) this.activeResource = this.apps[0];
      if (!this.activeResource) return console.error('Unable to find app', resourceId);
    } else {
      this.activeResource = this.apps[0];
    }

    if (!this.activeResource) {
      console.error('Not able to load apps or volumes. Cannot continue');
      return;
    }

    this.cwd = sanitize('/' + (this.$route.params.cwd ? this.$route.params.cwd.join('/') : '/'));

    this.loadResource(this.activeResource);

    this.$watch(() => this.$route.params, (toParams, previousParams) => {
      if (toParams.type === 'volume') {
        this.activeResource = this.volumes.find(a => a.id === toParams.resourceId);
      } else if (toParams.type === 'app') {
        this.activeResource = this.apps.find(a => a.id === toParams.resourceId);
      } else {
        console.error(`Unknown type ${toParams.type}`);
      }

      this.cwd = toParams.cwd ? `/${toParams.cwd.join('/')}` : '/';
    });
  }
};

</script>

<style scoped>

.main-view {
  flex-grow: 1;
  overflow: hidden;
  height: 100%;
  display: flex;
  padding: 0 10px
}

.main-view-col {
  overflow: auto;
  flex-grow: 1;
}

.dialog-header {
  font-weight: 600;
  font-size: 1.25rem;
}

.dialog-single-input {
  display: block;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 1.5rem;
}

.dialog-single-input-submit {
  margin-top: 5px;
}

</style>