cista-front/src/components/FileExplorer.vue

@@ -1,6 +1,7 @@
 <template>
   <main>
-    <table v-if="props.documents.length">
+    <button @click="newFolder">New Folder</button>
+    <table v-if="props.documents.length || editing">
       <thead>
         <tr>
           <th class="selection">
@@ -34,6 +35,14 @@
         </tr>
       </thead>
       <tbody>
+        <tr v-if="editing?.key === 'new'" class="folder">
+          <td class="selection"></td>
+          <td class="name">
+            <FileRenameInput :doc="editing" :rename="mkdir" :exit="() => { editing = null }"/>
+          </td>
+          <td class="right">{{editing.modified}}</td>
+          <td class="right">{{editing.sizedisp}}</td>
+        </tr>
         <tr
           v-for="doc of sorted(props.documents as FolderDocument[])"
           :key="doc.key"
@@ -79,6 +88,7 @@ import { useDocumentStore } from '@/stores/documents'
 import type { Document, FolderDocument } from '@/repositories/Document'
 import FileRenameInput from './FileRenameInput.vue'
 import createWebSocket from '@/repositories/WS'
+import { formatSize, formatUnixDate } from '@/utils'
 
 const props = withDefaults(
   defineProps<{
@@ -122,6 +132,38 @@ const rename = (doc: FolderDocument, newName: string) => {
   }
   doc.name = newName // We should get an update from watch but this is quicker
 }
+const newFolder = () => {
+  const now = Date.now() / 1000
+  editing.value = {
+    key: 'new',
+    name: 'New Folder',
+    type: 'folder',
+    mtime: now,
+    size: 0,
+    sizedisp: formatSize(0),
+    modified: formatUnixDate(now)
+  }
+}
+const mkdir = (doc: FolderDocument, name: string) => {
+  const control = createWebSocket('/api/control', (ev: MessageEvent) => {
+    const msg = JSON.parse(ev.data)
+    if ('error' in msg) {
+      console.error('Mkdir failed', msg.error.message, msg.error)
+      doc.name = oldName
+    } else {
+      console.log('mkdir', msg)
+    }
+  })
+  control.onopen = () => {
+    control.send(
+      JSON.stringify({
+        op: 'mkdir',
+        path: `${linkBasePath.value}/${name}`,
+      })
+    )
+  }
+  doc.name = name // We should get an update from watch but this is quicker
+}
 
 // Column sort
 const toggleSort = (name: string) => {

cista-front/src/components/FileRenameInput.vue

@@ -30,7 +30,7 @@ const props = defineProps<{
 const apply = () => {
   const name = input.value!.value
   props.exit()
-  if (name === props.doc.name || name.length === 0) return
+  if (props.doc.key !== 'new' && (name === props.doc.name || name.length === 0)) return
   props.rename(props.doc, name)
 }
 </script>