@hostlink/nuxt-light 1.21.2 → 1.21.4

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

@@ -1,750 +0,0 @@
-<script setup>
-import { useI18n } from "vue-i18n";
-import { ref, watch, computed } 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 emit = defineEmits(["input", "close"]);
-
-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 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([]);
-
-const loadItems = async () => {
-  loading.value = true;
-  items.value = [];
-
-  let filesParams = { path: path.value };
-
-  if (label.value) {
-    filesParams.type = label.value;
-  }
-
-  if (localSearch.value) {
-    filesParams.search = localSearch.value;
-  }
-
-  let files = await q("fsListFiles", filesParams, ["name", "size", "mime", "path", "canPreview", "imagePath", "lastModified", "lastModifiedHuman"]);
-  files = files.map((item) => {
-    item.type = "file";
-    return item;
-  });
-
-  let folders = [];
-  if (!label.value && !localSearch.value) {
-    folders = await api.fs.folders.list(path.value);
-    folders = folders.map((item) => {
-      item.type = "folder";
-      item.lazy = true;
-      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);
-
-});
-
-const label = ref(null);
-
-const initItems = await loadItems();
-const folders = ref(initItems.folders);
-
-watch(label, () => {
-  loadItems();
-})
-
-const selected = ref([]);
-
-const breadcrumbs = computed(() => {
-  let breadcrumbs = [
-    {
-      label: i18n.t("Storage"),
-      path: props.base,
-    },
-  ];
-
-  if (path.value.toString() == "") {
-    return breadcrumbs;
-  }
-
-  let paths = path.value.split(props.base);
-
-  let ps = [];
-  for (let p of paths) {
-    if (p) {
-      ps.push(p);
-      breadcrumbs.push({
-        label: p,
-        path: 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") {
-    path.value = 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);
-  } else {
-
-    folders.value = newFolders;
-  }
-
-}
-
-const onDeleteSelected = () => {
-  quasar.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)
-      } else {
-        await api.fs.files.delete(row.path)
-      }
-    }
-    selected.value = [];
-    const items = await loadItems();
-    reloadTreeFolder(path.value, items.folders);
-  });
-
-}
-
-const onNewFolder = () => {
-  quasar.dialog({
-    title: "New Folder",
-    prompt: {
-      label: "Name",
-    },
-    cancel: true,
-  }).onOk(async (name) => {
-    await api.fs.folders.create(path.value + "/" + name);
-    const items = await loadItems();
-    reloadTreeFolder(path.value, items.folders);
-  });
-}
-
-const onDeleteRow = (row) => {
-  if (row.type == "file") {
-    quasar.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);
-    });
-  } else if (row.type == "folder") {
-    quasar.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);
-    });
-  }
-}
-
-const onRenameRow = (row) => {
-  quasar.dialog({
-    title: "Rename " + row.type,
-    prompt: {
-      label: "Name",
-      model: row.name,
-    },
-    cancel: true,
-  }).onOk(async (name) => {
-    try {
-      if (row.type == "file") {
-        await api.fs.files.rename(row.path, name)
-      } else {
-        await api.fs.folders.rename(row.path, name)
-      }
-    } catch (e) {
-      quasar.dialog({
-        title: "Error",
-        message: e.message,
-      });
-
-      return;
-    }
-
-    const items = await loadItems();
-    reloadTreeFolder(path.value, items.folders);
-
-  });
-}
-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,
-        file
-      });
-    }
-  } catch (e) {
-    $q.dialog({
-      title: "Error",
-      message: e.message,
-    });
-    $q.loading.hide();
-    return;
-  }
-  uploadFiles.value = [];
-
-  $q.loading.hide();
-
-  showUploadFiles.value = false;
-
-  const items = await loadItems();
-  reloadTreeFolder(path.value, items.folders);
-
-}
-
-const preview = ref(null);
-
-const drive = computed(() => {
-  return api.drive(props.driveIndex);
-})
-
-const moveToFolder = async (folder) => {
-
-  for (let row of selected.value) {
-    m("fsMove", { path: row.path, target: folder })
-
-  }
-
-  const items = await loadItems();
-  reloadTreeFolder(path.value, items.folders);
-}
-
-const submitSearch = (e) => {
-  localSearch.value = search.value;
-  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 downloadLink = document.createElement("a");
-  downloadLink.href = `data:application/octet-stream;base64,${resp.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;
-  const items = await loadItems();
-  reloadTreeFolder(path.value, items.folders);
-}
-
-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.imagePath;
-}
-
-const onPreviewPDF = async (row) => {
-  const height = window.innerHeight - 200;
-  quasar.dialog({
-    autoClose: true,
-    fullWidth: true,
-    fullHeight: true,
-    title: "Preview PDF",
-    message: "<iframe src='" + row.imagePath + "' width='100%' height='" + height + "px'></iframe>",
-    html: true,
-
-  })
-}
-
-const onClickInfo = async (row) => {
-  rightDrawerOpen.value = true;
-
-}
-
-</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>
-        <q-btn flat round @click="toggleLeftDrawer" aria-label="Menu" icon="menu" class="q-mr-sm" />
-
-        <q-toolbar-title v-if="$q.screen.gt.xs" shrink class="row items-center no-wrap">
-          <span class="q-ml-sm">{{ $t('File Manager') }}</span>
-        </q-toolbar-title>
-
-        <div>
-          <q-input outlined :placeholder="$t('Search for file name')" dense @keyup.enter.native="submitSearch"
-            v-model="search" :color="$light.color">
-            <template v-slot:append>
-              <q-btn flat dense round icon="sym_o_search"></q-btn>
-            </template>
-          </q-input>
-        </div>
-
-        <q-space></q-space>
-        <q-btn v-if="closeable" icon="close" flat round @click="$emit('close')"></q-btn>
-      </q-toolbar>
-    </q-header>
-
-    <q-drawer v-model="leftDrawerOpen" show-if-above bordered :width="257">
-      <q-scroll-area class="fit">
-        <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-menu>
-                  <q-list>
-                    <q-item clickable v-close-popup @click="onNewFolder" v-if="permission.includes('fs.folder.create')">
-                      <q-item-section avatar>
-                        <q-icon name="sym_o_create_new_folder"></q-icon>
-                      </q-item-section>
-                      <q-item-section>{{ $t('Folder') }}</q-item-section>
-                    </q-item>
-                    <q-separator />
-                    <q-item clickable v-close-popup @click="showUploadFiles = true"
-                      v-if="permission.includes('fs.file.upload')">
-                      <q-item-section avatar>
-                        <q-icon name="sym_o_upload_file"></q-icon>
-                      </q-item-section>
-                      <q-item-section>{{ $t('Upload file') }}</q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
-              </q-btn>
-            </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-separator inset class="q-my-sm" />
-
-          <l-file-manager-labels v-model="label" />
-        </q-list>
-      </q-scroll-area>
-    </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" />
-    </q-drawer>
-
-    <q-page-container :style="{ height }">
-
-      <q-dialog v-model="showPreviewImgDialog" full-width full-height auto-close>
-        <q-card>
-          <q-card-section>
-            <q-img :src="previewImg"></q-img>
-          </q-card-section>
-        </q-card>
-      </q-dialog>
-
-      <q-dialog v-model="showUploadFiles" persistent transition-show="scale" transition-hide="scale">
-        <l-card style="width:300px">
-          <q-card-section>
-            <q-file ref="file" v-model="uploadFiles" multiple name="file" label="Files" :color="light.color"></q-file>
-          </q-card-section>
-
-          <q-card-actions align="right">
-            <q-btn flat :label="$t('Cancel')" :color="light.color" v-close-popup></q-btn>
-            <q-btn flat :label="$t('Upload')" :color="light.color" @click="onUploadFiles"></q-btn>
-          </q-card-actions>
-        </l-card>
-      </q-dialog>
-
-      <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>
-        <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)" />
-          <q-tooltip>
-            {{ $t('Move to') }}
-          </q-tooltip>
-        </q-btn>
-
-        <q-btn flat round icon="o_delete" @click="onDeleteSelected" v-if="selected.length > 0">
-          <q-tooltip>
-            {{ $t('Delete') }}
-          </q-tooltip>
-        </q-btn>
-        <q-btn flat round :icon="grid ? 'list_view' : 'grid_view'" @click="grid = !grid">
-          <q-tooltip>
-            {{ grid ? $t('List view') : $t('Grid view') }}
-          </q-tooltip>
-        </q-btn>
-      </q-toolbar>
-
-      <template v-if="grid">
-        <q-table :title="$t('Folders')" flat grid :columns="columns" :rows="foldersGrid" 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)">
-              <q-card flat bordered>
-                <q-item>
-                  <q-item-section avatar>
-                    <q-icon name="sym_o_folder" size="sm"></q-icon>
-                  </q-item-section>
-                  <q-item-section>
-                    {{ props.row.name }}
-                  </q-item-section>
-                  <q-item-section avatar>
-                    <q-checkbox v-model="selected" :val="props.row" :color="$light.color" />
-                  </q-item-section>
-                </q-item>
-              </q-card>
-            </div>
-          </template>
-        </q-table>
-
-        <q-table :title="$t('Files')" flat grid :columns="columns" :rows="filesGrid" 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="onClickRow(null, props.row, null)">
-              <q-card flat bordered>
-                <q-item>
-                  <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-section avatar>
-                    <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-card>
-            </div>
-          </template>
-        </q-table>
-      </template>
-      <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
-          :loading="loading" :loading-label="$t('Loading...')" :no-data-label="$t('No data available')">
-          <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_description" v-else size="sm" />
-            </q-td>
-          </template>
-
-          <template #body-cell-action="props">
-            <q-td auto-width>
-              <q-btn flat icon="sym_o_more_vert" round dense>
-                <q-menu>
-                  <q-list>
-                    <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>
-                      </q-item-section>
-                      <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-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-section avatar>
-                        <q-icon name="sym_o_edit"></q-icon>
-                      </q-item-section>
-                      <q-item-section>{{ $t('Rename') }}</q-item-section>
-                    </q-item>
-
-                    <q-item clickable v-close-popup @click="onPreview(props.row)" v-if="props.row.canPreview">
-                      <q-item-section avatar>
-                        <q-icon name="sym_o_preview"></q-icon>
-                      </q-item-section>
-                      <q-item-section>{{ $t('Preview') }}</q-item-section>
-                    </q-item>
-
-                    <q-item clickable v-close-popup v-if="props.row.mime == 'application/pdf'"
-                      @click="onPreviewPDF(props.row)">
-                      <q-item-section avatar>
-                        <q-icon name="sym_o_preview"></q-icon>
-                      </q-item-section>
-                      <q-item-section>{{ $t('Preview') }}</q-item-section>
-                    </q-item>
-
-                    <q-item clickable v-close-popup @click="onClickInfo(props.row)" class="lt-lg">
-                      <q-item-section avatar>
-                        <q-icon name="sym_o_info"></q-icon>
-                      </q-item-section>
-                      <q-item-section>{{ $t('Info') }}</q-item-section>
-                    </q-item>
-
-                  </q-list>
-                </q-menu>
-              </q-btn>
-            </q-td>
-          </template>
-        </q-table>
-      </template>
-    </q-page-container>
-  </q-layout>
-</template>
-
-<style>
-.q-item--active{background-color:#e0e0e0}
-</style>