Skip to content

Commit

Permalink
Merge branch 'feature/bulk-contact-transfer' into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
Aldemylla committed Apr 1, 2024
2 parents 0accbbb + 05da1ca commit 2a84d71
Show file tree
Hide file tree
Showing 12 changed files with 448 additions and 54 deletions.
2 changes: 1 addition & 1 deletion src/components/chats/ContactInfo/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@
<DiscussionsSession v-if="isHistory" />
<AsideSlotTemplateSection v-if="!isHistory">
<p class="title-transfer-chat">
{{ $t('contact_info.transfer_contact') }}
{{ $tc('transfer_contact') }}
</p>
<section class="transfer-section">
<section class="transfer__radios">
Expand Down
163 changes: 163 additions & 0 deletions src/components/chats/chat/ModalBulkTransfer.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
<template>
<UnnnicModal
:text="$t('bulk_transfer.transfer_selected_contacts')"
class="modal-bulk-transfer"
:closeIcon="false"
>
<section class="modal-bulk-transfer__select-destination">
<section class="select-destination__radios">
<UnnnicRadio
size="md"
v-model="destinationType"
value="agent"
>
{{ $t('agent') }}
</UnnnicRadio>

<UnnnicRadio
size="md"
v-model="destinationType"
value="queue"
>
{{ $t('queue') }}
</UnnnicRadio>
</section>
<UnnnicSelectSmart
v-model="selectedDestination"
:options="destinations"
autocomplete
autocompleteIconLeft
autocompleteClearOnFocus
/>
</section>

<template #options>
<UnnnicButton
:text="$t('cancel')"
type="tertiary"
size="large"
@click="$emit('close')"
/>
<UnnnicButton
:text="$t('confirm')"
type="primary"
size="large"
@click="bulkTransfer"
:disabled="selectedDestination.length === 0"
/>
</template>
</UnnnicModal>
</template>

<script>
import Room from '@/services/api/resources/chats/room';
import { mapState } from 'vuex';
// import Sector from '@/services/api/resources/settings/sector';
import Queue from '@/services/api/resources/settings/queue';
export default {
name: 'ModalBulkTransfer',
data() {
return {
selectedDestination: [],
destinationType: 'agent',
destinations: [],
queues: null,
agents: null,
};
},
created() {
this.getDestinations();
},
computed: {
...mapState({
selectedRoomsToTransfer: (state) =>
state.chats.rooms.selectedRoomsToTransfer,
}),
},
methods: {
async getDestinations() {
const newQueues = await Queue.listByProject();
const treatedQueues = [{ value: '', label: this.$t('select_queue') }];
treatedQueues
.concat(newQueues.results)
.forEach(({ name, sector_name, uuid }) => {
treatedQueues.push({
label: `${name} | ${this.$t('sector.title')} ${sector_name}`,
value: uuid,
});
});
this.queues = treatedQueues;
},
// async listAgents() {
// this.agents = (
// await Sector.agents({ sectorUuid: this.room.queue.sector })
// )
// .filter((agent) => agent.email !== this.$store.state.profile.me.email)
// .map(({ first_name, last_name, email }) => {
// return {
// name: [first_name, last_name].join(' ').trim() || email,
// email,
// };
// });
// },
bulkTransfer() {
const { destinationType, selectedRoomsToTransfer } = this;
const destination = this.selectedDestination?.[0]?.value;
const destinationProperty =
destinationType === 'queue' ? 'intended_queue' : 'intended_agent';
Room.bulkTranfer({
rooms: selectedRoomsToTransfer,
[destinationProperty]: destination,
});
},
},
watch: {
destinationType(newDestinationType) {
const { queues, agents } = this;
this.destinations = newDestinationType === 'queue' ? queues : agents;
},
},
};
</script>
<style lang="scss" scoped>
.modal-bulk-transfer {
:deep(.unnnic-modal-container-background) {
overflow: visible;
.unnnic-modal-container-background-body {
padding-top: $unnnic-spacing-giant;
&-description-container {
padding-bottom: 0;
}
&-description,
&-description-container {
overflow: visible;
}
}
}
&__select-destination {
display: grid;
gap: $unnnic-spacing-sm;
}
.select-destination {
&__radios {
display: flex;
gap: $unnnic-spacing-sm;
}
}
}
</style>
4 changes: 4 additions & 0 deletions src/components/settings/forms/Sector.vue
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,10 @@
v-model="sector.can_edit_custom_fields"
:textRight="$t('sector.additional_options.edit_custom_fields')"
/>
<UnnnicSwitch
v-model="sector.config.can_use_bulk_transfer"
:textRight="$t('sector.additional_options.bulk_transfer')"
/>
</div>
<div>
<h2 class="title">{{ $t('sector.managers.working_day.title') }}</h2>
Expand Down
73 changes: 73 additions & 0 deletions src/layouts/ChatsLayout/components/FooterButton/index.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<template>
<section class="chats-layout-footer-button">
<section
v-if="selectedRoomsToTransfer.length >= 1"
class="chats-layout-footer-button__bulk-transfer"
>
<UnnnicButton
class="chats-layout-footer-button__button"
:text="$tc('transfer_contact', selectedRoomsToTransfer.length)"
iconLeft="read_more"
type="primary"
size="small"
@click="handleModalBulkTransfer"
/>
<ModalBulkTransfer
v-if="isModalBulkTransferOpened"
@close="handleModalBulkTransfer"
/>
</section>
<UnnnicButton
v-else
class="chats-layout-footer-button__button"
:text="$t('chats.see_history')"
iconLeft="history"
type="secondary"
size="small"
@click="navigate('closed-rooms')"
/>
</section>
</template>

<script>
import { mapState } from 'vuex';
import ModalBulkTransfer from '@/components/chats/chat/ModalBulkTransfer.vue';
export default {
name: 'ChatsLayoutFooterButton',
components: {
ModalBulkTransfer,
},
data() {
return {
isModalBulkTransferOpened: false,
};
},
computed: {
...mapState({
selectedRoomsToTransfer: (state) =>
state.chats.rooms.selectedRoomsToTransfer,
}),
},
methods: {
handleModalBulkTransfer() {
this.isModalBulkTransferOpened = !this.isModalBulkTransferOpened;
},
navigate(name) {
this.$router.push({
name,
});
},
},
};
</script>

<style lang="scss" scoped>
.chats-layout-footer-button {
&__button {
width: 100%;
}
}
</style>
Original file line number Diff line number Diff line change
@@ -1,16 +1,26 @@
<template>
<UnnnicChatsContact
:title="room.contact.name"
:lastMessage="lastMessage"
:waitingTime="waitingTimeComputed"
:unreadMessages="unreadMessages"
:tabindex="0"
:selected="room.uuid === activeRoomId && !unselected"
:locale="locale"
@click="$emit('click')"
@keypress.enter="$emit('click')"
<section
class="room-card__container"
:class="{ 'room-card__container--with-selection': withSelection }"
>
</UnnnicChatsContact>
<UnnnicCheckbox
size="sm"
v-if="withSelection"
v-model="checkboxValue"
class="room-card__checkbox"
/>
<UnnnicChatsContact
:title="room.contact.name"
:lastMessage="lastMessage"
:waitingTime="waitingTimeComputed"
:unreadMessages="unreadMessages"
:tabindex="0"
:selected="room.uuid === activeRoomId && active"
:locale="locale"
@click="$emit('click')"
@keypress.enter="$emit('click')"
/>
</section>
</template>

<script>
Expand All @@ -26,7 +36,15 @@ export default {
type: Object,
required: true,
},
unselected: {
active: {
type: Boolean,
default: false,
},
selected: {
type: Boolean,
default: false,
},
withSelection: {
type: Boolean,
default: false,
},
Expand All @@ -51,6 +69,7 @@ export default {
data: () => ({
waitingTime: 0,
timer: null,
checkboxValue: false,
}),
computed: {
Expand Down Expand Up @@ -81,5 +100,30 @@ export default {
return this.$i18n.locale;
},
},
watch: {
selected(newSelected) {
this.checkboxValue = newSelected;
},
checkboxValue(newCheckboxValue) {
this.$emit('update-selected', newCheckboxValue);
},
},
};
</script>
<style lang="scss" scoped>
.room-card__container {
display: grid;
align-items: center;
&--with-selection {
grid-template-columns: auto 1fr;
}
}
.room-card {
&__checkbox {
padding: $unnnic-spacing-nano;
}
}
</style>
Loading

0 comments on commit 2a84d71

Please sign in to comment.