all repos — stealth-developers @ 3730c396e5f98ab5f0415bcb62f978689a5ff938

apps/web/src/components/Tickets/TicketMeta.vue (view raw)

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 
<script setup lang="ts">
import type { SanitisedTicket } from "@stealth-developers/api";

import UserChip from "@/components/UserChip.vue";

defineProps<{
	ticket: SanitisedTicket;
}>();

const formatDate = (dateValue: string | Date | null) => {
	if (!dateValue) return "/";
	const date = new Date(dateValue);
	return date.toLocaleString();
};
</script>

<template>
	<div class="ticket-meta-grid">
		<div class="meta-row">
			<span class="meta-label">Opened By</span>
			<div class="meta-value">
				<UserChip :user="ticket.subjects.opener" />
				<span class="meta-date">at {{ formatDate(ticket.openedAt) }}</span>
			</div>
		</div>

		<div class="meta-row">
			<span class="meta-label">Subject</span>
			<div class="meta-value">
				<UserChip :user="ticket.subjects.subject" />
			</div>
		</div>

		<div class="meta-row" v-if="ticket.subjects.claimedBy">
			<span class="meta-label">Claimed By</span>
			<div class="meta-value">
				<UserChip :user="ticket.subjects.claimedBy" />
				<span class="meta-date" v-if="ticket.claimedAt">
					at {{ formatDate(ticket.claimedAt) }}
				</span>
			</div>
		</div>

		<div class="meta-row" v-if="ticket.subjects.closedBy">
			<span class="meta-label">Closed By</span>
			<div class="meta-value">
				<UserChip :user="ticket.subjects.closedBy" />
				<span class="meta-date" v-if="ticket.closedAt"> at {{ formatDate(ticket.closedAt) }} </span>
			</div>
		</div>
	</div>
</template>

<style scoped>
.ticket-meta-grid {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 0.5rem;

	.meta-row {
		flex: 1 1 250px;
		display: flex;
		flex-direction: column;
		background-color: hsl(var(--crust));
		padding: 1rem;
		gap: 0.4rem;
		border-radius: 1.5rem;

		.meta-label {
			font-size: 0.75rem;
			font-weight: 900;
			text-transform: uppercase;
			color: hsl(var(--subtext0));
		}

		.meta-value {
			display: flex;
			flex-direction: column;
			gap: 0.2rem;
			align-items: flex-start;

			.meta-date {
				font-size: 0.8rem;
				color: hsl(var(--subtext1));
			}
		}
	}
}
</style>