From d1b7e29761fa0395263bff3521f148170659ff62 Mon Sep 17 00:00:00 2001
From: alyssaf16 <alyssa_feinberg@brown.edu>
Date: Fri, 7 Jun 2024 21:48:34 -0400
Subject: Flashcard menus

---
 src/client/views/nodes/ComparisonBox.tsx | 73 +++++++++++++++++++++++++-------
 1 file changed, 57 insertions(+), 16 deletions(-)

(limited to 'src/client/views/nodes/ComparisonBox.tsx')

diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index f844892c5..084723d56 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -45,6 +45,9 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     @observable private _loading = false;
     @observable private _errorMessage = '';
     @observable private _outputMessage = '';
+    @observable private _isEmpty = false;
+
+    public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined;
 
     @action handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         this._inputValue = e.target.value;
@@ -162,23 +165,29 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     };
 
     clearDoc = undoable((fieldKey: string) => {
-        delete this.dataDoc[fieldKey];
-        this.dataDoc[fieldKey] = 'empty';
+        // delete this.dataDoc[fieldKey];
+        this.dataDoc[fieldKey] = undefined;
+        this._isEmpty = true;
+        // this.dataDoc[fieldKey] = 'empty';
+        console.log('HERE' + fieldKey + ';');
     }, 'clear doc');
     // clearDoc = (fieldKey: string) => delete this.dataDoc[fieldKey];
 
     moveDoc = (doc: Doc, addDocument: (document: Doc | Doc[]) => boolean, which: string) => this.remDoc(doc, which) && addDocument(doc);
     addDoc = (doc: Doc, which: string) => {
-        if (this.dataDoc[which] && this.dataDoc[which] !== 'empty') return false;
+        if (this.dataDoc[which] && !this._isEmpty) return false;
         this.dataDoc[which] = doc;
         return true;
     };
     remDoc = (doc: Doc, which: string) => {
         if (this.dataDoc[which] === doc) {
-            this.dataDoc[which] = 'empty';
+            this._isEmpty = true;
+            // this.dataDoc[which] = 'empty';
+            console.log('HEREEEE');
             this.dataDoc[which] = undefined;
             return true;
         }
+        console.log('FALSE');
         return false;
     };
 
@@ -268,8 +277,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                             if (!this.layoutDoc[`_${this._props.fieldKey}_revealOp`] || this.layoutDoc[`_${this._props.fieldKey}_revealOp`] === 'flip') {
                                 this.flipFlashcard();
 
-                                console.log('Print Front of cards: ' + (RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text ?? ''));
-                                console.log('Print Back of cards: ' + (RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text ?? ''));
+                                // console.log('Print Front of cards: ' + (RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text ?? ''));
+                                // console.log('Print Back of cards: ' + (RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text ?? ''));
                             }
                         })
                     }
@@ -297,10 +306,31 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                             <div className="dash-tooltip">Ask GPT to create an answer on the back side of the flashcard</div>
                         )
                     }>
-                    <div style={{ position: 'absolute', bottom: '3px', right: '55px', cursor: 'pointer' }} onPointerDown={e => (!this.layoutDoc[`_${this._props.fieldKey}_usePath`] ? this.askGPT(GPTCallType.CHATCARD) : null)}>
+                    <div style={{ position: 'absolute', bottom: '3px', right: '56px', cursor: 'pointer' }} onPointerDown={e => (!this.layoutDoc[`_${this._props.fieldKey}_usePath`] ? this.askGPT(GPTCallType.CHATCARD) : null)}>
                         <FontAwesomeIcon icon="lightbulb" size="xl" />
                     </div>
                 </Tooltip>
+                <Tooltip title={<div>Create a flashcard pile</div>}>
+                    <div
+                        style={{ position: 'absolute', bottom: '3px', right: '80px', cursor: 'pointer' }}
+                        onPointerDown={e => {
+                            const collectionArr: Doc[] = [];
+                            collectionArr.push(this.Document);
+                            const newCol = Docs.Create.CarouselDocument(collectionArr, {
+                                _width: NumCast(this.layoutDoc['_' + this._props.fieldKey + '_width'], 250),
+                                _height: NumCast(this.layoutDoc['_' + this._props.fieldKey + '_width'], 200),
+                                _layout_fitWidth: false,
+                                _layout_autoHeight: true,
+                            });
+                            newCol['x'] = e.clientX - 820;
+                            newCol['y'] = e.clientY - 640;
+                            this._props.addDocument?.(newCol);
+                            this._props.removeDocument?.(this.Document);
+                            this.Document.embedContainer = newCol;
+                        }}>
+                        <FontAwesomeIcon icon="folder-plus" size="xl" />
+                    </div>
+                </Tooltip>
                 <Tooltip title={<div className="dash-tooltip">Hover to reveal</div>}>
                     <div
                         style={{ position: 'absolute', bottom: '3px', right: '25px', cursor: 'pointer' }}
@@ -308,11 +338,18 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                         <FontAwesomeIcon color={this.revealOp === 'hover' ? 'blue' : 'black'} icon="layer-group" size="xl" />
                     </div>
                 </Tooltip>
-                {this.overlayAlternateIcon}
+                {/* <Tooltip title={<div className="dash-tooltip">Remove this side of the flashcard</div>}>
+                    <div
+                        style={{ position: 'absolute', bottom: '3px', right: '80px', cursor: 'pointer' }}
+                        onPointerDown={e => this.closeDown(e, this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? this._props.fieldKey + '_1' : this._props.fieldKey + '_0')}>
+                        <FontAwesomeIcon color={this.revealOp === 'hover' ? 'blue' : 'black'} icon="trash-can" size="xl" />
+                    </div>
+                </Tooltip> */}
+                {/* {this.overlayAlternateIcon} */}
             </div>
         );
     }
-
+    // this.closeDown(e, this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? this.fieldKey + '_0' : this.fieldKey + '_1')}
     @action activateContent = () => {
         this.childActive = true;
     };
@@ -434,7 +471,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                         hideLinkButton
                         pointerEvents={this.childActive ? undefined : returnNone}
                     />
-                    <div style={{ position: 'absolute', top: '-5px', left: '2px' }}>{layoutString ? null : clearButton(whichSlot)}</div>
+                    {/* <div style={{ position: 'absolute', top: '-5px', left: '2px' }}>{layoutString ? null : clearButton(whichSlot)}</div> */}
                 </> // placeholder image if doc is missingleft: `${NumCast(this.layoutDoc.width, 200) - 33}px`
             ) : (
                 <div className="placeholder">
@@ -452,7 +489,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                     this.activateContent();
                 }}
                 ref={ele => this.createDropTarget(ele, which, index)}>
-                {displayDoc(which)}
+                {!this._isEmpty ? displayDoc(which) : null}
+                {/* {this.dataDoc[this.fieldKey + '_0'] !== 'empty' ? displayDoc(which) : null} */}
             </div>
         );
 
@@ -460,7 +498,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             const side = this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? 1 : 0;
 
             // add text box to each side when comparison box is first created
-            if (!(this.dataDoc[this.fieldKey + '_0'] || this.dataDoc[this.fieldKey + '_0'] === 'empty')) {
+            // (!this.dataDoc[this.fieldKey + '_0'] && this.dataDoc[this._props.fieldKey + '_0'] !== 'empty')
+            if (!this.dataDoc[this.fieldKey + '_0'] && !this._isEmpty) {
                 const dataSplit = StrCast(this.dataDoc.data).split('Answer');
                 const newDoc = Docs.Create.TextDocument(dataSplit[1]);
                 // if there is text from the pdf ai cards, put the question on the front side.
@@ -468,7 +507,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 newDoc[DocData].text = dataSplit[1];
                 this.addDoc(newDoc, this.fieldKey + '_0');
             }
-            if (!(this.dataDoc[this.fieldKey + '_1'] || this.dataDoc[this.fieldKey + '_1'] === 'empty')) {
+            if (!this.dataDoc[this.fieldKey + '_1'] && !this._isEmpty) {
                 const dataSplit = StrCast(this.dataDoc.data).split('Answer');
                 const newDoc = Docs.Create.TextDocument(dataSplit[0]);
                 // if there is text from the pdf ai cards, put the answer on the alternate side.
@@ -478,6 +517,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             }
 
             // render the QuizCards
+            console.log('GERE' + DocCast(this.Document.embedContainer).filterOp);
             if (DocCast(this.Document.embedContainer) && DocCast(this.Document.embedContainer).filterOp === 'quiz') {
                 const text = StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text);
                 return (
@@ -489,6 +529,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                                 value={this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? this._outputValue : this._inputValue}
                                 onChange={this.handleInputChange}
                                 onScroll={e => e.stopPropagation()}
+                                placeholder={!this.layoutDoc[`_${this._props.fieldKey}_usePath`] ? 'Enter a response for GPT to evaluate.' : ''}
                                 readOnly={this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate'}></textarea>
 
                             {this._loading ? (
@@ -516,7 +557,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 <div
                     className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}`} /* change className to easily disable/enable pointer events in CSS */
                     // onContextMenu={this.specificMenu}
-                    style={{ display: 'flex', flexDirection: 'column' }}
+                    style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}
                     onMouseEnter={() => {
                         this.hoverFlip('alternate');
                     }}
@@ -531,8 +572,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                             <ReactLoading type="spin" height={30} width={30} color={'blue'} />
                         </div>
                     ) : null}
-                    {this.flashcardMenu}
-                    {/* {this.overlayAlternateIcon} */}
+                    {this._props.isContentActive() ? this.flashcardMenu : null}
+                    {this.overlayAlternateIcon}
                 </div>
             );
         }
-- 
cgit v1.2.3-70-g09d2