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

Resolve "secondary next step button"

See merge request htwk-software/htwkalender!56
This commit is contained in:
Elmar Kresse
2024-07-12 09:11:25 +00:00
5 changed files with 37 additions and 8 deletions

View File

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

View File

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

View File

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

View File

@@ -86,6 +86,18 @@ const hasContent = computed(() => {
]" ]"
> >
<slot name="content"></slot> <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>
</div> </div>
</template> </template>

View File

@@ -23,29 +23,44 @@ import AdditionalModuleTable from "@/components/AdditionalModuleTable.vue";
const store = moduleStore(); const store = moduleStore();
function topFunction() {
window.scrollTo({top: 0, behavior: 'smooth'});
}
async function nextStep() { async function nextStep() {
await router.push("/rename-modules"); await router.push("/rename-modules");
} }
</script> </script>
<template> <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> <h3>
{{ $t("additionalModules.subTitle") }} {{ $t("additionalModules.subTitle") }}
</h3> </h3>
</div> </div>
<AdditionalModuleTable />
<div <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 <Button
:disabled="store.isEmpty()" :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" icon="pi pi-arrow-right"
:label="$t('additionalModules.nextStep')" :label="$t('additionalModules.nextStep')"
@click="nextStep()" @click="nextStep()"
/> />
</div> </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> </div>
</template> </template>