Alert user before closing tab with unsaved changes

Author: murilopolese

ui/arduino/store.js

@@ -48,6 +48,10 @@ async function store(state, emitter) {
     parentFolder: null, // Null parent folder means not saved?
     source: 'disk'
   })
+  newFile.editor.onChange = function() {
+    newFile.hasChanges = true
+    emitter.emit('render')
+  }
   state.openFiles.push(newFile)
   state.editingFile = newFile.id
 
@@ -351,6 +355,7 @@ async function store(state, emitter) {
       log('error', e)
     }
 
+    openFile.hasChanges = false
     state.isSaving = false
     state.savingProgress = 0
     emitter.emit('refresh-files')
@@ -365,6 +370,11 @@ async function store(state, emitter) {
   })
   emitter.on('close-tab', (id) => {
     log('close-tab', id)
+    const currentTab = state.openFiles.find(f => f.id === id)
+    if (currentTab.hasChanges && currentTab.parentFolder !== null) {
+      let response = confirm("Your file has unsaved changes. Are you sure you want to proceed?")
+      if (!response) return false
+    }
     state.openFiles = state.openFiles.filter(f => f.id !== id)
     // state.editingFile = null
 
@@ -375,6 +385,10 @@ async function store(state, emitter) {
         source: 'disk',
         parentFolder: null
       })
+      newFile.editor.onChange = function() {
+        newFile.hasChanges = true
+        emitter.emit('render')
+      }
       state.openFiles.push(newFile)
       state.editingFile = newFile.id
     }
@@ -995,6 +1009,7 @@ async function store(state, emitter) {
       }
     }
 
+    openFile.hasChanges = false
     state.renamingTab = null
     state.isSaving = false
     state.savingProgress = 0
@@ -1037,43 +1052,49 @@ async function store(state, emitter) {
     let files = []
     for (let i in state.selectedFiles) {
       let selectedFile = state.selectedFiles[i]
+      let openFile = null
       if (selectedFile.type == 'folder') {
         // Don't open folders
         continue
       }
-      if (selectedFile.source === 'board') {
+      if (selectedFile.source == 'board') {
         const fileContent = await serial.loadFile(
           serial.getFullPath(
             '/',
             state.boardNavigationPath,
             selectedFile.fileName
           )
         )
-        files.push(
-          createFile({
-            parentFolder: state.boardNavigationPath,
-            fileName: selectedFile.fileName,
-            source: selectedFile.source,
-            content: fileContent
-          })
-        )
-      } else {
+        openFile = createFile({
+          parentFolder: state.boardNavigationPath,
+          fileName: selectedFile.fileName,
+          source: selectedFile.source,
+          content: fileContent
+        })
+        openFile.editor.onChange = function() {
+          openFile.hasChanges = true
+          emitter.emit('render')
+        }
+      } else if (selectedFile.source == 'disk') {
         const fileContent = await disk.loadFile(
           disk.getFullPath(
             state.diskNavigationRoot,
             state.diskNavigationPath,
             selectedFile.fileName
           )
         )
-        files.push(
-          createFile({
-            parentFolder: state.diskNavigationPath,
-            fileName: selectedFile.fileName,
-            source: selectedFile.source,
-            content: fileContent
-          })
-        )
+        openFile = createFile({
+          parentFolder: state.diskNavigationPath,
+          fileName: selectedFile.fileName,
+          source: selectedFile.source,
+          content: fileContent
+        })
+        openFile.editor.onChange = function() {
+          openFile.hasChanges = true
+          emitter.emit('render')
+        }
       }
+      files.push(openFile)
     }
 
     files = files.filter((f) => { // find files to open
@@ -1280,11 +1301,17 @@ async function store(state, emitter) {
     emitter.emit('render')
   })
 
-  function createFile({ source, parentFolder, fileName, content = newFileContent }) {
+  function createFile(args) {
+    const {
+      source,
+      parentFolder,
+      fileName,
+      content = newFileContent,
+      hasChanges = false
+    } = args
     const id = generateHash()
     const editor = state.cache(CodeMirrorEditor, `editor_${id}`)
     editor.content = content
-    const hasChanges = false
     return {
       id,
       source,
@@ -1300,6 +1327,7 @@ async function store(state, emitter) {
       fileName: generateFileName(),
       parentFolder,
       source,
+      hasChanges: true
     })
   }
 }

ui/arduino/views/components/elements/editor.js

@@ -7,11 +7,11 @@ class CodeMirrorEditor extends Component {
 
   load(el) {
     const onCodeChange = (update) => {
-      this.content = update.state.doc.toString()
       // console.log('code change', this.content)
+      this.content = update.state.doc.toString()
+      this.onChange()
     }
     this.editor = createEditor(this.content, el, onCodeChange)
-
   }
 
   createElement(content) {
@@ -22,4 +22,8 @@ class CodeMirrorEditor extends Component {
   update() {
     return false
   }
+
+  onChange() {
+    return false
+  }
 }

ui/arduino/views/components/elements/tab.js

@@ -8,7 +8,8 @@ function Tab(args) {
     onFinishRenaming = () => false,
     disabled = false,
     active = false,
-    renaming = false
+    renaming = false,
+    hasChanges = false
   } = args
 
   if (active) {
@@ -41,7 +42,9 @@ function Tab(args) {
       return html`
         <div class="tab active" tabindex="0">
           <img class="icon" src="media/${icon}" />
-          <div class="text" ondblclick=${onStartRenaming}>${text}</div>
+          <div class="text" ondblclick=${onStartRenaming}>
+            ${hasChanges ? ' *' : ''} ${text}
+          </div>
           <div class="options" >
             <button onclick=${onCloseTab}>
               <img class="icon" src="media/close.svg" />
@@ -65,7 +68,9 @@ function Tab(args) {
       onclick=${selectTab}
       >
       <img class="icon" src="media/${icon}" />
-      <div class="text">${text}</div>
+      <div class="text">
+        ${hasChanges ? '*' : ''} ${text}
+      </div>
       <div class="options">
         <button onclick=${onCloseTab}>
           <img class="icon" src="media/close.svg" />

ui/arduino/views/components/tabs.js

@@ -7,6 +7,7 @@ function Tabs(state, emit) {
           icon: file.source === 'board'? 'connect.svg': 'computer.svg',
           active: file.id === state.editingFile,
           renaming: file.id === state.renamingTab,
+          hasChanges: file.hasChanges,
           onSelectTab: () => emit('select-tab', file.id),
           onCloseTab: () => emit('close-tab', file.id),
           onStartRenaming: () => emit('rename-tab', file.id),