feat: Ability to edit a contact (#1092)

Ability to edit contact information in conversation sidebar Co-authored-by: Sojan <sojan@pepalo.com>
chatwoot · Aug 22, 2020 · 8cf05f1 · 8cf05f1
1 parent ec6cd4b
commit 8cf05f1
Show file tree

Hide file tree

Showing 23 changed files with 709 additions and 133 deletions.
diff --git a/app/controllers/api/v1/accounts/contacts_controller.rb b/app/controllers/api/v1/accounts/contacts_controller.rb
@@ -20,6 +20,11 @@ def create
 
   def update
     @contact.update!(contact_update_params)
+  rescue ActiveRecord::RecordInvalid => e
+    render json: {
+      message: e.record.errors.full_messages.join(', '),
+      contact: Contact.find_by(email: contact_params[:email])
+    }, status: :unprocessable_entity
   end
 
   def search
@@ -43,7 +48,7 @@ def build_contact_inbox
   end
 
   def contact_params
-    params.require(:contact).permit(:name, :email, :phone_number, custom_attributes: {})
+    params.require(:contact).permit(:name, :email, :phone_number, additional_attributes: {}, custom_attributes: {})
   end
 
   def contact_custom_attributes

diff --git a/app/javascript/dashboard/assets/scss/_foundation-custom.scss b/app/javascript/dashboard/assets/scss/_foundation-custom.scss
@@ -37,3 +37,9 @@ code {
     padding: $space-two;
   }
 }
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/app/javascript/dashboard/assets/scss/_foundation-settings.scss b/app/javascript/dashboard/assets/scss/_foundation-settings.scss
@@ -347,7 +347,7 @@ $helptext-color: $header-color;
 $helptext-font-size: $font-size-small;
 $helptext-font-style: italic;
 $input-prefix-color: $header-color;
-$input-prefix-background: $light-gray;
+$input-prefix-background: var(--b-100);
 $input-prefix-border: 1px solid $color-border;
 $input-prefix-padding: 1rem;
 $form-label-color: $header-color;

diff --git a/app/javascript/dashboard/assets/scss/_helper-classes.scss b/app/javascript/dashboard/assets/scss/_helper-classes.scss
@@ -55,5 +55,17 @@
 input,
 textarea,
 select {
-  border-radius: 4px !important;
+  border-radius: var(--space-smaller) !important;
+}
+
+.input-group {
+  .input-group-label:first-child {
+    border-bottom-left-radius: var(--space-smaller);
+    border-top-left-radius: var(--space-smaller);
+  }
+
+  .input-group-field {
+    border-bottom-left-radius: 0 !important;
+    border-top-left-radius: 0 !important;
+  }
 }
diff --git a/app/javascript/dashboard/components/buttons/Button.vue b/app/javascript/dashboard/components/buttons/Button.vue
@@ -0,0 +1,43 @@
+<template>
+  <button :type="type" class="button nice" :class="variant" @click="onClick">
+    <i
+      v-if="!isLoading && icon"
+      class="icon"
+      :class="buttonIconClass + ' ' + icon"
+    />
+    <spinner v-if="isLoading" />
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    buttonIconClass: {
+      type: String,
+      default: '',
+    },
+    type: {
+      type: String,
+      default: 'button',
+    },
+    variant: {
+      type: String,
+      default: 'primary',
+    },
+  },
+  methods: {
+    onClick(e) {
+      this.$emit('click', e);
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue b/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue
@@ -87,11 +87,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.text-truncate {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -45,7 +45,6 @@
           <span slot="noResult">{{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}</span>
         </multiselect>
       </div>
-
       <more-actions :conversation-id="currentChat.id" />
     </div>
   </div>

diff --git a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
@@ -5,7 +5,7 @@
       :status="currentChat.status"
     />
     <woot-button
-      class="success hollow more--button"
+      class="success more--button"
       icon="ion-more"
       :class="buttonClass"
       @click="toggleConversationActions"
@@ -94,7 +94,7 @@ export default {
 .more--button {
   align-items: center;
   display: flex;
-  margin-left: var(--space-small);
+  margin-left: var(--space-smaller);
   padding: var(--space-small);
 }
 

diff --git a/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue b/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
@@ -25,6 +25,7 @@ export default {
       default: '',
     },
   },
+  watch: {},
   methods: {
     handleImageUpload(event) {
       const [file] = event.target.files;

diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -1,5 +1,10 @@
 {
   "CONTACT_PANEL": {
+    "NOT_AVAILABLE": "Not Available",
+    "EMAIL_ADDRESS": "Email Address",
+    "PHONE_NUMBER": "Phone number",
+    "COMPANY": "Company",
+    "LOCATION": "Location",
     "CONVERSATION_TITLE": "Conversation Details",
     "BROWSER": "Browser",
     "OS": "Operating System",
@@ -30,5 +35,62 @@
     "MUTED_SUCCESS": "This conversation is muted for 6 hours",
     "SEND_TRANSCRIPT": "Send Transcript",
     "EDIT_LABEL": "Edit"
+  },
+  "EDIT_CONTACT": {
+    "BUTTON_LABEL": "Edit Contact",
+    "TITLE": "Edit contact",
+    "DESC": "Edit contact details",
+    "FORM": {
+      "SUBMIT": "Submit",
+      "CANCEL": "Cancel",
+      "AVATAR": {
+        "LABEL": "Contact Avatar"
+      },
+      "NAME": {
+        "PLACEHOLDER": "Enter the full name of the contact",
+        "LABEL": "Full Name"
+      },
+      "BIO": {
+        "PLACEHOLDER": "Enter the bio of the contact",
+        "LABEL": "Bio"
+      },
+      "EMAIL_ADDRESS": {
+        "PLACEHOLDER": "Enter the email address of the contact",
+        "LABEL": "Email Address"
+      },
+      "PHONE_NUMBER": {
+        "PLACEHOLDER": "Enter the phone number of the contact",
+        "LABEL": "Phone Number"
+      },
+      "LOCATION": {
+        "PLACEHOLDER": "Enter the location of the contact",
+        "LABEL": "Location"
+      },
+      "COMPANY_NAME": {
+        "PLACEHOLDER": "Enter the company name",
+        "LABEL": "Company Name"
+      },
+      "SOCIAL_PROFILES": {
+        "FACEBOOK": {
+          "PLACEHOLDER": "Enter the Facebook username",
+          "LABEL": "Facebook"
+        },
+        "TWITTER": {
+          "PLACEHOLDER": "Enter the Twitter username",
+          "LABEL": "Twitter"
+        },
+        "LINKEDIN": {
+          "PLACEHOLDER": "Enter the LinkedIn username",
+          "LABEL": "LinkedIn"
+        },
+        "GITHUB": {
+          "PLACEHOLDER": "Enter the Github username",
+          "LABEL": "Github"
+        }
+      }
+    },
+    "SUCCESS_MESSAGE": "Updated contact successfully",
+    "CONTACT_ALREADY_EXIST": "This email address is in use for another contact.",
+    "ERROR_MESSAGE": "There was an error updating the contact, please try again"
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -1,63 +1,9 @@
 <template>
   <div class="medium-3 bg-white contact--panel">
-    <div class="contact--profile">
-      <span class="close-button" @click="onPanelToggle">
-        <i class="ion-chevron-right" />
-      </span>
-      <div class="contact--info">
-        <thumbnail
-          :src="contact.thumbnail"
-          size="64px"
-          :badge="channelType"
-          :username="contact.name"
-          :status="contact.availability_status"
-        />
-        <div class="contact--details">
-          <div class="contact--name">
-            {{ contact.name }}
-          </div>
-          <a
-            v-if="contact.email"
-            :href="`mailto:${contact.email}`"
-            class="contact--email"
-          >
-            {{ contact.email }}
-          </a>
-          <a
-            v-if="contact.phone_number"
-            :href="`tel:${contact.phone_number}`"
-            class="contact--email"
-          >
-            {{ contact.phone_number }}
-          </a>
-
-          <div
-            v-if="
-              contact.additional_attributes &&
-                contact.additional_attributes.screen_name
-            "
-            class="contact--location"
-          >
-            {{ `@${contact.additional_attributes.screen_name}` }}
-          </div>
-          <div class="contact--location">
-            {{ contact.location }}
-          </div>
-        </div>
-      </div>
-      <div v-if="contact.bio" class="contact--bio">
-        {{ contact.bio }}
-      </div>
-      <div
-        v-if="
-          contact.additional_attributes &&
-            contact.additional_attributes.description
-        "
-        class="contact--bio"
-      >
-        {{ contact.additional_attributes.description }}
-      </div>
-    </div>
+    <span class="close-button" @click="onPanelToggle">
+      <i class="ion-chevron-right" />
+    </span>
+    <contact-info :contact="contact" :channel-type="channelType" />
     <div v-if="browser.browser_name" class="conversation--details">
       <contact-details-item
         v-if="browser.browser_name"
@@ -99,9 +45,9 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import ContactConversations from './ContactConversations.vue';
 import ContactDetailsItem from './ContactDetailsItem.vue';
+import ContactInfo from './contact/ContactInfo';
 import ConversationLabels from './labels/LabelBox.vue';
 import ContactCustomAttributes from './ContactCustomAttributes';
 
@@ -110,8 +56,8 @@ export default {
     ContactCustomAttributes,
     ContactConversations,
     ContactDetailsItem,
+    ContactInfo,
     ConversationLabels,
-    Thumbnail,
   },
   props: {
     conversationId: {
@@ -210,7 +156,11 @@ export default {
   overflow-y: auto;
   overflow: auto;
   position: relative;
-  padding: $space-normal;
+  padding: $space-one;
+
+  i {
+    margin-right: $space-smaller;
+  }
 }
 
 .close-button {
@@ -221,57 +171,9 @@ export default {
   color: $color-heading;
 }
 
-.contact--profile {
-  align-items: center;
-  padding: $space-medium 0 $space-one;
-
-  .user-thumbnail-box {
-    margin-right: $space-normal;
-  }
-}
-
-.contact--details {
-  margin-top: $space-small;
-
-  p {
-    margin-bottom: 0;
-  }
-}
-
-.contact--info {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-}
-
-.contact--name {
-  @include text-ellipsis;
-  text-transform: capitalize;
-
-  font-weight: $font-weight-bold;
-  font-size: $font-size-default;
-}
-
-.contact--email {
-  @include text-ellipsis;
-
-  color: $color-gray;
-  display: block;
-  line-height: $space-medium;
-
-  &:hover {
-    color: $color-woot;
-  }
-}
-
-.contact--bio {
-  margin-top: $space-normal;
-}
-
 .conversation--details {
   border-top: 1px solid $color-border-light;
-  padding: $space-large $space-normal;
+  padding: $space-normal;
 }
 
 .conversation--labels {