Jamie add dragndrop upload file zone to resource panel (#5989)

Co-authored-by: Daniel Chang <mwdchang@gmail.com>
DARPA-ASKEM · Jan 10, 2025 · cb1748d · cb1748d
1 parent 498ff57
commit cb1748d
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 19 deletions.
diff --git a/packages/client/hmi-client/src/components/extracting/tera-drag-n-drop-file-previewer.vue b/packages/client/hmi-client/src/components/extracting/tera-drag-n-drop-file-previewer.vue
@@ -15,27 +15,14 @@
 		</div>
 	</div>
 	<div class="file-preview" scrolling="no">
-		<template v-if="props.isProcessing">
-			<p class="progress-message">Uploading...</p>
-			<div class="card">
-				<ProgressBar :value="props.progress"></ProgressBar>
-			</div>
-		</template>
-		<template v-else-if="props.showError">
+		<template v-if="props.showError">
 			<div>Error Please Try Again</div>
 		</template>
-		<template v-else>
-			<div class="ready">
-				<i class="pi pi-check-circle" />
-				<span>Ready</span>
-			</div>
-		</template>
 	</div>
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button';
-import ProgressBar from 'primevue/progressbar';
 
 const props = defineProps({
 	file: {
@@ -58,9 +45,17 @@ const props = defineProps({
 const emit = defineEmits(['remove-file']);
 </script>
 <style scoped>
+.file-title-container {
+	background: var(--surface-50);
+	padding: var(--gap-3);
+	border-radius: var(--border-radius);
+	border-left: solid 4px var(--primary-color);
+	display: flex;
+	justify-content: space-between;
+	gap: var(--gap-2);
+}
 .file-preview {
 	overflow: hidden !important;
-	margin-top: var(--gap-2);
 }
 
 .file-title-container {
@@ -80,6 +75,12 @@ const emit = defineEmits(['remove-file']);
 	flex-direction: row;
 }
 
+.uploading-container {
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-2);
+}
+
 .progress-message {
 	font-size: var(--font-caption);
 	color: var(--text-color-secondary);

diff --git a/packages/client/hmi-client/src/components/extracting/tera-drag-n-drop-importer.vue b/packages/client/hmi-client/src/components/extracting/tera-drag-n-drop-importer.vue
@@ -40,6 +40,11 @@
 					>
 					</TeraDragAndDropFilePreviewer>
 				</div>
+				<div v-if="isProcessing" class="uploading-container">
+					<p>Uploading...</p>
+					<ProgressBar :value="props.progress"></ProgressBar>
+				</div>
+				<div v-else class="empty-uploading-container"></div>
 			</div>
 		</div>
 	</section>
@@ -48,6 +53,7 @@
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue';
 import { AcceptedExtensions, AcceptedTypes } from '@/types/common';
+import ProgressBar from 'primevue/progressbar';
 import TeraDragAndDropFilePreviewer from './tera-drag-n-drop-file-previewer.vue';
 
 const emit = defineEmits(['import-completed', 'imported-files-updated']);
@@ -178,6 +184,12 @@ watch(
 		emit('imported-files-updated', importFiles.value);
 	}
 );
+
+// Make these methods available to parent components
+defineExpose({
+	addFiles,
+	importFiles
+});
 </script>
 
 <style scoped>
@@ -242,7 +254,7 @@ label.file-label {
 .preview-container {
 	display: flex;
 	flex-direction: column;
-	gap: 1rem;
+	gap: var(--gap-2);
 }
 
 .file-preview {
@@ -273,4 +285,17 @@ label.file-label {
 i {
 	color: var(--text-color-secondary);
 }
+
+.uploading-container {
+	padding-top: var(--gap-2);
+	display: flex;
+	flex-direction: column;
+	height: 2rem;
+	gap: var(--gap-1);
+	font-size: var(--font-caption);
+	color: var(--text-color-secondary);
+}
+.empty-uploading-container {
+	height: 2rem;
+}
 </style>
diff --git a/packages/client/hmi-client/src/components/project/tera-resource-sidebar.vue b/packages/client/hmi-client/src/components/project/tera-resource-sidebar.vue
@@ -1,5 +1,11 @@
 <template>
-	<nav>
+	<nav
+		class="resource-panel-container"
+		@dragover.prevent="handleDragOver"
+		@dragleave.prevent="handleDragLeave"
+		@drop.prevent="handleDrop"
+		:class="{ dragging: isDragging }"
+	>
 		<header>
 			<InputText
 				v-model="searchAsset"
@@ -13,10 +19,13 @@
 				class="upload-resources-button"
 				size="small"
 				label="Upload"
+				severity="secondary"
+				outlined
 				@click="isUploadResourcesModalVisible = true"
 			/>
 			<tera-upload-resources-modal
 				:visible="isUploadResourcesModalVisible"
+				:files="droppedFiles"
 				@close="isUploadResourcesModalVisible = false"
 			/>
 		</header>
@@ -34,6 +43,7 @@
 			</span>
 		</Button>
 		<Accordion
+			style="background: transparent"
 			v-if="!isEmpty(assetItemsMap) && !useProjects().projectLoading.value"
 			:multiple="true"
 			:active-index="Array.from(activeAccordionTabs)"
@@ -114,6 +124,11 @@
 				<section v-if="assetItems.length == 0" class="empty-resource">Empty</section>
 			</AccordionTab>
 		</Accordion>
+		<!-- Drag & drop to upload files overlay -->
+		<div v-if="isDragging" class="drag-overlay">
+			<span class="pi pi-upload" style="font-size: 2rem" />
+			<p>Drop resources here</p>
+		</div>
 
 		<div v-if="useProjects().projectLoading.value" class="skeleton-container">
 			<Skeleton v-for="i in 10" :key="i" width="85%" />
@@ -207,6 +222,30 @@ function endDrag() {
 	deleteDragData('assetNode');
 	draggedAsset.value = null;
 }
+
+// Drag and drop files over panel to upload
+const isDragging = ref(false);
+
+function handleDragOver() {
+	isDragging.value = true;
+}
+
+function handleDragLeave() {
+	isDragging.value = false;
+}
+
+const droppedFiles = ref<File[]>([]); // For passing files dragged onto the resources panel into the uploader
+
+function handleDrop(event: DragEvent) {
+	isDragging.value = false;
+	if (!event.dataTransfer) return;
+
+	const files = Array.from(event.dataTransfer.files) as File[];
+	if (files.length > 0) {
+		droppedFiles.value = files;
+		isUploadResourcesModalVisible.value = true;
+	}
+}
 </script>
 
 <style scoped>
@@ -216,6 +255,9 @@ nav {
 	gap: var(--gap-4);
 }
 
+.resource-panel-container {
+	height: 100%;
+}
 nav > header {
 	padding-left: var(--gap-2);
 	padding-right: var(--gap-2);
@@ -370,4 +412,23 @@ p.remove {
 		flex-grow: 0;
 	}
 }
+
+.drag-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: var(--surface-highlight);
+	border: dashed 2px var(--primary-color);
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-4);
+	align-items: center;
+	justify-content: center;
+	pointer-events: none;
+	padding: var(--gap-4);
+	z-index: 10;
+	opacity: 0.9;
+}
 </style>
diff --git a/packages/client/hmi-client/src/components/project/tera-upload-resources-modal.vue b/packages/client/hmi-client/src/components/project/tera-upload-resources-modal.vue
@@ -13,6 +13,7 @@
 						<div><dataset-icon /><span>Datasets</span><span>(csv, netcdf)</span></div>
 					</div>
 					<tera-drag-and-drop-importer
+						ref="dragAndDropImporter"
 						:accept-types="[
 							AcceptedTypes.PDF,
 							AcceptedTypes.CSV,
@@ -75,7 +76,7 @@ import { AssetType, ProvenanceType } from '@/types/Types';
 import { uploadDocumentAssetToProject } from '@/services/document-assets';
 import { createNewDatasetFromFile } from '@/services/dataset';
 import useAuthStore from '@/stores/auth';
-import { ref } from 'vue';
+import { ref, watch, onMounted, nextTick } from 'vue';
 import TeraDragAndDropImporter from '@/components/extracting/tera-drag-n-drop-importer.vue';
 import { useToastService } from '@/services/toast';
 import { extractPDF } from '@/services/knowledge';
@@ -84,8 +85,9 @@ import { uploadArtifactToProject } from '@/services/artifact';
 import { createModel, createModelAndModelConfig, processAndAddModelToProject, validateAMRFile } from '@/services/model';
 import { createProvenance, RelationshipType } from '@/services/provenance';
 
-defineProps<{
+const props = defineProps<{
 	visible: boolean;
+	files?: File[]; // For passing files dragged onto the resources panel into the uploader
 }>();
 const emit = defineEmits(['close']);
 
@@ -95,6 +97,35 @@ const urlToUpload = ref('');
 const isImportGithubFileModalVisible = ref(false);
 const importedFiles = ref<File[]>([]);
 
+// Handle any files that are dragged onto the resources panel
+const dragAndDropImporter = ref();
+const pendingFiles = ref<File[] | null>(null);
+
+// When files arrive, store them if we can't process them yet
+watch(
+	() => props.files,
+	async (newFiles) => {
+		if (newFiles?.length) {
+			pendingFiles.value = newFiles;
+			await nextTick();
+			tryAddFiles();
+		}
+	}
+);
+
+// Try to add files if we have both files and a mounted importer
+function tryAddFiles() {
+	if (pendingFiles.value?.length && dragAndDropImporter.value) {
+		dragAndDropImporter.value.addFiles(pendingFiles.value);
+		pendingFiles.value = null;
+	}
+}
+
+// Once mounted, try to process any pending files
+onMounted(() => {
+	tryAddFiles();
+});
+
 async function processFiles(files: File[], description: string) {
 	return files.map(async (file) => {
 		switch (file.name.split('.').pop()) {