Fix small issues with EntityUpload

src/components/entity/upload.vue

@@ -11,7 +11,7 @@ except according to the terms contained in the LICENSE file.
 -->
 <template>
   <modal id="entity-upload" :state="state" :hideable="!uploading" size="full"
-    backdrop @hide="$emit('hide')" @mutate="resizeColumnUnlessAnimating">
+    backdrop @hide="$emit('hide')" @mutate="resizeLastColumn">
     <template #title>{{ $t('title') }}</template>
     <template #body>
       <div :class="{ backdrop: uploading }">
@@ -63,8 +63,7 @@ except according to the terms contained in the LICENSE file.
         :filename="fileMetadata.name" :count="csvEntities.length"
         :warnings="warnings.count" :awaiting-response="uploading"
         :progress="uploadProgress" @clear="clearFile"
-        @animationstart="animatePopup(true)"
-        @animationend="animatePopup(false)"/>
+        @animationend="endAnimation"/>
       <div ref="actions" class="modal-actions">
         <button type="button" class="btn btn-primary"
           :aria-disabled="csvEntities == null || uploading" @click="upload">
@@ -332,24 +331,24 @@ const upload = () => {
     .catch(noop);
 };
 
-const popupAnimating = ref(false);
-const animatePopup = (animating) => { popupAnimating.value = animating; };
-watch(csvEntities, (value) => {
-  if (value == null) popupAnimating.value = false;
-});
-
 // Resize the last column of the tables.
 const tables = [null, null];
 const setTable = (i) => (el) => { tables[i] = el; };
-const resizeLastColumn = () => {
-  for (const table of tables) table.resizeLastColumn();
+let popupAnimating = false;
+const resizeLastColumn = (force = false) => {
+  if ((props.state && !popupAnimating) || force) {
+    for (const table of tables) table.resizeLastColumn();
+  }
 };
-watch(popupAnimating, (animating) => { if (!animating) resizeLastColumn(); });
-watch(() => props.state, (state) => { if (!state) nextTick(resizeLastColumn); });
-const resizeColumnUnlessAnimating = () => {
-  if (props.state && !popupAnimating.value) resizeLastColumn();
+watch(csvEntities, (value) => { popupAnimating = value != null; });
+const endAnimation = () => {
+  popupAnimating = false;
+  resizeLastColumn();
 };
-useEventListener(window, 'resize', resizeColumnUnlessAnimating);
+useEventListener(window, 'resize', resizeLastColumn);
+watch(() => props.state, (state) => {
+  if (!state) nextTick(() => { resizeLastColumn(true); });
+});
 
 const actions = ref(null);
 watch(csvEntities, (value) => {

src/components/entity/upload/table.vue

@@ -69,50 +69,56 @@ const container = ref(null);
 
 // Prevent the table container from shrinking on the last page.
 const minHeight = ref('auto');
-// The height of the last full page of the current size. Equals 0 when there is
-// no height to use.
-let previousHeight = 0;
-watch(
-  [() => props.entities, () => props.pageSize],
-  ([entities, newSize], [, oldSize]) => {
-    // Reset minHeight.
-    minHeight.value = 'auto';
-
-    // If the page size has changed, reset previousHeight, as it is no longer
-    // useful. If entities == null without the page size changing, that means
-    // that there has been a change like the modal being hidden that should
-    // cause previousHeight to be reset.
-    if (newSize !== oldSize || entities == null) previousHeight = 0;
-
-    // Either set or attempt to use previousHeight.
-    if (entities != null && entities.length === newSize) {
-      nextTick(() => {
-        previousHeight = container.value.getBoundingClientRect().height;
-      });
-    } else if (previousHeight !== 0) {
-      minHeight.value = px(previousHeight);
-    }
+// The last full page that was rendered
+const lastFullPage = { size: 0, height: 0 };
+watch(() => props.entities, (entities) => {
+  // Reset minHeight.
+  minHeight.value = 'auto';
+
+  // If the page size has changed, reset lastFullPage, as it is no longer
+  // useful. If entities == null without the page size changing, that means that
+  // there has been a change like the modal being hidden that should cause
+  // lastFullPage to be reset.
+  if (lastFullPage.size !== 0 &&
+    (props.pageSize !== lastFullPage.size || entities == null))
+    Object.assign(lastFullPage, { size: 0, height: 0 });
+
+  // Either set or attempt to use lastFullPage.height.
+  if (entities != null && entities.length === props.pageSize) {
+    nextTick(() => {
+      lastFullPage.size = props.pageSize;
+      lastFullPage.height = container.value.getBoundingClientRect().height;
+    });
+  } else if (lastFullPage.height !== 0) {
+    minHeight.value = px(lastFullPage.height);
   }
-);
+});
 
 const isHighlighted = (index) => props.highlighted != null &&
   index >= props.highlighted[0] && index <= props.highlighted[1];
 
 const overlapsPopup = ref(false);
 const resizeLastColumn = () => {
-  // Undo previous resizing.
+  // Reset when the modal is hidden.
   const th = container.value.querySelector('th:last-child');
-  th.style.width = '';
-
   if (container.value.clientWidth === 0) {
+    th.style.width = '';
     overlapsPopup.value = false;
     return;
   }
 
+  // Reset the column to its initial width, undoing previous resizing. Because
+  // this may affect the scroll position, we save the current position to
+  // restore it later.
+  const { scrollLeft } = container.value;
+  th.style.width = '';
+
   // Check whether the column is obscured by the pop-up.
   const popup = container.value.closest('.modal-body')
     .querySelector('#entity-upload-popup');
-  if (popup != null) {
+  if (popup == null) {
+    overlapsPopup.value = false;
+  } else {
     const popupRect = popup.getBoundingClientRect();
     const containerRect = container.value.getBoundingClientRect();
     overlapsPopup.value = popupRect.top < containerRect.bottom;
@@ -129,6 +135,9 @@ const resizeLastColumn = () => {
   // columns.
   if (container.value.scrollWidth === container.value.clientWidth)
     th.style.width = 'auto';
+
+  // Restore the scroll position.
+  container.value.scroll(scrollLeft, 0);
 };
 
 const resetScroll = () => { container.value.scroll(0, 0); };