From 1f24313d236fb9782701464319aa1090158488ae Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Tue, 7 Nov 2023 00:44:55 +0000
Subject: [PATCH] Bugfixes on tooltip z-indexing. Search using breadcrumbs in
 table. Link fixes.

---
 cista-front/src/assets/main.css             |   6 +-
 cista-front/src/components/BreadCrumb.vue   |  25 +--
 cista-front/src/components/FileExplorer.vue | 183 +++++++++++---------
 cista-front/src/components/HeaderMain.vue   |   9 +-
 cista-front/src/repositories/Document.ts    |   2 +-
 cista-front/src/stores/documents.ts         |  27 ++-
 cista-front/src/views/ExplorerView.vue      |  37 +++-
 7 files changed, 166 insertions(+), 123 deletions(-)

diff --git a/cista-front/src/assets/main.css b/cista-front/src/assets/main.css
index 2d1719e..d1348b6 100644
--- a/cista-front/src/assets/main.css
+++ b/cista-front/src/assets/main.css
@@ -187,10 +187,10 @@ table {
   display: flex;
   flex-direction: column;
 }
-nav {
+header nav.headermain {
   /* Position so that tooltips can appear on top of other positioned elements */
   position: relative;
-  z-index: 10;
+  z-index: 100;
 }
 main {
   height: calc(100svh - var(--header-height));
@@ -198,7 +198,7 @@ main {
   overflow-y: scroll;
 }
 [data-tooltip]:hover:after {
-  z-index: 1000;
+  z-index: 101;
   content: attr(data-tooltip);
   position: absolute;
   font-size: 1rem;
diff --git a/cista-front/src/components/BreadCrumb.vue b/cista-front/src/components/BreadCrumb.vue
index 0573c41..addac26 100644
--- a/cista-front/src/components/BreadCrumb.vue
+++ b/cista-front/src/components/BreadCrumb.vue
@@ -41,19 +41,12 @@ const props = defineProps<{
 
 const longest = ref<Array<string>>([])
 
-watchEffect(() => {
-  const longcut = longest.value.slice(0, props.path.length)
-  const same = longcut.every((value, index) => value === props.path[index])
-  if (!same) longest.value = props.path
-  else if (props.path.length > longcut.length) {
-    longest.value = longcut.concat(props.path.slice(longcut.length))
-  }
-})
-
 const isCurrent = (index: number) => index == props.path.length ? 'location' : undefined
 
 const navigate = (index: number) => {
-  links[index].focus()
+  const link = links[index]
+  if (!link) throw Error(`No link at index ${index} (path: ${props.path})`)
+  link.focus()
   router.replace(`/${longest.value.slice(0, index).join('/')}`)
 }
 
@@ -62,6 +55,18 @@ const move = (dir: number) => {
   if (index < 0 || index > longest.value.length) return
   navigate(index)
 }
+
+watchEffect(() => {
+  const longcut = longest.value.slice(0, props.path.length)
+  const same = longcut.every((value, index) => value === props.path[index])
+  if (!same) longest.value = props.path
+  else if (props.path.length > longcut.length) {
+    longest.value = longcut.concat(props.path.slice(longcut.length))
+  }
+})
+watchEffect(() => {
+  if (links.length) navigate(props.path.length)
+})
 </script>
 
 <style>
diff --git a/cista-front/src/components/FileExplorer.vue b/cista-front/src/components/FileExplorer.vue
index 843b1e3..679abe6 100644
--- a/cista-front/src/components/FileExplorer.vue
+++ b/cista-front/src/components/FileExplorer.vue
@@ -56,83 +56,90 @@
         <td class="size right">{{ editing.sizedisp }}</td>
         <td class="menu"></td>
       </tr>
-      <tr
+      <template
         v-for="doc of sorted(props.documents as FolderDocument[])"
-        :key="doc.key"
-        :id="`file-${doc.key}`"
-        :class="{
-          file: doc.type === 'file',
-          folder: doc.type === 'folder',
-          cursor: cursor === doc
-        }"
-        @click="cursor = cursor === doc ? null : doc"
-        @contextmenu.prevent="contextMenu($event, doc)"
-      >
-        <td class="selection" @click.up.stop="cursor = cursor === doc ? doc : null">
-          <input
-            type="checkbox"
-            tabindex="-1"
-            :checked="documentStore.selected.has(doc.key)"
-            @change="
-              ($event.target as HTMLInputElement).checked
-                ? documentStore.selected.add(doc.key)
-                : documentStore.selected.delete(doc.key)
-            "
-          />
-        </td>
-        <td class="name">
-          <template v-if="editing === doc"
-            ><FileRenameInput
-              :doc="doc"
-              :rename="rename"
-              :exit="
-                () => {
-                  editing = null
-                }
-              "
-          /></template>
-          <template v-else>
-            <span class="loc" v-if="doc.loc.join('/') !== props.path.join('/')">{{ doc.loc.join('/') + '/'}}</span>
-            <a
-              :href="url_for(doc)"
+        :key="doc.key">
+        <tr v-if="doc.loc !== prevloc && ((prevloc = doc.loc) || true)">
+          <th colspan="5"><BreadCrumb :path="doc.loc ? doc.loc.split('/') : []" /></th>
+        </tr>
+
+        <tr
+          :id="`file-${doc.key}`"
+          :class="{
+            file: doc.type === 'file',
+            folder: doc.type === 'folder',
+            cursor: cursor === doc
+          }"
+          @click="cursor = cursor === doc ? null : doc"
+          @contextmenu.prevent="contextMenu($event, doc)"
+        >
+          <td class="selection" @click.up.stop="cursor = cursor === doc ? doc : null">
+            <input
+              type="checkbox"
               tabindex="-1"
-              @contextmenu.prevent
-              @focus.stop="cursor = doc"
-              @blur="ev => { if (!editing) cursor = null }"
-              >{{ doc.name }}</a
+              :checked="documentStore.selected.has(doc.key)"
+              @change="
+                ($event.target as HTMLInputElement).checked
+                  ? documentStore.selected.add(doc.key)
+                  : documentStore.selected.delete(doc.key)
+              "
+            />
+          </td>
+          <td class="name">
+            <template v-if="editing === doc"
+              ><FileRenameInput
+                :doc="doc"
+                :rename="rename"
+                :exit="
+                  () => {
+                    editing = null
+                  }
+                "
+            /></template>
+            <template v-else>
+              <a
+                :href="url_for(doc)"
+                tabindex="-1"
+                @contextmenu.prevent
+                @focus.stop="cursor = doc"
+                @blur="ev => { if (!editing) cursor = null }"
+                @keyup.left="router.back()"
+                @keyup.right.stop="ev => { if (doc.type === 'folder') (ev.target as HTMLElement).click() }"
+                >{{ doc.name }}</a
+              >
+              <button
+                v-if="cursor == doc"
+                class="rename-button"
+                @click="() => (editing = doc)"
+              >
+                🖊️
+              </button>
+            </template>
+          </td>
+          <td class="modified right">
+            <time
+              :data-tooltip="new Date(1000 * doc.mtime).toISOString().replace('T', '\n').replace('.000Z', ' UTC')"
+              >{{ doc.modified }}</time
             >
+          </td>
+          <td class="size right">{{ doc.sizedisp }}</td>
+          <td class="menu">
             <button
-              v-if="cursor == doc"
-              class="rename-button"
-              @click="() => (editing = doc)"
+              tabindex="-1"
+              @click.stop="contextMenu($event, doc)"
             >
-              🖊️
+              ⋮
             </button>
-          </template>
-        </td>
-        <td class="modified right">
-          <time
-            :data-tooltip="new Date(1000 * doc.mtime).toISOString().replace('T', '\n').replace('.000Z', ' UTC')"
-            >{{ doc.modified }}</time
-          >
-        </td>
-        <td class="size right">{{ doc.sizedisp }}</td>
-        <td class="menu">
-          <button
-            tabindex="-1"
-            @click.stop="contextMenu($event, doc)"
-          >
-            ⋮
-          </button>
-        </td>
-      </tr>
+          </td>
+        </tr>
+      </template>
     </tbody>
   </table>
   <div v-else class="empty-container">Nothing to see here</div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watchEffect } from 'vue'
+import { ref, computed, watchEffect, onBeforeUpdate } from 'vue'
 import { useDocumentStore } from '@/stores/documents'
 import type { Document, FolderDocument } from '@/repositories/Document'
 import FileRenameInput from './FileRenameInput.vue'
@@ -147,15 +154,12 @@ const props = withDefaults(
   }>(),
   {}
 )
-
 const documentStore = useDocumentStore()
 const router = useRouter()
-const linkBasePath = computed(() => props.path.join('/'))
-const filesBasePath = computed(() => `/files/${linkBasePath.value}`)
-const url_for = (doc: FolderDocument) =>
-  doc.type === 'folder'
-    ? `#${linkBasePath.value}/${doc.name}/`
-    : `${filesBasePath.value}/${doc.name}`
+const url_for = (doc: FolderDocument) => {
+  const p = doc.loc ? `${doc.loc}/${doc.name}` : doc.name
+  return doc.type === 'folder' ? `#/${p}/` : `/files/${p}`
+}
 const cursor = ref<FolderDocument | null>(null)
 // File rename
 const editing = ref<FolderDocument | null>(null)
@@ -174,7 +178,7 @@ const rename = (doc: FolderDocument, newName: string) => {
     control.send(
       JSON.stringify({
         op: 'rename',
-        path: `${decodeURIComponent(linkBasePath.value)}/${oldName}`,
+        path: `${doc.loc}/${oldName}`,
         to: newName
       })
     )
@@ -185,6 +189,7 @@ defineExpose({
   newFolder() {
     const now = Date.now() / 1000
     editing.value = {
+      loc,
       key: 'new',
       name: 'New Folder',
       type: 'folder',
@@ -252,12 +257,18 @@ defineExpose({
         scrolltimer = null
       }, 300)
     }
+    if (moveto === N) focusBreadcrumb()
   }
 })
+const focusBreadcrumb = () => {
+  const el = document.querySelector('.breadcrumb') as HTMLElement | null
+  if (el) el.focus()
+}
 let scrolltimer: any = null
 let scrolltr: any = null
-
 watchEffect(() => {
+  if (cursor.value && cursor.value !== editing.value) editing.value = null
+  if (editing.value) cursor.value = editing.value
   if (cursor.value) {
     const a = document.querySelector(
       `#file-${cursor.value.key} .name a`
@@ -265,7 +276,13 @@ watchEffect(() => {
     if (a) a.focus()
   }
 })
-const mkdir = (doc: FolderDocument, name: string) => {
+watchEffect(() => {
+  if (!props.documents.length && cursor.value) {
+    cursor.value = null
+    focusBreadcrumb()
+  }
+})
+const mkdir = (doc: Document, name: string) => {
   const control = createWebSocket('/api/control', (ev: MessageEvent) => {
     const msg = JSON.parse(ev.data)
     if ('error' in msg) {
@@ -273,14 +290,14 @@ const mkdir = (doc: FolderDocument, name: string) => {
       editing.value = null
     } else {
       console.log('mkdir', msg)
-      router.push(`/${linkBasePath.value}/${name}/`)
+      router.push(`/${doc.loc}/${name}/`)
     }
   })
   control.onopen = () => {
     control.send(
       JSON.stringify({
         op: 'mkdir',
-        path: `${decodeURIComponent(linkBasePath.value)}/${name}`
+        path: `${doc.loc}/${name}`
       })
     )
   }
@@ -332,10 +349,11 @@ const allSelected = computed({
     }
   }
 })
-watchEffect(() => {
-  if (cursor.value && cursor.value !== editing.value) editing.value = null
-  if (editing.value) cursor.value = editing.value
-})
+
+const loc = computed(() => props.path.join('/'))
+let prevloc = ''
+onBeforeUpdate(() => { prevloc = loc.value })
+
 const contextMenu = (ev: Event, doc: Document) => {
   cursor.value = doc
   console.log('Context menu', ev, doc)
@@ -475,4 +493,7 @@ tbody .selection input {
   font-size: 3rem;
   color: var(--accent-color);
 }
+.loc {
+  color: #888;
+}
 </style>
diff --git a/cista-front/src/components/HeaderMain.vue b/cista-front/src/components/HeaderMain.vue
index 1461b69..ca74837 100644
--- a/cista-front/src/components/HeaderMain.vue
+++ b/cista-front/src/components/HeaderMain.vue
@@ -12,22 +12,17 @@ const toggleSearchInput = () => {
   nextTick(() => {
     const input = search.value
     if (input) input.focus()
-    else if (searchButton.value) searchButton.value.blur()
-    executeSearch()
+    //else if (searchButton.value) document.querySelector('.breadcrumb')!.focus()
   })
 }
 
-const executeSearch = () => {
-  documentStore.setFilter(search.value?.value ?? '')
-}
-
 defineExpose({
   toggleSearchInput
 })
 </script>
 
 <template>
-  <nav>
+  <nav class="headermain">
     <div class="buttons">
       <UploadButton />
       <SvgButton
diff --git a/cista-front/src/repositories/Document.ts b/cista-front/src/repositories/Document.ts
index 83b2770..2770921 100644
--- a/cista-front/src/repositories/Document.ts
+++ b/cista-front/src/repositories/Document.ts
@@ -5,7 +5,7 @@ import createWebSocket from './WS'
 export type FUID = string
 
 export type Document = {
-  loc: string[]
+  loc: string
   name: string
   key: FUID
   type: 'folder' | 'file'
diff --git a/cista-front/src/stores/documents.ts b/cista-front/src/stores/documents.ts
index dda72af..4ff7ac1 100644
--- a/cista-front/src/stores/documents.ts
+++ b/cista-front/src/stores/documents.ts
@@ -60,7 +60,7 @@ export const useDocumentStore = defineStore({
     updateRoot(root: DirEntry | null = null) {
       root ??= this.root
       // Transform tree data to flat documents array
-      let loc = [] as Array<string>
+      let loc = ""
       const mapper = ([name, attr]: [string, FileEntry | DirEntry]) => ({
         loc,
         name,
@@ -75,7 +75,7 @@ export const useDocumentStore = defineStore({
       for (let doc; (doc = queue.shift()) !== undefined;) {
         docs.push(doc)
         if ("dir" in doc) {
-          loc = [...doc.loc, doc.name]
+          loc = doc.loc ? `${doc.loc}/${doc.name}` : doc.name
           queue.push(...Object.entries(doc.dir).map(mapper))
         }
       }
@@ -88,16 +88,6 @@ export const useDocumentStore = defineStore({
       this.root = root
       this.document = docs
     },
-    find(query: string): Document[] {
-      const needle = needleFormat(query)
-      return this.document.filter(doc => localeIncludes(doc.haystack, needle))
-    },
-    directory(loc: string[]) {
-      const ret = this.document.filter(
-        doc => doc.loc.length === loc.length && doc.loc.every((e, i) => e === loc[i])
-      )
-      return ret
-    },
     updateUploadingDocuments(key: number, progress: number) {
       for (const d of this.uploadingDocuments) {
         if (d.key === key) d.progress = progress
@@ -129,12 +119,19 @@ export const useDocumentStore = defineStore({
     }
   },
   getters: {
-    mainDocument(): Document[] {
-      return this.document
-    },
     isUserLogged(): boolean {
       return this.user.isLoggedIn
     },
+    recentDocuments(): Document[] {
+      const ret = [...this.document]
+      ret.sort((a, b) => b.mtime - a.mtime)
+      return ret
+    },
+    largeDocuments(): Document[] {
+      const ret = [...this.document]
+      ret.sort((a, b) => b.size - a.size)
+      return ret
+    },
     selectedFiles(): SelectedItems {
       function traverseDir(data: DirEntry | FileEntry, path: string, relpath: string) {
         if (!('dir' in data)) return
diff --git a/cista-front/src/views/ExplorerView.vue b/cista-front/src/views/ExplorerView.vue
index 1aca104..0342114 100644
--- a/cista-front/src/views/ExplorerView.vue
+++ b/cista-front/src/views/ExplorerView.vue
@@ -3,25 +3,50 @@
     ref="fileExplorer"
     :key="Router.currentRoute.value.path"
     :path="props.path"
-    :documents="
-      documentStore.search ?
-      documentStore.find(documentStore.search) :
-      documentStore.directory(props.path)
-    "
+    :documents="documents"
     v-if="props.path"
   />
 </template>
 
 <script setup lang="ts">
-import { watchEffect, ref } from 'vue'
+import { watchEffect, ref, computed } from 'vue'
 import { useDocumentStore } from '@/stores/documents'
 import Router from '@/router/index'
+import { needleFormat, localeIncludes, collator } from '@/utils';
 
 const documentStore = useDocumentStore()
 const fileExplorer = ref()
 const props = defineProps({
   path: Array<string>
 })
+const documents = computed(() => {
+  if (!props.path) return []
+  const loc = props.path.join('/')
+  // List the current location
+  if (!documentStore.search) return documentStore.document.filter(doc => doc.loc === loc)
+  // Find up to 100 newest documents that match the search
+  let docs = documentStore.recentDocuments
+  const search = documentStore.search
+  console.log('Searching for', search)
+  const needle = needleFormat(search)
+  docs = docs.filter(doc => localeIncludes(doc.haystack, needle)).slice(0, 100)
+  // Organize by folder, by relevance
+  const locsub = loc + '/'
+  docs.sort((a, b) => (
+    // @ts-ignore
+    (b.loc === loc) - (a.loc === loc) ||
+    // @ts-ignore
+    (b.loc.slice(0, locsub.length) === locsub) - (a.loc.slice(0, locsub.length) === locsub) ||
+    collator.compare(a.loc, b.loc) ||
+    // @ts-ignore
+    (a.type === 'file') - (b.type === 'file') ||
+    // @ts-ignore
+    b.name.includes(search) - a.name.includes(search) ||
+    collator.compare(a.name, b.name)
+  ))
+  return docs
+})
+
 watchEffect(() => {
   documentStore.fileExplorer = fileExplorer.value
 })