app_vue2/components/Ui/Button/Delete.vue

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

<template>
  <main>
    <v-btn icon @click="alertDeleteItem()">
      <v-icon>mdi-delete</v-icon>
    </v-btn>

    <lazy-LayoutDialog
      :show="showDialog"
    >
      <template v-slot:dialogText>
        <v-card-title class="text-h5 grey lighten-2">
          {{ $t('attention') }}
        </v-card-title>
        <v-card-text>
          <br>
          <p>{{ $t('confirm_to_delete') }}</p>
        </v-card-text>
      </template>
      <template v-slot:dialogBtn>
        <v-btn class="mr-4 submitBtn ot_grey ot_white--text" @click="closeDialog">
          {{ $t('cancel') }}
        </v-btn>
        <v-btn class="mr-4 submitBtn ot_danger ot_white--text" @click="deleteItem">
          {{ $t('delete') }}
        </v-btn>
      </template>
    </lazy-LayoutDialog>
  </main>
</template>

<script lang="ts">
import {defineComponent, ref, Ref, useContext} from '@nuxtjs/composition-api'
import {alert, DataDeleterArgs} from '~/types/interfaces'
import {TYPE_ALERT} from '~/types/enums'
import Page from "~/services/store/page";

export default defineComponent({
  props: {
    deleteArgs: {
      type: Object as () => DataDeleterArgs,
      required: true
    }
  },
  setup (props) {
    const { $dataDeleter, store, app: { i18n } } = useContext()
    const showDialog: Ref<boolean> = ref(false)
    const page = new Page(store)

    const deleteItem = async () => {
      try {
        await $dataDeleter.invoke(props.deleteArgs)
        page.addAlerts(TYPE_ALERT.SUCCESS, [i18n.t('deleteSuccess') as string])
      } catch (error) {
        page.addAlerts(TYPE_ALERT.ALERT, [error.message])
      }
      showDialog.value = false
    }

    return {
      alertDeleteItem: () => { showDialog.value = true },
      closeDialog: () => { showDialog.value = false },
      deleteItem,
      showDialog
    }
  }
})
</script>

<style scoped>
</style>