From 6efe2f655b32926865146c58be85c1ec6d6ecedf Mon Sep 17 00:00:00 2001
From: Jonathan Weth <git@jonathanweth.de>
Date: Sun, 30 Oct 2022 15:39:35 +0100
Subject: [PATCH] [Vue] Use more components for celery progress page

---
 aleksis/core/assets/components/BackButton.vue | 12 +++++++
 .../core/assets/components/CeleryProgress.vue | 31 +++++++++----------
 aleksis/core/assets/messages.json             |  6 ++++
 3 files changed, 32 insertions(+), 17 deletions(-)
 create mode 100644 aleksis/core/assets/components/BackButton.vue

diff --git a/aleksis/core/assets/components/BackButton.vue b/aleksis/core/assets/components/BackButton.vue
new file mode 100644
index 000000000..fe8b25b62
--- /dev/null
+++ b/aleksis/core/assets/components/BackButton.vue
@@ -0,0 +1,12 @@
+<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>
diff --git a/aleksis/core/assets/components/CeleryProgress.vue b/aleksis/core/assets/components/CeleryProgress.vue
index 9793913a3..65cb9c683 100644
--- a/aleksis/core/assets/components/CeleryProgress.vue
+++ b/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();
       }
diff --git a/aleksis/core/assets/messages.json b/aleksis/core/assets/messages.json
index 482407830..5da02d3ed 100644
--- a/aleksis/core/assets/messages.json
+++ b/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"
     }
   }
 }
-- 
GitLab