From 645741e048471be1b5eb90f4acb3924ec4df3595 Mon Sep 17 00:00:00 2001
From: Craig Bassett <craig.bassett@gmail.com>
Date: Thu, 8 Apr 2021 16:36:53 -0500
Subject: [PATCH] fix: resolve file load / ready state issues

Signed-off-by: Craig Bassett <craig.bassett@gmail.com>
---
 .../widgets/filesystem/FileEditor.vue         |  1 +
 .../widgets/filesystem/FileEditorDialog.vue   | 27 ++++++++++++-------
 .../widgets/filesystem/FileSystem.vue         | 26 +++++++++---------
 3 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/src/components/widgets/filesystem/FileEditor.vue b/src/components/widgets/filesystem/FileEditor.vue
index 5be7d7f218..569c93dd30 100644
--- a/src/components/widgets/filesystem/FileEditor.vue
+++ b/src/components/widgets/filesystem/FileEditor.vue
@@ -117,6 +117,7 @@ export default class FileEditor extends Vue {
 
   editorMounted () {
     if (this.editor) {
+      this.$emit('ready')
       this.editor.onDidChangeModelContent(event => {
         const value = this.editor?.getValue()
         this.emitChange(value, event)
diff --git a/src/components/widgets/filesystem/FileEditorDialog.vue b/src/components/widgets/filesystem/FileEditorDialog.vue
index bedc7166f1..281465c279 100644
--- a/src/components/widgets/filesystem/FileEditorDialog.vue
+++ b/src/components/widgets/filesystem/FileEditorDialog.vue
@@ -34,12 +34,14 @@
           </app-btn>
           <app-btn
             v-if="!readonly && !printerPrinting && rootProperties.showSaveRestart"
+            :disabled="loading || !editorReady"
             @click="emitSave(true)">
             <v-icon small :left="!isMobile">$restart</v-icon>
             <span class="d-none d-md-inline-block">{{ $t('app.general.btn.save_restart') }}</span>
           </app-btn>
           <app-btn
             v-if="!readonly"
+            :disabled="loading || !editorReady"
             @click="emitSave(false)">
             <v-icon small :left="!isMobile">$save</v-icon>
             <span class="d-none d-md-inline-block">{{ $t('app.general.btn.save') }}</span>
@@ -54,10 +56,10 @@
 
       <file-editor
         v-if="contents !== undefined"
-        :value="contents"
-        @input="updatedContent = $event"
+        v-model="updatedContent"
         :filename="filename"
-        :readonly="readonly">
+        :readonly="readonly"
+        @ready="editorReady = true">
       </file-editor>
 
     </v-card>
@@ -69,12 +71,12 @@ import { Component, Mixins, Prop } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
 
 // Lazy Load the file editor.
-const FileEditor = () => import(
-  /* webpackPreload: true */
-  /* webpackChunkName: "chunk-fileeditor" */
-  './FileEditor.vue'
-)
-// import FileEditor from './FileEditor.vue'
+// const FileEditor = () => import(
+//   /* webpackPreload: true */
+//   /* webpackChunkName: "chunk-fileeditor" */
+//   './FileEditor.vue'
+// )
+import FileEditor from './FileEditor.vue'
 
 @Component({
   components: {
@@ -100,7 +102,8 @@ export default class FileEditorDialog extends Mixins(StateMixin) {
   @Prop({ type: Boolean, default: false })
   public readonly!: boolean
 
-  updatedContent = ''
+  updatedContent = this.contents
+  editorReady = false
 
   get rootProperties () {
     return this.$store.getters['files/getRootProperties'](this.root)
@@ -110,6 +113,10 @@ export default class FileEditorDialog extends Mixins(StateMixin) {
     return this.$vuetify.breakpoint.sm
   }
 
+  mounted () {
+    this.updatedContent = this.contents
+  }
+
   emitClose () {
     this.$emit('input', false)
   }
diff --git a/src/components/widgets/filesystem/FileSystem.vue b/src/components/widgets/filesystem/FileSystem.vue
index 8ca6a48759..da322b197e 100644
--- a/src/components/widgets/filesystem/FileSystem.vue
+++ b/src/components/widgets/filesystem/FileSystem.vue
@@ -438,18 +438,20 @@ export default class FileSystem extends Mixins(StateMixin, FilesMixin, ServicesM
   }
 
   async handleSaveFileChanges (contents: string, restart: boolean) {
-    const file = new File([contents], this.fileEditorDialogState.filename)
-    if (!restart && this.fileEditorDialogState.open) this.fileEditorDialogState.loading = true
-    await this.uploadFile(file, this.visiblePath, this.currentRoot, false)
-    this.fileEditorDialogState.loading = false
-    if (restart) {
-      if (
-        this.fileEditorDialogState.filename &&
-        this.fileEditorDialogState.filename === 'moonraker.conf'
-      ) {
-        this.serviceRestartMoonraker()
-      } else {
-        this.firmwareRestartKlippy()
+    if (contents.length > 0) {
+      const file = new File([contents], this.fileEditorDialogState.filename)
+      if (!restart && this.fileEditorDialogState.open) this.fileEditorDialogState.loading = true
+      await this.uploadFile(file, this.visiblePath, this.currentRoot, false)
+      this.fileEditorDialogState.loading = false
+      if (restart) {
+        if (
+          this.fileEditorDialogState.filename &&
+          this.fileEditorDialogState.filename === 'moonraker.conf'
+        ) {
+          this.serviceRestartMoonraker()
+        } else {
+          this.firmwareRestartKlippy()
+        }
       }
     }
   }