mirror of
https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender-pwa.git
synced 2026-01-17 23:42:26 +01:00
Merge branch 'main' into 15-calendar-preview
# Conflicts: # frontend/src/App.vue # frontend/src/view/AdditionalModules.vue
This commit is contained in:
masterelmar
295
frontend/src/view/AdditionalModules.vue
Normal file
295
frontend/src/view/AdditionalModules.vue
Normal file
@@ -0,0 +1,295 @@
|
||||
<script lang="ts" setup>
|
||||
import {defineAsyncComponent, ref, Ref} from "vue";
|
||||
import {Module} from "../model/module.ts";
|
||||
import {fetchAllModules} from "../api/fetchCourse.ts";
|
||||
import moduleStore from "../store/moduleStore.ts";
|
||||
import {MultiSelectAllChangeEvent} from "primevue/multiselect";
|
||||
import { FilterMatchMode } from "primevue/api";
|
||||
import { useDialog } from "primevue/usedialog";
|
||||
import router from "../router";
|
||||
import {fetchModule} from "../api/fetchModule.ts";
|
||||
import {useDialog} from "primevue/usedialog";
|
||||
import {useI18n} from "vue-i18n";
|
||||
|
||||
const dialog = useDialog();
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
const fetchedModules = async () => {
|
||||
return await fetchAllModules();
|
||||
};
|
||||
|
||||
const store = moduleStore();
|
||||
const modules: Ref<Module[]> = ref([]);
|
||||
const filters = ref({
|
||||
course: {
|
||||
value: null,
|
||||
matchMode: FilterMatchMode.CONTAINS,
|
||||
},
|
||||
name: {
|
||||
value: null,
|
||||
matchMode: FilterMatchMode.CONTAINS,
|
||||
},
|
||||
prof: {
|
||||
value: null,
|
||||
matchMode: FilterMatchMode.CONTAINS,
|
||||
}
|
||||
});
|
||||
|
||||
//const selectedModules: Ref<Module[]> = ref([] as Module[]);
|
||||
//const additionalModules: Ref<Map<string, Module>> = ref(new Map());
|
||||
|
||||
fetchedModules().then(
|
||||
(data) =>
|
||||
(modules.value = data.map((module: Module) => {
|
||||
return module;
|
||||
})),
|
||||
);
|
||||
|
||||
async function nextStep() {
|
||||
//selectedModules.value.forEach((module: Module) => {
|
||||
// moduleStore().addModule(module);
|
||||
//});
|
||||
|
||||
await router.push("/rename-modules");
|
||||
}
|
||||
|
||||
const ModuleInformation = defineAsyncComponent(
|
||||
() => import("../components/ModuleInformation.vue"),
|
||||
);
|
||||
|
||||
async function showInfo(module: Module) {
|
||||
await fetchModule(module).then((data) => {
|
||||
module = data;
|
||||
});
|
||||
dialog.open(ModuleInformation, {
|
||||
props: {
|
||||
style: {
|
||||
width: "50vw",
|
||||
},
|
||||
breakpoints: {
|
||||
"960px": "75vw",
|
||||
"640px": "90vw",
|
||||
},
|
||||
modal: true,
|
||||
},
|
||||
data: {
|
||||
module: module,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
const display = (module: Module) => module.name + " (" + module.course + ")";
|
||||
|
||||
const selectAll = ref(false);
|
||||
|
||||
const onSelectAllChange = (event: MultiSelectAllChangeEvent) => {
|
||||
if (event.checked) {
|
||||
additionalModules.value = new Map(
|
||||
modules.value
|
||||
.filter((module: Module) => !store.hasModule(module))
|
||||
.map((module: Module) => [module.uuid, module]),
|
||||
);
|
||||
store.overwriteModules(modules.value);
|
||||
} else {
|
||||
store.overwriteModules(
|
||||
store.getAllModules().filter(
|
||||
(module: Module) => !additionalModules.value.has(module.uuid)
|
||||
)
|
||||
);
|
||||
additionalModules.value.clear();
|
||||
}
|
||||
|
||||
selectAll.value = event.checked;
|
||||
};
|
||||
|
||||
function selectChange(event : MultiSelectChangeEvent) {
|
||||
let wasSelected: boolean = additionalModules.value.has(event.value.uuid);
|
||||
|
||||
if (event.originalEvent.target.) {
|
||||
additionalModules.value.set(event.value.uuid, event.value);
|
||||
} else {
|
||||
additionalModules.value.delete(event.value.uuid);
|
||||
}
|
||||
selectAll.value = store.countModules() === modules.value.length;
|
||||
}
|
||||
|
||||
function itemsLabel(selectedModules: Module[]): string {
|
||||
return (selectedModules ? selectedModules.length : 0) != 1 ? t("additionalModules.modules") : t("additionalModules.module");
|
||||
}
|
||||
|
||||
function itemsLabelWithNumber(selectedModules: Module[]): string {
|
||||
return selectedModules.length.toString() + " " + itemsLabel(selectedModules) + " " + t("additionalModules.dropDownFooterSelected");
|
||||
}
|
||||
*/
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-column">
|
||||
<div class="flex align-items-center justify-content-center h-4rem m-2">
|
||||
<h3>
|
||||
{{ $t("additionalModules.subTitle") }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card flex align-items-center justify-content-center m-2">
|
||||
<DynamicDialog />
|
||||
<DataTable
|
||||
v-model:filters="filters"
|
||||
:value="modules"
|
||||
data-key="uuid"
|
||||
paginator
|
||||
:rows="10"
|
||||
:rows-per-page-options="[5, 10, 20, 50]"
|
||||
paginator-template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink RowsPerPageDropdown"
|
||||
current-page-report-template="{first} to {last} of {totalRecords}"
|
||||
filter-display="row"
|
||||
:loading="!modules.length"
|
||||
loading-icon="pi pi-spinner"
|
||||
:show-gridlines="true"
|
||||
:striped-rows="true"
|
||||
class="w-10"
|
||||
>
|
||||
|
||||
<Column
|
||||
selection-mode="multiple"
|
||||
>
|
||||
</Column>
|
||||
|
||||
<Column
|
||||
field="course"
|
||||
header="Course"
|
||||
:show-clear-button="false"
|
||||
:show-filter-menu="false"
|
||||
>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText
|
||||
v-model="filterModel.value"
|
||||
type="text"
|
||||
class="p-column-filter max-w-10rem"
|
||||
@input="filterCallback()"
|
||||
/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column
|
||||
field="name"
|
||||
header="Name"
|
||||
:show-clear-button="false"
|
||||
:show-filter-menu="false"
|
||||
>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText
|
||||
v-model="filterModel.value"
|
||||
type="text"
|
||||
class="p-column-filter"
|
||||
@input="filterCallback()"
|
||||
/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column
|
||||
field="prof"
|
||||
header="Professor"
|
||||
:show-clear-button="false"
|
||||
:show-filter-menu="false"
|
||||
>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText
|
||||
v-model="filterModel.value"
|
||||
type="text"
|
||||
class="p-column-filter"
|
||||
@input="filterCallback()"
|
||||
/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Info">
|
||||
<template #body="slotProps">
|
||||
<Button
|
||||
icon="pi pi-info"
|
||||
severity="secondary"
|
||||
rounded
|
||||
outlined
|
||||
aria-label="Information"
|
||||
class="small-button"
|
||||
@click.stop="showInfo(slotProps.data)"
|
||||
></Button>
|
||||
</template>
|
||||
|
||||
</Column>
|
||||
<template #footer>
|
||||
<div class="py-2 px-3">
|
||||
<b>{{ store ? store.countModules() : 0 }}</b>
|
||||
item{{
|
||||
(store ? store.countModules() : 0) !== 1 ? "s" : ""
|
||||
}}
|
||||
selected.
|
||||
</div>
|
||||
</template>
|
||||
</DataTable>
|
||||
|
||||
<!--
|
||||
<MultiSelect
|
||||
:model-value="store.getAllModules()"
|
||||
@update:model-value="store.overwriteModules($event.value)"
|
||||
:max-selected-labels="1"
|
||||
:option-label="display"
|
||||
:options="modules"
|
||||
:select-all="selectAll"
|
||||
:virtual-scroller-options="{ itemSize: 70 }"
|
||||
class="custom-multiselect"
|
||||
filter
|
||||
:placeholder="$t('additionalModules.dropDown')"
|
||||
:auto-filter-focus="true"
|
||||
:show-toggle-all="false"
|
||||
@change="selectChange()"
|
||||
placeholder="Select additional modules"
|
||||
@change="selectChange($event)"
|
||||
@selectall-change="onSelectAllChange($event)"
|
||||
:selectedItemsLabel="itemsLabelWithNumber(selectedModules)"
|
||||
>
|
||||
<template #option="slotProps">
|
||||
<div class="flex justify-content-between w-full">
|
||||
<div class="flex align-items-center justify-content-center">
|
||||
<p class="text-1xl white-space-normal p-mb-0">
|
||||
{{ display(slotProps.option) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center ml-2">
|
||||
<Button
|
||||
icon="pi pi-info"
|
||||
severity="secondary"
|
||||
rounded
|
||||
outlined
|
||||
aria-label="Information"
|
||||
class="small-button"
|
||||
@click.stop="showInfo(slotProps.option)"
|
||||
></Button>
|
||||
<DynamicDialog />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="py-2 px-3">
|
||||
<b>{{ selectedModules ? selectedModules.length : 0 }}</b>
|
||||
{{ itemsLabel(selectedModules) }}
|
||||
{{ $t("additionalModules.dropDownFooterSelected") }}
|
||||
</div>
|
||||
</template>
|
||||
</MultiSelect>
|
||||
-->
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center h-4rem m-2">
|
||||
<Button @click="nextStep()">{{
|
||||
$t("additionalModules.nextStep")
|
||||
}}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.custom-multiselect) {
|
||||
width: 50rem;
|
||||
}
|
||||
|
||||
:deep(.custom-multiselect li) {
|
||||
height: unset;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user