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

fix:#24 linted and formatted

Browse Source
This commit is contained in:
Elmar Kresse
2024-01-17 18:53:17 +01:00
parent f112c8c71c
commit c13cfc61fd
25 changed files with 4620 additions and 1890 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,15 +15,18 @@ const props = defineProps({
},
});
const modules : ComputedRef<Module[]> = computed(() => props.modules);
const selectedCourse : ComputedRef<string> = computed(() => props.selectedCourse);
const modules: ComputedRef<Module[]> = computed(() => props.modules);
const selectedCourse: ComputedRef<string> = computed(
() => props.selectedCourse,
);
store.modules.clear();
const allSelected : ComputedRef<boolean> =
computed(() => props.modules.every((module) => store.hasModule(module)));
const allSelected: ComputedRef<boolean> = computed(() =>
props.modules.every((module) => store.hasModule(module)),
);
function toggleAllModules(){
function toggleAllModules() {
if (allSelected.value) {
store.removeAllModules();
} else {
@@ -42,24 +45,39 @@ function toggleModule(module: Module) {
<template>
<div class="flex flex-column w-full">
<DataView
<DataView
:value="modules"
data-key="uuid"
:class="
[selectedCourse === ''?
['opacity-0', 'pointer-events-none'] :
['opacity-100', 'transition-all', 'transition-duration-500', 'transition-ease-in-out']
,
'w-full']"
>
:class="[
selectedCourse === ''
? ['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 md:mx-4">
<h3>
{{ $t("moduleSelection.modules") }} -
{{ store.countModules() }}
</h3>
<div class="flex align-items-center justify-content-end white-space-nowrap">
<p>{{ allSelected ? $t('moduleSelection.deselectAll') : $t('moduleSelection.selectAll')}}</p>
<div
class="flex justify-content-between align-items-center flex-wrap md:mx-4"
>
<h3>
{{ $t("moduleSelection.modules") }} -
{{ store.countModules() }}
</h3>
<div
class="flex align-items-center justify-content-end white-space-nowrap"
>
<p>
{{
allSelected
? $t("moduleSelection.deselectAll")
: $t("moduleSelection.selectAll")
}}
</p>
<InputSwitch
class="mx-2"
:disabled="modules.length === 0"
@@ -76,20 +94,26 @@ function toggleModule(module: Module) {
</template>
<template #list="slotProps">
<div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 column-gap-4 mx-2 md:mx-4">
<p class="text-lg flex-1 align-self-stretch">{{ item.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(item)"
@update:model-value="toggleModule(item)"
/>
</div>
</div>
<div
v-for="(item, index) in slotProps.items"
:key="index"
class="col-12"
>
<div
class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 column-gap-4 mx-2 md:mx-4"
>
<p class="text-lg flex-1 align-self-stretch">{{ item.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(item)"
@update:model-value="toggleModule(item)"
/>
</div>
</div>
</div>
</template>
</DataView>