Add steps for update app

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

@@ -1,33 +1,76 @@
 <template>
-  <div class="setting-main-container">
+  <div class="setting-main-container update-container">
     <div class="card setting-card">
       <div class="page-header">
         <h3 class="page-title">{{ $t('settings.update_app.title') }}</h3>
         <p class="page-sub-title">
           {{ $t('settings.update_app.description') }}
         </p>
-        <label class="input-label">{{ $t('settings.update_app.current_version') }}</label><br>
+        <label class="input-label">{{
+          $t('settings.update_app.current_version')
+        }}</label
+        ><br />
         <label class="version mb-4">{{ currentVersion }}</label>
-        <base-button :outline="true" :disabled="isCheckingforUpdate || isUpdating" size="large" color="theme" class="mb-4" @click="checkUpdate">
-          <font-awesome-icon :class="{'update': isCheckingforUpdate}" style="margin-right: 10px;" icon="sync-alt" />
+        <base-button
+          :outline="true"
+          :disabled="isCheckingforUpdate || isUpdating"
+          size="large"
+          color="theme"
+          class="mb-4"
+          @click="checkUpdate"
+        >
+          <font-awesome-icon
+            :class="{ update: isCheckingforUpdate }"
+            style="margin-right: 10px;"
+            icon="sync-alt"
+          />
           {{ $t('settings.update_app.check_update') }}
         </base-button>
-        <hr>
+        <hr />
         <div v-show="!isUpdating" v-if="isUpdateAvailable" class="mt-4 content">
-          <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>
+          <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" style="white-space: pre-wrap;">{{ description }}</p>
-          <base-button size="large" icon="rocket" 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" 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') }}
-          </p>
-          <font-awesome-icon icon="spinner" class="fa-spin"/>
+          <div class="d-flex flex-row justify-content-between">
+            <div>
+              <h3 class="page-title">
+                {{ $t('settings.update_app.update_progress') }}
+              </h3>
+              <p class="page-sub-title">
+                {{ $t('settings.update_app.progress_text') }}
+              </p>
+            </div>
+            <font-awesome-icon icon="spinner" class="update-spinner fa-spin" />
+          </div>
+          <ul class="update-steps-container">
+            <li class="update-step" v-for="step in updateSteps">
+              <p class="update-step-text">{{ $t(step.translationKey) }}</p>
+              <div class="update-status-container">
+                <span v-if="step.time" class="update-time">{{
+                  step.time
+                }}</span>
+                <span :class="'update-status status-' + getStatus(step)">{{
+                  getStatus(step)
+                }}</span>
+              </div>
+            </li>
+          </ul>
         </div>
       </div>
     </div>
@@ -36,7 +79,7 @@
 
 <script>
 export default {
-  data () {
+  data() {
     return {
       isShowProgressBar: false,
       isUpdateAvailable: false,
@@ -46,60 +89,78 @@ export default {
       interval: null,
       description: '',
       currentVersion: '',
+      updateSteps: [
+        {
+          translationKey: 'settings.update_app.download_zip_file',
+          stepUrl: '/api/update/download',
+          time: null,
+          started: false,
+          completed: false,
+        },
+        {
+          translationKey: 'settings.update_app.unzipping_package',
+          stepUrl: '/api/update/unzip',
+          time: null,
+          started: false,
+          completed: false,
+        },
+        {
+          translationKey: 'settings.update_app.copying_files',
+          stepUrl: '/api/update/copy',
+          time: null,
+          started: false,
+          completed: false,
+        },
+        {
+          translationKey: 'settings.update_app.running_migrations',
+          stepUrl: '/api/update/migrate',
+          time: null,
+          started: false,
+          completed: false,
+        },
+        {
+          translationKey: 'settings.update_app.finishing_update',
+          stepUrl: '/api/update/finish',
+          time: null,
+          started: false,
+          completed: false,
+        },
+      ],
       updateData: {
         isMinor: Boolean,
         installed: '',
-        version: ''
-      }
+        version: '',
+      },
     }
   },
-  created () {
+  created() {
     window.addEventListener('beforeunload', (event) => {
       if (this.isUpdating) {
         event.returnValue = 'Update is in progress!'
       }
     })
   },
-  mounted () {
+  mounted() {
     window.axios.get('/api/settings/app/version').then((res) => {
       this.currentVersion = res.data.version
     })
   },
   methods: {
-    closeHandler () {
+    closeHandler() {
       console.log('closing')
     },
-    async onUpdateApp () {
-      try {
-        this.isUpdating = true
-        this.updateData.installed = this.currentVersion
-        let res = await window.axios.post('/api/update', this.updateData)
-
-        if (res.data.success) {
-          setTimeout(async () => {
-            await window.axios.post('/api/update/finish', this.updateData)
-
-            window.toastr['success'](this.$t('settings.update_app.update_success'))
-            this.currentVersion = this.updateData.version
-            this.isUpdateAvailable = false
-
-            setTimeout(() => {
-              location.reload()
-            }, 2000)
-          }, 1000)
-        } else {
-          console.log(res.data)
-          window.toastr['error'](res.data.error)
-        }
-      } catch (e) {
-        console.log(e)
-        window.toastr['error']('Something went wrong')
+    getStatus(step) {
+      if (step.started && step.completed) {
+        return 'finished'
+      } else if (step.started && !step.completed) {
+        return 'running'
+      } else if (!step.started && !step.completed) {
+        return 'pending'
+      } else {
+        return 'error'
       }
-
-      this.isUpdating = false
     },
-
-    async checkUpdate () {
+    async checkUpdate() {
       try {
         this.isCheckingforUpdate = true
         let response = await window.axios.get('/api/check/update')
@@ -122,8 +183,67 @@ export default {
         this.isCheckingforUpdate = false
         window.toastr['error']('Something went wrong')
       }
-    }
-  }
+    },
+    async onUpdateApp() {
+      let path = null
+
+      for (let index = 0; index < this.updateSteps.length; index++) {
+        let currentStep = this.updateSteps[index]
+        try {
+          this.isUpdating = true
+          currentStep.started = true
+          let updateParams = {
+            version: this.updateData.version,
+            installed: this.currentVersion,
+            path: path || null,
+          }
+
+          let requestResponse = await window.axios.post(
+            currentStep.stepUrl,
+            updateParams
+          )
+          currentStep.completed = true
+          if (requestResponse.data && requestResponse.data.path) {
+            path = requestResponse.data.path
+          }
+
+          // on finish
+          if (
+            currentStep.translationKey == 'settings.update_app.finishing_update'
+          ) {
+            this.isUpdating = false
+            window.toastr['success'](
+              this.$t('settings.update_app.update_success')
+            )
+
+            setTimeout(() => {
+              location.reload()
+            }, 3000)
+          }
+        } catch (error) {
+          currentStep.started = false
+          currentStep.completed = true
+          window.toastr['error'](this.$t('validation.something_went_wrong'))
+          this.onUpdateFailed(currentStep.translationKey)
+          return false
+        }
+      }
+    },
+    onUpdateFailed(translationKey) {
+      let stepName = this.$t(translationKey) 
+      swal({
+        title: this.$t('settings.update_app.update_failed'),
+        text: this.$tc('settings.update_app.update_failed_text', stepName, {step: stepName}),
+        buttons: [this.$t('general.cancel'), this.$t('general.retry')],
+      }).then(async (value) => {
+        if (value) {
+          this.onUpdateApp()
+          return 
+        }
+        this.isUpdating = false
+      })
+    },
+  },
 }
 </script>