Merge pull request #594 from beabee-communityrm/feat/delete-contact

feat: add delete account button

locales/de.json

@@ -579,6 +579,14 @@
     "until": "bis",
     "yes": "Ja"
   },
+  "contactAccount": {
+    "confirmDelete": {
+      "text": "Dadurch werden alle mit der Email-Adresse {email} verbundenen Daten gelöscht. Aktive Mitgliedschaften werden dadurch beendet.",
+      "title": "Kontakt löschen",
+      "warning": "Dieser Schritt kann nicht rückgängig gemacht werden. Sicher, dass du fortfahren möchtest?"
+    },
+    "contactDeleted": "Kontakt gelöscht."
+  },
   "contactContribution": {
     "confirmCancel": {
       "confirm": "Ja, Mitgliedschaft kündigen",

locales/de@easy.json

@@ -157,6 +157,9 @@
     "timeAgo": "vor",
     "timeIn": "in"
   },
+  "contactAccount": {
+    "confirmDelete": {}
+  },
   "contactContribution": {
     "confirmCancel": {},
     "updateNotice": {}

locales/de@informal.json

@@ -579,6 +579,14 @@
     "until": "bis",
     "yes": "Ja"
   },
+  "contactAccount": {
+    "confirmDelete": {
+      "text": "Dadurch werden alle mit der Email-Adresse {email} verbundenen Daten gelöscht. Aktive Mitgliedschaften werden dadurch beendet.",
+      "title": "Kontakt löschen",
+      "warning": "Dieser Schritt kann nicht rückgängig gemacht werden. Sicher, dass du fortfahren möchtest?"
+    },
+    "contactDeleted": "Kontakt gelöscht."
+  },
   "contactContribution": {
     "confirmCancel": {
       "confirm": "Ja, Mitgliedschaft kündigen",

locales/en.json

@@ -583,6 +583,14 @@
     "until": "until",
     "yes": "Yes"
   },
+  "contactAccount": {
+    "actions": "Actions",
+    "confirmDelete": {
+      "text": "This will delete all data associated with {email}. If they have an active contribution this will be cancelled.",
+      "title": "Delete contact",
+      "warning": "This is irreversible. Are you sure you want to proceed?"
+    }
+  },
   "contactContribution": {
     "confirmCancel": {
       "confirm": "Yes, cancel it",

locales/it.json

@@ -185,6 +185,9 @@
     "until": "fino",
     "yes": "Sì"
   },
+  "contactAccount": {
+    "confirmDelete": {}
+  },
   "contactContribution": {
     "confirmCancel": {
       "confirm": "Sì, sono sicuro",

locales/nl.json

@@ -162,6 +162,9 @@
     "timeAgo": "{time} geleden",
     "timeIn": "in {time}"
   },
+  "contactAccount": {
+    "confirmDelete": {}
+  },
   "contactContribution": {
     "confirmCancel": {},
     "updateNotice": {}

locales/pt.json

@@ -372,6 +372,9 @@
     "until": "até",
     "yes": "Sim"
   },
+  "contactAccount": {
+    "confirmDelete": {}
+  },
   "contactContribution": {
     "confirmCancel": {},
     "updateNotice": {}

locales/ru.json

@@ -343,6 +343,9 @@
     "until": "до",
     "yes": "Да"
   },
+  "contactAccount": {
+    "confirmDelete": {}
+  },
   "contactContribution": {
     "confirmCancel": {},
     "updateNotice": {}

src/pages/admin/contacts/[id]/account.vue

@@ -12,15 +12,70 @@ meta:
         <ContactUpdateAccount :id="contact.id" />
       </Suspense>
     </template>
+    <template #col2>
+      <div class="text-right">
+        <ActionButton
+          :icon="faTrash"
+          variant="danger"
+          @click="showDeleteModal = true"
+        >
+          {{ t('contactAccount.confirmDelete.title') }}
+        </ActionButton>
+      </div>
+      <AppConfirmDialog
+        :open="showDeleteModal"
+        :title="t('contactAccount.confirmDelete.title')"
+        :cancel="t('actions.noBack')"
+        :confirm="t('actions.yesDelete')"
+        variant="danger"
+        @close="showDeleteModal = false"
+        @confirm="handleDelete"
+      >
+        <i18n-t
+          tag="p"
+          class="mb-4"
+          keypath="contactAccount.confirmDelete.text"
+          :email="contact.email"
+        >
+          <template #email
+            ><b>{{ contact.email }}</b></template
+          >
+        </i18n-t>
+        <p>
+          <b>{{ t('contactAccount.confirmDelete.warning') }}</b>
+        </p>
+      </AppConfirmDialog>
+    </template>
   </App2ColGrid>
 </template>
 <script lang="ts" setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 import ContactUpdateAccount from '@components/contact/ContactUpdateAccount.vue';
 import App2ColGrid from '@components/App2ColGrid.vue';
+import AppConfirmDialog from '@components/AppConfirmDialog.vue';
+import { deleteContact } from '@utils/api/contact';
+import ActionButton from '@components/button/ActionButton.vue';
+import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import { addNotification } from '@store/notifications';
 
 import type { GetContactData } from '@type';
 
-defineProps<{
-  contact: GetContactData;
-}>();
+const props = defineProps<{ contact: GetContactData }>();
+
+const { t } = useI18n();
+const router = useRouter();
+
+const showDeleteModal = ref(false);
+
+async function handleDelete() {
+  await deleteContact(props.contact.id);
+  addNotification({
+    variant: 'success',
+    title: t('contactAccount.contactDeleted'),
+  });
+
+  router.push('/admin/contacts');
+}
 </script>

src/utils/api/contact.ts

@@ -112,6 +112,10 @@ export async function updateContact(
   return deserializeContact(data);
 }
 
+export async function deleteContact(id: string): Promise<void> {
+  await instance.delete(`/contact/${id}`);
+}
+
 export async function fetchContribution(): Promise<ContributionInfo> {
   const { data } = await instance.get<Serial<ContributionInfo>>(
     '/contact/me/contribution'