app/components/Ui/Button/Delete.vue

<!--
Bouton Delete avec modale de confirmation de la suppression
-->

<template>
  <main>
    <v-btn :icon="true" :flat="flat" @click="alertDeleteItem()">
      <v-icon>fas fa-trash</v-icon>
    </v-btn>

    <LazyLayoutDialog :show="showDialog">
      <template #dialogType>{{ $t('delete_assistant') }}</template>
      <template #dialogTitle>{{ $t('caution') }}</template>
      <template #dialogText>
        <v-card-text>
          <p>{{ $t('confirm_to_delete') }}</p>
        </v-card-text>
      </template>
      <template #dialogBtn>
        <v-btn class="mr-4 submitBtn theme-neutral-strong" @click="closeDialog">
          {{ $t('cancel') }}
        </v-btn>
        <v-btn class="mr-4 submitBtn theme-danger" @click="deleteItem">
          {{ $t('delete') }}
        </v-btn>
      </template>
    </LazyLayoutDialog>
  </main>
</template>

<script setup lang="ts">
import type { Ref, PropType } from 'vue'
import { TYPE_ALERT } from '~/types/enum/enums'
import { useEntityManager } from '~/composables/data/useEntityManager'
import ApiResource from '~/models/ApiResource'
import { usePageStore } from '~/stores/page'

const props = defineProps({
  entity: {
    type: Object as PropType<ApiResource>,
    required: true,
  },
  flat: {
    type: Boolean,
    required: false,
    default: false,
  },
})

const showDialog: Ref<boolean> = ref(false)

const { em } = useEntityManager()

const deleteItem = async () => {
  try {
    await em.delete(props.entity)
    usePageStore().addAlert(TYPE_ALERT.SUCCESS, ['deleteSuccess'])
  } catch (error) {
    // @ts-expect-error error is supposed to have a message prop
    usePageStore().addAlert(TYPE_ALERT.ALERT, [error.message])
    throw error
  }
  showDialog.value = false
}

const alertDeleteItem = () => {
  showDialog.value = true
}
const closeDialog = () => {
  showDialog.value = false
}
</script>

<style scoped></style>