Fix url in emails, add frontendURL helper (#19)

Fixes #16
2019-08-25 19:59:28 +05:30
parent 28fdc062de
commit bd7bd63aae
89 changed files with 550 additions and 398 deletions
--- a/app/javascript/src/components/buttons/FormSubmitButton.vue
+++ b/app/javascript/src/components/buttons/FormSubmitButton.vue
@@ -1,8 +1,8 @@
 <template>
  <button type="submit" :disabled="disabled" :class="computedClass">
-    <i :class="iconClass" class="icon" v-if="!!iconClass"></i>
-    <span>{{buttonText}}</span>
-    <spinner v-if="loading"/>
+    <i v-if="!!iconClass" :class="iconClass" class="icon"></i>
+    <span>{{ buttonText }}</span>
+    <spinner v-if="loading" />
  </button>
 </template>

@@ -10,19 +10,34 @@
 import Spinner from '../Spinner';

 export default {
-  props: {
-    disabled: Boolean,
-    loading: Boolean,
-    buttonText: String,
-    buttonClass: String,
-    iconClass: String,
-  },
  components: {
    Spinner,
  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    buttonText: {
+      type: String,
+      default: '',
+    },
+    buttonClass: {
+      type: String,
+      default: '',
+    },
+    iconClass: {
+      type: String,
+      default: '',
+    },
+  },
  computed: {
    computedClass() {
-      return `button ${this.buttonClass || ' '}`;
+      return `button nice ${this.buttonClass || ' '}`;
    },
  },
 };
--- a/app/javascript/src/components/buttons/ResolveButton.vue
+++ b/app/javascript/src/components/buttons/ResolveButton.vue
@@ -1,8 +1,13 @@
 <template>
-  <button type="button" v-on:click="toggleStatus" class="button round resolve--button" :class="buttonClass">
-    <i class="icon" :class="buttonIconClass"  v-if="!isLoading"></i>
-    <spinner v-if="isLoading"/>
-   {{ currentStatus }}
+  <button
+    type="button"
+    class="button nice resolve--button"
+    :class="buttonClass"
+    @click="toggleStatus"
+  >
+    <i v-if="!isLoading" class="icon" :class="buttonIconClass"></i>
+    <spinner v-if="isLoading" />
+    {{ currentStatus }}
  </button>
 </template>

@@ -13,9 +18,7 @@ import { mapGetters } from 'vuex';
 import Spinner from '../Spinner';

 export default {
-  props: [
-    'conversationId',
-  ],
+  props: ['conversationId'],
  data() {
    return {
      isLoading: false,
@@ -50,5 +53,3 @@ export default {
  },
 };
 </script>
-
-
--- a/app/javascript/src/components/layout/Sidebar.vue
+++ b/app/javascript/src/components/layout/Sidebar.vue
@@ -1,47 +1,56 @@
 <template>
  <aside class="sidebar animated shrink columns">
    <div class="logo">
-      <router-link to="{ path: '/u/dashboard' }" replace>
-        <img src="~assets/images/woot-logo.svg" alt="Woot-logo"/>
+      <router-link :to="dashboardPath" replace>
+        <img src="~assets/images/woot-logo.svg" alt="Woot-logo" />
      </router-link>
    </div>

    <div class="main-nav">
      <transition-group name="menu-list" tag="ul" class="menu vertical">
        <sidebar-item
-          v-for="item in sidebarItems"
+          v-for="item in accessibleMenuItems"
+          :key="item.toState"
          :menu-item="item"
-          :key="item"
-          v-if="showItem(item)"
        />
      </transition-group>
    </div>
    <transition name="fade" mode="out-in">
      <woot-status-bar
+        v-if="shouldShowStatusBox"
        :message="trialMessage"
-        :buttonText="$t('APP_GLOBAL.TRAIL_BUTTON')"
-        :buttonRoute="{ name: 'billing' }"
+        :button-text="$t('APP_GLOBAL.TRAIL_BUTTON')"
+        :button-route="{ name: 'billing' }"
        :type="statusBarClass"
        :show-button="isAdmin()"
-        v-if="shouldShowStatusBox"
      />
    </transition>
    <div class="bottom-nav">
      <transition name="menu-slide">
-        <div class="dropdown-pane top" v-if="showOptionsMenu" v-on-clickaway="showOptions">
+        <div
+          v-if="showOptionsMenu"
+          v-on-clickaway="showOptions"
+          class="dropdown-pane top"
+        >
          <ul class="vertical dropdown menu">
-            <li><a href="#">Help & Support</a></li>
+            <!-- <li><a href="#">Help & Support</a></li> -->
            <li><a href="#" @click.prevent="logout()">Logout</a></li>
          </ul>
        </div>
      </transition>
      <div class="current-user" @click.prevent="showOptions()">
-        <img class="current-user--thumbnail" :src="gravatarUrl()"/>
+        <img class="current-user--thumbnail" :src="gravatarUrl()" />
        <div class="current-user--data">
-          <h3 class="current-user--name">{{ currentUser.name }}</h3>
-          <h5 class="current-user--role">{{ currentUser.role }}</h5>
+          <h3 class="current-user--name">
+            {{ currentUser.name }}
+          </h3>
+          <h5 class="current-user--role">
+            {{ currentUser.role }}
+          </h5>
        </div>
-        <span class="current-user--options icon ion-android-more-vertical"></span>
+        <span
+          class="current-user--options icon ion-android-more-vertical"
+        ></span>
      </div>
      <!-- <router-link class="icon ion-arrow-graph-up-right" tag="span" to="/settings/reports" active-class="active"></router-link> -->
    </div>
@@ -57,17 +66,20 @@ import adminMixin from '../../mixins/isAdmin';
 import Auth from '../../api/auth';
 import SidebarItem from './SidebarItem';
 import WootStatusBar from '../widgets/StatusBar';
-/* eslint-disable no-console */
+import { frontendURL } from '../../helper/URLHelper';
+
 export default {
+  mixins: [clickaway, adminMixin],
  props: {
-    route: String,
+    route: {
+      type: String,
+    },
  },
  data() {
    return {
      showOptionsMenu: false,
    };
  },
-  mixins: [clickaway, adminMixin],
  mounted() {
    // this.$store.dispatch('fetchLabels');
    this.$store.dispatch('fetchInboxes');
@@ -78,22 +90,30 @@ export default {
      daysLeft: 'getTrialLeft',
      subscriptionData: 'getSubscription',
    }),
-    sidebarItems() {
-      // Get Current Route
+    accessibleMenuItems() {
      const currentRoute = this.$store.state.route.name;
      // get all keys in menuGroup
      const groupKey = Object.keys(this.sidebarList);
+
+      let menuItems = [];
      // Iterate over menuGroup to find the correct group
      for (let i = 0; i < groupKey.length; i += 1) {
        const groupItem = this.sidebarList[groupKey[i]];
        // Check if current route is included
        const isRouteIncluded = groupItem.routes.indexOf(currentRoute) > -1;
        if (isRouteIncluded) {
-          return groupItem.menuItems;
+          menuItems = Object.values(groupItem.menuItems);
        }
      }
-      // If not found return empty array
-      return [];
+
+      const { role } = this.currentUser;
+      return menuItems.filter(
+        menuItem =>
+          window.roleWiseRoutes[role].indexOf(menuItem.toStateName) > -1
+      );
+    },
+    dashboardPath() {
+      return frontendURL('dashboard');
    },
    currentUser() {
      return Auth.getCurrentUser();
@@ -102,12 +122,16 @@ export default {
      return `${this.daysLeft} ${this.$t('APP_GLOBAL.TRIAL_MESSAGE')}`;
    },
    shouldShowStatusBox() {
-      return this.subscriptionData.state === 'trial' || this.subscriptionData.state === 'cancelled';
+      return (
+        this.subscriptionData.state === 'trial' ||
+        this.subscriptionData.state === 'cancelled'
+      );
    },
    statusBarClass() {
      if (this.subscriptionData.state === 'trial') {
        return 'warning';
-      } else if (this.subscriptionData.state === 'cancelled') {
+      }
+      if (this.subscriptionData.state === 'cancelled') {
        return 'danger';
      }
      return '';
@@ -122,11 +146,6 @@ export default {
      const hash = md5(this.currentUser.email);
      return `${window.WootConstants.GRAVATAR_URL}${hash}?d=monsterid`;
    },
-    // Show if user has access to the route
-    showItem(item) {
-      const { role } = this.currentUser;
-      return window.roleWiseRoutes[role].indexOf(item.toStateName) > -1;
-    },
    showOptions() {
      this.showOptionsMenu = !this.showOptionsMenu;
    },
--- a/app/javascript/src/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/src/components/widgets/conversation/ConversationBox.vue
@@ -46,7 +46,7 @@
          <span v-if="isAdmin()">
            {{ $t('CONVERSATION.NO_INBOX_1') }}
            <br />
-            <router-link to="/u/settings/inboxes/new">
+            <router-link :to="newInboxURL">
              {{ $t('CONVERSATION.CLICK_HERE') }}
            </router-link>
            {{ $t('CONVERSATION.NO_INBOX_2') }}
@@ -88,6 +88,7 @@ import ReplyBox from './ReplyBox';
 import Conversation from './Conversation';
 import conversationMixin from '../../../mixins/conversations';
 import adminMixin from '../../../mixins/isAdmin';
+import { frontendURL } from '../../../helper/URLHelper';

 export default {
  components: {
@@ -169,6 +170,10 @@ export default {
      );
    },

+    newInboxURL() {
+      return frontendURL('settings/inboxes/new');
+    },
+
    shouldLoadMoreChats() {
      return !this.listLoadingStatus && !this.isLoadingPrevious;
    },
--- a/app/javascript/src/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/src/components/widgets/conversation/ConversationCard.vue
@@ -1,11 +1,34 @@
 <template>
-  <div class="conversation" :class="{ active: isActiveChat, 'unread-chat': hasUnread }" @click="cardClick(chat)" >
-    <Thumbnail :src="chat.meta.sender.thumbnail" :badge="chat.meta.sender.channel" class="columns" />
+  <div
+    class="conversation"
+    :class="{ active: isActiveChat, 'unread-chat': hasUnread }"
+    @click="cardClick(chat)"
+  >
+    <Thumbnail
+      :src="chat.meta.sender.thumbnail"
+      :badge="chat.meta.sender.channel"
+      class="columns"
+    />
    <div class="conversation--details columns">
-      <h4 class="conversation--user">{{ chat.meta.sender.name }} <span class="label" v-tooltip.bottom="inboxName(chat.inbox_id)" v-if="isInboxNameVisible">{{inboxName(chat.inbox_id)}}</span> </h4>
-      <p class="conversation--message" v-html="extractMessageText(lastMessage(chat))"></p>
+      <h4 class="conversation--user">
+        {{ chat.meta.sender.name }}
+        <span
+          v-if="isInboxNameVisible"
+          v-tooltip.bottom="inboxName(chat.inbox_id)"
+          class="label"
+        >
+          {{ inboxName(chat.inbox_id) }}
+        </span>
+      </h4>
+      <p
+        class="conversation--message"
+        v-html="extractMessageText(lastMessage(chat))"
+      ></p>
+
      <div class="conversation--meta">
-        <span class="timestamp">{{ dynamicTime(lastMessage(chat).created_at) }}</span>
+        <span class="timestamp">
+          {{ dynamicTime(lastMessage(chat).created_at) }}
+        </span>
        <span class="unread">{{ getUnreadCount }}</span>
      </div>
    </div>
@@ -14,27 +37,25 @@
 <script>
 /* eslint no-console: 0 */
 /* eslint no-extra-boolean-cast: 0 */
-/* global bus */
 import { mapGetters } from 'vuex';
 import Thumbnail from '../Thumbnail';
 import getEmojiSVG from '../emoji/utils';
 import conversationMixin from '../../../mixins/conversations';
 import timeMixin from '../../../mixins/time';
 import router from '../../../routes';
+import { frontendURL } from '../../../helper/URLHelper';

 export default {
-  props: [
-    'chat',
-  ],
-
-  mixins: [timeMixin, conversationMixin],
-
  components: {
    Thumbnail,
  },

-  created() {
-    // console.log(this.chat.inbox_id);
+  mixins: [timeMixin, conversationMixin],
+  props: {
+    chat: {
+      type: Object,
+      default: () => {},
+    },
  },

  computed: {
@@ -64,7 +85,7 @@ export default {
  methods: {
    cardClick(chat) {
      router.push({
-        path: `/u/conversations/${chat.id}`,
+        path: frontendURL(`conversations/${chat.id}`),
      });
    },
    extractMessageText(chatItem) {
@@ -85,7 +106,9 @@ export default {
    },
    getEmojiSVG,
    inboxName(inboxId) {
-      const [stateInbox] = this.inboxesList.filter(inbox => inbox.channel_id === inboxId);
+      const [stateInbox] = this.inboxesList.filter(
+        inbox => inbox.channel_id === inboxId
+      );
      return !stateInbox ? '' : stateInbox.label;
    },
  },