test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: added loading indicator in Tabs content

Browse Source
This commit is contained in:
Shariq Ansari 2024-03-12 10:41:08 +05:30
parent 5e60e54a2e
commit 77c32cde5c
2 changed files with 40 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/components/Activities.vue
View File

@ -77,7 +77,14 @@
</template> </template>
</Dropdown> </Dropdown>
</div> </div>
<div v-if="activities?.length" class="activities flex-1 overflow-y-auto"> <div
v-if="all_activities?.loading"
class="flex flex-1 flex-col items-center justify-center gap-3 text-xl font-medium text-gray-500"
>
<LoadingIndicator class="w-6 h-6" />
<span>Loading...</span>
</div>
<div v-else-if="activities?.length" class="activities flex-1 overflow-y-auto">
<div <div
v-if="title == 'Notes'" v-if="title == 'Notes'"
class="activity grid grid-cols-3 gap-4 px-10 pb-5" class="activity grid grid-cols-3 gap-4 px-10 pb-5"
@ -735,10 +742,12 @@
</template> </template>
<script setup> <script setup>
import UserAvatar from '@/components/UserAvatar.vue' import UserAvatar from '@/components/UserAvatar.vue'
import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
import EmailIcon from '@/components/Icons/EmailIcon.vue' import EmailIcon from '@/components/Icons/EmailIcon.vue'
import PhoneIcon from '@/components/Icons/PhoneIcon.vue' import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
import NoteIcon from '@/components/Icons/NoteIcon.vue' import NoteIcon from '@/components/Icons/NoteIcon.vue'
import TaskIcon from '@/components/Icons/TaskIcon.vue' import TaskIcon from '@/components/Icons/TaskIcon.vue'
import LoadingIndicator from '@/components/Icons/LoadingIndicator.vue'
import DurationIcon from '@/components/Icons/DurationIcon.vue' import DurationIcon from '@/components/Icons/DurationIcon.vue'
import CalendarIcon from '@/components/Icons/CalendarIcon.vue' import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
import TaskStatusIcon from '@/components/Icons/TaskStatusIcon.vue' import TaskStatusIcon from '@/components/Icons/TaskStatusIcon.vue'
@ -920,8 +929,10 @@ function update_activities_details(activity) {
} }
const emptyText = computed(() => { const emptyText = computed(() => {
let text = 'No Email Communications' let text = 'No Activities'
if (props.title == 'Calls') { if (props.title == 'Emails') {
text = 'No Email Communications'
} else if (props.title == 'Calls') {
text = 'No Call Logs' text = 'No Call Logs'
} else if (props.title == 'Notes') { } else if (props.title == 'Notes') {
text = 'No Notes' text = 'No Notes'
@ -932,8 +943,10 @@ const emptyText = computed(() => {
}) })
const emptyTextIcon = computed(() => { const emptyTextIcon = computed(() => {
let icon = EmailIcon let icon = ActivityIcon
if (props.title == 'Calls') { if (props.title == 'Emails') {
icon = EmailIcon
} else if (props.title == 'Calls') {
icon = PhoneIcon icon = PhoneIcon
} else if (props.title == 'Notes') { } else if (props.title == 'Notes') {
icon = NoteIcon icon = NoteIcon

22
frontend/src/components/Icons/LoadingIndicator.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<svg
class="max-w-xs animate-spin"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
></circle>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
</template>