verdnatura/salix-front
verdnatura
/
salix-front
1
2
Fork 1
Code Issues Pull Requests 59 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

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

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

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

@ -19,10 +19,8 @@ const $props = defineProps({
default: null, default: null,
}, },
}); });
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;
}); });