homebox/frontend/components/Item/Card.vue
Hayden 95ab14b866
feat: items-editor (#5)
* format readme

* update logo

* format html

* add logo to docs

* repository for document and document tokens

* add attachments type and repository

* autogenerate types via scripts

* use autogenerated types

* attachment type updates

* add insured and quantity fields for items

* implement HasID interface for entities

* implement label updates for items

* implement service update method

* WIP item update client side actions

* check err on attachment

* finish types for basic items editor

* remove unused var

* house keeping
2022-09-12 14:47:27 -08:00

36 lines
954 B
Vue

<template>
<NuxtLink
class="group card bg-neutral text-neutral-content hover:bg-primary transition-colors duration-300"
:to="`/item/${item.id}`"
>
<div class="card-body py-4 px-6">
<h2 class="card-title">
<Icon name="mdi-package-variant" />
{{ item.name }}
</h2>
<p>{{ description }}</p>
<div class="flex gap-2 flex-wrap justify-end">
<LabelChip
v-for="label in item.labels"
:key="label.id"
:label="label"
class="badge-primary group-hover:badge-secondary"
/>
</div>
</div>
</NuxtLink>
</template>
<script setup lang="ts">
import { ItemOut, ItemSummary } from "~~/lib/api/types/data-contracts";
const props = defineProps({
item: {
type: Object as () => ItemOut | ItemSummary,
required: true,
},
});
const description = computed(() => {
return truncate(props.item.description, 80);
});
</script>