HTWK/htwkalender
1
1
Fork 0
mirror of https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git synced 2026-01-16 19:42:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

92 frontend refinements, clickable logo

Browse Source
This commit is contained in:
survellow
2023-12-04 02:39:08 +01:00
parent fbaff30f09
commit 8dfe8a4836
9 changed files with 135 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
frontend/src/components/ModuleSelection.vue
View File

@@ -42,73 +42,65 @@ function nextStep() {
</script>
<template>
<div class="flex flex-column card-container mx-8 mt-2">
<div class="flex align-items-center justify-content-center mb-3">
<Button
:disabled="store.isEmpty()"
class="col-4 justify-content-center"
@click="nextStep()"
>{{ $t("moduleSelection.nextStep") }}
</Button>
</div>
<div class="flex align-items-center justify-content-center">
<DataView :value="modules" data-key="uuid">
<template #header>
<div class="flex justify-content-between flex-wrap">
<div class="flex align-items-center justify-content-center">
<h3>
{{ $t("moduleSelection.modules") }} -
{{ store.countModules() }}
</h3>
</div>
<div class="flex align-items-center justify-content-center">
{{ allSelected ? $t('moduleSelection.deselectAll') : $t('moduleSelection.selectAll')}}
<InputSwitch
class="mx-4"
:disabled="modules.length === 0"
:model-value="allSelected"
@update:model-value="toggleAllModules()"
/>
</div>
<div class="flex flex-column mx-8 mt-2 w-full">
<Button
:disabled="store.isEmpty()"
class="col-12 md:col-4 mb-3 align-self-end"
@click="nextStep()"
icon="pi pi-arrow-right"
:label="$t('moduleSelection.nextStep')"
/>
<DataView
:value="modules"
data-key="uuid"
:class="
[modules.length === 0?
['opacity-0', 'pointer-events-none'] :
['opacity-100', 'transition-all', 'transition-duration-500', 'transition-ease-in-out']
,
'w-full']"
>
<template #header>
<div class="flex justify-content-between align-items-center flex-wrap">
<h3>
{{ $t("moduleSelection.modules") }} -
{{ store.countModules() }}
</h3>
<div class="flex flex-1 align-items-center justify-content-end white-space-nowrap">
{{ allSelected ? $t('moduleSelection.deselectAll') : $t('moduleSelection.selectAll')}}
<InputSwitch
class="mx-4"
:disabled="modules.length === 0"
:model-value="allSelected"
@update:model-value="toggleAllModules()"
/>
</div>
</template>
<template #empty>
<p class="p-4 text-2xl font-bold text-900 empty-message">
{{ $t("moduleSelection.noModulesAvailable") }}
</p>
</template>
<template #list="slotProps">
<div class="col-12">
<div
class="flex flex-column xl:flex-row xl:align-items-start p-2 gap-4"
>
<div
class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 gap-4"
>
<div
class="flex flex-column align-items-center justify-content-center sm:align-items-start gap-3"
>
<p class="text-lg">{{ slotProps.data.name }}</p>
</div>
<div
class="flex sm:flex-column justify-content-center sm:align-items-end gap-3 sm:gap-2"
>
<ToggleButton
class="w-9rem"
off-icon="pi pi-times"
:off-label="$t('moduleSelection.unselected')"
on-icon="pi pi-check"
:on-label="$t('moduleSelection.selected')"
:model-value="store.hasModule(slotProps.data)"
@update:model-value="toggleModule(slotProps.data)"
/>
</div>
</div>
</div>
</div>
</template>
<template #empty>
<p class="p-4 text-2xl font-bold text-900 empty-message">
{{ $t("moduleSelection.noModulesAvailable") }}
</p>
</template>
<template #list="slotProps">
<div class="col-12">
<div
class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 column-gap-4"
>
<p class="text-lg flex-1 align-self-stretch">{{ slotProps.data.name }}</p>
<ToggleButton
class="w-9rem align-self-end my-2"
off-icon="pi pi-times"
:off-label="$t('moduleSelection.unselected')"
on-icon="pi pi-check"
:on-label="$t('moduleSelection.selected')"
:model-value="store.hasModule(slotProps.data)"
@update:model-value="toggleModule(slotProps.data)"
/>
</div>
</template>
</DataView>
</div>
</div>
</template>
</DataView>
</div>
</template>