101 lines
3.1 KiB
Vue
101 lines
3.1 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
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 { useAppStore } from 'stores/app';
|
|
import { storeToRefs } from 'pinia';
|
|
|
|
const { t } = useI18n();
|
|
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
|
|
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">
|
|
<QList class="flex justify-center">
|
|
<span v-if="!loading && !items.length" class="flex items-center">
|
|
<QIcon name="refresh" size="sm" class="q-mr-sm" />
|
|
{{ t('introduceSearchTerm') }}
|
|
</span>
|
|
<QSpinner
|
|
v-if="loading"
|
|
color="primary"
|
|
size="3em"
|
|
:thickness="2"
|
|
/>
|
|
<CardList
|
|
v-else
|
|
v-for="(item, index) in items"
|
|
:key="index"
|
|
:clickable="false"
|
|
>
|
|
<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>
|
|
</QList>
|
|
</QPage>
|
|
</template>
|
|
|
|
<i18n lang="yaml">
|
|
en-US:
|
|
introduceSearchTerm: Enter a search term
|
|
es-ES:
|
|
introduceSearchTerm: Introduce un término de búsqueda
|
|
ca-ES:
|
|
introduceSearchTerm: Introdueix un terme de cerca
|
|
fr-FR:
|
|
introduceSearchTerm: Entrez un terme de recherche
|
|
pt-PT:
|
|
introduceSearchTerm: Digite um termo de pesquisa
|
|
</i18n>
|