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

refs #6787 fix descriptor skeleton
gitea/salix-front/pipeline/pr-dev This commit looks good Details

This commit is contained in:
Carlos Satorres 2024-02-13 12:44:20 +01:00
parent 760b2d5574
commit 1e5638b487
3 changed files with 41 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/ui/CardDescriptor.vue
View File

@ -83,7 +83,7 @@ function viewSummary(id) {
<template>
<div class="descriptor">
<template v-if="entity">
<template v-if="entity && !isLoading">
<div class="header bg-primary q-pa-sm justify-between">
<slot name="header-extra-action" />
<QBtn
@ -169,8 +169,13 @@ function viewSummary(id) {
<slot name="after" />
</template>
<!-- Skeleton -->
<SkeletonDescriptor v-if="!entity" />
<SkeletonDescriptor v-if="!entity || isLoading" />
</div>
<QInnerLoading
:label="t('globals.pleaseWait')"
:showing="isLoading"
color="primary"
/>
</template>
<style lang="scss">

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

@ -1,10 +1,39 @@
<template>
<div id="descriptor-skeleton">
<div class="col q-pl-sm q-pa-sm">
<QSkeleton type="text" square height="45px" />
<QSkeleton type="text" square height="18px" />
<QSkeleton type="text" square height="18px" />
<QSkeleton type="text" square height="18px" />
<div class="row justify-between q-pa-sm">
<QSkeleton square size="40px" />
<QSkeleton square size="40px" />
<QSkeleton square height="40px" width="20px" />
</div>
<div class="col justify-between q-pa-sm q-gutter-y-xs">
<QSkeleton square height="40px" width="150px" />
<QSkeleton square height="30px" width="70px" />
</div>
<div class="col q-pl-sm q-pa-sm q-mb-md">
<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 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>
<QCardActions>

8
src/pages/Customer/Card/CustomerDescriptor.vue
View File

@ -19,17 +19,14 @@ const $props = defineProps({
default: null,
},
});
const isLoading = ref(false);
const route = useRoute();
const { t } = useI18n();
const entityId = computed(() => {
return $props.id || route.params.id;
});
isLoading.value = true;
const data = ref(useCardDescription());
const setData = (entity) => (data.value = useCardDescription(entity.name, entity.id));
isLoading.value = false;
</script>
<template>
@ -122,11 +119,6 @@ isLoading.value = false;
</QCardActions>
</template>
</CardDescriptor>
<QInnerLoading
:label="t('globals.pleaseWait')"
:showing="isLoading"
color="primary"
/>
</template>
<i18n>
{