47 lines
1.5 KiB
Vue
47 lines
1.5 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
invItem: Object,
|
|
selected: Boolean,
|
|
});
|
|
|
|
const emit = defineEmits(['selectInvItem', 'unselect']);
|
|
const { $dayjs } = useNuxtApp();
|
|
</script>
|
|
|
|
<template>
|
|
<tr
|
|
:class="['is-clickable', selected && 'is-selected']"
|
|
@click="selected ? emit('unselect') : emit('selectInvItem', invItem.id)"
|
|
>
|
|
<td>
|
|
<div>
|
|
<p class="fs-14">{{ invItem.name }}</p>
|
|
<p class="fs-12 has-text-grey">{{ invItem.category }}</p>
|
|
</div>
|
|
</td>
|
|
<td class="is-family-monospace fs-12">{{ invItem.sku }}</td>
|
|
<td>{{ invItem.storage }}</td>
|
|
<td class="is-family-monospace fs-12">{{ invItem.storage__position }}</td>
|
|
<td class="has-text-right">{{ invItem.stock }}</td>
|
|
<td class="has-text-right">{{ invItem.preorder }}</td>
|
|
<td
|
|
:class="['has-text-right', invItem.status === 'OK' ? 'has-text-success-30' : 'has-text-warning-30']"
|
|
>{{ invItem.available }}</td>
|
|
<td class="is-family-monospace fs-12">{{ invItem.batch }}</td>
|
|
<td>{{ $dayjs(invItem.expired).format('L') }}</td>
|
|
<td>
|
|
<span
|
|
:class="['tag is-rounded', invItem.status === 'OK' ? 'has-background-success-soft has-text-success-bold' : 'has-background-warning-soft has-text-warning-bold']"
|
|
>{{ invItem.status }}</span></td>
|
|
</tr>
|
|
</template>
|
|
<style scoped>
|
|
tr.is-selected {
|
|
--bulma-table-row-active-background-color: var(--bulma-primary-95);
|
|
color: unset;
|
|
}
|
|
td {
|
|
vertical-align: middle;
|
|
--bulma-table-cell-padding: 0.75em;
|
|
}
|
|
</style> |