From b0e2e658850f679802bb5550610f3a521d181095 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Tue, 17 Sep 2024 17:08:27 +0200
Subject: [PATCH] Add document history button with modal viewer

This commit introduces a History button to the DocumentActionButtonsGroup component to view document versions. It includes new components for the modal dialog and API integrations to fetch and display version histories. This feature allows users to view and restore previous versions of stored objects.
---
 .../Resources/public/types.ts                 | 10 ++++
 .../vuejs/DocumentActionButtonsGroup.vue      | 10 +++-
 .../StoredObjectButton/HistoryButton.vue      | 53 +++++++++++++++++++
 .../HistoryButton/HistoryButtonList.vue       | 30 +++++++++++
 .../HistoryButton/HistoryButtonListItem.vue   | 35 ++++++++++++
 .../HistoryButton/HistoryButtonModal.vue      | 39 ++++++++++++++
 .../StoredObjectButton/HistoryButton/api.ts   |  8 +++
 7 files changed, 184 insertions(+), 1 deletion(-)
 create mode 100644 src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton.vue
 create mode 100644 src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonList.vue
 create mode 100644 src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonListItem.vue
 create mode 100644 src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonModal.vue
 create mode 100644 src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/api.ts

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts
index ee6b2bf98..a6ce41512 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts
@@ -62,6 +62,16 @@ export interface StoredObjectStatusChange {
     type: string;
 }
 
+export interface StoredObjectVersionWithPointInTime extends StoredObjectVersionPersisted {
+    "point-in-times": StoredObjectPointInTime[];
+}
+
+export interface StoredObjectPointInTime {
+    id: number;
+    byUser: User | null;
+    reason: 'keep-before-conversion'|'keep-by-user';
+}
+
 /**
  * Function executed by the WopiEditButton component.
  */
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentActionButtonsGroup.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentActionButtonsGroup.vue
index 66546f2a5..614dc7a78 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentActionButtonsGroup.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentActionButtonsGroup.vue
@@ -16,6 +16,9 @@
       <li v-if="isDownloadable">
         <download-button :stored-object="props.storedObject" :at-version="props.storedObject.currentVersion" :filename="filename" :classes="{'dropdown-item': true}"></download-button>
       </li>
+      <li v-if="isHistoryViewable">
+        <history-button :stored-object="props.storedObject" :can-edit="canEdit && props.storedObject._permissions.canEdit"></history-button>
+      </li>
     </ul>
   </div>
   <div v-else-if="'pending' === props.storedObject.status">
@@ -40,6 +43,7 @@ import {
     WopiEditButtonExecutableBeforeLeaveFunction
 } from "../types";
 import DesktopEditButton from "ChillDocStoreAssets/vuejs/StoredObjectButton/DesktopEditButton.vue";
+import HistoryButton from "ChillDocStoreAssets/vuejs/StoredObjectButton/HistoryButton.vue";
 
 interface DocumentActionButtonsGroupConfig {
   storedObject: StoredObject,
@@ -126,7 +130,11 @@ const isConvertibleToPdf = computed<boolean>(() => {
         && is_extension_viewable(props.storedObject.currentVersion.type)
         && props.storedObject.currentVersion.type !== 'application/pdf'
         && props.storedObject.currentVersion.persisted !== false;
-})
+});
+
+const isHistoryViewable = computed<boolean>(() => {
+    return props.storedObject.status === 'ready';
+});
 
 const checkForReady = function(): void {
   if (
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton.vue
new file mode 100644
index 000000000..108256909
--- /dev/null
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+
+import HistoryButtonModal from "ChillDocStoreAssets/vuejs/StoredObjectButton/HistoryButton/HistoryButtonModal.vue";
+import {StoredObject, StoredObjectVersionWithPointInTime} from "./../../types";
+import {computed, reactive, ref, useTemplateRef} from "vue";
+import {get_versions} from "./HistoryButton/api";
+
+interface HistoryButtonConfig {
+    storedObject: StoredObject;
+    canEdit: boolean;
+}
+
+interface HistoryButtonState {
+    versions: StoredObjectVersionWithPointInTime[];
+    loaded: boolean;
+}
+
+const props = defineProps<HistoryButtonConfig>();
+const state = reactive<HistoryButtonState>({versions: [], loaded: false});
+const modal = useTemplateRef<typeof HistoryButtonModal>('modal');
+
+const download_version_and_open_modal = async function (): Promise<void> {
+    if (null !== modal.value) {
+        modal.value.open();
+    } else {
+        console.log("modal is null");
+    }
+
+    if (!state.loaded) {
+        const versions = await get_versions(props.storedObject);
+
+        for (const version of versions) {
+            state.versions.push(version);
+        }
+        state.loaded = true;
+    }
+}
+
+</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>
+    <i class="fa fa-history"></i>
+    Historique
+</a>
+</template>
+
+<style scoped lang="scss">
+i.fa::before {
+    color: var(--bs-dropdown-link-hover-color);
+}
+</style>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonList.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonList.vue
new file mode 100644
index 000000000..fccdb6a0d
--- /dev/null
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonList.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {StoredObjectVersionWithPointInTime} from "./../../../types";
+import HistoryButtonListItem from "ChillDocStoreAssets/vuejs/StoredObjectButton/HistoryButton/HistoryButtonListItem.vue";
+
+interface HistoryButtonListConfig {
+    versions: StoredObjectVersionWithPointInTime[],
+    canEdit: boolean;
+}
+
+const props = defineProps<HistoryButtonListConfig>();
+
+</script>
+
+<template>
+    <template v-if="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>
+        </div>
+    </template>
+    <template v-else>
+        <p>Chargement des versions</p>
+    </template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonListItem.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonListItem.vue
new file mode 100644
index 000000000..c60d62302
--- /dev/null
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonListItem.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import {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";
+
+interface HistoryButtonListItemConfig {
+    version: StoredObjectVersionWithPointInTime;
+    canEdit: boolean;
+}
+
+const props = defineProps<HistoryButtonListItemConfig>();
+
+</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>
+    <div class="col" v-if="canEdit || canRestore">
+        <ul class="record_actions">
+            <li v-if="canEdit">
+                <button class="btn btn-misc">Restaurer</button>
+            </li>
+        </ul>
+    </div>
+</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonModal.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonModal.vue
new file mode 100644
index 000000000..13b994be2
--- /dev/null
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonModal.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+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";
+
+interface HistoryButtonListConfig {
+    versions: StoredObjectVersionWithPointInTime[];
+    canEdit: boolean;
+}
+
+interface HistoryButtonModalState {
+    opened: boolean;
+}
+
+const props = defineProps<HistoryButtonListConfig>();
+const state = reactive<HistoryButtonModalState>({opened: false});
+
+const open = () => {
+    console.log('open');
+    state.opened = true;
+}
+
+defineExpose({open});
+
+</script>
+<template>
+    <Teleport to="body">
+        <modal v-if="state.opened" @close="state.opened = false">
+            <template v-slot:body>
+                <history-button-list :versions="props.versions" :can-edit="canEdit"></history-button-list>
+            </template>
+        </modal>
+    </Teleport>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/api.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/api.ts
new file mode 100644
index 000000000..b48394826
--- /dev/null
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/api.ts
@@ -0,0 +1,8 @@
+import {StoredObject, StoredObjectVersion, 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);
+}