aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/documents/Documents.ts8
-rw-r--r--src/client/views/collections/CollectionSubView.tsx4
-rw-r--r--src/client/views/nodes/LoadingBox.scss21
-rw-r--r--src/client/views/nodes/LoadingBox.tsx64
4 files changed, 58 insertions, 39 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index f3ab7c788..9e140ccd1 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -815,6 +815,7 @@ export namespace Docs {
dataProps[fieldKey + '-annotations'] = new List<Doc>();
dataProps[fieldKey + '-sidebar'] = new List<Doc>();
+ // users placeholderDoc as proto if it exists
const dataDoc = Doc.assign(placeholderDoc ? Doc.GetProto(placeholderDoc) : Doc.MakeDelegate(proto, protoId), dataProps, undefined, true);
if (placeholderDoc) {
@@ -826,6 +827,7 @@ export namespace Docs {
viewFirstProps['acl-Override'] = 'None';
viewFirstProps.author = Doc.CurrentUserEmail;
let viewDoc: Doc;
+ // determines whether viewDoc should be created using placeholder Doc or deafult
if (placeholderDoc) {
placeholderDoc._height = Number(options._height);
placeholderDoc._width = Number(options._width);
@@ -904,13 +906,13 @@ export namespace Docs {
return InstanceFromProto(Prototypes.get(DocumentType.COLOR), '', options);
}
- export const filesToDocs = new Map<Doc, File | string>();
+ // Mapping of all loading docs to files, i.e. keeps track of files being uploaded in current session
+ export const docsToFiles = new Map<Doc, File | string>();
export function LoadingDocument(file: File | string, options: DocumentOptions, ytString?: string) {
const fileName = typeof file == 'string' ? file : file.name;
options.title = fileName;
- const loading = InstanceFromProto(Prototypes.get(DocumentType.LOADING), fileName, { _height: 150, _width: 150, ...options });
- // filesToDocs.set(loading, file);
+ const loading = InstanceFromProto(Prototypes.get(DocumentType.LOADING), fileName, { _height: 150, _width: 200, ...options });
return loading;
}
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index fd2c722d2..eef485b95 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -470,7 +470,7 @@ export function CollectionSubView<X>(moreProps?: X) {
// generatedDocuments.push(Docs.Create.LoadingDocument(files, options));
const loading = Docs.Create.LoadingDocument(files, options);
generatedDocuments.push(loading);
- Docs.Create.filesToDocs.set(loading, files);
+ Docs.Create.docsToFiles.set(loading, files);
DocUtils.uploadYoutubeVideoLoading(files, {}, loading);
} else {
// uploadFilesToDocs and similar should return a placeholder, one for each placeholder
@@ -478,7 +478,7 @@ export function CollectionSubView<X>(moreProps?: X) {
...files.map(file => {
const loading = Docs.Create.LoadingDocument(file, options);
// now that there is a doc do whatever slowload was going to do with that file
- Docs.Create.filesToDocs.set(loading, file);
+ Docs.Create.docsToFiles.set(loading, file);
DocUtils.uploadFileToDoc(file, {}, loading);
return loading;
})
diff --git a/src/client/views/nodes/LoadingBox.scss b/src/client/views/nodes/LoadingBox.scss
index e8890cd82..f6912f547 100644
--- a/src/client/views/nodes/LoadingBox.scss
+++ b/src/client/views/nodes/LoadingBox.scss
@@ -6,7 +6,28 @@
background-color: #fdfdfd;
}
+.textContainer {
+ margin: 5px;
+}
+
+.textContainer {
+ justify-content: center;
+ align-content: center;
+}
+
+.textContainer,
.text {
+ overflow: hidden;
text-overflow: ellipsis;
+ max-width: 80%;
+ text-align: center;
+}
+
+.headerText {
+ text-align: center;
+ font-weight: bold;
+}
+
+.spinner {
text-align: center;
}
diff --git a/src/client/views/nodes/LoadingBox.tsx b/src/client/views/nodes/LoadingBox.tsx
index 249461b67..ab8878fc1 100644
--- a/src/client/views/nodes/LoadingBox.tsx
+++ b/src/client/views/nodes/LoadingBox.tsx
@@ -5,46 +5,42 @@ import * as React from 'react';
import './LoadingBox.scss';
import ReactLoading from 'react-loading';
import { StrCast } from '../../../fields/Types';
-import { computed, observable } from 'mobx';
+import { computed } from 'mobx';
import { Docs } from '../../documents/Documents';
+/**
+ * LoadingBox Class represents a placeholder doc for documents that are currently
+ * being uploaded to the server and being fetched by the client. The LoadingBox doc is then used to
+ * generate the actual type of doc that is required once the document has been successfully uploaded.
+ *
+ * Design considerations:
+ * We are using the docToFiles map in Documents to keep track of all files being uploaded in one session of the client.
+ * If the file is not found we assume an error has occurred with the file upload, e.g. it has been interrupted by a client refresh
+ * or network issues. The docToFiles essentially gets reset everytime the page is refreshed.
+ *
+ * TODOs:
+ * 1) ability to query server to retrieve files that already exist if users upload duplicate files.
+ * 2) ability to restart upload if there is an error
+ * 3) detect network error and notify the user
+ * 4 )if file upload gets interrupted, it still gets uploaded to the server if there are no network interruptions which leads to unused space. this could be
+ * handled with (1)
+ *
+ * @author naafiyan
+ */
@observer
export class LoadingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
public static LayoutString(fieldKey: string) {
return FieldView.LayoutString(LoadingBox, fieldKey);
}
- @computed
- private get isLoading() {
- const file = Docs.Create.filesToDocs.get(this.rootDoc);
+ /**
+ * Returns true if file is uploading, false otherwise
+ */
+ @computed private get isLoading(): boolean {
+ const file = Docs.Create.docsToFiles.get(this.rootDoc);
return file ? true : false;
}
- componentDidMount() {
- console.log(this.rootDoc);
- // const file = Docs.Create.filesToDocs.get(this.rootDoc);
- // if (file) {
- // console.log('Got to file');
- // Docs.Create.filesToDocs.delete(this.rootDoc);
- // // now that there is a doc do whatever slowload was going to do with that file
- // if (typeof file === 'string') {
- // // uploadYoutubeVideo and similar should return a placeholder, one for each placeholder
- // // (await DocUtils.uploadYoutubeVideo(files, options)));
- // } else {
- // // uploadFilesToDocs and similar should return a placeholder, one for each placeholder
- // DocUtils.uploadFileToDoc(file, {}, this.rootDoc);
- // }
- // } else {
- // // check if file now exists on server or not
- // // if it does we need to retreieve it and create the appropriate doc (rest of what uploadFileToDoc was doing minus uploading)
- // // if it doesn't display an error message "upload failed"
- // }
- // query endpoints to:
- // check if file now exists on server or not
- // if it does we need to retreieve it and create the appropriate doc (rest of what uploadFileToDoc was doing minus uploading)
- // if it doesn't display an error message "upload failed"
- }
-
constructor(props: any) {
super(props);
}
@@ -53,15 +49,15 @@ export class LoadingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
return (
<div className="loadingBoxContainer">
{this.isLoading ? (
- <div>
- <p className="text">Loading:</p>
- <br></br>
+ <div className="textContainer">
+ <p className="headerText">Loading:</p>
<span className="text">{StrCast(this.rootDoc.title)}</span>
<ReactLoading type={'spinningBubbles'} color={'blue'} height={100} width={100} />
</div>
) : (
- <div>
- <span>Error Loading File: {StrCast(this.rootDoc.title)}</span>
+ <div className="textContainer">
+ <p className="headerText">Error Loading File: </p>
+ <span className="text">{StrCast(this.rootDoc.title)}</span>
</div>
)}
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 21:37:00 +0000