104 lines
2.9 KiB
Vue
104 lines
2.9 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
import CardList from 'src/components/ui/CardList.vue';
|
|
import VnImg from 'src/components/ui/VnImg.vue';
|
|
import VnList from 'src/components/ui/VnList.vue';
|
|
import VnSearchBar from 'src/components/ui/NewVnSearchBar.vue';
|
|
|
|
import { useAppStore } from 'stores/app';
|
|
import { storeToRefs } from 'pinia';
|
|
|
|
const appStore = useAppStore();
|
|
const { isHeaderMounted } = storeToRefs(appStore);
|
|
const loading = ref(false);
|
|
const items = ref([]);
|
|
const itemFilterProps = {
|
|
fields: ['id', 'name', 'longName', 'description', 'isActive'], // Incluye explícitamente 'longName'
|
|
include: [
|
|
{
|
|
relation: 'itemType',
|
|
scope: {
|
|
fields: ['id', 'name']
|
|
}
|
|
},
|
|
{
|
|
relation: 'intrastat',
|
|
scope: {
|
|
fields: ['id', 'description']
|
|
}
|
|
},
|
|
{
|
|
relation: 'origin',
|
|
scope: {
|
|
fields: ['id', 'name']
|
|
}
|
|
},
|
|
{
|
|
relation: 'production',
|
|
scope: {
|
|
fields: ['id', 'name']
|
|
}
|
|
}
|
|
],
|
|
isActive: true,
|
|
order: 'name ASC'
|
|
};
|
|
|
|
const onSearch = data => (items.value = data || []);
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport v-if="isHeaderMounted" to="#actions">
|
|
<VnSearchBar
|
|
url="Items/filter"
|
|
@on-search="onSearch"
|
|
@on-search-error="items = []"
|
|
:filter="itemFilterProps"
|
|
/>
|
|
</Teleport>
|
|
<QPage class="vn-w-xs">
|
|
<VnList
|
|
class="flex justify-center"
|
|
empty-message="introduceSearchTerm"
|
|
empty-icon="refresh"
|
|
:loading="loading"
|
|
:rows="items"
|
|
data-cy="itemsViewList"
|
|
>
|
|
<CardList
|
|
v-for="(item, index) in items"
|
|
:key="index"
|
|
:clickable="false"
|
|
data-cy="itemsViewCard"
|
|
>
|
|
<template #prepend>
|
|
<VnImg
|
|
storage="catalog"
|
|
size="200x200"
|
|
:id="item.id"
|
|
width="80px"
|
|
height="80px"
|
|
class="q-mr-md"
|
|
rounded
|
|
editable
|
|
edit-schema="catalog"
|
|
:edit-image-name="item.image"
|
|
/>
|
|
</template>
|
|
<template #content>
|
|
<span class="text-bold q-mb-sm">
|
|
{{ item.name }}
|
|
</span>
|
|
<span>
|
|
{{ item.value5 }} {{ item.value6 }}
|
|
{{ item.value7 }}
|
|
</span>
|
|
<span>{{ item.id }}</span>
|
|
<span>{{ item.image }}</span>
|
|
</template>
|
|
</CardList>
|
|
</VnList>
|
|
</QPage>
|
|
</template>
|