Implement bulk deletion modal for selected identities #62

Author: tacxou

apps/web/src/components/deleteManyModale.vue

@@ -0,0 +1,55 @@
+<template lang="pug">
+q-dialog(
+  ref="dialogRef",
+  @hide="onDialogHide",
+)
+  q-card.q-dialog-plugin
+    q-card-section
+      q-card-title.text-h6
+        | Suppression en masse des identités
+    q-card-section
+      q-card-main
+
+        p {{ mainText }}
+
+    q-card-actions
+      q-space
+      q-btn(
+        color="positive",
+        label="Valider",
+        @click="syncIdentities"
+      )
+      q-btn(
+        color="negative",
+        label="Annuler",
+        @click="cancelSync"
+      )
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import { useDialogPluginComponent } from 'quasar'
+
+const props = defineProps({
+  selectedIdentities: {
+    type: Array,
+    default: () => [],
+  },
+})
+
+defineEmits([...useDialogPluginComponent.emits])
+
+const mainText = computed(() => `Vous êtes sur le point de supprimer ${props.selectedIdentities.length} identités. Voulez-vous continuer ?`)
+
+const syncIdentities = () => {
+  console.log('syncIdentities')
+  onDialogOK({ success: true })
+}
+
+const cancelSync = () => {
+  console.log('cancelSync')
+  onDialogCancel()
+}
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
+</script>

apps/web/src/components/table/top-left.vue

@@ -8,7 +8,9 @@ q-btn-group(rounded flat)
     q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Mettre à synchroniser les identités sélectionnées
   q-btn(flat icon="mdi-email-arrow-right" color="primary" rounded @click="openInitModale" size="md" :disable="selected.length === 0")
     q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Envoyer le mail d'invitation
-  q-btn(flat icon="mdi-close" color="negative" rounded @click="clearSelection" size="md" :disable="selected.length === 0")
+  q-btn(flat icon="mdi-delete" color="negative" rounded @click="openTrashModale" size="md" :disable="selected.length === 0")
+    q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Supprimer en masse
+  q-btn(flat icon="mdi-cancel" color="warning" rounded @click="clearSelection" size="md" v-show="selected.length !== 0")
     q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Nettoyer la selection
 </template>
 
@@ -18,10 +20,11 @@ import type { PropType } from 'vue'
 import { useRouter } from 'nuxt/app'
 import updateIdentityModale from '../updateIdentityModale.vue'
 import updateInitModale from '../updateInitModale.vue'
+import deleteManyModale from '../deleteManyModale.vue'
 import { useIdentityStates } from '#imports'
 import { IdentityState } from '~/composables'
 import { useIdentityStateStore } from '~/stores/identityState'
-import {computed} from "vue";
+import { computed } from 'vue'
 
 const $q = useQuasar()
 
@@ -32,8 +35,8 @@ const props = defineProps({
   },
   total: {
     type: Number,
-    default:0
-  }
+    default: 0,
+  },
 })
 
 const emit = defineEmits(['updateLifestep', 'clear', 'refresh'])
@@ -78,21 +81,20 @@ function openUpdateModale() {
       console.log('cancelSync')
     })
 }
-function returnFilter(){
-  const rest  = route.query
-  let filters={}
-  for (const [key, value] of Object.entries(rest)){
-    if (key === 'limit' || key === 'skip' || key === 'sort' || key === 'read'){
+
+function returnFilter() {
+  const rest = route.query
+  let filters = {}
+  for (const [key, value] of Object.entries(rest)) {
+    if (key === 'limit' || key === 'skip' || key === 'sort' || key === 'read') {
       delete rest[key]
     }
   }
 
   return rest
 }
+
 function openInitModale() {
-  // console.log('filters', route.query)
-  // console.log('props.selected', props.selected)
-  // const identityState: IdentityState = parseInt(`${query['filters[@state][]']}`, 10)
   const identityState: IdentityState = props.selected[0].state
   if (typeof identityState !== 'number') {
     console.error('Invalid state', identityState)
@@ -102,7 +104,6 @@ function openInitModale() {
 
   const name = getStateName(identityState)
 
-
   $q.dialog({
     component: updateInitModale,
     componentProps: {
@@ -112,15 +113,39 @@ function openInitModale() {
     },
   })
     .onOk(async (data) => {
-      if (data.initAllIdentities === true){
+      if (data.initAllIdentities === true) {
         await sendInitToAllIdentities()
-      }else{
+      } else {
         await sendInitToIdentity(props.selected)
       }
     })
-    .onCancel(() => {
+    .onCancel(() => {})
+}
+
+function openTrashModale() {
+  const identityState: IdentityState = props.selected[0].state
+  if (typeof identityState !== 'number') {
+    console.error('Invalid state', identityState)
+    return
+  }
+  console.log('openTrashModale', identityState)
+
+  const name = getStateName(identityState)
+
+  console.log('openTrashModale', props.selected)
+
+  $q.dialog({
+    component: deleteManyModale,
+    componentProps: {
+      selectedIdentities: props.selected,
+    },
+  })
+    .onOk(async (data) => {
+      await trashManySelected(props.selected)
     })
+    .onCancel(() => {})
 }
+
 function getTargetState(state: IdentityState) {
   switch (state) {
     case IdentityState.TO_VALIDATE:
@@ -137,10 +162,10 @@ function getTargetState(state: IdentityState) {
 
 async function updateAllIdentities(state: IdentityState) {
   debugger
-  const f=returnFilter()
+  const f = returnFilter()
   const { data: identities } = await useHttp(`/management/identities?limit=999999&&filters[@state][]=${state}`, {
     method: 'get',
-    query:f
+    query: f,
   })
 
   if (!identities) {
@@ -190,7 +215,7 @@ async function sendInitToIdentity(identities) {
   const { data, error } = await useHttp(`/management/passwd/initmany`, {
     method: 'post',
     body: {
-      ids
+      ids,
     },
   })
 
@@ -211,10 +236,37 @@ async function sendInitToIdentity(identities) {
   emit('clear')
 }
 
+async function trashManySelected(identities) {
+  console.log('trashManySelected', identities)
+  const ids = identities.map((identity) => identity._id)
+  console.log('trashManySelected', ids)
+
+  try {
+    const { data } = await $http.$post(`/core/backends/delete`, {
+      body: {
+        payload: ids,
+      },
+    })
+
+    $q.notify({
+      message: `Les identités ont été supprimées avec succès`,
+      color: 'positive',
+    })
+    await fetchAllStateCount()
+    emit('refresh')
+    emit('clear')
+  } catch (error) {
+    $q.notify({
+      message: error.data.message,
+      color: 'negative',
+    })
+  }
+}
+
 async function sendInitToAllIdentities() {
   const { data: identities } = await useHttp('/management/identities?limit=99999', {
     method: 'get',
-    query:returnFilter()
+    query: returnFilter(),
   })
   if (!identities) {
     $q.notify({
@@ -226,8 +278,6 @@ async function sendInitToAllIdentities() {
   sendInitToIdentity(identities.value.data)
 }
 
-
-
 function clearSelection() {
   emit('clear')
 }