84 lines
2.6 KiB
Vue
84 lines
2.6 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 VnSearchBar from 'src/components/ui/VnSearchBar.vue';
|
|
import VnList from 'src/components/ui/VnList.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 query = `SELECT i.id, i.longName, i.size, i.category,
|
|
i.value5, i.value6, i.value7,
|
|
i.image, im.updated
|
|
FROM vn.item i
|
|
LEFT JOIN image im
|
|
ON im.collectionFk = 'catalog'
|
|
AND im.name = i.image
|
|
WHERE (i.longName LIKE CONCAT('%', #search, '%')
|
|
OR i.id = #search) AND i.isActive = 1
|
|
ORDER BY i.longName LIMIT 50`;
|
|
|
|
const onSearch = data => (items.value = data || []);
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport v-if="isHeaderMounted" to="#actions">
|
|
<VnSearchBar
|
|
:sql-query="query"
|
|
@on-search="onSearch"
|
|
@on-search-error="items = []"
|
|
/>
|
|
</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.longName }}
|
|
</span>
|
|
<span>
|
|
{{ item.value5 }} {{ item.value6 }}
|
|
{{ item.value7 }}
|
|
</span>
|
|
<span>{{ item.id }}</span>
|
|
<span>{{ item.image }}</span>
|
|
</template>
|
|
</CardList>
|
|
</VnList>
|
|
</QPage>
|
|
</template>
|