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

2025-11-01 19:48:08 +00:00 · 2019-12-16 18:23:14 +05:30
parent 17587d8a0c
commit 87fb1adab1
14 changed files with 23 additions and 27 deletions
--- a/app/javascript/dashboard/App.vue
+++ b/app/javascript/dashboard/App.vue
@@ -3,7 +3,7 @@
    <transition name="fade" mode="out-in">
      <router-view></router-view>
    </transition>
-    <woot-snackbar-box></woot-snackbar-box>
+    <woot-snackbar-box />
  </div>
 </template>

--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -2,10 +2,10 @@
  <div class="conversations-sidebar  medium-4 columns">
    <div class="chat-list__top">
      <h1 class="page-title">
-        <woot-sidemenu-icon></woot-sidemenu-icon>
+        <woot-sidemenu-icon />
        {{ getInboxName }}
      </h1>
-      <chat-filter @statusFilterChange="getDataForStatusTab"></chat-filter>
+      <chat-filter @statusFilterChange="getDataForStatusTab" />
    </div>

    <chat-type-tabs
@@ -13,8 +13,7 @@
      :active-tab-index="activeAssigneeTab"
      class="tab--chat-type"
      @chatTabChange="getDataForTab"
-    >
-    </chat-type-tabs>
+    />
    
    <p
      v-if="!chatListLoading && !getChatsForTab(activeStatus).length"
--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@@ -3,7 +3,7 @@
    <div v-if="show" class="modal-mask" transition="modal" @click="close">
      <i class="ion-android-close modal--close" @click="close"></i>
      <div class="modal-container" :class="className" @click.stop>
-        <slot></slot>
+        <slot />
      </div>
    </div>
  </transition>
--- a/app/javascript/dashboard/components/SidemenuIcon.vue
+++ b/app/javascript/dashboard/components/SidemenuIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <i class="ion-android-menu hamburger--menu" @click="onMenuItemClick"></i>
+  <i class="ion-android-menu hamburger--menu" @click="onMenuItemClick" />
 </template>

 <script>
--- a/app/javascript/dashboard/components/SnackbarContainer.vue
+++ b/app/javascript/dashboard/components/SnackbarContainer.vue
@@ -1,6 +1,6 @@
 <template>
  <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>
 </template>

--- a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
+++ b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
@@ -5,7 +5,7 @@
    :class="computedClass"
    @click="onClick"
  >
-    <i v-if="!!iconClass" :class="iconClass" class="icon"></i>
+    <i v-if="!!iconClass" :class="iconClass" class="icon" />
    <span>{{ buttonText }}</span>
    <spinner v-if="loading" />
  </button>
--- a/app/javascript/dashboard/components/buttons/ResolveButton.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveButton.vue
@@ -5,7 +5,7 @@
    :class="buttonClass"
    @click="toggleStatus"
  >
-    <i v-if="!isLoading" class="icon" :class="buttonIconClass"></i>
+    <i v-if="!isLoading" class="icon" :class="buttonIconClass" />
    <spinner v-if="isLoading" />
    {{ currentStatus }}
  </button>
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -41,8 +41,7 @@
        </div>
      </transition>
      <div class="current-user" @click.prevent="showOptions()">
-        <thumbnail :src="gravatarUrl()" :username="currentUser.name">
-        </thumbnail>
+        <thumbnail :src="gravatarUrl()" :username="currentUser.name"/>
        <div class="current-user--data">
          <h3 class="current-user--name">
            {{ currentUser.name }}
--- a/app/javascript/dashboard/components/widgets/EmptyState.vue
+++ b/app/javascript/dashboard/components/widgets/EmptyState.vue
@@ -2,7 +2,7 @@
  <div class="row empty-state">
    <h3 class="title">{{title}}</h3>
    <p class="message">{{message}}</p>
-    <slot></slot>
+    <slot />
  </div>
 </template>
 <script>
--- a/app/javascript/dashboard/components/widgets/SearchBox.vue
+++ b/app/javascript/dashboard/components/widgets/SearchBox.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="search">
-    <i class="icon ion-ios-search-strong"></i>
-    <input class="input" type="email" v-bind:placeholder="$t('CHAT_LIST.SEARCH.INPUT')">
+    <i class="icon ion-ios-search-strong" />
+    <input class="input" type="email" :placeholder="$t('CHAT_LIST.SEARCH.INPUT')">
  </div>
 </template>
 <script>
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -14,8 +14,7 @@
      background-color="#1f93ff"
      color="white"
      :size="avatarSize"
-    >
-    </Avatar>
+    />
    <img
      v-if="badge === 'Channel::FacebookPage'"
      id="badge"
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -5,9 +5,8 @@
      :inbox-id="inboxId"
      :is-contact-panel-open="isContactPanelOpen"
      @contactPanelToggle="onToggleContactPanel"
-    >
-    </messages-view>
-    <empty-state v-else></empty-state>
+    />
+    <empty-state v-else />
  </div>
 </template>
 <script>
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -22,7 +22,7 @@
          :label="data.attachment.fallback_title"
          :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
          v-if="data.content"
          :message="message"
@@ -34,7 +34,7 @@
          class="icon ion-android-lock"
          @mouseenter="isHovered = true"
          @mouseleave="isHovered = false"
-        ></i>
+        />
      </p>
    </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"> -->
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -27,7 +27,7 @@
        class="icon ion-happy-outline"
        :class="{ active: showEmojiPicker }"
        @click="toggleEmojiPicker()"
-      ></i>
+      />
    </div>

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