From 9de0ee28cf1a3758fb778a0d800709ac854f5485 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 25 Jul 2024 11:44:59 -0500
Subject: [PATCH] add `HistoryIndicators` component

---
 .../History/CurrentHistory/HistoryDetails.vue | 26 +----------
 .../components/History/HistoryIndicators.vue  | 45 +++++++++++++++++++
 .../components/History/HistoryScrollList.vue  | 36 ++-------------
 3 files changed, 51 insertions(+), 56 deletions(-)
 create mode 100644 client/src/components/History/HistoryIndicators.vue

diff --git a/client/src/components/History/CurrentHistory/HistoryDetails.vue b/client/src/components/History/CurrentHistory/HistoryDetails.vue
index 3255b56cae91..0fa1c0d90f7e 100644
--- a/client/src/components/History/CurrentHistory/HistoryDetails.vue
+++ b/client/src/components/History/CurrentHistory/HistoryDetails.vue
@@ -1,19 +1,12 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faArchive, faBurn, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BBadge } from "bootstrap-vue";
-
 import type { HistorySummary } from "@/api";
 import { useHistoryStore } from "@/stores/historyStore";
 
 import type { DetailsLayoutSummarized } from "../Layout/types";
 
+import HistoryIndicators from "../HistoryIndicators.vue";
 import TextSummary from "@/components/Common/TextSummary.vue";
 import DetailsLayout from "@/components/History/Layout/DetailsLayout.vue";
-import UtcDate from "@/components/UtcDate.vue";
-
-library.add(faArchive, faBurn, faTrash);
 
 interface Props {
     history: HistorySummary;
@@ -56,22 +49,7 @@ function onSave(newDetails: HistorySummary) {
                 no-expand />
         </template>
         <template v-if="summarized" v-slot:update-time>
-            <BBadge v-b-tooltip pill>
-                <span v-localize>last edited </span>
-                <UtcDate v-if="history.update_time" :date="history.update_time" mode="elapsed" />
-            </BBadge>
-            <BBadge v-if="history.purged" pill class="alert-warning">
-                <FontAwesomeIcon :icon="faBurn" />
-                <span v-localize> Purged</span>
-            </BBadge>
-            <BBadge v-else-if="history.deleted" pill class="alert-danger">
-                <FontAwesomeIcon :icon="faTrash" />
-                <span v-localize> Deleted</span>
-            </BBadge>
-            <BBadge v-if="history.archived" pill class="alert-warning">
-                <FontAwesomeIcon :icon="faArchive" />
-                <span v-localize> Archived</span>
-            </BBadge>
+            <HistoryIndicators :history="history" detailed-time />
         </template>
     </DetailsLayout>
 </template>
diff --git a/client/src/components/History/HistoryIndicators.vue b/client/src/components/History/HistoryIndicators.vue
new file mode 100644
index 000000000000..d58df8490683
--- /dev/null
+++ b/client/src/components/History/HistoryIndicators.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faArchive, faBurn, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BBadge } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+
+import { type HistorySummary, userOwnsHistory } from "@/api";
+import { useUserStore } from "@/stores/userStore";
+import localize from "@/utils/localization";
+
+import UtcDate from "../UtcDate.vue";
+
+library.add(faArchive, faBurn, faTrash);
+
+const userStore = useUserStore();
+const { currentUser } = storeToRefs(userStore);
+
+const props = defineProps<{
+    history: HistorySummary;
+    includeCount?: boolean;
+    detailedTime?: boolean;
+}>();
+</script>
+
+<template>
+    <div class="d-flex align-items-center flex-gapx-1">
+        <BBadge v-if="props.includeCount" pill :title="localize('Amount of items in history')">
+            {{ history.count }} {{ localize("items") }}
+        </BBadge>
+        <BBadge v-if="history.update_time" pill :title="localize('Last edited')">
+            <span v-if="props.detailedTime" v-localize>last edited </span>
+            <UtcDate :date="history.update_time" mode="elapsed" />
+        </BBadge>
+        <BBadge v-if="props.history.purged" pill class="alert-warning" title="Permanently deleted">
+            <FontAwesomeIcon :icon="faBurn" fixed-width />
+        </BBadge>
+        <BBadge v-else-if="history.deleted" pill class="alert-danger" title="Deleted">
+            <FontAwesomeIcon :icon="faTrash" fixed-width />
+        </BBadge>
+        <BBadge v-if="history.archived && userOwnsHistory(currentUser, props.history)" pill title="Archived">
+            <FontAwesomeIcon :icon="faArchive" fixed-width />
+        </BBadge>
+    </div>
+</template>
diff --git a/client/src/components/History/HistoryScrollList.vue b/client/src/components/History/HistoryScrollList.vue
index a53b7a42913d..56bb35773595 100644
--- a/client/src/components/History/HistoryScrollList.vue
+++ b/client/src/components/History/HistoryScrollList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheckSquare, faListAlt, faSquare } from "@fortawesome/free-regular-svg-icons";
-import { faArchive, faArrowDown, faBurn, faColumns, faSignInAlt, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faArrowDown, faColumns, faSignInAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useInfiniteScroll } from "@vueuse/core";
 import { BAlert, BBadge, BButton, BButtonGroup, BListGroup, BListGroupItem, BOverlay } from "bootstrap-vue";
@@ -19,10 +19,10 @@ import localize from "@/utils/localization";
 import { HistoriesFilters } from "./HistoriesFilters";
 
 import TextSummary from "../Common/TextSummary.vue";
+import HistoryIndicators from "./HistoryIndicators.vue";
 import Heading from "@/components/Common/Heading.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 import ScrollToTopButton from "@/components/ToolsList/ScrollToTopButton.vue";
-import UtcDate from "@/components/UtcDate.vue";
 
 type AdditionalOptions = "set-current" | "multi" | "center";
 type PinnedHistory = { id: string };
@@ -54,7 +54,7 @@ const emit = defineEmits<{
     (e: "update:show-modal", showModal: boolean): void;
 }>();
 
-library.add(faColumns, faSignInAlt, faListAlt, faArrowDown, faCheckSquare, faSquare, faBurn, faTrash, faArchive);
+library.add(faColumns, faSignInAlt, faListAlt, faArrowDown, faCheckSquare, faSquare);
 
 const busy = ref(false);
 const showAdvanced = ref(false);
@@ -277,35 +277,7 @@ async function loadMore(noScroll = false) {
                                     </i>
                                 </div>
                                 <TextSummary v-else component="h4" :description="history.name" one-line-summary />
-                                <div class="d-flex align-items-center flex-gapx-1">
-                                    <BBadge
-                                        v-if="history.purged"
-                                        pill
-                                        class="alert-warning"
-                                        title="Permanently deleted">
-                                        <FontAwesomeIcon :icon="faBurn" fixed-width />
-                                    </BBadge>
-                                    <BBadge v-else-if="history.deleted" pill class="alert-danger" title="Deleted">
-                                        <FontAwesomeIcon :icon="faTrash" fixed-width />
-                                    </BBadge>
-                                    <BBadge
-                                        v-if="history.archived && userOwnsHistory(currentUser, history)"
-                                        pill
-                                        class="alert-warning"
-                                        title="Archived">
-                                        <FontAwesomeIcon :icon="faArchive" fixed-width />
-                                    </BBadge>
-                                    <BBadge pill :title="localize('Amount of items in history')">
-                                        {{ history.count }} {{ localize("items") }}
-                                    </BBadge>
-                                    <BBadge
-                                        v-if="history.update_time"
-                                        v-b-tooltip.noninteractive.hover
-                                        pill
-                                        :title="localize('Last edited')">
-                                        <UtcDate :date="history.update_time" mode="elapsed" />
-                                    </BBadge>
-                                </div>
+                                <HistoryIndicators :history="history" include-count />
                             </div>
 
                             <p v-if="!isMultiviewPanel && history.annotation" class="my-1">{{ history.annotation }}</p>