@hostlink/nuxt-light 0.0.3

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

@@ -0,0 +1,618 @@
+<script setup>
+import { VariableType } from "json-to-graphql-query";
+import { useI18n } from "vue-i18n";
+const quasar = useQuasar();
+
+const emit = defineEmits(["input", "close"]);
+
+defineProps({
+  closable: Boolean,
+  height: {
+    type: String,
+    default: "700px",
+  },
+  defaultAction: {
+    default: "preview",
+    type: String,
+  },
+  multiple: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const loading = ref(false);
+const folderTree = ref(null);
+
+let i18n = useI18n();
+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: "last_modified_human",
+    align: "left",
+  },
+  {
+    name: "size_display",
+    label: i18n.t("Size"),
+    field: "size",
+    align: "left",
+  },
+  { name: "action" },
+]);
+
+const localSearch = ref(null);
+
+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("");
+
+const onLazyLoad = async ({ node, key, done, fail }) => {
+  const data = await q("fsListFolders", { path: node.path }, ["name", "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"]);
+  files = files.map((item) => {
+    item.type = "file";
+    return item;
+  });
+
+  let folders = [];
+  if (!label.value && !localSearch.value) {
+    folders = await q("fsListFolders", { path: path.value }, ["name", "path"]);
+    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 = [];
+
+  if (path.value.toString() == "") {
+    return [];
+  }
+
+  let paths = path.value.split("/");
+
+  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) => {
+  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 m("fsDeleteFolder", { path: row.path });
+      } else {
+        await m("fsDeleteFile", { path: 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) => {
+    let p = path.value + "/" + name;
+    await m("fsCreateFolder", { path: p });
+    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 m("fsDeleteFile", { path: 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 m("fsDeleteFolder", { path: 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 m("fsRenameFile", { path: row.path, name });
+      } else {
+        await m("fsRenameFolder", { path: 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 () => {
+
+  quasar.loading.show({
+    message: "Uploading files...",
+  });
+
+  for (let file of uploadFiles.value) {
+
+    await m("fsUploadFile", {
+      path: path.value,
+      file: new VariableType("file")
+    }, [{
+      __variables: {
+        file: {
+          type: "Upload!",
+          value: file
+        }
+      }
+    }]);
+  }
+  uploadFiles.value = [];
+
+  quasar.loading.hide();
+
+  showUploadFiles.value = false;
+
+  const items = await loadItems();
+  reloadTreeFolder(path.value, items.folders);
+
+}
+
+const preview = ref(null);
+
+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 = (row) => {
+  // window.open("/api/fs/download?path=" + row.path);
+}
+
+const search = ref(null);
+
+const reloadStorage = async () => {
+  path.value = "";
+
+  search.value = "";
+  localSearch.value = "";
+  label.value = null;
+  const items = await loadItems();
+  reloadTreeFolder(path.value, items.folders);
+
+}
+</script>
+<template>
+  <q-layout view="hHh lpR fFf" class="bg-white" container :style="{ 'min-height': height }">
+    <q-header bordered class="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">
+            <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="closable" icon="close" flat round @click="$emit('close')"></q-btn>
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer v-model="leftDrawerOpen" show-if-above bordered class="bg-white" :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="primary" :label="$t('New')">
+                <q-menu>
+                  <q-list>
+                    <q-item clickable v-close-popup @click="onNewFolder">
+                      <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">
+                      <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>
+            <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-item>
+              <q-item-section>
+                <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-item-section>
+            </q-item>
+          </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 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="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"></q-file>
+          </q-card-section>
+
+          <q-card-actions align="right">
+            <q-btn flat label="Cancel" color="primary" v-close-popup></q-btn>
+            <q-btn flat label="Upload" color="primary" @click="onUploadFiles"></q-btn>
+          </q-card-actions>
+        </l-card>
+      </q-dialog>
+
+      <q-toolbar>
+        <q-breadcrumbs>
+          <q-breadcrumbs-el :label="$t('Storage')" @click="path = ''" href="javascript:void(0)"></q-breadcrumbs-el>
+          <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-btn>
+
+        <q-btn flat round icon="o_delete" @click="onDeleteSelected" v-if="selected.length > 0"></q-btn>
+        <q-btn flat round :icon="grid ? 'list_view' : 'grid_view'" @click="grid = !grid"></q-btn>
+      </q-toolbar>
+
+      <template v-if="grid">
+        <q-table title="Folders" flat bordered grid :columns="columns" :rows="foldersGrid">
+          <template v-slot:item="props">
+            <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
+              <q-card>
+                <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" />
+                  </q-item-section>
+                </q-item>
+              </q-card>
+            </div>
+          </template>
+        </q-table>
+
+        <q-table title="Files" flat bordered grid :columns="columns" :rows="filesGrid" :pagination="pagination">
+
+          <template v-slot:item="props">
+            <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
+              <q-card>
+                <q-item>
+                  <q-item-section avatar>
+                    <q-icon name="sym_o_description" 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" />
+                  </q-item-section>
+                </q-item>
+              </q-card>
+            </div>
+          </template>
+        </q-table>
+      </template>
+      <template v-else>
+
+        <q-table flat bordered :columns="columns" :rows="items" @row-dblclick="onDblclickRow" @row-click="onClickRow"
+          :pagination="pagination" row-key="path" selection="multiple" v-model:selected="selected" dense
+          :loading="loading">
+          <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)">
+                      <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>Download</q-item-section>
+                    </q-item>
+
+                    <q-item clickable v-close-popup @click="onRenameRow(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-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>

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

@@ -0,0 +1,33 @@
+<script setup>
+const props = defineProps({
+    modelValue: {
+        type: String
+    },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const show = ref(false);
+
+const onInput = (value) => {
+    localValue.value = value;
+    show.value = false;
+
+};
+
+const localValue = computed({
+    get: () => props.modelValue,
+    set: (value) => emit("update:modelValue", value),
+})
+
+</script>
+<template>
+    <q-input v-model="localValue">
+        <q-dialog v-model="show" full-height full-width>
+            <l-file-manager closable @close="show = false" @input="onInput"></l-file-manager>
+        </q-dialog>
+        <template v-slot:prepend>
+            <q-btn dense flat round icon="sym_o_folder" @click="show = true"></q-btn>
+        </template>
+    </q-input>
+</template>