From 585f03bf45df4ac7ed61d22c9dbe10d8e453199d Mon Sep 17 00:00:00 2001
From: alyssaf16 <alyssa_feinberg@brown.edu>
Date: Wed, 5 Jun 2024 15:06:15 -0400
Subject: Flashcards changes

---
 .../views/collections/CollectionCarouselView.tsx   | 51 +++++++++++++++-------
 1 file changed, 35 insertions(+), 16 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 2adad68e0..2893de762 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable react/jsx-props-no-spreading */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { computed, makeObservable } from 'mobx';
+import { computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { StopEvent, returnFalse, returnOne, returnTrue, returnZero } from '../../../ClientUtils';
@@ -24,6 +24,7 @@ enum cardMode {
     PRACTICE = 'practice',
     STAR = 'star',
     QUIZ = 'quiz',
+    ALL = 'all',
 }
 enum practiceVal {
     MISSED = 'missed',
@@ -32,12 +33,15 @@ enum practiceVal {
 @observer
 export class CollectionCarouselView extends CollectionSubView() {
     private _dropDisposer?: DragManager.DragDropDisposer;
+    @observable private _message = 'Drag a document';
     get practiceField() { return this.fieldKey + "_practice"; } // prettier-ignore
     get starField()     { return this.fieldKey + "_star"; } // prettier-ignore
 
     constructor(props: any) {
         super(props);
         makeObservable(this);
+        this.layoutDoc.filterOp = cardMode.ALL;
+        this.layoutDoc._carousel_index = 0;
     }
 
     componentWillUnmount() {
@@ -61,7 +65,7 @@ export class CollectionCarouselView extends CollectionSubView() {
     move = (dir: number) => {
         const moveToCardWithField = (match: (doc: Doc) => boolean): boolean => {
             let startInd = (NumCast(this.layoutDoc._carousel_index) + dir) % this.carouselItems.length;
-            while (!match(this.carouselItems?.[startInd].layout) && (startInd + dir + this.carouselItems.length) % this.carouselItems.length !== this.layoutDoc._carousel_index) {
+            while (!match(this.carouselItems?.[startInd].layout) && (startInd + this.carouselItems.length) % this.carouselItems.length !== this.layoutDoc._carousel_index) {
                 startInd = (startInd + dir + this.carouselItems.length) % this.carouselItems.length;
             }
             if (match(this.carouselItems?.[startInd].layout)) {
@@ -73,16 +77,19 @@ export class CollectionCarouselView extends CollectionSubView() {
         switch (StrCast(this.layoutDoc.filterOp)) {
             case cardMode.STAR:  // go to a flashcard that is starred, skip the ones that aren't
                 if (!moveToCardWithField((doc: Doc) => !!doc[this.starField])) {
+                    // this.layoutDoc._carousel_index
                     this.layoutDoc.filterOp = undefined;  // if there aren't any starred, show all cards
+                    this._message = 'No starred items. Return to All to star documents.'
                 }
                 break;
             case cardMode.PRACTICE: // go to a new index that is missed, skip the ones that are correct
                 if (!moveToCardWithField((doc: Doc) => doc[this.practiceField] !== practiceVal.CORRECT)) {
                     this.layoutDoc.filterOp = undefined;  // if all of the cards are correct, show all cards and exit practice mode
-
+                    this._message = 'Finished! Return to All.'
                     this.carouselItems.forEach(item => { // reset all the practice values
                         item.layout[this.practiceField] = undefined;
                     });
+                    // this.layoutDoc._carousel_index = -1;
                 }
                 break;
             default: moveToCardWithField(returnTrue);
@@ -112,6 +119,7 @@ export class CollectionCarouselView extends CollectionSubView() {
         e.stopPropagation();
         const curDoc = this.carouselItems[NumCast(this.layoutDoc._carousel_index)];
         curDoc.layout[this.starField] = curDoc.layout[this.starField] ? undefined : true;
+        // this.layoutDoc._carousel_index = undefined;
     };
 
     /*
@@ -123,7 +131,9 @@ export class CollectionCarouselView extends CollectionSubView() {
         curDoc.layout[this.practiceField] = val;
         this.advance(e);
     };
-
+    clearContent = () => {
+        this.carouselItems?.map(doc => (doc.layout[this.practiceField] = undefined));
+    };
     captionStyleProvider = (doc: Doc | undefined, captionProps: Opt<FieldViewProps>, property: string): any => {
         // first look for properties on the document in the carousel, then fallback to properties on the container
         const childValue = doc?.['caption_' + property] ? this._props.styleProvider?.(doc, captionProps, property) : undefined;
@@ -133,16 +143,22 @@ export class CollectionCarouselView extends CollectionSubView() {
     onContentDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick);
     onContentClick = () => ScriptCast(this.layoutDoc.onChildClick);
     captionWidth = () => this._props.PanelWidth() - 2 * this.marginX;
+    setFilterMode = (mode: cardMode) => {
+        this.layoutDoc.filterOp = mode;
+        if (mode == cardMode.STAR) this.move(1);
+        this.clearContent();
+    };
     specificMenu = (): void => {
         const cm = ContextMenu.Instance;
 
         const revealOptions = cm.findByDescription('Filter Flashcards');
         const revealItems: ContextMenuProps[] = revealOptions && 'subitems' in revealOptions ? revealOptions.subitems : [];
-        revealItems.push({description: 'All',           event: () => {this.layoutDoc.filterOp = undefined;},         icon: 'layer-group',}); // prettier-ignore
-        revealItems.push({description: 'Star',          event: () => {this.layoutDoc.filterOp = cardMode.STAR;},     icon: 'star',}); // prettier-ignore
-        revealItems.push({description: 'Practice Mode', event: () => {this.layoutDoc.filterOp = cardMode.PRACTICE;}, icon: 'check',}); // prettier-ignore
-        revealItems.push({description: 'Quiz Cards',    event: () => {this.layoutDoc.filterOp = cardMode.QUIZ;},     icon: 'pencil',}); // prettier-ignore
+        revealItems.push({description: 'All',           event: () => {this.setFilterMode(cardMode.ALL);},         icon: 'layer-group',}); // prettier-ignore
+        revealItems.push({description: 'Star',          event: () => {this.setFilterMode(cardMode.STAR);},     icon: 'star',}); // prettier-ignore
+        revealItems.push({description: 'Practice Mode', event: () => {this.setFilterMode(cardMode.PRACTICE);}, icon: 'check',}); // prettier-ignore
+        cm.addItem({description: 'Quiz Cards',    event: () => {this.setFilterMode(cardMode.QUIZ);},     icon: 'pencil',}); // prettier-ignore
         !revealOptions && cm.addItem({ description: 'Filter Flashcards', addDivider: false, noexpand: true, subitems: revealItems, icon: 'layer-group' });
+        //cm.addItem({description: 'Quiz Cards',    event: () => {this.layoutDoc.filterOp = cardMode.QUIZ; this.clearContent()});
     };
     @computed get content() {
         const index = NumCast(this.layoutDoc._carousel_index);
@@ -221,17 +237,15 @@ export class CollectionCarouselView extends CollectionSubView() {
                     background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor),
                     color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color),
                 }}>
-                {this.content}
+                {this.layoutDoc.filterOp ? this.content : <p className="message">{this._message}</p>}
+                {/* {(this.carouselItems?.filter(doc => doc.layout[this.practiceField] !== practiceVal.CORRECT)).length == 0 ? null : this.content} */}
                 {/* Displays a message to the user to add more flashcards if they are in practice mode and no flashcards are there. */}
                 <p
+                    className="message"
                     style={{
                         display: !this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)] && this.layoutDoc.filterOp === cardMode.PRACTICE ? 'flex' : 'none',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                        height: '100%',
-                        zIndex: '-1',
                     }}>
-                    Add flashcards!
+                    Add flashcards
                 </p>
                 {/* Displays a message to the user that a flashcard was recently missed if they had previously gotten it wrong. */}
                 <p
@@ -241,11 +255,16 @@ export class CollectionCarouselView extends CollectionSubView() {
                         position: 'relative',
                         left: '10px',
                         top: '10px',
-                        display: this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)] ? (this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)].layout[this.practiceField] === practiceVal.MISSED ? 'block' : 'none') : 'none',
+                        width: '10px',
+                        display: this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)]
+                            ? this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)].layout[this.practiceField] === practiceVal.MISSED && this.layoutDoc.filterOp === cardMode.PRACTICE
+                                ? 'block'
+                                : 'none'
+                            : 'none',
                     }}>
                     Recently missed!
                 </p>
-                {this.Document._chromeHidden ? null : this.buttons}
+                {this.Document._chromeHidden || !this.layoutDoc.filterOp ? null : this.buttons}
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2

