verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 84 Releases Wiki Activity

refactor: refs #6897 update SkeletonDescriptor component add image

This commit is contained in:
Alex Moreno 2025-02-11 11:15:19 +01:00
parent 06a07d4fd3
commit c04adf0e7d
2 changed files with 25 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/ui/SkeletonDescriptor.vue
View File

@ -1,53 +1,32 @@
<script setup>
defineProps({
hasImage: {
type: Boolean,
default: false,
},
});
</script>
<template> <template>
<div id="descriptor-skeleton"> <div id="descriptor-skeleton" class="bg-vn-page">
<div class="row justify-between q-pa-sm"> <div class="row justify-between q-pa-sm">
<QSkeleton square size="40px" /> <QSkeleton square size="30px" v-for="i in 3" :key="i" />
<QSkeleton square size="40px" />
<QSkeleton square height="40px" width="20px" />
</div> </div>
<div class="col justify-between q-pa-sm q-gutter-y-xs"> <div class="q-pa-xs" v-if="hasImage">
<QSkeleton square height="40px" width="150px" /> <QSkeleton square height="200px" width="100%" />
<QSkeleton square height="30px" width="70px" />
</div> </div>
<div class="col q-pl-sm q-pa-sm q-mb-md"> <div class="col justify-between q-pa-md q-gutter-y-xs">
<div class="row justify-between"> <QSkeleton square height="25px" width="150px" />
<QSkeleton type="text" square height="30px" width="20%" /> <QSkeleton square height="15px" width="70px" />
<QSkeleton type="text" square height="30px" width="60%" /> </div>
</div> <div class="q-pl-sm q-pa-sm q-mb-md">
<div class="row justify-between"> <div class="row q-gutter-x-sm q-pa-none q-ma-none" v-for="i in 5" :key="i">
<QSkeleton type="text" square height="30px" width="20%" /> <QSkeleton type="text" square height="20px" width="30%" />
<QSkeleton type="text" square height="30px" width="60%" /> <QSkeleton type="text" square height="20px" width="60%" />
</div>
<div class="row justify-between">
<QSkeleton type="text" square height="30px" width="20%" />
<QSkeleton type="text" square height="30px" width="60%" />
</div>
<div class="row justify-between">
<QSkeleton type="text" square height="30px" width="20%" />
<QSkeleton type="text" square height="30px" width="60%" />
</div>
<div class="row justify-between">
<QSkeleton type="text" square height="30px" width="20%" />
<QSkeleton type="text" square height="30px" width="60%" />
</div>
<div class="row justify-between">
<QSkeleton type="text" square height="30px" width="20%" />
<QSkeleton type="text" square height="30px" width="60%" />
</div> </div>
</div> </div>
<QCardActions> <QCardActions class="q-gutter-x-sm justify-between">
<QSkeleton size="40px" /> <QSkeleton size="40px" v-for="i in 5" :key="i" />
<QSkeleton size="40px" />
<QSkeleton size="40px" />
<QSkeleton size="40px" />
<QSkeleton size="40px" />
</QCardActions> </QCardActions>
</div> </div>
</template> </template>
<style lang="scss" scoped>
#descriptor-skeleton .q-card__actions {
justify-content: space-between;
}
</style>

4
src/pages/Entry/Card/EntryBuys.vue
View File

@ -16,6 +16,7 @@ import ItemDescriptor from 'src/pages/Item/Card/ItemDescriptor.vue';
import axios from 'axios'; import axios from 'axios';
import VnSelectEnum from 'src/components/common/VnSelectEnum.vue'; import VnSelectEnum from 'src/components/common/VnSelectEnum.vue';
import { checkEntryLock } from 'src/composables/checkEntryLock'; import { checkEntryLock } from 'src/composables/checkEntryLock';
import SkeletonDescriptor from 'src/components/ui/SkeletonDescriptor.vue';
const $props = defineProps({ const $props = defineProps({
id: { id: {
@ -719,7 +720,8 @@ onMounted(() => {
</template> </template>
<template #previous-create-dialog="{ data }"> <template #previous-create-dialog="{ data }">
<div style="position: absolute"> <div style="position: absolute">
<ItemDescriptor :id="data.itemFk ?? NaN" /> <ItemDescriptor :id="data.itemFk" v-if="data.itemFk" />
<SkeletonDescriptor v-if="!data.itemFk" :has-image="true" />
</div> </div>
</template> </template>
</VnTable> </VnTable>