From 655c5853586c178ae343231f0a2c8507b198ec05 Mon Sep 17 00:00:00 2001 From: Pranav Raj S Date: Mon, 13 Jan 2020 11:17:03 +0530 Subject: [PATCH] Feature: View a contact's previous conversation (#422) * Add API to fetch conversations of a contact * Add conversation list in sidebar --- .../v1/contacts/conversations_controller.rb | 23 +++++ app/javascript/dashboard/api/contacts.js | 5 ++ .../dashboard/api/specs/contacts.spec.js | 14 +++ .../scss/widgets/_conversation-card.scss | 9 ++ .../widgets/conversation/ConversationCard.vue | 11 ++- .../dashboard/i18n/locale/en/contact.json | 6 +- .../conversation/ContactConversations.vue | 88 +++++++++++++++++++ .../conversation/ContactDetailsItem.vue | 2 +- .../dashboard/conversation/ContactPanel.vue | 9 +- app/javascript/dashboard/store/index.js | 2 + .../store/modules/contactConversations.js | 64 ++++++++++++++ .../contactConversations/actions.spec.js | 41 +++++++++ .../specs/contactConversations/fixtures.js | 82 +++++++++++++++++ .../contactConversations/getters.spec.js | 23 +++++ .../contactConversations/mutations.spec.js | 29 ++++++ .../dashboard/store/mutation-types.js | 4 + .../conversations/index.json.jbuilder | 26 ++++++ config/routes.rb | 7 +- .../contacts/conversations_controller_spec.rb | 51 +++++++++++ 19 files changed, 491 insertions(+), 5 deletions(-) create mode 100644 app/controllers/api/v1/contacts/conversations_controller.rb create mode 100644 app/javascript/dashboard/api/specs/contacts.spec.js create mode 100644 app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue create mode 100644 app/javascript/dashboard/store/modules/contactConversations.js create mode 100644 app/javascript/dashboard/store/modules/specs/contactConversations/actions.spec.js create mode 100644 app/javascript/dashboard/store/modules/specs/contactConversations/fixtures.js create mode 100644 app/javascript/dashboard/store/modules/specs/contactConversations/getters.spec.js create mode 100644 app/javascript/dashboard/store/modules/specs/contactConversations/mutations.spec.js create mode 100644 app/views/api/v1/contacts/conversations/index.json.jbuilder create mode 100644 spec/controllers/api/v1/contacts/conversations_controller_spec.rb diff --git a/app/controllers/api/v1/contacts/conversations_controller.rb b/app/controllers/api/v1/contacts/conversations_controller.rb new file mode 100644 index 000000000..bce503ad6 --- /dev/null +++ b/app/controllers/api/v1/contacts/conversations_controller.rb @@ -0,0 +1,23 @@ +class Api::V1::Contacts::ConversationsController < Api::BaseController + def index + @conversations = current_account.conversations.includes( + :assignee, :contact, :inbox + ).where(inbox_id: inbox_ids, contact_id: permitted_params[:contact_id]) + end + + private + + def inbox_ids + if current_user.administrator? + current_account.inboxes.pluck(:id) + elsif current_user.agent? + current_user.assigned_inboxes.pluck(:id) + else + [] + end + end + + def permitted_params + params.permit(:contact_id) + end +end diff --git a/app/javascript/dashboard/api/contacts.js b/app/javascript/dashboard/api/contacts.js index 2addd9ce1..bad89b182 100644 --- a/app/javascript/dashboard/api/contacts.js +++ b/app/javascript/dashboard/api/contacts.js @@ -1,9 +1,14 @@ +/* global axios */ import ApiClient from './ApiClient'; class ContactAPI extends ApiClient { constructor() { super('contacts'); } + + getConversations(contactId) { + return axios.get(`${this.url}/${contactId}/conversations`); + } } export default new ContactAPI(); diff --git a/app/javascript/dashboard/api/specs/contacts.spec.js b/app/javascript/dashboard/api/specs/contacts.spec.js new file mode 100644 index 000000000..1021c0409 --- /dev/null +++ b/app/javascript/dashboard/api/specs/contacts.spec.js @@ -0,0 +1,14 @@ +import agents from '../contacts'; +import ApiClient from '../ApiClient'; + +describe('#ContactsAPI', () => { + it('creates correct instance', () => { + expect(agents).toBeInstanceOf(ApiClient); + expect(agents).toHaveProperty('get'); + expect(agents).toHaveProperty('show'); + expect(agents).toHaveProperty('create'); + expect(agents).toHaveProperty('update'); + expect(agents).toHaveProperty('delete'); + expect(agents).toHaveProperty('getConversations'); + }); +}); diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss index 83476518d..a4f632085 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss @@ -41,6 +41,7 @@ color: $color-body; width: 27rem; white-space: nowrap; + max-width: 96%; } .conversation--meta { @@ -91,4 +92,12 @@ font-weight: $font-weight-medium; } } + + &.compact { + padding-left: 0; + + .conversation--details { + margin-left: 0; + } + } } diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue index 56f783cde..af91aadd5 100644 --- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue +++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue @@ -5,6 +5,7 @@ @click="cardClick(chat)" > {{ chat.meta.sender.name }} @@ -58,6 +59,14 @@ export default { type: Object, default: () => {}, }, + hideInboxName: { + type: Boolean, + default: false, + }, + hideThumbnail: { + type: Boolean, + default: false, + }, }, computed: { diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json index 82078105a..5611c5842 100644 --- a/app/javascript/dashboard/i18n/locale/en/contact.json +++ b/app/javascript/dashboard/i18n/locale/en/contact.json @@ -3,6 +3,10 @@ "BROWSER": "Browser", "OS": "Operating System", "INITIATED_FROM": "Initiated from", - "INITIATED_AT": "Initiated at" + "INITIATED_AT": "Initiated at", + "CONVERSATIONS": { + "NO_RECORDS_FOUND": "There are no previous conversations associated to this contact.", + "TITLE": "Previous Conversations" + } } } diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue new file mode 100644 index 000000000..815ceb8d8 --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue @@ -0,0 +1,88 @@ + + + + + diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue index 1f69a97ca..2211d79de 100644 --- a/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue +++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue @@ -4,7 +4,7 @@ {{ title }} -
+
{{ value }}
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue index 93a8feb32..8fc660dfe 100644 --- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue +++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue @@ -54,15 +54,22 @@ icon="ion-clock" /> +