GH-96 - Ability to rename files and folders

UI updates to provide rename option for files and folders.
adobe · Apr 27, 2024 · fdf0dda · fdf0dda
1 parent 936c59f
commit fdf0dda
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 2 deletions.
diff --git a/blocks/browse/da-browse/da-browse.css b/blocks/browse/da-browse/da-browse.css
@@ -517,7 +517,6 @@ li.da-actions-menu-item button:hover {
   min-height: 400px;
 }
 
-
 @media (min-width: 900px) {
   .da-breadcrumb {
     margin-bottom: 12px;
@@ -529,3 +528,29 @@ li.da-actions-menu-item button:hover {
     display: block;
   }
 }
+
+/* Loader */
+.da-loader-overlay {
+  position: absolute;
+  background-color: rgba(228, 240, 255, 0.7);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  left: 0;
+  z-index: 10;
+}
+.da-loader {
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid var(--spectrum-blue-800);
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  animation: spin 2s linear infinite;
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
diff --git a/blocks/browse/da-browse/da-browse.js b/blocks/browse/da-browse/da-browse.js
@@ -212,6 +212,61 @@ export default class DaBrowse extends LitElement {
     this._canPaste = false;
   }
 
+  renameBtnVisibility() {
+    if (this._selectedItems.length === 1) {
+      this._oneSelected = true;
+    } else {
+      this._oneSelected = false;
+    }
+  }
+
+  handleRename() {
+    const item = this._selectedItems[0];
+    const listItems = this.shadowRoot.querySelectorAll('.da-item-list-item-title');
+
+    let listItem;
+    for (const li of listItems) {
+      const href = li.getAttribute('href');
+      const path = href.replace(/\/edit#|\/sheet#|\/media#|#/, '');
+      if (item.path.includes(path)) {
+        listItem = li;
+        break;
+      }
+    }
+
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.value = item.name;
+    input.className = 'da-item-list-item-title';
+    listItem.replaceWith(input);
+    input.focus();
+
+    input.addEventListener('keydown', async (e) => {
+      const resetSelection = () => {
+        input.replaceWith(listItem);
+        input.remove();
+        this.clearSelection();
+        this.requestUpdate();
+      };
+
+      if (e.key === 'Enter') {
+        const newname = item.ext ? `${input.value}.${item.ext}` : input.value;
+        const formData = new FormData();
+        formData.append('newname', newname);
+        const opts = { method: 'POST', body: formData };
+        input.insertAdjacentHTML('afterend', '<div class="da-loader-overlay"><div class="da-loader"></div></div>');
+        await daFetch(`${DA_ORIGIN}/rename${item.path}`, opts);
+        input.nextElementSibling.remove();
+        // Update the item with new name and path
+        item.path = item.path.substring(0, item.path.lastIndexOf('/') + 1) + newname;
+        item.name = input.value;
+        resetSelection();
+      } else if (e.key === 'Escape') {
+        resetSelection();
+      }
+    });
+  }
+
   handleTab(idx) {
     const current = this._tabItems.find((item) => item.selected);
     if (this._tabItems[idx].id === current.id) return;
@@ -292,6 +347,12 @@ export default class DaBrowse extends LitElement {
           <span>${this._selectedItems.length} selected</span>
         </div>
         <div class="da-action-bar-right-rail">
+          <button
+            @click=${this.handleRename}
+            class="rename-button ${this._oneSelected ? '' : 'hide-button'}">
+            <img src="/blocks/browse/da-browse/img/Smock_TextEdit_18_N.svg" />            
+            <span>Rename</span>
+          </button>
           <button
             @click=${this.handleCopy}
             class="copy-button ${this._canPaste ? 'hide-button' : ''}">
@@ -322,7 +383,7 @@ export default class DaBrowse extends LitElement {
             <div class="da-item-list-item-inner">
               ${allowSelect ? html`
                 <div class="checkbox-wrapper">
-                  <input type="checkbox" name="item-selected" id="item-selected-${idx}" .checked="${item.isChecked}" @click="${() => { this.toggleChecked(item); }}">
+                  <input type="checkbox" name="item-selected" id="item-selected-${idx}" .checked="${item.isChecked}" @click="${() => { this.toggleChecked(item); this.renameBtnVisibility(item); }}">
                   <label class="checkbox-label" for="item-selected-${idx}"></label>
                 </div>
                 <input type="checkbox" name="select" style="display: none;">

diff --git a/blocks/browse/da-browse/img/Smock_TextEdit_18_N.svg b/blocks/browse/da-browse/img/Smock_TextEdit_18_N.svg