feat(AssetManager): Allow editing asset names without a popup

CHANGELOG.md

@@ -19,6 +19,8 @@ tech changes will usually be stripped from release notes for the public
     -   These limits can be configured in the server config
     -   By default there are no limits, it's up to the server admin to configure them
     -   These limits will only apply to new assets, existing assets are not affected
+-   AssetManager:
+    -   Added ability to edit asset names by clicking on the name and modifying in-place
 
 ### Changed
 

client/src/assetManager/AssetContext.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, defineEmits, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 
 import ContextMenu from "../core/components/contextMenu/ContextMenu.vue";
@@ -8,10 +8,17 @@
 
 import AssetShare from "./AssetShare.vue";
 import { assetContextLeft, assetContextTop, showAssetContextMenu } from "./context";
+import type { AssetId } from "./models";
 import { assetState } from "./state";
 
 import { assetSystem } from ".";
 
+interface RenameEvent {
+    id: AssetId;
+}
+
+const emit = defineEmits<{(event: "renameEvent", payload: RenameEvent): void;}>();
+
 const cm = ref<{ $el: HTMLDivElement } | null>(null);
 const modals = useModal();
 const { t } = useI18n();
@@ -47,21 +54,16 @@
     showAssetContextMenu.value = false;
 }
 
-async function rename(): Promise<void> {
+function rename(): void {
     if (assetState.raw.selected.length !== 1) return;
     const asset = assetState.raw.idMap.get(assetState.raw.selected[0]!);
     if (asset === undefined) {
         console.error("Attempt to rename unknown file");
         return close();
     }
 
-    const name = await modals.prompt(
-        t("assetManager.AssetContextMenu.new_name"),
-        t("assetManager.AssetContextMenu.renaming_NAME", { name: asset.name }),
-    );
-    if (name !== undefined) {
-        assetSystem.renameAsset(asset.id, name);
-    }
+    emit("renameEvent", {id: asset.id});
+
     close();
 }
 
@@ -91,7 +93,7 @@
     },
     {
         title: t("common.remove"),
         action: remove,
     },
 ]);
 </script>

client/src/dashboard/Assets.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import trimEnd from "lodash/trimEnd";
-import { type DeepReadonly, computed, onMounted, ref } from "vue";
+import { type DeepReadonly, computed, nextTick, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { onBeforeRouteLeave, onBeforeRouteUpdate, useRoute } from "vue-router";
 import type { RouteLocationNormalized } from "vue-router";
@@ -31,6 +31,9 @@ const body = document.getElementsByTagName("body")[0];
 const activeSelectionUrl = `url(${baseAdjust("/static/img/assetmanager/active_selection.png")})`;
 const emptySelectionUrl = `url(${baseAdjust("/static/img/assetmanager/empty_selection.png")})`;
 
+const currentRenameElement = ref<HTMLDivElement | null>(null);
+const titleRefs = ref<Record<AssetId, HTMLDivElement | null>>({});
+
 function getCurrentPath(path?: string): string {
     path ??= route.path;
     const i = path.indexOf("/assets");
@@ -168,6 +171,26 @@ function openContextMenu(event: MouseEvent, key: AssetId): void {
 
 let draggingSelection = false;
 
+function renameAsset(event: FocusEvent, file: AssetId, oldName: string): void {
+    if(!canEdit(file, false)) {
+        return;
+    }
+
+    const target = event.target as HTMLElement;
+    if(target.textContent === null){
+        target.textContent = oldName;
+        currentRenameElement.value = null;
+        return;
+    }
+    const name = target.textContent.trim();
+
+    if (name === undefined || name === "" || name === "..") {
+        target.textContent = oldName;
+    }else{
+        assetSystem.renameAsset(file, name);
+    }
+    currentRenameElement.value = null;
+}
 function startDrag(event: DragEvent, file: AssetId): void {
     if (event.dataTransfer === null) return;
 
@@ -265,6 +288,49 @@ function canEdit(data: AssetId | DeepReadonly<ApiAsset> | undefined, includeRoot
     }
     return true;
 }
+
+function setTitleRef(el: HTMLDivElement | null, id: AssetId) : void {
+    if (el) {
+        titleRefs.value[id] = el;
+    } else {
+        delete titleRefs.value[id];
+    }
+}
+function canRename(id: AssetId) : boolean {
+    if (!canEdit(id, false)) {
+        return false;
+    }
+    const el = titleRefs.value[id];
+    if (!el) {
+        return false;
+    }
+
+    return el === currentRenameElement.value;
+}
+
+function selectElementContents(el: HTMLElement) : void {
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    const sel = window.getSelection();
+    if(sel) {
+        sel.removeAllRanges();
+        sel.addRange(range);
+    }
+}
+
+function handleRenameEvent(id: AssetId) : void {
+    const el = titleRefs.value[id];
+    if (el) {
+        currentRenameElement.value = el;
+        nextTick().then(() => {
+            el.focus();
+            selectElementContents(el);
+        }).catch((error) => {
+            console.log("Error passing focus to title element: ", error);
+        });
+    }
+}
+
 </script>
 
 <template>
@@ -339,7 +405,15 @@ function canEdit(data: AssetId | DeepReadonly<ApiAsset> | undefined, includeRoot
             >
                 <font-awesome-icon v-if="isShared(folder)" icon="user-tag" class="asset-link" />
                 <font-awesome-icon icon="folder" style="font-size: 12.5em" />
-                <div class="title">{{ folder.name }}</div>
+                <div
+                     :ref="($el) => setTitleRef($el as HTMLDivElement | null, folder.id)"
+                     :contenteditable="canRename(folder.id)"
+                     class="title"
+                     @keydown.enter="($event!.target as HTMLElement).blur()"
+                     @blur="renameAsset($event, folder.id, folder.name)"
+                >
+                    {{ folder.name }}
+                </div>
             </div>
             <div
                 v-for="file of files"
@@ -357,9 +431,18 @@ function canEdit(data: AssetId | DeepReadonly<ApiAsset> | undefined, includeRoot
             >
                 <font-awesome-icon v-if="isShared(file)" icon="user-tag" class="asset-link" />
                 <img :src="getIdImageSrc(file.id)" width="50" alt="" />
-                <div class="title">{{ file.name }}</div>
+                <div
+                     :ref="($el) => setTitleRef($el as HTMLDivElement | null, file.id)"
+                     :contenteditable="canRename(file.id)"
+                     class="title"
+                     @keydown.enter="($event!.target as HTMLElement).blur()"
+                     @blur="renameAsset($event, file.id, file.name)"
+                >
+                    {{ file.name }}
+                </div>
             </div>
         </div>
+
         <div
             v-show="
                 assetState.reactive.expectedUploads > 0 &&
@@ -380,7 +463,7 @@ function canEdit(data: AssetId | DeepReadonly<ApiAsset> | undefined, includeRoot
             </div>
         </div>
     </div>
-    <AssetContextMenu />
+    <AssetContextMenu @rename-event="handleRenameEvent($event.id)" />
 </template>
 
 <style lang="scss">
@@ -485,10 +568,6 @@ function canEdit(data: AssetId | DeepReadonly<ApiAsset> | undefined, includeRoot
                 cursor: pointer;
             }
 
-            * {
-                pointer-events: none; // prevent drag shenanigans
-            }
-
             > img {
                 width: 12.5rem;
                 height: 12.5rem;