59 lines
1.7 KiB
Vue
59 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
import type { RouteLocationRaw } from "vue-router";
|
|
|
|
const props = defineProps<{
|
|
taskTitle: string;
|
|
circleTitle: string;
|
|
pendingTasks: number;
|
|
pendingTasksLabel: string;
|
|
taskLink: RouteLocationRaw;
|
|
taskLinkLabel: string;
|
|
taskLinkPendingLabel: string;
|
|
}>();
|
|
|
|
const linkLabel = computed(() => {
|
|
if (!props.taskLinkPendingLabel) {
|
|
return props.taskLinkLabel;
|
|
}
|
|
return props.pendingTasks > 0 ? props.taskLinkPendingLabel : props.taskLinkLabel;
|
|
});
|
|
|
|
const hasPendingTasks = computed(() => props.pendingTasks > 0);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex flex-col items-start justify-between gap-4 border-b py-2 pl-5 pr-5 last:border-b-0 md:flex-row md:items-center md:justify-between md:gap-16"
|
|
>
|
|
<div
|
|
class="flex flex-grow flex-row flex-wrap items-center justify-start space-y-4 sm:space-y-0"
|
|
>
|
|
<div class="w-80">
|
|
<div class="font-bold">{{ taskTitle }}</div>
|
|
<div class="text-small text-gray-900">
|
|
{{ $t("a.Circle") }} «{{ circleTitle }}»
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex flex-grow flex-row items-center justify-start space-x-2 sm:pl-20"
|
|
>
|
|
<template v-if="hasPendingTasks">
|
|
<div
|
|
class="flex h-7 w-7 items-center justify-center rounded-full border-2 border-green-500 px-3 py-1 text-sm font-bold"
|
|
>
|
|
<span>{{ pendingTasks }}</span>
|
|
</div>
|
|
<span>{{ pendingTasksLabel }}</span>
|
|
</template>
|
|
</div>
|
|
<router-link
|
|
:class="[hasPendingTasks ? 'btn-primary' : 'underline']"
|
|
:to="taskLink"
|
|
>
|
|
{{ linkLabel }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</template>
|