starting dragging ??????

1 files changed, 66 insertions, 13 deletions

diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index d68fb57f8..7ea345e10 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -20,6 +20,13 @@ import { GPTPopup, GPTPopupMode } from '../pdf/GPTPopup/GPTPopup';
 import './CollectionCardDeckView.scss';
 import { CollectionSubView } from './CollectionSubView';
 import { FieldsDropdown } from '../FieldsDropdown';
+import { Button, IconButton } from 'browndash-components';
+import { faStar } from '@fortawesome/free-solid-svg-icons';
+import { FaStar, FaHeart, FaRobot, FaCloud } from 'react-icons/fa';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { SettingsManager } from '../../util/SettingsManager';
+import { Tooltip } from '@mui/material';
+
 
 enum cardSortings {
     Time = 'time',
@@ -72,8 +79,24 @@ export class CollectionCardView extends CollectionSubView() {
     constructor(props: any) {
         super(props);
         makeObservable(this);
+        this.setRegenerateCallback();
+
+    }
+
+    setRegenerateCallback() {
+        GPTPopup.Instance.setRegenerateCallback(this.childPairStringListAndUpdateSortDesc);
     }
 
+    @action
+    childPairStringListAndUpdateSortDesc = async () => {
+        const sortDesc = await this.childPairStringList(); // Await the promise to get the string result
+        GPTPopup.Instance.setSortDesc(sortDesc.join());
+        GPTPopup.Instance.onSortComplete = (sortResult: string) => this.processGptOutput(sortResult);
+
+    };
+
+
+
     componentDidMount(): void {
         this._disposers.sort = reaction(
             () => ({ cardSort: this.cardSort, field: this.cardSort_customField }),
@@ -331,7 +354,8 @@ export class CollectionCardView extends CollectionSubView() {
      */
     calculateTranslateY = (isHovered: boolean, isSelected: boolean, realIndex: number, amCards: number, calcRowIndex: number) => {
         if (isSelected || amCards == 1) return 50 * this.fitContentScale;
-        const trans = isHovered ? this.translateHover(realIndex) : 0;
+        // const trans = isHovered ? this.translateHover(realIndex) : 0;
+        const trans = 0
         return trans + this.translateY(amCards, calcRowIndex, realIndex);
     };
 
@@ -433,26 +457,50 @@ export class CollectionCardView extends CollectionSubView() {
         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<number>()).size ?? 0);
         const activeButtonIndex = CollectionCardView.getButtonGroup(this.cardSort_customField, doc);
-        const totalWidth = amButtons * 35 + amButtons * 2 * 5 + 6;
+        const totalWidth = amButtons * 72 + amButtons * 2 * 5 + 6;
         return (
-            <div className="card-button-container" style={{ width: `${totalWidth}px` }}>
+            <div className="card-button-container" style={{ width: `${totalWidth}px`, fontSize: '50px' }} >
                 {numberRange(amButtons).map(i => (
                     // eslint-disable-next-line jsx-a11y/control-has-associated-label
-                    <button
-                        key={i}
-                        type="button"
-                        style={{ backgroundColor: activeButtonIndex === i ? '#4476f7' : '#323232' }} //
-                        onClick={() => this.toggleButton(i, doc)}
-                    />
+                    <Tooltip title={<div key = {i} className="dash-tooltip">Click to add/ remove this card from group {i +1}</div>}>
+
+                        <button key={i} type="button" 
+                        // style={{ backgroundColor: activeButtonIndex === i ? '#4476f7' : '#323232' }} 
+                        onClick={() => this.toggleButton(i, doc)}>
+                            {this.getButtonIcons(activeButtonIndex === i)}
+                        </button>
+
+                    </Tooltip>
+
                 ))}
             </div>
         );
     };
+
+    getButtonIcons = (isActive: boolean) => {
+        switch (this.cardSort_customField) {
+            case 'like':
+                return <FontAwesomeIcon icon = 'heart' size= 'lg' style = {{color: isActive ? '#4476f7' : '#323232'}}/>;
+            case 'chat':
+                return <FontAwesomeIcon icon = 'robot' size= 'lg' style = {{color: isActive ? '#4476f7' : '#323232'}}/>;
+            case 'idea':
+                return <FontAwesomeIcon icon = 'cloud' size= 'lg' style = {{color: isActive ? '#4476f7' : '#323232'}}/>;
+            default:
+                return <FontAwesomeIcon icon = 'star' size= 'lg' style = {{color: isActive ? '#4476f7' : '#323232'}}/>;
+        }
+    };
     /**
      * Actually renders all the cards
      */
     renderCards = () => {
         const anySelected = this.childDocs.some(doc => DocumentView.SelectedDocs().includes(doc));
+        const isEmpty = this.childDocsWithoutLinks.length === 0;
+
+        if (isEmpty) {
+            return <span className = 'no-card-span' style= {{width: `100%`}}> 
+            Sorry ! There are no cards in this group</span>
+        }
+
         // Map sorted documents to their rendered components
         return this.sortedDocs.map((doc, index) => {
             const realIndex = this.sortedDocs.filter(sortDoc => !DocumentView.SelectedDocs().includes(sortDoc)).indexOf(doc);
@@ -486,23 +534,27 @@ export class CollectionCardView extends CollectionSubView() {
                     }}
                     style={{
                         width: this.panelWidth(),
-                        height: 'max-content', // this.panelHeight(childPair.layout)(),
+                        height: 'max-content',
                         transform: `translateY(${this.calculateTranslateY(this._hoveredNodeIndex === index, isSelected, realIndex, amCards, calcRowIndex)}px)
                                     translateX(${isSelected ? this.translateSelected(calcRowIndex) : this.translateOverflowX(realIndex, amCards)}px)
                                     rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg)
-                                    scale(${isSelected ? 1.25 : 1})`,
-                    }}
+                                    scale(${isSelected ? 1.25 : this._hoveredNodeIndex === index ? 1.05 : 1})`,
+                                }}
                     onMouseEnter={() => this.setHoveredNodeIndex(index)}>
                     {this.displayDoc(doc, childScreenToLocal)}
                     {this.renderButtons(doc, this.cardSort)}
                 </div>
             );
-        });
+        }
+        
+        
+        );
     };
 
 
 
     render() {
+    
         return (
             <div
                 className="collectionCardView-outer"
@@ -533,4 +585,5 @@ export class CollectionCardView extends CollectionSubView() {
             </div>
         );
     }
+    
 }