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

feat: Create modal to merge two contacts (#2457)

Browse Source
This commit is contained in:
Nithin David Thomas
2021-10-13 18:35:13 +05:30
committed by GitHub
parent 6c3e2a0bd3
commit b33701a666
16 changed files with 437 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
app/javascript/dashboard/modules/contact/components/MergeContact.vue
View File

@@ -1,9 +1,15 @@
<template>
<form @submit.prevent="onSubmit">
<div class="merge-contacts">
<div class="multiselect-wrap--small">
<div class="multiselect-wrap--medium">
<label class="multiselect__label">
{{ $t('MERGE_CONTACTS.PRIMARY.TITLE') }}
<woot-label
:title="$t('MERGE_CONTACTS.PRIMARY.HELP_LABEL')"
color-scheme="success"
small
class="label--merge-warning"
></woot-label>
</label>
<multiselect
:value="primaryContact"
@@ -17,6 +23,9 @@
<contact-dropdown-item
:thumbnail="props.option.thumbnail"
:name="props.option.name"
:identifier="props.option.id"
:email="props.option.email"
:phone-number="props.option.phoneNumber"
/>
</template>
</multiselect>
@@ -27,11 +36,17 @@
<i class="ion-ios-arrow-up up" />
</div>
<div
class="child-contact multiselect-wrap--small"
class="child-contact multiselect-wrap--medium"
:class="{ error: $v.childContact.$error }"
>
<label class="multiselect__label">
{{ $t('MERGE_CONTACTS.CHILD.TITLE') }}
{{ $t('MERGE_CONTACTS.CHILD.TITLE')
}}<woot-label
:title="$t('MERGE_CONTACTS.CHILD.HELP_LABEL')"
color-scheme="alert"
small
class="label--merge-warning"
></woot-label>
</label>
<multiselect
v-model="childContact"
@@ -51,7 +66,19 @@
<template slot="singleLabel" slot-scope="props">
<contact-dropdown-item
:thumbnail="props.option.thumbnail"
:identifier="props.option.id"
:name="props.option.name"
:email="props.option.email"
:phone-number="props.option.phone_number"
/>
</template>
<template slot="option" slot-scope="props">
<contact-dropdown-item
:thumbnail="props.option.thumbnail"
:identifier="props.option.id"
:name="props.option.name"
:email="props.option.email"
:phone-number="props.option.phone_number"
/>
</template>
<span slot="noResult">
@@ -190,12 +217,6 @@ export default {
left: var(--space-normal);
}
::v-deep .multiselect__tags .option__title {
display: inline-flex;
align-items: center;
margin-left: var(--space-small);
}
.footer {
margin-top: var(--space-medium);
display: flex;
@@ -206,4 +227,8 @@ export default {
.error .message {
margin-top: 0;
}
.label--merge-warning {
margin-left: var(--space-small);
}
</style>