From ad4d67f2ace0b658917ff63e2ff83f95022cc2d4 Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Mon, 17 Jun 2024 12:02:14 -0400 Subject: things are getting silly --- src/client/views/collections/CollectionCardDeckView.tsx | 3 +++ 1 file changed, 3 insertions(+) (limited to 'src/client') diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index 7ea345e10..bf814cb31 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -46,7 +46,9 @@ export class CollectionCardView extends CollectionSubView() { @observable _isLoading = false; @observable _hoveredNodeIndex = -1; @observable _docRefs = new ObservableMap(); + _draggerRef = React.createRef(); @observable _maxRowCount = 10; + @observable docsBeingDragged: number[] = []; static getButtonGroup(groupFieldKey: 'chat' | 'star' | 'idea' | 'like', doc: Doc): number | undefined { return Cast(doc[groupFieldKey], 'number', null); @@ -508,6 +510,7 @@ export class CollectionCardView extends CollectionSubView() { const amCards = this.overflowAmCardsCalc(realIndex); const isSelected = DocumentView.SelectedDocs().includes(doc); + const childScreenToLocal = () => { this._forceChildXf; const dref = this._docRefs.get(doc); -- cgit v1.2.3-70-g09d2 From d6ad264a940b4d3db87c10d9a872968d83d63b10 Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Mon, 17 Jun 2024 12:33:51 -0400 Subject: sigh --- .../views/collections/CollectionCardDeckView.tsx | 33 +++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) (limited to 'src/client') diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index bf814cb31..7362a65ae 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -49,6 +49,8 @@ export class CollectionCardView extends CollectionSubView() { _draggerRef = React.createRef(); @observable _maxRowCount = 10; @observable docsBeingDragged: number[] = []; + @observable draggedIndex: number = -1; + @observable overIndex: number = -1; static getButtonGroup(groupFieldKey: 'chat' | 'star' | 'idea' | 'like', doc: Doc): number | undefined { return Cast(doc[groupFieldKey], 'number', null); @@ -491,6 +493,35 @@ export class CollectionCardView extends CollectionSubView() { return ; } }; + + @action +onDragStart = (index: number) => { + this.draggedIndex = index; +}; + +@action +onDragOver = (index: number) => { + if (this.draggedIndex !== index) { + this.overIndex = index; + } +}; + +@action +onDrop = () => { + if (this.draggedIndex !== -1 && this.overIndex !== -1) { + const draggedDoc = this.sortedDocs[this.draggedIndex]; + this.sortedDocs.splice(this.draggedIndex, 1); + this.sortedDocs.splice(this.overIndex, 0, draggedDoc); + this.draggedIndex = -1; + this.overIndex = -1; + } +}; + +@action +onDragEnd = () => { + this.draggedIndex = -1; + this.overIndex = -1; +}; /** * Actually renders all the cards */ @@ -523,7 +554,7 @@ export class CollectionCardView extends CollectionSubView() { return (
{ // this turns off documentDecorations during a transition, then turns them back on afterward. SnappingManager.SetIsResizing(this.Document[Id]); -- cgit v1.2.3-70-g09d2 From 6a3eaaea335440371698bec409952d4c82d7d628 Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Mon, 17 Jun 2024 13:05:48 -0400 Subject: yay concise code --- .../views/collections/CollectionCardDeckView.tsx | 114 +++++++++++---------- 1 file changed, 59 insertions(+), 55 deletions(-) (limited to 'src/client') diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index 7362a65ae..f50ca6349 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -451,77 +451,81 @@ export class CollectionCardView extends CollectionSubView() { GPTPopup.Instance.onSortComplete = (sortResult: string) => this.processGptOutput(sortResult); }; - /** + /** * Renders the buttons to customize sorting depending on which group the card belongs to and the amount of total groups - * @param childPairIndex * @param doc + * @param cardSort * @returns */ - renderButtons = (doc: Doc, cardSort: cardSortings) => { - if (cardSort !== cardSortings.Custom) return ''; - const amButtons = Math.max(4, this.childDocs?.reduce((set, d) => this.cardSort_customField && set.add(NumCast(d[this.cardSort_customField])), new Set()).size ?? 0); - const activeButtonIndex = CollectionCardView.getButtonGroup(this.cardSort_customField, doc); - const totalWidth = amButtons * 72 + amButtons * 2 * 5 + 6; - return ( -
- {numberRange(amButtons).map(i => ( - // eslint-disable-next-line jsx-a11y/control-has-associated-label - Click to add/ remove this card from group {i +1}
}> + renderButtons = (doc: Doc, cardSort: cardSortings): JSX.Element | null => { + if (cardSort !== cardSortings.Custom) return null; + + const amButtons = Math.max(4, this.childDocs?.reduce((set, d) => { + if (this.cardSort_customField) { + set.add(NumCast(d[this.cardSort_customField])); + } + return set; + }, new Set()).size ?? 0); + + const activeButtonIndex = CollectionCardView.getButtonGroup(this.cardSort_customField, doc); + const totalWidth = amButtons * 72 + amButtons * 2 * 5 + 6; + + return ( +
+ {numberRange(amButtons).map(i => ( + Click to add/remove this card from group {i + 1}
}> + + + ))} +
+ ); +}; - + getButtonIcon = (isActive: boolean): JSX.Element => { + const iconMap: { [key: string]: any } = { + like: 'heart', + chat: 'robot', + idea: 'cloud' + }; - + const icon = iconMap[this.cardSort_customField ?? ''] || 'star'; + const color = isActive ? '#4476f7' : '#323232'; - ))} - - ); + return ; }; - getButtonIcons = (isActive: boolean) => { - switch (this.cardSort_customField) { - case 'like': - return ; - case 'chat': - return ; - case 'idea': - return ; - default: - return ; - } + + + @action + onDragStart = (index: number) => { + this.draggedIndex = index; }; @action -onDragStart = (index: number) => { - this.draggedIndex = index; -}; + onDragOver = (index: number) => { + if (this.draggedIndex !== index) { + this.overIndex = index; + } + }; -@action -onDragOver = (index: number) => { - if (this.draggedIndex !== index) { - this.overIndex = index; - } -}; + @action + onDrop = () => { + if (this.draggedIndex !== -1 && this.overIndex !== -1) { + const draggedDoc = this.sortedDocs[this.draggedIndex]; + this.sortedDocs.splice(this.draggedIndex, 1); + this.sortedDocs.splice(this.overIndex, 0, draggedDoc); + this.draggedIndex = -1; + this.overIndex = -1; + } + }; -@action -onDrop = () => { - if (this.draggedIndex !== -1 && this.overIndex !== -1) { - const draggedDoc = this.sortedDocs[this.draggedIndex]; - this.sortedDocs.splice(this.draggedIndex, 1); - this.sortedDocs.splice(this.overIndex, 0, draggedDoc); + @action + onDragEnd = () => { this.draggedIndex = -1; this.overIndex = -1; - } -}; - -@action -onDragEnd = () => { - this.draggedIndex = -1; - this.overIndex = -1; -}; + }; /** * Actually renders all the cards */ -- cgit v1.2.3-70-g09d2