Add new DashboardAsideWidget
This commit is contained in:
Daniel Egger
parent
102196a290
commit
905d7a5290
|
|
@ -0,0 +1,37 @@
|
|||
<script lang="ts" setup>
|
||||
import { useTranslation } from "i18next-vue";
|
||||
import type { DashboardDueDate } from "@/services/dashboard";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const props = defineProps<{
|
||||
dueDate: DashboardDueDate;
|
||||
}>();
|
||||
|
||||
const { t } = useTranslation();
|
||||
const dateType = t(props.dueDate.date_type_translation_key);
|
||||
const assignmentType = t(props.dueDate.assignment_type_translation_key);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article class="my-4">
|
||||
<div class="text-bold text-gray-900">
|
||||
{{ dayjs(props.dueDate.start).format("dd. DD. MMMM YYYY") }}
|
||||
</div>
|
||||
|
||||
<div v-if="dateType" class="text-bold">
|
||||
{{ dateType }}
|
||||
<span v-if="assignmentType && !props.dueDate.title.startsWith(assignmentType)">
|
||||
{{ assignmentType }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="props.dueDate.title">
|
||||
{{ props.dueDate.title }}
|
||||
</div>
|
||||
|
||||
<div v-if="props.dueDate.course_session.is_uk" class="text-gray-900">
|
||||
{{ props.dueDate.course_session.session_title }}
|
||||
{{ props.dueDate.circle?.title ?? "" }}
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<script setup lang="ts">
|
||||
import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
|
||||
import log from "loglevel";
|
||||
import { useDashboardPersons } from "@/composables";
|
||||
import { computed } from "vue";
|
||||
import _ from "lodash";
|
||||
import DashboardAsideDueDate from "@/pages/dashboard/DashboardAsideDueDate.vue";
|
||||
|
||||
log.debug("DashboardAsideWidget created");
|
||||
|
||||
const { loading, dashboardPersons, dashboardDueDates } = useDashboardPersons();
|
||||
|
||||
const displayDueDates = computed(() => {
|
||||
return _.take(dashboardDueDates.value, 6);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="loading" class="m-8 flex justify-center">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
<div v-else>
|
||||
<section class="border-b p-8">
|
||||
<h3 class="mb-4">{{ dashboardPersons.length }} {{ $t("a.Personen") }}</h3>
|
||||
<div>
|
||||
<router-link class="btn-secondary" to="/dashboard/persons">
|
||||
{{ $t("a.Alle Personen anzeigen") }}
|
||||
</router-link>
|
||||
</div>
|
||||
</section>
|
||||
<section class="p-8">
|
||||
<h3>{{ $t("a.Termine") }}</h3>
|
||||
|
||||
<div v-for="dueDate in displayDueDates" :key="dueDate.id">
|
||||
<div class="border-b">
|
||||
<DashboardAsideDueDate :due-date="dueDate" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<router-link class="btn-secondary mt-4" to="/dashboard/due-dates">
|
||||
{{ $t("a.Alle Termine anzeigen") }}
|
||||
</router-link>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -178,6 +178,16 @@ watch(selectedCourse, async () => {
|
|||
</div>
|
||||
<div v-else class="bg-gray-200">
|
||||
<div class="container-large">
|
||||
<router-link
|
||||
:to="`/`"
|
||||
class="btn-text inline-flex items-center p-0"
|
||||
data-cy="back-to-learning-path-button"
|
||||
>
|
||||
<it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
|
||||
<span class="inline">{{ $t("general.back") }}</span>
|
||||
</router-link>
|
||||
|
||||
<h2 class="my-4">{{ $t("a.Termine") }}</h2>
|
||||
<div class="bg-white px-4 py-2">
|
||||
<section
|
||||
v-if="filtersVisible"
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import CourseDetailDates from "@/components/dashboard/CourseDetailDates.vue";
|
|||
import NoCourseSession from "@/components/dashboard/NoCourseSession.vue";
|
||||
import MentorPage from "@/pages/dashboard/MentorPage.vue";
|
||||
import CoursePanel from "@/components/dashboard/CoursePanel.vue";
|
||||
import DashboardAsideWidget from "@/pages/dashboard/DashboardAsideWidget.vue";
|
||||
|
||||
const dashboardStore = useDashboardStore();
|
||||
|
||||
|
|
@ -86,10 +87,8 @@ function newDashboardConfigForId(id: string): DashboardCourseConfigType | undefi
|
|||
<!-- end of old way of dashboard -->
|
||||
</div>
|
||||
</main>
|
||||
<aside class="m-8 lg:order-1 lg:w-[343px]">
|
||||
<component
|
||||
:is="boards[dashboardStore.currentDashboardConfig.dashboard_type].aside"
|
||||
></component>
|
||||
<aside class="lg:order-2 lg:w-[384px] xl:w-[512px]">
|
||||
<DashboardAsideWidget />
|
||||
</aside>
|
||||
</div>
|
||||
<NoCourseSession v-else class="container-medium mt-14" />
|
||||
|
|
|
|||
|
|
@ -122,6 +122,15 @@ watch(selectedCourse, () => {
|
|||
</div>
|
||||
<div v-else class="bg-gray-200">
|
||||
<div class="container-large">
|
||||
<router-link
|
||||
:to="`/`"
|
||||
class="btn-text inline-flex items-center p-0"
|
||||
data-cy="back-to-learning-path-button"
|
||||
>
|
||||
<it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
|
||||
<span class="inline">{{ $t("general.back") }}</span>
|
||||
</router-link>
|
||||
<h2 class="my-4">{{ $t("a.Personen") }}</h2>
|
||||
<div class="bg-white px-4 py-2">
|
||||
<section
|
||||
v-if="filtersVisible"
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ const changeViewType = (viewType: ViewType) => {
|
|||
<!-- Right -->
|
||||
<div v-if="!useMobileLayout" class="flex-grow">
|
||||
<div class="text-bold pb-3">
|
||||
{{ $t("learningPathPage.nextDueDates") }}
|
||||
{{ $t("a.Nächste Termine") }}
|
||||
</div>
|
||||
<DueDatesShortList :max-count="2" :show-top-border="true"></DueDatesShortList>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ const router = createRouter({
|
|||
component: () => import("@/pages/dashboard/DashboardPersonsPage.vue"),
|
||||
},
|
||||
{
|
||||
path: "/dashboard/duedates",
|
||||
path: "/dashboard/due-dates",
|
||||
component: () => import("@/pages/dashboard/DashboardDueDatesPage.vue"),
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue