@hostlink/nuxt-light 1.27.7 → 1.28.0

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

@@ -1,642 +1,500 @@
-<script setup>
-import { useI18n } from "vue-i18n";
-import { ref, watch, computed, onMounted } from 'vue';
-import { useQuasar, format } from 'quasar';
-import { q, m, useLight, api } from '#imports';
-const { humanStorageSize } = format
-
-const light = useLight();
-const i18n = useI18n();
-const $q = useQuasar();
-const $light = useLight();
-
-const emit = defineEmits(["input", "close"]);
-
-const { app: { drives } } = await q({
-  app: {
-    drives: {
-      index: true,
-      name: true,
-    }
-  }
-});
-
-const folders = ref([]);
-const files = ref([]);
-
-
-const nodes = drives.map((drive) => {
-  return {
-    icon: "sym_o_storage",
-    name: drive.name,
-    id: drive.index.toString(),
-    path: "/",
-    lazy: true,
-    driveIndex: drive.index,
-    type: "drive",
-  }
-});
-
-
-const onLazyLoad = async ({ node, key, done, fail }) => {
-
-  const folders = await api.drive(node.driveIndex).folders.list(node.path, {
-    name: true,
-    path: true
-  });
-
-  const data = folders.map((item) => {
-    item.driveIndex = node.driveIndex;
-    item.id = node.driveIndex + "/" + item.path;
-    item.lazy = true;
-    item.type = "folder";
-    return item;
-  });
-  done(data);
-};
-
-
-
-const props = defineProps({
-  closeable: Boolean,
-  height: {
-    type: String,
-    default: "700px",
-  },
-  defaultAction: {
-    default: "preview",
-    type: String,
-  },
-  multiple: {
-    default: false,
-    type: Boolean,
-  },
-  base: {
-    default: "/",
-    type: String,
-  },
-});
-
-const loading = ref(false);
-const folderTree = ref(null);
-
-const pagination = {
-  rowsPerPage: 0,
-  "rows-per-page-options": [0],
-};
-
-const columns = ref([
-  {
-    name: "icon",
-    label: "",
-    field: "type",
-  },
-  {
-    name: "name",
-    label: i18n.t("Name"),
-    field: "name",
-    sortable: true,
-    align: "left",
-  },
-  {
-    name: "last_modified",
-    label: i18n.t("Last Modified"),
-    field: "lastModifiedHuman",
-    align: "left",
-  },
-  {
-    name: "size_display",
-    label: i18n.t("Size"),
-    field: "size",
-    align: "right",
-    format: (val) => {
-      if (val == null) {
-        return "";
-      }
-      return humanStorageSize(val)
-    }
-  },
-  { name: "action" },
-]);
-
-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 path = selectedPath.value;
-
-  files.value = [];
-  folders.value = [];
-
-  loading.value = true;
-
-  let filesParams = { path };
-
-  if (label.value) {
-    filesParams.type = label.value;
-  }
-
-  if (localSearch.value) {
-    filesParams.search = localSearch.value;
-  }
-
-  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;
-  });
-  /*   files.value = (await drive.value.files.list(path)).map((item) => {
-      item.driveIndex = selectedDrive.value;
-      item.type = "file";
-      return item;
-    });
-   */
-  if (!label.value && !localSearch.value) {
-    folders.value = (await drive.value.folders.list(path)).map((item) => {
-      item.driveIndex = selectedDrive.value;
-      item.type = "folder";
-      item.lazy = true;
-      item.id = selectedDrive.value + "/" + item.path;
-      return item;
-    });
-    reloadTreeFolder(selectedNodePath.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("/");
-
-  //the first element is the drive index
-  let driveIndex = paths.shift();
-
-  //find the drive name
-  let driveName = drives.find((d) => d.index == driveIndex).name;
-
-
-  let breadcrumbs = [{
-    label: driveName,
-    path: driveIndex,
-  }]
-
-
-
-  let ps = [];
-  for (let p of paths) {
-    if (p) {
-      ps.push(p);
-      breadcrumbs.push({
-        label: p,
-        path: driveIndex + "/" + ps.join("/"),
-      });
-    }
-  }
-
-
-  return breadcrumbs;
-});
-
-const onClickRow = (evt, row, index) => {
-  if (row.type == "folder") {
-    preview.value = null;
-    return;
-  }
-
-  preview.value = row;
-}
-
-const grid = ref(false);
-
-const onDblclickRow = (evt, row, index) => {
-  if (row.type == "folder") {
-    selectedNodePath.value = row.driveIndex + "/" + row.path;
-    return;
-  }
-  if (row.type == "file") {
-    emit("input", row.path);
-  }
-}
-
-
-const findFolder = (path, folders) => {
-  folders.value.forEach((item) => {
-    if (item.path == path) {
-      return item;
-    }
-    //find in children
-    let found = findFolder(path, item.children);
-    if (found) {
-      return found;
-    }
-  });
-}
-
-const reloadTreeFolder = (path, newFolders) => {
-  let node = folderTree.value.getNodeByKey(path);
-  
-  if (node) {
-    node.lazy = false;
-    node.children = newFolders;
-    folderTree.value.setExpanded(path, true);
-  }
-
-}
-
-const onDeleteSelected = () => {
-  $q.dialog({
-    title: "Delete",
-    message: "Are you sure you want to delete this files or folders?",
-    cancel: true,
-  }).onOk(async () => {
-    for (let row of selected.value) {
-      if (row.type == "folder") {
-        await drive.value.folders.delete(row.path)
-      } else {
-        await drive.value.files.delete(row.path)
-      }
-    }
-    selected.value = [];
-    await loadItems();
-
-  });
-
-}
-
-
-
-const onNewFolder = () => {
-  $q.dialog({
-    color: $light.color,
-    title: "New Folder",
-    prompt: {
-      
-      model: "",
-      label: "Name",
-      isValid: (val) => {
-        return val.length > 0;
-      }
-    },
-    cancel: true,
-  }).onOk(async (name) => {
-    await drive.value.folders.create(selectedPath.value + "/" + name);
-    await loadItems();
-  });
-}
-
-const onDeleteRow = (row) => {
-  if (row.type == "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);
-      await loadItems();
-    });
-  } else if (row.type == "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);
-      await loadItems();
-    });
-  }
-}
-
-const onRenameRow = (row) => {
-  $q.dialog({
-    title: "Rename " + row.type,
-    prompt: {
-      label: "Name",
-      model: row.name,
-    },
-    cancel: true,
-  }).onOk(async (name) => {
-    try {
-      if (row.type == "file") {
-        await drive.value.files.rename(row.path, name)
-      } else {
-        await drive.value.folders.rename(row.path, name)
-      }
-    } catch (e) {
-      $q.dialog({
-        title: "Error",
-        message: e.message,
-      });
-
-      return;
-    }
-
-    await loadItems();
-
-  });
-}
-const uploadFiles = ref([]);
-const showUploadFiles = ref(false);
-
-const onUploadFiles = async () => {
-  $q.loading.show({
-    message: "Uploading files...",
-  });
-
-  try {
-    for (let file of uploadFiles.value) {
-      await m("lightDriveUploadFile", {
-        index: selectedDrive.value,
-        path: selectedPath.value,
-        file
-      });
-    }
-  } 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();
-}
-
-const submitSearch = (e) => {
-  localSearch.value = search.value;
-  loadItems();
-}
-
-const onDownloadRow = async (row) => {
-
-  const app = await q({
-    app: {
-      drive: {
-        __args: {
-          index: row.driveIndex,
-        },
-        file: {
-          __args: {
-            path: row.path,
-          },
-          base64Content: true,
-        }
-      }
-    }
-  })
-  console.log(app);
-  const base64Content = app.app.drive.file.base64Content;
-
-  const downloadLink = document.createElement("a");
-  downloadLink.href = `data:application/octet-stream;base64,${base64Content}`;
-  downloadLink.download = row.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 api.auth.granted([
-  'fs.folder.create', 'fs.folder.delete', 'fs.folder.rename',
-  'fs.file.delete', 'fs.file.rename', 'fs.file.upload'
-]);
-
-const canDeleteRow = (row) => {
-  if (row.type == "folder" && permission.includes("fs.folder.delete")) {
-    return true;
-  }
-
-  if (row.type == "file" && permission.includes("fs.file.delete")) {
-    return true;
-  }
-
-  return false;
-}
-
-const canRenameRow = (row) => {
-  if (row.type == "folder" && permission.includes("fs.folder.rename")) {
-    return true;
-  }
-
-  if (row.type == "file" && permission.includes("fs.file.rename")) {
-    return true;
-  }
-
-  return false;
-}
-
-/* const perm = await q("granted", {
-  rights: ["fs.folder.create"]
-}) */
-
-const showPreviewImgDialog = ref(false);
-const previewImg = ref(null);
-const isDark = computed(() => light.isDarkMode());
-
-const onPreview = (row) => {
-  showPreviewImgDialog.value = true;
-  previewImg.value = row.url;
-}
-
-const onPreviewPDF = async (row) => {
-  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>",
-    html: true,
-
-  })
-}
-
-const onClickInfo = async (row) => {
-  rightDrawerOpen.value = true;
-
-}
-
-const items = computed(() => {
-  return [...folders.value, ...files.value];
-})
-
-
-
-
-const selectedNodePath = ref(null)
-const selectedDrive = computed(() => {
-  if (selectedNodePath.value) {
-    //split the path into drive index and folder path
-    //examle 0/folder1/folder2
-    const [driveIndex, ...path] = selectedNodePath.value.split("/");
-    return parseInt(driveIndex);
-  }
-  return null;
-})
-
-const selectedPath = computed(() => {
-  if (selectedNodePath.value) {
-    //split the path into drive index and folder path
-    //examle 0/folder1/folder2
-    const [driveIndex, ...path] = selectedNodePath.value.split("/");
-    return "/" + path.join("/");
-  }
-  return "";
-})
-
-watch(selectedNodePath, async () => {
-  selected.value = [];
-  await loadItems()
-});
-
-const canPreview = (file) => {
-  //check file mime type
-  const mime = ['image/jpeg', 'image/png', 'image/gif'];
-  return mime.includes(file.mime);
-};
-
-
-const onCheckTotalSize = async (folder) => {
-
-  const d = $q.dialog({
-    title: "Total Size",
-    progress: true,
-
-  });
-
-  const resp = await q({
-    app: {
-      drive: {
-        __args: {
-          index: folder.driveIndex,
-        },
-        folder: {
-          __args: {
-            path: folder.path,
-          },
-          totalSize: true,
-        }
-      }
-
-    }
-  });
-
-  d.update({
-    message: humanStorageSize(resp.app.drive.folder.totalSize),
-    progress: false,
-  });
-
-
-}
-
-
-selectedNodePath.value = drives[0].index.toString();
-</script>
-<template>
-
+<script setup>
+import { useI18n } from "vue-i18n";
+import { ref, watch, computed, onMounted } from "vue";
+import { useQuasar, format } from "quasar";
+import { q, m, useLight, api } from "#imports";
+const { humanStorageSize } = format;
+const light = useLight();
+const i18n = useI18n();
+const $q = useQuasar();
+const $light = useLight();
+const emit = defineEmits(["input", "close"]);
+const { app: { drives } } = await q({
+  app: {
+    drives: {
+      index: true,
+      name: true
+    }
+  }
+});
+const folders = ref([]);
+const files = ref([]);
+const nodes = drives.map((drive2) => {
+  return {
+    icon: "sym_o_storage",
+    name: drive2.name,
+    id: drive2.index.toString(),
+    path: "/",
+    lazy: true,
+    driveIndex: drive2.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;
+    item.lazy = true;
+    item.type = "folder";
+    return item;
+  });
+  done(data);
+};
+const props = defineProps({
+  closeable: Boolean,
+  height: {
+    type: String,
+    default: "700px"
+  },
+  defaultAction: {
+    default: "preview",
+    type: String
+  },
+  multiple: {
+    default: false,
+    type: Boolean
+  },
+  base: {
+    default: "/",
+    type: String
+  }
+});
+const loading = ref(false);
+const folderTree = ref(null);
+const pagination = {
+  rowsPerPage: 0,
+  "rows-per-page-options": [0]
+};
+const columns = ref([
+  {
+    name: "icon",
+    label: "",
+    field: "type"
+  },
+  {
+    name: "name",
+    label: i18n.t("Name"),
+    field: "name",
+    sortable: true,
+    align: "left"
+  },
+  {
+    name: "last_modified",
+    label: i18n.t("Last Modified"),
+    field: "lastModifiedHuman",
+    align: "left"
+  },
+  {
+    name: "size_display",
+    label: i18n.t("Size"),
+    field: "size",
+    align: "right",
+    format: (val) => {
+      if (val == null) {
+        return "";
+      }
+      return humanStorageSize(val);
+    }
+  },
+  { name: "action" }
+]);
+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;
+  files.value = [];
+  folders.value = [];
+  loading.value = true;
+  let filesParams = { path: path2 };
+  if (label.value) {
+    filesParams.type = label.value;
+  }
+  if (localSearch.value) {
+    filesParams.search = localSearch.value;
+  }
+  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;
+  });
+  if (!label.value && !localSearch.value) {
+    folders.value = (await drive.value.folders.list(path2)).map((item) => {
+      item.driveIndex = selectedDrive.value;
+      item.type = "folder";
+      item.lazy = true;
+      item.id = selectedDrive.value + "/" + item.path;
+      return item;
+    });
+    reloadTreeFolder(selectedNodePath.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") {
+    preview.value = null;
+    return;
+  }
+  preview.value = row;
+};
+const grid = ref(false);
+const onDblclickRow = (evt, row, index) => {
+  if (row.type == "folder") {
+    selectedNodePath.value = row.driveIndex + "/" + row.path;
+    return;
+  }
+  if (row.type == "file") {
+    emit("input", row.path);
+  }
+};
+const findFolder = (path2, folders2) => {
+  folders2.value.forEach((item) => {
+    if (item.path == path2) {
+      return item;
+    }
+    let found = findFolder(path2, item.children);
+    if (found) {
+      return found;
+    }
+  });
+};
+const reloadTreeFolder = (path2, newFolders) => {
+  let node = folderTree.value.getNodeByKey(path2);
+  if (node) {
+    node.lazy = false;
+    node.children = newFolders;
+    folderTree.value.setExpanded(path2, true);
+  }
+};
+const onDeleteSelected = () => {
+  $q.dialog({
+    title: "Delete",
+    message: "Are you sure you want to delete this files or folders?",
+    cancel: true
+  }).onOk(async () => {
+    for (let row of selected.value) {
+      if (row.type == "folder") {
+        await drive.value.folders.delete(row.path);
+      } else {
+        await drive.value.files.delete(row.path);
+      }
+    }
+    selected.value = [];
+    await loadItems();
+  });
+};
+const onNewFolder = () => {
+  $q.dialog({
+    color: $light.color,
+    title: "New Folder",
+    prompt: {
+      model: "",
+      label: "Name",
+      isValid: (val) => {
+        return val.length > 0;
+      }
+    },
+    cancel: true
+  }).onOk(async (name) => {
+    await drive.value.folders.create(selectedPath.value + "/" + name);
+    await loadItems();
+  });
+};
+const onDeleteRow = (row) => {
+  if (row.type == "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);
+      await loadItems();
+    });
+  } else if (row.type == "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);
+      await loadItems();
+    });
+  }
+};
+const onRenameRow = (row) => {
+  $q.dialog({
+    title: "Rename " + row.type,
+    prompt: {
+      label: "Name",
+      model: row.name
+    },
+    cancel: true
+  }).onOk(async (name) => {
+    try {
+      if (row.type == "file") {
+        await drive.value.files.rename(row.path, name);
+      } else {
+        await drive.value.folders.rename(row.path, name);
+      }
+    } catch (e) {
+      $q.dialog({
+        title: "Error",
+        message: e.message
+      });
+      return;
+    }
+    await loadItems();
+  });
+};
+const uploadFiles = ref([]);
+const showUploadFiles = ref(false);
+const onUploadFiles = async () => {
+  $q.loading.show({
+    message: "Uploading files..."
+  });
+  try {
+    for (let file of uploadFiles.value) {
+      await m("lightDriveUploadFile", {
+        index: selectedDrive.value,
+        path: selectedPath.value,
+        file
+      });
+    }
+  } 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();
+};
+const submitSearch = (e) => {
+  localSearch.value = search.value;
+  loadItems();
+};
+const onDownloadRow = async (row) => {
+  const app = await q({
+    app: {
+      drive: {
+        __args: {
+          index: row.driveIndex
+        },
+        file: {
+          __args: {
+            path: row.path
+          },
+          base64Content: true
+        }
+      }
+    }
+  });
+  console.log(app);
+  const base64Content = app.app.drive.file.base64Content;
+  const downloadLink = document.createElement("a");
+  downloadLink.href = `data:application/octet-stream;base64,${base64Content}`;
+  downloadLink.download = row.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 api.auth.granted([
+  "fs.folder.create",
+  "fs.folder.delete",
+  "fs.folder.rename",
+  "fs.file.delete",
+  "fs.file.rename",
+  "fs.file.upload"
+]);
+const canDeleteRow = (row) => {
+  if (row.type == "folder" && permission.includes("fs.folder.delete")) {
+    return true;
+  }
+  if (row.type == "file" && permission.includes("fs.file.delete")) {
+    return true;
+  }
+  return false;
+};
+const canRenameRow = (row) => {
+  if (row.type == "folder" && permission.includes("fs.folder.rename")) {
+    return true;
+  }
+  if (row.type == "file" && permission.includes("fs.file.rename")) {
+    return true;
+  }
+  return false;
+};
+const showPreviewImgDialog = ref(false);
+const previewImg = ref(null);
+const isDark = computed(() => light.isDarkMode());
+const onPreview = (row) => {
+  showPreviewImgDialog.value = true;
+  previewImg.value = row.url;
+};
+const onPreviewPDF = async (row) => {
+  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>",
+    html: true
+  });
+};
+const onClickInfo = async (row) => {
+  rightDrawerOpen.value = true;
+};
+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 () => {
+  selected.value = [];
+  await loadItems();
+});
+const canPreview = (file) => {
+  const mime = ["image/jpeg", "image/png", "image/gif"];
+  return mime.includes(file.mime);
+};
+const onCheckTotalSize = async (folder) => {
+  const d = $q.dialog({
+    title: "Total Size",
+    progress: true
+  });
+  const resp = await q({
+    app: {
+      drive: {
+        __args: {
+          index: folder.driveIndex
+        },
+        folder: {
+          __args: {
+            path: folder.path
+          },
+          totalSize: true
+        }
+      }
+    }
+  });
+  d.update({
+    message: humanStorageSize(resp.app.drive.folder.totalSize),
+    progress: false
+  });
+};
+selectedNodePath.value = drives[0].index.toString();
+</script>
+
+<template>
   <q-layout view="hHh lpR fFf" :class="isDark ? '' : 'bg-white'" container :style="{ 'min-height': height }">
     <q-header bordered :class="isDark ? '' : 'bg-white text-grey-8'" height-hint="64">
       <q-toolbar>
@@ -884,4 +742,4 @@ selectedNodePath.value = drives[0].index.toString();
       </template>
     </q-page-container>
   </q-layout>
-</template>
+</template>