geovisio-website/src/components/upload/UploadLoader.vue

<template>
  <div class="entry-loader">
    <div class="wrapper-loader">
      <div v-if="uploadedSequence" class="loader-title">
        <span class="title">{{ uploadedSequence.title }}</span>
        <div class="sequence-button">
          <Link
            :text="$t('pages.upload.sequence_link')"
            :disabled="!isLoaded"
            :route="{ name: 'sequence', params: { id: uploadedSequence.id } }"
            look="button button--blue-bleu"
          />
        </div>
      </div>
      <p v-if="isLoaded" class="text-information">
        {{ $t('pages.upload.sequence_loaded_information') }}
      </p>
      <p v-else class="text-information">
        {{ $t('pages.upload.sequence_loading_information') }}
      </p>
      <div v-if="!isLoaded" class="loading-block">
        <div class="loader">
          <span class="loader-percentage">{{ loadPercentage }}</span>
          <Loader look="md" :is-loaded="isLoaded" />
        </div>
        <div v-if="uploadedSequence" class="loader-information">
          <div class="wrapper-picture-count">
            <span class="picture-length">{{
              uploadedSequence.pictures.length
            }}</span>
            <span> / </span>
            <span>{{ picturesCount }}</span>
          </div>
          <span>{{ $t('pages.upload.images_count_text') }}</span>
        </div>
      </div>
      <div v-else class="loaded-block">
        <img src="@/assets/images/success.svg" alt="" />
        <p>{{ $t('pages.upload.upload_done') }}</p>
      </div>
    </div>
    <div
      v-if="uploadedSequence && uploadedSequence.picturesOnError.length"
      class="error-wrapper"
    >
      <div class="error-corpus">
        <i class="bi bi-exclamation-triangle"></i>
        <span class="error-text">{{
          $t('pages.upload.pictures_error', {
            count: uploadedSequence.picturesOnError.length
          })
        }}</span>
      </div>
      <Button
        :text="$t('pages.upload.error_button')"
        look="button button--red"
        @trigger="$emit('triggerModal')"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import Loader from '@/components/Loader.vue'
import Link from '@/components/Link.vue'
import Button from '@/components/Button.vue'
import type { PropType } from 'vue'
import type { SequenceInterface } from '@/views/interfaces/UploadPicturesView'

defineProps({
  loadPercentage: { type: String, default: '0%' },
  isLoaded: { type: Boolean, default: false },
  uploadedSequence: {
    type: Object as PropType<SequenceInterface | null>,
    default: null
  },
  picturesCount: { type: Number, default: null }
})
</script>

<style scoped lang="scss">
.entry-loader {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 93%;
}
.wrapper-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: toRem(3);
  height: 100%;
}
.loader {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader-percentage {
  width: toRem(10);
  position: absolute;
  text-align: center;
  @include text(xxl-regular);
  color: var(--blue);
}
.loader-information {
  margin-top: toRem(2);
  display: flex;
  align-items: center;
  flex-direction: column;
}
.loader-title {
  width: 100%;
  @include text(m-regular);
  color: var(--blue-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: toRem(1);
}
.sequence-button {
  width: toRem(22);
}
.text-information {
  @include text(s-r-regular);
  margin-bottom: toRem(4);
  width: 100%;
}
.wrapper-picture-count {
  @include text(xxl-regular);
}
.picture-length {
  color: var(--blue);
  font-weight: 860;
}
.error-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  border-left: toRem(1.4) solid var(--red-pale);
  background-color: var(--orange-pale);
  padding: toRem(2);
  border-radius: toRem(1.5);
}
.error-corpus {
  color: var(--red-pale);
  @include text(m-regular);
  margin-bottom: toRem(1);
}
.error-text {
  margin-left: toRem(0.5);
}
.loading-block,
.loaded-block {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.loaded-block {
  color: var(--green);
  img {
    margin-bottom: toRem(2);
  }
}
@media (max-width: toRem(102.4)) {
  .loader-title {
    flex-direction: column;
    align-items: flex-start;
  }
  .title {
    margin-bottom: toRem(1.5);
  }
}
</style>