Addes progress bar as loader
This commit is contained in:
parent
18a46374f0
commit
127078a506
|
@ -18,7 +18,7 @@
|
||||||
style="max-width: 512px"
|
style="max-width: 512px"
|
||||||
>
|
>
|
||||||
<v-progress-circular
|
<v-progress-circular
|
||||||
v-if="$apollo.queries.userPresence.loading"
|
v-if="$apollo.queries.userPresence.loading && search"
|
||||||
slot="prepend"
|
slot="prepend"
|
||||||
color="grey"
|
color="grey"
|
||||||
class="pa-0 ma-0"
|
class="pa-0 ma-0"
|
||||||
|
@ -28,6 +28,10 @@
|
||||||
/>
|
/>
|
||||||
</v-text-field>
|
</v-text-field>
|
||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
|
<v-progress-linear
|
||||||
|
height="2"
|
||||||
|
:indeterminate="$apollo.queries.userPresence.loading"
|
||||||
|
/>
|
||||||
<v-container fluid class="mb-12">
|
<v-container fluid class="mb-12">
|
||||||
<div v-if="stats" class="text-center my-4">
|
<div v-if="stats" class="text-center my-4">
|
||||||
<span>
|
<span>
|
||||||
|
@ -50,90 +54,88 @@
|
||||||
</v-scale-transition>
|
</v-scale-transition>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<v-fade-transition
|
||||||
v-if="
|
v-if="
|
||||||
!$apollo.queries.userPresence.loading || pagedUserPresences.length
|
!$apollo.queries.userPresence.loading || pagedUserPresences.length
|
||||||
"
|
"
|
||||||
|
class="layout row row--dense wrap"
|
||||||
|
group
|
||||||
>
|
>
|
||||||
<v-fade-transition class="layout row row--dense wrap" group>
|
<v-col
|
||||||
<v-col
|
v-for="userPresence in pagedUserPresences"
|
||||||
v-for="userPresence in pagedUserPresences"
|
:key="userPresence.id"
|
||||||
:key="userPresence.id"
|
cols="12"
|
||||||
cols="12"
|
sm="6"
|
||||||
sm="6"
|
md="4"
|
||||||
md="4"
|
lg="3"
|
||||||
lg="3"
|
>
|
||||||
|
<v-card
|
||||||
|
outlined
|
||||||
|
class="border-highlight light-shadow"
|
||||||
|
:class="{
|
||||||
|
online: userPresence.status == 'ONLINE',
|
||||||
|
recent: userPresence.status == 'RECENT'
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<v-card
|
<v-list three-line>
|
||||||
outlined
|
<v-list-item>
|
||||||
class="border-highlight light-shadow"
|
<v-list-item-avatar size="52px" style="overflow: visible">
|
||||||
:class="{
|
<v-badge
|
||||||
online: userPresence.status == 'ONLINE',
|
:color="color(userPresence.status)"
|
||||||
recent: userPresence.status == 'RECENT'
|
bottom
|
||||||
}"
|
offset-x="18px"
|
||||||
>
|
offset-y="18px"
|
||||||
<v-list three-line>
|
>
|
||||||
<v-list-item>
|
<Avatar :src="userPresence.thumbnailPhoto" size="52px" />
|
||||||
<v-list-item-avatar size="52px" style="overflow: visible">
|
</v-badge>
|
||||||
<v-badge
|
</v-list-item-avatar>
|
||||||
:color="color(userPresence.status)"
|
|
||||||
bottom
|
|
||||||
offset-x="18px"
|
|
||||||
offset-y="18px"
|
|
||||||
>
|
|
||||||
<Avatar :src="userPresence.thumbnailPhoto" size="52px" />
|
|
||||||
</v-badge>
|
|
||||||
</v-list-item-avatar>
|
|
||||||
|
|
||||||
<v-list-item-content>
|
<v-list-item-content>
|
||||||
<v-list-item-title>
|
<v-list-item-title>
|
||||||
{{ userPresence.displayName }}
|
{{ userPresence.displayName }}
|
||||||
</v-list-item-title>
|
</v-list-item-title>
|
||||||
|
|
||||||
<template v-if="userPresence.status == 'ONLINE'">
|
<template v-if="userPresence.status == 'ONLINE'">
|
||||||
<v-list-item-subtitle>
|
<v-list-item-subtitle>
|
||||||
<span class="font-weight-medium">On-line</span>
|
<span class="font-weight-medium">On-line</span>
|
||||||
</v-list-item-subtitle>
|
</v-list-item-subtitle>
|
||||||
<v-list-item-subtitle>
|
<v-list-item-subtitle>
|
||||||
Próximo ao AP
|
Próximo ao AP
|
||||||
<span class="font-weight-medium">
|
<span class="font-weight-medium">
|
||||||
{{ userPresence.apName }}
|
{{ userPresence.apName }}
|
||||||
</span>
|
</span>
|
||||||
</v-list-item-subtitle>
|
</v-list-item-subtitle>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-if="userPresence.status == 'RECENT'">
|
<template v-if="userPresence.status == 'RECENT'">
|
||||||
<v-list-item-subtitle>
|
<v-list-item-subtitle>
|
||||||
<span class="font-weight-medium"
|
<span class="font-weight-medium">Visto recentemente</span>
|
||||||
>Visto recentemente</span
|
</v-list-item-subtitle>
|
||||||
>
|
<v-list-item-subtitle>
|
||||||
</v-list-item-subtitle>
|
Próximo ao AP
|
||||||
<v-list-item-subtitle>
|
<span class="font-weight-medium">
|
||||||
Próximo ao AP
|
{{ userPresence.apName }}
|
||||||
<span class="font-weight-medium">
|
</span>
|
||||||
{{ userPresence.apName }}
|
</v-list-item-subtitle>
|
||||||
</span>
|
</template>
|
||||||
</v-list-item-subtitle>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="userPresence.status == 'OFFLINE'">
|
<template v-if="userPresence.status == 'OFFLINE'">
|
||||||
<v-list-item-subtitle>
|
<v-list-item-subtitle>
|
||||||
<span class="font-weight-medium">Off-line</span>
|
<span class="font-weight-medium">Off-line</span>
|
||||||
</v-list-item-subtitle>
|
</v-list-item-subtitle>
|
||||||
<v-list-item-subtitle>
|
<v-list-item-subtitle>
|
||||||
<span class="font-weight-medium">
|
<span class="font-weight-medium">
|
||||||
Visto
|
Visto
|
||||||
{{ userPresence.lastSeen | from }}
|
{{ userPresence.lastSeen | from }}
|
||||||
</span>
|
</span>
|
||||||
</v-list-item-subtitle>
|
</v-list-item-subtitle>
|
||||||
</template>
|
</template>
|
||||||
</v-list-item-content>
|
</v-list-item-content>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
</v-list>
|
</v-list>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-fade-transition>
|
</v-fade-transition>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<div class="layout row row--dense wrap">
|
<div class="layout row row--dense wrap">
|
||||||
|
|
Loading…
Reference in New Issue
Block a user