Refactor HistoryButton and HistoryButtonModal components: streamline template structure, enhance type handling, and improve event emission for version restoration.

2026-02-04 07:27:18 +00:00 · 2026-02-03 15:33:19 +01:00
parent e97c740a75
commit 1c30bcd906
5 changed files with 140 additions and 151 deletions
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton.vue
@@ -1,10 +1,24 @@
+<template>
+  <a @click="download_version_and_open_modal" class="dropdown-item">
+    <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>
+</template>
+
 <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 { reactive, useTemplateRef } from "vue";
 import { get_versions } from "./HistoryButton/api";

 interface HistoryButtonConfig {
@@ -38,29 +52,11 @@ const download_version_and_open_modal = async function (): Promise<void> {
  }
 };

-const onRestoreVersion = ({
-  newVersion,
-}: {
-  newVersion: StoredObjectVersionWithPointInTime;
-}) => {
+const onRestoreVersion = (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"
-      :stored-object="storedObject"
-      :can-edit="canEdit"
-      @restore-version="onRestoreVersion"
-    ></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);
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonList.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonList.vue
@@ -1,3 +1,22 @@
+<template>
+  <template v-if="props.versions.length > 0">
+    <div class="container">
+      <template v-for="v in props.versions" :key="v.id">
+        <history-button-list-item
+          :version="v"
+          :can-edit="canEdit"
+          :is-current="higher_version === v.version"
+          :stored-object="storedObject"
+          @restore-version="onRestored"
+        ></history-button-list-item>
+      </template>
+    </div>
+  </template>
+  <template v-else>
+    <p>Chargement des versions</p>
+  </template>
+</template>
+
 <script setup lang="ts">
 import {
  StoredObject,
@@ -40,33 +59,10 @@ const higher_version = computed<number>(() =>
 *
 * internally, keep track of the newly restored version
 */
-const onRestored = ({
-  newVersion,
-}: {
-  newVersion: StoredObjectVersionWithPointInTime;
-}) => {
+const onRestored = (newVersion: StoredObjectVersionWithPointInTime) => {
  state.restored = newVersion.version;
-  emit("restoreVersion", { newVersion });
+  emit("restoreVersion", newVersion);
 };
 </script>

-<template>
-  <template v-if="props.versions.length > 0">
-    <div class="container">
-      <template v-for="v in props.versions" :key="v.id">
-        <history-button-list-item
-          :version="v"
-          :can-edit="canEdit"
-          :is-current="higher_version === v.version"
-          :stored-object="storedObject"
-          @restore-version="onRestored"
-        ></history-button-list-item>
-      </template>
-    </div>
-  </template>
-  <template v-else>
-    <p>Chargement des versions</p>
-  </template>
-</template>
-
 <style scoped lang="scss"></style>
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonListItem.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonListItem.vue
@@ -1,3 +1,70 @@
+<template>
+  <div :class="classes">
+    <div
+      class="col-12 tags"
+      v-if="isCurrent || isKeptBeforeConversion || isRestored || isDuplicated"
+    >
+      <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
+            ? version["from-restored"]?.version + 1
+            : ""
+        }}</span
+      >
+      <span class="badge bg-info" v-if="isDuplicated"
+        >Dupliqué depuis un autre document</span
+      >
+    </div>
+    <div class="col-12">
+      <file-icon :type="version.type"></file-icon>
+      <span
+        ><strong>&nbsp;#{{ version.version + 1 }}&nbsp;</strong></span
+      >
+      <template v-if="version.createdBy !== null && version.createdAt !== null">
+        <strong v-if="version.version == 0">créé par</strong>
+        <strong v-else>modifié par</strong>
+        <span class="badge-user">
+          <UserRenderBoxBadge :user="version.createdBy" />
+        </span>
+        <strong>à</strong>
+        {{ $d(ISOToDatetime(version.createdAt.datetime8601) ?? 0, "long") }}
+      </template>
+      <template v-if="version.createdBy === null && version.createdAt !== null">
+        <strong v-if="version.version == 0">Créé le</strong>
+        <strong v-else>modifié le</strong>
+        {{ $d(ISOToDatetime(version.createdAt.datetime8601) ?? 0, "long") }}
+      </template>
+    </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,
+              'btn-sm': true,
+            }"
+            :display-action-string-in-button="false"
+          ></download-button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
 <script setup lang="ts">
 import {
  StoredObject,
@@ -24,12 +91,8 @@ const emit = defineEmits<{

 const props = defineProps<HistoryButtonListItemConfig>();

-const onRestore = ({
-  newVersion,
-}: {
-  newVersion: StoredObjectVersionWithPointInTime;
-}) => {
-  emit("restoreVersion", { newVersion });
+const onRestore = (newVersion: StoredObjectVersionWithPointInTime) => {
+  emit("restoreVersion", newVersion);
 };

 const isKeptBeforeConversion = computed<boolean>(() => {
@@ -60,77 +123,11 @@ const classes = computed<{
 }>(() => ({
  row: true,
  "row-hover": true,
-  "blinking-1": props.isRestored && 0 === props.version.version % 2,
-  "blinking-2": props.isRestored && 1 === props.version.version % 2,
+  "blinking-1": isRestored.value && 0 === props.version.version % 2,
+  "blinking-2": isRestored.value && 1 === props.version.version % 2,
 }));
 </script>

-<template>
-  <div :class="classes">
-    <div
-      class="col-12 tags"
-      v-if="isCurrent || isKeptBeforeConversion || isRestored || isDuplicated"
-    >
-      <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 + 1 }}</span
-      >
-      <span class="badge bg-info" v-if="isDuplicated"
-        >Dupliqué depuis un autre document</span
-      >
-    </div>
-    <div class="col-12">
-      <file-icon :type="version.type"></file-icon>
-      <span
-        ><strong>&nbsp;#{{ version.version + 1 }}&nbsp;</strong></span
-      >
-      <template v-if="version.createdBy !== null && version.createdAt !== null"
-        ><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")
-        }}</template
-      ><template v-if="version.createdBy === null && version.createdAt !== null"
-        ><strong v-if="version.version == 0">Créé le</strong
-        ><strong v-else>modifié le</strong>
-        {{
-          $d(ISOToDatetime(version.createdAt.datetime8601), "long")
-        }}</template
-      >
-    </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,
-              'btn-sm': true,
-            }"
-            :display-action-string-in-button="false"
-          ></download-button>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
 <style scoped lang="scss">
 div.tags {
  span.badge:not(:last-child) {
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonModal.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonModal.vue
@@ -1,3 +1,22 @@
+<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>
+        <p>Les versions sont conservées pendant 90 jours.</p>
+        <history-button-list
+          :versions="props.versions"
+          :can-edit="canEdit"
+          :stored-object="storedObject"
+          @restore-version="onRestoreVersion"
+        ></history-button-list>
+      </template>
+    </modal>
+  </Teleport>
+</template>
+
 <script setup lang="ts">
 import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
 import { reactive } from "vue";
@@ -28,29 +47,10 @@ const open = () => {
  state.opened = true;
 };

-const onRestoreVersion = (payload: {
-  newVersion: StoredObjectVersionWithPointInTime;
-}) => emit("restoreVersion", payload);
+const onRestoreVersion = (newVersion: StoredObjectVersionWithPointInTime) =>
+  emit("restoreVersion", newVersion);

 defineExpose({ open });
 </script>
-<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>
-        <p>Les versions sont conservées pendant 90 jours.</p>
-        <history-button-list
-          :versions="props.versions"
-          :can-edit="canEdit"
-          :stored-object="storedObject"
-          @restore-version="onRestoreVersion"
-        ></history-button-list>
-      </template>
-    </modal>
-  </Teleport>
-</template>

 <style scoped lang="scss"></style>
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/RestoreVersionButton.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/RestoreVersionButton.vue
@@ -1,3 +1,13 @@
+<template>
+  <button
+    class="btn btn-outline-action"
+    @click="restore_version_fn"
+    title="Restaurer"
+  >
+    <i class="fa fa-rotate-left"></i> Restaurer
+  </button>
+</template>
+
 <script setup lang="ts">
 import {
  StoredObjectVersionPersisted,
@@ -22,18 +32,8 @@ const restore_version_fn = async () => {
  const newVersion = await restore_version(props.storedObjectVersion);

  $toast.success("Version restaurée");
-  emit("restoreVersion", { newVersion });
+  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>