feat: Replace rtlMixin to a composable (#9924)

This PR will replace the usage of `rtlMixin` to the `useUISettings` composable, and moved the method to component itself.
2024-08-12 15:50:21 +05:30
parent 96d60674aa
commit 452096f4b2
10 changed files with 74 additions and 95 deletions
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@@ -1,4 +1,5 @@
 <script>
+import { mapGetters } from 'vuex';
 import { VeTable } from 'vue-easytable';
 import { getCountryFlag } from 'dashboard/helper/flag';

@@ -6,7 +7,6 @@ import Spinner from 'shared/components/Spinner.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import { dynamicTime } from 'shared/helpers/timeHelper';
-import rtlMixin from 'shared/mixins/rtlMixin';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';

 export default {
@@ -15,7 +15,6 @@ export default {
    Spinner,
    VeTable,
  },
-  mixins: [rtlMixin],
  props: {
    contacts: {
      type: Array,
@@ -52,6 +51,9 @@ export default {
    };
  },
  computed: {
+    ...mapGetters({
+      isRTL: 'accounts/isRTL',
+    }),
    tableData() {
      if (this.isLoading) {
        return [];
@@ -85,7 +87,7 @@ export default {
          key: 'name',
          title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.NAME'),
          fixed: 'left',
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
          sortBy: this.sortConfig.name || '',
          width: 300,
          renderBodyCell: ({ row }) => (
@@ -121,7 +123,7 @@ export default {
          field: 'email',
          key: 'email',
          title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.EMAIL_ADDRESS'),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
          sortBy: this.sortConfig.email || '',
          width: 240,
          renderBodyCell: ({ row }) => {
@@ -145,27 +147,27 @@ export default {
          key: 'phone_number',
          sortBy: this.sortConfig.phone_number || '',
          title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.PHONE_NUMBER'),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
        },
        {
          field: 'company',
          key: 'company',
          sortBy: this.sortConfig.company_name || '',
          title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.COMPANY'),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
        },
        {
          field: 'city',
          key: 'city',
          sortBy: this.sortConfig.city || '',
          title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.CITY'),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
        },
        {
          field: 'country',
          key: 'country',
          title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.COUNTRY'),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
          sortBy: this.sortConfig.country || '',
          renderBodyCell: ({ row }) => {
            if (row.country) {
@@ -182,7 +184,7 @@ export default {
          field: 'profiles',
          key: 'profiles',
          title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.SOCIAL_PROFILES'),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
          renderBodyCell: ({ row }) => {
            const { profiles } = row;

@@ -213,14 +215,14 @@ export default {
          key: 'last_activity_at',
          sortBy: this.sortConfig.last_activity_at || '',
          title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.LAST_ACTIVITY'),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
        },
        {
          field: 'created_at',
          key: 'created_at',
          sortBy: this.sortConfig.created_at || '',
          title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.CREATED_AT'),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
        },
      ];
    },
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
@@ -1,6 +1,5 @@
 <script>
 import { mapGetters } from 'vuex';
-import rtlMixin from 'shared/mixins/rtlMixin';
 import NotificationPanelList from './NotificationPanelList.vue';

 import { ACCOUNT_EVENTS } from '../../../../helper/AnalyticsHelper/events';
@@ -9,7 +8,6 @@ export default {
  components: {
    NotificationPanelList,
  },
-  mixins: [rtlMixin],
  data() {
    return {
      pageSize: 15,
@@ -21,9 +19,6 @@ export default {
      records: 'notifications/getNotifications',
      uiFlags: 'notifications/getUIFlags',
    }),
-    notificationPanelFooterIconClass() {
-      return this.isRTLView ? '-mr-3' : '-ml-3';
-    },
    totalUnreadNotifications() {
      return this.meta.unreadCount;
    },
@@ -201,7 +196,7 @@ export default {
            <fluent-icon
              icon="chevron-left"
              size="16"
-              :class="notificationPanelFooterIconClass"
+              class="rtl:-mr-3 ltr:-ml-3"
            />
          </woot-button>
          <woot-button
@@ -236,7 +231,7 @@ export default {
            <fluent-icon
              icon="chevron-right"
              size="16"
-              :class="notificationPanelFooterIconClass"
+              class="rtl:-mr-3 ltr:-ml-3"
            />
          </woot-button>
        </div>
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
@@ -4,14 +4,12 @@ import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.
 import { CSAT_RATINGS } from 'shared/constants/messages';
 import { mapGetters } from 'vuex';
 import { messageStamp, dynamicTime } from 'shared/helpers/timeHelper';
-import rtlMixin from 'shared/mixins/rtlMixin';

 export default {
  components: {
    VeTable,
    VePagination,
  },
-  mixins: [rtlMixin],
  props: {
    pageIndex: {
      type: Number,
@@ -20,6 +18,7 @@ export default {
  },
  computed: {
    ...mapGetters({
+      isRTL: 'accounts/isRTL',
      csatResponses: 'csat/getCSATResponses',
      metrics: 'csat/getMetrics',
    }),
@@ -29,7 +28,7 @@ export default {
          field: 'contact',
          key: 'contact',
          title: this.$t('CSAT_REPORTS.TABLE.HEADER.CONTACT_NAME'),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
          width: 200,
          renderBodyCell: ({ row }) => {
            if (row.contact) {
@@ -48,7 +47,7 @@ export default {
          field: 'assignedAgent',
          key: 'assignedAgent',
          title: this.$t('CSAT_REPORTS.TABLE.HEADER.AGENT_NAME'),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
          width: 200,
          renderBodyCell: ({ row }) => {
            if (row.assignedAgent) {
@@ -78,14 +77,14 @@ export default {
          field: 'feedbackText',
          key: 'feedbackText',
          title: this.$t('CSAT_REPORTS.TABLE.HEADER.FEEDBACK_TEXT'),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
          width: 400,
        },
        {
          field: 'conversationId',
          key: 'conversationId',
          title: '',
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
          width: 100,
          renderBodyCell: ({ row }) => {
            const routerParams = {
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
@@ -1,8 +1,8 @@
 <script>
+import { mapGetters } from 'vuex';
 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 {
@@ -13,7 +13,6 @@ export default {
    VeTable,
    VePagination,
  },
-  mixins: [rtlMixin],
  props: {
    agents: {
      type: Array,
@@ -33,6 +32,9 @@ export default {
    },
  },
  computed: {
+    ...mapGetters({
+      isRTL: 'accounts/isRTL',
+    }),
    tableData() {
      return this.agentMetrics
        .filter(agentMetric => this.getAgentInformation(agentMetric.id))
@@ -57,7 +59,7 @@ export default {
            'OVERVIEW_REPORTS.AGENT_CONVERSATIONS.TABLE_HEADER.AGENT'
          ),
          fixed: 'left',
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
          width: 25,
          renderBodyCell: ({ row }) => (
            <div class="row-user-block">
@@ -82,7 +84,7 @@ export default {
          title: this.$t(
            'OVERVIEW_REPORTS.AGENT_CONVERSATIONS.TABLE_HEADER.OPEN'
          ),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
          width: 10,
        },
        {
@@ -91,7 +93,7 @@ export default {
          title: this.$t(
            'OVERVIEW_REPORTS.AGENT_CONVERSATIONS.TABLE_HEADER.UNATTENDED'
          ),
-          align: this.isRTLView ? 'right' : 'left',
+          align: this.isRTL ? 'right' : 'left',
          width: 10,
        },
      ];