Fix multi-history view stats

Add composables to deal with "extended" versions of histories when needed.
Use proper types for history references in components.

client/src/components/History/CurrentHistory/HistoryCounter.vue

@@ -9,14 +9,13 @@ import prettyBytes from "pretty-bytes";
 import { computed, onMounted, ref, toRef } from "vue";
 import { useRouter } from "vue-router/composables";
 
-import type { HistorySummary } from "@/api";
+import type { HistorySummaryExtended } from "@/api";
 import { HistoryFilters } from "@/components/History/HistoryFilters.js";
 import { useConfig } from "@/composables/config";
+import { useHistoryContentStats } from "@/composables/historyContentStats";
 import { useStorageLocationConfiguration } from "@/composables/storageLocation";
 import { useUserStore } from "@/stores/userStore";
 
-import { useDetailedHistory } from "./usesDetailedHistory";
-
 import PreferredStorePopover from "./PreferredStorePopover.vue";
 import SelectPreferredStore from "./SelectPreferredStore.vue";
 
@@ -26,7 +25,7 @@ library.add(faDatabase, faEyeSlash, faHdd, faMapMarker, faSync, faTrash);
 
 const props = withDefaults(
     defineProps<{
-        history: HistorySummary;
+        history: HistorySummaryExtended;
         isWatching?: boolean;
         lastChecked: Date;
         filterText?: string;
@@ -47,7 +46,9 @@ const emit = defineEmits(["update:filter-text", "reloadContents"]);
 const router = useRouter();
 const { config } = useConfig();
 const { currentUser } = storeToRefs(useUserStore());
-const { historySize, numItemsActive, numItemsDeleted, numItemsHidden } = useDetailedHistory(toRef(props, "history"));
+const { historySize, numItemsActive, numItemsDeleted, numItemsHidden } = useHistoryContentStats(
+    toRef(props, "history")
+);
 
 const reloadButtonLoading = ref(false);
 const reloadButtonTitle = ref("");

client/src/components/History/CurrentHistory/HistoryOperations/DefaultOperations.vue

@@ -5,26 +5,26 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BDropdown, BDropdownItem, BDropdownText, BModal } from "bootstrap-vue";
 import { toRef } from "vue";
 
-import type { HistorySummary } from "@/api";
-import { useDetailedHistory } from "@/components/History/CurrentHistory/usesDetailedHistory";
+import type { HistorySummary, HistorySummaryExtended } from "@/api";
 import {
     deleteAllHiddenContent,
     purgeAllDeletedContent,
     unhideAllHiddenContent,
 } from "@/components/History/model/crud";
 import { iframeRedirect } from "@/components/plugins/legacyNavigation";
+import { useHistoryContentStats } from "@/composables/historyContentStats";
 
 library.add(faCog);
 
 interface Props {
-    history: HistorySummary;
+    history: HistorySummaryExtended;
 }
 
 const props = defineProps<Props>();
 
 const emit = defineEmits(["update:operation-running"]);
 
-const { numItemsDeleted, numItemsHidden } = useDetailedHistory(toRef(props, "history"));
+const { numItemsDeleted, numItemsHidden } = useHistoryContentStats(toRef(props, "history"));
 
 function onCopy() {
     iframeRedirect("/dataset/copy_datasets");

client/src/components/History/CurrentHistory/HistoryOperations/HistoryOperations.vue

@@ -3,14 +3,14 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheckSquare, faCompress } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
-import type { HistorySummary } from "@/api";
+import type { HistorySummaryExtended } from "@/api";
 
 import DefaultOperations from "@/components/History/CurrentHistory/HistoryOperations/DefaultOperations.vue";
 
 library.add(faCheckSquare, faCompress);
 
 interface Props {
-    history: HistorySummary;
+    history: HistorySummaryExtended;
     hasMatches: boolean;
     expandedCount: number;
     showSelection: boolean;

client/src/components/History/CurrentHistory/HistoryPanel.vue

@@ -3,7 +3,7 @@ import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, type Ref, ref, set as VueSet, unref, watch } from "vue";
 
-import type { HistorySummary } from "@/api";
+import type { HistorySummaryExtended } from "@/api";
 import { copyDataset } from "@/api/datasets";
 import ExpandedItems from "@/components/History/Content/ExpandedItems";
 import SelectedItems from "@/components/History/Content/SelectedItems";
@@ -47,7 +47,7 @@ interface BackendFilterError {
 
 interface Props {
     listOffset?: number;
-    history: HistorySummary;
+    history: HistorySummaryExtended;
     filter?: string;
     canEditHistory?: boolean;
     filterable?: boolean;

client/src/components/History/CurrentHistory/usesDetailedHistory.js

@@ -1,15 +0,0 @@
-import { computed } from "vue";
-
-export function useDetailedHistory(history) {
-    const historySize = computed(() => history.value.size || 0);
-    const numItemsActive = computed(() => history.value.contents_active?.active || 0);
-    const numItemsDeleted = computed(() => history.value.contents_active?.deleted || 0);
-    const numItemsHidden = computed(() => history.value.contents_active?.hidden || 0);
-
-    return {
-        historySize,
-        numItemsActive,
-        numItemsDeleted,
-        numItemsHidden,
-    };
-}

client/src/components/History/Multiple/MultipleViewItem.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { BButton } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { computed, onMounted, ref } from "vue";
+import { computed, ref } from "vue";
 
+import { useDetailedHistory } from "@/composables/detailedHistory";
 import { useHistoryStore } from "@/stores/historyStore";
 
 import CollectionPanel from "@/components/History/CurrentCollection/CollectionPanel.vue";
@@ -21,18 +22,13 @@ const props = defineProps<Props>();
 const historyStore = useHistoryStore();
 const { currentHistoryId, pinnedHistories } = storeToRefs(historyStore);
 
-onMounted(() => {
-    historyStore.loadHistoryById(props.source.id);
-});
+const { detailedHistory: history } = useDetailedHistory(props.source.id);
 
 const selectedCollections = ref<any[]>([]);
 
 const sameToCurrent = computed(() => {
     return currentHistoryId.value === props.source.id;
 });
-const getHistory = computed(() => {
-    return historyStore.getHistoryById(props.source.id);
-});
 
 function onViewCollection(collection: object) {
     selectedCollections.value = [...selectedCollections.value, collection];
@@ -40,7 +36,7 @@ function onViewCollection(collection: object) {
 </script>
 
 <template>
-    <div v-if="!getHistory" class="container">
+    <div v-if="!history" class="container">
         <div class="row align-items-center h-100">
             <LoadingSpan class="mx-auto" message="Loading History" />
         </div>
@@ -49,14 +45,14 @@ function onViewCollection(collection: object) {
     <div v-else id="list-item" class="d-flex flex-column align-items-center w-100">
         <CollectionPanel
             v-if="selectedCollections.length && selectedCollections[0]?.history_id === source.id"
-            :history="getHistory"
+            :history="history"
             :selected-collections.sync="selectedCollections"
             :show-controls="false"
             @view-collection="onViewCollection" />
 
         <HistoryPanel
             v-else
-            :history="getHistory"
+            :history="history"
             :filter="filter"
             :show-controls="false"
             is-multi-view-item

client/src/composables/detailedHistory.ts

@@ -0,0 +1,18 @@
+import { onMounted, ref } from "vue";
+
+import { type HistorySummaryExtended } from "@/api";
+import { useHistoryStore } from "@/stores/historyStore";
+
+export function useDetailedHistory(historyId: string) {
+    const historyStore = useHistoryStore();
+
+    onMounted(async () => {
+        detailedHistory.value = await historyStore.loadHistoryById(historyId);
+    });
+
+    const detailedHistory = ref<HistorySummaryExtended>();
+
+    return {
+        detailedHistory,
+    };
+}

client/src/composables/historyContentStats.ts

@@ -0,0 +1,17 @@
+import { computed, type Ref } from "vue";
+
+import { type HistorySummaryExtended } from "@/api";
+
+export function useHistoryContentStats(history: Ref<HistorySummaryExtended>) {
+    const historySize = computed(() => history.value?.size ?? 0);
+    const numItemsActive = computed(() => history.value?.contents_active?.active ?? 0);
+    const numItemsDeleted = computed(() => history.value?.contents_active?.deleted ?? 0);
+    const numItemsHidden = computed(() => history.value?.contents_active?.hidden ?? 0);
+
+    return {
+        historySize,
+        numItemsActive,
+        numItemsDeleted,
+        numItemsHidden,
+    };
+}