verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 68 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> <template>
<div class="descriptor"> <div class="descriptor">
<template v-if="entity"> <template v-if="entity && !isLoading">
<div class="header bg-primary q-pa-sm justify-between"> <div class="header bg-primary q-pa-sm justify-between">
<slot name="header-extra-action" /> <slot name="header-extra-action" />
<QBtn <QBtn
@ -169,8 +169,13 @@ function viewSummary(id) {
<slot name="after" /> <slot name="after" />
</template> </template>
<!-- Skeleton --> <!-- Skeleton -->
<SkeletonDescriptor v-if="!entity" /> <SkeletonDescriptor v-if="!entity || isLoading" />
</div> </div>
<QInnerLoading
:label="t('globals.pleaseWait')"
:showing="isLoading"
color="primary"
/>
</template> </template>
<style lang="scss"> <style lang="scss">

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

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

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

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