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

feat: Ability to delete a contact (#2984)

Browse Source 
This change allows the administrator user to delete a contact and its related data like conversations, contact inboxes, and reports.

Fixes #1929
This commit is contained in:
Aswin Dev P.S
2021-09-23 12:52:49 +05:30
committed by GitHub
parent 0c24df96a8
commit 4f51a46c2b
22 changed files with 387 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
View File

@@ -3,7 +3,7 @@
<span class="close-button" @click="onClose">
<i class="ion-android-close close-icon" />
</span>
<contact-info show-new-message :contact="contact" />
<contact-info show-new-message :contact="contact" @panel-close="onClose" />
<accordion-item
:title="$t('CONTACT_PANEL.SIDEBAR_SECTIONS.CUSTOM_ATTRIBUTES')"
:is-open="isContactSidebarItemOpen('is_ct_custom_attr_open')"

159
app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
View File

@@ -48,30 +48,59 @@
/>
</div>
</div>
<woot-button
v-if="!showNewMessage"
class="edit-contact"
variant="link"
size="small"
@click="toggleEditModal"
>
{{ $t('EDIT_CONTACT.BUTTON_LABEL') }}
</woot-button>
<div v-else class="contact-actions">
<woot-button
class="new-message"
size="small expanded"
@click="toggleConversationModal"
>
{{ $t('CONTACT_PANEL.NEW_MESSAGE') }}
</woot-button>
<woot-button
variant="smooth"
size="small expanded"
@click="toggleEditModal"
>
{{ $t('EDIT_CONTACT.BUTTON_LABEL') }}
</woot-button>
<div v-if="!showNewMessage">
<div>
<woot-button
class="edit-contact"
variant="link"
size="small"
@click="toggleEditModal"
>
{{ $t('EDIT_CONTACT.BUTTON_LABEL') }}
</woot-button>
</div>
<div v-if="isAdmin">
<woot-button
class="delete-contact"
variant="link"
size="small"
color-scheme="alert"
@click="toggleDeleteModal"
:disabled="uiFlags.isDeleting"
>
{{ $t('DELETE_CONTACT.BUTTON_LABEL') }}
</woot-button>
</div>
</div>
<div v-else>
<div class="contact-actions">
<woot-button
v-tooltip="$t('CONTACT_PANEL.NEW_MESSAGE')"
class="new-message"
icon="ion-chatboxes"
size="small expanded"
@click="toggleConversationModal"
/>
<woot-button
v-tooltip="$t('EDIT_CONTACT.BUTTON_LABEL')"
class="edit-contact"
icon="ion-edit"
variant="smooth"
size="small expanded"
@click="toggleEditModal"
/>
<woot-button
v-if="isAdmin"
v-tooltip="$t('DELETE_CONTACT.BUTTON_LABEL')"
class="delete-contact"
icon="ion-trash-a"
variant="hollow"
size="small expanded"
color-scheme="alert"
@click="toggleDeleteModal"
:disabled="uiFlags.isDeleting"
/>
</div>
</div>
<edit-contact
v-if="showEditModal"
@@ -80,11 +109,24 @@
@cancel="toggleEditModal"
/>
<new-conversation
v-if="contact.id"
:show="showConversationModal"
:contact="contact"
@cancel="toggleConversationModal"
/>
</div>
<woot-confirm-delete-modal
v-if="showDeleteModal"
:show.sync="showDeleteModal"
:title="$t('DELETE_CONTACT.CONFIRM.TITLE')"
:message="confirmDeleteMessage"
:confirm-text="deleteConfirmText"
:reject-text="deleteRejectText"
:confirm-value="contact.name"
:confirm-place-holder-text="confirmPlaceHolderText"
@on-confirm="confirmDeletion"
@on-close="closeDelete"
/>
</div>
</template>
<script>
@@ -93,6 +135,9 @@ import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
import SocialIcons from './SocialIcons';
import EditContact from './EditContact';
import NewConversation from './NewConversation';
import alertMixin from 'shared/mixins/alertMixin';
import adminMixin from '../../../../mixins/isAdmin';
import { mapGetters } from 'vuex';
export default {
components: {
@@ -102,6 +147,7 @@ export default {
SocialIcons,
NewConversation,
},
mixins: [alertMixin, adminMixin],
props: {
contact: {
type: Object,
@@ -120,9 +166,11 @@ export default {
return {
showEditModal: false,
showConversationModal: false,
showDeleteModal: false,
};
},
computed: {
...mapGetters({ uiFlags: 'contacts/getUIFlags' }),
additionalAttributes() {
return this.contact.additional_attributes || {};
},
@@ -134,6 +182,23 @@ export default {
return { twitter: twitterScreenName, ...(socialProfiles || {}) };
},
// Delete Modal
deleteConfirmText() {
return `${this.$t('DELETE_CONTACT.CONFIRM.YES')} ${this.contact.name}`;
},
deleteRejectText() {
return `${this.$t('DELETE_CONTACT.CONFIRM.NO')} ${this.contact.name}`;
},
confirmDeleteMessage() {
return `${this.$t('DELETE_CONTACT.CONFIRM.MESSAGE')} ${
this.contact.name
} ?`;
},
confirmPlaceHolderText() {
return `${this.$t('DELETE_CONTACT.CONFIRM.PLACE_HOLDER', {
contactName: this.contact.name,
})}`;
},
},
methods: {
toggleEditModal() {
@@ -142,6 +207,31 @@ export default {
toggleConversationModal() {
this.showConversationModal = !this.showConversationModal;
},
toggleDeleteModal() {
this.showDeleteModal = !this.showDeleteModal;
},
confirmDeletion() {
this.deleteContact(this.contact);
this.closeDelete();
},
closeDelete() {
this.showDeleteModal = false;
this.showConversationModal = false;
this.showEditModal = false;
},
async deleteContact({ id }) {
try {
await this.$store.dispatch('contacts/delete', id);
this.$emit('panel-close');
this.showAlert(this.$t('DELETE_CONTACT.API.SUCCESS_MESSAGE'));
} catch (error) {
this.showAlert(
error.message
? error.message
: this.$t('DELETE_CONTACT.API.ERROR_MESSAGE')
);
}
},
},
};
</script>
@@ -179,17 +269,32 @@ export default {
.contact-actions {
margin-top: var(--space-small);
}
.button.edit-contact {
.edit-contact {
margin-left: var(--space-medium);
}
.button.new-message {
margin-right: var(--space-small);
.delete-contact {
margin-left: var(--space-medium);
}
.contact-actions {
display: flex;
align-items: center;
width: 100%;
.new-message {
font-size: var(--font-size-medium);
}
.edit-contact {
margin-left: var(--space-small);
font-size: var(--font-size-medium);
}
.delete-contact {
margin-left: var(--space-small);
font-size: var(--font-size-medium);
}
}
</style>