Hassio fix issues with snapshot dialog (#920)

hassio/hassio-pages-with-tabs.html

@@ -11,6 +11,7 @@
 
 <link rel='import' href='./dashboard/hassio-dashboard.html'>
 <link rel='import' href='./snapshots/hassio-snapshots.html'>
+<link rel='import' href='./snapshots/hassio-snapshot.html'>
 <link rel='import' href='./addon-store/hassio-addon-store.html'>
 <link rel='import' href='./system/hassio-system.html'>
 
@@ -56,6 +57,8 @@
         <hassio-snapshots
           hass='[[hass]]'
           installed-addons='[[supervisorInfo.addons]]'
+          snapshot-slug='{{snapshotSlug}}'
+          snapshot-deleted='{{snapshotDeleted}}'
         ></hassio-snapshots>
       </template>
       <template is='dom-if' if='[[equals(page, "store")]]'>
@@ -71,6 +74,13 @@
         ></hassio-system>
       </template>
     </app-header-layout>
+    <template is='dom-if' if='[[equals(page, "snapshots")]]'>      
+      <hassio-snapshot      
+        hass='[[hass]]'
+        snapshot-slug='{{snapshotSlug}}'
+        snapshot-deleted='{{snapshotDeleted}}'
+      ></hassio-snapshot>
+    </template>
   </template>
 </dom-module>
 
@@ -87,6 +97,8 @@ class HassioPagesWithTabs extends window.hassMixins.NavigateMixin(Polymer.Elemen
       supervisorInfo: Object,
       hostInfo: Object,
       hassInfo: Object,
+      snapshotSlug: String,
+      snapshotDeleted: Boolean,
     };
   }
 

hassio/snapshots/hassio-snapshot.html

@@ -31,7 +31,7 @@
         }
       }
     </style>
-    <paper-dialog id='dialog' on-iron-overlay-closed='dialogClosed'>
+    <paper-dialog id='dialog' with-backdrop on-iron-overlay-closed='dialogClosed'>
       <h2>[[computeName(snapshot)]]</h2>
       <div>
         <div class='snapshot-details'>
@@ -79,7 +79,7 @@
 </dom-module>
 
 <script>
-class HassioSnapshot extends window.hassMixins.EventsMixin(Polymer.Element) {
+class HassioSnapshot extends Polymer.Element {
   static get is() { return 'hassio-snapshot'; }
 
   static get properties() {
@@ -87,32 +87,30 @@ class HassioSnapshot extends window.hassMixins.EventsMixin(Polymer.Element) {
       hass: Object,
       snapshotSlug: {
         type: String,
-        observer: 'computeSnapshot',
+        notify: true,
+        observer: 'snapshotSlugChanged',
+      },
+      snapshotDeleted: {
+        type: Boolean,
+        notify: true,
       },
       snapshot: Object,
       restoreHass: {
         type: Boolean,
         value: true,
       },
-      opened: {
-        type: Boolean,
-        observer: 'openedChanged',
-        notify: true,
-      },
-      updateOverview: {
-        type: Boolean,
-        notify: true,
-      },
       error: String,
     };
   }
 
-  computeSnapshot(snapshotSlug) {
+  snapshotSlugChanged(snapshotSlug) {
+    if (!snapshotSlug || snapshotSlug === 'update') return;
     this.hass.callApi('get', `hassio/snapshots/${snapshotSlug}/info`)
       .then((info) => {
         info.data.folders = this.computeFolders(info.data.folders);
         info.data.addons = this.computeAddons(info.data.addons);
         this.snapshot = info.data;
+        this.$.dialog.open();
       }, () => {
         this.snapshot = null;
       });
@@ -176,7 +174,7 @@ class HassioSnapshot extends window.hassMixins.EventsMixin(Polymer.Element) {
     this.hass.callApi('post', `hassio/snapshots/${this.snapshotSlug}/remove`)
       .then(() => {
         this.$.dialog.close();
-        this.updateOverview = true;
+        this.snapshotDeleted = true;
       }, (error) => {
         this.error = error.body.message;
       });
@@ -209,12 +207,8 @@ class HassioSnapshot extends window.hassMixins.EventsMixin(Polymer.Element) {
     });
   }
 
-  openedChanged(opened) {
-    if (opened) this.$.dialog.open();
-  }
-
   dialogClosed() {
-    this.opened = false;
+    this.snapshotSlug = null;
   }
 }
 customElements.define(HassioSnapshot.is, HassioSnapshot);

hassio/snapshots/hassio-snapshots.html

@@ -10,7 +10,6 @@
 
 <link rel='import' href='../../src/components/hassio-card-content.html'>
 <link rel='import' href='../../src/resources/hassio-style.html'>
-<link rel='import' href='./hassio-snapshot.html'>
 
 <dom-module id="hassio-snapshots">
   <template>
@@ -96,12 +95,6 @@
         </template>
       </div>
     </div>
-    <hassio-snapshot      
-      hass='[[hass]]'
-      snapshot-slug='[[selectedSnapshot]]'
-      opened='{{dialogOpened}}'
-      update-overview='{{updateOverview}}'
-    ></hassio-snapshot>
   </template>
 </dom-module>
 
@@ -135,13 +128,17 @@ class HassioSnapshots extends window.hassMixins.EventsMixin(Polymer.Element) {
           { slug: 'addons/local', name: 'Local add-ons', checked: true },
         ],
       },
-      selectedSnapshot: String,
+      snapshotSlug: {
+        type: String,
+        notify: true,
+      },
+      snapshotDeleted: {
+        type: Boolean,
+        notify: true,
+        observer: 'snapshotDeletedChanged',
+      },
       creatingSnapshot: Boolean,
       dialogOpened: Boolean,
-      updateOverview: {
-        type: Boolean,
-        observer: 'updateOverviewChanged',
-      },
       error: String,
     };
   }
@@ -225,8 +222,7 @@ class HassioSnapshots extends window.hassMixins.EventsMixin(Polymer.Element) {
   }
 
   snapshotTapped(ev) {
-    this.selectedSnapshot = ev.model.snapshot.slug;
-    this.dialogOpened = true;
+    this.snapshotSlug = ev.model.snapshot.slug;
   }
 
   typeChanged() {
@@ -239,10 +235,10 @@ class HassioSnapshots extends window.hassMixins.EventsMixin(Polymer.Element) {
     }
   }
 
-  updateOverviewChanged(update) {
-    if (update) {
+  snapshotDeletedChanged(snapshotDeleted) {
+    if (snapshotDeleted) {
       this.updateSnapshots();
-      this.updateOverview = false;
+      this.snapshotDeleted = false;
     }
   }
 }