[Vue] Use more components for celery progress page

aleksis/core/assets/components/BackButton.vue

+<template>
+  <v-btn color="secondary" v-bind="$attrs">
+    <v-icon left>mdi-chevron-left</v-icon>
+    {{ $t("actions.back") }}
+  </v-btn>
+</template>
+
+<script>
+export default {
+  name: "BackButton"
+}
+</script>

aleksis/core/assets/components/CeleryProgress.vue

@@ -17,42 +17,36 @@
           <div class="text-center mb-4">
             {{ progress.meta.progressTitle ? progress.meta.progressTitle : $t('celery_progress.progress_title') }}
           </div>
-          <v-alert
+          <message-box
               v-if="data"
               v-for="(message, idx) in progress.messages"
               dense
-              text
               :type="STYLE_CLASSES[message.level]"
               transition="slide-x-transition"
               :key="idx"
           >
             {{ message.message }}
-          </v-alert>
-          <v-alert
+          </message-box>
+          <message-box
               v-if="progress.state === 'ERROR'"
               dense
-              text
               type="error"
               transition="slide-x-transition"
           >
-          {{ progress.meta.errorMessage ? progress.meta.errorMessage : $t('celery_progress.error_message') }}
-          </v-alert>
-          <v-alert
+            {{ progress.meta.errorMessage ? progress.meta.errorMessage : $t('celery_progress.error_message') }}
+          </message-box>
+          <message-box
               v-if="progress.state === 'SUCCESS'"
               dense
-              text
               type="success"
               transition="slide-x-transition"
           >
-          {{ progress.meta.successMessage ? progress.meta.successMessage : $t('celery_progress.success_message') }}
-          </v-alert>
+            {{ progress.meta.successMessage ? progress.meta.successMessage : $t('celery_progress.success_message') }}
+          </message-box>
         </v-card-text>
         <v-card-actions
             v-if="progress && (progress.state === 'ERROR' || progress.state === 'SUCCESS')">
-          <v-btn :href="progress.meta.backUrl" text color="secondary">
-            <v-icon left>mdi-arrow-left</v-icon>
-            Go back
-          </v-btn>
+          <back-button :href="progress.meta.backUrl" text/>
           <v-spacer/>
           <v-btn v-if="progress.meta.additionalButton"
                  :href="progress.meta.additionalButton.url" text color="primary">
@@ -69,6 +63,9 @@
 </template>
 
 <script>
+import BackButton from "./BackButton.vue";
+import MessageBox from "./MessageBox.vue";
+
 const STYLE_CLASSES = {
   10: 'info',
   20: 'info',
@@ -86,6 +83,7 @@ const ICONS = {
 };
 export default {
   name: 'CeleryProgress',
+  components: {BackButton, MessageBox},
   apollo: {
     celeryProgressByTaskId: {
       query: require('./celeryProgress.graphql'),
@@ -112,8 +110,7 @@ export default {
     },
   },
   watch: {
-    state(newState, oldState)
-    {
+    state(newState, oldState) {
       if (newState === 'SUCCESS' || newState === 'ERROR') {
         this.$apollo.queries.celeryProgressByTaskId.stopPolling();
       }

aleksis/core/assets/messages.json

@@ -11,6 +11,9 @@
       "progress_title": "Loading ...",
       "error_message": "The operation couldn't be finished successfully.",
       "success_message": "The operation has been finished successfully."
+    },
+    "actions": {
+      "back": "Back"
     }
   },
   "de": {
@@ -25,6 +28,9 @@
       "progress_title": "Wird geladen ...",
       "error_message": "Der Vorgang konnte nicht erfolgreich beendet werden.",
       "success_message": "Der Vorgang wurde erfolgreich beendet."
+    },
+    "actions": {
+      "back": "Zurück"
     }
   }
 }