fix update-app screen spacing and alerts

resources/assets/js/views/settings/UpdateApp.vue

@@ -7,24 +7,24 @@
           {{ $t('settings.update_app.description') }}
         </p>
         <label class="input-label">Current version</label><br>
-        <label class="version">1.0.0</label>
-        <base-button :outline="true" :disabled="isCheckingforUpdate" size="large" color="theme" @click="checkUpdate" >
+        <label class="version mb-4">{{ currentVersion }}</label>
+        <base-button :outline="true" :disabled="isCheckingforUpdate || isUpdating" size="large" color="theme" @click="checkUpdate" class="mb-4">
           <font-awesome-icon :class="{'update': isCheckingforUpdate}" style="margin-right: 10px;" icon="sync-alt" />
           {{ $t('settings.update_app.check_update') }}
         </base-button>
         <hr>
         <div v-show="!isUpdating" v-if="isUpdateAvailable" class="mt-4 content">
-          <h3 class="page-title">{{ $t('settings.update_app.avail_update') }}</h3>
+          <h3 class="page-title mb-3">{{ $t('settings.update_app.avail_update') }}</h3>
           <label class="input-label">{{ $t('settings.update_app.next_version') }}</label><br>
           <label class="version">{{ updateData.version }}</label>
           <p class="page-sub-title">
             {{ description }}
           </p>
-          <base-button size="large" color="theme" @click="onUpdateApp">
+          <base-button size="large" icon="rocket" color="theme" @click="onUpdateApp">
             {{ $t('settings.update_app.update') }}
           </base-button>
         </div>
-        <div v-if="isUpdating">
+        <div v-if="isUpdating" class="mt-4 content">
           <h3 class="page-title">{{ $t('settings.update_app.update_progress') }}</h3>
           <p class="page-sub-title">
             {{ $t('settings.update_app.progress_text') }}
@@ -35,8 +35,8 @@
     </div>
   </div>
 </template>
+
 <script>
-import { mapActions, mapGetters } from 'vuex'
 export default {
   data () {
     return {
@@ -47,6 +47,7 @@ export default {
       progress: 10,
       interval: null,
       description: '',
+      currentVersion: '',
       updateData: {
         isMinor: Boolean,
         installed: '',
@@ -54,26 +55,44 @@ export default {
       }
     }
   },
-  computed: {
-  },
-  watch: {
-  },
+
   mounted () {
+    window.axios.get('/api/settings/app/version').then((res) => {
+      this.currentVersion = res.data.version
+    })
   },
   methods: {
     async onUpdateApp () {
-      this.isUpdating = true
-      const data = this.updateData
-      let response = await axios.post('/api/update', data)
+      try {
+        this.isUpdating = true
+        let res = await window.axios.post('/api/update', this.updateData)
+        if (res.data.success) {
+          this.isUpdateAvailable = false
+          window.toastr['success'](this.$t('settings.update_app.update_success'))
+          this.currentVersion = this.updateData.version
+        } else {
+          console.log(res.data)
+          window.toastr['error'](res.data.error)
+        }
+      } catch (e) {
+        console.log(e)
+        window.toastr['error']('Something went wrong')
+      }
+
       this.isUpdating = false
-      this.isUpdateAvailable = false
     },
     async checkUpdate () {
       try {
         this.isCheckingforUpdate = true
-        let response = await axios.get('/api/check/update')
+        let response = await window.axios.get('/api/check/update')
         this.isCheckingforUpdate = false
 
+        if (!response.data.version) {
+          window.toastr['warning'](this.$t('settings.update_app.latest_message'))
+
+          return
+        }
+
         if (response.data) {
           this.updateData.isMinor = response.data.is_minor
           this.updateData.version = response.data.version