sorting works but nothing else does as is life

1 files changed, 128 insertions, 149 deletions

diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index 98b4e8ec9..d0a796218 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -12,6 +12,8 @@ import { DocumentView } from '../nodes/DocumentView';
 import './CollectionCardDeckView.scss';
 import { CollectionSubView } from './CollectionSubView';
 import { Transform } from '../../util/Transform';
+// import Card from 'react-bootstrap/Card';
+
 
 @observer
 export class CollectionCardView extends CollectionSubView() {
@@ -53,6 +55,8 @@ export class CollectionCardView extends CollectionSubView() {
     inactiveDocs = () => {
         const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]);
 
+
+
         return docs.filter(d => !SelectionManager.IsSelected(d));
     };
 
@@ -91,19 +95,18 @@ export class CollectionCardView extends CollectionSubView() {
     isChildContentActive = () => (this.isContentActive() ? true : false);
 
     rotate = (amCards: number, index: number) => {
+        console.log(amCards + "wtf")
         const possRotate = -30 + index * (30 / ((amCards - (amCards % 2)) / 2));
-        const stepMag = Math.abs(-30 + ((amCards/2)- 1) * (30 / ((amCards - (amCards % 2)) / 2)));
+        const stepMag = Math.abs(-30 + (amCards / 2 - 1) * (30 / ((amCards - (amCards % 2)) / 2)));
 
         // console.log(possRotate + "poss")
 
         if (amCards % 2 == 0 && possRotate == 0) {
             // console.log('whaddup');
-            return possRotate + Math.abs(-30 + (index - 1) * (30 / ((amCards) / 2)));
-        }
-
-        else if (amCards %2 == 0 && index > (amCards+1)/2){
+            return possRotate + Math.abs(-30 + (index - 1) * (30 / (amCards / 2)));
+        } else if (amCards % 2 == 0 && index > (amCards + 1) / 2) {
             // console.log("sup" + stepMag);
-            
+
             return possRotate + stepMag;
         }
 
@@ -111,36 +114,30 @@ export class CollectionCardView extends CollectionSubView() {
     };
 
     translateY = (amCards: number, index: number) => {
-        const evenOdd =amCards% 2 
-        const apex = (amCards-evenOdd)/2
-        const stepMag = (200 / ((amCards - evenOdd)/2))
-         + Math.abs(((apex-index) *25))
-
-        console.log("steo" + stepMag)
-
-        if (evenOdd == 1 || index < apex -1){
-            console.log('hi' + index)
-            return Math.abs(stepMag * (apex - index))
-        }
-
-        else{
-            if (index == apex || index == apex -1){
-                return 0
+        const evenOdd = amCards % 2;
+        const apex = (amCards - evenOdd) / 2;
+        const stepMag = 200 / ((amCards - evenOdd) / 2) + Math.abs((apex - index) * 25);
+
+        console.log('steo' + stepMag);
+
+        if (evenOdd == 1 || index < apex - 1) {
+            console.log('hi' + index);
+            return Math.abs(stepMag * (apex - index));
+        } else {
+            if (index == apex || index == apex - 1) {
+                return 0;
             }
 
-            return Math.abs(stepMag * (apex - index -1))
-
+            return Math.abs(stepMag * (apex - index - 1));
         }
-
     };
 
     translateOverFlowY = (amCards: number, index: number) => {
-        if (amCards>8 && index > amCards/2){
-            return 100
-
+        if (amCards > 8 && index > amCards / 2) {
+            return 100;
         }
-        return 0
-    }
+        return 0;
+    };
 
     translateSelected = (index: number): number => {
         if (this.isSelected(index)) {
@@ -161,99 +158,100 @@ export class CollectionCardView extends CollectionSubView() {
         return 0;
     };
 
-    @computed get sortedDocs() {
-        const field = StrCast(this.layoutDoc.sortField);
+    @computed get sortedDocsType() {
+        // This field is set to 'type' to sort documents by their type
+        // const typeField = 'type';
+
+        // Whether to sort in descending order
         const desc = BoolCast(this.layoutDoc.sortDesc);
-        const docs = !field
-            ? this.childDocs
-            : [...this.childDocs].sort((docA, docB) => {
-                  const aStr = Field.toString(docA[field] as Field);
-                  const bStr = Field.toString(docB[field] as Field);
-                  var out = 0;
-                  if (aStr < bStr) out = -1;
-                  if (aStr > bStr) out = 1;
-                  if (desc) out *= -1;
-                  return out;
-              });
+
+        // Copy and sort documents by type
+        const docs = this.childLayoutPairs.sort((docA, docB) => {
+            const typeA = docA.layout.type ?? ''; // If docA.type is undefined, use an empty string
+            const typeB = docB.layout.type ?? ''; // If docB.type is undefined, use an empty string
+
+            // Perform a basic string comparison if types are strings
+            let out = 0;
+            if (typeA < typeB) out = -1;
+            if (typeA > typeB) out = 1;
+            if (desc) out *= -1; // Reverse the sort order if descending is true
+            return out;
+        });
+
         return { docs };
     }
 
     @observable docRefs = new ObservableMap<Doc, DocumentView>();
 
-    // @computed get content() {
-    //     // const currentIndex = NumCast(this.layoutDoc._carousel_index);
-    //     const amCards = this.inactiveDocs().length;
-    //     // const myInactives =
-    //     const displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => {
-    //         return (
-    //             <DocumentView
-    //                 {...this._props}
-    //                 ref={action((r: DocumentView) => r?.ContentDiv && this.docRefs.set(childPair.layout, r))}
-    //                 Document={childPair.layout}
-    //                 TemplateDataDocument={childPair.data}
-    //                 // onClickScript={this.toggleIcon}
-    //                 //suppressSetHeight={true}
-    //                 NativeWidth={returnZero}
-    //                 NativeHeight={returnZero}
-    //                 layout_fitWidth={returnFalse}
-    //                 onDoubleClickScript={this.onChildDoubleClick}
-    //                 renderDepth={this._props.renderDepth + 1}
-    //                 LayoutTemplate={this._props.childLayoutTemplate}
-    //                 LayoutTemplateString={this._props.childLayoutString}
-    //                 // focus={this.focus}
-    //                 ScreenToLocalTransform={screenToLocalTransform} //makes sure the box wrapper thing is in the right spot
-    //                 isContentActive={this.isChildContentActive}
-    //                 isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive}
-    //                 PanelWidth={this.panelWidth}
-    //                 PanelHeight={this.panelHeight(childPair.layout)}
-    //             />
-    //         );
-    //     };
-
-    //     return this.childLayoutPairs.map((childPair, index) => {
-    //         const isSelected = this.isSelected(index);
-    //         const isHovered = this.hoveredNodeIndex === index;
-    //         const isOverflow = amCards > 8 && index > amCards/2
-    //         const inactiveIndex = this.inactiveDocs().indexOf(childPair.layout);
-    //         // const yOffset = this.verticalOffset(index);
-
-    //         const childScreenToLocal = () => {
-    //             const dref = this.docRefs.get(childPair.layout);
-    //             const { translateX, translateY, scale } = Utils.GetScreenTransform(dref?.ContentDiv);
-    //             // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform.  so we have to subtract that off
-    //             return new Transform(-translateX + (dref?.centeringX || 0) * scale, -translateY + (dref?.centeringY || 0) * scale, 1).scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, inactiveIndex) : 0);
-    //         };
-
-    //         return (
-    //             <div
-    //                 key={childPair.layout[Id]}
-    //                 className={`card-item${isSelected ? '-active' : ''}`}
-    //                 style={{
-    //                     width: this.panelWidth(),
-    //                     height: this.panelHeight(childPair.layout)(),
-    //                     transform: `
-    //                         rotate(${!isSelected ? this.rotate(amCards, inactiveIndex) : 0}deg) 
-    //                         translateY(${isHovered ? this.translateHover(index) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex) + this.translateOverFlowY(amCards, inactiveIndex)}px)
-    //                         translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : 0}px)
-
-    //                         scale(${isSelected ? 1.25 : 1})
-                            
-    //                         `, //scale has to be applied last or selected offset gets messed up
-    //                 }}
-    //                 // onClick={() => this.setSelectedNodeIndex(index)}
+    @computed get contentSorted() {
+        const sortedDocs = this.sortedDocsType.docs; 
+        const amCards = this.inactiveDocs().length; 
+
+        const displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => {
+            return (
+                <DocumentView
+                    {...this._props}
+                    ref={action((r: DocumentView) => r?.ContentDiv && this.docRefs.set(childPair.layout, r))}
+                    Document={childPair.layout}
+                    TemplateDataDocument={childPair.data}
+                    NativeWidth={returnZero}
+                    NativeHeight={returnZero}
+                    layout_fitWidth={returnFalse}
+                    onDoubleClickScript={this.onChildDoubleClick}
+                    renderDepth={this._props.renderDepth + 1}
+                    LayoutTemplate={this._props.childLayoutTemplate}
+                    LayoutTemplateString={this._props.childLayoutString}
+                    ScreenToLocalTransform={screenToLocalTransform}
+                    isContentActive={this.isChildContentActive}
+                    isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive}
+                    PanelWidth={this.panelWidth}
+                    PanelHeight={this.panelHeight(childPair.layout)}
+                />
+            );
+        };
+
+        // Map sorted documents to their rendered components
+        return sortedDocs.map((childPair, index) => {
+            // const childPair = { layout: doc, data: doc }; 
+            const isSelected = this.isSelected(index);
+            const isHovered = this.hoveredNodeIndex === index;
+            const inactiveIndex = this.sortedDocsType.docs.indexOf(childPair);
+
+
 
-    //                 onMouseEnter={() => this.setHoveredNodeIndex(index)}>
-    //                 {/* {this.lol(childPair.data, index)} */}
+            const childScreenToLocal = () => {
+                const dref = this.docRefs.get(childPair.layout);
+                const { translateX, translateY, scale } = Utils.GetScreenTransform(dref?.ContentDiv);
+                return new Transform(-translateX + (dref?.centeringX || 0) * scale, -translateY + (dref?.centeringY || 0) * scale, 1).scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, inactiveIndex) : 0);
+            };
 
-    //                 {displayDoc(childPair, childScreenToLocal)}
-    //             </div>
-    //         );
-    //     });
-    // }
+            return (
+                <div
+                    key={childPair.layout[Id]}
+                    className={`card-item${isSelected ? '-active' : ''}`}
+                    style={{
+                        width: this.panelWidth(),
+                        height: this.panelHeight(childPair.layout)(),
+                        transform: `
+                            rotate(${!isSelected ? this.rotate(amCards, inactiveIndex) : 0}deg)
+                            translateY(${isHovered ? this.translateHover(index) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex)}px)
+                            translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : 0}px)
+                            scale(${isSelected ? 1.25 : 1})
+                        `,
+                    }}
+                    onMouseEnter={() => this.setHoveredNodeIndex(index)}>
+                    {displayDoc(childPair, childScreenToLocal)}
+                </div>
+            );
+        });
+    }
 
-    @action content(amCards: number, startIndex: number, stopIndex: number) {
+    @computed get content() {
         // const currentIndex = NumCast(this.layoutDoc._carousel_index);
-        // const amCards = this.inactiveDocs().length;
+        const amCards = this.inactiveDocs().length;
+        console.log(amCards + "lol")
+        const sortedDocs = this.sortedDocsType.docs; // Retrieve sorted documents
+
         // const myInactives =
         const displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => {
             return (
@@ -281,13 +279,11 @@ export class CollectionCardView extends CollectionSubView() {
             );
         };
 
-        const inactiveDocs = this.inactiveDocs();
-        return this.childLayoutPairs.filter((childPair, index) => { const inactiveIndex = inactiveDocs.indexOf(childPair.layout); return inactiveIndex >= startIndex && inactiveIndex <= stopIndex;
-            }).map((childPair, index) => {
-
+        return this.childLayoutPairs.map((childPair, index) => {
             const isSelected = this.isSelected(index);
             const isHovered = this.hoveredNodeIndex === index;
-            const isOverflow = amCards > 8 && index > amCards/2
+            const isOverflow = amCards > 8 && index > amCards / 2;
+            // const  inactiveIndex = this.sortedDocsType.docs.indexOf(childPair);
             const inactiveIndex = this.inactiveDocs().indexOf(childPair.layout);
             // const yOffset = this.verticalOffset(index);
 
@@ -307,11 +303,8 @@ export class CollectionCardView extends CollectionSubView() {
                         height: this.panelHeight(childPair.layout)(),
                         transform: `
                             rotate(${!isSelected ? this.rotate(amCards, inactiveIndex) : 0}deg) 
-                            translateY(${isHovered ? this.translateHover(index) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex)
-                                //  + this.translateOverFlowY(amCards, inactiveIndex)
-                                }px)
+                            translateY(${isHovered ? this.translateHover(index) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex)}px)
                             translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : 0}px)
-
                             scale(${isSelected ? 1.25 : 1})
                             
                             `, //scale has to be applied last or selected offset gets messed up
@@ -327,35 +320,9 @@ export class CollectionCardView extends CollectionSubView() {
         });
     }
 
-    renderRows() {
-        const cards = this.inactiveDocs();
-        const totalCards = cards.length;
-        const rowsNeeded = Math.ceil(totalCards / 8);
-        
-        let rows = [];
-    
-        for (let rowIndex = 0; rowIndex < rowsNeeded; rowIndex++) {
-            let rowStartIndex = rowIndex * 8;
-            let rowEndIndex = rowStartIndex + 8;
-            let rowCards = cards.slice(rowStartIndex, rowEndIndex);
-    
-            rows.push(this.renderRowCards(rowCards, rowIndex));
-        }
-    
-        return rows;
-    }
-
-    renderRowCards(rowCards: Doc[], rowIndex: number) {
-        return (
-            <div className={`card-row row-${rowIndex}`} key={rowIndex} style = {{transform: `translateY(${rowIndex*60})`}}>
-                {this.content(rowCards.length, rowIndex*8, rowIndex*8+8)}
-            </div>
-        );
-    }
-
     @computed get translateWrapperX() {
         if (this.inactiveDocs().length != this.childLayoutPairs.length) {
-            return this.panelWidth()/2;
+            return this.panelWidth() / 2;
         }
 
         return 0;
@@ -378,9 +345,21 @@ export class CollectionCardView extends CollectionSubView() {
                         height: `${100 * this.fitContentScale}%`,
                     }}
                     onMouseLeave={() => this.setHoveredNodeIndex(-1)}>
-                    {this.renderRows()}
+                    {this.contentSorted}
                 </div>
 
+                {/* <Card  className={`custom-modal-position step-${step}`}>
+                <Card.Header>
+                    {header}
+                    <Button variant="close" className= "tut-close"onClick={store.toggleTutorial} style={{ position: 'absolute', top: 0, right: 0 }} />
+                </Card.Header>
+                <Card.Body>{body}
+                <Button className= 'next-step' variant="primary" onClick={store.nextStep}>Next Step!</Button>
+                </Card.Body>
+
+
+            </Card> */}
+
                 {/* {this.focusContent} */}
             </div>
         );