Skip to content

Commit

Permalink
feat: upload resources modal (#1981)
Browse files Browse the repository at this point in the history 
Co-authored-by: Daniel Chang <mwdchang@gmail.com>
  • Loading branch information
@echl @mwdchang
echl and mwdchang authored Oct 10, 2023
1 parent 681dbff commit 1b82df7
Show file tree
Hide file tree
Showing 6 changed files with 304 additions and 300 deletions.
29 changes: 24 additions & 5 deletions packages/client/hmi-client/src/components/documents/tera-external-publication.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,13 +147,22 @@
</template>
<ul>
<li class="extracted-item" v-for="(url, index) in githubUrls" :key="index">
<tera-import-github-file
:urlString="url"
:show-import-button="!featureConfig.isPreview"
@open-code="openCode"
<Button
v-if="!featureConfig.isPreview"
label="Import"
class="p-button-sm p-button-outlined"
icon="pi pi-cloud-download"
@click="openImportGithubFileModal(url)"
/>
<a :href="url" rel="noreferrer noopener">{{ url }}</a>
</li>
</ul>
<tera-import-github-file
:visible="isImportGithubFileModalVisible"
:url-string="openedUrl"
@close="isImportGithubFileModalVisible = false"
@open-code="openCode"
/>
</AccordionTab>
<AccordionTab v-if="!isEmpty(otherUrls)">
<template #header>
Expand Down Expand Up @@ -237,7 +246,7 @@ import Message from 'primevue/message';
import { getDocumentById, getXDDArtifacts } from '@/services/data';
import { XDDExtractionType } from '@/types/XDD';
import { getDocumentDoi, isModel, isDataset, isDocument } from '@/utils/data-util';
import { CodeRequest, ResultType, FeatureConfig } from '@/types/common';
import { ResultType, FeatureConfig, CodeRequest } from '@/types/common';
import { getRelatedArtifacts } from '@/services/provenance';
import TeraShowMoreText from '@/components/widgets/tera-show-more-text.vue';
import TeraImportGithubFile from '@/components/widgets/tera-import-github-file.vue';
Expand Down Expand Up @@ -275,6 +284,8 @@ const props = defineProps({
const doc = ref<Document | null>(null);
const pdfLink = ref<string | null>(null);
const documentView = ref(DocumentView.EXRACTIONS);
const isImportGithubFileModalVisible = ref(false);
const openedUrl = ref('');
const emit = defineEmits(['open-code', 'close-preview', 'asset-loaded']);
Expand Down Expand Up @@ -458,6 +469,11 @@ const formatCitation = (obj: { [key: string]: string }) => {
return highlightSearchTerms(citation);
};
function openImportGithubFileModal(url: string) {
openedUrl.value = url;
isImportGithubFileModalVisible.value = true;
}
onMounted(async () => {
fetchDocumentArtifacts();
fetchAssociatedResources();
Expand Down Expand Up @@ -490,6 +506,9 @@ onUpdated(() => {
border: 1px solid var(--surface-border-light);
padding: 1rem;
border-radius: var(--border-radius);
gap: 1rem;
display: flex;
align-items: center;
}
.extracted-item > .extracted-image {
Expand Down
31 changes: 18 additions & 13 deletions packages/client/hmi-client/src/components/extracting/tera-drag-n-drop-file-previewer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,32 +21,27 @@
<ProgressBar :value="props.progress"></ProgressBar>
</div>
</template>
<template v-else-if="props.showPreview">
<template v-if="file && file.type === AcceptedTypes.PDF">
<embed :src="getSrc(file)" />
</template>
</template>
<template v-else-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';
import { AcceptedTypes } from '@/types/common';
const props = defineProps({
file: {
type: File,
default: undefined
},
showPreview: {
type: Boolean,
default: true,
required: true
},
isProcessing: {
type: Boolean,
required: true
Expand All @@ -60,13 +55,12 @@ const props = defineProps({
}
});
const getSrc = (file) => URL.createObjectURL(file);
const emit = defineEmits(['remove-file']);
</script>
<style scoped>
.file-preview {
overflow: hidden !important;
margin-top: 0.5rem;
}
.file-title-container {
Expand Down Expand Up @@ -100,4 +94,15 @@ const emit = defineEmits(['remove-file']);
background-color: var(--surface-border-warning);
height: 100%;
}
.ready {
color: var(--primary-color);
display: flex;
gap: 0.5rem;
align-items: center;
}
.ready i {
align-self: end;
}
</style>
75 changes: 41 additions & 34 deletions packages/client/hmi-client/src/components/extracting/tera-drag-n-drop-importer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,45 +17,37 @@
/>
<label for="fileInput" class="file-label">
<div v-if="dragOver">Release mouse button to add files to import</div>
<div v-else>Drop resources here or <span class="text-link">upload a file</span>.</div>
</label>
<br />

<div v-if="importFiles.length > 0">
<div class="preview-container mt-4" v-if="importFiles.length">
<div v-for="file in importFiles" :key="file.name" class="file-preview" scrolling="no">
<TeraDragAndDropFilePreviewer
:file="file"
:show-preview="props.showPreview"
:is-processing="isProcessing"
:progress="props.progress"
@remove-file="removeFile(importFiles.indexOf(file))"
>
</TeraDragAndDropFilePreviewer>
<div v-else class="drop-zone">
<div><i class="pi pi-file" style="font-size: 2.5rem" /></div>
<div>
Drop resources here or <span class="text-link">click to open a file browser</span>
</div>
</div>
<br />
</label>
</div>
<div v-if="importFiles.length > 0">
<div class="preview-container mt-4" v-if="importFiles.length">
<div v-for="file in importFiles" :key="file.name" class="file-preview" scrolling="no">
<TeraDragAndDropFilePreviewer
:file="file"
:is-processing="isProcessing"
:progress="props.progress"
@remove-file="removeFile(importFiles.indexOf(file))"
>
</TeraDragAndDropFilePreviewer>
</div>
</div>
<br />
<Button
v-if="canImport"
type="button"
class="import-button"
@click="processFiles(importFiles)"
label="Import data"
></Button>
</div>
</section>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { ref, watch } from 'vue';
import API from '@/api/api';
import Button from 'primevue/button';
import { AcceptedExtensions, AcceptedTypes } from '@/types/common';
import TeraDragAndDropFilePreviewer from './tera-drag-n-drop-file-previewer.vue';
const emit = defineEmits(['import-completed']);
const emit = defineEmits(['import-completed', 'imported-files-updated']);
const importFiles = ref(<File[]>[]);
const fileInput = ref(<HTMLInputElement | null>null);
const dragOver = ref(false);
Expand All @@ -65,11 +57,6 @@ const processResponse = ref(<{ file: string; response: { text: string } }[]>[]);
const csvDescription = ref('');
const props = defineProps({
// show preview
showPreview: {
type: Boolean,
required: true
},
progress: {
type: Number,
default: undefined
Expand Down Expand Up @@ -156,6 +143,7 @@ const addFiles = (addedFiles: File[] | undefined) => {
}
}
}
processFiles(importFiles.value);
};
/**
Expand Down Expand Up @@ -218,7 +206,12 @@ async function processFiles(files) {
files.value = [];
}
const canImport = computed(() => importFiles.value.length > 0);
watch(
() => importFiles.value.length,
() => {
emit('imported-files-updated', importFiles.value);
}
);
</script>

<style scoped>
Expand Down Expand Up @@ -262,7 +255,7 @@ const canImport = computed(() => importFiles.value.length > 0);
flex-direction: column;
cursor: pointer;
align-items: center;
padding-top: 2.5rem;
padding: 2.5rem 0 2.5rem 0;
}
.text-link {
Expand Down Expand Up @@ -297,4 +290,18 @@ const canImport = computed(() => importFiles.value.length > 0);
cursor: pointer;
border: 1px solid var(--surface-border);
}
.drop-zone {
display: flex;
gap: 1rem;
align-items: center;
}
i {
color: var(--text-color-secondary);
}
.modal label {
margin: 0;
}
</style>
40 changes: 25 additions & 15 deletions packages/client/hmi-client/src/components/widgets/tera-import-github-file.vue
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,7 @@
<template>
<main>
<Button
v-if="showImportButton"
label="Import"
class="p-button-sm p-button-outlined"
icon="pi pi-cloud-download"
@click="initializeCodeBrowser"
/>
<a :href="urlString" rel="noreferrer noopener">{{ urlString }}</a>
<Teleport to="body">
<tera-modal v-if="isModalVisible" class="modal" @modal-mask-clicked="!isModalVisible">
<tera-modal v-if="visible" class="modal" @modal-mask-clicked="emit('close')">
<template #header>
<h2>
https://github.com/{{ repoOwnerAndName
Expand Down Expand Up @@ -167,15 +159,15 @@
selectedFiles.length == 1 ? '' : 's'
}}</Button
>
<Button class="p-button-outlined" label="Cancel" @click="isModalVisible = false" />
<Button class="p-button-outlined" label="Cancel" @click="emit('close')" />
</template>
</tera-modal>
</Teleport>
</main>
</template>

<script setup lang="ts">
import { computed, ComputedRef, ref, Ref } from 'vue';
import { computed, ComputedRef, ref, Ref, watch } from 'vue';
import Button from 'primevue/button';
import TeraModal from '@/components/widgets/tera-modal.vue';
import { isEmpty } from 'lodash';
Expand All @@ -193,16 +185,18 @@ import { useProjects } from '@/composables/project';
import { uploadCodeToProjectFromGithub } from '@/services/code';
import { createNewDocumentFromGithubFile } from '@/services/document-assets';
import { createNewDatasetFromGithubFile } from '@/services/dataset';
import { useToastService } from '@/services/toast';
const props = defineProps<{
visible: boolean;
urlString: string;
showImportButton: boolean;
}>();
const emit = defineEmits(['close']);
const repoOwnerAndName: Ref<string> = ref('');
const currentDirectory: Ref<string> = ref('');
const directoryContent: Ref<GithubRepo | null> = ref(null);
const isModalVisible: Ref<boolean> = ref(false);
const selectedFiles: Ref<GithubFile[]> = ref([]);
const selectedUnknownFiles: Ref<GithubFile[]> = ref([]);
const editor: Ref<VAceEditorInstance['_editor'] | null> = ref(null);
Expand Down Expand Up @@ -240,7 +234,6 @@ const hasOther: ComputedRef<boolean> = computed(
);
async function initializeCodeBrowser() {
isModalVisible.value = true;
repoOwnerAndName.value = new URL(props.urlString).pathname.substring(1); // owner/repo
await openDirectory(''); // Goes back to root directory if modal is closed then opened again
}
Expand Down Expand Up @@ -294,8 +287,16 @@ async function openSelectedFiles() {
await importDocumentFiles(selectedDocumentFiles);
}
// TODO: make this number account for files that were not succussfully imported
const numUploadedFiles =
selectedCodeFiles.length + selectedDataFiles.length + selectedDocumentFiles.length;
const resourceMsg = numUploadedFiles > 1 ? 'resources were' : 'resource was';
useToastService().success(
'Success!',
`${numUploadedFiles} ${resourceMsg} successfuly added to this project`
);
// FIXME: Files aren't opening
isModalVisible.value = false;
emit('close');
}
/**
Expand Down Expand Up @@ -377,6 +378,15 @@ async function openCodeFiles(githubFiles: GithubFile[]) {
}
});
}
watch(
() => props.visible,
() => {
if (props.visible) {
initializeCodeBrowser();
}
}
);
</script>

<style scoped>
Expand Down
Loading

0 comments on commit 1b82df7

Please sign in to comment.