[ENGAGE-1935] - Rooms list otimization and new visual

src/App.vue

@@ -17,7 +17,6 @@ import { useConfig } from './store/modules/config';
 import { useProfile } from './store/modules/profile';
 import { useQuickMessages } from './store/modules/chats/quickMessages';
 import { useQuickMessageShared } from './store/modules/chats/quickMessagesShared';
-import { useRooms } from './store/modules/chats/rooms';
 import { useDashboard } from './store/modules/dashboard';
 
 import initHotjar from '@/plugins/Hotjar';
@@ -35,7 +34,6 @@ export default {
   },
 
   computed: {
-    ...mapState(useRooms, ['activeRoom']),
     ...mapState(useProfile, ['me']),
     ...mapState(useDashboard, ['viewedAgent']),
     ...mapState(useQuickMessages, ['nextQuickMessages']),

src/components/ModalQueuePriorizations.vue

@@ -177,6 +177,7 @@ export default {
             this.removeRoom(room.uuid);
           }
         });
+
         await this.getAllRooms({ limit: 100 });
 
         callUnnnicAlert({

src/components/chats/ContactInfo/TransferSession.vue

@@ -96,12 +96,8 @@ export default {
       this.$refs.roomsTransferFields.transfer();
     },
 
-    transferComplete(status) {
+    transferComplete() {
       this.isLoading = false;
-
-      if (status === 'success') {
-        this.resetActiveRoom();
-      }
     },
 
     resetActiveRoom() {

src/components/chats/RoomsTransferFields.vue

@@ -101,7 +101,11 @@ export default {
   },
 
   computed: {
-    ...mapState(useRooms, ['selectedRoomsToTransfer', 'contactToTransfer']),
+    ...mapState(useRooms, [
+      'selectedRoomsToTransfer',
+      'contactToTransfer',
+      'activeRoom',
+    ]),
     ...mapState(useProfile, ['me']),
 
     queuesDefault() {
@@ -178,7 +182,7 @@ export default {
     ...mapActions(useRooms, [
       'setSelectedRoomsToTransfer',
       'setContactToTransfer',
-      'removeRoom',
+      'setActiveRoom',
     ]),
 
     async getQueues() {
@@ -226,21 +230,24 @@ export default {
 
       const selectedQueue = this.selectedQueue?.[0]?.value;
       const selectedAgent = this.selectedAgent?.[0]?.value;
-
+      const activeRoom = { ...this.activeRoom };
       try {
+        await this.setActiveRoom(null);
+
         const response = await Room.bulkTranfer({
           rooms: roomsToTransfer,
           intended_queue: selectedQueue,
           intended_agent: selectedAgent,
         });
 
         if (response.status === 200) {
-          this.transferSuccess();
           this.resetRoomsToTransfer();
+          this.transferSuccess();
         } else {
           this.transferError();
         }
       } catch (error) {
+        await this.setActiveRoom(activeRoom);
         console.error(
           'An error occurred while performing the mass transfer:',
           error,

src/layouts/ChatsLayout/components/TheCardGroups/CardGroup/index.vue

@@ -1,22 +1,16 @@
 <template>
-  <UnnnicCollapse
-    v-model="isCollapseOpened"
-    size="md"
+  <section
+    class="card-group"
+    @click.stop
   >
-    <template #header>
-      <label class="card-group__header">
-        <section @click.stop>
-          <UnnnicCheckbox
-            v-if="withSelection"
-            v-model="collapseCheckboxValue"
-            class="card-group__checkbox"
-            size="sm"
-            @change="updateSelectAllRooms($event)"
-          />
-        </section>
-        {{ label }}
-      </label>
-    </template>
+    <UnnnicCheckbox
+      v-if="withSelection"
+      v-model="collapseCheckboxValue"
+      class="card-group__checkbox"
+      size="sm"
+      :textRight="$t('select_all')"
+      @change="updateSelectAllRooms($event)"
+    />
     <template v-if="rooms && rooms.length">
       <RoomCard
         v-for="room in rooms"
@@ -42,7 +36,7 @@
         @keypress.enter="open(discussion)"
       />
     </template>
-  </UnnnicCollapse>
+  </section>
 </template>
 
 <script>
@@ -113,6 +107,10 @@ export default {
     }
   },
 
+  unmounted() {
+    this.setSelectedRoomsToTransfer([]);
+  },
+
   methods: {
     ...mapActions(useRooms, ['setSelectedRoomsToTransfer']),
     open(room) {
@@ -162,9 +160,8 @@ export default {
     align-items: flex-start;
     gap: $unnnic-spacing-nano;
   }
-  &__checkbox {
-    padding: $unnnic-spacing-nano;
 
+  &__checkbox {
     :deep(.unnnic-checkbox) {
       // !important at fill is needed here because the
       // unnnicCollapse header is applying an unwanted style when hovering
@@ -174,4 +171,11 @@ export default {
     }
   }
 }
+
+.card-group .card-group__checkbox {
+  display: flex;
+  align-items: center;
+  padding: $unnnic-spacing-nano;
+  margin-bottom: $unnnic-spacing-sm;
+}
 </style>

src/layouts/ChatsLayout/components/TheCardGroups/Tag.vue

@@ -0,0 +1,64 @@
+<template>
+  <section
+    :class="{ 'filter-tag': true, 'filter-tag--active': active, clickable }"
+    @click.stop="$emit('click', label)"
+  >
+    <p class="filter-tag__label">
+      {{ label }}
+      {{ count ? `(${count})` : '' }}
+    </p>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'FilterTag',
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    count: {
+      type: Number,
+      default: 0,
+    },
+    active: { type: Boolean, default: false },
+    clickable: { type: Boolean, default: true },
+  },
+  emits: ['click'],
+};
+</script>
+
+<style lang="scss">
+.clickable {
+  cursor: pointer;
+}
+.filter-tag {
+  padding: $unnnic-spacing-nano $unnnic-spacing-xs;
+  background-color: $unnnic-color-neutral-light;
+  border-radius: 600px;
+
+  :hover {
+    color: $unnnic-color-weni-700;
+  }
+
+  &__label {
+    color: $unnnic-color-neutral-cloudy;
+    font-family: $unnnic-font-family-secondary;
+    font-size: $unnnic-font-size-body-md;
+    line-height: $unnnic-font-size-body-md + $unnnic-font-size-body-sm;
+  }
+
+  &--active {
+    background-color: white;
+    border: 1px solid $unnnic-color-weni-700;
+    .filter-tag__label {
+      color: $unnnic-color-weni-700;
+    }
+  }
+
+  &__label {
+    text-align: center;
+  }
+}
+</style>