Merge pull request #99 from arduino/feature/rename-files

Rename files
arduino · Apr 3, 2024 · 1e43d2d · 1e43d2d
2 parents 7c043c7 + bf20272
commit 1e43d2d
Show file tree

Hide file tree

Showing 4 changed files with 199 additions and 27 deletions.
diff --git a/ui/arduino2/main.css b/ui/arduino2/main.css
@@ -501,9 +501,9 @@ button.small .icon {
 
 .file-list .item .options {
   display: none;
-  padding: 5px;
   align-items: center;
   align-self: stretch;
+  cursor: pointer;
 }
 
 .file-list .item:hover .options {
@@ -548,9 +548,13 @@ button.small .icon {
 }
 
 .file-list .item input {
+  box-sizing: border-box;
   border: none;
   border-radius: none;
   height: 100%;
+  width: 100%;
   background: rgba(255, 255, 255, 0.5);
   font-family: inherit;
+  font-size: inherit;
+  outline-color: #F4BA00;
 }
diff --git a/ui/arduino2/media/cursor.svg b/ui/arduino2/media/cursor.svg
diff --git a/ui/arduino2/store.js b/ui/arduino2/store.js
@@ -589,7 +589,6 @@ async function store(state, emitter) {
       return
     }
 
-
     for (let i in state.selectedFiles) {
       const file = state.selectedFiles[i]
       if (file.type == 'folder') {
@@ -637,8 +636,145 @@ async function store(state, emitter) {
     emitter.emit('render')
   })
 
-  emitter.on('rename-file', () => { /* TODO */ })
-  emitter.on('finish-renaming', () => { /* TODO */ })
+  emitter.on('rename-file', (source, item) => {
+    log('rename-file', source, item)
+    state.renamingFile = source
+    emitter.emit('render')
+  })
+  emitter.on('finish-renaming', async (value) => {
+    log('finish-renaming', value)
+
+    // You can only rename one file, the selected one
+    const file = state.selectedFiles[0]
+
+    if (!value || file.fileName == value) {
+      state.renamingFile = null
+      emitter.emit('render')
+      return
+    }
+
+    state.isSaving = true
+    emitter.emit('render')
+
+    // Check if new name overwrites something
+    if (state.renamingFile == 'board' && state.isConnected) {
+      // Check if it will overwrite something
+      const willOverwrite = await checkOverwrite({
+        fileNames: [ value ],
+        parentPath: disk.getFullPath(
+          state.boardNavigationRoot, state.boardNavigationPath, ''
+        ),
+        source: 'board'
+      })
+      if (willOverwrite.length > 0) {
+        let message = `You are about to overwrite the following file/folder on your board:\n\n`
+        message += `${value}\n\n`
+        message += `Are you sure you want to proceed?`
+        const confirmAction = confirm(message, 'Cancel', 'Yes')
+        if (!confirmAction) {
+          state.isSaving = false
+          state.renamingFile = null
+          emitter.emit('render')
+          return
+        }
+
+        if (file.type == 'folder') {
+          await removeBoardFolder(
+            serial.getFullPath(
+              state.boardNavigationRoot,
+              state.boardNavigationPath,
+              value
+            )
+          )
+        } else if (file.type == 'file') {
+          await serial.removeFile(
+            serial.getFullPath(
+              state.boardNavigationRoot,
+              state.boardNavigationPath,
+              value
+            )
+          )
+        }
+      }
+    } else if (state.renamingFile == 'disk') {
+      // Check if it will overwrite something
+      const willOverwrite = await checkOverwrite({
+        fileNames: [ value ],
+        parentPath: disk.getFullPath(
+          state.diskNavigationRoot, state.diskNavigationPath, ''
+        ),
+        source: 'disk'
+      })
+      if (willOverwrite.length > 0) {
+        let message = `You are about to overwrite the following file/folder on your disk:\n\n`
+        message += `${value}\n\n`
+        message += `Are you sure you want to proceed?`
+        const confirmAction = confirm(message, 'Cancel', 'Yes')
+        if (!confirmAction) {
+          state.isSaving = false
+          state.renamingFile = null
+          emitter.emit('render')
+          return
+        }
+
+        if (file.type == 'folder') {
+          await disk.removeFolder(
+            disk.getFullPath(
+              state.diskNavigationRoot,
+              state.diskNavigationPath,
+              value
+            )
+          )
+        } else if (file.type == 'file') {
+          await disk.removeFile(
+            disk.getFullPath(
+              state.diskNavigationRoot,
+              state.diskNavigationPath,
+              value
+            )
+          )
+        }
+
+      }
+    }
+
+    try {
+      if (state.renamingFile == 'board') {
+        await serial.renameFile(
+          serial.getFullPath(
+            state.boardNavigationRoot,
+            state.boardNavigationPath,
+            file.fileName
+          ),
+          serial.getFullPath(
+            state.boardNavigationRoot,
+            state.boardNavigationPath,
+            value
+          )
+        )
+      } else {
+        await disk.renameFile(
+          disk.getFullPath(
+            state.diskNavigationRoot,
+            state.diskNavigationPath,
+            file.fileName
+          ),
+          disk.getFullPath(
+            state.diskNavigationRoot,
+            state.diskNavigationPath,
+            value
+          )
+        )
+      }
+    } catch (e) {
+      alert(`The file ${file.fileName} could not be renamed to ${value}`)
+    }
+
+    state.isSaving = false
+    state.renamingFile = null
+    emitter.emit('refresh-files')
+    emitter.emit('render')
+  })
 
   emitter.on('toggle-file-selection', (file, source, event) => {
     log('toggle-file-selection', file, source, event)
@@ -1018,7 +1154,6 @@ async function checkBoardFile({ root, parentFolder, fileName }) {
 
 async function checkOverwrite({ fileNames = [], parentPath, source }) {
   let files = []
-  let overwrite = []
   if (source === 'board') {
     files = await getBoardFiles(parentPath)
   } else {

diff --git a/ui/arduino2/views/components/file-list.js b/ui/arduino2/views/components/file-list.js
@@ -13,54 +13,84 @@ function generateFileList(source) {
       }
     }
 
+    const newFileItem = html`
+      <div class="item">
+        <img class="icon" src="media/file.svg" />
+        <div class="text">
+          <input type="text" onkeydown=${onKeyEvent} onblur=${(e) => emit('finish-creating-file', e.target.value)}/>
+        </div>
+      </div>
+    `
+    const newFolderItem = html`
+      <div class="item">
+        <img class="icon" src="media/folder.svg" />
+        <div class="text">
+          <input type="text" onkeydown=${onKeyEvent} onblur=${(e) => emit('finish-creating-folder', e.target.value)}/>
+        </div>
+      </div>
+    `
+
     function FileItem(item, i) {
+      const renamingFileItem = html`
+        <input type="text"
+          value=${item.fileName}
+          onkeydown=${onKeyEvent}
+          onblur=${(e) => emit('finish-renaming', e.target.value)}
+          onclick=${(e) => false}
+          ondblclick=${(e) => false}
+          />
+      `
       const isChecked = state.selectedFiles.find(
         f => f.fileName === item.fileName && f.source === source
       )
+      function renameItem(e) {
+        e.preventDefault()
+        emit('rename-file', source, item)
+        return false
+      }
+      function navigateToFolder() {
+        if (!state.renamingFile) emit(`navigate-${source}-folder`, item.fileName)
+      }
+      function openFile() {
+        if (!state.renamingFile) emit(`open-file`, source, item)
+      }
+      let fileName = item.fileName
+      const isSelected = state.selectedFiles.find(f => f.fileName === fileName)
+
+      if (state.renamingFile == source && isSelected) {
+        fileName = renamingFileItem
+      }
       if (item.type === 'folder') {
         return html`
           <div
             class="item ${isChecked ? 'selected' : ''}"
-            ondblclick=${() => emit(`navigate-${source}-folder`, item.fileName)}
             onclick=${(e) => emit('toggle-file-selection', item, source, e)}
+            ondblclick=${navigateToFolder}
             >
             <img class="icon" src="media/folder.svg" />
-            <div class="text">${item.fileName}</div>
+            <div class="text">${fileName}</div>
+            <div class="options" onclick=${renameItem}>
+              <img src="media/cursor.svg" />
+            </div>
           </div>
         `
       } else {
         return html`
           <div
             class="item ${isChecked ? 'selected' : ''}"
             onclick=${(e) => emit('toggle-file-selection', item, source, e)}
-            ondblclick=${() => emit(`open-file`, source, item)}
+            ondblclick=${openFile}
             >
             <img class="icon" src="media/file.svg"  />
-            <div class="text">${item.fileName}</div>
-            <div class="options" onclick=${() => console.log('options', item)}>
-              <img src="media/falafel.svg" />
+            <div class="text">${fileName}</div>
+            <div class="options" onclick=${renameItem}>
+              <img src="media/cursor.svg" />
             </div>
           </div>
         `
       }
     }
 
-    const newFileItem = html`
-      <div class="item">
-        <img class="icon" src="media/file.svg" />
-        <div class="text">
-          <input type="text" onkeydown=${onKeyEvent} onblur=${(e) => emit('finish-creating-file', e.target.value)}/>
-        </div>
-      </div>
-    `
-    const newFolderItem = html`
-      <div class="item">
-        <img class="icon" src="media/folder.svg" />
-        <div class="text">
-          <input type="text" onkeydown=${onKeyEvent} onblur=${(e) => emit('finish-creating-folder', e.target.value)}/>
-        </div>
-      </div>
-    `
     // XXX: Use `source` to filter an array of files with a `source` as proprety
     const list = html`
       <div class="file-list">