Merge branch 'alyssa-starter' of https://github.com/brown-dash/Dash-Web into alyssa-starter

1 files changed, 82 insertions, 38 deletions

diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index 04a0320fc..108cdbdb4 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -1,11 +1,10 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@mui/material';
 import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { StopEvent, returnOne, returnZero } from '../../../ClientUtils';
-import { Doc, Opt } from '../../../fields/Doc';
+import { Doc, DocListCast, Opt } from '../../../fields/Doc';
 import { BoolCast, DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { Docs } from '../../documents/Documents';
@@ -16,6 +15,8 @@ import { FieldViewProps } from '../nodes/FieldView';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import './CollectionCarouselView.scss';
 import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView';
+import { TagItem } from '../TagsView';
+import { tickStep } from 'd3';
 
 enum cardMode {
     STAR = 'star',
@@ -34,7 +35,7 @@ export class CollectionCarouselView extends CollectionSubView() {
     private _dropDisposer?: DragManager.DragDropDisposer;
     get practiceField() { return this.fieldKey + "_practice"; } // prettier-ignore
     get sideField()     { return "_" + this.fieldKey + "_usePath"; } // prettier-ignore
-    get starField()     { return "star"; } // prettier-ignore
+    get starField()     { return "#star"; } // prettier-ignore
 
     _fadeTimer: NodeJS.Timeout | undefined;
 
@@ -63,7 +64,7 @@ export class CollectionCarouselView extends CollectionSubView() {
     @computed get practiceMessage() {
         const cardCount = this.carouselItems.length;
         if (this.practiceMode) {
-            if (!Doc.hasDocFilter(this.layoutDoc, 'star') && !cardCount) {
+            if (!Doc.hasDocFilter(this.layoutDoc, 'tags', Doc.FilterAny) && !cardCount) {
                 return 'Finished! Click here to view all flashcards.';
             }
         }
@@ -73,8 +74,8 @@ export class CollectionCarouselView extends CollectionSubView() {
     @computed get filterMessage() {
         const cardCount = this.carouselItems.length;
         if (!this.practiceMessage) {
-            if (Doc.hasDocFilter(this.layoutDoc, 'star') && !cardCount) {
-                return 'No starred items. Click here to view all flash cards.';
+            if (Doc.hasDocFilter(this.layoutDoc, 'tags', Doc.FilterAny) && !cardCount) {
+                return 'No tagged items. Click here to view all flash cards.';
             }
             if (this.practiceMode) {
                 if (!cardCount) return 'No flashcards to show! Click here to leave practice mode';
@@ -120,7 +121,10 @@ export class CollectionCarouselView extends CollectionSubView() {
     toggleStar = (e: React.MouseEvent) => {
         e.stopPropagation();
         const curDoc = this.carouselItems[this.carouselIndex];
-        curDoc && (curDoc[this.starField] = curDoc[this.starField] ? undefined : true);
+        if (curDoc) {
+            if (TagItem.docHasTag(curDoc, this.starField)) TagItem.removeTagFromDoc(curDoc, this.starField);
+            else TagItem.addTagToDoc(curDoc, this.starField);
+        }
     };
 
     /*
@@ -165,6 +169,8 @@ export class CollectionCarouselView extends CollectionSubView() {
                 ? false
                 : undefined;
 
+    childScreenToLocalXf = () => this._props.ScreenToLocalTransform().scale(this._props.NativeDimScaling?.() || 1);
+
     renderDoc = (doc: Doc, showCaptions: boolean, overlayFunc?: (r: DocumentView | null) => void) => {
         return (
             <DocumentView
@@ -174,6 +180,8 @@ export class CollectionCarouselView extends CollectionSubView() {
                 NativeWidth={returnZero}
                 NativeHeight={returnZero}
                 fitWidth={undefined}
+                showTags={true}
+                hideFilterStatus={true}
                 containerViewPath={this.childContainerViewPath}
                 setContentViewBox={undefined}
                 onDoubleClickScript={this.onContentDoubleClick}
@@ -261,11 +269,11 @@ export class CollectionCarouselView extends CollectionSubView() {
         return (
             <>
                 <div>
-                    <Tooltip title="star">
-                        <div key="star" className="carouselView-star" onClick={this.toggleStar}>
-                            <FontAwesomeIcon icon="star" color={this.carouselItems[this.carouselIndex]?.[this.starField] ? 'yellow' : 'gray'} size="1x" />
+                    {/* <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>
                 <div key="back" className="carouselView-back" onClick={this.goback}>
                     <FontAwesomeIcon icon="chevron-left" size="2x" />
@@ -292,18 +300,48 @@ export class CollectionCarouselView extends CollectionSubView() {
     }
 
     togglePracticeMode = (mode: practiceMode) => this.setPracticeMode(mode === this.practiceMode ? undefined : mode);
-    toggleFilterMode = () => Doc.setDocFilter(this.Document, 'star', true, 'match', true);
-    setColor = (mode: practiceMode | cardMode, which: string) => { return which === mode ? 'white' : 'light gray'}; //prettier-ignore
+    toggleFilterMode = () => Doc.setDocFilter(this.Document, 'tags', this.starField, 'check', true);
+    setColor = (mode: practiceMode | cardMode, which: string) => (which === mode ? 'white' : 'light gray');
 
+    @computed get filterDoc() {
+        return DocListCast(Doc.MyContextMenuBtns.data).find(doc => doc.title === 'Filter');
+    }
+    filterHeight = () => NumCast(this.filterDoc?.height);
+    filterWidth = () => (!this.filterDoc ? 1 : (this.filterHeight() * NumCast(this.filterDoc._width)) / NumCast(this.filterDoc._height));
     @computed get menu() {
         const curDoc = this.carouselItems?.[this.carouselIndex];
         return (
             <div className="carouselView-menu">
-                <Tooltip title={Doc.hasDocFilter(this.Document, 'star') ? 'Show all cards' : 'Show only starred cards'}>
-                    <div key="back" className="carouselView-starFilter" onClick={e => this.toggleFilterMode()}>
-                        <FontAwesomeIcon icon="filter" color={Doc.hasDocFilter(this.Document, 'star') ? 'white' : 'lightgray'} size="1x" />
+                {!this.filterDoc ? null : (
+                    <div style={{ height: this.filterHeight(), width: this.filterHeight() }}>
+                        <DocumentView
+                            {...this._props}
+                            Document={this.filterDoc}
+                            TemplateDataDocument={undefined}
+                            LayoutTemplate={this._props.childLayoutTemplate}
+                            LayoutTemplateString={this._props.childLayoutString}
+                            renderDepth={this._props.renderDepth + 1}
+                            NativeWidth={returnZero}
+                            NativeHeight={returnZero}
+                            fitWidth={undefined}
+                            showTags={false}
+                            hideFilterStatus={true}
+                            containerViewPath={this.childContainerViewPath}
+                            setContentViewBox={undefined}
+                            onDoubleClickScript={this.onContentDoubleClick}
+                            onClickScript={this.onContentClick}
+                            isDocumentActive={this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this._props.isContentActive}
+                            isContentActive={this.isChildContentActive}
+                            hideCaptions={true}
+                            childFilters={this.childDocFilters}
+                            hideDecorations={BoolCast(this.layoutDoc.layout_hideDecorations)}
+                            addDocument={this._props.addDocument}
+                            ScreenToLocalTransform={this.contentScreentToLocalXf}
+                            PanelWidth={this.filterWidth}
+                            PanelHeight={this.filterHeight}
+                        />
                     </div>
-                </Tooltip>
+                )}
                 <div className="carouselView-practiceModes" style={{ display: BoolCast(curDoc?._layout_isFlashcard) ? undefined : 'none' }}>
                     <Tooltip title="Practice flashcards using GPT">
                         <div key="back" className="carouselView-quiz" onClick={e => this.togglePracticeMode(practiceMode.QUIZ)}>
@@ -322,27 +360,33 @@ export class CollectionCarouselView extends CollectionSubView() {
 
     render() {
         return (
-            <div
-                className="collectionCarouselView-outer"
-                ref={this.createDashEventsTarget}
-                style={{
-                    background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string,
-                    color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string,
-                }}>
-                {!this.practiceMessage && !this.filterMessage ? (
-                    this.content
-                ) : (
-                    <p
-                        className="message"
-                        onClick={e => {
-                            if (this.filterMessage || this.practiceMessage) {
-                                this.setPracticeMode(undefined);
-                                Doc.setDocFilter(this.layoutDoc, 'star', undefined, 'remove');
-                            }
-                        }}>
-                        {this.filterMessage || this.practiceMessage}
-                    </p>
-                )}
+            <div>
+                <div
+                    className="collectionCarouselView-outer"
+                    ref={this.createDashEventsTarget}
+                    style={{
+                        background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string,
+                        color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string,
+                        width: `calc(100% - ${NumCast(this.layoutDoc._xMargin)}px)`,
+                        height: `calc(100% - ${NumCast(this.layoutDoc._yMargin)}px)`,
+                        left: NumCast(this.layoutDoc._xMargin),
+                        top: NumCast(this.layoutDoc._yMargin),
+                    }}>
+                    {!this.practiceMessage && !this.filterMessage ? (
+                        this.content
+                    ) : (
+                        <p
+                            className="message"
+                            onClick={e => {
+                                if (this.filterMessage || this.practiceMessage) {
+                                    this.setPracticeMode(undefined);
+                                    Doc.setDocFilter(this.layoutDoc, 'tags', Doc.FilterAny, 'remove');
+                                }
+                            }}>
+                            {this.filterMessage || this.practiceMessage}
+                        </p>
+                    )}
+                </div>
                 {!this.Document._chromeHidden ? this.menu : null}
                 {!this.Document._chromeHidden ? this.buttons : null}
             </div>