21 add reminder booleans, map uuid to module

This commit is contained in:
survellow
2023-11-01 19:14:48 +01:00
parent 4e23903b31
commit 8c563e5366
8 changed files with 160 additions and 38 deletions

View File

@@ -17,6 +17,7 @@ const tableData = ref(
const columns = ref([
{ field: "Course", header: "Course" },
{ field: "Module", header: "Module" },
{ field: "Reminder", header: "Reminder"}
]);
const helpVisible: Ref<boolean> = ref(false);
@@ -36,7 +37,7 @@ async function finalStep() {
<template>
<div class="flex flex-column">
<div class="flex align-items-center justify-content-center h-4rem m-2">
<h3>Rename your selected Modules to your liking.</h3>
<h3>Configure your selected Modules to your liking.</h3>
<i class="shadow-3 hover:shadow-8 pi pi-info-circle m-2" style="font-size: 1.5rem; color: orange" @click="helpVisible = true"></i>
<Dialog
v-model:visible="helpVisible"
@@ -65,30 +66,68 @@ async function finalStep() {
table-class="editable-cells-table"
responsive-layout="scroll"
>
<template #header>
<div class="flex align-items-center justify-content-end">
Enable all notifications:
<InputSwitch
class="mx-4"
:model-value="tableData.reduce((acc, curr) => acc && curr.Module.reminder, true)"
@update:model-value="tableData.forEach((module) => module.Module.reminder = $event)"
/>
</div>
</template>
<Column
v-for="col of columns"
:key="col.field"
:field="col.field"
:header="col.header"
:class="col.field === 'Reminder' ? 'text-center' : ''"
>
<!-- Text Body -->
<template #body="{ data, field }">
<div>
{{
field === "Module" ? data[field].userDefinedName : data[field]
}}
</div>
</template>
<template #editor="{ data, field }">
<template v-if="field !== 'Module'">
<div>{{ data[field] }}</div>
<template v-if="field === 'Module'">
{{ data[field].userDefinedName }}
</template>
<template v-else-if="field === 'Reminder'" class="align-content-center">
<Button
:icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
:severity="data.Module.reminder ? 'warning' : 'secondary'"
rounded
outlined
class="small-button"
@click = "data.Module.reminder = !data.Module.reminder"
></Button>
</template>
<template v-else>
{{ data[field] }}
</template>
</template>
<!-- Editor Body -->
<template #editor="{ data, field }">
<template v-if="field === 'Module'">
<InputText
v-model="data[field].userDefinedName"
class="w-full"
autofocus
/>
</template>
<template v-else-if="field === 'Reminder'">
<!--<InputSwitch
v-model="data.Module.reminder"
class="align-self-center"
/>-->
<Button
:icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
:severity="data.Module.reminder ? 'warning' : 'secondary'"
rounded
outlined
class="small-button"
@click = "data.Module.reminder = !data.Module.reminder"
></Button>
</template>
<template v-else>
<div>{{ data[field] }}</div>
</template>
</template>
</Column>
</DataTable>
@@ -100,4 +139,10 @@ async function finalStep() {
</div>
</template>
<style scoped></style>
<style scoped>
.small-button.p-button {
width: 2rem;
height: 2rem;
padding: 0;
}
</style>