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

refs #6787 isLoading #180

Merged
carlossa merged 4 commits from 6787-loadingDescriptor into dev 2024-02-16 13:06:06 +00:00
Conversation 0 Commits 4 Files Changed 3 +50 -12
3 changed files with 50 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<script setup>
import { onMounted, useSlots, watch, computed } from 'vue';
import { onMounted, useSlots, watch, computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
import { useArrayData } from 'composables/useArrayData';
@ -39,6 +39,7 @@ const slots = useSlots();
const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const entity = computed(() => useArrayData($props.dataKey).store.data);
const isLoading = ref(false);
defineExpose({
getData,
@ -60,15 +61,20 @@ async function getData() {
filter: $props.filter,
skip: 0,
});
isLoading.value = true;
try {
const { data } = await arrayData.fetch({ append: false, updateRouter: false });
emit('onFetch', data);
} finally {
isLoading.value = false;
}
}
const emit = defineEmits(['onFetch']);
</script>
<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
@ -154,8 +160,13 @@ const emit = defineEmits(['onFetch']);
<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>

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

@ -19,10 +19,8 @@ const $props = defineProps({
default: null,
},
});
const route = useRoute();
const { t } = useI18n();
const entityId = computed(() => {
return $props.id || route.params.id;
});