93 lines
2.6 KiB
Vue
93 lines
2.6 KiB
Vue
<script lang="ts" setup>
|
|
import type { DashboardDueDate } from "@/services/dashboard";
|
|
import dayjs from "dayjs";
|
|
import { useTranslation } from "i18next-vue";
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps<{
|
|
dueDate: DashboardDueDate;
|
|
singleLine?: boolean;
|
|
}>();
|
|
|
|
const { t } = useTranslation();
|
|
const dateType = t(props.dueDate.date_type_translation_key);
|
|
const assignmentType = t(props.dueDate.assignment_type_translation_key);
|
|
|
|
const urlText = computed(() => {
|
|
let result = "";
|
|
if (dateType) {
|
|
result += dateType;
|
|
}
|
|
|
|
if (assignmentType && !props.dueDate.title.startsWith(assignmentType)) {
|
|
result += " " + assignmentType;
|
|
}
|
|
|
|
if (props.dueDate.title) {
|
|
result += " " + props.dueDate.title;
|
|
}
|
|
|
|
return result.trim();
|
|
});
|
|
|
|
const showAsUrl = computed(() => {
|
|
return ["SUPERVISOR", "EXPERT", "MEMBER"].includes(
|
|
props.dueDate.course_session.my_role
|
|
);
|
|
});
|
|
|
|
const url = computed(() => {
|
|
if (["SUPERVISOR", "EXPERT"].includes(props.dueDate.course_session.my_role)) {
|
|
return props.dueDate.url_expert;
|
|
}
|
|
return props.dueDate.url;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex justify-between py-4"
|
|
:class="{ 'flex-col': props.singleLine, 'items-center': !props.singleLine }"
|
|
>
|
|
<div class="space-y-1">
|
|
<div>
|
|
<a v-if="showAsUrl" :href="url">
|
|
<span class="text-bold text-gray-900">
|
|
{{ dayjs(props.dueDate.start).format("dddd D. MMMM YYYY") }}
|
|
</span>
|
|
</a>
|
|
<span v-else class="text-bold text-gray-900">
|
|
{{ dayjs(props.dueDate.start).format("dddd D. MMMM YYYY") }}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<a v-if="showAsUrl" class="underline" :href="url">
|
|
<span class="text-bold">
|
|
{{ urlText }}
|
|
</span>
|
|
</a>
|
|
<span v-else class="text-bold">
|
|
{{ urlText }}
|
|
</span>
|
|
</div>
|
|
<div class="text-small text-gray-900">
|
|
<div>
|
|
<span v-if="props.dueDate.course_session.is_uk">
|
|
{{ props.dueDate.course_session.session_title }}:
|
|
</span>
|
|
{{ $t("a.Circle") }} «{{ props.dueDate.circle?.title }}»
|
|
</div>
|
|
</div>
|
|
<div v-if="props.dueDate.persons?.length" class="flex gap-2">
|
|
<div v-for="person in props.dueDate.persons" :key="person.user_id">
|
|
<img
|
|
class="inline-block h-11 w-11 rounded-full"
|
|
:src="person.avatar_url_small || '/static/avatars/myvbv-default-avatar.png'"
|
|
:alt="`${person.first_name} ${person.last_name}`"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|