From 91e465c9ba542b637e66c7091c444a44fdbe4f0c Mon Sep 17 00:00:00 2001
From: alyssaf16 <alyssa_feinberg@brown.edu>
Date: Thu, 13 Jun 2024 14:37:37 -0400
Subject: create flashcard stack and ui fixes

---
 .../views/collections/CollectionCarouselView.tsx   | 51 +++++++++++++++++-----
 1 file changed, 40 insertions(+), 11 deletions(-)

(limited to 'src/client/views/collections/CollectionCarouselView.tsx')

diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index b5b6e1f4b..f2d634eaa 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -21,6 +21,8 @@ import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import './CollectionCarouselView.scss';
 import { CollectionSubView } from './CollectionSubView';
 import { Tooltip } from '@mui/material';
+import { DocUtils } from '../../documents/DocUtils';
+import { Any } from '@react-spring/web';
 
 enum cardMode {
     // PRACTICE = 'practice',
@@ -49,7 +51,8 @@ export class CollectionCarouselView extends CollectionSubView() {
     constructor(props: any) {
         super(props);
         makeObservable(this);
-        // this.layoutDoc.filterOp = cardMode.ALL;
+        // this.setModes();
+        this.layoutDoc.filterOp = cardMode.ALL;
         Doc.setDocFilter(this.Document, 'data_star', undefined, 'match');
         this.layoutDoc.practiceMode = practiceMode.NORMAL;
         this.layoutDoc._carousel_index = 0;
@@ -67,6 +70,9 @@ export class CollectionCarouselView extends CollectionSubView() {
     };
 
     @computed get carouselItems() {
+        this.childLayoutPairs.map(pair => {
+            pair.layout.embedContainer = this.Document;
+        });
         return this.childLayoutPairs.filter(pair => pair.layout.type !== DocumentType.LINK);
     }
     @computed get marginX() {
@@ -80,6 +86,13 @@ export class CollectionCarouselView extends CollectionSubView() {
         this._filterMessage = mes;
     };
 
+    setModes = () => {
+        this.layoutDoc.filterOp = cardMode.ALL;
+        Doc.setDocFilter(this.Document, 'data_star', undefined, 'match');
+        this.layoutDoc.practiceMode = practiceMode.NORMAL;
+        this.layoutDoc._carousel_index = 0;
+    };
+
     move = (dir: number) => {
         const moveToCardWithField = (match: (doc: Doc) => boolean): boolean => {
             let startInd = (NumCast(this.layoutDoc._carousel_index) + dir) % this.carouselItems.length;
@@ -107,8 +120,8 @@ export class CollectionCarouselView extends CollectionSubView() {
                 break;
             case practiceMode.PRACTICE && cardMode.STAR:
                 if (!moveToCardWithField((doc: Doc) => doc[this.practiceField] !== practiceVal.CORRECT && doc[this.starField] === true)) {
-                    this._filterMessage = 'No flashcards to show! Unselect star mode to view all flashcards.';
-                    this._practiceMessage = 'Unselect practice mode to view all flashcards.';
+                    this._filterMessage = 'No flashcards to show! Unselect mode to view all flashcards.';
+                    this._practiceMessage = undefined;
                 }
                 break;
             default:
@@ -179,20 +192,24 @@ export class CollectionCarouselView extends CollectionSubView() {
         this.layoutDoc.filterOp = mode;
         switch (mode) {
             case cardMode.STAR:
-                Doc.setDocFilter(this.Document, 'data_star', true, 'match');
+                // Doc.setDocFilter(this.Document, 'data_star', true, 'match');
                 this.move(1);
                 break;
             default:
                 this.setFilterMessage(undefined); // prettier-ignore
-                Doc.setDocFilter(this.Document, 'data_star', true, 'remove');
+            // Doc.setDocFilter(this.Document, 'data_star', true, 'remove');
         }
     };
 
     @computed get content() {
+        if (this.layoutDoc._carousel_index === this.carouselItems.length && this.layoutDoc._carousel_index !== 0) {
+            this.move(1);
+        }
         const index = NumCast(this.layoutDoc._carousel_index);
         const curDoc = this.carouselItems?.[index];
         const captionProps = { ...this._props, NativeScaling: returnOne, PanelWidth: this.captionWidth, fieldKey: 'caption', setHeight: undefined, setContentView: undefined };
         const carouselShowsCaptions = StrCast(this.layoutDoc._layout_showCaption);
+
         return !(curDoc?.layout instanceof Doc) ? null : (
             <>
                 <div className="collectionCarouselView-image" key="image">
@@ -207,6 +224,7 @@ export class CollectionCarouselView extends CollectionSubView() {
                         onClickScript={this.onContentClick}
                         isDocumentActive={this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this._props.isContentActive}
                         isContentActive={this._props.childContentsActive ?? this._props.isContentActive() === false ? returnFalse : emptyFunction}
+                        addDocument={this._props.addDocument}
                         hideCaptions={!!carouselShowsCaptions} // hide captions if the carousel is configured to show the captions
                         renderDepth={this._props.renderDepth + 1}
                         LayoutTemplate={this._props.childLayoutTemplate}
@@ -235,12 +253,21 @@ export class CollectionCarouselView extends CollectionSubView() {
     }
 
     containsDifTypes = (): boolean => {
-        return this.carouselItems.filter(doc => !doc.layout.isFlashcard).length === 0;
+        return this.carouselItems.filter(doc => !doc.layout._layout_isFlashcard).length !== 0;
     };
 
     addFlashcard() {
         const newDoc = Docs.Create.ComparisonDocument('', { _layout_isFlashcard: true, _width: 300, _height: 300 });
         this.addDocument?.(newDoc);
+        // DocUtils.copyDragFactory(newDoc);
+        // this._props.addDocument?.();
+        // newDoc.layout = this.layoutDoc;
+        // newDoc.data = this.dataDoc;
+        // Doc.AddDocToList()
+        // this._props.parent._props.addDocument();
+        // this.childLayoutPairs.push({ newDoc.layout, newDoc.data});
+        // this._props.addDocument?.(newDoc);
+        // console.log('HERE');
     }
 
     @computed get buttons() {
@@ -260,11 +287,11 @@ export class CollectionCarouselView extends CollectionSubView() {
                                 <FontAwesomeIcon icon="star" color={this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)].layout[this.starField] ? 'yellow' : 'gray'} size="1x" />
                             </div>
                         </Tooltip>
-                        <Tooltip title="add new flashcard to pile">
+                        {/* <Tooltip title="add new flashcard to pile">
                             <div key="add" className="carouselView-add" onClick={this.addFlashcard}>
                                 <FontAwesomeIcon icon="plus" color={this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)].layout[this.starField] ? 'yellow' : 'gray'} size="1x" />
                             </div>
-                        </Tooltip>
+                        </Tooltip> */}
                     </div>
                 ) : null}
                 {this.layoutDoc.practiceMode === practiceMode.PRACTICE ? (
@@ -286,8 +313,10 @@ export class CollectionCarouselView extends CollectionSubView() {
     }
 
     togglePracticeMode = (mode: practiceMode) => {
-        if (mode === this.layoutDoc.practiceMode) this.setPracticeMode(practiceMode.NORMAL);
-        else this.setPracticeMode(mode);
+        if (mode === this.layoutDoc.practiceMode) {
+            this.setPracticeMode(practiceMode.NORMAL);
+            // this.setPracticeMessage("undefined");
+        } else this.setPracticeMode(mode);
     };
     toggleFilterMode = () => { this.layoutDoc.filterOp === cardMode.STAR ? this.setFilterMode(cardMode.ALL) : this.setFilterMode(cardMode.STAR)}; //prettier-ignore
     setColor = (mode: practiceMode | cardMode, which: string) => { return which === mode ? 'white' : 'light gray'}; //prettier-ignore
@@ -351,7 +380,7 @@ export class CollectionCarouselView extends CollectionSubView() {
                     }}>
                     Recently missed!
                 </p>
-                {!this.containsDifTypes() ? this.menu : null}
+                {!this.containsDifTypes() && this.carouselItems.length !== 0 ? this.menu : null}
                 {this.Document._chromeHidden || (!this._filterMessage && !this._practiceMessage) ? this.buttons : null}
             </div>
         );
-- 
cgit v1.2.3-70-g09d2

