Merge branch '37-secondary-next-step-button' into 'development'

Resolve "secondary next step button"

See merge request htwk-software/htwkalender!56

frontend/src/App.vue

@@ -110,7 +110,7 @@ if (!import.meta.env.SSR)
 
 <template>
   <MenuBar />
-  <RouterView v-slot="{ Component, route }">
+  <RouterView v-slot="{ Component, route }" class="mb-8">
     <transition name="scale" mode="out-in">
       <div :key="route.name ?? ''" class="origin-near-top">
         <component :is="Component" />

frontend/src/i18n/translations/de.json

@@ -109,7 +109,8 @@
       "to": " bis ",
       "of": " von insgesamt "
     },
-    "eventType": "Ereignistyp"
+    "eventType": "Ereignistyp",
+    "scrollToTop": "Nach oben scrollen"
   },
   "renameModules": {
     "reminder": "Erinnerung",

frontend/src/i18n/translations/en.json

@@ -109,7 +109,8 @@
       "to": " to ",
       "of": " of "
     },
-    "eventType": "event type"
+    "eventType": "event type",
+    "scrollToTop": "scroll to top"
   },
   "renameModules": {
     "reminder": "reminder",

frontend/src/view/DynamicPage.vue

@@ -86,6 +86,18 @@ const hasContent = computed(() => {
       ]"
     >
       <slot name="content"></slot>
+      <div
+          v-if="button"
+          class="flex flex-wrap my-3 gap-2 align-items-center justify-content-end"
+      >
+        <Button
+            :disabled="button.disabled"
+            class="col-12 md:col-4"
+            :icon="button.icon"
+            :label="button.label"
+            @click="button.onClick()"
+        />
+      </div>
     </div>
   </div>
 </template>

frontend/src/view/create/AdditionalModules.vue

@@ -23,29 +23,44 @@ import AdditionalModuleTable from "@/components/AdditionalModuleTable.vue";
 
 const store = moduleStore();
 
+function topFunction() {
+  window.scrollTo({top: 0, behavior: 'smooth'});
+}
+
 async function nextStep() {
   await router.push("/rename-modules");
 }
 </script>
 
 <template>
-  <div class="flex flex-column align-items-center w-full mb-7">
+  <div class="flex flex-column align-items-center w-full mb-8">
-    <div class="flex align-items-center justify-content-center m-2">
+    <div class="flex align-items-center justify-content-center">
       <h3>
         {{ $t("additionalModules.subTitle") }}
       </h3>
     </div>
-    <AdditionalModuleTable />
     <div
-      class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10"
+      class="flex align-items-center justify-content-end h-4rem mb-2 w-full lg:w-10"
     >
       <Button
         :disabled="store.isEmpty()"
-        class="col-12 md:col-4 mb-3 align-self-end"
+        class="col-12 md:col-4 align-self-end"
         icon="pi pi-arrow-right"
         :label="$t('additionalModules.nextStep')"
         @click="nextStep()"
       />
     </div>
+    <AdditionalModuleTable />
+    <div
+      class="flex align-items-center justify-content-end mt-2 w-full lg:w-10"
+    >
+      <Button
+        class="col-12 md:col-4 mb-3 align-self-end"
+        severity="secondary"
+        icon="pi pi-arrow-up"
+        :label="$t('additionalModules.scrollToTop')"
+        @click="topFunction()"
+      />
+    </div>
   </div>
 </template>