marzban-dev
79 lines
2.4 KiB
Vue
79 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
// imports
|
|
|
|
import { usePersianTimeAgo } from "~/composables/global/usePersianTimeAgo";
|
|
|
|
// types
|
|
|
|
type Props = {
|
|
data: Omit<Ticket, "messages">;
|
|
};
|
|
|
|
// props
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const { data } = toRefs(props);
|
|
|
|
// computed
|
|
|
|
const createdTimeAgo = usePersianTimeAgo(new Date(data.value.created_at));
|
|
const updatedTimeAgo = usePersianTimeAgo(new Date(data.value.updated_at));
|
|
</script>
|
|
|
|
<template>
|
|
<tr
|
|
class="odd:bg-white even:bg-gray-50 last:border-none border-b border-slate-200"
|
|
>
|
|
<td
|
|
scope="row"
|
|
class="w-3/12 px-6 py-6 font-medium whitespace-nowrap text-black"
|
|
>
|
|
{{ data.ticket_category ? data.ticket_category : "--" }}
|
|
</td>
|
|
<td class="w-3/12 px-6 py-6">
|
|
{{ data.subject ? data.subject : "--" }}
|
|
</td>
|
|
<td class="w-3/12 px-6 py-6 flex flex-col gap-3 text-sm">
|
|
<span class="w-full whitespace-pre">
|
|
ایجاد : {{ data.created_at ? createdTimeAgo : "--" }}
|
|
</span>
|
|
<span class="w-full whitespace-pre">
|
|
بروزرسانی : {{ data.updated_at ? updatedTimeAgo : "--" }}
|
|
</span>
|
|
</td>
|
|
<td class="w-2/12 px-6 py-6">
|
|
<div
|
|
class="w-max rounded-full py-1.5 px-3 text-xs border"
|
|
:class="{
|
|
'text-warning-600 bg-warning-100 border-warning-600':
|
|
data.status == 'در انتظار پاسخ',
|
|
'text-success-600 bg-success-100 border-success-600':
|
|
data.status == 'پاسخ داده شده',
|
|
'text-danger-600 bg-danger-100 border-danger-600':
|
|
data.status == 'بسته شده',
|
|
}"
|
|
>
|
|
{{ data.status ? data.status : "--" }}
|
|
</div>
|
|
</td>
|
|
<td class="w-1/12 px-6 py-6">
|
|
<NuxtLink
|
|
:to="{ name: 'profile-tickets-id', params: { id: data.id } }"
|
|
>
|
|
<button
|
|
class="size-10 flex-center border border-slate-200 rounded-md"
|
|
>
|
|
<Icon
|
|
name="ci:eye-open"
|
|
class="**:stroke-black"
|
|
size="20"
|
|
/>
|
|
</button>
|
|
</NuxtLink>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
|
|
<style scoped></style>
|