Move history multiview item actions to top

client/src/components/Grid/configs/histories.ts

@@ -1,4 +1,5 @@
 import {
+    faBurn,
     faExchangeAlt,
     faEye,
     faPlus,
@@ -10,7 +11,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { useEventBus } from "@vueuse/core";
 
-import { deleteHistories, deleteHistory, historiesFetcher, undeleteHistories, undeleteHistory } from "@/api/histories";
+import { historiesFetcher } from "@/api/histories";
 import { updateTags } from "@/api/tags";
 import { useHistoryStore } from "@/stores/historyStore";
 import Filtering, { contains, equals, expandNameTag, toBool, type ValidFilter } from "@/utils/filtering";
@@ -70,7 +71,8 @@ const batch: BatchOperationArray = [
             if (confirm(_l(`Are you sure that you want to delete the selected histories?`))) {
                 try {
                     const historyIds = data.map((x) => String(x.id));
-                    await deleteHistories({ ids: historyIds });
+                    const historyStore = useHistoryStore();
+                    await historyStore.deleteHistories(historyIds);
                     return {
                         status: "success",
                         message: `Deleted ${data.length} histories.`,
@@ -92,7 +94,8 @@ const batch: BatchOperationArray = [
             if (confirm(_l(`Are you sure that you want to restore the selected histories?`))) {
                 try {
                     const historyIds = data.map((x) => String(x.id));
-                    await undeleteHistories({ ids: historyIds });
+                    const historyStore = useHistoryStore();
+                    await historyStore.restoreHistories(historyIds);
                     return {
                         status: "success",
                         message: `Restored ${data.length} histories.`,
@@ -108,13 +111,14 @@ const batch: BatchOperationArray = [
     },
     {
         title: "Purge",
-        icon: faTrash,
+        icon: faBurn,
         condition: (data: Array<HistoryEntry>) => !data.some((x) => x.purged),
         handler: async (data: Array<HistoryEntry>) => {
             if (confirm(_l(`Are you sure that you want to permanently delete the selected histories?`))) {
                 try {
                     const historyIds = data.map((x) => String(x.id));
-                    await deleteHistories({ ids: historyIds, purge: true });
+                    const historyStore = useHistoryStore();
+                    await historyStore.deleteHistories(historyIds, true);
                     return {
                         status: "success",
                         message: `Purged ${data.length} histories.`,
@@ -185,7 +189,8 @@ const fields: FieldArray = [
                 handler: async (data: HistoryEntry) => {
                     if (confirm(_l("Are you sure that you want to delete this history?"))) {
                         try {
-                            await deleteHistory({ history_id: String(data.id) });
+                            const historyStore = useHistoryStore();
+                            await historyStore.deleteHistory(String(data.id));
                             return {
                                 status: "success",
                                 message: `'${data.name}' has been deleted.`,
@@ -201,12 +206,13 @@ const fields: FieldArray = [
             },
             {
                 title: "Delete Permanently",
-                icon: faTrash,
+                icon: faBurn,
                 condition: (data: HistoryEntry) => !data.purged,
                 handler: async (data: HistoryEntry) => {
                     if (confirm(_l("Are you sure that you want to permanently delete this history?"))) {
                         try {
-                            await deleteHistory({ history_id: String(data.id), purge: true });
+                            const historyStore = useHistoryStore();
+                            await historyStore.deleteHistory(String(data.id), true);
                             return {
                                 status: "success",
                                 message: `'${data.name}' has been permanently deleted.`,
@@ -226,7 +232,8 @@ const fields: FieldArray = [
                 condition: (data: HistoryEntry) => !!data.deleted && !data.purged,
                 handler: async (data: HistoryEntry) => {
                     try {
-                        await undeleteHistory({ history_id: String(data.id) });
+                        const historyStore = useHistoryStore();
+                        await historyStore.restoreHistory(String(data.id));
                         return {
                             status: "success",
                             message: `'${data.name}' has been restored.`,

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

@@ -1,22 +1,22 @@
 <script setup lang="ts">
-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";
 
 interface Props {
     history: HistorySummary;
     writeable: boolean;
-    summarized: boolean;
+    summarized?: DetailsLayoutSummarized;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     writeable: true,
-    summarized: false,
+    summarized: undefined,
 });
 
 const historyStore = useHistoryStore();
@@ -49,10 +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>
+            <HistoryIndicators :history="history" detailed-time />
         </template>
     </DetailsLayout>
 </template>

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

@@ -32,7 +32,7 @@ const currentUserOwnsHistory = computed(() => {
     <div v-if="hasMessages" class="mx-3 mt-2" data-description="history messages">
         <BAlert v-if="history.purged" :show="history.purged" variant="warning">
             <FontAwesomeIcon :icon="faBurn" fixed-width />
-            {{ localize("History has been purged") }}
+            {{ localize("History has been permanently deleted") }}
         </BAlert>
         <BAlert v-else-if="history.deleted" :show="history.deleted" variant="warning">
             <FontAwesomeIcon :icon="faTrash" fixed-width />

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

@@ -3,6 +3,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import {
     faArchive,
     faBars,
+    faBurn,
     faColumns,
     faCopy,
     faExchangeAlt,
@@ -44,6 +45,7 @@ import SelectorModal from "@/components/History/Modals/SelectorModal.vue";
 library.add(
     faArchive,
     faBars,
+    faBurn,
     faColumns,
     faCopy,
     faExchangeAlt,
@@ -62,16 +64,21 @@ library.add(
 interface Props {
     histories: HistorySummary[];
     history: HistorySummary;
-    title?: string;
     historiesLoading?: boolean;
+    minimal?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    title: "Histories",
     historiesLoading: false,
+    minimal: false,
 });
 
+// modal refs
 const showSwitchModal = ref(false);
+const showDeleteModal = ref(false);
+const showPrivacyModal = ref(false);
+const showCopyModal = ref(false);
+
 const purgeHistory = ref(false);
 
 const userStore = useUserStore();
@@ -84,6 +91,10 @@ const canEditHistory = computed(() => {
     return canMutateHistory(props.history);
 });
 
+const isDeletedNotPurged = computed(() => {
+    return props.history.deleted && !props.history.purged;
+});
+
 const historyState = computed(() => {
     if (props.history.purged) {
         return "purged";
@@ -115,11 +126,14 @@ function userTitle(title: string) {
 
 <template>
     <div>
-        <nav class="d-flex justify-content-between mx-3 my-2" aria-label="current history management">
-            <h2 class="m-1 h-sm">History</h2>
+        <nav
+            :class="{ 'd-flex justify-content-between mx-3 my-2': !props.minimal }"
+            aria-label="current history management">
+            <h2 v-if="!props.minimal" class="m-1 h-sm">History</h2>
 
             <BButtonGroup>
                 <BButton
+                    v-if="!props.minimal"
                     v-b-tooltip.top.hover.noninteractive
                     class="create-hist-btn"
                     data-description="create new history"
@@ -132,6 +146,7 @@ function userTitle(title: string) {
                 </BButton>
 
                 <BButton
+                    v-if="!props.minimal"
                     v-b-tooltip.top.hover.noninteractive
                     data-description="switch to another history"
                     size="sm"
@@ -146,10 +161,11 @@ function userTitle(title: string) {
                     v-b-tooltip.top.hover.noninteractive
                     no-caret
                     size="sm"
-                    variant="link"
+                    :variant="props.minimal ? 'outline-info' : 'link'"
                     toggle-class="text-decoration-none"
                     menu-class="history-options-button-menu"
                     title="History options"
+                    right
                     data-description="history options">
                     <template v-slot:button-content>
                         <FontAwesomeIcon fixed-width :icon="faBars" />
@@ -162,10 +178,12 @@ function userTitle(title: string) {
                             <span>Fetching histories from server</span>
                         </div>
 
-                        <span v-else>You have {{ totalHistoryCount }} histories.</span>
+                        <span v-else-if="!props.minimal">You have {{ totalHistoryCount }} histories.</span>
+                        <span v-else>Manage History</span>
                     </BDropdownText>
 
                     <BDropdownItem
+                        v-if="!props.minimal"
                         data-description="switch to multi history view"
                         :disabled="isAnonymous"
                         :title="userTitle('Open History Multiview')"
@@ -174,7 +192,7 @@ function userTitle(title: string) {
                         <span v-localize>Show Histories Side-by-Side</span>
                     </BDropdownItem>
 
-                    <BDropdownDivider />
+                    <BDropdownDivider v-if="!props.minimal" />
 
                     <BDropdownText v-if="!canEditHistory">
                         This history has been <span class="font-weight-bold">{{ historyState }}</span
@@ -195,19 +213,20 @@ function userTitle(title: string) {
                     <BDropdownDivider />
 
                     <BDropdownItem
-                        v-b-modal:copy-current-history-modal
                         :disabled="isAnonymous"
-                        :title="userTitle('Copy History to a New History')">
+                        :title="userTitle('Copy History to a New History')"
+                        @click="showCopyModal = !showCopyModal">
                         <FontAwesomeIcon fixed-width :icon="faCopy" class="mr-1" />
                         <span v-localize>Copy this History</span>
                     </BDropdownItem>
 
                     <BDropdownItem
-                        v-b-modal:delete-history-modal
                         :disabled="!canEditHistory"
-                        :title="localize('Permanently Delete History')">
-                        <FontAwesomeIcon fixed-width :icon="faTrash" class="mr-1" />
-                        <span v-localize>Delete this History</span>
+                        :title="localize(isDeletedNotPurged ? 'Permanently Delete History' : 'Delete History')"
+                        @click="showDeleteModal = !showDeleteModal">
+                        <FontAwesomeIcon fixed-width :icon="isDeletedNotPurged ? faBurn : faTrash" class="mr-1" />
+                        <span v-if="isDeletedNotPurged" v-localize>Permanently Delete History</span>
+                        <span v-else v-localize>Delete this History</span>
                     </BDropdownItem>
 
                     <BDropdownItem
@@ -271,9 +290,9 @@ function userTitle(title: string) {
                     </BDropdownItem>
 
                     <BDropdownItem
-                        v-b-modal:history-privacy-modal
                         :disabled="isAnonymous || !canEditHistory"
-                        :title="userTitle('Make this History Private')">
+                        :title="userTitle('Make this History Private')"
+                        @click="showPrivacyModal = !showPrivacyModal">
                         <FontAwesomeIcon fixed-width :icon="faLock" class="mr-1" />
                         <span v-localize>Make Private</span>
                     </BDropdownItem>
@@ -282,20 +301,27 @@ function userTitle(title: string) {
         </nav>
 
         <SelectorModal
+            v-if="!props.minimal"
             v-show="showSwitchModal"
             id="selector-history-modal"
             :histories="histories"
             :additional-options="['center', 'multi']"
             :show-modal.sync="showSwitchModal"
             @selectHistory="historyStore.setCurrentHistory($event.id)" />
 
-        <CopyModal id="copy-current-history-modal" :history="history" />
+        <CopyModal :history="history" :show-modal.sync="showCopyModal" />
 
         <BModal
-            id="history-privacy-modal"
+            v-model="showPrivacyModal"
             title="Make History Private"
             title-tag="h2"
             @ok="historyStore.secureHistory(history)">
+            <h4>
+                History:
+                <b>
+                    <i>{{ history.name }}</i>
+                </b>
+            </h4>
             <p v-localize>
                 This will make all the data in this history private (excluding library datasets), and will set
                 permissions such that all new data is created as private. Any datasets within that are currently shared
@@ -304,15 +330,15 @@ function userTitle(title: string) {
         </BModal>
 
         <BModal
-            id="delete-history-modal"
-            title="Delete History?"
+            v-model="showDeleteModal"
+            :title="isDeletedNotPurged ? 'Permanently Delete History?' : 'Delete History?'"
             title-tag="h2"
             @ok="onDelete"
-            @show="purgeHistory = false">
+            @show="purgeHistory = isDeletedNotPurged">
             <p v-localize>
                 Do you also want to permanently delete the history <i class="ml-1">{{ history.name }}</i>
             </p>
-            <BFormCheckbox id="purge-history" v-model="purgeHistory">
+            <BFormCheckbox id="purge-history" v-model="purgeHistory" :disabled="isDeletedNotPurged">
                 <span v-localize>Yes, permanently delete this history.</span>
             </BFormCheckbox>
         </BModal>

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

@@ -12,6 +12,7 @@ library.add(faCheckSquare, faCompress);
 interface Props {
     history: HistorySummaryExtended;
     hasMatches: boolean;
+    editable: boolean;
     expandedCount: number;
     showSelection: boolean;
     isMultiViewItem: boolean;
@@ -32,7 +33,7 @@ function onUpdateOperationStatus(updateTime: number) {
 
 <template>
     <section>
-        <nav class="content-operations d-flex justify-content-between bg-secondary">
+        <nav v-if="editable" class="content-operations d-flex justify-content-between bg-secondary">
             <BButtonGroup>
                 <BButton
                     title="Select Items"
@@ -66,6 +67,17 @@ function onUpdateOperationStatus(updateTime: number) {
                 :history="history"
                 @update:operation-running="onUpdateOperationStatus" />
         </nav>
+        <nav v-else-if="isMultiViewItem" class="content-operations bg-secondary">
+            <BButton
+                title="Collapse Items"
+                class="rounded-0"
+                size="sm"
+                variant="link"
+                :disabled="!expandedCount"
+                @click="$emit('collapse-all')">
+                <FontAwesomeIcon :icon="faCompress" fixed-width />
+            </BButton>
+        </nav>
     </section>
 </template>