Skip to content

Commit

Permalink
Merge pull request #18265 from ahmedhamidawan/multiview_top_bar
Browse files Browse the repository at this point in the history 
Move history multiview item actions to top
  • Loading branch information
@davelopez
davelopez authored Jul 26, 2024
2 parents 2231152 + 1dac9d9 commit 65838ae
Show file tree
Hide file tree
Showing 16 changed files with 384 additions and 162 deletions.
25 changes: 16 additions & 9 deletions client/src/components/Grid/configs/histories.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {
faBurn,
faExchangeAlt,
faEye,
faPlus,
Expand All @@ -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";
Expand Down Expand Up @@ -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.`,
Expand All @@ -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.`,
Expand All @@ -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.`,
Expand Down Expand Up @@ -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.`,
Expand All @@ -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.`,
Expand All @@ -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.`,
Expand Down
15 changes: 6 additions & 9 deletions client/src/components/History/CurrentHistory/HistoryDetails.vue
View file
Original file line number Diff line number Diff line change
@@ -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();
Expand Down Expand Up @@ -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>
2 changes: 1 addition & 1 deletion client/src/components/History/CurrentHistory/HistoryMessages.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
68 changes: 47 additions & 21 deletions client/src/components/History/CurrentHistory/HistoryNavigation.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
import {
faArchive,
faBars,
faBurn,
faColumns,
faCopy,
faExchangeAlt,
Expand Down Expand Up @@ -44,6 +45,7 @@ import SelectorModal from "@/components/History/Modals/SelectorModal.vue";
library.add(
faArchive,
faBars,
faBurn,
faColumns,
faCopy,
faExchangeAlt,
Expand All @@ -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();
Expand All @@ -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";
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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" />
Expand All @@ -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')"
Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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>
Expand All @@ -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
Expand All @@ -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>
Expand Down
14 changes: 13 additions & 1 deletion client/src/components/History/CurrentHistory/HistoryOperations/HistoryOperations.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ library.add(faCheckSquare, faCompress);
interface Props {
history: HistorySummaryExtended;
hasMatches: boolean;
editable: boolean;
expandedCount: number;
showSelection: boolean;
isMultiViewItem: boolean;
Expand All @@ -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"
Expand Down Expand Up @@ -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>

Expand Down
Loading

0 comments on commit 65838ae

Please sign in to comment.