KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactor: Minor code refactoring in accordance with Vue.js best practices (#368)

Browse source
This commit is contained in:
James George 2019-12-16 18:23:14 +05:30 • committed by Pranav Raj S
parent 17587d8a0c
commit 87fb1adab1
14 changed files with 23 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/javascript/dashboard/App.vue
View file

@ -3,7 +3,7 @@
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<router-view></router-view> <router-view></router-view>
</transition> </transition>
<woot-snackbar-box></woot-snackbar-box> <woot-snackbar-box />
</div> </div>
</template> </template>

9
app/javascript/dashboard/components/ChatList.vue
View file

@ -2,10 +2,10 @@
<div class="conversations-sidebar medium-4 columns"> <div class="conversations-sidebar medium-4 columns">
<div class="chat-list__top"> <div class="chat-list__top">
<h1 class="page-title"> <h1 class="page-title">
<woot-sidemenu-icon></woot-sidemenu-icon> <woot-sidemenu-icon />
{{ getInboxName }} {{ getInboxName }}
</h1> </h1>
<chat-filter @statusFilterChange="getDataForStatusTab"></chat-filter> <chat-filter @statusFilterChange="getDataForStatusTab" />
</div> </div>
<chat-type-tabs <chat-type-tabs
@ -13,9 +13,8 @@
:active-tab-index="activeAssigneeTab" :active-tab-index="activeAssigneeTab"
class="tab--chat-type" class="tab--chat-type"
@chatTabChange="getDataForTab" @chatTabChange="getDataForTab"
> />
</chat-type-tabs>
<p <p
v-if="!chatListLoading && !getChatsForTab(activeStatus).length" v-if="!chatListLoading && !getChatsForTab(activeStatus).length"
class="content-box" class="content-box"

2
app/javascript/dashboard/components/Modal.vue
View file

@ -3,7 +3,7 @@
<div v-if="show" class="modal-mask" transition="modal" @click="close"> <div v-if="show" class="modal-mask" transition="modal" @click="close">
<i class="ion-android-close modal--close" @click="close"></i> <i class="ion-android-close modal--close" @click="close"></i>
<div class="modal-container" :class="className" @click.stop> <div class="modal-container" :class="className" @click.stop>
<slot></slot> <slot />
</div> </div>
</div> </div>
</transition> </transition>

2
app/javascript/dashboard/components/SidemenuIcon.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<i class="ion-android-menu hamburger--menu" @click="onMenuItemClick"></i> <i class="ion-android-menu hamburger--menu" @click="onMenuItemClick" />
</template> </template>
<script> <script>

2
app/javascript/dashboard/components/SnackbarContainer.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<transition-group name="toast-fade" tag="div" class="ui-snackbar-container"> <transition-group name="toast-fade" tag="div" class="ui-snackbar-container">
<woot-snackbar :message="snackMessage" v-for="snackMessage in snackMessages" v-bind:key="snackMessage"></woot-snackbar> <woot-snackbar :message="snackMessage" v-for="snackMessage in snackMessages" v-bind:key="snackMessage" />
</transition-group> </transition-group>
</template> </template>

2
app/javascript/dashboard/components/buttons/FormSubmitButton.vue
View file

@ -5,7 +5,7 @@
:class="computedClass" :class="computedClass"
@click="onClick" @click="onClick"
> >
<i v-if="!!iconClass" :class="iconClass" class="icon"></i> <i v-if="!!iconClass" :class="iconClass" class="icon" />
<span>{{ buttonText }}</span> <span>{{ buttonText }}</span>
<spinner v-if="loading" /> <spinner v-if="loading" />
</button> </button>

2
app/javascript/dashboard/components/buttons/ResolveButton.vue
View file

@ -5,7 +5,7 @@
:class="buttonClass" :class="buttonClass"
@click="toggleStatus" @click="toggleStatus"
> >
<i v-if="!isLoading" class="icon" :class="buttonIconClass"></i> <i v-if="!isLoading" class="icon" :class="buttonIconClass" />
<spinner v-if="isLoading" /> <spinner v-if="isLoading" />
{{ currentStatus }} {{ currentStatus }}
</button> </button>

3
app/javascript/dashboard/components/layout/Sidebar.vue
View file

@ -41,8 +41,7 @@
</div> </div>
</transition> </transition>
<div class="current-user" @click.prevent="showOptions()"> <div class="current-user" @click.prevent="showOptions()">
<thumbnail :src="gravatarUrl()" :username="currentUser.name"> <thumbnail :src="gravatarUrl()" :username="currentUser.name"/>
</thumbnail>
<div class="current-user--data"> <div class="current-user--data">
<h3 class="current-user--name"> <h3 class="current-user--name">
{{ currentUser.name }} {{ currentUser.name }}

2
app/javascript/dashboard/components/widgets/EmptyState.vue
View file

@ -2,7 +2,7 @@
<div class="row empty-state"> <div class="row empty-state">
<h3 class="title">{{title}}</h3> <h3 class="title">{{title}}</h3>
<p class="message">{{message}}</p> <p class="message">{{message}}</p>
<slot></slot> <slot />
</div> </div>
</template> </template>
<script> <script>

6
app/javascript/dashboard/components/widgets/SearchBox.vue
View file

@ -1,11 +1,11 @@
<template> <template>
<div class="search"> <div class="search">
<i class="icon ion-ios-search-strong"></i> <i class="icon ion-ios-search-strong" />
<input class="input" type="email" v-bind:placeholder="$t('CHAT_LIST.SEARCH.INPUT')"> <input class="input" type="email" :placeholder="$t('CHAT_LIST.SEARCH.INPUT')">
</div> </div>
</template> </template>
<script> <script>
export default { export default {
}; };
</script> </script>

3
app/javascript/dashboard/components/widgets/Thumbnail.vue
View file

@ -14,8 +14,7 @@
background-color="#1f93ff" background-color="#1f93ff"
color="white" color="white"
:size="avatarSize" :size="avatarSize"
> />
</Avatar>
<img <img
v-if="badge === 'Channel::FacebookPage'" v-if="badge === 'Channel::FacebookPage'"
id="badge" id="badge"

5
app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
View file

@ -5,9 +5,8 @@
:inbox-id="inboxId" :inbox-id="inboxId"
:is-contact-panel-open="isContactPanelOpen" :is-contact-panel-open="isContactPanelOpen"
@contactPanelToggle="onToggleContactPanel" @contactPanelToggle="onToggleContactPanel"
> />
</messages-view> <empty-state v-else />
<empty-state v-else></empty-state>
</div> </div>
</template> </template>
<script> <script>

4
app/javascript/dashboard/components/widgets/conversation/Message.vue
View file

@ -22,7 +22,7 @@
:label="data.attachment.fallback_title" :label="data.attachment.fallback_title"
:readable-time="readableTime" :readable-time="readableTime"
/> />
<i v-if="data.message_type === 2" class="icon ion-person"></i> <i v-if="data.message_type === 2" class="icon ion-person" />
<bubble-text <bubble-text
v-if="data.content" v-if="data.content"
:message="message" :message="message"
@ -34,7 +34,7 @@
class="icon ion-android-lock" class="icon ion-android-lock"
@mouseenter="isHovered = true" @mouseenter="isHovered = true"
@mouseleave="isHovered = false" @mouseleave="isHovered = false"
></i> />
</p> </p>
</div> </div>
<!-- <img v-if="showSenderData" src="https://chatwoot-staging.s3-us-west-2.amazonaws.com/uploads/avatar/contact/3415/thumb_10418362_10201264050880840_6087258728802054624_n.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=AKIAI3KBM2ES3VRHQHPQ%2F20170422%2Fus-west-2%2Fs3%2Faws4_request&amp;X-Amz-Date=20170422T075421Z&amp;X-Amz-Expires=604800&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=8d5ff60e41415515f59ff682b9a4e4c0574d9d9aabfeff1dc5a51087a9b49e03" class="sender--thumbnail"> --> <!-- <img v-if="showSenderData" src="https://chatwoot-staging.s3-us-west-2.amazonaws.com/uploads/avatar/contact/3415/thumb_10418362_10201264050880840_6087258728802054624_n.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=AKIAI3KBM2ES3VRHQHPQ%2F20170422%2Fus-west-2%2Fs3%2Faws4_request&amp;X-Amz-Date=20170422T075421Z&amp;X-Amz-Expires=604800&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=8d5ff60e41415515f59ff682b9a4e4c0574d9d9aabfeff1dc5a51087a9b49e03" class="sender--thumbnail"> -->

6
app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
View file

@ -27,7 +27,7 @@
class="icon ion-happy-outline" class="icon ion-happy-outline"
:class="{ active: showEmojiPicker }" :class="{ active: showEmojiPicker }"
@click="toggleEmojiPicker()" @click="toggleEmojiPicker()"
></i> />
</div> </div>
<div class="reply-box__bottom"> <div class="reply-box__bottom">
@ -65,7 +65,7 @@
'ion-android-send': !isPrivate, 'ion-android-send': !isPrivate,
'ion-android-lock': isPrivate, 'ion-android-lock': isPrivate,
}" }"
></i> />
</button> </button>
</div> </div>
</div> </div>
@ -114,7 +114,7 @@ export default {
return; return;
} }
const isSlashCommand = val[0] === '/'; const isSlashCommand = val[0] === '/';
const hasNextWord = val.indexOf(' ') > -1; const hasNextWord = val.includes(' ');
const isShortCodeActive = isSlashCommand && !hasNextWord; const isShortCodeActive = isSlashCommand && !hasNextWord;
if (isShortCodeActive) { if (isShortCodeActive) {
this.showCannedResponsesList = true; this.showCannedResponsesList = true;