chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/DownloadExport/App.vue

<script setup lang="ts">
import {
    trans,
    EXPORT_GENERATION_EXPORT_GENERATION_IS_PENDING,
    EXPORT_GENERATION_TOO_MANY_RETRIES,
    EXPORT_GENERATION_ERROR_WHILE_GENERATING_EXPORT,
    EXPORT_GENERATION_EXPORT_READY,
} from "translator";
import { computed, onMounted, ref } from "vue";
import { StoredObject, StoredObjectStatus } from "ChillDocStoreAssets/types";
import { fetchExportGenerationStatus } from "ChillMainAssets/lib/api/export";
import DocumentActionButtonsGroup from "ChillDocStoreAssets/vuejs/DocumentActionButtonsGroup.vue";
import WaitingScreen from "../_components/WaitingScreen.vue";
import { ExportGeneration, WaitingScreenState } from "ChillMainAssets/types";

interface AppProps {
    exportGenerationId: string;
    title: string;
    createdDate: string;
}

const props = defineProps<AppProps>();

const exportGeneration = ref<ExportGeneration | null>(null);

const status = computed<StoredObjectStatus>(
    () => exportGeneration.value?.status ?? "pending",
);
const storedObject = computed<null | StoredObject>(() => {
    if (exportGeneration.value === null) {
        return null;
    }

    return exportGeneration.value?.storedObject;
});

const isPending = computed<boolean>(() => status.value === "pending");
const filename = computed<string>(() => `${props.title}-${props.createdDate}`);

const state = computed<WaitingScreenState>((): WaitingScreenState => {
    if (status.value === "empty") {
        return "pending";
    }

    return status.value;
});

/**
 * counter for the number of times that we check for a new status
 */
let tryiesForReady = ref<number>(0);

/**
 * how many times we may check for a new status, once loaded
 */
const maxTryiesForReady = 120;

const checkForReady = function (): void {
    if (
        "ready" === status.value ||
        "empty" === status.value ||
        "failure" === status.value ||
        // stop reloading if the page stays opened for a long time
        tryiesForReady.value > maxTryiesForReady
    ) {
        return;
    }

    tryiesForReady.value = tryiesForReady.value + 1;
    setTimeout(onObjectNewStatusCallback, 5000);
};

const onObjectNewStatusCallback = async function (): Promise<void> {
    exportGeneration.value = await fetchExportGenerationStatus(
        props.exportGenerationId,
    );

    if (isPending.value) {
        checkForReady();
        return Promise.resolve();
    }

    return Promise.resolve();
};

onMounted(() => {
    onObjectNewStatusCallback();
});
</script>

<template>
    <WaitingScreen :state="state">
        <template v-slot:pending>
            <p>
                {{ trans(EXPORT_GENERATION_EXPORT_GENERATION_IS_PENDING) }}
            </p>
        </template>

        <template v-slot:stopped>
            <p>
                {{ trans(EXPORT_GENERATION_TOO_MANY_RETRIES) }}
            </p>
        </template>

        <template v-slot:failure>
            <p>
                {{ trans(EXPORT_GENERATION_ERROR_WHILE_GENERATING_EXPORT) }}
            </p>
        </template>

        <template v-slot:ready>
            <p>
                {{ trans(EXPORT_GENERATION_EXPORT_READY) }}
            </p>

            <p v-if="storedObject !== null">
                <document-action-buttons-group
                    :stored-object="storedObject"
                    :filename="filename"
                ></document-action-buttons-group>
            </p>
        </template>
    </WaitingScreen>
</template>