cv2/components/IdCard.vue

<template>
  <v-card class="id-card">
    <div
      v-if="!appStore.altchaPayload"
      class="skeleton-container"
    >
      <div class="skeleton">
        <v-skeleton-loader
          type="image"
          :max-height="110"
          boilerplate
        />
        <v-skeleton-loader
          type="article"
          :max-height="110"
          boilerplate
        />
      </div>

      <v-btn flat class="btn-show" @click="onClick">
        <v-icon class="fas fa-eye" />
      </v-btn>
      <AltchaValidation
        v-if="showCaptcha"
        @verified="onVerified"
      />
    </div>

    <div v-else>
    </div>
  </v-card>
</template>

<script setup lang="ts">
import type { Ref } from '@vue/reactivity'
import type { ComputedRef } from 'vue'

const appStore = useAppStore()

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

const showCaptcha: ComputedRef<boolean> = computed(() => {
  return downloadRequested.value && !appStore.altchaPayload
})

const onClick = () => {
  if (appStore.altchaPayload) {
    submit()
  } else {
    downloadRequested.value = true
  }
}

const onVerified = () => {
  if (!downloadRequested.value) {
    return
  }
  downloadRequested.value = false
  setTimeout(() => {
    submit()
  }, 100)
}

const submit = async () => {
  const url = 'https://api.ogene.fr/api/download-cv?payload=' + (appStore.altchaPayload ?? '');
  window.open(url, '_blank');
}
</script>

<style scoped lang="scss">
  .id-card {
    width: 280px;
    height: 140px;
    max-width: 280px;
    max-height: 140px;
    min-width: 280px;
    min-height: 140px;
    padding: 15px;
  }

  .skeleton {
    display: flex;
    flex-direction: row;

    .v-skeleton-loader:first-child {
      width: 40%;
    }

    .v-skeleton-loader {
      width: 70%;

      :deep(.v-skeleton-loader__image) {
        max-height: 100%;
      }

      :deep(.v-skeleton-loader__article) {
        max-height: 100%;
      }

      :deep(.v-skeleton-loader__heading) {
        margin: 6px 16px;
      }
    }
  }

  .skeleton-container {
    position: relative;
    height: 100%;
  }

  .btn-show {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.5;

    :deep(.v-icon) {
      font-size: 28px;
    }
  }

  altcha-widget {
    position: absolute;
    top: 15px; /* Ajustez cette valeur en fonction de la hauteur de votre bouton */
    left: 30px;
    background: rgb(var(--v-theme-surface));
    border-radius: 4px;
    z-index: 10;
  }
</style>