chill-bundles/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentActionButtonsGroup.vue

<template>
    <div
        v-if="
            'ready' === props.storedObject.status ||
            'stored_object_created' === props.storedObject.status
        "
        class="btn-group"
    >
        <button
            :class="
                Object.assign({
                    btn: true,
                    'btn-outline-primary': true,
                    'dropdown-toggle': true,
                    'btn-sm': props.small,
                })
            "
            type="button"
            data-bs-toggle="dropdown"
            aria-expanded="false"
        >
            Actions
        </button>
        <ul class="dropdown-menu">
            <li
                v-if="
                    props.canEdit &&
                    is_extension_editable(props.storedObject.type) &&
                    props.storedObject.status !== 'stored_object_created'
                "
            >
                <wopi-edit-button
                    :stored-object="props.storedObject"
                    :classes="{ 'dropdown-item': true }"
                    :execute-before-leave="props.executeBeforeLeave"
                ></wopi-edit-button>
            </li>
            <li
                v-if="
                    props.canEdit &&
                    is_extension_editable(props.storedObject.type) &&
                    props.davLink !== undefined &&
                    props.davLinkExpiration !== undefined
                "
            >
                <desktop-edit-button
                    :classes="{ 'dropdown-item': true }"
                    :edit-link="props.davLink"
                    :expiration-link="props.davLinkExpiration"
                ></desktop-edit-button>
            </li>
            <li
                v-if="
                    props.storedObject.type != 'application/pdf' &&
                    is_extension_viewable(props.storedObject.type) &&
                    props.canConvertPdf &&
                    props.storedObject.status !== 'stored_object_created'
                "
            >
                <convert-button
                    :stored-object="props.storedObject"
                    :filename="filename"
                    :classes="{ 'dropdown-item': true }"
                ></convert-button>
            </li>
            <li v-if="props.canDownload">
                <download-button
                    :stored-object="props.storedObject"
                    :filename="filename"
                    :classes="{ 'dropdown-item': true }"
                ></download-button>
            </li>
        </ul>
    </div>
    <div v-else-if="'pending' === props.storedObject.status">
        <div class="btn btn-outline-info">Génération en cours</div>
    </div>
    <div v-else-if="'failure' === props.storedObject.status">
        <div class="btn btn-outline-danger">La génération a échoué</div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import ConvertButton from "./StoredObjectButton/ConvertButton.vue";
import DownloadButton from "./StoredObjectButton/DownloadButton.vue";
import WopiEditButton from "./StoredObjectButton/WopiEditButton.vue";
import {
    is_extension_editable,
    is_extension_viewable,
    is_object_ready,
} from "./StoredObjectButton/helpers";
import {
    StoredObject,
    StoredObjectCreated,
    StoredObjectStatusChange,
    WopiEditButtonExecutableBeforeLeaveFunction,
} from "../types";
import DesktopEditButton from "ChillDocStoreAssets/vuejs/StoredObjectButton/DesktopEditButton.vue";

interface DocumentActionButtonsGroupConfig {
    storedObject: StoredObject | StoredObjectCreated;
    small?: boolean;
    canEdit?: boolean;
    canDownload?: boolean;
    canConvertPdf?: boolean;
    returnPath?: string;

    /**
     * Will be the filename displayed to the user when he·she download the document
     * (the document will be saved on his disk with this name)
     *
     * If not set, 'document' will be used.
     */
    filename?: string;

    /**
     * If set, will execute this function before leaving to the editor
     */
    executeBeforeLeave?: WopiEditButtonExecutableBeforeLeaveFunction;

    /**
     * a link to download and edit file using webdav
     */
    davLink?: string;

    /**
     * the expiration date of the download, as a unix timestamp
     */
    davLinkExpiration?: number;
}

const emit =
    defineEmits<
        (
            e: "onStoredObjectStatusChange",
            newStatus: StoredObjectStatusChange,
        ) => void
    >();

const props = withDefaults(defineProps<DocumentActionButtonsGroupConfig>(), {
    small: false,
    canEdit: true,
    canDownload: true,
    canConvertPdf: true,
    returnPath:
        window.location.pathname +
        window.location.search +
        window.location.hash,
});

/**
 * counter for the number of times that we check for a new status
 */
let tryiesForReady = 0;

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

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

    tryiesForReady = tryiesForReady + 1;

    setTimeout(onObjectNewStatusCallback, 5000);
};

const onObjectNewStatusCallback = async function (): Promise<void> {
    if (props.storedObject.status === "stored_object_created") {
        return Promise.resolve();
    }

    const new_status = await is_object_ready(props.storedObject);
    if (props.storedObject.status !== new_status.status) {
        emit("onStoredObjectStatusChange", new_status);
        return Promise.resolve();
    } else if ("failure" === new_status.status) {
        return Promise.resolve();
    }

    if ("ready" !== new_status.status) {
        // we check for new status, unless it is ready
        checkForReady();
    }

    return Promise.resolve();
};

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

<style scoped></style>