fix: file manager load (2)

cypress.json

-{
-  "baseUrl": "http://localhost:3000",
-  "projectId": "r7qxah",
-  "fixturesFolder": false,
-  "integrationFolder": "dev/cypress/integration",
-  "pluginsFile": "dev/cypress/plugins/index.js",
-  "screenshotsFolder": "dev/cypress/screenshots",
-  "supportFile": "dev/cypress/support/index.js",
-  "videosFolder": "dev/cypress/videos",
-  "numTestsKeptInMemory": 1
-}

dev.code-workspace

-{
-	"folders": [
-		{
-			"name": "server",
-			"path": "server"
-		},
-		{
-			"name": "ux",
-			"path": "ux"
-		},
-		{
-			"path": "."
-		}
-	],
-	"settings": {
-		"i18n-ally.localesPaths": [
-			"src/i18n",
-			"src/i18n/locales"
-		],
-		"i18n-ally.keystyle": "nested"
-	}
-}

server/controllers/common.js

@@ -40,6 +40,7 @@ router.get('/_site/:siteId?/:resource', async (req, res, next) => {
   if (!site) {
     return res.status(404).send('Site Not Found')
   }
+  console.info(req.params)
   switch (req.params.resource) {
     case 'logo': {
       if (site.config.assets.logo) {
@@ -75,6 +76,35 @@ router.get('/_site/:siteId?/:resource', async (req, res, next) => {
 })
 
 /**
+ * Asset Thumbnails / Download
+ */
+router.get('/_asset/:siteId/:mode/*', async (req, res, next) => {
+  const site = req.params.siteId ? WIKI.sites[req.params.siteId] : await WIKI.db.sites.getSiteByHostname({ hostname: req.hostname })
+  if (!site) {
+    return res.status(404).send('Site Not Found')
+  }
+  const filePath = req.params[0]
+  console.info(filePath)
+  switch (req.params.mode) {
+    case 'thumb': {
+      try {
+
+      } catch (err) {
+
+      }
+      break
+    }
+    case 'download': {
+      break
+    }
+    default: {
+      return res.status(404).send('Invalid Site Resource')
+    }
+  }
+  return res.send('BOB').end()
+})
+
+/**
  * New v3 vue app
  */
 router.get([

ux/src/components/FileManager.vue

@@ -250,10 +250,23 @@ q-layout.fileman(view='hHh lpR lFr', container)
                         q-item-section(side)
                           q-icon(name='las la-eye', color='primary')
                         q-item-section View
+                      template(v-if='item.type === `asset` && item.imageEdit')
+                        q-item(clickable)
+                          q-item-section(side)
+                            q-icon(name='las la-edit', color='orange')
+                          q-item-section Edit Image...
+                        q-item(clickable)
+                          q-item-section(side)
+                            q-icon(name='las la-crop', color='orange')
+                          q-item-section Resize Image...
                       q-item(clickable, v-if='item.type !== `folder`', @click='copyItemURL(item)')
                         q-item-section(side)
                           q-icon(name='las la-clipboard', color='primary')
                         q-item-section Copy URL
+                      q-item(clickable, v-if='item.type !== `folder`', @click='')
+                        q-item-section(side)
+                          q-icon(name='las la-download', color='primary')
+                        q-item-section Download
                       q-item(clickable)
                         q-item-section(side)
                           q-icon(name='las la-copy', color='teal')
@@ -411,6 +424,7 @@ const files = computed(() => {
       case 'asset': {
         f.icon = fileTypes[f.fileExt]?.icon ?? ''
         f.side = filesize(f.fileSize, { round: 0 })
+        f.imageEdit = fileTypes[f.fileExt]?.imageEdit
         if (fileTypes[f.fileExt]) {
           f.caption = t(`fileman.${f.fileExt}FileType`)
         } else {
@@ -489,8 +503,8 @@ function close () {
   siteStore.overlay = null
 }
 
-async function treeLazyLoad (nodeId, { done, fail }) {
-  await loadTree({ parentId: nodeId, types: ['folder'] })
+async function treeLazyLoad (nodeId, isCurrent, { done, fail }) {
+  await loadTree({ parentId: nodeId, types: isCurrent ? null : ['folder'] })
   done()
 }
 
@@ -792,6 +806,7 @@ async function uploadNewFiles () {
           }
         }
         state.uploadPercentage = 100
+        loadTree({ parentId: state.currentFolderId })
         $q.notify({
           type: 'positive',
           message: t('fileman.uploadSuccess')
@@ -859,7 +874,8 @@ async function copyItemURL (item) {
         break
       }
       case 'asset': {
-        // TODO: Copy asset URL to clibpard
+        const assetPath = item.folderPath ? `${item.folderPath}/${item.fileName}` : item.fileName
+        await navigator.clipboard.writeText(`${window.location.origin}/${assetPath}`)
         break
       }
       default: {

ux/src/components/TreeLevel.vue

@@ -67,7 +67,6 @@ const $q = useQuasar()
 const roots = inject('roots')
 const nodes = inject('nodes')
 const selection = inject('selection')
-const emitContextAction = inject('emitContextAction')
 const contextActionList = inject('contextActionList')
 
 // COMPUTED
@@ -103,8 +102,4 @@ function setRoot () {
   selection.value = null
 }
 
-function createRootFolder () {
-  emitContextAction(null, 'newFolder')
-}
-
 </script>

ux/src/components/TreeNav.vue

@@ -108,18 +108,14 @@ const selection = computed({
 
 // METHODS
 
-function emitLazyLoad (nodeId, clb) {
+function emitLazyLoad (nodeId, isCurrent, clb) {
   if (props.useLazyLoad) {
-    emit('lazyLoad', nodeId, clb)
+    emit('lazyLoad', nodeId, isCurrent, clb)
   } else {
     clb.done()
   }
 }
 
-function emitContextAction (nodeId, action) {
-  emit('contextAction', nodeId, action)
-}
-
 function setOpened (nodeId) {
   state.opened[nodeId] = true
 }
@@ -142,7 +138,6 @@ provide('opened', state.opened)
 provide('displayMode', toRef(props, 'displayMode'))
 provide('selection', selection)
 provide('emitLazyLoad', emitLazyLoad)
-provide('emitContextAction', emitContextAction)
 
 // EXPOSE
 

ux/src/components/TreeNode.vue

@@ -5,7 +5,7 @@ li.treeview-node
     q-icon(
       :name='icon'
       size='sm'
-      @click.stop='hasChildren ? toggleNode() : openNode()'
+      @click.stop='toggleNode()'
       )
     .treeview-label-text {{displayMode === 'path' ? node.fileName : node.title}}
     q-spinner.q-mr-xs(
@@ -82,7 +82,6 @@ const opened = inject('opened')
 const displayMode = inject('displayMode')
 const selection = inject('selection')
 const emitLazyLoad = inject('emitLazyLoad')
-const emitContextAction = inject('emitContextAction')
 const contextActionList = inject('contextActionList')
 
 // DATA
@@ -113,13 +112,13 @@ const isActive = computed(() => {
 
 // METHODS
 
-async function toggleNode () {
+async function toggleNode (isCurrent = false) {
   opened[props.node.id] = !(opened[props.node.id] === true)
   if (opened[props.node.id] && !loaded[props.node.id]) {
     state.isLoading = true
     await Promise.race([
       new Promise((resolve, reject) => {
-        emitLazyLoad(props.node.id, { done: resolve, fail: reject })
+        emitLazyLoad(props.node.id, isCurrent, { done: resolve, fail: reject })
       }),
       new Promise((resolve, reject) => {
         setTimeout(() => reject(new Error('Async tree loading timeout')), 30000)
@@ -135,11 +134,7 @@ function openNode () {
   if (selection.value !== props.node.id && opened[props.node.id]) {
     return
   }
-  toggleNode()
-}
-
-function contextAction (action) {
-  emitContextAction(props.node.id, action)
+  toggleNode(true)
 }
 
 </script>

ux/src/helpers/fileTypes.js

@@ -69,10 +69,12 @@ export default {
     icon: 'img:/_assets/icons/color-cd.svg'
   },
   jpg: {
-    icon: 'img:/_assets/icons/color-jpg.svg'
+    icon: 'img:/_assets/icons/color-jpg.svg',
+    imageEdit: true
   },
   jpeg: {
-    icon: 'img:/_assets/icons/color-jpg.svg'
+    icon: 'img:/_assets/icons/color-jpg.svg',
+    imageEdit: true
   },
   json: {
     icon: 'img:/_assets/icons/color-json.svg'
@@ -111,7 +113,8 @@ export default {
     icon: 'img:/_assets/icons/color-pdf.svg'
   },
   png: {
-    icon: 'img:/_assets/icons/color-png.svg'
+    icon: 'img:/_assets/icons/color-png.svg',
+    imageEdit: true
   },
   pptx: {
     icon: 'img:/_assets/icons/color-ppt.svg'