diff --git a/cista-front/components.d.ts b/cista-front/components.d.ts index 7b3644e..775c60d 100644 --- a/cista-front/components.d.ts +++ b/cista-front/components.d.ts @@ -24,6 +24,7 @@ declare module 'vue' { ATooltip: typeof import('ant-design-vue/es')['Tooltip'] FileCarousel: typeof import('./src/components/FileCarousel.vue')['default'] FileExplorer: typeof import('./src/components/FileExplorer.vue')['default'] + FileRenameInput: typeof import('./src/components/FileRenameInput.vue')['default'] FileViewer: typeof import('./src/components/FileViewer.vue')['default'] HeaderMain: typeof import('./src/components/HeaderMain.vue')['default'] LoginModal: typeof import('./src/components/LoginModal.vue')['default'] diff --git a/cista-front/src/components/FileExplorer.vue b/cista-front/src/components/FileExplorer.vue index d23d7f7..099100d 100644 --- a/cista-front/src/components/FileExplorer.vue +++ b/cista-front/src/components/FileExplorer.vue @@ -19,7 +19,11 @@ - {{doc.name}} + + {{doc.modified}} {{doc.sizedisp}} @@ -38,6 +42,8 @@ import { message } from 'ant-design-vue'; import type { Document, FolderDocument } from '@/repositories/Document'; import FileCarousel from './FileCarousel.vue'; + import FileRenameInput from './FileRenameInput.vue' +import createWebSocket from '@/repositories/WS'; const [messageApi, contextHolder] = message.useMessage(); @@ -57,6 +63,30 @@ const filesBasePath = computed(() => `/files${linkBasePath.value}`) const url_for = (doc: FolderDocument) => doc.type === "folder" ? `#${linkBasePath.value}/${doc.name}` : `${filesBasePath}/${doc.name}` + // File rename + const editing = ref(null) + const rename = (doc: FolderDocument, newName: string) => { + const oldName = doc.name + const control = createWebSocket("/api/control", (ev: MessageEvent) => { + const msg = JSON.parse(ev.data) + if ("error" in msg) { + console.error("Rename failed", msg.error.message, msg.error) + doc.name = oldName + } else { + console.log("Rename succeeded", msg) + } + }) + control.onopen = () => { + control.send(JSON.stringify({ + "op": "rename", + "path": `${linkBasePath.value}/${oldName}`, + "to": newName + })) + } + doc.name = newName // We should get an update from watch but this is quicker + } + + // Column sort const toggleSort = (name: string) => { sort.value = sort.value === name ? "" : name } const sort = ref("") const sortCompare = { @@ -107,6 +137,23 @@ overflow: hidden; text-overflow: ellipsis; } + .name { + white-space: nowrap; + text-overflow: initial; + overflow: initial; + } + .name button { + visibility: hidden; + padding-left: 1em; + } + .name:hover button { + visibility: visible; + } + .name button { + cursor: pointer; + border: 0; + background: transparent; + } thead tr { border: 1px solid #ddd; background: #ddd; @@ -157,9 +204,6 @@ display: flex; align-items: center; } - .name{ - max-width: 70%; - } .edit-action{ min-width: 5%; } @@ -177,11 +221,4 @@ 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 { - visibility: visible; /* Muestra el ícono al hacer hover en el contenedor */ - } diff --git a/cista-front/src/components/FileRenameInput.vue b/cista-front/src/components/FileRenameInput.vue new file mode 100644 index 0000000..dc82b10 --- /dev/null +++ b/cista-front/src/components/FileRenameInput.vue @@ -0,0 +1,47 @@ + + + + + diff --git a/cista-front/src/components/FileViewer.vue b/cista-front/src/components/FileViewer.vue index 9464a7e..086490c 100644 --- a/cista-front/src/components/FileViewer.vue +++ b/cista-front/src/components/FileViewer.vue @@ -1,10 +1,10 @@