50 lines
1.8 KiB
Vue
50 lines
1.8 KiB
Vue
<template>
|
|
<MobileCard clickable @click="$emit('open', item)">
|
|
<div class="space-y-1">
|
|
<div class="flex items-center justify-between gap-2">
|
|
<div class="flex min-w-0 items-center gap-2">
|
|
<span class="shrink-0 rounded-md border px-1.5 py-0.5 text-xs font-600" :class="typeTagClass">
|
|
{{ typeLabel }}
|
|
</span>
|
|
<span
|
|
v-if="!isMoneyType && item.transaction_metal_label"
|
|
class="shrink-0 rounded-md border border-amber-300 bg-amber-50 px-1.5 py-0.5 text-xs font-600 text-amber-700"
|
|
>
|
|
{{ item.transaction_metal_label }}
|
|
</span>
|
|
<span class="truncate text-sm font-700 text-gray-900">{{ item.type_str || '-' }}</span>
|
|
</div>
|
|
<span class="shrink-0 text-xs text-gray-400">{{ dateLabel }}</span>
|
|
</div>
|
|
|
|
<div v-if="!hideCustomer" class="truncate text-xs text-gray-600">{{ customerName }}</div>
|
|
</div>
|
|
</MobileCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Transaction } from '@/model/transaction'
|
|
import MobileCard from '@/components/mobile/MobileCard.vue'
|
|
import { toJalaliNoTime } from '@core/utils/useDataTime'
|
|
|
|
const props = defineProps<{
|
|
item: Transaction
|
|
hideCustomer?: boolean
|
|
}>()
|
|
|
|
defineEmits<{
|
|
(e: 'open', item: Transaction): void
|
|
}>()
|
|
|
|
const isMoneyType = computed(() => props.item.type === 4 || props.item.type === 3)
|
|
const typeLabel = computed(() => (isMoneyType.value ? 'پول' : 'فلز'))
|
|
const typeTagClass = computed(() =>
|
|
isMoneyType.value
|
|
? 'border-green-300 bg-green-50 text-green-700'
|
|
: 'border-amber-300 bg-amber-50 text-amber-700'
|
|
)
|
|
|
|
const customerName = computed(() => props.item.customer?.name || '-')
|
|
const dateLabel = computed(() => (props.item.created_at ? toJalaliNoTime(props.item.created_at) : '-'))
|
|
</script>
|