Prettier file listing, using browser instead of viewer for file display (for now), sorting improved, modified timestamps improved.

cista-front/src/stores/documents.ts

@@ -1,15 +1,15 @@
-import type { Document } from '@/repositories/Document';
+import type { Document, FolderDocument } from '@/repositories/Document';
 import type { ISimpleError } from '@/repositories/Client';
 import { fetchFile } from '@/repositories/Document'
 import { formatUnixDate } from '@/utils';
 import { defineStore } from 'pinia';
 
 
-type FileData = { mtime: number, size: number, dir: DirectoryData};
+type FileData = { id: string, mtime: number, size: number, dir: DirectoryData};
 type DirectoryData = {
   [filename: string]: FileData;
 };
-export type FileStructure = {mtime: number, size: number, dir: DirectoryData};
+export type FileStructure = {id: string, mtime: number, size: number, dir: DirectoryData};
 
 export type DocumentStore = {
   root: FileStructure,
@@ -36,7 +36,7 @@ export const useDocumentStore = defineStore({
     selectedDocuments: [] as Document[],
     error: '' as string,
   }),
-  
+
   actions: {
     setActualDocument(location: string){
       this.loading = true;
@@ -54,18 +54,20 @@ export const useDocumentStore = defineStore({
       })
 
       // Transform data
-      let count = 0
-      for (const key in data.dir) {
+      for (const [name, attr] of Object.entries(data.dir)) {
+        const {id, size, mtime, dir} = attr
         const element: Document = {
-          name: key,
-          key: count,
-          size: data.dir[key].size,
-          modified:  formatUnixDate(data.dir[key].mtime),
-          type: 'folder',
+          name,
+          key: id,
+          size,
+          mtime,
+          modified: formatUnixDate(mtime),
+          type: dir === undefined ? 'folder-file' : 'folder',
         }
-        count++
         dataMapped.push(element)
       }
+      // Pre sort directory entries folders first then files, names in natural ordering
+      dataMapped.sort((a, b) => a.type === b.type ? a.name.localeCompare(b.name) : a.type === "folder" ? -1 : 1)
       this.document = dataMapped
       this.loading = false;
     },
@@ -79,15 +81,13 @@ export const useDocumentStore = defineStore({
       this.selectedDocuments = document
     },
     deleteDocument(document: Document){
-      this.document = this.document.filter(e => document.key !== e.key) 
-      this.selectedDocuments = this.selectedDocuments.filter(e => document.key !== e.key) 
+      this.document = this.document.filter(e => document.key !== e.key)
+      this.selectedDocuments = this.selectedDocuments.filter(e => document.key !== e.key)
     },
     updateUploadingDocuments(key: number, progress: number){
-      this.uploadingDocuments.forEach((document) => {
-        if(document.key === key) {
-          document.progress = progress
-        }
-      })
+      for (const d of this.uploadingDocuments) {
+        if(d.key === key) d.progress = progress
+      }
     },
     pushUploadingDocuments(name: string){
       this.uploadCount++;
@@ -100,7 +100,7 @@ export const useDocumentStore = defineStore({
       return document
     },
     deleteUploadingDocument(key: number){
-      this.uploadingDocuments = this.uploadingDocuments.filter((e)=> e.key !== key) 
+      this.uploadingDocuments = this.uploadingDocuments.filter((e)=> e.key !== key)
     },
     getNextDocumentInRoute(direction: number, path: string){
       const locations = path.split('/').slice(1)
@@ -116,7 +116,7 @@ export const useDocumentStore = defineStore({
           }
         }
       })
-      //Store in a temporary array 
+      //Store in a temporary array
       for (const key in data.dir) {
         actualDirArr.push({
           name: key,
@@ -125,7 +125,7 @@ export const useDocumentStore = defineStore({
       }
       const actualFileName = decodeURIComponent(this.mainDocument[0].name).split('/').pop()
       let index = actualDirArr.findIndex(e => e.name === actualFileName)
-      
+
       if(index < 1 && direction === -1 ){
         index = actualDirArr.length -1
       }else if(index >= actualDirArr.length - 1 && direction === 1){
@@ -134,9 +134,13 @@ export const useDocumentStore = defineStore({
         index = index + direction
       }
       return actualDirArr[index].name
+    },
+    updateModified() {
+      for (const d of this.document) {
+        if ("mtime" in d) d.modified = formatUnixDate(d.mtime)
+      }
     }
   },
-
   getters: {
     mainDocument(): Document[] {
       return this.document;