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

cista-front/src/App.vue

@@ -26,7 +26,8 @@
       pathList
     }
   })
-
+  // Update human-readable x seconds ago messages from mtimes
+  setInterval(documentStore.updateModified, 1000)
   watchEffect(() => {
     const documentHandler = new DocumentHandler()
     const documentUploadHandler = new DocumentUploadHandler()

cista-front/src/components/FileExplorer.vue

@@ -15,13 +15,14 @@
         <template #headerCell="{column}"></template>
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'name'">
-            <div class="editable-cell">
+            <div class="editable-cell" :class="record.type === 'folder' ? 'folder' : 'file'">
               <div v-if="editableData[record.key]" class="action-container editable-cell-input-wrapper">
                 <a-input class="name" v-model:value="editableData[record.key].name" @pressEnter="save(record.key)" />
                 <CheckOutlined class="edit-action editable-cell-icon-check" @click="save(record.key)" />
               </div>
               <div v-else class="action-container editable-cell-text-wrapper">
-                <a class="name" :href="`#${linkBasePath}/${record.name}`">{{record.name}}</a>
+                <a v-if="record.type === 'folder'" class="name" :href="`#${linkBasePath}/${record.name}`">{{record.name}}</a>
+                <a v-else class="name" :href="`${filesBasePath}/${record.name}`">{{record.name}}</a>
                 <edit-outlined class="edit-action editable-cell-icon" @click="edit(record.key)" />
               </div>
             </div>
@@ -84,9 +85,10 @@
   });
 
   const linkBasePath = computed(()=>{
-    if(Router.currentRoute.value.path === '/') return ''
-    return Router.currentRoute.value.path
+    const path = Router.currentRoute.value.path
+    return path === '/' ? '' : path
   })
+  const filesBasePath = computed(() => `/files${linkBasePath.value}`)
 
   const columns = ref<TableColumnsType>([
     {
@@ -95,34 +97,26 @@
       width: '70%',
       key: 'name',
       sortDirections: ['ascend', 'descend'],
-      sorter: (a: Document, b: Document, sortOrder) => {
-        return b.name.localeCompare(a.name)
-      }
+      sorter: (a: Document, b: Document) => a.name.localeCompare(b.name),
     },
     {
       title: 'Modified',
       dataIndex: 'modified',
+      className: 'column-date',
       responsive: ['lg'],
       sortDirections: ['ascend', 'descend'],
       defaultSortOrder: 'descend',
-      sorter: (a: FolderDocument, b: FolderDocument) => {
-        const dateA = new Date(a.modified),
-          dateB = new Date(b.modified);
-        if (dateA < dateB) return -1
-        if (dateA > dateB) return 1
-        return 0
-      },
+      sorter: (a: FolderDocument, b: FolderDocument) => a.mtime - b.mtime,
       key: 'modified',
     },
     {
       // TODO BETTER SORT FOR MULTPLE SIZE OR CUSTOM PIPE TO kB to MB / GB
       title: 'Size',
       dataIndex: 'size',
+      className: 'column-size',
       responsive: ['lg'],
       sortDirections: ['ascend', 'descend'],
-      sorter: (a: FolderDocument, b: FolderDocument) => {
-        return a.size - b.size
-      },
+      sorter: (a: FolderDocument, b: FolderDocument) => a.size - b.size,
       key: 'size',
     },
     {
@@ -152,7 +146,10 @@
 
   </script>
 
-  <style scoped>
+  <style>
+  .column-date, .column-size {
+    text-align: right;
+  }
   main {
     padding: 5px;
     height: 100%;
@@ -175,11 +172,19 @@
   .carousel-container{
     height: inherit;
   }
+  .file .name::before {
+    content: '📄 ';
+    font-size: 1.5em;
+  }
+  .folder .name::before {
+    content: '📁 ';
+    font-size: 1.5em;
+  }
   .editable-cell-text-wrapper .editable-cell-icon {
     visibility: hidden; /* Oculta el ícono de manera predeterminada */
   }
 
-.editable-cell-text-wrapper:hover .editable-cell-icon {
+  .editable-cell-text-wrapper:hover .editable-cell-icon {
     visibility: visible; /* Muestra el ícono al hacer hover en el contenedor */
   }
   </style>

cista-front/src/repositories/Document.ts

@@ -6,13 +6,14 @@ import Client from '@/repositories/Client'
 
 type BaseDocument = {
   name: string;
-  key?: number;
+  key?: number | string;
 };
 
 export type FolderDocument = BaseDocument & {
+  type: 'folder' | 'folder-file';
   size: number;
+  mtime: number;
   modified: string;
-  type: 'folder';
 };
 
 export type FileDocument = BaseDocument & {

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,
@@ -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;
     },
@@ -83,11 +85,9 @@ export const useDocumentStore = defineStore({
       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++;
@@ -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;

cista-front/src/utils/index.ts

@@ -12,7 +12,9 @@ export function formatUnixDate(t: number) {
   const diff = date.getTime() - now.getTime()
   const formatter = new Intl.RelativeTimeFormat('en', { numeric:
 'auto' })
-
+  if (Math.abs(diff) <= 5000) {
+      return 'now'
+  }
   if (Math.abs(diff) <= 60000) {
       return formatter.format(Math.round(diff / 1000), 'second')
   }
@@ -29,7 +31,7 @@ export function formatUnixDate(t: number) {
       return formatter.format(Math.round(diff / 86400000), 'day')
   }
 
-  return date.toLocaleDateString()
+  return date.toLocaleDateString(undefined, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' })
 }
 
 export function getFileExtension(filename: string) {

cista/wwwroot/index.html

@@ -5,8 +5,8 @@
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>Vite Vasanko</title>
-    <script type="module" crossorigin src="/assets/index-1dc06db1.js"></script>
-    <link rel="stylesheet" href="/assets/index-09b10238.css">
+    <script type="module" crossorigin src="/assets/index-dfc6f58a.js"></script>
+    <link rel="stylesheet" href="/assets/index-ee545ab1.css">
   </head>
   <body>
     <div id="app"></div>