mirror of
https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git
synced 2025-08-04 02:39:14 +02:00
115 refactor AdditionalModuleTable and add when editing
This commit is contained in:
survellow
200
frontend/src/components/AdditionalModuleTable.vue
Normal file
200
frontend/src/components/AdditionalModuleTable.vue
Normal file
@@ -0,0 +1,200 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { defineAsyncComponent, inject, ref, Ref} from "vue";
|
||||||
|
import { Module } from "../model/module.ts";
|
||||||
|
import { fetchAllModules } from "../api/fetchCourse.ts";
|
||||||
|
import moduleStore from "../store/moduleStore.ts";
|
||||||
|
import { FilterMatchMode } from "primevue/api";
|
||||||
|
import { DataTableRowSelectEvent, DataTableRowUnselectEvent } from "primevue/datatable";
|
||||||
|
import { useDialog } from "primevue/usedialog";
|
||||||
|
import router from "../router";
|
||||||
|
import { fetchModule } from "../api/fetchModule.ts";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
|
||||||
|
const dialog = useDialog();
|
||||||
|
const { t } = useI18n({ useScope: "global" });
|
||||||
|
|
||||||
|
const fetchedModules = async () => {
|
||||||
|
return await fetchAllModules();
|
||||||
|
};
|
||||||
|
|
||||||
|
const store = moduleStore();
|
||||||
|
if (store.isEmpty()) {
|
||||||
|
router.replace("/");
|
||||||
|
}
|
||||||
|
|
||||||
|
const mobilePage = inject("mobilePage") as Ref<boolean>;
|
||||||
|
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,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
fetchedModules().then(
|
||||||
|
(data) =>
|
||||||
|
(modules.value = data.map((module: Module) => {
|
||||||
|
return module;
|
||||||
|
})),
|
||||||
|
);
|
||||||
|
|
||||||
|
const ModuleInformation = defineAsyncComponent(
|
||||||
|
() => import("./ModuleInformation.vue"),
|
||||||
|
);
|
||||||
|
|
||||||
|
async function showInfo(module: Module) {
|
||||||
|
await fetchModule(module).then((data) => {
|
||||||
|
module = data;
|
||||||
|
});
|
||||||
|
dialog.open(ModuleInformation, {
|
||||||
|
class: "w-full m-0",
|
||||||
|
props: {
|
||||||
|
style: {
|
||||||
|
width: "80vw",
|
||||||
|
},
|
||||||
|
breakpoints: {
|
||||||
|
"992px": "100vw",
|
||||||
|
"640px": "100vw",
|
||||||
|
},
|
||||||
|
modal: true,
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
module: module,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectModule(event: DataTableRowSelectEvent) {
|
||||||
|
store.addModule(event.data);
|
||||||
|
}
|
||||||
|
|
||||||
|
function unselectModule(event: DataTableRowUnselectEvent) {
|
||||||
|
store.removeModule(event.data);
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="m-2 lg:w-10 w-full">
|
||||||
|
<DynamicDialog />
|
||||||
|
<DataTable
|
||||||
|
id="dt-responsive-table"
|
||||||
|
v-model:filters="filters"
|
||||||
|
:selection="store.getAllModules()"
|
||||||
|
: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="
|
||||||
|
$t('additionalModules.paginator.from') +
|
||||||
|
'{first}' +
|
||||||
|
$t('additionalModules.paginator.to') +
|
||||||
|
'{last}' +
|
||||||
|
$t('additionalModules.paginator.of') +
|
||||||
|
'{totalRecords}'
|
||||||
|
"
|
||||||
|
filter-display="row"
|
||||||
|
:loading="!modules.length"
|
||||||
|
loading-icon="pi pi-spinner"
|
||||||
|
:show-gridlines="true"
|
||||||
|
:striped-rows="true"
|
||||||
|
:select-all="false"
|
||||||
|
:size="mobilePage ? 'small' : 'large'"
|
||||||
|
@row-select="selectModule"
|
||||||
|
@row-unselect="unselectModule"
|
||||||
|
>
|
||||||
|
<Column selection-mode="multiple">
|
||||||
|
</Column>
|
||||||
|
|
||||||
|
<Column
|
||||||
|
field="course"
|
||||||
|
:header="$t('additionalModules.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="$t('additionalModules.module')"
|
||||||
|
: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="$t('additionalModules.professor')"
|
||||||
|
:show-clear-button="false"
|
||||||
|
:show-filter-menu="false"
|
||||||
|
>
|
||||||
|
</Column>
|
||||||
|
<Column
|
||||||
|
:header="$t('additionalModules.info')"
|
||||||
|
>
|
||||||
|
<template #body="slotProps">
|
||||||
|
<Button
|
||||||
|
icon="pi pi-info"
|
||||||
|
severity="secondary"
|
||||||
|
rounded
|
||||||
|
outlined
|
||||||
|
:aria-label="$t('additionalModules.info-long')"
|
||||||
|
class="small-button"
|
||||||
|
@click.stop="showInfo(slotProps.data)"
|
||||||
|
></Button>
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
|
<template #footer>
|
||||||
|
<div class="py-2 px-3">
|
||||||
|
{{
|
||||||
|
t('additionalModules.footerModulesSelected', { count: store?.countModules() ?? 0 })
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</DataTable>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
:deep(.custom-multiselect) {
|
||||||
|
width: 50rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.custom-multiselect li) {
|
||||||
|
height: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-button.p-button {
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.p-filter-column .p-checkbox .p-component) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,152 +0,0 @@
|
|||||||
<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";
|
|
||||||
import { MultiSelectAllChangeEvent } from "primevue/multiselect";
|
|
||||||
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 modules: Ref<Module[]> = ref([]);
|
|
||||||
|
|
||||||
const selectedModules: Ref<Module[]> = ref([] as Module[]);
|
|
||||||
|
|
||||||
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("/edit-calendar");
|
|
||||||
}
|
|
||||||
|
|
||||||
const ModuleInformation = defineAsyncComponent(
|
|
||||||
() => import("../ModuleInformation.vue"),
|
|
||||||
);
|
|
||||||
|
|
||||||
async function showInfo(module: Module) {
|
|
||||||
await fetchModule(module).then((data: Module) => {
|
|
||||||
dialog.open(ModuleInformation, {
|
|
||||||
props: {
|
|
||||||
style: {
|
|
||||||
width: "50vw",
|
|
||||||
},
|
|
||||||
breakpoints: {
|
|
||||||
"960px": "75vw",
|
|
||||||
"640px": "90vw",
|
|
||||||
},
|
|
||||||
modal: true,
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
module: data,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const display = (module: Module) => module.name + " (" + module.course + ")";
|
|
||||||
|
|
||||||
const selectAll = ref(false);
|
|
||||||
|
|
||||||
const onSelectAllChange = (event: MultiSelectAllChangeEvent) => {
|
|
||||||
selectedModules.value = event.checked
|
|
||||||
? modules.value.map((module) => module)
|
|
||||||
: [];
|
|
||||||
selectAll.value = event.checked;
|
|
||||||
};
|
|
||||||
|
|
||||||
function selectChange() {
|
|
||||||
selectAll.value = selectedModules.value.length === modules.value.length;
|
|
||||||
}
|
|
||||||
</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">
|
|
||||||
<MultiSelect
|
|
||||||
v-model="selectedModules"
|
|
||||||
: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"
|
|
||||||
:selected-items-label="$t('additionalModules.footerModulesSelected', { count: selectedModules.length ?? 0 })"
|
|
||||||
@change="selectChange()"
|
|
||||||
@selectall-change="onSelectAllChange($event)"
|
|
||||||
>
|
|
||||||
<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
|
|
||||||
class="small-button"
|
|
||||||
icon="pi pi-info"
|
|
||||||
severity="secondary"
|
|
||||||
rounded
|
|
||||||
outlined
|
|
||||||
aria-label="Information"
|
|
||||||
@click.stop="showInfo(slotProps.option)"
|
|
||||||
></Button>
|
|
||||||
<DynamicDialog />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #footer>
|
|
||||||
<div class="py-2 px-3">
|
|
||||||
{{ t('additionalModules.footerModulesSelected', { count: selectedModules.length ?? 0 }) }}
|
|
||||||
</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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-button.p-button {
|
|
||||||
width: 2rem;
|
|
||||||
height: 2rem;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -8,8 +8,8 @@ const PrivacyPolicy = () => import("../view/PrivacyPolicy.vue");
|
|||||||
const RenameModules = () => import("../components/RenameModules.vue");
|
const RenameModules = () => import("../components/RenameModules.vue");
|
||||||
const RoomFinder = () => import("../view/RoomFinder.vue");
|
const RoomFinder = () => import("../view/RoomFinder.vue");
|
||||||
const EditCalendarView = () => import("../view/EditCalendarView.vue");
|
const EditCalendarView = () => import("../view/EditCalendarView.vue");
|
||||||
const EditAdditionalModules = () => import("../components/editCalendar/EditAdditionalModules.vue");
|
const EditAdditionalModules = () => import("../view/editCalendar/EditAdditionalModules.vue");
|
||||||
const EditModules = () => import("../components/editCalendar/EditModules.vue");
|
const EditModules = () => import("../view/editCalendar/EditModules.vue");
|
||||||
const CourseSelection = () => import("../view/CourseSelection.vue");
|
const CourseSelection = () => import("../view/CourseSelection.vue");
|
||||||
|
|
||||||
import i18n from "../i18n";
|
import i18n from "../i18n";
|
||||||
|
|||||||
@@ -1,89 +1,16 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { defineAsyncComponent, inject, ref, Ref} from "vue";
|
import { defineAsyncComponent } from 'vue';
|
||||||
import { Module } from "../model/module.ts";
|
import moduleStore from '../store/moduleStore';
|
||||||
import { fetchAllModules } from "../api/fetchCourse.ts";
|
import router from '../router';
|
||||||
import moduleStore from "../store/moduleStore.ts";
|
|
||||||
import { FilterMatchMode } from "primevue/api";
|
|
||||||
import { DataTableRowSelectEvent, DataTableRowUnselectEvent } from "primevue/datatable";
|
|
||||||
import { useDialog } from "primevue/usedialog";
|
|
||||||
import router from "../router";
|
|
||||||
import { fetchModule } from "../api/fetchModule.ts";
|
|
||||||
import { useI18n } from "vue-i18n";
|
|
||||||
|
|
||||||
const dialog = useDialog();
|
|
||||||
const { t } = useI18n({ useScope: "global" });
|
|
||||||
|
|
||||||
const fetchedModules = async () => {
|
|
||||||
return await fetchAllModules();
|
|
||||||
};
|
|
||||||
|
|
||||||
const store = moduleStore();
|
const store = moduleStore();
|
||||||
if (store.isEmpty()) {
|
const AdditionalModuleTable = defineAsyncComponent(
|
||||||
router.replace("/");
|
() => import("../components/AdditionalModuleTable.vue"),
|
||||||
}
|
|
||||||
|
|
||||||
const mobilePage = inject("mobilePage") as Ref<boolean>;
|
|
||||||
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,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
fetchedModules().then(
|
|
||||||
(data) =>
|
|
||||||
(modules.value = data.map((module: Module) => {
|
|
||||||
return module;
|
|
||||||
})),
|
|
||||||
);
|
);
|
||||||
|
|
||||||
async function nextStep() {
|
async function nextStep() {
|
||||||
await router.push("/rename-modules");
|
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, {
|
|
||||||
class: "w-full m-0",
|
|
||||||
props: {
|
|
||||||
style: {
|
|
||||||
width: "80vw",
|
|
||||||
},
|
|
||||||
breakpoints: {
|
|
||||||
"992px": "100vw",
|
|
||||||
"640px": "100vw",
|
|
||||||
},
|
|
||||||
modal: true,
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
module: module,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function selectModule(event: DataTableRowSelectEvent) {
|
|
||||||
store.addModule(event.data);
|
|
||||||
}
|
|
||||||
|
|
||||||
function unselectModule(event: DataTableRowUnselectEvent) {
|
|
||||||
store.removeModule(event.data);
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -93,100 +20,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
|
|||||||
{{ $t("additionalModules.subTitle") }}
|
{{ $t("additionalModules.subTitle") }}
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="m-2 lg:w-10 w-full">
|
<AdditionalModuleTable />
|
||||||
<DynamicDialog />
|
|
||||||
<DataTable
|
|
||||||
id="dt-responsive-table"
|
|
||||||
v-model:filters="filters"
|
|
||||||
:selection="store.getAllModules()"
|
|
||||||
: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="
|
|
||||||
$t('additionalModules.paginator.from') +
|
|
||||||
'{first}' +
|
|
||||||
$t('additionalModules.paginator.to') +
|
|
||||||
'{last}' +
|
|
||||||
$t('additionalModules.paginator.of') +
|
|
||||||
'{totalRecords}'
|
|
||||||
"
|
|
||||||
filter-display="row"
|
|
||||||
:loading="!modules.length"
|
|
||||||
loading-icon="pi pi-spinner"
|
|
||||||
:show-gridlines="true"
|
|
||||||
:striped-rows="true"
|
|
||||||
:select-all="false"
|
|
||||||
:size="mobilePage ? 'small' : 'large'"
|
|
||||||
@row-select="selectModule"
|
|
||||||
@row-unselect="unselectModule"
|
|
||||||
>
|
|
||||||
<Column selection-mode="multiple">
|
|
||||||
</Column>
|
|
||||||
|
|
||||||
<Column
|
|
||||||
field="course"
|
|
||||||
:header="$t('additionalModules.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="$t('additionalModules.module')"
|
|
||||||
: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="$t('additionalModules.professor')"
|
|
||||||
:show-clear-button="false"
|
|
||||||
:show-filter-menu="false"
|
|
||||||
>
|
|
||||||
</Column>
|
|
||||||
<Column
|
|
||||||
:header="$t('additionalModules.info')"
|
|
||||||
>
|
|
||||||
<template #body="slotProps">
|
|
||||||
<Button
|
|
||||||
icon="pi pi-info"
|
|
||||||
severity="secondary"
|
|
||||||
rounded
|
|
||||||
outlined
|
|
||||||
:aria-label="$t('additionalModules.info-long')"
|
|
||||||
class="small-button"
|
|
||||||
@click.stop="showInfo(slotProps.data)"
|
|
||||||
></Button>
|
|
||||||
</template>
|
|
||||||
</Column>
|
|
||||||
<template #footer>
|
|
||||||
<div class="py-2 px-3">
|
|
||||||
{{
|
|
||||||
t('additionalModules.footerModulesSelected', { count: store?.countModules() ?? 0 })
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</DataTable>
|
|
||||||
</div>
|
|
||||||
<div class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10">
|
<div class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10">
|
||||||
<Button
|
<Button
|
||||||
:disabled="store.isEmpty()"
|
:disabled="store.isEmpty()"
|
||||||
@@ -198,23 +32,3 @@ function unselectModule(event: DataTableRowUnselectEvent) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
:deep(.custom-multiselect) {
|
|
||||||
width: 50rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.custom-multiselect li) {
|
|
||||||
height: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-button.p-button {
|
|
||||||
width: 2rem;
|
|
||||||
height: 2rem;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.p-filter-column .p-checkbox .p-component) {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
34
frontend/src/view/editCalendar/EditAdditionalModules.vue
Normal file
34
frontend/src/view/editCalendar/EditAdditionalModules.vue
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { defineAsyncComponent } from "vue";
|
||||||
|
import moduleStore from "../../store/moduleStore";
|
||||||
|
import router from "../../router";
|
||||||
|
|
||||||
|
const store = moduleStore();
|
||||||
|
const AdditionalModuleTable = defineAsyncComponent(
|
||||||
|
() => import("../../components/AdditionalModuleTable.vue"),
|
||||||
|
);
|
||||||
|
|
||||||
|
async function nextStep() {
|
||||||
|
await router.push("/edit-calendar");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex flex-column align-items-center w-full mb-7">
|
||||||
|
<div class="flex align-items-center justify-content-center m-2">
|
||||||
|
<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">
|
||||||
|
<Button
|
||||||
|
:disabled="store.isEmpty()"
|
||||||
|
@click="nextStep()"
|
||||||
|
class="col-12 md:col-4 mb-3 align-self-end"
|
||||||
|
icon="pi pi-arrow-right"
|
||||||
|
:label="$t('additionalModules.nextStep')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -6,7 +6,7 @@ import { fetchAllModules } from "../../api/fetchCourse.ts";
|
|||||||
import {deleteIndividualFeed, saveIndividualFeed} from "../../api/createFeed.ts";
|
import {deleteIndividualFeed, saveIndividualFeed} from "../../api/createFeed.ts";
|
||||||
import tokenStore from "../../store/tokenStore";
|
import tokenStore from "../../store/tokenStore";
|
||||||
import router from "../../router";
|
import router from "../../router";
|
||||||
import ModuleTemplateDialog from "../ModuleTemplateDialog.vue";
|
import ModuleTemplateDialog from "../../components/ModuleTemplateDialog.vue";
|
||||||
import { onlyWhitespace } from "../../helpers/strings.ts";
|
import { onlyWhitespace } from "../../helpers/strings.ts";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { useToast } from "primevue/usetoast";
|
import { useToast } from "primevue/usetoast";
|
||||||
Reference in New Issue
Block a user