@hostlink/nuxt-light 1.61.0 → 1.62.0

package/dist/runtime/components/l-file-manager.vue

@@ -1,43 +1,42 @@
 <script setup>
 import { useI18n } from "vue-i18n";
 import { ref, watch, computed } from "vue";
-import { useQuasar, format } from "quasar";
-import { q, m, useLight } from "#imports";
-import { getApiClient, getGrantedRights } from "@hostlink/light";
-const api = getApiClient();
-import { getDrive, listDrives } from "@hostlink/light";
+import { useQuasar, format, date } from "quasar";
+import { q, m, useLight, showUploadFilesDialog } from "#imports";
+import { getGrantedRights } from "@hostlink/light";
+import { fs } from "@hostlink/light";
 const { humanStorageSize } = format;
 const light = useLight();
 const i18n = useI18n();
 const $q = useQuasar();
 const emit = defineEmits(["input", "close"]);
-const drives = await listDrives();
+const fss = await q({
+  app: {
+    fs: {
+      list: true
+    }
+  }
+}).then((res) => res.app.fs.list);
 const folders = ref([]);
 const files = ref([]);
-const nodes = drives.map((drive2) => {
+const nodes = fss.map((drive) => {
   return {
     icon: "sym_o_storage",
-    name: drive2.name,
-    id: drive2.index.toString(),
+    name: drive.name,
+    location: drive.name + "://",
     path: "/",
     lazy: true,
-    driveIndex: drive2.index,
+    driveIndex: drive.index,
     type: "drive"
   };
 });
 const onLazyLoad = async ({ node, key, done, fail }) => {
-  const folders2 = await api.drive(node.driveIndex).folders.list(node.path, {
-    name: true,
-    path: true
-  });
-  const data = folders2.map((item) => {
-    item.driveIndex = node.driveIndex;
-    item.id = node.driveIndex + "/" + item.path;
+  const folder = await fs.list(node.location);
+  const folders2 = folder.children.filter((item) => item.__typename === "Folder").map((item) => {
     item.lazy = true;
-    item.type = "folder";
     return item;
   });
-  done(data);
+  done(folders2);
 };
 const props = defineProps({
   closeable: Boolean,
@@ -80,7 +79,14 @@ const columns = ref([
   {
     name: "last_modified",
     label: i18n.t("Last Modified"),
-    field: "lastModifiedHuman",
+    field: "lastModified",
+    sortable: true,
+    format: (value) => {
+      if (value) {
+        return date.formatDate(value * 1e3, "YYYY-MM-DD HH:mm:ss");
+      }
+      return "";
+    },
     align: "left"
   },
   {
@@ -88,6 +94,7 @@ const columns = ref([
     label: i18n.t("Size"),
     field: "size",
     align: "right",
+    sortable: true,
     format: (val) => {
       if (val == null) {
         return "";
@@ -100,104 +107,43 @@ const columns = ref([
 const localSearch = ref(null);
 const rightDrawerOpen = ref(false);
 const leftDrawerOpen = ref(false);
-const showDateOptions = ref(false);
-const exactPhrase = ref("");
-const hasWords = ref("");
-const excludeWords = ref("");
-const byWebsite = ref("");
-const byDate = ref("Any time");
-function onClear() {
-  exactPhrase.value = "";
-  hasWords.value = "";
-  excludeWords.value = "";
-  byWebsite.value = "";
-  byDate.value = "Any time";
-}
-function changeDate(option) {
-  byDate.value = option;
-  showDateOptions.value = false;
-}
 function toggleLeftDrawer() {
   leftDrawerOpen.value = !leftDrawerOpen.value;
 }
 const loadItems = async () => {
-  let path2 = selectedPath.value;
+  let path = selectedLocation.value;
   files.value = [];
   folders.value = [];
-  loading.value = true;
-  let filesParams = { path: path2 };
-  if (label.value) {
-    filesParams.type = label.value;
+  if (!path) {
+    return;
   }
-  if (localSearch.value) {
-    filesParams.search = localSearch.value;
+  if (label.value || localSearch.value) {
+    loading.value = true;
+    const items2 = await fs.find(localSearch.value, label.value);
+    loading.value = false;
+    files.value = items2.filter((item) => item.__typename === "File");
+    folders.value = items2.filter((item) => item.__typename === "Folder");
+    return;
   }
-  const resp = await q({
-    app: {
-      drive: {
-        __args: {
-          index: selectedDrive.value
-        },
-        files: {
-          __args: filesParams,
-          name: true,
-          path: true,
-          size: true,
-          mime: true,
-          url: true,
-          lastModified: true,
-          lastModifiedHuman: true
-        }
-      }
-    }
-  });
-  files.value = resp.app.drive.files.map((item) => {
-    item.driveIndex = selectedDrive.value;
-    item.type = "file";
-    return item;
-  });
+  loading.value = true;
+  const folder = await fs.list(path);
+  loading.value = false;
+  files.value = folder.children.filter((item) => item.__typename === "File");
   if (!label.value && !localSearch.value) {
-    folders.value = (await drive.value.folders.list(path2)).map((item) => {
-      item.driveIndex = selectedDrive.value;
-      item.type = "folder";
+    folders.value = folder.children.filter((item) => item.__typename === "Folder").map((item) => {
       item.lazy = true;
-      item.id = selectedDrive.value + "/" + item.path;
       return item;
     });
-    reloadTreeFolder(selectedNodePath.value, folders.value);
+    reloadTreeFolder(selectedLocation.value, folders.value);
   }
-  loading.value = false;
 };
 const label = ref(null);
 watch(label, () => {
   loadItems();
 });
 const selected = ref([]);
-const breadcrumbs = computed(() => {
-  if (selectedPath.value.toString() == "") {
-    return [];
-  }
-  let paths = selectedNodePath.value.split("/");
-  let driveIndex = paths.shift();
-  let driveName = drives.find((d) => d.index == driveIndex).name;
-  let breadcrumbs2 = [{
-    label: driveName,
-    path: driveIndex
-  }];
-  let ps = [];
-  for (let p of paths) {
-    if (p) {
-      ps.push(p);
-      breadcrumbs2.push({
-        label: p,
-        path: driveIndex + "/" + ps.join("/")
-      });
-    }
-  }
-  return breadcrumbs2;
-});
 const onClickRow = (evt, row, index) => {
-  if (row.type == "folder") {
+  if (row.__typename == "Folder") {
     preview.value = null;
     return;
   }
@@ -205,31 +151,31 @@ const onClickRow = (evt, row, index) => {
 };
 const grid = ref(false);
 const onDblclickRow = (evt, row, index) => {
-  if (row.type == "folder") {
-    selectedNodePath.value = row.driveIndex + "/" + row.path;
+  if (row.__typename == "Folder") {
+    selectedLocation.value = row.location;
     return;
   }
-  if (row.type == "file") {
+  if (row.__typename == "File") {
     emit("input", row.path);
   }
 };
-const findFolder = (path2, folders2) => {
+const findFolder = (path, folders2) => {
   folders2.value.forEach((item) => {
-    if (item.path == path2) {
+    if (item.path == path) {
       return item;
     }
-    let found = findFolder(path2, item.children);
+    let found = findFolder(path, item.children);
     if (found) {
       return found;
     }
   });
 };
-const reloadTreeFolder = (path2, newFolders) => {
-  let node = folderTree.value.getNodeByKey(path2);
+const reloadTreeFolder = (path, newFolders) => {
+  let node = folderTree.value.getNodeByKey(path);
   if (node) {
     node.lazy = false;
     node.children = newFolders;
-    folderTree.value.setExpanded(path2, true);
+    folderTree.value.setExpanded(path, true);
   }
 };
 const onDeleteSelected = () => {
@@ -238,14 +184,17 @@ const onDeleteSelected = () => {
     message: "Are you sure you want to delete this files or folders?",
     cancel: true
   }).onOk(async () => {
+    loading.value = true;
     for (let row of selected.value) {
-      if (row.type == "folder") {
-        await drive.value.folders.delete(row.path);
+      if (row.__typename == "Folder") {
+        await fs.deleteFolder(row.location);
       } else {
-        await drive.value.files.delete(row.path);
+        await fs.deleteFile(row.location);
       }
     }
+    loading.value = false;
     selected.value = [];
+    preview.value = null;
     await loadItems();
   });
 };
@@ -257,98 +206,83 @@ const onNewFolder = () => {
       label: "Name",
       isValid: (val) => {
         return val.length > 0;
-      }
+      },
+      hint: "Create a new folder in " + selectedLocation.value
     },
     cancel: true
   }).onOk(async (name) => {
-    await drive.value.folders.create(selectedPath.value + "/" + name);
+    loading.value = true;
+    await fs.createFolder(selectedLocation.value + "/" + name);
     await loadItems();
+    loading.value = false;
   });
 };
-const onDeleteRow = (row) => {
-  if (row.type == "file") {
+const onDeleteRow = (node) => {
+  if (node.__typename == "File") {
     $q.dialog({
       title: "Delete",
       message: "Are you sure you want to delete this file?",
       cancel: true
     }).onOk(async () => {
-      await drive.value.files.delete(row.path);
+      loading.value = true;
+      await fs.deleteFile(node.location);
       await loadItems();
+      loading.value = false;
     });
-  } else if (row.type == "folder") {
+  } else if (node.__typename == "Folder") {
     $q.dialog({
       title: "Delete",
       message: "Are you sure you want to delete this folder?",
       cancel: true
     }).onOk(async () => {
-      await drive.value.folders.delete(row.path);
+      loading.value = true;
+      await fs.deleteFolder(node.location);
       await loadItems();
+      loading.value = false;
     });
   }
 };
-const onRenameRow = (row) => {
+const onRenameNode = (node) => {
   $q.dialog({
-    title: "Rename " + row.type,
+    title: "Rename " + node.__typename,
     prompt: {
       label: "Name",
-      model: row.name
+      model: node.name
     },
     cancel: true
   }).onOk(async (name) => {
     try {
-      if (row.type == "file") {
-        await drive.value.files.rename(row.path, name);
+      if (node.__typename == "File") {
+        await fs.renameFile(node.location, name);
       } else {
-        await drive.value.folders.rename(row.path, name);
+        await fs.renameFolder(node.location, name);
       }
+      await loadItems();
     } catch (e) {
-      $q.dialog({
+      $q.notify({
         title: "Error",
-        message: e.message
+        message: e.message,
+        type: "negative"
       });
-      return;
     }
-    await loadItems();
   });
 };
-const uploadFiles = ref([]);
-const showUploadFiles = ref(false);
-const onUploadFiles = async () => {
-  $q.loading.show({
-    message: "Uploading files..."
+const openUploadDialog = () => {
+  showUploadFilesDialog(selectedLocation.value).onOk((files2) => {
+    loadItems();
   });
+};
+const preview = ref(null);
+const moveToFolder = async (folder) => {
   try {
-    for (let file of uploadFiles.value) {
-      await m("lightDriveUploadFile", {
-        index: selectedDrive.value,
-        path: selectedPath.value,
-        file
-      });
+    for (let node of selected.value) {
+      await fs.move(node.location, folder);
     }
   } catch (e) {
     $q.dialog({
       title: "Error",
       message: e.message
     });
-    $q.loading.hide();
-    return;
-  }
-  uploadFiles.value = [];
-  $q.loading.hide();
-  showUploadFiles.value = false;
-  await loadItems();
-};
-const preview = ref(null);
-const drive = computed(() => {
-  return api.drive(selectedDrive.value);
-});
-const moveToFolder = async (folder) => {
-  for (let row of selected.value) {
-    if (row.type == "folder") {
-      await drive.value.folders.move(row.path, folder);
-    } else {
-      await drive.value.files.move(row.path, folder);
-    }
   }
   await loadItems();
 };
@@ -356,21 +290,14 @@ const submitSearch = (e) => {
   localSearch.value = search.value;
   loadItems();
 };
-const onDownloadRow = async (row) => {
-  const base64Content = await getDrive(row.driveIndex).files.readFileAsBase64(row.path);
+const onDownloadNode = async (node) => {
+  const base64Content = await fs.readFile(node.location, "base64");
   const downloadLink = document.createElement("a");
-  downloadLink.href = `data:application/octet-stream;base64,${base64Content}`;
-  downloadLink.download = row.name;
+  downloadLink.href = `data:${node.mimeType};base64,${base64Content}`;
+  downloadLink.download = node.name;
   downloadLink.click();
 };
 const search = ref(null);
-const reloadStorage = async () => {
-  path.value = props.base;
-  search.value = "";
-  localSearch.value = "";
-  label.value = null;
-  await loadItems();
-};
 const permission = await getGrantedRights([
   "fs.folder.create",
   "fs.folder.delete",
@@ -380,19 +307,19 @@ const permission = await getGrantedRights([
   "fs.file.upload"
 ]);
 const canDeleteRow = (row) => {
-  if (row.type == "folder" && permission.includes("fs.folder.delete")) {
+  if (row.__typename == "Folder" && permission.includes("fs.folder.delete")) {
     return true;
   }
-  if (row.type == "file" && permission.includes("fs.file.delete")) {
+  if (row.__typename == "File" && permission.includes("fs.file.delete")) {
     return true;
   }
   return false;
 };
 const canRenameRow = (row) => {
-  if (row.type == "folder" && permission.includes("fs.folder.rename")) {
+  if (row.__typename == "Folder" && permission.includes("fs.folder.rename")) {
     return true;
   }
-  if (row.type == "file" && permission.includes("fs.file.rename")) {
+  if (row.__typename == "File" && permission.includes("fs.file.rename")) {
     return true;
   }
   return false;
@@ -400,18 +327,37 @@ const canRenameRow = (row) => {
 const showPreviewImgDialog = ref(false);
 const previewImg = ref(null);
 const isDark = computed(() => light.isDarkMode());
-const onPreview = (row) => {
+const getFilePublicUrl = async (location) => {
+  const file = await q({
+    app: {
+      fs: {
+        node: {
+          __args: {
+            location
+          },
+          __typename: true,
+          __on: {
+            __typeName: "File",
+            publicUrl: true
+          }
+        }
+      }
+    }
+  }).then((res) => res.app.fs.node);
+  return file.publicUrl;
+};
+const onPreview = async (node) => {
   showPreviewImgDialog.value = true;
-  previewImg.value = row.url;
+  previewImg.value = await getFilePublicUrl(node.location);
 };
-const onPreviewPDF = async (row) => {
+const onPreviewPDF = async (node) => {
   const height = window.innerHeight - 200;
   $q.dialog({
     autoClose: true,
     fullWidth: true,
     fullHeight: true,
     title: "Preview PDF",
-    message: "<iframe src='" + row.url + "' width='100%' height='" + height + "px'></iframe>",
+    message: "<iframe src='" + await getFilePublicUrl(node.location) + "' width='100%' height='" + height + "px'></iframe>",
     html: true
   });
 };
@@ -421,54 +367,41 @@ const onClickInfo = async (row) => {
 const items = computed(() => {
   return [...folders.value, ...files.value];
 });
-const selectedNodePath = ref(null);
-const selectedDrive = computed(() => {
-  if (selectedNodePath.value) {
-    const [driveIndex, ...path2] = selectedNodePath.value.split("/");
-    return parseInt(driveIndex);
-  }
-  return null;
-});
-const selectedPath = computed(() => {
-  if (selectedNodePath.value) {
-    const [driveIndex, ...path2] = selectedNodePath.value.split("/");
-    return "/" + path2.join("/");
-  }
-  return "";
-});
-watch(selectedNodePath, async () => {
+const selectedLocation = ref(null);
+watch(selectedLocation, async () => {
   selected.value = [];
   await loadItems();
 });
 const canPreview = (file) => {
-  if (!file.mime) {
+  if (!file.mimeType) {
     return false;
   }
-  return file.mime.startsWith("image/");
+  return file.mimeType.startsWith("image/");
 };
 const onCheckTotalSize = async (folder) => {
   const d = $q.dialog({
     title: "Total Size",
     progress: true
   });
-  const resp = await q({
+  const node = await q({
     app: {
-      drive: {
-        __args: {
-          index: folder.driveIndex
-        },
-        folder: {
+      fs: {
+        node: {
           __args: {
-            path: folder.path
+            location: folder.location
           },
-          totalSize: true
+          __typename: true,
+          name: true,
+          __on: {
+            __typeName: "Folder",
+            totalSize: true
+          }
         }
       }
     }
-  });
-  const size = humanStorageSize(resp.app.drive.folder.totalSize);
+  }).then((res) => res.app.fs.node);
   d.update({
-    message: "Total size of folder '" + folder.name + "' is " + size,
+    message: "Total size of folder '" + node.name + "' is " + humanStorageSize(node.totalSize),
     progress: false
   });
 };
@@ -494,7 +427,7 @@ const onDuplicateFile = async (file) => {
 const onDrop = (event) => {
   event.preventDefault();
   event.stopPropagation();
-  if (selectedNodePath.value == null) {
+  if (selectedLocation.value == null) {
     $q.notify({
       type: "warning",
       message: "Please select a folder to upload files."
@@ -503,18 +436,19 @@ const onDrop = (event) => {
   }
   const files2 = event.dataTransfer.files;
   console.log("Dropped files:", files2);
-  uploadFiles.value = [];
-  for (let i = 0; i < files2.length; i++) {
-    uploadFiles.value.push(files2[i]);
+  if (files2.length > 0) {
+    const fileList = Array.from(files2);
+    showUploadFilesDialog(selectedLocation.value, fileList).onOk((uploadedFiles) => {
+      loadItems();
+    });
   }
-  showUploadFiles.value = true;
   dragzone.value.style.border = "none";
 };
 const dragzone = ref(null);
 const onDragover = (event) => {
   event.preventDefault();
   event.stopPropagation();
-  if (selectedNodePath.value == null) {
+  if (selectedLocation.value == null) {
     return;
   }
   dragzone.value.style.border = "2px dashed #1976d2";
@@ -522,21 +456,24 @@ const onDragover = (event) => {
 const onDragLeave = (event) => {
   event.preventDefault();
   event.stopPropagation();
-  if (selectedNodePath.value == null) {
+  if (selectedLocation.value == null) {
     return;
   }
   dragzone.value.style.border = "none";
 };
 const getFileIcon = (file) => {
-  if (file.mime.startsWith("image/")) {
+  if (!file.mimeType) {
+    return "sym_o_description";
+  }
+  if (file.mimeType.startsWith("image/")) {
     return "sym_o_image";
-  } else if (file.mime === "application/pdf") {
+  } else if (file.mimeType === "application/pdf") {
     return "sym_o_picture_as_pdf";
-  } else if (file.mime.startsWith("video/")) {
+  } else if (file.mimeType.startsWith("video/")) {
     return "sym_o_videocam";
-  } else if (file.mime.startsWith("audio/")) {
+  } else if (file.mimeType.startsWith("audio/")) {
     return "sym_o_audiotrack";
-  } else if (file.mime === "application/zip" || file.mime === "application/x-rar-compressed") {
+  } else if (file.mimeType === "application/zip" || file.mimeType === "application/x-rar-compressed") {
     return "sym_o_archive";
   } else {
     return "sym_o_description";
@@ -573,7 +510,7 @@ const getFileIcon = (file) => {
         <q-list padding class="text-grey-8">
           <q-item>
             <q-item-section>
-              <l-btn icon="add" label="New" :disable="!selectedNodePath">
+              <l-btn icon="add" label="New" :disable="!selectedLocation">
                 <q-menu>
                   <q-list>
                     <q-item clickable v-close-popup @click="onNewFolder" v-if="permission.includes('fs.folder.create')">
@@ -583,7 +520,7 @@ const getFileIcon = (file) => {
                       <q-item-section>{{ $t('Folder') }}</q-item-section>
                     </q-item>
                     <q-separator />
-                    <q-item clickable v-close-popup @click="showUploadFiles = true"
+                    <q-item clickable v-close-popup @click="openUploadDialog"
                       v-if="permission.includes('fs.file.upload')">
                       <q-item-section avatar>
                         <q-icon name="sym_o_upload_file"></q-icon>
@@ -596,8 +533,8 @@ const getFileIcon = (file) => {
             </q-item-section>
           </q-item>
 
-          <q-tree ref="folderTree" :nodes="nodes" node-key="id" label-key="name" @lazy-load="onLazyLoad"
-            v-model:selected="selectedNodePath" no-selection-unset>
+          <q-tree ref="folderTree" :nodes="nodes" node-key="location" label-key="name" @lazy-load="onLazyLoad"
+            v-model:selected="selectedLocation" no-selection-unset>
           </q-tree>
 
           <q-separator inset class="q-my-sm" />
@@ -608,7 +545,7 @@ const getFileIcon = (file) => {
     </q-drawer>
 
     <q-drawer v-model="rightDrawerOpen" side="right" show-if-above bordered>
-      <l-file-manager-preview :path="preview.path" v-if="preview" :key="preview.path" :drive-index="selectedDrive" />
+      <l-file-manager-preview :location="preview.location" v-if="preview" :key="preview.location" />
     </q-drawer>
 
     <q-page-container :style="{ height }">
@@ -622,33 +559,12 @@ const getFileIcon = (file) => {
           </q-card>
         </q-dialog>
 
-        <q-dialog v-model="showUploadFiles" persistent transition-show="scale" transition-hide="scale">
-          <q-card style="min-width: 400px;">
-            <q-toolbar>
-              <q-toolbar-title>{{ $t('Upload Files') }}</q-toolbar-title>
-              <q-space></q-space>
-              <q-btn flat round dense icon="sym_o_close" v-close-popup></q-btn>
-            </q-toolbar>
-            <q-card-section>
-              <q-file ref="file" v-model="uploadFiles" multiple name="file" label="Files" color="primary"></q-file>
-            </q-card-section>
-
-            <q-card-actions align="right">
-              <q-btn flat :label="$t('Cancel')" color="primary" v-close-popup></q-btn>
-              <q-btn flat :label="$t('Upload')" color="primary" @click="onUploadFiles"></q-btn>
-            </q-card-actions>
-          </q-card>
-        </q-dialog>
-
         <q-toolbar>
-          <q-breadcrumbs>
-            <q-breadcrumbs-el v-for="(b, index) in breadcrumbs" :label="b.label" :key="index"
-              @click="selectedNodePath = b.path" href="javascript:void(0)"></q-breadcrumbs-el>
-          </q-breadcrumbs>
+          <l-file-manager-breadcrumbs v-model="selectedLocation" />
           <q-space></q-space>
-
           <q-btn flat round icon="sym_o_drive_file_move" v-if="selected.length > 0">
-            <l-file-manager-move @selected="moveToFolder($event)" :drive-index="selectedDrive" />
+            <l-file-manager-move @selected="moveToFolder($event)" :current_location="selectedLocation"
+              :allow_cross_fs="selected.every(item => item.__typename == 'File')" />
             <q-tooltip>
               {{ $t('Move to') }}
             </q-tooltip>
@@ -668,7 +584,7 @@ const getFileIcon = (file) => {
 
         <template v-if="grid">
           <q-table :title="$t('Folders')" flat grid :columns="columns" :rows="folders" hide-pagination
-            :pagination="{ rowsPerPage: 0 }">
+            :pagination="{ rowsPerPage: 0 }" row-key="location">
             <template v-slot:item="props">
               <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4" @click="onDblclickRow(null, props.row, null)">
                 <q-card flat bordered>
@@ -689,14 +605,14 @@ const getFileIcon = (file) => {
           </q-table>
 
           <q-table :title="$t('Files')" flat grid :columns="columns" :rows="files" hide-pagination
-            :pagination="{ rowsPerPage: 0 }">
+            :pagination="{ rowsPerPage: 0 }" row-key="location">
 
             <template v-slot:item="props">
               <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4" @click="onClickRow(null, props.row, null)">
                 <q-card flat bordered>
                   <q-item>
                     <q-item-section avatar>
-                      <q-icon :name="getFileIcon(props.row)"  size="sm"></q-icon>
+                      <q-icon :name="getFileIcon(props.row)" size="sm"></q-icon>
                     </q-item-section>
                     <q-item-section>
                       <q-item-label lines="1">
@@ -718,12 +634,12 @@ const getFileIcon = (file) => {
         <template v-else>
 
           <q-table flat :columns="columns" :rows="items" @row-dblclick="onDblclickRow" @row-click="onClickRow"
-            :pagination="pagination" row-key="path" selection="multiple" v-model:selected="selected" dense
+            :pagination="pagination" row-key="location" selection="multiple" v-model:selected="selected" dense
             :loading="loading" :loading-label="$t('Loading...')" :no-data-label="$t('No data available')"
             separator="horizontal" :rows-per-page-options="[0]" color="primary">
             <template #body-cell-icon="props">
               <q-td auto-width>
-                <q-icon name="sym_o_folder" v-if="props.value == 'folder'" size="sm" />
+                <q-icon name="sym_o_folder" v-if="props.row.__typename == 'Folder'" size="sm" />
                 <q-icon :name="getFileIcon(props.row)" v-else size="sm" />
               </q-td>
             </template>
@@ -735,7 +651,7 @@ const getFileIcon = (file) => {
                     <q-list>
 
                       <q-item clickable v-close-popup="true" @click="onCheckTotalSize(props.row)"
-                        v-if="props.row.type == 'folder'">
+                        v-if="props.row.__typename == 'Folder'">
                         <q-item-section avatar>
                           <q-icon name="sym_o_info"></q-icon>
                         </q-item-section>
@@ -749,14 +665,15 @@ const getFileIcon = (file) => {
                         <q-item-section>{{ $t('Delete') }}</q-item-section>
                       </q-item>
 
-                      <q-item v-if="props.row.type == 'file'" clickable v-close-popup @click="onDownloadRow(props.row)">
+                      <q-item v-if="props.row.__typename == 'File'" clickable v-close-popup
+                        @click="onDownloadNode(props.row)">
                         <q-item-section avatar>
                           <q-icon name="sym_o_download"></q-icon>
                         </q-item-section>
                         <q-item-section>{{ $t('Download') }}</q-item-section>
                       </q-item>
 
-                      <q-item clickable v-close-popup @click="onRenameRow(props.row)" v-if="canRenameRow(props.row)">
+                      <q-item clickable v-close-popup @click="onRenameNode(props.row)" v-if="canRenameRow(props.row)">
                         <q-item-section avatar>
                           <q-icon name="sym_o_edit"></q-icon>
                         </q-item-section>
@@ -764,7 +681,7 @@ const getFileIcon = (file) => {
                       </q-item>
 
                       <q-item clickable v-close-popup @click="onDuplicateFile(props.row)"
-                        v-if="props.row.type == 'file'">
+                        v-if="props.row.__typename == 'File'">
                         <q-item-section avatar>
                           <q-icon name="sym_o_content_copy"></q-icon>
                         </q-item-section>
@@ -778,7 +695,7 @@ const getFileIcon = (file) => {
                         <q-item-section>{{ $t('Preview') }}</q-item-section>
                       </q-item>
 
-                      <q-item clickable v-close-popup v-if="props.row.mime == 'application/pdf'"
+                      <q-item clickable v-close-popup v-if="props.row.mimeType == 'application/pdf'"
                         @click="onPreviewPDF(props.row)">
                         <q-item-section avatar>
                           <q-icon name="sym_o_preview"></q-icon>