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

<template>
  <div v-if="'ready' === 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)">
        <wopi-edit-button :stored-object="props.storedObject" :classes="{'dropdown-item': true}" :execute-before-leave="props.executeBeforeLeave"></wopi-edit-button>
      </li>
      <li v-if="props.storedObject.type != 'application/pdf' && is_extension_viewable(props.storedObject.type) && props.canConvertPdf">
        <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,
  StoredObjectStatusChange,
  WopiEditButtonExecutableBeforeLeaveFunction
} from "../types";

interface DocumentActionButtonsGroupConfig {
  storedObject: StoredObject,
  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,
}

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
    // 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> {
  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>