Refactor identity form actions and add delete functionality

Author: tacxou

src/assets/sass/global.sass

@@ -30,3 +30,11 @@ body.body--dark
 .sesame-table-td-highlight
   color: $primary
   font-weight: bold
+
+.fallback-image
+  background-image: url('/no-photo.jpg')
+  display: inline-block
+  min-height: 400px
+  background-position: center center
+  background-size: cover
+  background-repeat: no-repeat

src/components/identityForm/actions.vue

@@ -1,16 +1,21 @@
 <template lang="pug">
-div
-  q-btn(color="positive" icon='mdi-content-save-plus' @click="create" v-show="isNew" v-if="crud.create")
-    q-tooltip.text-body2 Créer
-  q-btn.q-mx-xs(@click="sendInit" color="primary" icon="mdi-email-arrow-right"  :disabled="props.identity.state != IdentityState.SYNCED")
-    q-tooltip.text-body2(slot="trigger") Envoyer le mail d'invitation
-  q-btn.q-mx-xs(@click="submit" color="positive" icon="mdi-check"  v-show="!isNew" v-if="crud.update")
-    q-tooltip.text-body2(slot="trigger") Enregistrer les modifications
-  q-btn.q-mx-xs(v-if="props.identity?._id" @click="sync" color="orange-8" :disabled="props.identity.state != IdentityState.TO_VALIDATE" icon="mdi-sync")
-    q-tooltip.text-body2(slot="trigger" v-if="props.identity.state == IdentityState.TO_VALIDATE") Synchroniser l'identité
-    q-tooltip.text-body2(slot="trigger" v-else) L'état de l'identité ne permet pas de la synchroniser
-  q-btn.q-mx-xs(v-if="props.identity?._id" @click="logs" color="grey-8" icon="mdi-file-document" :href="'/jobs?filters[:concernedTo.id]=' + props.identity?._id")
-    q-tooltip.text-body2(slot="trigger") Voir les logs de l'identité
+div.flex
+  div
+    q-btn(color="positive" icon='mdi-content-save-plus' @click="create" v-show="isNew" v-if="crud.create")
+      q-tooltip.text-body2 Créer
+    q-btn.q-mx-xs(@click="sendInit" color="primary" icon="mdi-email-arrow-right"  :disabled="props.identity.state != IdentityState.SYNCED")
+      q-tooltip.text-body2(slot="trigger") Envoyer le mail d'invitation
+    q-btn.q-mx-xs(@click="submit" color="positive" icon="mdi-check"  v-show="!isNew" v-if="crud.update")
+      q-tooltip.text-body2(slot="trigger") Enregistrer les modifications
+    q-btn.q-mx-xs(v-if="props.identity?._id" @click="sync" color="orange-8" :disabled="props.identity.state != IdentityState.TO_VALIDATE" icon="mdi-sync")
+      q-tooltip.text-body2(slot="trigger" v-if="props.identity.state == IdentityState.TO_VALIDATE") Synchroniser l'identité
+      q-tooltip.text-body2(slot="trigger" v-else) L'état de l'identité ne permet pas de la synchroniser
+    q-btn.q-mx-xs(v-if="props.identity?._id" @click="logs" color="grey-8" icon="mdi-file-document" :href="'/jobs?filters[:concernedTo.id]=' + props.identity?._id")
+      q-tooltip.text-body2(slot="trigger") Voir les logs de l'identité
+  q-separator.q-mx-sm(vertical)
+  div
+    q-btn.q-mx-xs(v-if="props.identity?._id" @click="deleteIdentity" color="negative" icon="mdi-delete")
+      q-tooltip.text-body2(slot="trigger") Supprimer l'identité
 </template>
 
 <script lang="ts" setup>
@@ -45,7 +50,7 @@ const router = useRouter()
 const { getStateColor, getStateName } = useIdentityStates()
 const { handleError } = useErrorHandling()
 
-const emits = defineEmits(['submit', 'sync', 'logs', 'create'])
+const emits = defineEmits(['submit', 'sync', 'logs', 'create', 'delete'])
 
 async function submit() {
   // console.log('submit from actions')
@@ -57,6 +62,11 @@ async function create() {
   emits('create')
 }
 
+
+async function deleteIdentity() {
+  emits('delete')
+}
+
 const stateName = computed(() => {
   const state = props.identity?.state
   return getStateName(state)

src/components/identityForm/index.vue

@@ -174,6 +174,17 @@ function getTabValidations(tab: string) {
   return validations.value?.hasOwnProperty(tab) ? 'red' : false
 }
 
+async function deleteIdentity() {
+  await useHttp('/core/backends/delete', {
+    method: 'POST',
+    body: {
+      payload: [
+        props.identity._id,
+      ],
+    },
+  })
+}
+
 async function sync() {
   const { data: result, pending, error, refresh } = await useHttp<any>(`/management/identities/${props.identity._id}/state`, {
     method: 'PATCH',
@@ -210,6 +221,7 @@ defineExpose({
   sync,
   logs,
   back,
+  deleteIdentity,
 })
 </script>
 

src/components/quasar-jsonform/controls/QFileControlRenderer.vue

@@ -1,6 +1,8 @@
 <template lang="pug">
 //control-wrapper(v-bind="controlWrapper" :styles="styles" :isFocused="isFocused" :appliedOptions="appliedOptions")
 div(style="cursor: pointer")
+  //- @click="open"
+    @update:model-value="onChangeControl"
   q-input(
     :id="control.id + '-input'"
     :disable="!control.enabled"
@@ -9,8 +11,6 @@ div(style="cursor: pointer")
     :model-value="control.data"
     :clearable="true"
     readonly
-    @click="open"
-    @update:model-value="onChangeControl"
     @focus="isFocused = true"
     @blur="isFocused = false"
     :style="{paddingBottom: control.errors !== '' ? 'revert-layer' : 0}"
@@ -19,7 +19,7 @@ div(style="cursor: pointer")
     template(v-slot:prepend)
       q-icon(name="mdi-paperclip")
   q-card(style="border-radius: 0")
-    img(:src="baseUrl + '/management/identities/photo/raw?' + photoUrlQuery.params")
+    q-img(:src="baseUrl + '/management/identities/photo/raw?' + photoUrlQuery.params" placeholder-src='/no-photo.jpg' fit='contain' height='400px')
 </template>
 
 <script lang="ts">

src/layouts/default.vue

@@ -28,7 +28,7 @@ q-layout(view="hHh LpR lff" style="margin-top: -1px;")
           div
             .text-weight-bold.q-px-md.text-center
               | Synchronisation en cours  
-              q-badge(color="amber-10") {{ eventSeamlessCurrent }}/{{ eventSeamlessTotal }}
+              q-badge(color="amber-10" v-show="eventSeamlessCurrent > 0") {{ eventSeamlessCurrent }}/{{ eventSeamlessTotal }}
           q-space
           q-btn(flat round icon="mdi-close" v-close-popup)
   q-footer(:class="$q.dark.isActive ? 'bg-dark' : 'bg-white'" bordered)

src/pages/identities/index.vue

@@ -30,7 +30,16 @@ q-page.container
     template(#body-cell-states="props")
       sesame-table-state-col(:identity="props.row")
     template(#right-panel-actions-content-after="{target, crud, isNew}")
-      sesame-identity-form-actions(:identity="target" @submit="submit($event)" @create="create($event)" @sync="sync" @logs="logs" :crud="crud" :isNew="isNew")
+      sesame-identity-form-actions(
+        :identity="target"
+        @submit="submit($event)"
+        @create="create($event)"
+        @sync="sync"
+        @logs="logs"
+        @delete="deleteIdentity"
+        :crud="crud"
+        :isNew="isNew"
+      )
     template(#right-panel-content="{payload, isNew}")
       sesame-identity-form(
         :identity="{...payload.target}"
@@ -144,6 +153,11 @@ async function sync(identity: Identity) {
   form.value.sync()
 }
 
+async function deleteIdentity(identity: Identity) {
+  console.log('deleteIdentity')
+  form.value.deleteIdentity()
+}
+
 function logs(identity: Identity & { _id: string }) {
   router.push(`/logs?filters[:concernedTo.id]=${identity?._id}`)
 }