uses ProgressIndicator component

pages/devices/_deviceId.vue

 <template>
   <div>
-    <v-overlay
-      :value="isLoading"
-      opacity="0.05"
-    >
-      <v-progress-circular
-        indeterminate
-        class="center-absolute"
-      />
-    </v-overlay>
+    <ProgressIndicator
+      v-model="isLoading"
+    />
     <v-card flat>
       <NuxtChild
         v-model="device"
+        is-in-progress="isLoading"
       />
     </v-card>
   </div>
 </template>
 
-<style>
-  .center-absolute {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    margin-top: -16px;
-    margin-left: -16px;
-  }
-</style>
-
 <script lang="ts">
 import { Component, Vue, Watch } from 'nuxt-property-decorator'
 
 import { Device } from '@/models/Device'
 
-@Component
+import ProgressIndicator from '@/components/ProgressIndicator.vue'
+
+@Component({
+  components: {
+    ProgressIndicator
+  }
+})
 export default class DevicePage extends Vue {
   private device: Device = new Device()
   private isLoading: boolean = true

pages/devices/_deviceId/basic/edit.vue

 <template>
   <div>
+    <ProgressIndicator
+      v-model="isLoading"
+      dark
+    />
     <v-card-actions>
       <v-spacer />
       <v-btn
@@ -51,12 +55,14 @@
 import { Component, Vue, Prop, Watch } from 'nuxt-property-decorator'
 
 import DeviceBasicDataForm from '@/components/DeviceBasicDataForm.vue'
+import ProgressIndicator from '@/components/ProgressIndicator.vue'
 
 import { Device } from '@/models/Device'
 
 @Component({
   components: {
-    DeviceBasicDataForm
+    DeviceBasicDataForm,
+    ProgressIndicator
   }
 })
 export default class DeviceEditBasicPage extends Vue {
@@ -64,6 +70,8 @@ export default class DeviceEditBasicPage extends Vue {
   // here, otherwise the form is not reactive
   private deviceCopy: Device = new Device()
 
+  private isLoading: boolean = false
+
   @Prop({
     required: true,
     type: Object
@@ -79,10 +87,13 @@ export default class DeviceEditBasicPage extends Vue {
       this.$store.commit('snackbar/setError', 'Please correct your input')
       return
     }
+    this.isLoading = true
     this.save().then((device) => {
+      this.isLoading = false
       this.$emit('input', device)
       this.$router.push('/devices/' + this.deviceId + '/basic')
     }).catch((_error) => {
+      this.isLoading = false
       this.$store.commit('snackbar/setError', 'Save failed')
     })
   }

pages/devices/_deviceId/contacts.vue

 <template>
   <div>
+    <ProgressIndicator
+      v-model="isInProgress"
+      :dark="isSaving"
+    />
     <NuxtChild
       v-model="contacts"
     />
@@ -146,19 +150,33 @@
 import { Component, Vue } from 'nuxt-property-decorator'
 import { Contact } from '@/models/Contact'
 
+import ProgressIndicator from '@/components/ProgressIndicator.vue'
+
 @Component({
+  components: {
+    ProgressIndicator
+  }
 })
 export default class DeviceContactsPage extends Vue {
   private contacts: Contact[] = []
-  private isLoading = true
+  private isLoading = false
+  private isSaving = false
 
   mounted () {
+    this.isLoading = true
     this.$api.devices.findRelatedContacts(this.deviceId).then((foundContacts) => {
       this.contacts = foundContacts
       this.isLoading = false
+    }).catch((e) => {
+      this.$store.commit('snackbar/setError', 'Failed to fetch contacts')
+      this.isLoading = false
     })
   }
 
+  get isInProgress (): boolean {
+    return this.isLoading || this.isSaving
+  }
+
   get deviceId (): string {
     return this.$route.params.deviceId
   }
@@ -172,13 +190,16 @@ export default class DeviceContactsPage extends Vue {
   }
 
   removeContact (contactId: string): void {
+    this.isSaving = true
     this.$api.devices.removeContact(this.deviceId, contactId).then(() => {
       const searchIndex = this.contacts.findIndex(c => c.id === contactId)
       if (searchIndex > -1) {
         this.contacts.splice(searchIndex, 1)
       }
+      this.isSaving = false
     }).catch((_error) => {
       this.$store.commit('snackbar/setError', 'Removing contact failed')
+      this.isSaving = false
     })
   }
 }

pages/devices/_deviceId/contacts/new.vue

@@ -30,6 +30,10 @@ permissions and limitations under the Licence.
 -->
 <template>
   <div>
+    <ProgressIndicator
+      v-model="isInProgress"
+      :dark="isSaving"
+    />
     <v-row>
       <v-col
         cols="12"
@@ -68,14 +72,19 @@ import { Component, Vue, Prop } from 'nuxt-property-decorator'
 
 import { Contact } from '@/models/Contact'
 
+import ProgressIndicator from '@/components/ProgressIndicator.vue'
+
 @Component({
   components: {
+    ProgressIndicator
   }
 })
 export default class DeviceAddContactPage extends Vue {
   private alreadyUsedContacts: Contact[] = []
   private allContacts: Contact[] = []
   private selectedContact: Contact | null = null
+  private isLoading: boolean = false
+  private isSaving: boolean = false
 
   @Prop({
     default: () => [] as Contact[],
@@ -89,17 +98,31 @@ export default class DeviceAddContactPage extends Vue {
   }
 
   mounted () {
+    this.isLoading = true
     this.$api.contacts.findAll().then((foundContacts) => {
       this.allContacts = foundContacts
+      this.isLoading = false
+    }).catch((e) => {
+      this.$store.commit('snackbar/setError', 'Failed to fetch related contacts')
+      this.isLoading = false
     })
   }
 
+  get isInProgress (): boolean {
+    return this.isLoading || this.isSaving
+  }
+
   addContact (): void {
     if (this.selectedContact && this.selectedContact.id && this.isLoggedIn) {
+      this.isSaving = true
       this.$api.devices.addContact(this.deviceId, this.selectedContact.id).then(() => {
+        this.isSaving = false
         this.alreadyUsedContacts.push(this.selectedContact as Contact)
         this.$emit('input', this.alreadyUsedContacts)
         this.$router.push('/devices/' + this.deviceId + '/contacts')
+      }).catch((e) => {
+        this.isSaving = false
+        this.$store.commit('snackbar/setError', 'Failed to save contacts')
       })
     }
   }

pages/devices/new.vue

@@ -29,54 +29,60 @@ implied. See the Licence for the specific language governing
 permissions and limitations under the Licence.
 -->
 <template>
-  <v-card
-    flat
-  >
-    <v-card-actions>
-      <v-spacer />
-      <v-btn
-        v-if="isLoggedIn"
-        small
-        text
-        nuxt
-        to="/search/devices"
-      >
-        cancel
-      </v-btn>
-      <v-btn
-        v-if="isLoggedIn"
-        color="green"
-        small
-        @click="onSaveButtonClicked"
-      >
-        create
-      </v-btn>
-    </v-card-actions>
-    <DeviceBasicDataForm
-      ref="basicForm"
-      v-model="device"
+  <div>
+    <ProgressIndicator
+      v-model="isLoading"
+      dark
     />
-    <v-card-actions>
-      <v-spacer />
-      <v-btn
-        v-if="isLoggedIn"
-        small
-        text
-        nuxt
-        to="/search/devices"
-      >
-        cancel
-      </v-btn>
-      <v-btn
-        v-if="isLoggedIn"
-        color="green"
-        small
-        @click="onSaveButtonClicked"
-      >
-        create
-      </v-btn>
-    </v-card-actions>
-  </v-card>
+    <v-card
+      flat
+    >
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          v-if="isLoggedIn"
+          small
+          text
+          nuxt
+          to="/search/devices"
+        >
+          cancel
+        </v-btn>
+        <v-btn
+          v-if="isLoggedIn"
+          color="green"
+          small
+          @click="onSaveButtonClicked"
+        >
+          create
+        </v-btn>
+      </v-card-actions>
+      <DeviceBasicDataForm
+        ref="basicForm"
+        v-model="device"
+      />
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          v-if="isLoggedIn"
+          small
+          text
+          nuxt
+          to="/search/devices"
+        >
+          cancel
+        </v-btn>
+        <v-btn
+          v-if="isLoggedIn"
+          color="green"
+          small
+          @click="onSaveButtonClicked"
+        >
+          create
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </div>
 </template>
 
 <style lang="scss">
@@ -91,10 +97,12 @@ import { Rules } from '@/mixins/Rules'
 import { Device } from '@/models/Device'
 
 import DeviceBasicDataForm from '@/components/DeviceBasicDataForm.vue'
+import ProgressIndicator from '@/components/ProgressIndicator.vue'
 
 @Component({
   components: {
-    DeviceBasicDataForm
+    DeviceBasicDataForm,
+    ProgressIndicator
   }
 })
 // @ts-ignore
@@ -102,6 +110,7 @@ export default class DeviceNewPage extends mixins(Rules) {
   private numberOfTabs: number = 1
 
   private device: Device = new Device()
+  private isLoading: boolean = false
 
   mounted () {
     this.initializeAppBar()
@@ -116,14 +125,17 @@ export default class DeviceNewPage extends mixins(Rules) {
       this.$store.commit('snackbar/setError', 'Please correct your input')
       return
     }
+    if (!this.isLoggedIn) {
+      this.$store.commit('snackbar/setError', 'You need to be logged in to save the device')
+      return
+    }
+    this.isLoading = true
     this.$api.devices.save(this.device).then((savedDevice) => {
-      if (this.isLoggedIn) {
-        this.$store.commit('snackbar/setSuccess', 'Device created')
-        this.$router.push('/devices/' + savedDevice.id + '')
-      } else {
-        throw new Error('You need to be logged in to save the device')
-      }
+      this.isLoading = false
+      this.$store.commit('snackbar/setSuccess', 'Device created')
+      this.$router.push('/devices/' + savedDevice.id + '')
     }).catch((_error) => {
+      this.isLoading = false
       this.$store.commit('snackbar/setError', 'Save failed')
     })
   }