@hostlink/nuxt-light 1.20.6 → 1.21.0

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

@@ -1,16 +1,61 @@
 <script setup>
 import { useI18n } from "vue-i18n";
-import { ref, watch, computed } from 'vue';
+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 quasar = useQuasar();
-const $q = quasar;
+const $q = useQuasar();
+
 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: {
@@ -99,25 +144,15 @@ function changeDate(option) {
 function toggleLeftDrawer() {
   leftDrawerOpen.value = !leftDrawerOpen.value;
 }
+const loadItems = async () => {
+  let path = selectedPath.value;
 
-const path = ref(props.base);
-
-const onLazyLoad = async ({ node, key, done, fail }) => {
-  const data = await api.fs.folders.list(node.path);
-  data.map((item) => {
-    item.lazy = true;
-    return item;
-  });
-  done(data);
-}
-
-const items = ref([]);
+  files.value = [];
+  folders.value = [];
 
-const loadItems = async () => {
   loading.value = true;
-  items.value = [];
 
-  let filesParams = { path: path.value };
+  let filesParams = { path };
 
   if (label.value) {
     filesParams.type = label.value;
@@ -127,42 +162,56 @@ const loadItems = async () => {
     filesParams.search = localSearch.value;
   }
 
-  let files = await q("fsListFiles", filesParams, ["name", "size", "mime", "path", "canPreview", "imagePath", "lastModified", "lastModifiedHuman"]);
-  files = files.map((item) => {
+  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;
   });
-
-  let folders = [];
+  /*   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 = await api.fs.folders.list(path.value);
-    folders = folders.map((item) => {
+    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;
     });
   }
-  items.value = folders.concat(files);
 
   loading.value = false;
 
-  return {
-    files,
-    folders,
-  }
-}
 
-watch(path, async (val) => {
-  selected.value = [];
-  const items = await loadItems();
-  reloadTreeFolder(path.value, items.folders);
 
-});
+  reloadTreeFolder(selectedNodePath.value, folders.value);
+}
 
-const label = ref(null);
 
-const initItems = await loadItems();
-const folders = ref(initItems.folders);
+const label = ref(null);
 
 watch(label, () => {
   loadItems();
@@ -171,18 +220,25 @@ watch(label, () => {
 const selected = ref([]);
 
 const breadcrumbs = computed(() => {
-  let breadcrumbs = [
-    {
-      label: i18n.t("Storage"),
-      path: props.base,
-    },
-  ];
-
-  if (path.value.toString() == "") {
-    return breadcrumbs;
+  if (selectedPath.value.toString() == "") {
+    return [];
   }
 
-  let paths = path.value.split(props.base);
+  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) {
@@ -190,11 +246,12 @@ const breadcrumbs = computed(() => {
       ps.push(p);
       breadcrumbs.push({
         label: p,
-        path: ps.join("/"),
+        path: driveIndex + "/" + ps.join("/"),
       });
     }
   }
 
+
   return breadcrumbs;
 });
 
@@ -211,7 +268,7 @@ const grid = ref(false);
 
 const onDblclickRow = (evt, row, index) => {
   if (row.type == "folder") {
-    path.value = row.path;
+    selectedNodePath.value = row.driveIndex + "/" + row.path;
     return;
   }
   if (row.type == "file") {
@@ -234,79 +291,76 @@ const findFolder = (path, folders) => {
 }
 
 const reloadTreeFolder = (path, newFolders) => {
-
   let node = folderTree.value.getNodeByKey(path);
   if (node) {
     node.lazy = false;
     node.children = newFolders;
     folderTree.value.setExpanded(path, true);
-  } else {
-
-    folders.value = newFolders;
   }
 
 }
 
 const onDeleteSelected = () => {
-  quasar.dialog({
+  $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 api.fs.folders.delete(row.path)
+        await drive.value.folders.delete(row.path)
       } else {
-        await api.fs.files.delete(row.path)
+        await drive.value.files.delete(row.path)
       }
     }
     selected.value = [];
-    const items = await loadItems();
-    reloadTreeFolder(path.value, items.folders);
+    await loadItems();
+
   });
 
 }
 
 const onNewFolder = () => {
-  quasar.dialog({
+  $q.dialog({
     title: "New Folder",
     prompt: {
+      model: "",
       label: "Name",
+      isValid: (val) => {
+        return val.length > 0;
+      }
     },
     cancel: true,
   }).onOk(async (name) => {
-    await api.fs.folders.create(path.value + "/" + name);
-    const items = await loadItems();
-    reloadTreeFolder(path.value, items.folders);
+    await drive.value.folders.create(selectedPath.value + "/" + name);
+    await loadItems();
   });
 }
 
 const onDeleteRow = (row) => {
   if (row.type == "file") {
-    quasar.dialog({
+    $q.dialog({
       title: "Delete",
       message: "Are you sure you want to delete this file?",
       cancel: true,
     }).onOk(async () => {
-      await api.fs.files.delete(row.path);
-      const items = await loadItems();
-      reloadTreeFolder(path.value, items.folders);
+      await drive.value.files.delete(row.path);
+      await loadItems();
     });
   } else if (row.type == "folder") {
-    quasar.dialog({
+    $q.dialog({
       title: "Delete",
       message: "Are you sure you want to delete this folder?",
       cancel: true,
     }).onOk(async () => {
-      await api.fs.folders.delete(row.path);
-      const items = await loadItems();
-      reloadTreeFolder(path.value, items.folders);
+      await drive.value.folders.delete(row.path);
+      await loadItems();
     });
   }
 }
 
 const onRenameRow = (row) => {
-  quasar.dialog({
+  $q.dialog({
     title: "Rename " + row.type,
     prompt: {
       label: "Name",
@@ -316,12 +370,12 @@ const onRenameRow = (row) => {
   }).onOk(async (name) => {
     try {
       if (row.type == "file") {
-        await api.fs.files.rename(row.path, name)
+        await drive.value.files.rename(row.path, name)
       } else {
-        await api.fs.folders.rename(row.path, name)
+        await drive.value.folders.rename(row.path, name)
       }
     } catch (e) {
-      quasar.dialog({
+      $q.dialog({
         title: "Error",
         message: e.message,
       });
@@ -329,26 +383,23 @@ const onRenameRow = (row) => {
       return;
     }
 
-    const items = await loadItems();
-    reloadTreeFolder(path.value, items.folders);
+    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("fsUploadFile", {
-        path: path.value,
+      await m("lightDriveUploadFile", {
+        index: selectedDrive.value,
+        path: selectedPath.value,
         file
       });
     }
@@ -366,22 +417,32 @@ const onUploadFiles = async () => {
 
   showUploadFiles.value = false;
 
-  const items = await loadItems();
-  reloadTreeFolder(path.value, items.folders);
+  await loadItems();
 
 }
 
 const preview = ref(null);
 
+
+const drive = computed(() => {
+  return api.drive(selectedDrive.value);
+})
+
+
 const moveToFolder = async (folder) => {
 
   for (let row of selected.value) {
-    m("fsMove", { path: row.path, target: folder })
+
+    if (row.type == "folder") {
+      await drive.value.folders.move(row.path, folder);
+    } else {
+      await drive.value.files.move(row.path, folder);
+    }
+
 
   }
 
-  const items = await loadItems();
-  reloadTreeFolder(path.value, items.folders);
+  await loadItems();
 }
 
 const submitSearch = (e) => {
@@ -389,27 +450,28 @@ const submitSearch = (e) => {
   loadItems();
 }
 
-/** for grid view */
-const foldersGrid = computed(() => {
-  return items.value.filter((item) => {
-    return item.type == "folder";
-  });
-});
-
-const filesGrid = computed(() => {
-  return items.value.filter((item) => {
-    return item.type == "file";
-  });
-});
-
 const onDownloadRow = async (row) => {
 
-  const resp = await q("fsFile", {
-    path: row.path
-  }, ["base64Content"]);
+  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,${resp.base64Content}`;
+  downloadLink.href = `data:application/octet-stream;base64,${base64Content}`;
   downloadLink.download = row.name;
   downloadLink.click();
 
@@ -424,8 +486,8 @@ const reloadStorage = async () => {
   search.value = "";
   localSearch.value = "";
   label.value = null;
-  const items = await loadItems();
-  reloadTreeFolder(path.value, items.folders);
+  await loadItems();
+
 }
 
 const permission = await api.auth.granted([
@@ -467,17 +529,17 @@ const isDark = computed(() => light.isDarkMode());
 
 const onPreview = (row) => {
   showPreviewImgDialog.value = true;
-  previewImg.value = row.imagePath;
+  previewImg.value = row.url;
 }
 
 const onPreviewPDF = async (row) => {
   const height = window.innerHeight - 200;
-  quasar.dialog({
+  $q.dialog({
     autoClose: true,
     fullWidth: true,
     fullHeight: true,
     title: "Preview PDF",
-    message: "<iframe src='" + row.imagePath + "' width='100%' height='" + height + "px'></iframe>",
+    message: "<iframe src='" + row.url + "' width='100%' height='" + height + "px'></iframe>",
     html: true,
 
   })
@@ -488,8 +550,84 @@ const onClickInfo = async (row) => {
 
 }
 
+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>
+
   <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>
@@ -518,7 +656,7 @@ const onClickInfo = async (row) => {
         <q-list padding class="text-grey-8">
           <q-item>
             <q-item-section>
-              <q-btn icon="add" outline rounded :color="light.color" :label="$t('New')">
+              <q-btn icon="add" outline rounded :color="light.color" :label="$t('New')" :disable="!selectedNodePath">
                 <q-menu>
                   <q-list>
                     <q-item clickable v-close-popup @click="onNewFolder" v-if="permission.includes('fs.folder.create')">
@@ -541,26 +679,10 @@ const onClickInfo = async (row) => {
             </q-item-section>
           </q-item>
 
-          <q-list dense>
-            <q-item>
-              <q-item-section avatar>
-                <q-icon name="sym_o_storage" />
-              </q-item-section>
-              <q-item-section>{{ $t('Storage') }}</q-item-section>
-              <q-item-section avatar>
-                <q-btn dense round flat icon="sym_o_refresh" @click="reloadStorage"></q-btn>
-              </q-item-section>
-            </q-item>
-            <q-tree ref="folderTree" class="q-pl-md" :nodes="folders" node-key="path" label-key="name"
-              @lazy-load="onLazyLoad" v-model:selected="path" no-selection-unset>
-            </q-tree>
-          </q-list>
-          <!-- q-expansion-item :label="$t('Storage')" default-expand-all default-opened icon="sym_o_storage" selectable
-            @click="path = '/'">
-            <q-tree ref="folderTree" class="q-pl-md" :nodes="folders" node-key="path" label-key="name"
-              @lazy-load="onLazyLoad" v-model:selected="path" no-selection-unset>
-            </q-tree>
-          </q-expansion-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>
 
           <q-separator inset class="q-my-sm" />
 
@@ -570,7 +692,7 @@ const onClickInfo = async (row) => {
     </q-drawer>
 
     <q-drawer v-model="rightDrawerOpen" side="right" show-if-above bordered>
-      <l-file-manager-preview v-model="preview" v-if="preview" :key="preview.path" />
+      <l-file-manager-preview :path="preview.path" v-if="preview" :key="preview.path" :drive-index="selectedDrive" />
     </q-drawer>
 
     <q-page-container :style="{ height }">
@@ -598,14 +720,14 @@ const onClickInfo = async (row) => {
 
       <q-toolbar>
         <q-breadcrumbs :active-color="$light.color">
-          <q-breadcrumbs-el v-for="(b, index) in breadcrumbs" :label="b.label" :key="index" @click="path = b.path"
-            href="javascript:void(0)"></q-breadcrumbs-el>
+          <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>
         <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)" />
+          <l-file-manager-move @selected="moveToFolder($event)" :drive-index="selectedDrive" />
           <q-tooltip>
             {{ $t('Move to') }}
           </q-tooltip>
@@ -624,7 +746,7 @@ const onClickInfo = async (row) => {
       </q-toolbar>
 
       <template v-if="grid">
-        <q-table :title="$t('Folders')" flat grid :columns="columns" :rows="foldersGrid" hide-pagination
+        <q-table :title="$t('Folders')" flat grid :columns="columns" :rows="folders" hide-pagination
           :pagination="{ rowsPerPage: 0 }">
           <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)">
@@ -645,7 +767,7 @@ const onClickInfo = async (row) => {
           </template>
         </q-table>
 
-        <q-table :title="$t('Files')" flat grid :columns="columns" :rows="filesGrid" hide-pagination
+        <q-table :title="$t('Files')" flat grid :columns="columns" :rows="files" hide-pagination
           :pagination="{ rowsPerPage: 0 }">
 
           <template v-slot:item="props">
@@ -655,15 +777,17 @@ const onClickInfo = async (row) => {
                   <q-item-section avatar>
                     <q-icon name="sym_o_description" size="sm"></q-icon>
                   </q-item-section>
-                  <q-item-section no-wrap>
-                    {{ props.row.name }}
+                  <q-item-section>
+                    <q-item-label lines="1">
+                      {{ props.row.name }}
+                    </q-item-label>
                   </q-item-section>
-                  <q-item-section avatar>
+                  <q-item-section side>
                     <q-checkbox v-model="selected" :val="props.row" :color="$light.color" />
                   </q-item-section>
                 </q-item>
 
-                <q-img v-if="props.row.canPreview" :src="props.row.imagePath"></q-img>
+                <q-img v-if="canPreview(props.row)" :src="props.row.url"></q-img>
 
               </q-card>
             </div>
@@ -687,6 +811,15 @@ const onClickInfo = async (row) => {
               <q-btn flat icon="sym_o_more_vert" round dense>
                 <q-menu>
                   <q-list>
+
+                    <q-item clickable v-close-popup="true" @click="onCheckTotalSize(props.row)"
+                      v-if="props.row.type == 'folder'">
+                      <q-item-section avatar>
+                        <q-icon name="sym_o_info"></q-icon>
+                      </q-item-section>
+                      <q-item-section>{{ $t('Total size') }}</q-item-section>
+                    </q-item>
+
                     <q-item clickable v-close-popup @click="onDeleteRow(props.row)" v-if="canDeleteRow(props.row)">
                       <q-item-section avatar>
                         <q-icon name="sym_o_delete"></q-icon>
@@ -730,6 +863,8 @@ const onClickInfo = async (row) => {
                       <q-item-section>{{ $t('Info') }}</q-item-section>
                     </q-item>
 
+
+
                   </q-list>
                 </q-menu>
               </q-btn>