filter fixed

2 files changed, 153 insertions, 58 deletions

diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index 8da808065..979f7ea2a 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, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { StopEvent, returnFalse, returnOne, returnTrue, returnZero } from '../../../ClientUtils';
@@ -22,11 +22,16 @@ import { CollectionSubView } from './CollectionSubView';
 import { Tooltip } from '@mui/material';
 
 enum cardMode {
-    PRACTICE = 'practice',
+    // PRACTICE = 'practice',
     STAR = 'star',
-    QUIZ = 'quiz',
+    // QUIZ = 'quiz',
     ALL = 'all',
 }
+enum practiceMode {
+    PRACTICE = 'practice',
+    QUIZ = 'quiz',
+    NORMAL = 'normal',
+}
 enum practiceVal {
     MISSED = 'missed',
     CORRECT = 'correct',
@@ -34,7 +39,8 @@ enum practiceVal {
 @observer
 export class CollectionCarouselView extends CollectionSubView() {
     private _dropDisposer?: DragManager.DragDropDisposer;
-    @observable private _message = 'Drag a document';
+    @observable private _practiceMessage: string | undefined;
+    @observable private _filterMessage: string | undefined;
     get practiceField() { return this.fieldKey + "_practice"; } // prettier-ignore
     get sideField() { return "_" + this.fieldKey + "_usePath"; } // prettier-ignore
     get starField()     { return this.fieldKey + "_star"; } // prettier-ignore
@@ -43,6 +49,7 @@ export class CollectionCarouselView extends CollectionSubView() {
         super(props);
         makeObservable(this);
         this.layoutDoc.filterOp = cardMode.ALL;
+        this.layoutDoc.practiceMode = practiceMode.NORMAL;
         this.layoutDoc._carousel_index = 0;
     }
 
@@ -64,6 +71,13 @@ export class CollectionCarouselView extends CollectionSubView() {
         return NumCast(this.layoutDoc.caption_xMargin, 50);
     }
 
+    @action setPracticeMessage = (mes: string | undefined) => {
+        this._practiceMessage = mes;
+    };
+    @action setFilterMessage = (mes: string | undefined) => {
+        this._filterMessage = mes;
+    };
+
     move = (dir: number) => {
         const moveToCardWithField = (match: (doc: Doc) => boolean): boolean => {
             let startInd = (NumCast(this.layoutDoc._carousel_index) + dir) % this.carouselItems.length;
@@ -76,26 +90,69 @@ export class CollectionCarouselView extends CollectionSubView() {
             }
             return match(this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)].layout);
         };
-        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);
-        } // prettier-ignore
+
+        if (this.layoutDoc.practiceMode === practiceMode.PRACTICE && this.layoutDoc.filterOp !== cardMode.STAR) {
+            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._practiceMessage = 'Finished! Return to All - BUTTONS??.';
+                this.carouselItems.forEach(item => {
+                    // reset all the practice values
+                    item.layout[this.practiceField] = undefined;
+                });
+                // this.layoutDoc._carousel_index = -1;
+            }
+        } else if (this.layoutDoc.practiceMode !== practiceMode.PRACTICE && this.layoutDoc.filterOp === cardMode.STAR) {
+            if (!moveToCardWithField((doc: Doc) => !!doc[this.starField])) {
+                //this.layoutDoc.filterOp = undefined;  // if there aren't any starred, show all cards
+                this._filterMessage = 'No starred items. Unselect this view to see all flashcards and star them.';
+            }
+        } else if (this.layoutDoc.practiceMode === practiceMode.PRACTICE && this.layoutDoc.filterOp === cardMode.STAR) {
+            if (!moveToCardWithField((doc: Doc) => doc[this.practiceField] !== practiceVal.CORRECT && doc[this.starField] === true)) {
+                this._practiceMessage = 'New message.';
+            }
+        } else {
+            moveToCardWithField(returnTrue);
+        }
+
+        // if (this.layoutDoc.practiceMode === practiceMode.PRACTICE && this.layoutDoc.filterOp === cardMode.STAR) {
+        //     if (!moveToCardWithField((doc: Doc) => doc[this.practiceField] !== practiceVal.CORRECT) && !moveToCardWithField((doc: Doc) => doc[this.starField] === true)) {
+        //         this._practiceMessage = 'New message.';
+        //     } else moveToCardWithField(returnTrue);
+        //     return;
+        // }
+        // switch (StrCast(this.layoutDoc.practiceMode)) {
+        //     // case practiceMode.QUIZ:  // 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. Unselect this view to see all flashcards and star them.'
+        //     //     }
+        //     //     break;
+        //     case practiceMode.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._practiceMessage = 'Finished! Return to All - BUTTONS??.'
+        //             this.carouselItems.forEach(item => { // reset all the practice values
+        //                 item.layout[this.practiceField] = undefined;
+        //             });
+        //             // this.layoutDoc._carousel_index = -1;
+        //         }
+        //         break;
+        //     default: moveToCardWithField(returnTrue);
+
+        // } // prettier-ignore
+
+        // 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.filterOp = undefined;  // if there aren't any starred, show all cards
+        //             this._filterMessage = 'No starred items. Unselect this view to see all flashcards and star them.';
+        //         }
+        //         break;
+        //     default:
+        //         break;
+        //     // if (this.layoutDoc.practiceMode === practiceMode.PRACTICE) moveToCardWithField(returnTrue);
+        // }
     };
 
     /**
@@ -121,6 +178,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;
+        // if (!curDoc.layout[this.starField]) this.move(1);
         // this.layoutDoc._carousel_index = undefined;
     };
 
@@ -142,16 +200,42 @@ export class CollectionCarouselView extends CollectionSubView() {
     onContentDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick);
     onContentClick = () => ScriptCast(this.layoutDoc.onChildClick);
     captionWidth = () => this._props.PanelWidth() - 2 * this.marginX;
+    setPracticeMode = (mode: practiceMode) => {
+        this.layoutDoc.practiceMode = mode;
+        this.carouselItems?.map(doc => (doc.layout[this.practiceField] = undefined));
+        switch (mode) {
+            case practiceMode.QUIZ:
+                this.carouselItems?.map(doc => (doc.layout[this.sideField] = undefined));
+                break;
+            case practiceMode.NORMAL:
+                this.setPracticeMessage(undefined);
+                break;
+            default:
+                break;
+        }
+    };
     setFilterMode = (mode: cardMode) => {
         this.layoutDoc.filterOp = mode;
-        console.log('MODE' + mode);
-        console.log('FILT' + this.layoutDoc.filterOp + ';');
-        if (mode == cardMode.STAR) this.move(1);
-        if (mode == cardMode.QUIZ) {
-            this.carouselItems?.map(doc => (doc.layout[this.sideField] = undefined));
+        switch (mode) {
+            case cardMode.STAR:
+                this.move(1);
+                break;
+            default:
+                this.setFilterMessage(undefined);
         }
-        this.carouselItems?.map(doc => (doc.layout[this.practiceField] = undefined));
+
+        // if (mode === practiceMode.QUIZ) {
+        //     this.carouselItems?.map(doc => (doc.layout[this.sideField] = undefined));
+        //     this.layoutDoc.practiceMode = mode;
+        // }
+        // if (mode === practiceMode.PRACTICE) this.layoutDoc.practiceMode = mode;
+        // if (mode === practiceMode.NORMAL) {
+        //     this.layoutDoc.practiceMode = mode;
+        //     if (this.layoutDoc.filterOp === cardMode.STAR) this.setMessage('No starred items. Unselect this filter to star cards.');
+        // }
+        // this.carouselItems?.map(doc => (doc.layout[this.practiceField] = undefined));
     };
+
     // specificMenu = (): void => {
     //     const cm = ContextMenu.Instance;
 
@@ -221,32 +305,43 @@ export class CollectionCarouselView extends CollectionSubView() {
                 <div key="star" className="carouselView-star" onClick={this.star}>
                     <FontAwesomeIcon icon="star" color={this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)].layout[this.starField] ? 'yellow' : 'gray'} size="1x" />
                 </div>
-                <div key="remove" className="carouselView-remove" onClick={e => this.setPracticeVal(e, practiceVal.MISSED)} style={{ visibility: this.layoutDoc.filterOp === cardMode.PRACTICE ? 'visible' : 'hidden' }}>
-                    <FontAwesomeIcon icon="xmark" color="red" size="1x" />
-                </div>
-                <div key="check" className="carouselView-check" onClick={e => this.setPracticeVal(e, practiceVal.CORRECT)} style={{ visibility: this.layoutDoc.filterOp === cardMode.PRACTICE ? 'visible' : 'hidden' }}>
-                    <FontAwesomeIcon icon="check" color="green" size="1x" />
-                </div>
+                {this.layoutDoc.practiceMode === practiceMode.PRACTICE ? (
+                    <div>
+                        <div key="remove" className="carouselView-remove" onClick={e => this.setPracticeVal(e, practiceVal.MISSED)}>
+                            <FontAwesomeIcon icon="xmark" color="red" size="1x" />
+                        </div>
+                        <div key="check" className="carouselView-check" onClick={e => this.setPracticeVal(e, practiceVal.CORRECT)}>
+                            <FontAwesomeIcon icon="check" color="green" size="1x" />
+                        </div>
+                    </div>
+                ) : null}
             </>
         );
     }
 
+    togglePracticeMode = (mode: practiceMode) => {
+        if (mode === this.layoutDoc.practiceMode) this.setPracticeMode(practiceMode.NORMAL);
+        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
+
     @computed get menu() {
         return (
             <div className="carouselView-menu">
                 <Tooltip title="Practice flashcards using GPT">
-                    <div key="back" className="carouselView-quiz" onClick={e => (this.layoutDoc.filterOp === cardMode.QUIZ ? this.setFilterMode(cardMode.ALL) : this.setFilterMode(cardMode.QUIZ))}>
-                        <FontAwesomeIcon icon="file-pen" color={this.layoutDoc.filterOp === cardMode.QUIZ ? 'white' : 'light gray'} size="1x" />
+                    <div key="back" className="carouselView-quiz" onClick={e => this.togglePracticeMode(practiceMode.QUIZ)}>
+                        <FontAwesomeIcon icon="file-pen" color={this.setColor(practiceMode.QUIZ, StrCast(this.layoutDoc.practiceMode))} size="1x" />
                     </div>
                 </Tooltip>
-                <Tooltip title={this.layoutDoc.filterOp === cardMode.PRACTICE ? 'Exit practice mode' : 'Practice flashcards manually'}>
-                    <div key="back" className="carouselView-practice" onClick={e => (this.layoutDoc.filterOp === cardMode.PRACTICE ? this.setFilterMode(cardMode.ALL) : this.setFilterMode(cardMode.PRACTICE))}>
-                        <FontAwesomeIcon icon="check" color={this.layoutDoc.filterOp === cardMode.PRACTICE ? 'white' : 'light gray'} size="1x" />
+                <Tooltip title={this.layoutDoc.practiceMode === practiceMode.PRACTICE ? 'Exit practice mode' : 'Practice flashcards manually'}>
+                    <div key="back" className="carouselView-practice" onClick={e => this.togglePracticeMode(practiceMode.PRACTICE)}>
+                        <FontAwesomeIcon icon="check" color={this.setColor(practiceMode.PRACTICE, StrCast(this.layoutDoc.practiceMode))} size="1x" />
                     </div>
                 </Tooltip>
                 <Tooltip title={this.layoutDoc.filterOp === cardMode.STAR ? 'Show all cards' : 'Show only starred cards'}>
-                    <div key="back" className="carouselView-starFilter" onClick={e => (!this.layoutDoc.filterOp ? this.setFilterMode(cardMode.ALL) : this.setFilterMode(cardMode.STAR))}>
-                        <FontAwesomeIcon icon="filter" color={this.layoutDoc.filterOp === cardMode.STAR || !this.layoutDoc.filterOp ? 'white' : 'light gray'} size="1x" />
+                    <div key="back" className="carouselView-starFilter" onClick={e => this.toggleFilterMode()}>
+                        <FontAwesomeIcon icon="filter" color={this.setColor(cardMode.STAR, StrCast(this.layoutDoc.filterOp))} size="1x" />
                     </div>
                 </Tooltip>
             </div>
@@ -258,22 +353,22 @@ export class CollectionCarouselView extends CollectionSubView() {
             <div
                 className="collectionCarouselView-outer"
                 ref={this.createDashEventsTarget}
-                onContextMenu={this.specificMenu}
+                // onContextMenu={this.specificMenu}
                 style={{
                     background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor),
                     color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color),
                 }}>
-                {this.layoutDoc.filterOp ? this.content : <p className="message">{this._message}</p>}
+                {!this._practiceMessage && !this._filterMessage ? (
+                    this.content
+                ) : (
+                    <p className="message">
+                        {this._filterMessage}
+                        {'\n'}
+                        {this._practiceMessage}
+                    </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',
-                    }}>
-                    Add flashcards
-                </p>
-                {/* Displays a message to the user that a flashcard was recently missed if they had previously gotten it wrong. */}
+                {!this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)] && this.layoutDoc.practiceMode === practiceMode.PRACTICE ? <p className="message">Add flashcards </p> : null}
                 <p
                     style={{
                         color: 'red',
@@ -284,7 +379,7 @@ export class CollectionCarouselView extends CollectionSubView() {
                         top: '10px',
                         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
+                            ? this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)].layout[this.practiceField] === practiceVal.MISSED && this.layoutDoc.practiceMode === practiceMode.PRACTICE && !this._practiceMessage
                                 ? 'block'
                                 : 'none'
                             : 'none',
@@ -292,7 +387,7 @@ export class CollectionCarouselView extends CollectionSubView() {
                     Recently missed!
                 </p>
                 {this.menu}
-                {this.Document._chromeHidden || !this.layoutDoc.filterOp ? null : this.buttons}
+                {this.Document._chromeHidden || (!this._filterMessage && !this._practiceMessage) ? this.buttons : null}
             </div>
         );
     }
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 084723d56..02ab76c2a 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -517,8 +517,8 @@ 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') {
+            // console.log('GERE' + DocCast(this.Document.embedContainer).filterOp);
+            if (DocCast(this.Document.embedContainer) && DocCast(this.Document.embedContainer).practiceMode === 'quiz') {
                 const text = StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text);
                 return (
                     <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}`} style={{ display: 'flex', flexDirection: 'column' }}>