LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Updates sidebar on dashboard

Browse Source
This commit is contained in:
Nithin David
2020-02-11 19:21:55 +05:30
parent 30f4c08143
commit 6186d14593
20 changed files with 394 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
View File

@@ -1,13 +1,10 @@
<template>
<div class="contact-conversation--panel">
<contact-details-item
icon="ion-chatbubbles"
:title="$t('CONTACT_PANEL.CONVERSATIONS.TITLE')"
/>
<contact-details-item :title="$t('CONTACT_PANEL.CONVERSATIONS.TITLE')" />
<div v-if="!uiFlags.isFetching">
<i v-if="!previousConversations.length">
<p v-if="!previousConversations.length" class="no-results">
{{ $t('CONTACT_PANEL.CONVERSATIONS.NO_RECORDS_FOUND') }}
</i>
</p>
<div v-else class="contact-conversation--list">
<conversation-card
v-for="conversation in previousConversations"
@@ -78,11 +75,17 @@ export default {
@import '~dashboard/assets/scss/mixins';
.contact-conversation--panel {
@include border-normal-top;
padding: $space-medium;
padding: $space-normal;
padding-top: 0;
}
.contact-conversation--list {
margin-top: -$space-normal;
margin-top: $space-normal;
}
.no-results {
margin: 0;
color: $color-gray;
padding: 0 $space-small;
}
</style>

10
app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="conv-details--item">
<div class="conv-details--item__label">
<h4 class="conv-details--item__label">
<i :class="icon" class="conv-details--item__icon"></i>
{{ title }}
</div>
</h4>
<div v-if="value" class="conv-details--item__value">
{{ value }}
</div>
@@ -14,7 +14,7 @@
export default {
props: {
title: { type: String, required: true },
icon: { type: String, required: true },
icon: { type: String, default: '' },
value: { type: [String, Number], default: '' },
},
};
@@ -32,16 +32,18 @@ export default {
}
.conv-details--item__icon {
padding-right: $space-micro;
padding-right: $space-smaller;
}
.conv-details--item__label {
font-weight: $font-weight-medium;
margin-bottom: $space-micro;
font-size: $font-size-small;
}
.conv-details--item__value {
word-break: break-all;
margin-top: $space-slab;
}
}
</style>

25
app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
View File

@@ -48,6 +48,12 @@
{{ contact.additional_attributes.description }}
</div>
</div>
<conversation-labels :conversation-id="conversationId" />
<contact-conversations
v-if="contact.id"
:contact-id="contact.id"
:conversation-id="conversationId"
/>
<div v-if="browser" class="conversation--details">
<contact-details-item
v-if="browser.browser_name"
@@ -74,13 +80,6 @@
icon="ion-clock"
/>
</div>
<contact-conversations
v-if="contact.id"
:contact-id="contact.id"
:conversation-id="conversationId"
/>
<conversation-labels :conversation-id="conversationId" />
</div>
</template>
@@ -169,9 +168,11 @@ export default {
}
.contact--profile {
width: 100%;
padding: $space-normal $space-medium $zero;
padding: $space-normal;
align-items: center;
margin: $space-medium $space-normal 0;
@include elegant-card;
@include light-shadow;
.user-thumbnail-box {
margin-right: $space-normal;
@@ -191,9 +192,10 @@ export default {
.contact--name {
@include text-ellipsis;
text-transform: capitalize;
font-weight: $font-weight-bold;
font-size: $font-size-default;
font-size: $font-size-medium;
}
.contact--email {
@@ -210,8 +212,7 @@ export default {
}
.conversation--details {
padding: $space-medium;
width: 100%;
padding: $space-two $space-normal;
}
.conversation--labels {

170
app/javascript/dashboard/routes/dashboard/conversation/ConversationLabels.vue
View File

@@ -1,21 +1,51 @@
<template>
<div class="contact-conversation--panel">
<contact-details-item
icon="ion-pricetags"
:title="$t('CONTACT_PANEL.LABELS.TITLE')"
/>
<div v-if="!uiFlags.isFetching">
<i v-if="!labels.length">
{{ $t('CONTACT_PANEL.LABELS.NO_RECORDS_FOUND') }}
</i>
<div v-else class="contact-conversation--list">
<span
v-for="label in labels"
:key="label"
class="conversation--label label primary"
>
{{ label }}
</span>
<div
class="contact-conversation--panel sidebar-labels-wrap"
:class="hasEditedClass"
>
<div v-if="!conversationUiFlags.isFetching" class="wrap">
<div class="contact-conversation--list">
<label class="select-tags">
{{ $t('CONTACT_PANEL.LABELS.TITLE') }}
<p v-if="!savedLabels.length && !showLabelInput" class="no-results">
{{ $t('CONTACT_PANEL.LABELS.NO_RECORDS_FOUND') }}
<button
type="button success"
class="button nice tiny"
@click="showLabelBox"
>
{{ $t('CONTACT_PANEL.LABELS.ADD_BUTTON') }}
</button>
</p>
<multiselect
v-if="showLabelInput || savedLabels.length"
v-model="selectedLabels"
:options="savedLabels"
tag-placeholder="Add this as new tag"
placeholder="Search or add a tag"
:multiple="true"
:taggable="true"
@tag="addLabel"
/>
</label>
<div class="row align-middle align-justify">
<span v-if="labelUiFlags.isError" class="error">{{
$t('CONTACT_PANEL.LABELS.UPDATE_ERROR')
}}</span>
<button
v-if="hasEdited"
type="button"
class="button nice tiny"
@click="onUpdateLabels"
>
<spinner v-if="labelUiFlags.isUpdating" size="tiny" />
{{
labelUiFlags.isUpdating
? 'saving...'
: $t('CONTACT_PANEL.LABELS.UPDATE_BUTTON')
}}
</button>
</div>
</div>
</div>
<spinner v-else></spinner>
@@ -24,12 +54,11 @@
<script>
import { mapGetters } from 'vuex';
import Spinner from 'shared/components/Spinner.vue';
import ContactDetailsItem from './ContactDetailsItem.vue';
import Spinner from 'shared/components/Spinner';
import ConversationAPI from '../../../api/conversations';
export default {
components: {
ContactDetailsItem,
Spinner,
},
props: {
@@ -38,25 +67,75 @@ export default {
required: true,
},
},
data() {
return {
isSearching: false,
selectedLabels: [],
showLabelInput: false,
};
},
computed: {
labels() {
return this.$store.getters['conversationLabels/getConversationLabels'](
this.conversationId
hasEdited() {
if (this.selectedLabels.length !== this.savedLabels.length) {
return true;
}
const isSame = this.selectedLabels.every(label =>
this.savedLabels.includes(label)
);
return !isSame;
},
savedLabels() {
const saved = this.$store.getters[
'conversationLabels/getConversationLabels'
](this.conversationId);
return saved;
},
hasEditedClass() {
return this.hasEdited ? 'has-edited' : '';
},
...mapGetters({
uiFlags: 'contactConversations/getUIFlags',
conversationUiFlags: 'contactConversations/getUIFlags',
labelUiFlags: 'conversationLabels/getUIFlags',
}),
},
watch: {
conversationId(newConversationId, prevConversationId) {
if (newConversationId && newConversationId !== prevConversationId) {
this.$store.dispatch('conversationLabels/get', newConversationId);
this.$store
.dispatch('conversationLabels/get', newConversationId)
.then(() => {
this.selectedLabels = [...this.savedLabels];
});
}
},
},
mounted() {
this.$store.dispatch('conversationLabels/get', this.conversationId);
this.$store
.dispatch('conversationLabels/get', this.conversationId)
.then(() => {
this.selectedLabels = [...this.savedLabels];
});
},
methods: {
addLabel(label) {
this.selectedLabels = [...this.selectedLabels, label];
},
asyncSearchLabels(query) {
this.isSearching = true;
ConversationAPI(query).then(response => {
this.countries = response;
this.isLoading = false;
});
},
onUpdateLabels() {
this.$store.dispatch('conversationLabels/update', {
conversationId: this.conversationId,
labels: this.selectedLabels,
});
},
showLabelBox() {
this.showLabelInput = true;
},
},
};
</script>
@@ -66,12 +145,7 @@ export default {
@import '~dashboard/assets/scss/mixins';
.contact-conversation--panel {
@include border-normal-top;
padding: $space-medium;
}
.contact-conversation--list {
margin-top: -$space-normal;
padding: $space-normal;
}
.conversation--label {
@@ -80,4 +154,36 @@ export default {
font-size: $font-size-small;
padding: $space-smaller;
}
.wrap {
margin-top: $space-slab;
}
.select-tags {
margin-top: $space-small;
.multiselect {
&:hover {
cursor: pointer;
}
transition: $transition-ease-in;
margin-bottom: 0;
}
}
.button {
margin-top: $space-small;
margin-left: auto;
}
.no-results {
margin: $space-normal 0 0 0;
color: $color-gray;
padding: 0 $space-small;
font-weight: $font-weight-normal;
}
.error {
color: $alert-color;
font-size: $font-size-mini;
font-weight: $font-weight-medium;
}
</style>