From 7d4e6d0257e1b5190de00b274ea5f760d9a24f08 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 27 Feb 2023 11:36:28 +0530
Subject: [PATCH] chore: Refactor tables in all screen for RTL (#6525)

* chore: Refactor tables in all screen for RTL

* Notification page footer

* Apply suggestions from code review

* chore: Minor ixes

* chore: Adds rtl comment

* chore: Code clean up for contact table

---------

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
---
 .../dashboard/assets/scss/_rtl.scss           |  4 +--
 .../assets/scss/plugins/_multiselect.scss     |  2 +-
 .../assets/scss/widgets/_woot-tables.scss     | 11 +++---
 .../components/widgets/TableFooter.vue        | 12 +++++--
 .../components/widgets/UserAvatarWithName.vue |  6 +---
 .../contacts/components/ContactsTable.vue     | 32 ++++++++---------
 .../components/NotificationPanel.vue          | 14 ++++++--
 .../settings/campaigns/CampaignsTable.vue     | 35 ++++++++++++-------
 .../settings/macros/MacrosTableRow.vue        |  7 ++--
 .../settings/reports/components/CsatTable.vue | 15 ++++----
 .../components/overview/AgentTable.vue        | 17 ++++-----
 11 files changed, 91 insertions(+), 64 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/_rtl.scss b/app/javascript/dashboard/assets/scss/_rtl.scss
index 2a6e6d692..1dd9e7a62 100644
--- a/app/javascript/dashboard/assets/scss/_rtl.scss
+++ b/app/javascript/dashboard/assets/scss/_rtl.scss
@@ -354,12 +354,12 @@
     }
 
     thead th {
-      padding-left: var(--space-one);
+      padding-left: var(--space-small);
       padding-right: 0;
     }
 
     tbody td {
-      padding-left: var(--space-one);
+      padding-left: var(--space-small);
       padding-right: 0;
     }
   }
diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
index f1548fbea..4e534bc99 100644
--- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
+++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
@@ -48,7 +48,7 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        width: 100%;
+        width: fit-content;
       }
 
       p {
diff --git a/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss b/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
index 915840786..5bbe1248d 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
@@ -1,21 +1,22 @@
 table {
   border-spacing: 0;
-  font-size: $font-size-small;
+  font-size: var(--font-size-small);
 
   thead {
     th {
-      font-weight: $font-weight-bold;
+      font-weight: var(--font-weight-bold);
+      text-align: left;
       text-transform: uppercase;
     }
   }
 
   tbody {
     tr {
-      border-bottom: 1px solid $color-border-light;
+      border-bottom: 1px solid var(--color-border-light);
     }
 
     td {
-      padding: $space-one $space-small;
+      padding: var(--space-small);
     }
   }
 }
@@ -36,7 +37,7 @@ table {
 
   .agent-name {
     display: block;
-    font-weight: $font-weight-medium;
+    font-weight: var(--font-weight-medium);
     text-transform: capitalize;
   }
 
diff --git a/app/javascript/dashboard/components/widgets/TableFooter.vue b/app/javascript/dashboard/components/widgets/TableFooter.vue
index e28099bff..d1c02095b 100644
--- a/app/javascript/dashboard/components/widgets/TableFooter.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooter.vue
@@ -24,7 +24,7 @@
           <fluent-icon
             icon="chevron-left"
             size="18"
-            class="margin-left-minus-slab"
+            :class="pageFooterIconClass"
           />
         </woot-button>
         <woot-button
@@ -65,7 +65,7 @@
           <fluent-icon
             icon="chevron-right"
             size="18"
-            class="margin-left-minus-slab"
+            :class="pageFooterIconClass"
           />
         </woot-button>
       </div>
@@ -74,8 +74,11 @@
 </template>
 
 <script>
+import rtlMixin from 'shared/mixins/rtlMixin';
+
 export default {
   components: {},
+  mixins: [rtlMixin],
   props: {
     currentPage: {
       type: Number,
@@ -91,6 +94,11 @@ export default {
     },
   },
   computed: {
+    pageFooterIconClass() {
+      return this.isRTLView
+        ? 'margin-right-minus-slab'
+        : 'margin-left-minus-slab';
+    },
     isFooterVisible() {
       return this.totalCount && !(this.firstIndex > this.totalCount);
     },
diff --git a/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue b/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
index 932027887..9c0ebf87f 100644
--- a/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
+++ b/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
@@ -38,11 +38,7 @@ export default {
   text-align: left;
 
   .user-name {
-    margin: 0;
-    text-transform: capitalize;
-  }
-  .user-thumbnail-box {
-    margin-right: var(--space-small);
+    margin: 0 var(--space-small);
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
index 60ba4f4b6..edd090626 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@@ -34,6 +34,7 @@ import Spinner from 'shared/components/Spinner.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import timeMixin from 'dashboard/mixins/time';
+import rtlMixin from 'shared/mixins/rtlMixin';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
 
 export default {
@@ -42,7 +43,7 @@ export default {
     Spinner,
     VeTable,
   },
-  mixins: [clickaway, timeMixin],
+  mixins: [clickaway, timeMixin, rtlMixin],
   props: {
     contacts: {
       type: Array,
@@ -116,7 +117,7 @@ export default {
           key: 'name',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.NAME'),
           fixed: 'left',
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
           sortBy: this.sortConfig.name || '',
           width: 300,
           renderBodyCell: ({ row }) => (
@@ -152,7 +153,7 @@ export default {
           field: 'email',
           key: 'email',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.EMAIL_ADDRESS'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
           sortBy: this.sortConfig.email || '',
           width: 240,
           renderBodyCell: ({ row }) => {
@@ -176,27 +177,27 @@ export default {
           key: 'phone_number',
           sortBy: this.sortConfig.phone_number || '',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.PHONE_NUMBER'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
         },
         {
           field: 'company',
           key: 'company',
           sortBy: this.sortConfig.company_name || '',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.COMPANY'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
         },
         {
           field: 'city',
           key: 'city',
           sortBy: this.sortConfig.city || '',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.CITY'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
         },
         {
           field: 'country',
           key: 'country',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.COUNTRY'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
           sortBy: this.sortConfig.country || '',
           renderBodyCell: ({ row }) => {
             if (row.country) {
@@ -213,7 +214,7 @@ export default {
           field: 'profiles',
           key: 'profiles',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.SOCIAL_PROFILES'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
           renderBodyCell: ({ row }) => {
             const { profiles } = row;
 
@@ -244,21 +245,21 @@ export default {
           key: 'last_activity_at',
           sortBy: this.sortConfig.last_activity_at || '',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.LAST_ACTIVITY'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
         },
         {
           field: 'created_at',
           key: 'created_at',
           sortBy: this.sortConfig.created_at || '',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.CREATED_AT'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
         },
         {
           field: 'conversationsCount',
           key: 'conversationsCount',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.CONVERSATIONS'),
           width: 150,
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
         },
       ];
     },
@@ -301,11 +302,10 @@ export default {
     text-align: left;
 
     .user-block {
-      min-width: 0;
-    }
-
-    .user-thumbnail-box {
-      margin-right: var(--space-small);
+      align-items: flex-start;
+      display: flex;
+      flex-direction: column;
+      margin: 0 var(--space-small);
     }
 
     .user-name {
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
index 7bed5ba88..7b5340a65 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
@@ -62,7 +62,7 @@
             <fluent-icon
               icon="chevron-left"
               size="16"
-              class="margin-left-minus-slab"
+              :class="notificationPanelFooterIconClass"
             />
           </woot-button>
           <woot-button
@@ -96,7 +96,7 @@
             <fluent-icon
               icon="chevron-right"
               size="16"
-              class="margin-left-minus-slab"
+              :class="notificationPanelFooterIconClass"
             />
           </woot-button>
         </div>
@@ -109,6 +109,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { mixin as clickaway } from 'vue-clickaway';
+import rtlMixin from 'shared/mixins/rtlMixin';
 
 import NotificationPanelList from './NotificationPanelList';
 
@@ -116,7 +117,7 @@ export default {
   components: {
     NotificationPanelList,
   },
-  mixins: [clickaway],
+  mixins: [clickaway, rtlMixin],
   data() {
     return {
       pageSize: 15,
@@ -129,6 +130,11 @@ export default {
       records: 'notifications/getNotifications',
       uiFlags: 'notifications/getUIFlags',
     }),
+    notificationPanelFooterIconClass() {
+      return this.isRTLView
+        ? 'margin-right-minus-slab'
+        : 'margin-left-minus-slab';
+    },
     totalUnreadNotifications() {
       return this.meta.unreadCount;
     },
@@ -249,6 +255,7 @@ export default {
   left: var(--space-jumbo);
   margin: var(--space-small);
 }
+
 .header-wrap {
   flex-direction: row;
   align-items: center;
@@ -272,6 +279,7 @@ export default {
     font-size: var(--font-size-micro);
     font-weight: var(--font-weight-bold);
     margin-left: var(--space-smaller);
+    margin-right: var(--space-smaller);
   }
 
   .action-button {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
index 993376f12..bd7b43aec 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
@@ -26,6 +26,7 @@ import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName';
 import campaignMixin from 'shared/mixins/campaignMixin';
 import timeMixin from 'dashboard/mixins/time';
+import rtlMixin from 'shared/mixins/rtlMixin';
 import InboxName from 'dashboard/components/widgets/InboxName';
 
 export default {
@@ -35,7 +36,13 @@ export default {
     VeTable,
   },
 
-  mixins: [clickaway, timeMixin, campaignMixin, messageFormatterMixin],
+  mixins: [
+    clickaway,
+    timeMixin,
+    campaignMixin,
+    messageFormatterMixin,
+    rtlMixin,
+  ],
 
   props: {
     campaigns: {
@@ -98,7 +105,7 @@ export default {
           key: 'title',
           title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.TITLE'),
           fixed: 'left',
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
           renderBodyCell: ({ row }) => (
             <div class="row--title-block">
               <h6 class="sub-block-title title text-truncate">{row.title}</h6>
@@ -110,7 +117,7 @@ export default {
           field: 'message',
           key: 'message',
           title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.MESSAGE'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
           width: 350,
           renderBodyCell: ({ row }) => {
             if (row.message) {
@@ -129,7 +136,7 @@ export default {
           field: 'inbox',
           key: 'inbox',
           title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.INBOX'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
           renderBodyCell: ({ row }) => {
             return <InboxName inbox={row.inbox} />;
           },
@@ -142,7 +149,7 @@ export default {
             field: 'enabled',
             key: 'enabled',
             title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.STATUS'),
-            align: 'left',
+            align: this.isRTLView ? 'right' : 'left',
             renderBodyCell: ({ row }) => {
               const labelText = row.enabled
                 ? this.$t('CAMPAIGN.LIST.STATUS.ENABLED')
@@ -155,7 +162,7 @@ export default {
             field: 'sender',
             key: 'sender',
             title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.SENDER'),
-            align: 'left',
+            align: this.isRTLView ? 'right' : 'left',
             renderBodyCell: ({ row }) => {
               if (row.sender) return <UserAvatarWithName user={row.sender} />;
               return this.$t('CAMPAIGN.LIST.SENDER.BOT');
@@ -165,7 +172,7 @@ export default {
             field: 'url',
             key: 'url',
             title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.URL'),
-            align: 'left',
+            align: this.isRTLView ? 'right' : 'left',
             renderBodyCell: ({ row }) => (
               <div class="text-truncate">
                 <a
@@ -183,14 +190,14 @@ export default {
             field: 'timeOnPage',
             key: 'timeOnPage',
             title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.TIME_ON_PAGE'),
-            align: 'left',
+            align: this.isRTLView ? 'right' : 'left',
           },
 
           {
             field: 'buttons',
             key: 'buttons',
             title: '',
-            align: 'left',
+            align: this.isRTLView ? 'right' : 'left',
             renderBodyCell: row => (
               <div class="button-wrapper">
                 <WootButton
@@ -221,7 +228,7 @@ export default {
           field: 'campaign_status',
           key: 'campaign_status',
           title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.STATUS'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
           renderBodyCell: ({ row }) => {
             const labelText =
               row.campaign_status === 'completed'
@@ -236,13 +243,13 @@ export default {
           field: 'scheduledAt',
           key: 'scheduledAt',
           title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.SCHEDULED_AT'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
         },
         {
           field: 'buttons',
           key: 'buttons',
           title: '',
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
           renderBodyCell: row => (
             <div class="button-wrapper">
               <WootButton
@@ -272,6 +279,10 @@ export default {
     }
     tbody.ve-table-body .ve-table-body-tr .ve-table-body-td {
       padding: var(--space-slab) var(--space-two);
+
+      .inbox--name {
+        margin: 0;
+      }
     }
   }
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
index 29419db85..648388e98 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
@@ -4,13 +4,13 @@
     <td>
       <div class="avatar-container">
         <thumbnail :username="macro.created_by.name" size="24px" />
-        <span class="ml-2">{{ macro.created_by.name }}</span>
+        <span>{{ macro.created_by.name }}</span>
       </div>
     </td>
     <td>
       <div class="avatar-container">
         <thumbnail :username="macro.updated_by.name" size="24px" />
-        <span class="ml-2">{{ macro.updated_by.name }}</span>
+        <span>{{ macro.updated_by.name }}</span>
       </div>
     </td>
     <td>{{ visibilityLabel }}</td>
@@ -68,7 +68,8 @@ export default {
   align-items: center;
 
   span {
-    margin-left: var(--space-one);
+    margin-left: var(--space-small);
+    margin-right: var(--space-small);
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
index 2ced3c62a..1f1a0da94 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
@@ -26,13 +26,14 @@ import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName'
 import { CSAT_RATINGS } from 'shared/constants/messages';
 import { mapGetters } from 'vuex';
 import timeMixin from 'dashboard/mixins/time';
+import rtlMixin from 'shared/mixins/rtlMixin';
 
 export default {
   components: {
     VeTable,
     VePagination,
   },
-  mixins: [timeMixin],
+  mixins: [timeMixin, rtlMixin],
   props: {
     pageIndex: {
       type: Number,
@@ -51,7 +52,7 @@ export default {
           field: 'contact',
           key: 'contact',
           title: this.$t('CSAT_REPORTS.TABLE.HEADER.CONTACT_NAME'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
           width: 200,
           renderBodyCell: ({ row }) => {
             if (row.contact) {
@@ -64,7 +65,7 @@ export default {
           field: 'assignedAgent',
           key: 'assignedAgent',
           title: this.$t('CSAT_REPORTS.TABLE.HEADER.AGENT_NAME'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
           width: 200,
           renderBodyCell: ({ row }) => {
             if (row.assignedAgent) {
@@ -94,14 +95,14 @@ export default {
           field: 'feedbackText',
           key: 'feedbackText',
           title: this.$t('CSAT_REPORTS.TABLE.HEADER.FEEDBACK_TEXT'),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
           width: 400,
         },
         {
-          field: 'converstionId',
-          key: 'converstionId',
+          field: 'conversationId',
+          key: 'conversationId',
           title: '',
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
           width: 100,
           renderBodyCell: ({ row }) => {
             const routerParams = {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
index 4ad35288a..8f4866ddb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
@@ -32,6 +32,7 @@
 import { VeTable, VePagination } from 'vue-easytable';
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
+import rtlMixin from 'shared/mixins/rtlMixin';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
 export default {
@@ -42,6 +43,7 @@ export default {
     VeTable,
     VePagination,
   },
+  mixins: [rtlMixin],
   props: {
     agents: {
       type: Array,
@@ -83,7 +85,7 @@ export default {
             'OVERVIEW_REPORTS.AGENT_CONVERSATIONS.TABLE_HEADER.AGENT'
           ),
           fixed: 'left',
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
           width: 25,
           renderBodyCell: ({ row }) => (
             <div class="row-user-block">
@@ -106,7 +108,7 @@ export default {
           title: this.$t(
             'OVERVIEW_REPORTS.AGENT_CONVERSATIONS.TABLE_HEADER.OPEN'
           ),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
           width: 10,
         },
         {
@@ -115,7 +117,7 @@ export default {
           title: this.$t(
             'OVERVIEW_REPORTS.AGENT_CONVERSATIONS.TABLE_HEADER.UNATTENDED'
           ),
-          align: 'left',
+          align: this.isRTLView ? 'right' : 'left',
           width: 10,
         },
       ];
@@ -165,22 +167,21 @@ export default {
     text-align: left;
 
     .user-block {
+      align-items: flex-start;
       display: flex;
       flex-direction: column;
       min-width: 0;
+      margin: 0 var(--space-small);
+
       .title {
         font-size: var(--font-size-small);
         margin: var(--zero);
-        line-height: 1;
+        line-height: 1.2;
       }
       .sub-title {
         font-size: var(--font-size-mini);
       }
     }
-
-    .user-thumbnail-box {
-      margin-right: var(--space-small);
-    }
   }
 
   .table-pagination {