Bugfixes on tooltip z-indexing. Search using breadcrumbs in table. Link fixes.

2023-11-07 00:44:55 +00:00 · 2023-11-07 00:44:55 +00:00 · 1f24313d23
commit 1f24313d23
parent e3af21af91
7 changed files with 166 additions and 123 deletions
--- 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;
--- 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>
--- 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>
--- 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
--- 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'
--- 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
--- 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
 })