Skip to content

Commit

Permalink
move MultipleViewItem actions to top
Browse files Browse the repository at this point in the history
Add `HistoryNavigation` to the top section as well.

WIP: There is a bug right now that applies the dropdown action to all pinned histories in multiview (e.g.: You try to delete a history from the dropdown, but a modal opens up for each pinned history
  • Loading branch information
ahmedhamidawan committed May 29, 2024
1 parent a425f49 commit d1a3e65
Show file tree
Hide file tree
Showing 4 changed files with 49 additions and 35 deletions.
22 changes: 15 additions & 7 deletions client/src/components/History/CurrentHistory/HistoryNavigation.vue
Original file line number Diff line number Diff line change
Expand Up @@ -62,13 +62,13 @@ 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,
});
const showSwitchModal = ref(false);
Expand Down Expand Up @@ -99,11 +99,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 @@ -116,6 +119,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 @@ -130,10 +134,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 @@ -146,10 +151,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 @@ -158,7 +165,7 @@ function userTitle(title: string) {
<span v-localize>Show Histories Side-by-Side</span>
</BDropdownItem>

<BDropdownDivider />
<BDropdownDivider v-if="!props.minimal" />

<BDropdownItem
:title="localize('Resume all Paused Jobs in this History')"
Expand Down Expand Up @@ -253,6 +260,7 @@ function userTitle(title: string) {
</nav>

<SelectorModal
v-if="!props.minimal"
v-show="showSwitchModal"
id="selector-history-modal"
:histories="histories"
Expand Down
3 changes: 1 addition & 2 deletions client/src/components/History/Index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,7 @@ function onViewCollection(collection: CollectionEntry, currentOffset?: number) {
<HistoryNavigation
:history="currentHistory"
:histories="histories"
:histories-loading="historiesLoading"
title="Histories" />
:histories-loading="historiesLoading" />
</template>
</HistoryPanel>

Expand Down
1 change: 0 additions & 1 deletion client/src/components/History/Layout/DetailsLayout.vue
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,6 @@ function selectText() {

<style lang="scss" scoped>
.summarized-details {
margin-top: 1rem;
margin-left: 0.5rem;
max-width: 15rem;
Expand Down
58 changes: 33 additions & 25 deletions client/src/components/History/Multiple/MultipleViewItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { computed, ref } from "vue";
import { useExtendedHistory } from "@/composables/detailedHistory";
import { useHistoryStore } from "@/stores/historyStore";
import HistoryNavigation from "../CurrentHistory/HistoryNavigation.vue";
import CollectionPanel from "@/components/History/CurrentCollection/CollectionPanel.vue";
import HistoryPanel from "@/components/History/CurrentHistory/HistoryPanel.vue";
import LoadingSpan from "@/components/LoadingSpan.vue";
Expand All @@ -20,7 +21,7 @@ interface Props {
const props = defineProps<Props>();
const historyStore = useHistoryStore();
const { currentHistoryId, pinnedHistories } = storeToRefs(historyStore);
const { currentHistoryId, histories, historiesLoading, pinnedHistories } = storeToRefs(historyStore);
const { history } = useExtendedHistory(props.source.id);
Expand All @@ -42,7 +43,37 @@ function onViewCollection(collection: object) {
</div>
</div>

<div v-else id="list-item" class="d-flex flex-column align-items-center w-100">
<div v-else id="list-item" class="d-flex flex-column w-100">
<div class="d-flex justify-content-between align-items-center">
<div>
<BButton
size="sm"
class="my-1"
:disabled="sameToCurrent"
:variant="sameToCurrent ? 'disabled' : 'outline-info'"
:title="sameToCurrent ? 'Current History' : 'Switch to this history'"
@click="historyStore.setCurrentHistory(source.id)">
{{ sameToCurrent ? "Current History" : "Switch to" }}
</BButton>
<BButton
v-if="Object.keys(pinnedHistories).length > 0"
size="sm"
class="my-1"
variant="outline-danger"
title="Hide this history from the list"
@click="historyStore.unpinHistories([source.id])">
Hide
</BButton>
</div>
<HistoryNavigation
:history="history"
:histories="histories"
:histories-loading="historiesLoading"
minimal />
</div>

<hr class="w-100 m-1" />

<CollectionPanel
v-if="selectedCollections.length && selectedCollections[0]?.history_id === source.id"
:history="history"
Expand All @@ -57,28 +88,5 @@ function onViewCollection(collection: object) {
:show-controls="false"
is-multi-view-item
@view-collection="onViewCollection" />

<hr class="w-100 m-2" />

<div class="flex-row flex-grow-0">
<BButton
size="sm"
class="my-1"
:disabled="sameToCurrent"
:variant="sameToCurrent ? 'disabled' : 'outline-info'"
:title="sameToCurrent ? 'Current History' : 'Switch to this history'"
@click="historyStore.setCurrentHistory(source.id)">
{{ sameToCurrent ? "Current History" : "Switch to" }}
</BButton>
<BButton
v-if="Object.keys(pinnedHistories).length > 0"
size="sm"
class="my-1"
variant="outline-danger"
title="Hide this history from the list"
@click="historyStore.unpinHistories([source.id])">
Hide
</BButton>
</div>
</div>
</template>

0 comments on commit d1a3e65

Please sign in to comment.