Enhance version restoration and download features

Introduce a version restoration button and logic to track restored versions throughout the UI. Update download buttons to display action strings conditionally and implement toast notifications for version restoration.
2025-06-07 18:44:08 +00:00 · 2024-09-18 23:54:06 +02:00 · 2024-09-18 23:54:06 +02:00 · 47f575de92
commit 47f575de92
parent 5906171041
13 changed files with 204 additions and 30 deletions
--- a/src/Bundle/ChillDocStoreBundle/Controller/StoredObjectRestoreVersionApiController.php
+++ b/src/Bundle/ChillDocStoreBundle/Controller/StoredObjectRestoreVersionApiController.php
@ -40,7 +40,7 @@ final readonly class StoredObjectRestoreVersionApiController
        $this->entityManager->flush();

        return new JsonResponse(
-            $this->serializer->serialize($newVersion, 'json', [AbstractNormalizer::GROUPS => ['read', StoredObjectVersionNormalizer::WITH_POINT_IN_TIMES_CONTEXT]]),
+            $this->serializer->serialize($newVersion, 'json', [AbstractNormalizer::GROUPS => ['read', StoredObjectVersionNormalizer::WITH_POINT_IN_TIMES_CONTEXT, StoredObjectVersionNormalizer::WITH_RESTORED_CONTEXT]]),
            json: true
        );
    }
--- a/src/Bundle/ChillDocStoreBundle/Controller/StoredObjectVersionApiController.php
+++ b/src/Bundle/ChillDocStoreBundle/Controller/StoredObjectVersionApiController.php
@ -61,7 +61,7 @@ final readonly class StoredObjectVersionApiController
            $this->serializer->serialize(
                new Collection($items, $paginator),
                'json',
-                [AbstractNormalizer::GROUPS => ['read', StoredObjectVersionNormalizer::WITH_POINT_IN_TIMES_CONTEXT]]
+                [AbstractNormalizer::GROUPS => ['read', StoredObjectVersionNormalizer::WITH_POINT_IN_TIMES_CONTEXT, StoredObjectVersionNormalizer::WITH_RESTORED_CONTEXT]]
            ),
            json: true
        );
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/module/document_action_buttons_group/index.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/module/document_action_buttons_group/index.ts
@ -3,6 +3,7 @@ import DocumentActionButtonsGroup from "../../vuejs/DocumentActionButtonsGroup.v
 import {createApp} from "vue";
 import {StoredObject, StoredObjectStatusChange} from "../../types";
 import {is_object_ready} from "../../vuejs/StoredObjectButton/helpers";
+import ToastPlugin from "vue-toast-notification";

 const i18n = _createI18n({});

@ -48,6 +49,6 @@ window.addEventListener('DOMContentLoaded', function (e) {
       }
     });

-     app.use(i18n).mount(el);
+     app.use(i18n).use(ToastPlugin).mount(el);
  })
 });
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts
@ -64,6 +64,7 @@ export interface StoredObjectStatusChange {

 export interface StoredObjectVersionWithPointInTime extends StoredObjectVersionPersisted {
    "point-in-times": StoredObjectPointInTime[];
+    "from-restored": StoredObjectVersionPersisted|null;
 }

 export interface StoredObjectPointInTime {
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentActionButtonsGroup.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentActionButtonsGroup.vue
@ -14,7 +14,7 @@
        <convert-button :stored-object="props.storedObject" :filename="filename" :classes="{'dropdown-item': true}"></convert-button>
      </li>
      <li v-if="isDownloadable">
-        <download-button :stored-object="props.storedObject" :at-version="props.storedObject.currentVersion" :filename="filename" :classes="{'dropdown-item': true}"></download-button>
+        <download-button :stored-object="props.storedObject" :at-version="props.storedObject.currentVersion" :filename="filename" :classes="{'dropdown-item': true}" :display-action-string-in-button="true"></download-button>
      </li>
      <li v-if="isHistoryViewable">
        <history-button :stored-object="props.storedObject" :can-edit="canEdit && props.storedObject._permissions.canEdit"></history-button>
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/DownloadButton.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/DownloadButton.vue
@ -1,11 +1,11 @@
 <template>
-    <a v-if="!state.is_ready" :class="props.classes" @click="download_and_open($event)">
+    <a v-if="!state.is_ready" :class="props.classes" @click="download_and_open($event)" title="T&#233;l&#233;charger">
        <i class="fa fa-download"></i>
-        Télécharger
+        <template v-if="displayActionStringInButton">Télécharger</template>
    </a>
-    <a v-else :class="props.classes" target="_blank" :type="props.storedObject.type" :download="buildDocumentName()" :href="state.href_url" ref="open_button">
+    <a v-else :class="props.classes" target="_blank" :type="props.storedObject.type" :download="buildDocumentName()" :href="state.href_url" ref="open_button" title="Ouvrir">
        <i class="fa fa-external-link"></i>
-        Ouvrir
+        <template v-if="displayActionStringInButton">Ouvrir</template>
    </a>
 </template>

@ -20,6 +20,7 @@ interface DownloadButtonConfig {
    atVersion: StoredObjectVersion,
    classes: { [k: string]: boolean },
    filename?: string,
+    displayActionStringInButton: boolean,
 }

 interface DownloadButtonState {
@ -28,7 +29,7 @@ interface DownloadButtonState {
    href_url: string,
 }

-const props = defineProps<DownloadButtonConfig>();
+const props = withDefaults(defineProps<DownloadButtonConfig>(), {displayActionStringInButton: true});
 const state: DownloadButtonState = reactive({is_ready: false, is_running: false, href_url: "#"});

 const open_button = ref<HTMLAnchorElement | null>(null);
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton.vue
@ -36,11 +36,15 @@ const download_version_and_open_modal = async function (): Promise<void> {
    }
 }

+const onRestoreVersion = ({newVersion}: {newVersion: StoredObjectVersionWithPointInTime}) => {
+    state.versions.unshift(newVersion);
+}
+
 </script>

 <template>
 <a @click="download_version_and_open_modal" class="dropdown-item">
-    <history-button-modal ref="modal" :versions="state.versions" :can-edit="canEdit"></history-button-modal>
+    <history-button-modal ref="modal" :versions="state.versions" :stored-object="storedObject" :can-edit="canEdit" @restore-version="onRestoreVersion"></history-button-modal>
    <i class="fa fa-history"></i>
    Historique
 </a>
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonList.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonList.vue
@ -1,21 +1,59 @@
 <script setup lang="ts">
-import {StoredObjectVersionWithPointInTime} from "./../../../types";
+import {StoredObject, StoredObjectVersionWithPointInTime} from "./../../../types";
 import HistoryButtonListItem from "ChillDocStoreAssets/vuejs/StoredObjectButton/HistoryButton/HistoryButtonListItem.vue";
+import {computed, reactive} from "vue";

 interface HistoryButtonListConfig {
-    versions: StoredObjectVersionWithPointInTime[],
+    versions: StoredObjectVersionWithPointInTime[];
+    storedObject: StoredObject;
    canEdit: boolean;
 }

+const emit = defineEmits<{
+    restoreVersion: [newVersion: StoredObjectVersionWithPointInTime]
+}>()
+
+interface HistoryButtonListState {
+    /**
+     * Contains the number of the newly created version when a version is restored.
+     */
+    restored: number;
+}
+
 const props = defineProps<HistoryButtonListConfig>();

+const state = reactive<HistoryButtonListState>({restored: -1})
+
+const higher_version = computed<number>(() => props.versions.reduce(
+    (accumulator: number, version: StoredObjectVersionWithPointInTime) => Math.max(accumulator, version.version),
+    -1
+    )
+);
+
+/**
+ * Executed when a version in child component is restored.
+ *
+ * internally, keep track of the newly restored version
+ */
+const onRestored = ({newVersion}: {newVersion: StoredObjectVersionWithPointInTime}) => {
+    state.restored = newVersion.version;
+    emit('restoreVersion', {newVersion});
+}
+
 </script>

 <template>
-    <template v-if="versions.length > 0">
+    <template v-if="props.versions.length > 0">
        <div class="container">
-            <template v-for="v in versions">
-                <history-button-list-item :version="v" :can-edit="canEdit"></history-button-list-item>
+            <template v-for="v in props.versions">
+                <history-button-list-item
+                    :version="v"
+                    :can-edit="canEdit"
+                    :is-current="higher_version === v.version"
+                    :is-restored="v.version === state.restored"
+                    :stored-object="storedObject"
+                    @restore-version="onRestored"
+                ></history-button-list-item>
            </template>
        </div>
    </template>
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonListItem.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonListItem.vue
@ -1,29 +1,59 @@
 <script setup lang="ts">
-import {StoredObjectVersionWithPointInTime} from "./../../../types";
+import {StoredObject, StoredObjectPointInTime, StoredObjectVersionWithPointInTime} from "./../../../types";
 import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge.vue";
 import {ISOToDatetime} from "./../../../../../../ChillMainBundle/Resources/public/chill/js/date";
 import FileIcon from "ChillDocStoreAssets/vuejs/FileIcon.vue";
+import RestoreVersionButton from "ChillDocStoreAssets/vuejs/StoredObjectButton/HistoryButton/RestoreVersionButton.vue";
+import DownloadButton from "ChillDocStoreAssets/vuejs/StoredObjectButton/DownloadButton.vue";
+import {computed} from "vue";

 interface HistoryButtonListItemConfig {
    version: StoredObjectVersionWithPointInTime;
+    storedObject: StoredObject;
    canEdit: boolean;
+    isCurrent: boolean;
+    isRestored: boolean;
 }

+const emit = defineEmits<{
+    restoreVersion: [newVersion: StoredObjectVersionWithPointInTime]
+}>()
+
 const props = defineProps<HistoryButtonListItemConfig>();

+const onRestore = ({newVersion}: {newVersion: StoredObjectVersionWithPointInTime}) => {
+    emit('restoreVersion', {newVersion});
+}
+
+const isKeptBeforeConversion = computed<boolean>(() => props.version["point-in-times"].reduce(
+    (accumulator: boolean, pit: StoredObjectPointInTime) => accumulator || "keep-before-conversion" === pit.reason,
+    false
+    ),
+);
+
+const isRestored = computed<boolean>(() => null !== props.version["from-restored"]);
+
+const classes = computed<{row: true, 'row-hover': true, 'blinking-1': boolean, 'blinking-2': boolean}>(() => ({row: true, 'row-hover': true, 'blinking-1': props.isRestored && 0 === props.version.version % 2, 'blinking-2': props.isRestored && 1 === props.version.version % 2}));
+
 </script>

 <template>
-<div class="row">
-    <div class="col">
-        <file-icon :type="version.type"></file-icon>
-        <strong>Par</strong> <UserRenderBoxBadge :user="version.createdBy"></UserRenderBoxBadge>
-        <strong>Le</strong> {{ $d(ISOToDatetime(version.createdAt.datetime8601)) }}
+<div :class="classes">
+    <div class="col-12 tags" v-if="isCurrent || isKeptBeforeConversion || isRestored">
+        <span class="badge bg-success" v-if="isCurrent">Version actuelle</span>
+        <span class="badge bg-info" v-if="isKeptBeforeConversion">Conservée avant conversion dans un autre format</span>
+        <span class="badge bg-info" v-if="isRestored">Restaurée depuis la version {{ version["from-restored"]?.version }}</span>
    </div>
-    <div class="col" v-if="canEdit || canRestore">
-        <ul class="record_actions">
-            <li v-if="canEdit">
-                <button class="btn btn-misc">Restaurer</button>
+    <div class="col-12">
+        <file-icon :type="version.type"></file-icon> <span><strong>#{{ version.version + 1 }}</strong></span> <strong v-if="version.version == 0">Créé par</strong><strong v-else>modifié par</strong> <span class="badge-user"><UserRenderBoxBadge :user="version.createdBy"></UserRenderBoxBadge></span> <strong>à</strong> {{ $d(ISOToDatetime(version.createdAt.datetime8601), 'long') }}
+    </div>
+    <div class="col-12">
+        <ul class="record_actions small slim on-version-actions">
+            <li v-if="canEdit && !isCurrent">
+                <restore-version-button :stored-object-version="props.version" @restore-version="onRestore"></restore-version-button>
+            </li>
+            <li>
+                <download-button :stored-object="storedObject" :at-version="version" :classes="{btn: true, 'btn-outline-primary': true}" :display-action-string-in-button="false"></download-button>
            </li>
        </ul>
    </div>
@ -31,5 +61,53 @@ const props = defineProps<HistoryButtonListItemConfig>();
 </template>

 <style scoped lang="scss">
-
+div.tags {
+    span.badge:not(:last-child) {
+        margin-right: 0.5rem;
+    }
+}
+// to make the animation restart, we have the same animation twice,
+// and alternate between both
+.blinking-1 {
+    animation-name: backgroundColorPalette-1;
+    animation-duration: 8s;
+    animation-iteration-count: 1;
+    animation-direction: normal;
+    animation-timing-function: linear;
+}
+@keyframes backgroundColorPalette-1 {
+    0% {
+        background: var(--bs-chill-green-dark);
+    }
+    25% {
+        background: var(--bs-chill-green);
+    }
+    65% {
+        background: var(--bs-chill-beige);
+    }
+    100% {
+        background: unset;
+    }
+}
+.blinking-2 {
+    animation-name: backgroundColorPalette-2;
+    animation-duration: 8s;
+    animation-iteration-count: 1;
+    animation-direction: normal;
+    animation-timing-function: linear;
+}
+@keyframes backgroundColorPalette-2 {
+    0% {
+        background: var(--bs-chill-green-dark);
+    }
+    25% {
+        background: var(--bs-chill-green);
+    }
+    65% {
+        background: var(--bs-chill-beige);
+    }
+    100% {
+        background: unset;
+    }
+}
 </style>
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonModal.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonModal.vue
@ -2,13 +2,18 @@
 import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
 import {reactive} from "vue";
 import HistoryButtonList from "ChillDocStoreAssets/vuejs/StoredObjectButton/HistoryButton/HistoryButtonList.vue";
-import {StoredObjectVersionWithPointInTime} from "./../../../types";
+import {StoredObject, StoredObjectVersionWithPointInTime} from "./../../../types";

 interface HistoryButtonListConfig {
    versions: StoredObjectVersionWithPointInTime[];
+    storedObject: StoredObject;
    canEdit: boolean;
 }

+const emit = defineEmits<{
+    restoreVersion: [newVersion: StoredObjectVersionWithPointInTime]
+}>()
+
 interface HistoryButtonModalState {
    opened: boolean;
 }
@ -27,8 +32,12 @@ defineExpose({open});
 <template>
    <Teleport to="body">
        <modal v-if="state.opened" @close="state.opened = false">
+            <template v-slot:header>
+                <h3>Historique des versions du document</h3>
+            </template>
            <template v-slot:body>
-                <history-button-list :versions="props.versions" :can-edit="canEdit"></history-button-list>
+                <p>Les versions sont conservées pendant 90 jours.</p>
+                <history-button-list :versions="props.versions" :can-edit="canEdit" :stored-object="storedObject" @restore-version="(payload) => emit('restoreVersion', payload)"></history-button-list>
            </template>
        </modal>
    </Teleport>
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/RestoreVersionButton.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/RestoreVersionButton.vue
@ -0,0 +1,32 @@
+<script setup lang="ts">
+import {StoredObjectVersionPersisted, StoredObjectVersionWithPointInTime} from "../../../types";
+import {useToast} from "vue-toast-notification";
+import {restore_version} from "./api";
+
+interface RestoreVersionButtonProps {
+    storedObjectVersion: StoredObjectVersionPersisted,
+}
+
+const emit = defineEmits<{
+    restoreVersion: [newVersion: StoredObjectVersionWithPointInTime]
+}>()
+
+const props = defineProps<RestoreVersionButtonProps>()
+
+const $toast = useToast();
+
+const restore_version_fn = async () => {
+    const newVersion = await restore_version(props.storedObjectVersion);
+
+    $toast.success("Version restaurée");
+    emit('restoreVersion', {newVersion});
+}
+</script>
+
+<template>
+<button class="btn btn-outline-action" @click="restore_version_fn" title="Restaurer"><i class="fa fa-rotate-left"></i> Restaurer</button>
+</template>
+
+<style scoped lang="scss">
+
+</style>
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/api.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/api.ts
@ -1,8 +1,12 @@
-import {StoredObject, StoredObjectVersion, StoredObjectVersionWithPointInTime} from "../../../types";
+import {StoredObject, StoredObjectVersionPersisted, StoredObjectVersionWithPointInTime} from "../../../types";
 import {fetchResults, makeFetch} from "../../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";

 export const get_versions = async (storedObject: StoredObject): Promise<StoredObjectVersionWithPointInTime[]> => {
    const versions = await fetchResults<StoredObjectVersionWithPointInTime>(`/api/1.0/doc-store/stored-object/${storedObject.uuid}/versions`);

-    return versions.sort((a: StoredObjectVersionWithPointInTime, b: StoredObjectVersionWithPointInTime) => a.version - b.version);
+    return versions.sort((a: StoredObjectVersionWithPointInTime, b: StoredObjectVersionWithPointInTime) => b.version - a.version);
+}
+
+export const restore_version = async (version: StoredObjectVersionPersisted): Promise<StoredObjectVersionWithPointInTime> => {
+   return await makeFetch<null, StoredObjectVersionWithPointInTime>("POST", `/api/1.0/doc-store/stored-object/restore-from-version/${version.id}`);
 }
--- a/src/Bundle/ChillDocStoreBundle/Serializer/Normalizer/StoredObjectVersionNormalizer.php
+++ b/src/Bundle/ChillDocStoreBundle/Serializer/Normalizer/StoredObjectVersionNormalizer.php
@ -24,6 +24,8 @@ class StoredObjectVersionNormalizer implements NormalizerInterface, NormalizerAw

    final public const WITH_POINT_IN_TIMES_CONTEXT = 'with-point-in-times';

+    final public const WITH_RESTORED_CONTEXT = 'with-restored';
+
    public function normalize($object, ?string $format = null, array $context = [])
    {
        if (!$object instanceof StoredObjectVersion) {
@ -45,6 +47,10 @@ class StoredObjectVersionNormalizer implements NormalizerInterface, NormalizerAw
            $data['point-in-times'] = $this->normalizer->normalize($object->getPointInTimes(), $format, $context);
        }

+        if (in_array(self::WITH_RESTORED_CONTEXT, $context[AbstractNormalizer::GROUPS] ?? [], true)) {
+            $data['from-restored'] = $this->normalizer->normalize($object->getCreatedFrom(), $format, [AbstractNormalizer::GROUPS => ['read']]);
+        }
+
        return $data;
    }