Skip to content

Commit

Permalink
fit PairCollectionCreator on one page
Browse files Browse the repository at this point in the history 
- Adjusts default alert to always appear next to swap button
- Adds minor `scroll-list` styling to the listing
  • Loading branch information
@ahmedhamidawan
ahmedhamidawan committed Jan 22, 2025
1 parent 0d7d521 commit b8f2e34
Showing 1 changed file with 83 additions and 49 deletions.
132 changes: 83 additions & 49 deletions client/src/components/Collections/PairCollectionCreator.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { BAlert, BButton } from "bootstrap-vue";
import { computed, ref, watch } from "vue";
import type { HDASummary, HistoryItemSummary } from "@/api";
import { useAnimationFrameResizeObserver } from "@/composables/sensors/animationFrameResizeObserver";
import { useAnimationFrameScroll } from "@/composables/sensors/animationFrameScroll";
import { Toast } from "@/composables/toast";
import STATES from "@/mvc/dataset/states";
import { useDatatypesMapperStore } from "@/stores/datatypesMapperStore";
Expand Down Expand Up @@ -81,6 +83,16 @@ const datatypesMapper = computed(() => datatypesMapperStore.datatypesMapper);
/** Are we filtering by datatype? */
const filterExtensions = computed(() => !!datatypesMapper.value && !!props.extensions?.length);
// check if we have scrolled to the top or bottom of the scrollable div
const scrollableDiv = ref<HTMLDivElement | null>(null);
const { arrived } = useAnimationFrameScroll(scrollableDiv);
const isScrollable = ref(false);
useAnimationFrameResizeObserver(scrollableDiv, ({ clientSize, scrollSize }) => {
isScrollable.value = scrollSize.height >= clientSize.height + 1;
});
const scrolledTop = computed(() => !isScrollable.value || arrived.top);
const scrolledBottom = computed(() => !isScrollable.value || arrived.bottom);
watch(
() => props.initialElements,
() => {
Expand Down Expand Up @@ -362,29 +374,6 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
</ul>
</BAlert>
</div>
<div v-else-if="!exactlyTwoValidElements">
<BAlert show variant="warning" dismissible>
{{ localize("Exactly two elements are needed for the pair.") }}
<span v-if="fromSelection">
<a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
{{ localize("Cancel") }}
</a>
{{ localize("and reselect new elements.") }}
</span>
</BAlert>
</div>
<div v-else-if="pairHasMixedExtensions">
<BAlert show variant="warning">
{{ localize("The selected datasets have mixed extensions.") }}
{{ localize("You can still create the pair but its elements will have different extensions.") }}
</BAlert>
</div>
<div v-else>
<BAlert v-if="!fromSelection" show variant="success">
{{ localize("The Dataset Pair is ready to be created.") }}
{{ localize("Provide a name and click the button below to create the pair.") }}
</BAlert>
</div>

<CollectionCreator
:oncancel="() => emit('on-cancel')"
Expand Down Expand Up @@ -493,19 +482,48 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
</BAlert>
</div>
<div v-else>
<div class="collection-elements-controls">
<BButton
class="swap"
size="sm"
:disabled="!exactlyTwoValidElements"
:title="localize('Swap forward and reverse datasets')"
@click="swapButton">
<FontAwesomeIcon :icon="faArrowsAltV" fixed-width />
{{ localize("Swap") }}
</BButton>
<div class="collection-elements-controls flex-gapx-1">
<div>
<BButton
class="swap"
size="sm"
:disabled="!exactlyTwoValidElements"
:title="localize('Swap forward and reverse datasets')"
@click="swapButton">
<FontAwesomeIcon :icon="faArrowsAltV" fixed-width />
{{ localize("Swap") }}
</BButton>
</div>
<div class="flex-grow-1">
<BAlert v-if="!exactlyTwoValidElements" show variant="warning">
{{ localize("Exactly two elements are needed for the pair.") }}
<span v-if="fromSelection">
<a
class="cancel-text"
href="javascript:void(0)"
role="button"
@click="emit('on-cancel')">
{{ localize("Cancel") }}
</a>
{{ localize("and reselect new elements.") }}
</span>
</BAlert>
<BAlert v-else-if="pairHasMixedExtensions" show variant="warning">
{{ localize("The selected datasets have mixed extensions.") }}
{{
localize(
"You can still create the pair but its elements will have different extensions."
)
}}
</BAlert>
<BAlert v-else show variant="success">
{{ localize("The Dataset Pair is ready to be created.") }}
{{ localize("Provide a name and click the button below to create the pair.") }}
</BAlert>
</div>
</div>

<div class="collection-elements flex-row mb-3">
<div class="flex-row mb-3">
<div v-for="dataset in ['forward', 'reverse']" :key="dataset">
{{ localize(dataset) }}:
<DatasetCollectionElementView
Expand All @@ -521,19 +539,27 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
</div>

<div v-if="!fromSelection">
{{ localize("Manually select a forward and reverse dataset to create a pair collection:") }}
<div class="collection-elements">
<DatasetCollectionElementView
v-for="element in workingElements"
:key="element.id"
:class="{
selected: [pairElements.forward, pairElements.reverse].includes(element),
}"
:element="element"
not-editable
:selected="[pairElements.forward, pairElements.reverse].includes(element)"
@element-is-selected="selectElement"
@onRename="(name) => (element.name = name)" />
<strong>
{{
localize("Manually select a forward and reverse dataset to create a dataset pair:")
}}
</strong>
<div
class="scroll-list-container"
:class="{ 'scrolled-top': scrolledTop, 'scrolled-bottom': scrolledBottom }">
<div ref="scrollableDiv" class="collection-elements">
<DatasetCollectionElementView
v-for="element in workingElements"
:key="element.id"
:class="{
selected: [pairElements.forward, pairElements.reverse].includes(element),
}"
:element="element"
not-editable
:selected="[pairElements.forward, pairElements.reverse].includes(element)"
@element-is-selected="selectElement"
@onRename="(name) => (element.name = name)" />
</div>
</div>
</div>
</div>
Expand All @@ -550,11 +576,19 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
}
.collection-elements-controls {
margin-bottom: 8px;
display: flex;
justify-content: space-between;
align-items: center;
.alert {
padding: 0.25rem 0.5rem;
margin: 0;
text-align: center;
}
}
.collection-elements {
max-height: 400px;
max-height: 30vh;
border: 0px solid lightgrey;
overflow-y: auto;
overflow-x: hidden;
Expand Down

0 comments on commit b8f2e34

Please sign in to comment.