(incomplete/WIP) add uploader to collection creator

ahmedhamidawan · Oct 21, 2024 · 0e0372c · 0e0372c
1 parent b672e4a
commit 0e0372c
Show file tree

Hide file tree

Showing 5 changed files with 168 additions and 91 deletions.
diff --git a/client/src/components/Collections/CollectionCreatorModal.vue b/client/src/components/Collections/CollectionCreatorModal.vue
@@ -38,7 +38,6 @@ const emit = defineEmits<{
     (e: "update:show-modal", showModal: boolean): void;
 }>();
 
-// Computed refs
 /** Computed toggle that handles opening and closing the modal */
 const localShowToggle = computed({
     get: () => props.showModal,
@@ -58,13 +57,6 @@ const collectionItemsStore = useCollectionBuilderItemsStore();
 const historyStore = useHistoryStore();
 const history = computed(() => historyStore.getHistoryById(props.historyId));
 const historyId = computed(() => props.historyId);
-
-/** Whether a list of items was selected to create a collection from */
-const fromSelection = computed(() => !!props.selectedItems?.length);
-
-/** Items to create the collection from */
-const creatorItems = computed(() => (fromSelection.value ? props.selectedItems : historyDatasets.value));
-
 const localFilterText = computed(() => props.filterText || "");
 const historyUpdateTime = computed(() => history.value?.update_time);
 const isFetchingItems = computed(() => collectionItemsStore.isFetching[localFilterText.value]);
@@ -76,11 +68,23 @@ const historyDatasets = computed(() => {
     }
 });
 
+/** Flag for the initial fetch of history items */
+const initialFetch = ref(false);
+
+/** Whether a list of items was selected to create a collection from */
+const fromSelection = computed(() => !!props.selectedItems?.length);
+
+/** Items to create the collection from */
+const creatorItems = computed(() => (fromSelection.value ? props.selectedItems : historyDatasets.value));
+
 watch(
     () => localShowToggle.value,
     async (show) => {
         if (show) {
             await fetchHistoryDatasets();
+            if (!initialFetch.value) {
+                initialFetch.value = true;
+            }
         }
     },
     { immediate: true }
@@ -250,7 +254,7 @@ function resetModal() {
                 </div>
             </Heading>
         </template>
-        <BAlert v-if="isFetchingItems" variant="info" show>
+        <BAlert v-if="isFetchingItems && !initialFetch" variant="info" show>
             <LoadingSpan :message="localize('Loading items')" />
         </BAlert>
         <BAlert v-else-if="!fromSelection && historyItemsError" variant="danger" show>
@@ -284,6 +288,7 @@ function resetModal() {
         </div>
         <ListCollectionCreator
             v-else-if="props.collectionType === 'list'"
+            :history-id="props.historyId"
             :initial-elements="creatorItems"
             :default-hide-source-items="props.defaultHideSourceItems"
             :from-selection="fromSelection"
@@ -292,6 +297,7 @@ function resetModal() {
             @on-cancel="hideModal" />
         <PairedListCollectionCreator
             v-else-if="props.collectionType === 'list:paired'"
+            :history-id="props.historyId"
             :initial-elements="creatorItems"
             :default-hide-source-items="props.defaultHideSourceItems"
             :from-selection="fromSelection"
@@ -300,6 +306,7 @@ function resetModal() {
             @on-cancel="hideModal" />
         <PairCollectionCreator
             v-else-if="props.collectionType === 'paired'"
+            :history-id="props.historyId"
             :initial-elements="creatorItems"
             :default-hide-source-items="props.defaultHideSourceItems"
             :from-selection="fromSelection"

diff --git a/client/src/components/Collections/ListCollectionCreator.vue b/client/src/components/Collections/ListCollectionCreator.vue
@@ -18,6 +18,7 @@ import CollectionCreator from "@/components/Collections/common/CollectionCreator
 import DatasetCollectionElementView from "@/components/Collections/ListDatasetCollectionElementView.vue";
 
 interface Props {
+    historyId: string;
     initialElements: HistoryItemSummary[];
     defaultHideSourceItems?: boolean;
     fromSelection?: boolean;
@@ -74,6 +75,15 @@ const datatypesMapper = computed(() => datatypesMapperStore.datatypesMapper);
 /** Are we filtering by datatype? */
 const filterExtensions = computed(() => !!datatypesMapper.value && !!props.extensions?.length);
 
+// TODO: This needs to be done in the other creators as well
+watch(
+    () => props.initialElements,
+    () => {
+        // for any new/removed elements, add them to working elements
+        _elementsSetUp();
+    }
+);
+
 /** set up instance vars function */
 function _instanceSetUp() {
     /** Ids of elements that have been selected by the user - to preserve over renders */
@@ -275,6 +285,7 @@ function onUpdateHideSourceItems(newHideSourceItems: boolean) {
     hideSourceItems.value = newHideSourceItems;
 }
 
+// TODO: No need to use `onMounted` here, this can be done in the `setup`
 onMounted(() => {
     _instanceSetUp();
     _elementsSetUp();
@@ -406,6 +417,7 @@ function renameElement(element: any, name: string) {
 
                 <CollectionCreator
                     :oncancel="() => emit('on-cancel')"
+                    :history-id="props.historyId"
                     :hide-source-items="hideSourceItems"
                     :extensions="extensions"
                     @on-update-datatype-toggle="changeDatatypeFilter"

diff --git a/client/src/components/Collections/PairCollectionCreator.vue b/client/src/components/Collections/PairCollectionCreator.vue
@@ -20,6 +20,7 @@ interface SelectedDatasetPair {
 }
 
 interface Props {
+    historyId: string;
     initialElements: HistoryItemSummary[];
     defaultHideSourceItems?: boolean;
     fromSelection?: boolean;
@@ -370,6 +371,7 @@ onMounted(() => {
 
                 <CollectionCreator
                     :oncancel="() => emit('on-cancel')"
+                    :history-id="props.historyId"
                     :hide-source-items="hideSourceItems"
                     :suggested-name="initialSuggestedName"
                     :extensions-toggle="removeExtensions"

diff --git a/client/src/components/Collections/PairedListCollectionCreator.vue b/client/src/components/Collections/PairedListCollectionCreator.vue
@@ -43,6 +43,7 @@ const ALL_INVALID_ELEMENTS_PART_ONE = localize("At least two elements are needed
 const CANCEL_TEXT = localize("Cancel");
 
 interface Props {
+    historyId: string;
     initialElements: HistoryItemSummary[];
     defaultHideSourceItems?: boolean;
     fromSelection?: boolean;
@@ -901,6 +902,7 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
                 </div>
                 <CollectionCreator
                     :oncancel="() => emit('on-cancel')"
+                    :history-id="props.historyId"
                     :hide-source-items="hideSourceItems"
                     render-extensions-toggle
                     :extensions-toggle="removeExtensions"