Files
chatwoot/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue
Sivin Varghese 396ef02b0c feat: Improve the initial screen placeholder (#7708)
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
2023-08-14 17:50:34 -07:00

92 lines
2.5 KiB
Vue

<template>
<div :class="emptyClassName">
<woot-loading-state
v-if="uiFlags.isFetching || loadingChatList"
:message="loadingIndicatorMessage"
/>
<!-- No inboxes attached -->
<div
v-if="!inboxesList.length && !uiFlags.isFetching && !loadingChatList"
class="clearfix"
>
<onboarding-view v-if="isAdmin" />
<empty-state-message
v-else
:message="$t('CONVERSATION.NO_INBOX_AGENT')"
/>
</div>
<!-- Show empty state images if not loading -->
<div
v-else-if="!uiFlags.isFetching && !loadingChatList"
class="flex flex-col items-center justify-center h-full"
>
<!-- No conversations available -->
<empty-state-message
v-if="!allConversations.length"
:message="$t('CONVERSATION.NO_MESSAGE_1')"
/>
<empty-state-message
v-else-if="allConversations.length && !currentChat.id"
:message="conversationMissingMessage"
/>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import adminMixin from 'dashboard/mixins/isAdmin';
import accountMixin from 'dashboard/mixins/account';
import OnboardingView from '../OnboardingView';
import EmptyStateMessage from './EmptyStateMessage';
export default {
components: {
OnboardingView,
EmptyStateMessage,
},
mixins: [accountMixin, adminMixin],
props: {
isOnExpandedLayout: {
type: Boolean,
default: false,
},
},
computed: {
...mapGetters({
currentChat: 'getSelectedChat',
allConversations: 'getAllConversations',
inboxesList: 'inboxes/getInboxes',
uiFlags: 'inboxes/getUIFlags',
loadingChatList: 'getChatListLoadingStatus',
}),
loadingIndicatorMessage() {
if (this.uiFlags.isFetching) {
return this.$t('CONVERSATION.LOADING_INBOXES');
}
return this.$t('CONVERSATION.LOADING_CONVERSATIONS');
},
conversationMissingMessage() {
if (!this.isOnExpandedLayout) {
return this.$t('CONVERSATION.SELECT_A_CONVERSATION');
}
return this.$t('CONVERSATION.404');
},
newInboxURL() {
return this.addAccountScoping('settings/inboxes/new');
},
emptyClassName() {
if (
!this.inboxesList.length &&
!this.uiFlags.isFetching &&
!this.loadingChatList &&
this.isAdmin
) {
return 'h-full overflow-auto';
}
return 'flex-1 min-w-0 px-0 flex flex-col items-center justify-center h-full';
},
},
};
</script>