aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/collections
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/collections')
-rw-r--r--src/client/views/collections/CollectionCarouselView.tsx79
-rw-r--r--src/client/views/collections/CollectionView.tsx15
2 files changed, 78 insertions, 16 deletions
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index 7f5176123..d45b0822b 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -33,29 +33,53 @@ export class CollectionCarouselView extends CollectionSubView() {
}
};
+ /**
+ * Goes to the next flashcard in the stack and filters
+ * based on the the currently selected option.
+ */
advance = (e: React.MouseEvent) => {
e.stopPropagation();
this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) + 1) % this.childLayoutPairs.length;
var startInd = this.layoutDoc._carousel_index;
// if the star filter is selected
- if (this.layoutDoc[`_${this._props.fieldKey}_filterOp`] == 'star') {
- // go to a new index that is starred, skip the ones that aren't
+ if (this.layoutDoc[`filterOp`] == 'star') {
+ // go to a flashcard that is starred, skip the ones that aren't
while (!this.childLayoutPairs?.[NumCast(startInd)].layout[`${this.fieldKey}_star`] && (startInd + 1) % this.childLayoutPairs.length != this.layoutDoc._carousel_index) {
startInd = (startInd + 1) % this.childLayoutPairs.length;
}
this.layoutDoc._carousel_index = startInd;
+ // if there aren't any starred, show all cards
+ if (!this.childLayoutPairs?.[NumCast(startInd)].layout[`${this.fieldKey}_star`]) {
+ this.layoutDoc[`filterOp`] = 'all';
+ }
}
// if the practice filter is selected
- if (this.layoutDoc[`_${this._props.fieldKey}_filterOp`] == 'practice') {
+ if (this.layoutDoc[`filterOp`] == 'practice') {
// go to a new index that is missed, skip the ones that are correct
while (this.childLayoutPairs?.[NumCast(startInd)].layout[`${this.fieldKey}_missed`] == 'correct' && (startInd + 1) % this.childLayoutPairs.length != this.layoutDoc._carousel_index) {
startInd = (startInd + 1) % this.childLayoutPairs.length;
}
this.layoutDoc._carousel_index = startInd;
+
+ // if the user has gone through all of the cards and gotten them all correct, show all cards and exit practice mode
+ if (this.childLayoutPairs?.[NumCast(startInd)].layout[`${this.fieldKey}_missed`] == 'correct') {
+ this.layoutDoc[`filterOp`] = 'all';
+
+ // set all the cards to missed
+ for (var i = 0; i < this.childLayoutPairs.length; i++) {
+ const curDoc = this.childLayoutPairs?.[NumCast(i)];
+ curDoc.layout[`${this.fieldKey}_missed`] = undefined;
+ }
+ }
}
};
+
+ /**
+ * Goes to the previous flashcard in the stack and filters
+ * based on the the currently selected option.
+ */
goback = (e: React.MouseEvent) => {
e.stopPropagation();
this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length;
@@ -63,38 +87,58 @@ export class CollectionCarouselView extends CollectionSubView() {
var startInd = this.layoutDoc._carousel_index;
// if the star filter is selected
- if (this.layoutDoc[`_${this._props.fieldKey}_filterOp`] == 'star') {
+ if (this.layoutDoc[`filterOp`] == 'star') {
// go to a new index that is starred, skip the ones that aren't
while (!this.childLayoutPairs?.[NumCast(startInd)].layout[`${this.fieldKey}_star`] && (startInd - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length != this.layoutDoc._carousel_index) {
startInd = (startInd - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length;
}
this.layoutDoc._carousel_index = startInd;
+ // if there aren't any starred, show all cards
+ if (!this.childLayoutPairs?.[NumCast(startInd)].layout[`${this.fieldKey}_star`]) {
+ this.layoutDoc[`filterOp`] = 'all';
+ }
}
// if the practice filter is selected
- if (this.layoutDoc[`_${this._props.fieldKey}_filterOp`] == 'practice') {
+ if (this.layoutDoc[`filterOp`] == 'practice') {
// go to a new index that is missed, skip the ones that are correct
while (this.childLayoutPairs?.[NumCast(startInd)].layout[`${this.fieldKey}_missed`] == 'correct' && (startInd - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length != this.layoutDoc._carousel_index) {
startInd = (startInd - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length;
}
+
this.layoutDoc._carousel_index = startInd;
+
+ // See all flashcards when finish going through practice mode and set all of the flashcards back to
+ if (this.childLayoutPairs?.[NumCast(startInd)].layout[`${this.fieldKey}_missed`] == 'correct') {
+ this.layoutDoc[`filterOp`] = 'all';
+
+ for (var i = 0; i < this.childLayoutPairs.length; i++) {
+ const curDoc = this.childLayoutPairs?.[NumCast(i)];
+ curDoc.layout[`${this.fieldKey}_missed`] = undefined;
+ }
+ }
}
};
+ /*
+ * Stars the document when the star button is pressed.
+ */
star = (e: React.MouseEvent) => {
e.stopPropagation();
- // stars the document when the button is pressed
const curDoc = this.childLayoutPairs?.[NumCast(this.layoutDoc._carousel_index)];
+ if (!curDoc) return;
if (curDoc.layout[`${this.fieldKey}_star`] == undefined) curDoc.layout[`${this.fieldKey}_star`] = true;
else curDoc.layout[`${this.fieldKey}_star`] = !curDoc.layout[`${this.fieldKey}_star`];
};
+ /*
+ * Sets a flashcard to either missed or correct depending on if they got the question right in practice mode.
+ */
missed = (e: React.MouseEvent, val: string) => {
e.stopPropagation();
const curDoc = this.childLayoutPairs?.[NumCast(this.layoutDoc._carousel_index)];
curDoc.layout[`${this.fieldKey}_missed`] = val;
- this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) + 1) % this.childLayoutPairs.length;
- this.advance;
+ this.advance(e);
};
captionStyleProvider = (doc: Doc | undefined, captionProps: Opt<FieldViewProps>, property: string): any => {
@@ -154,6 +198,7 @@ export class CollectionCarouselView extends CollectionSubView() {
);
}
@computed get buttons() {
+ if (!this.childLayoutPairs?.[NumCast(this.layoutDoc._carousel_index)]) return;
return (
<>
<div key="back" className="carouselView-back" onClick={this.goback}>
@@ -165,10 +210,10 @@ export class CollectionCarouselView extends CollectionSubView() {
<div key="star" className="carouselView-star" onClick={this.star}>
<FontAwesomeIcon icon={'star'} color={this.childLayoutPairs?.[NumCast(this.layoutDoc._carousel_index)].layout[`${this.fieldKey}_star`] ? 'yellow' : 'gray'} size={'1x'} />
</div>
- <div key="remove" className="carouselView-remove" onClick={e => this.missed(e, 'missed')} style={{ visibility: this.layoutDoc[`_${this._props.fieldKey}_filterOp`] == 'practice' ? 'visible' : 'hidden' }}>
+ <div key="remove" className="carouselView-remove" onClick={e => this.missed(e, 'missed')} style={{ visibility: this.layoutDoc[`filterOp`] == 'practice' ? 'visible' : 'hidden' }}>
<FontAwesomeIcon icon={'xmark'} color={'red'} size={'1x'} />
</div>
- <div key="check" className="carouselView-check" onClick={e => this.missed(e, 'correct')} style={{ visibility: this.layoutDoc[`_${this._props.fieldKey}_filterOp`] == 'practice' ? 'visible' : 'hidden' }}>
+ <div key="check" className="carouselView-check" onClick={e => this.missed(e, 'correct')} style={{ visibility: this.layoutDoc[`filterOp`] == 'practice' ? 'visible' : 'hidden' }}>
<FontAwesomeIcon icon={'check'} color={'green'} size={'1x'} />
</div>
</>
@@ -185,6 +230,18 @@ export class CollectionCarouselView extends CollectionSubView() {
color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color),
}}>
{this.content}
+ {/* Displays a message to the user to add more flashcards if they are in practice mode and no flashcards are there. */}
+ <p
+ style={{
+ display: !this.childLayoutPairs?.[NumCast(this.layoutDoc._carousel_index)] && this.layoutDoc[`filterOp`] == 'practice' ? 'flex' : 'none',
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: '100%',
+ zIndex: '-1',
+ }}>
+ Add flashcards!
+ </p>
+ {/* Displays a message to the user that a flashcard was recently missed if they had previously gotten it wrong. */}
<p
style={{
color: 'red',
@@ -192,7 +249,7 @@ export class CollectionCarouselView extends CollectionSubView() {
position: 'relative',
left: '10px',
top: '10px',
- visibility: this.childLayoutPairs?.[NumCast(this.layoutDoc._carousel_index)].layout[`${this.fieldKey}_missed`] == 'missed' ? 'visible' : 'hidden',
+ display: this.childLayoutPairs?.[NumCast(this.layoutDoc._carousel_index)] ? (this.childLayoutPairs?.[NumCast(this.layoutDoc._carousel_index)].layout[`${this.fieldKey}_missed`] == 'missed' ? 'block' : 'none') : 'none',
}}>
Recently missed!
</p>
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 168176edf..2f0f2a773 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -80,6 +80,7 @@ export class CollectionView extends ViewBoxAnnotatableComponent<CollectionViewPr
super(props);
makeObservable(this);
this._annotationKeySuffix = returnEmptyString;
+ this.layoutDoc[`filterOp`] = 'all';
}
componentDidMount() {
@@ -176,14 +177,18 @@ export class CollectionView extends ViewBoxAnnotatableComponent<CollectionViewPr
return newRendition;
});
+ // creates menu option for flashcard filters
const revealOptions = cm.findByDescription('Filter Flashcards');
const revealItems: ContextMenuProps[] = revealOptions && 'subitems' in revealOptions ? revealOptions.subitems : [];
- revealItems.push({ description: 'All', event: () => (this.layoutDoc[`_${this._props.fieldKey}_filterOp`] = 'all'), icon: 'eye-slash' });
- revealItems.push({ description: 'Star', event: () => (this.layoutDoc[`_${this._props.fieldKey}_filterOp`] = 'star'), icon: 'hand-point-up' });
- revealItems.push({ description: 'Practice Mode', event: () => (this.layoutDoc[`_${this._props.fieldKey}_filterOp`] = 'practice'), icon: 'rotate' });
+ revealItems.push({ description: 'All', event: () => (this.layoutDoc[`filterOp`] = 'all'), icon: 'layer-group' });
+ revealItems.push({ description: 'Star', event: () => (this.layoutDoc[`filterOp`] = 'star'), icon: 'star' });
+ revealItems.push({ description: 'Practice Mode', event: () => (this.layoutDoc[`filterOp`] = 'practice'), icon: 'check' });
+ revealItems.push({ description: 'Quiz Cards', event: () => (this.layoutDoc[`filterOp`] = 'quiz'), icon: 'pencil' });
- //revealItems.push({ description: 'Bring to Front', event: () => SelectionManager.Views.forEach(dv => dv._props.bringToFront?.(dv.Document, false)), icon: 'arrow-up' });
- !revealOptions && cm.addItem({ description: 'Filter Flashcards', addDivider: false, noexpand: true, subitems: revealItems, icon: 'layer-group' });
+ // only show the filter options if it is a collection of type Carousel view
+ if (this.Document?._type_collection === CollectionViewType.Carousel) {
+ !revealOptions && cm.addItem({ description: 'Filter Flashcards', addDivider: false, noexpand: true, subitems: revealItems, icon: 'layer-group' });
+ }
const options = cm.findByDescription('Options...');
const optionItems = options && 'subitems' in options ? options.subitems : [];
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-09 18:37:18 +0000