109 lines
3.4 KiB
Vue
109 lines
3.4 KiB
Vue
<script setup>
|
|
import { computed, onMounted } from "vue";
|
|
import { Link } from "@inertiajs/vue3";
|
|
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
|
import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/Components/ui/card";
|
|
import Badge from "@/Components/ui/badge/Badge.vue";
|
|
import AppCard from "@/Components/app/ui/card/AppCard.vue";
|
|
import {
|
|
Item,
|
|
ItemActions,
|
|
ItemContent,
|
|
ItemDescription,
|
|
ItemMedia,
|
|
ItemTitle,
|
|
} from "@/Components/ui/item";
|
|
import { BadgeCheckIcon, ChevronRightIcon, Radar, Radio, RssIcon } from "lucide-vue-next";
|
|
import { ScrollArea } from "@/Components/ui/scroll-area";
|
|
|
|
const props = defineProps({
|
|
activities: Array,
|
|
systemHealth: Object,
|
|
});
|
|
|
|
function buildRelated(a) {
|
|
const links = [];
|
|
if (a.client_case_uuid || a.client_case_id) {
|
|
const caseParam = a.client_case_uuid || a.client_case_id;
|
|
try {
|
|
const href = String(route("clientCase.show", { client_case: caseParam }));
|
|
links.push({
|
|
type: "client_case",
|
|
label: "Primer",
|
|
href,
|
|
});
|
|
} catch (e) {
|
|
links.push({
|
|
type: "client_case",
|
|
label: "Primer",
|
|
href: `/client-cases/${caseParam}`,
|
|
});
|
|
}
|
|
}
|
|
return links;
|
|
}
|
|
|
|
onMounted(() => {
|
|
console.log((props.activities || []).map((a) => ({ ...a, links: buildRelated(a) })));
|
|
});
|
|
|
|
const activityItems = computed(() =>
|
|
(props.activities || []).map((a) => ({ ...a, links: buildRelated(a) }))
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<AppCard
|
|
title=""
|
|
padding="none"
|
|
class="p-0! gap-2"
|
|
header-class="py-3! px-4 border-b text-muted-foreground gap-0"
|
|
body-class="flex flex-col gap-4"
|
|
>
|
|
<template #header>
|
|
<div class="flex items-center gap-2">
|
|
<Radio size="20" />
|
|
<CardTitle class="uppercase"> Aktivnost </CardTitle>
|
|
</div>
|
|
</template>
|
|
<ScrollArea class="h-96 w-full">
|
|
<div class="flex flex-col gap-1 px-1" v-if="activities">
|
|
<Item v-for="a in activityItems" :key="a.id" variant="outline" size="sm" as-child>
|
|
<a :href="a.links[0].href ?? ''">
|
|
<ItemMedia>
|
|
<span class="w-2 h-2 mt-2 rounded-full bg-primary" />
|
|
</ItemMedia>
|
|
<ItemContent>
|
|
<ItemTitle>{{ a.note || "Dogodek" }}</ItemTitle>
|
|
<ItemDescription>
|
|
{{ new Date(a.created_at).toLocaleString() }}
|
|
</ItemDescription>
|
|
</ItemContent>
|
|
<ItemActions>
|
|
<ChevronRightIcon class="size-4" />
|
|
</ItemActions>
|
|
</a>
|
|
</Item>
|
|
<div v-if="!activities?.length" class="py-4 text-xs text-gray-500 text-center">
|
|
Ni zabeleženih aktivnosti.
|
|
</div>
|
|
</div>
|
|
<ul v-else class="animate-pulse space-y-2">
|
|
<li v-for="n in 5" :key="n" class="h-5 bg-gray-100 rounded" />
|
|
</ul>
|
|
</ScrollArea>
|
|
|
|
<div class="flex justify-between items-center text-[11px] p-2">
|
|
<Link
|
|
:href="route('dashboard')"
|
|
class="inline-flex items-center gap-1 font-medium text-primary hover:underline"
|
|
>Več kmalu <FontAwesomeIcon :icon="faArrowUpRightFromSquare" class="w-3 h-3"
|
|
/></Link>
|
|
<span v-if="systemHealth" class="text-gray-400"
|
|
>Posodobljeno {{ new Date(systemHealth.generated_at).toLocaleTimeString() }}</span
|
|
>
|
|
</div>
|
|
</AppCard>
|
|
</template>
|