updated placeholder

5 files changed, 94 insertions, 65 deletions

diff --git a/src/.DS_Store b/src/.DS_Store
index 4751acf44..4ed785983 100644
--- a/src/.DS_Store
+++ b/src/.DS_Store
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 6ccb4358a..d8497e3af 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1,4 +1,5 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { files } from 'jszip';
 import { action, runInAction } from 'mobx';
 import { basename } from 'path';
 import { DateField } from '../../fields/DateField';
@@ -794,7 +795,7 @@ export namespace Docs {
          * only when creating a DockDocument from the current user's already existing
          * main document.
          */
-        function InstanceFromProto(proto: Doc, data: Field | undefined, options: DocumentOptions, delegId?: string, fieldKey: string = 'data', protoId?: string) {
+        function InstanceFromProto(proto: Doc, data: Field | undefined, options: DocumentOptions, delegId?: string, fieldKey: string = 'data', protoId?: string, placeholderDoc?: Doc) {
             const viewKeys = ['x', 'y', 'system']; // keys that should be addded to the view document even though they don't begin with an "_"
             const { omit: dataProps, extract: viewProps } = OmitKeys(options, viewKeys, '^_');
 
@@ -813,13 +814,22 @@ export namespace Docs {
             // without this, if a doc has no annotations but the user has AddOnly privileges, they won't be able to add an annotation because they would have needed to create the field's list which they don't have permissions to do.
             dataProps[fieldKey + '-annotations'] = new List<Doc>();
             dataProps[fieldKey + '-sidebar'] = new List<Doc>();
-            const dataDoc = Doc.assign(Doc.MakeDelegate(proto, protoId), dataProps, undefined, true);
+
+            const dataDoc = Doc.assign(placeholderDoc ? Doc.GetProto(placeholderDoc) : Doc.MakeDelegate(proto, protoId), dataProps, undefined, true);
+
+            if (placeholderDoc) {
+                dataDoc.proto = proto;
+            }
 
             const viewFirstProps: { [id: string]: any } = {};
             viewFirstProps['acl-Public'] = options['_acl-Public'] ? options['_acl-Public'] : Doc.defaultAclPrivate ? SharingPermissions.None : SharingPermissions.Augment;
             viewFirstProps['acl-Override'] = 'None';
             viewFirstProps.author = Doc.CurrentUserEmail;
-            const viewDoc = Doc.assign(Doc.MakeDelegate(dataDoc, delegId), viewFirstProps, true, true);
+            let viewDoc: Doc;
+            if (placeholderDoc) {
+                viewDoc = Doc.assign(placeholderDoc, viewFirstProps, true, true);
+            }
+            viewDoc = Doc.assign(Doc.MakeDelegate(dataDoc, delegId), viewFirstProps, true, true);
             Doc.assign(viewDoc, viewProps, true, true);
             ![DocumentType.LINK, DocumentType.MARKER, DocumentType.LABEL].includes(viewDoc.type as any) && DocUtils.MakeLinkToActiveAudio(() => viewDoc);
 
@@ -883,14 +893,12 @@ export namespace Docs {
             return InstanceFromProto(Prototypes.get(DocumentType.COLOR), '', options);
         }
 
-        export function LoadingDocument(title: string, text: string, width?: number, height?: number, options: DocumentOptions = {}) {
-            let myWidth = 300;
-            let myHeight = 300;
-            if (height && width) {
-                myWidth = width;
-                myHeight = height;
-            }
-            return InstanceFromProto(Prototypes.get(DocumentType.LOADING), '', { ...options, title, text, _width: myWidth, _height: myHeight });
+        export const filesToDocs = new Map<Doc, File>();
+
+        export function LoadingDocument(file: File, options: DocumentOptions, ytString?: string) {
+            const loading = InstanceFromProto(Prototypes.get(DocumentType.LOADING), file.name, { _height: 300, _width: 300, ...options });
+            // filesToDocs.set(loading, file);
+            return loading;
         }
 
         export function RTFDocument(field: RichTextField, options: DocumentOptions = {}, fieldKey: string = 'text') {
@@ -969,13 +977,13 @@ export namespace Docs {
             return I;
         }
 
-        export function PdfDocument(url: string, options: DocumentOptions = {}) {
+        export function PdfDocument(url: string, options: DocumentOptions = {}, overwriteDoc?: Doc) {
             const width = options._width || undefined;
             const height = options._height || undefined;
             const nwid = options._nativeWidth || undefined;
             const nhght = options._nativeHeight || undefined;
             if (!nhght && width && height && nwid) options._nativeHeight = (Number(nwid) * Number(height)) / Number(width);
-            return InstanceFromProto(Prototypes.get(DocumentType.PDF), new PdfField(url), options);
+            return InstanceFromProto(Prototypes.get(DocumentType.PDF), new PdfField(url), options, undefined, undefined, undefined, overwriteDoc);
         }
 
         export function WebDocument(url: string, options: DocumentOptions = {}) {
@@ -1462,8 +1470,8 @@ export namespace DocUtils {
         return created;
     }
 
-    export async function DocumentFromType(type: string, path: string, options: DocumentOptions): Promise<Opt<Doc>> {
-        let ctor: ((path: string, options: DocumentOptions) => Doc | Promise<Doc | undefined>) | undefined = undefined;
+    export async function DocumentFromType(type: string, path: string, options: DocumentOptions, rootDoc?: Doc): Promise<Opt<Doc>> {
+        let ctor: ((path: string, options: DocumentOptions, overwriteDoc?: Doc) => Doc | Promise<Doc | undefined>) | undefined = undefined;
         if (type.indexOf('image') !== -1) {
             ctor = Docs.Create.ImageDocument;
             if (!options._width) options._width = 300;
@@ -1512,7 +1520,7 @@ export namespace DocUtils {
             options = { ...options, _width: 400, _height: 512, title: path };
         }
 
-        return ctor ? ctor(path, options) : undefined;
+        return ctor ? ctor(path, options, rootDoc) : undefined;
     }
 
     export function addDocumentCreatorMenuItems(docTextAdder: (d: Doc) => void, docAdder: (d: Doc) => void, x: number, y: number, simpleMenu: boolean = false, pivotField?: string, pivotValue?: string): void {
@@ -1728,14 +1736,14 @@ export namespace DocUtils {
         return dd;
     }
 
-    async function processFileupload(generatedDocuments: Doc[], name: string, type: string, result: Error | Upload.FileInformation, options: DocumentOptions) {
+    async function processFileupload(generatedDocuments: Doc[], name: string, type: string, result: Error | Upload.FileInformation, options: DocumentOptions, rootDoc?: Doc) {
         if (result instanceof Error) {
             alert(`Upload failed: ${result.message}`);
             return;
         }
         const full = { ...options, _width: 400, title: name };
         const pathname = Utils.prepend(result.accessPaths.agnostic.client);
-        const doc = await DocUtils.DocumentFromType(type, pathname, full);
+        const doc = await DocUtils.DocumentFromType(type, pathname, full, rootDoc);
         if (doc) {
             const proto = Doc.GetProto(doc);
             proto.text = result.rawText;
@@ -1813,6 +1821,25 @@ export namespace DocUtils {
         return generatedDocuments;
     }
 
+    export function uploadFileToDoc(file: File, options: DocumentOptions, overwriteDoc: Doc) {
+        const generatedDocuments: Doc[] = [];
+        Networking.UploadFilesToServer([file]).then(upfiles => {
+            const {
+                source: { name, type },
+                result,
+            } = upfiles.lastElement();
+            console.log(name, type);
+            name && type && processFileupload(generatedDocuments, name, type, result, options, overwriteDoc);
+        });
+    }
+
+    export function generatePlaceHolder(file: File, options: DocumentOptions) {
+        return Docs.Create.LoadingDocument(file, options);
+        // placeholder.file = file
+        // TODO: nda - modify loading doc so it only takes in options
+        // Docs.Create.LoadingDocument(options, )
+    }
+
     // copies the specified drag factory document
     export function copyDragFactory(dragFactory: Doc) {
         if (!dragFactory) return undefined;
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index d19874720..492513a61 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -196,6 +196,7 @@ export class CurrentUserUtils {
             makeIconTemplate(DocumentType.RTF,   "text",  { iconTemplate:DocumentType.LABEL, _showTitle: "creationDate"}),
             makeIconTemplate(DocumentType.IMG,   "data",  { iconTemplate:DocumentType.IMG,   _height: undefined}),
             makeIconTemplate(DocumentType.COL,   "icon",  { iconTemplate:DocumentType.IMG}),
+            makeIconTemplate(DocumentType.COL,   "icon",  { iconTemplate:DocumentType.IMG}),
             makeIconTemplate(DocumentType.VID,   "icon",  { iconTemplate:DocumentType.IMG}),
             makeIconTemplate(DocumentType.BUTTON,"data",  { iconTemplate:DocumentType.FONTICON}),
             //nasty hack .. templates are looked up exclusively by type -- but we want a template for a document with a certain field (transcription) .. so this hack and the companion hack in createCustomView does this for now
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 79f629072..1ff4f5ab8 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -449,48 +449,6 @@ export function CollectionSubView<X>(moreProps?: X) {
             this.slowLoadDocuments(files, options, generatedDocuments, text, completed, e.clientX, e.clientY, addDocument).then(batch.end);
         }
 
-        /**
-         * Creates a placeholder doc view for files being uploaded and removes placeholder docs once files are uplodaded.
-         *
-         * @param files the files to upload that we want to create placeholders for
-         * @param options the document options (primarily the x and y coordinates to put doc)
-         * @param text in the case of youtube the text is the url to the video
-         * @returns a disposer action that removes the placeholders created after files get uploaded
-         */
-        placeHolderDisposer = (files: File[] | string, options: DocumentOptions, text: string) => {
-            // TODO: nda - create a specialized view for placeholder upload with a spinner and ability to retry upload
-            let placeholders: Doc[] = [];
-            // handle yt case
-            if (typeof files === 'string') {
-                placeholders.push(Docs.Create.LoadingDocument('Loading...', text, 500, 500, { ...options }));
-                // placeholders.push(Docs.Create.TextDocument('Loading: ' + text, { ...options, title: text, _width: 400, _height: 30 }));
-            } else {
-                // every other doc type is an array of File
-
-                // Get the file names as a text
-                let textStr = '';
-                files.forEach(file => {
-                    textStr += file.name + '\n';
-                });
-                placeholders.push(Docs.Create.LoadingDocument('Loading...', textStr, 500, 500, { ...options }));
-
-                // placeholders.push(Docs.Create.TextDocument('Loading: \n' + textStr, { ...options, title: files.length + ' files', _width: 500, _height: files.length * 40 }));
-            }
-            // disposer action to remove placeholders once files are uploaded
-            const remove = action(() => {
-                if (!this.props.DataDoc) {
-                    return;
-                }
-                for (let i = 0; i < placeholders.length; i++) {
-                    Doc.RemoveDocFromList(this.props.DataDoc, 'data', placeholders[i]);
-                }
-            });
-            placeholders.forEach(pl => {
-                this.addDocument(pl);
-            });
-            return remove;
-        };
-
         slowLoadDocuments = async (
             files: File[] | string,
             options: DocumentOptions,
@@ -501,13 +459,31 @@ export function CollectionSubView<X>(moreProps?: X) {
             clientY: number,
             addDocument: (doc: Doc | Doc[]) => boolean
         ) => {
+            // create placeholder docs
+            // inside placeholder docs have some func that
+
             // TODO: once loading thing is moved it should update the x and y of the file it is placeholder for
-            const disposer = this.placeHolderDisposer(files, options, text);
+            let pileUpDoc = undefined;
             // const disposer = OverlayView.Instance.addElement(<ReactLoading type={'spinningBubbles'} color={'green'} height={250} width={250} />, { x: clientX - 125, y: clientY - 125 });
             if (typeof files === 'string') {
-                generatedDocuments.push(...(await DocUtils.uploadYoutubeVideo(files, options)));
+                // uploadYoutubeVideo and similar should return a placeholder, one for each placeholder
+                // generatedDocuments.push(Docs.Create.LoadingDocument(files, options));
             } else {
-                generatedDocuments.push(...(await DocUtils.uploadFilesToDocs(files, options)));
+                // uploadFilesToDocs and similar should return a placeholder, one for each placeholder
+                generatedDocuments.push(
+                    ...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
+                        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, {}, loading);
+                        }
+                        return loading;
+                    })
+                );
             }
             if (generatedDocuments.length) {
                 // Creating a dash document
@@ -523,7 +499,8 @@ export function CollectionSubView<X>(moreProps?: X) {
                 if (completed) completed(set);
                 else {
                     if (isFreeformView && generatedDocuments.length > 1) {
-                        addDocument(DocUtils.pileup(generatedDocuments, options.x as number, options.y as number)!);
+                        pileUpDoc = DocUtils.pileup(generatedDocuments, options.x as number, options.y as number)!;
+                        addDocument(pileUpDoc);
                     } else {
                         generatedDocuments.forEach(addDocument);
                     }
@@ -535,7 +512,6 @@ export function CollectionSubView<X>(moreProps?: X) {
                     alert('Document upload failed - possibly an unsupported file type.');
                 }
             }
-            disposer();
         };
     }
 
diff --git a/src/client/views/nodes/LoadingBox.tsx b/src/client/views/nodes/LoadingBox.tsx
index 0e0619241..9d4668dde 100644
--- a/src/client/views/nodes/LoadingBox.tsx
+++ b/src/client/views/nodes/LoadingBox.tsx
@@ -4,6 +4,7 @@ import { FieldView, FieldViewProps } from './FieldView';
 import * as React from 'react';
 import './LoadingBox.scss';
 import ReactLoading from 'react-loading';
+import { Docs, DocUtils } from '../../documents/Documents';
 
 export interface LoadingBoxProps {
     title: string;
@@ -16,6 +17,30 @@ export class LoadingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return FieldView.LayoutString(LoadingBox, fieldKey);
     }
 
+    componentDidMount() {
+        // 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);
     }