Skip to main content
Glama
AccountContact.js3.9 kB
export default { name: 'AccountContact', data() { return { contacts: [] } }, methods: { async openModal() { try { this.dtClear() await this.submitApi(); $('#modalContactList').modal('show'); this.dtRebuild() showSuccessInfo("Contacts fetched") } catch (err) { showErrorInfo(err) } }, dtClear() { $('#account_contacts_table').DataTable().destroy(); }, dtRebuild() { $('#account_contacts_table').DataTable({ "pageLength": 10, "reloadData": true, }).draw(); }, async submitApi() { try { let response = await window.http.get(`/user/my/contacts`) this.contacts = response.data.results.data; } catch (error) { if (error.response) { throw new Error(error.response.data.message); } throw new Error(error.message); } }, getPhoneNumber(jid) { return jid.split('@')[0]; }, exportToCSV() { if (!this.contacts || this.contacts.length === 0) { showErrorInfo("No contacts to export"); return; } // Create CSV content with headers let csvContent = "Phone Number,Name\n"; // Add each contact as a row this.contacts.forEach(contact => { const phoneNumber = this.getPhoneNumber(contact.jid); // Escape commas and quotes in the name field const escapedName = contact.name ? contact.name.replace(/"/g, '""') : ""; csvContent += `${phoneNumber},"${escapedName}"\n`; }); // Create a Blob with the CSV data const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' }); // Create a download link and trigger download const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.setAttribute('href', url); link.setAttribute('download', 'contacts.csv'); link.style.visibility = 'hidden'; document.body.appendChild(link); link.click(); document.body.removeChild(link); showSuccessInfo("Contacts exported to CSV"); } }, template: ` <div class="olive card" @click="openModal" style="cursor: pointer"> <div class="content"> <a class="ui olive right ribbon label">Contacts</a> <div class="header">My Contacts</div> <div class="description"> Display all your contacts </div> </div> </div> <!-- Modal Contact List --> <div class="ui large modal" id="modalContactList"> <i class="close icon"></i> <div class="header"> My Contacts <button class="ui green right floated button" @click="exportToCSV"> <i class="download icon"></i> Export to CSV </button> </div> <div class="content"> <table class="ui celled table" id="account_contacts_table"> <thead> <tr> <th>Phone Number</th> <th>Name</th> </tr> </thead> <tbody v-if="contacts != null"> <tr v-for="contact in contacts"> <td>{{ getPhoneNumber(contact.jid) }}</td> <td>{{ contact.name }}</td> </tr> </tbody> </table> </div> </div> ` }

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/samihalawa/whatsapp-go-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server