feat: Creates component show all contact info (#2252)
* feat: Adds component to show contact fields * feat: Creates component show all contact info
This commit is contained in:
parent
73d30b7f69
commit
d35e8cfd98
4 changed files with 90 additions and 8 deletions
|
@ -13,8 +13,8 @@
|
||||||
</h2>
|
</h2>
|
||||||
<h3 class="sub-block-title contact--work">
|
<h3 class="sub-block-title contact--work">
|
||||||
{{ contact.title }}
|
{{ contact.title }}
|
||||||
<i v-if="contact.company.name" class="icon ion-minus-round" />
|
<i v-if="company.name" class="icon ion-minus-round" />
|
||||||
<span class="company-name">{{ contact.company.name }}</span>
|
<span class="company-name">{{ company.name }}</span>
|
||||||
</h3>
|
</h3>
|
||||||
<p v-if="additionalAttributes.description" class="contact--bio">
|
<p v-if="additionalAttributes.description" class="contact--bio">
|
||||||
{{ additionalAttributes.description }}
|
{{ additionalAttributes.description }}
|
||||||
|
@ -69,6 +69,10 @@ export default {
|
||||||
|
|
||||||
return { twitter: twitterScreenName, ...(socialProfiles || {}) };
|
return { twitter: twitterScreenName, ...(socialProfiles || {}) };
|
||||||
},
|
},
|
||||||
|
company() {
|
||||||
|
const { company = {} } = this.contact;
|
||||||
|
return company;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onEditClick() {
|
onEditClick() {
|
||||||
|
|
|
@ -0,0 +1,62 @@
|
||||||
|
<template>
|
||||||
|
<div class="panel">
|
||||||
|
<contact-intro
|
||||||
|
:contact="contact"
|
||||||
|
@message="toggleConversationModal"
|
||||||
|
@edit="toggleEditModal"
|
||||||
|
/>
|
||||||
|
<contact-fields :contact="contact" :edit="null" />
|
||||||
|
<edit-contact
|
||||||
|
v-if="showEditModal"
|
||||||
|
:show="showEditModal"
|
||||||
|
:contact="contact"
|
||||||
|
@cancel="toggleEditModal"
|
||||||
|
/>
|
||||||
|
<new-conversation
|
||||||
|
:show="showConversationModal"
|
||||||
|
:contact="contact"
|
||||||
|
@cancel="toggleConversationModal"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import EditContact from 'dashboard/routes/dashboard/conversation/contact/EditContact';
|
||||||
|
import NewConversation from 'dashboard/routes/dashboard/conversation/contact/NewConversation';
|
||||||
|
import ContactIntro from './ContactIntro';
|
||||||
|
import ContactFields from './ContactFields';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
EditContact,
|
||||||
|
NewConversation,
|
||||||
|
ContactIntro,
|
||||||
|
ContactFields,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
contact: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showEditModal: false,
|
||||||
|
showConversationModal: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleEditModal() {
|
||||||
|
this.showEditModal = !this.showEditModal;
|
||||||
|
},
|
||||||
|
toggleConversationModal() {
|
||||||
|
this.showConversationModal = !this.showConversationModal;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.panel {
|
||||||
|
padding: var(--space-normal) var(--space-normal);
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,6 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<div class="left"></div>
|
<div class="left">
|
||||||
|
<contact-panel v-if="!uiFlags.isFetchingItem" :contact="contact" />
|
||||||
|
</div>
|
||||||
<div class="center"></div>
|
<div class="center"></div>
|
||||||
<div class="right"></div>
|
<div class="right"></div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -8,9 +10,12 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapGetters } from 'vuex';
|
import { mapGetters } from 'vuex';
|
||||||
|
import ContactPanel from './ContactPanel';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {},
|
components: {
|
||||||
|
ContactPanel,
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
contactId: {
|
contactId: {
|
||||||
type: [String, Number],
|
type: [String, Number],
|
||||||
|
@ -28,9 +33,20 @@ export default {
|
||||||
const hasEmptyResults = !!this.searchQuery && this.records.length === 0;
|
const hasEmptyResults = !!this.searchQuery && this.records.length === 0;
|
||||||
return hasEmptyResults;
|
return hasEmptyResults;
|
||||||
},
|
},
|
||||||
|
contact() {
|
||||||
|
return this.$store.getters['contacts/getContact'](this.contactId);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getContactDetails();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getContactDetails() {
|
||||||
|
if (this.contactId) {
|
||||||
|
this.$store.dispatch('contacts/show', { id: this.contactId });
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
mounted() {},
|
|
||||||
methods: {},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
:on-input-search="onInputSearch"
|
:on-input-search="onInputSearch"
|
||||||
:on-toggle-create="onToggleCreate"
|
:on-toggle-create="onToggleCreate"
|
||||||
/>
|
/>
|
||||||
<manage-layout />
|
<manage-layout :contact-id="contactId" />
|
||||||
|
|
||||||
<create-contact :show="showCreateModal" @cancel="onToggleCreate" />
|
<create-contact :show="showCreateModal" @cancel="onToggleCreate" />
|
||||||
</div>
|
</div>
|
||||||
|
@ -15,7 +15,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { mapGetters } from 'vuex';
|
import { mapGetters } from 'vuex';
|
||||||
import ContactsHeader from '../components/Header';
|
import ContactsHeader from '../components/Header';
|
||||||
import ManageLayout from '../components/ManageLayout';
|
import ManageLayout from 'dashboard/modules/contact/components/ManageLayout';
|
||||||
import CreateContact from 'dashboard/routes/dashboard/conversation/contact/CreateContact';
|
import CreateContact from 'dashboard/routes/dashboard/conversation/contact/CreateContact';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
Loading…
Reference in a new issue