ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Weekday to long list

This commit is contained in:
Lorenz Padberg 2023-06-19 17:36:29 +02:00
parent ffefa520e1
commit e631cc4d13
3 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/components/dueDates/DueDatesLongList.vue
View File

@ -7,7 +7,9 @@
class="flex flex-row border-b py-4" class="flex flex-row border-b py-4"
> >
<p class="text-bold w-60">{{ dueDate.title }}</p> <p class="text-bold w-60">{{ dueDate.title }}</p>
<p class="grow">{{ formatDate(dueDate.start, dueDate.end) }}</p> <p class="grow">
{{ getWeekday(dueDate.end) }}, {{ formatDate(dueDate.start, dueDate.end) }}
</p>
<p class="underline"> <p class="underline">
<a :href="dueDate.url" target="_blank">Details anschauen</a> <a :href="dueDate.url" target="_blank">Details anschauen</a>
</p> </p>
@ -18,7 +20,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { formatDate } from "@/components/dueDates/dueDatesUtils"; import { formatDate, getWeekday } from "@/components/dueDates/dueDatesUtils";
import type { DueDate } from "@/types"; import type { DueDate } from "@/types";
const props = defineProps<{ const props = defineProps<{

20
client/src/components/dueDates/DueDatesShortList.vue
View File

@ -1,11 +1,15 @@
<template> <template>
<div class="w-64"> <div class="w-64">
<ul v-if="dueDates.length != 0"> <div v-if="allDueDates.length != 0">
<li v-for="dueDate in dueDates" :key="dueDate.id"> <ul>
<SingleDueDate :due-date="dueDate"></SingleDueDate> <li v-for="dueDate in dueDatesDiplayed" :key="dueDate.id">
</li> <SingleDueDate :due-date="dueDate"></SingleDueDate>
</ul> </li>
<div v-else>Keine Termine Termine Vorhanden</div> </ul>
<a v-if="allDueDates.length > props.maxCount" href="">Alle Termine anzeigen</a>
</div>
<div v-else>Keine Termine Vorhanden</div>
</div> </div>
</template> </template>
@ -19,6 +23,6 @@ const props = defineProps<{
}>(); }>();
const courseSession = useCurrentCourseSession(); const courseSession = useCurrentCourseSession();
const allDueDates = courseSession.value.duedates;
const dueDates = courseSession.value.duedates.slice(0, props.maxCount); const dueDatesDiplayed = allDueDates.slice(0, props.maxCount);
</script> </script>

4
client/src/components/dueDates/dueDatesUtils.ts
View File

@ -20,3 +20,7 @@ const getTimeString = (date: Dayjs) => {
const getDateString = (date: Dayjs) => { const getDateString = (date: Dayjs) => {
return `${date.format("DD MMM YYYY")}`; return `${date.format("DD MMM YYYY")}`;
}; };
export const getWeekday = (date: Dayjs) => {
return `${date.format("dd")}`;
};