remove contacts button (#1982)

* Create 20250116152613_add_function_delete_contacts.sql

* add remove contacts feature

* Delete 20250116152613_add_function_delete_contacts.sql

* use frontend only instead

* function name typo

* fix contacts are not getting deleted from persons

* Update contacts.ts

* add margin to the delete button

* rename delete to remove

* create component RemoveContactButton.vue

* use RPC

* rename migration file

* refactor rpc functions

- delete from `pointsofcontact`
- remove unused frontned function `getContacts`
- refactor rpc function `delete_user_data` & `delete_contacts`

* remove contacts fixes

* Update RemoveContactButton.vue

* use realtime instead of reloadContact()

* Enable delete policy for `pointsofcontact`

* i18n

* Update 20250116214647_add_delete_contacts_function.sql

Author: J43fura

backend/src/controllers/contacts.controller.ts

@@ -2,11 +2,11 @@ import { User } from '@supabase/supabase-js';
 import { NextFunction, Request, Response } from 'express';
 import { Contacts } from '../db/interfaces/Contacts';
 import { Contact } from '../db/types';
+import Billing from '../utils/billing-plugin';
 import {
   exportContactsToCSV,
   getLocalizedCsvSeparator
 } from '../utils/helpers/csv';
-import Billing from '../utils/billing-plugin';
 
 function validateRequest(req: Request, res: Response) {
   const userId = (res.locals.user as User).id;

backend/src/routes/contacts.routes.ts

@@ -13,7 +13,7 @@ export default function initializeContactsRoutes(
   const { exportContactsCSV } = initializeContactsController(contacts);
 
   router.post(
-    '/export/csv',
+    '/contacts/export/csv',
     initializeAuthMiddleware(authResolver),
     exportContactsCSV
   );

frontend/src/components/Mining/Buttons/RemoveContactButton.vue

@@ -0,0 +1,109 @@
+<template>
+  <Button
+    id="remove-contact"
+    v-tooltip.top="t('remove_contacts', contactsToDeleteLength)"
+    icon="pi pi-times"
+    :label="$screenStore.size.md ? t('remove') : undefined"
+    severity="danger"
+    :disabled="isRemoveDisabled || isRemovingContacts"
+    :loading="isRemovingContacts"
+    @click="showWarning()"
+  />
+  <!-- Warning modal Section -->
+  <Dialog
+    v-model:visible="showRemoveContactModal"
+    modal
+    :header="t('remove_contacts', contactsToDeleteLength)"
+    :style="{ width: '25rem' }"
+  >
+    <span class="p-text-secondary block mb-5">
+      {{ t('remove_contacts_confirmation', contactsToDeleteLength) }}
+    </span>
+    <div class="flex flex-row-reverse justify-content-start gap-2">
+      <Button
+        id="remove-contact-confirm"
+        type="button"
+        :label="t('remove')"
+        severity="danger"
+        :loading="isRemovingContacts"
+        @click="removeContacts()"
+      >
+      </Button>
+      <Button
+        type="button"
+        :label="$t('common.cancel')"
+        severity="secondary"
+        @click="closeWarning"
+      >
+      </Button>
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+const $toast = useToast();
+const { t } = useI18n({
+  useScope: 'local',
+});
+const $screenStore = useScreenStore();
+const props = defineProps<{
+  contactsToDelete?: string[];
+  contactsToDeleteLength: number;
+  isRemoveDisabled: boolean;
+  deselectContacts: () => void;
+}>();
+
+const { deselectContacts } = props;
+
+const contactsToDelete = computed(() => props.contactsToDelete);
+const contactsToDeleteLength = computed(() => props.contactsToDeleteLength);
+const isRemoveDisabled = computed(() => props.isRemoveDisabled);
+
+const showRemoveContactModal = ref(false);
+const isRemovingContacts = ref(false);
+
+function showWarning() {
+  showRemoveContactModal.value = true;
+}
+function closeWarning() {
+  showRemoveContactModal.value = false;
+}
+
+async function removeContacts() {
+  isRemovingContacts.value = true;
+  try {
+    await removeContactsFromDatabase(contactsToDelete.value);
+    $toast.add({
+      severity: 'success',
+      summary: t('contacts_removed', contactsToDeleteLength.value),
+      detail: t('contacts_removed_success', contactsToDeleteLength.value),
+      life: 3000,
+    });
+    closeWarning();
+    deselectContacts();
+    isRemovingContacts.value = false;
+  } catch (err) {
+    isRemovingContacts.value = false;
+    throw err;
+  }
+}
+</script>
+
+<i18n lang="json">
+{
+  "en": {
+    "remove": "Remove",
+    "remove_contacts_confirmation": "Removing this contact is permanent. You will lose all its mining data.| Removing these {n} contacts is permanent. You will lose all their mining data.",
+    "remove_contacts": "Remove contact|Remove {n} contacts",
+    "contacts_removed": "Contact removed|Contacts removed",
+    "contacts_removed_success": "Contact has been removed successfully.| {n} contacts have been removed successfully."
+  },
+  "fr": {
+    "remove": "Supprimer",
+    "remove_contacts_confirmation": "La suppression de ce contact est permanent. Vous perdrez toutes ses données d'extraction.| La suppression de ces {n} contacts est permanent. Vous perdrez toutes leurs données d'extraction.",
+    "remove_contacts": "Supprimer le contact|Supprimer {n} contacts",
+    "contacts_removed": "Contact supprimé|Contacts supprimés",
+    "contacts_removed_success": "Le contact a été supprimé avec succès.| {n} contacts ont été supprimés avec succès."
+  }
+}
+</i18n>

frontend/src/components/Mining/Table/MiningTable.vue

@@ -61,6 +61,7 @@
         <!-- This is a workaround as tooltip doesn't work when component is `disabled`-->
         <div
           v-tooltip.top="isExportDisabled && t('select_at_least_one_contact')"
+          class="flex items-center gap-1"
         >
           <Button
             id="export-csv"
@@ -69,6 +70,12 @@
             :disabled="isExportDisabled"
             @click="exportTable()"
           />
+          <RemoveContactButton
+            :contacts-to-delete="contactsToTreat"
+            :contacts-to-delete-length="implicitlySelectedContactsLength"
+            :is-remove-disabled="isExportDisabled"
+            :deselect-contacts="deselectContacts"
+          />
         </div>
         <div>
           <EnrichButton
@@ -707,14 +714,15 @@ import { saveCSVFile } from '~/utils/csv';
 import { getImageViaProxy } from '~/utils/images';
 
 const TableSkeleton = defineAsyncComponent(() => import('./TableSkeleton.vue'));
-
 const SocialLinks = defineAsyncComponent(
   () => import('../../icons/SocialLink.vue'),
 );
-
 const EnrichButton = defineAsyncComponent(
   () => import('../Buttons/EnrichButton.vue'),
 );
+const RemoveContactButton = defineAsyncComponent(
+  () => import('../Buttons/RemoveContactButton.vue'),
+);
 const ContactInformationSidebar = defineAsyncComponent(
   () => import('../ContactInformationSidebar.vue'),
 );
@@ -751,7 +759,6 @@ function openContactInformation(data: Contact) {
 }
 
 /* *** Filters *** */
-
 const filtersStore = useFiltersStore();
 
 const filteredContacts = ref<Contact[]>([]);
@@ -801,14 +808,15 @@ const selectedContacts = ref<Contact[]>([]);
 const selectedContactsLength = computed(() => selectedContacts.value.length);
 const selectAll = ref(false);
 
+function deselectContacts() {
+  selectAll.value = false;
+  selectedContacts.value = [];
+}
 const onSelectAllChange = (event: DataTableSelectAllChangeEvent) => {
   if (event.checked) {
     selectAll.value = true;
     selectedContacts.value = filteredContacts.value; // all data according to your needs
-  } else {
-    selectAll.value = false;
-    selectedContacts.value = [];
-  }
+  } else deselectContacts();
 };
 const onRowSelect = () => {
   // This control can be completely managed by you.
@@ -848,16 +856,16 @@ const implicitSelectAll = computed(
   () => implicitlySelectedContactsLength.value === contactsLength.value,
 );
 
-const contactsToExport = computed<string[] | undefined>(() =>
+const contactsToTreat = computed<string[] | undefined>(() =>
   implicitSelectAll.value
     ? undefined
     : implicitlySelectedContacts.value.map((item: Contact) => item.email),
 );
 
 watch(
-  contactsToExport,
+  contactsToTreat,
   () => {
-    $contactsStore.selectedEmails = contactsToExport.value;
+    $contactsStore.selectedEmails = contactsToTreat.value;
   },
   { deep: true, immediate: true },
 );
@@ -912,12 +920,12 @@ const openCreditModel = (
 };
 
 async function exportTable(partialExport = false) {
-  await $api('/export/csv', {
+  await $api('/contacts/export/csv', {
     method: 'POST',
     body: {
       partialExport,
-      emails: contactsToExport.value,
-      exportAllContacts: contactsToExport.value === undefined,
+      emails: contactsToTreat.value,
+      exportAllContacts: contactsToTreat.value === undefined,
     },
     onResponse({ response }) {
       if (response.status === 402 || response.status === 266) {

frontend/src/pages/account/settings.vue

@@ -121,7 +121,7 @@
       <LegalInformation />
     </Panel>
 
-    <!-- Warning model Section -->
+    <!-- Warning modal Section -->
     <Dialog
       v-model:visible="showDeleteModal"
       modal

frontend/src/stores/contacts.ts

@@ -137,6 +137,12 @@ export const useContactsStore = defineStore('contacts-store', () => {
     }
   }
 
+  function removeOldContact(email: string) {
+    contactsList.value = contactsList.value?.filter(
+      (contact) => contact.email !== email,
+    );
+  }
+
   /**
    * Subscribes to real-time updates for contacts.
    */
@@ -152,6 +158,10 @@ export const useContactsStore = defineStore('contacts-store', () => {
           filter: `user_id=eq.${$user.value?.id}`,
         },
         async (payload: RealtimePostgresChangesPayload<Contact>) => {
+          if (payload.eventType === 'DELETE' && payload.old.email) {
+            removeOldContact(payload.old.email);
+            return;
+          }
           const newContact = payload.new as Contact;
           await processNewContact(newContact);
         },

frontend/src/utils/contacts.ts

@@ -1,3 +1,4 @@
+import type { User } from '@supabase/supabase-js';
 import type { Contact } from '~/types/contact';
 import type { Organization } from '~/types/organization';
 
@@ -19,20 +20,6 @@ export function convertDates(data: Contact[]) {
   });
 }
 
-export async function getContacts(userId: string) {
-  const $supabaseClient = useSupabaseClient();
-  const { data, error } = await $supabaseClient
-    // @ts-expect-error: Issue with nuxt/supabase
-    .schema('private')
-    .rpc('get_contacts_table', { user_id: userId });
-
-  if (error) {
-    throw error;
-  }
-
-  return data ? convertDates(data) : [];
-}
-
 /**
  * Retrieves an organization by its name from the `organizations` table.
  *
@@ -193,3 +180,19 @@ export function isValidURL(url: string) {
     return false;
   }
 }
+
+export async function removeContactsFromDatabase(
+  emails?: string[],
+): Promise<void> {
+  const $user = useSupabaseUser() as Ref<User>;
+  const $supabaseClient = useSupabaseClient();
+  const { error } = await $supabaseClient
+    // @ts-expect-error: Issue with nuxt/supabase
+    .schema('private')
+    .rpc('delete_contacts', {
+      user_id: $user.value.id,
+      emails: emails ?? null,
+      deleteallcontacts: emails === undefined,
+    });
+  if (error) throw error;
+}

supabase/migrations/20250116214647_add_delete_contacts_function.sql

@@ -0,0 +1,41 @@
+create policy "Enable delete for users based on user_id" on "private"."persons" as permissive for delete to authenticated using ((( SELECT auth.uid() AS uid) = user_id));
+
+create policy "Enable delete for users based on user_id" on "private"."pointsofcontact" as permissive for delete to public using ((( SELECT auth.uid() AS uid) = user_id));
+
+CREATE FUNCTION private.delete_contacts(user_id uuid, emails text[], deleteallcontacts boolean) RETURNS void
+    LANGUAGE plpgsql
+    SET search_path = ''
+    AS $$ 
+DECLARE
+  owner_id uuid;
+BEGIN
+	owner_id = delete_contacts.user_id;
+	IF deleteallcontacts THEN
+		DELETE FROM private.persons p WHERE p.user_id = owner_id;
+		DELETE FROM private.refinedpersons rp WHERE rp.user_id = owner_id;
+		DELETE FROM private.pointsofcontact poc WHERE poc.user_id = owner_id;
+	ELSE
+		DELETE FROM private.persons p WHERE p.user_id = owner_id AND email = ANY(emails);
+		DELETE FROM private.refinedpersons rp WHERE rp.user_id = owner_id AND email = ANY(emails);
+		DELETE FROM private.pointsofcontact poc WHERE poc.user_id = owner_id AND person_email = ANY(emails);
+	END IF;
+END;
+$$;
+
+
+CREATE OR REPLACE FUNCTION private.delete_user_data(user_id uuid) RETURNS void
+    LANGUAGE plpgsql
+    SET search_path = ''
+    AS $$
+DECLARE
+  owner_id uuid;
+BEGIN
+  owner_id = delete_user_data.user_id;
+  DELETE FROM private.messages msg WHERE msg.user_id = owner_id;
+  DELETE FROM private.tags t WHERE t.user_id = owner_id;
+  DELETE FROM private.mining_sources ms WHERE ms.user_id = owner_id;
+  DELETE FROM private.engagement eg WHERE eg.user_id = owner_id;
+  PERFORM private.delete_contacts(owner_id, NULL, TRUE);
+END;
+$$;
+