Flashcards changes

2 files changed, 47 insertions, 17 deletions

diff --git a/src/client/views/collections/CollectionCarouselView.scss b/src/client/views/collections/CollectionCarouselView.scss
index f115bb40a..975b352cf 100644
--- a/src/client/views/collections/CollectionCarouselView.scss
+++ b/src/client/views/collections/CollectionCarouselView.scss
@@ -1,5 +1,7 @@
 .collectionCarouselView-outer {
     height: 100%;
+    position: relative;
+    overflow: hidden;
     .collectionCarouselView-caption {
         height: 50;
         display: inline-block;
@@ -11,7 +13,16 @@
         width: 100%;
         user-select: none;
     }
+    .message {
+        justify-content: center;
+        align-items: center;
+        display: flex;
+        height: 60%;
+        z-index: -1;
+        // margin: 15px;
+    }
 }
+
 .carouselView-back,
 .carouselView-fwd,
 .carouselView-star,
@@ -21,7 +32,7 @@
     display: flex;
     top: 42.5%;
     width: 30;
-    height: 15%;
+    height: 30;
     align-items: center;
     border-radius: 5px;
     justify-content: center;
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>
         );
     }