mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-20 14:43:49 +00:00
Partage d'export enregistré et génération asynchrone des exports
This commit is contained in:
@@ -0,0 +1,141 @@
|
||||
<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 { ExportGeneration } 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 isFetching = computed<boolean>(
|
||||
() => tryiesForReady.value < maxTryiesForReady,
|
||||
);
|
||||
const isReady = computed<boolean>(() => status.value === "ready");
|
||||
const isFailure = computed<boolean>(() => status.value === "failure");
|
||||
const filename = computed<string>(() => `${props.title}-${props.createdDate}`);
|
||||
|
||||
/**
|
||||
* 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>
|
||||
<div id="waiting-screen">
|
||||
<div
|
||||
v-if="isPending && isFetching"
|
||||
class="alert alert-danger text-center"
|
||||
>
|
||||
<div>
|
||||
<p>
|
||||
{{ trans(EXPORT_GENERATION_EXPORT_GENERATION_IS_PENDING) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isPending && !isFetching" class="alert alert-info">
|
||||
<div>
|
||||
<p>
|
||||
{{ trans(EXPORT_GENERATION_TOO_MANY_RETRIES) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isFailure" class="alert alert-danger text-center">
|
||||
<div>
|
||||
<p>
|
||||
{{ trans(EXPORT_GENERATION_ERROR_WHILE_GENERATING_EXPORT) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isReady" class="alert alert-success text-center">
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
#waiting-screen {
|
||||
> .alert {
|
||||
min-height: 350px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,15 @@
|
||||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
|
||||
const el = document.getElementById("app");
|
||||
|
||||
if (null === el) {
|
||||
console.error("div element app was not found");
|
||||
throw new Error("div element app was not found");
|
||||
}
|
||||
|
||||
const exportGenerationId = el?.dataset.exportGenerationId as string;
|
||||
const title = el?.dataset.exportTitle as string;
|
||||
const createdDate = el?.dataset.exportGenerationDate as string;
|
||||
|
||||
createApp(App, { exportGenerationId, title, createdDate }).mount(el);
|
||||
@@ -1,10 +1,26 @@
|
||||
<template>
|
||||
<ul :class="listClasses" v-if="picked.length && displayPicked">
|
||||
<li v-for="p in picked" @click="removeEntity(p)" :key="p.type + p.id">
|
||||
<span class="chill_denomination">{{ p.text }}</span>
|
||||
<span
|
||||
v-if="'me' === p"
|
||||
class="chill_denomination current-user updatedBy"
|
||||
>{{ trans(USER_CURRENT_USER) }}</span
|
||||
>
|
||||
<span v-else class="chill_denomination">{{ p.text }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="record_actions">
|
||||
<li v-if="isCurrentUserPicker" class="btn btn-sm btn-misc">
|
||||
<label class="flex items-center gap-2">
|
||||
<input
|
||||
:checked="picked.indexOf('me') >= 0 ? true : null"
|
||||
ref="itsMeCheckbox"
|
||||
:type="multiple ? 'checkbox' : 'radio'"
|
||||
@change="selectItsMe"
|
||||
/>
|
||||
{{ trans(USER_CURRENT_USER) }}
|
||||
</label>
|
||||
</li>
|
||||
<li class="add-persons">
|
||||
<add-persons
|
||||
:options="addPersonsOptions"
|
||||
@@ -24,119 +40,83 @@
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons.vue";
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons.vue"; // eslint-disable-line
|
||||
import { appMessages } from "./i18n";
|
||||
import { trans, USER_CURRENT_USER } from "translator";
|
||||
|
||||
export default {
|
||||
name: "PickEntity",
|
||||
props: {
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
types: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
picked: {
|
||||
required: true,
|
||||
},
|
||||
uniqid: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
removableIfSet: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
displayPicked: {
|
||||
// display picked entities.
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
suggested: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
emits: ["addNewEntity", "removeEntity", "addNewEntityProcessEnded"],
|
||||
components: {
|
||||
AddPersons,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
key: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
addPersonsOptions() {
|
||||
return {
|
||||
uniq: !this.multiple,
|
||||
type: this.types,
|
||||
priority: null,
|
||||
button: {
|
||||
size: "btn-sm",
|
||||
class: "btn-submit",
|
||||
},
|
||||
};
|
||||
},
|
||||
translatedListOfTypes() {
|
||||
if (this.label !== "") {
|
||||
return this.label;
|
||||
}
|
||||
const props = defineProps({
|
||||
multiple: Boolean,
|
||||
types: Array,
|
||||
picked: Array,
|
||||
uniqid: String,
|
||||
removableIfSet: { type: Boolean, default: true },
|
||||
displayPicked: { type: Boolean, default: true },
|
||||
suggested: { type: Array, default: () => [] },
|
||||
label: String,
|
||||
isCurrentUserPicker: { type: Boolean, default: false },
|
||||
});
|
||||
|
||||
let trans = [];
|
||||
this.types.forEach((t) => {
|
||||
if (this.$props.multiple) {
|
||||
trans.push(appMessages.fr.pick_entity[t].toLowerCase());
|
||||
} else {
|
||||
trans.push(
|
||||
appMessages.fr.pick_entity[t + "_one"].toLowerCase(),
|
||||
);
|
||||
}
|
||||
});
|
||||
const emit = defineEmits([
|
||||
"addNewEntity",
|
||||
"removeEntity",
|
||||
"addNewEntityProcessEnded",
|
||||
]);
|
||||
|
||||
if (this.$props.multiple) {
|
||||
return (
|
||||
appMessages.fr.pick_entity.modal_title + trans.join(", ")
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
appMessages.fr.pick_entity.modal_title_one +
|
||||
trans.join(", ")
|
||||
);
|
||||
}
|
||||
},
|
||||
listClasses() {
|
||||
return {
|
||||
"list-suggest": true,
|
||||
"remove-items": this.$props.removableIfSet,
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
addNewSuggested(entity) {
|
||||
this.$emit("addNewEntity", { entity: entity });
|
||||
},
|
||||
addNewEntity({ selected, modal }) {
|
||||
selected.forEach((item) => {
|
||||
this.$emit("addNewEntity", { entity: item.result });
|
||||
}, this);
|
||||
this.$refs.addPersons.resetSearch(); // to cast child method
|
||||
modal.showModal = false;
|
||||
this.$emit("addNewEntityProcessEnded");
|
||||
},
|
||||
removeEntity(entity) {
|
||||
if (!this.$props.removableIfSet) {
|
||||
return;
|
||||
}
|
||||
this.$emit("removeEntity", { entity: entity });
|
||||
},
|
||||
},
|
||||
const itsMeCheckbox = ref(null);
|
||||
const addPersons = ref(null);
|
||||
|
||||
const addPersonsOptions = computed(() => ({
|
||||
uniq: !props.multiple,
|
||||
type: props.types,
|
||||
priority: null,
|
||||
button: { size: "btn-sm", class: "btn-submit" },
|
||||
}));
|
||||
|
||||
const translatedListOfTypes = computed(() => {
|
||||
if (props.label) return props.label;
|
||||
let trans = props.types.map((t) =>
|
||||
props.multiple
|
||||
? appMessages.fr.pick_entity[t].toLowerCase()
|
||||
: appMessages.fr.pick_entity[t + "_one"].toLowerCase(),
|
||||
);
|
||||
return props.multiple
|
||||
? appMessages.fr.pick_entity.modal_title + trans.join(", ")
|
||||
: appMessages.fr.pick_entity.modal_title_one + trans.join(", ");
|
||||
});
|
||||
|
||||
const listClasses = computed(() => ({
|
||||
"list-suggest": true,
|
||||
"remove-items": props.removableIfSet,
|
||||
}));
|
||||
|
||||
const selectItsMe = (event) =>
|
||||
event.target.checked ? addNewSuggested("me") : removeEntity("me");
|
||||
|
||||
const addNewSuggested = (entity) => {
|
||||
emit("addNewEntity", { entity });
|
||||
};
|
||||
|
||||
const addNewEntity = ({ selected, modal }) => {
|
||||
selected.forEach((item) => emit("addNewEntity", { entity: item.result }));
|
||||
addPersons.value?.resetSearch();
|
||||
modal.showModal = false;
|
||||
emit("addNewEntityProcessEnded");
|
||||
};
|
||||
|
||||
const removeEntity = (entity) => {
|
||||
if (!props.removableIfSet) return;
|
||||
if (entity === "me" && itsMeCheckbox.value) {
|
||||
itsMeCheckbox.value.checked = false;
|
||||
}
|
||||
emit("removeEntity", { entity });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.current-user {
|
||||
color: var(--bs-body-color);
|
||||
background-color: var(--bs-chill-l-gray) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import GenerateButton from "ChillMainAssets/vuejs/SavedExportButtons/Component/GenerateButton.vue";
|
||||
|
||||
interface SavedExportButtonsConfig {
|
||||
savedExportUuid: string;
|
||||
savedExportAlias: string;
|
||||
}
|
||||
|
||||
const props = defineProps<SavedExportButtonsConfig>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<generate-button
|
||||
:saved-export-uuid="props.savedExportUuid"
|
||||
></generate-button>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -0,0 +1,186 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
trans,
|
||||
SAVED_EXPORT_EXECUTE,
|
||||
EXPORT_GENERATION_EXPORT_GENERATION_IS_PENDING_SHORT,
|
||||
EXPORT_GENERATION_TOO_MANY_RETRIES,
|
||||
EXPORT_GENERATION_ERROR_WHILE_GENERATING_EXPORT,
|
||||
EXPORT_GENERATION_EXPORT_READY,
|
||||
} from "translator";
|
||||
import {
|
||||
fetchExportGenerationStatus,
|
||||
generateFromSavedExport,
|
||||
} from "ChillMainAssets/lib/api/export";
|
||||
import { computed, ref } from "vue";
|
||||
import { ExportGeneration } from "ChillMainAssets/types";
|
||||
import { StoredObject, StoredObjectStatus } from "ChillDocStoreAssets/types";
|
||||
import DownloadButton from "ChillDocStoreAssets/vuejs/StoredObjectButton/DownloadButton.vue";
|
||||
import { useToast } from "vue-toast-notification";
|
||||
import "vue-toast-notification/dist/theme-sugar.css";
|
||||
|
||||
interface SavedExportButtonGenerateConfig {
|
||||
savedExportUuid: string;
|
||||
}
|
||||
|
||||
const props = defineProps<SavedExportButtonGenerateConfig>();
|
||||
const emits = defineEmits<{
|
||||
(e: "generate");
|
||||
}>();
|
||||
|
||||
const toast = useToast();
|
||||
const exportGeneration = ref<ExportGeneration | null>(null);
|
||||
|
||||
const status = computed<StoredObjectStatus | "inactive">(
|
||||
() => exportGeneration.value?.status ?? "inactive",
|
||||
);
|
||||
const storedObject = computed<null | StoredObject>(() => {
|
||||
if (exportGeneration.value === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return exportGeneration.value?.storedObject;
|
||||
});
|
||||
|
||||
const isInactive = computed<boolean>(() => status.value === "inactive");
|
||||
const isPending = computed<boolean>(() => status.value === "pending");
|
||||
const isFetching = computed<boolean>(
|
||||
() => tryiesForReady.value < maxTryiesForReady,
|
||||
);
|
||||
const isReady = computed<boolean>(() => status.value === "ready");
|
||||
const isFailure = computed<boolean>(() => status.value === "failure");
|
||||
const filename = computed<string>(() => {
|
||||
if (null === exportGeneration.value) {
|
||||
return "";
|
||||
}
|
||||
|
||||
return `${exportGeneration.value?.storedObject.title}-${exportGeneration.value?.createdAt?.datetime8601}`;
|
||||
});
|
||||
const externalDownloadLink = computed<string>(
|
||||
() => `/fr/main/export-generation/${exportGeneration.value?.id}/wait`,
|
||||
);
|
||||
const classes = computed<Record<string, boolean>>(() => {
|
||||
return {};
|
||||
});
|
||||
const buttonClasses = computed<Record<string, boolean>>(() => {
|
||||
return { btn: true, "btn-outline-primary": true };
|
||||
});
|
||||
|
||||
/**
|
||||
* 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,
|
||||
tryiesForReady.value < 10 ? 1500 : 5000,
|
||||
);
|
||||
};
|
||||
|
||||
const onExportGenerationSuccess = function (): void {
|
||||
toast.success(trans(EXPORT_GENERATION_EXPORT_READY));
|
||||
};
|
||||
|
||||
const onObjectNewStatusCallback = async function (): Promise<void> {
|
||||
if (null === exportGeneration.value) {
|
||||
checkForReady();
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
const newExportGeneration = await fetchExportGenerationStatus(
|
||||
exportGeneration.value?.id,
|
||||
);
|
||||
|
||||
if (newExportGeneration.status !== exportGeneration.value.status) {
|
||||
if (newExportGeneration.status === "ready") {
|
||||
onExportGenerationSuccess();
|
||||
}
|
||||
}
|
||||
|
||||
exportGeneration.value = newExportGeneration;
|
||||
|
||||
if (isPending.value) {
|
||||
checkForReady();
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
return Promise.resolve();
|
||||
};
|
||||
|
||||
const onClickGenerate = async (): Promise<void> => {
|
||||
emits("generate");
|
||||
exportGeneration.value = await generateFromSavedExport(
|
||||
props.savedExportUuid,
|
||||
);
|
||||
|
||||
onObjectNewStatusCallback();
|
||||
|
||||
return Promise.resolve();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
v-if="isInactive"
|
||||
:class="buttonClasses"
|
||||
type="button"
|
||||
@click="onClickGenerate"
|
||||
>
|
||||
<i class="fa fa-cog"></i> {{ trans(SAVED_EXPORT_EXECUTE) }}
|
||||
</button>
|
||||
<template v-if="isPending && isFetching">
|
||||
<span class="btn">
|
||||
<i class="fa fa-cog fa-spin fa-fw"></i>
|
||||
<span class="pending-message">{{
|
||||
trans(EXPORT_GENERATION_EXPORT_GENERATION_IS_PENDING_SHORT)
|
||||
}}</span>
|
||||
<a :href="externalDownloadLink" class="externalDownloadLink">
|
||||
<i class="bi bi-box-arrow-up-right"></i>
|
||||
</a>
|
||||
</span>
|
||||
</template>
|
||||
<div v-if="isPending && !isFetching" :class="buttonClasses">
|
||||
<span>{{ trans(EXPORT_GENERATION_TOO_MANY_RETRIES) }}</span>
|
||||
</div>
|
||||
<download-button
|
||||
v-else-if="isReady && storedObject?.currentVersion !== null"
|
||||
:classes="buttonClasses"
|
||||
:stored-object="storedObject"
|
||||
:at-version="storedObject?.currentVersion"
|
||||
:filename="filename"
|
||||
></download-button>
|
||||
<div v-else-if="isFailure" :class="classes">
|
||||
<span class="btn">
|
||||
<i class="bi bi-exclamation-triangle"></i>
|
||||
<span class="pending-message">{{
|
||||
trans(EXPORT_GENERATION_ERROR_WHILE_GENERATING_EXPORT)
|
||||
}}</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pending-message {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.externalDownloadLink {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
import { createApp } from "vue";
|
||||
|
||||
import App from "./App.vue";
|
||||
|
||||
const buttons = document.querySelectorAll<HTMLDivElement>(
|
||||
"[data-generate-export-button]",
|
||||
);
|
||||
|
||||
buttons.forEach((button) => {
|
||||
const savedExportUuid = button.dataset.savedExportUuid as string;
|
||||
|
||||
createApp(App, { savedExportUuid, savedExportAlias: "" }).mount(button);
|
||||
});
|
||||
Reference in New Issue
Block a user