feat(add from Same DS): 🔥 save from same DS

.vscode/settings.json

@@ -2,5 +2,8 @@
     "workbench.colorCustomizations": {
         "titleBar.activeBackground": "#923e8e",
         "titleBar.inactiveBackground": "#4a1f46"
-    }
+    },
+    "conventionalCommits.scopes": [
+        "add from Same DS"
+    ]
 }

src/Draganddropwidget.tsx

@@ -3,7 +3,6 @@ import DragInit from "./components/DragInit";
 import { DndProvider } from "react-dnd";
 // import { HTML5Backend } from "react-dnd-html5-backend";
 // import { Droppable, Draggable, DragDropContext } from "react-beautiful-dnd";
-import { HelloWorldSample } from "./components/HelloWorldSample";
 // import update from "immutability-helper";
 
 import { DraganddropwidgetContainerProps } from "../typings/DraganddropwidgetProps";
@@ -23,7 +22,6 @@ export default class Draganddropwidget extends Component<DraganddropwidgetContai
                 myManager: window.myManager
             });
         }
-
         if (
             (this.props.incomingData.items && this.props.incomingData.items?.length !== listOfSortableItems.length) ||
             this.props.incomingData.items?.length !== pP.incomingData.items?.length
@@ -46,39 +44,44 @@ export default class Draganddropwidget extends Component<DraganddropwidgetContai
     };
     reorderAfterDrop = async ({ currentItem, index }: any) => {
         const { listOfSortableItems } = this.state;
-        const { uuid, dropDataAttr, onDropAction, onDifferentColumDrop } = this.props;
+        const { uuid, dropDataAttr, onDropAction, onDifferentColumDrop, dataSourceName } = this.props;
+        console.log("uuid", uuid, currentItem.item.uuid, listOfSortableItems);
         // @ts-ignore
         if (uuid !== currentItem.item.uuid) {
             /**
              * /TODO::Make a Check to see If This UUID can accept THAT UUID
              */
-
             // @ts-ignore
             const modelToSaveFrom = this.props.content(currentItem.item.item).props.object.jsonData.objectType;
             const settingsForSave = {
                 modelToSaveFrom,
+                dataSourceName,
                 whereToPut: index,
-                item: currentItem
+                item: currentItem,
+                comingTo: uuid,
+                comingFrom: currentItem.item.uuid
             };
             const listToMendix = listOfSortableItems;
             // @ts-ignore
             await listToMendix.splice(index, 0, currentItem.item);
             const jsonString = await JSON.stringify({ settingsForSave, listToMendix });
             await dropDataAttr.setValue(jsonString);
-
+            // @ts-ignore
             if (onDifferentColumDrop && onDifferentColumDrop.canExecute && !onDifferentColumDrop.isExecuting) {
                 onDifferentColumDrop.execute();
             }
         } else {
-            // @ts-ignore
             // @ts-ignore
             const movedItem = listOfSortableItems.find(item => item.id == currentItem.item.id);
             // @ts-ignore
             const removedItemList = listOfSortableItems.filter(item => item.id != currentItem.item.id);
             // @ts-ignore
             await removedItemList.splice(index, 0, movedItem);
+
             await this.setState({ listOfSortableItems: removedItemList });
+
             const jsonString = await JSON.stringify(removedItemList);
+
             await dropDataAttr.setValue(jsonString);
             await dropDataAttr.setTextValue(jsonString);
 
@@ -90,9 +93,8 @@ export default class Draganddropwidget extends Component<DraganddropwidgetContai
 
     render(): ReactNode {
         const { listOfSortableItems, myManager } = this.state;
-        //@ts-ignore
-        console.log("RENERER uuid", this.props.uuid, this.props.incomingData.items?.length);
-        if (listOfSortableItems.length && myManager) {
+
+        if (listOfSortableItems && myManager) {
             return (
                 // @ts-ignore
                 <DndProvider manager={this.state.myManager.current.dragDropManager}>
@@ -105,7 +107,7 @@ export default class Draganddropwidget extends Component<DraganddropwidgetContai
                 </DndProvider>
             );
         } else {
-            return <HelloWorldSample sampleText={"World"} />;
+            return null;
         }
     }
 }

src/Draganddropwidget.xml

@@ -8,10 +8,14 @@
     <icon/>
     <properties>
         <propertyGroup caption="General">
-<property key="uuid" type="string">
-	<caption>My string</caption>
-	<description>My string setting</description>
-</property>
+            <property key="uuid" type="string">
+                <caption>My string</caption>
+                <description>My string setting</description>
+            </property>
+            <property key="dataSourceName" type="string">
+                <caption>dataSourceName</caption>
+                <description>My string setting</description>
+            </property>
                 <!-- <property key="date" type="attribute" dataSource="incomingData"> -->
                 <property key="incomingData" type="datasource" isList="true">
                 <caption>Entries</caption>
@@ -23,6 +27,7 @@
                 <description></description>
                 <attributeTypes>
                     <attributeType name="Integer"/>
+                    <attributeType name="AutoNumber"/>
                 </attributeTypes>
             </property>
 

src/components/DragInit.tsx

@@ -5,23 +5,11 @@ import { useDrag, useDrop } from "react-dnd";
 function Card({ children, item, index, reorderAfterDrop }: any) {
     const ref = useRef(null);
     // REORDER THE CARDS
-    const [, drop] = useDrop({
+    const [{ isOver }, drop] = useDrop({
         accept: "card",
-        // hover(hoverItem) {
-        //     const currentItem = hoverItem;
-        //     const hoverOverItem = item;
-        //     reorderAfterDrop({
-        //         // @ts-ignore
-        //         currentOrderValue: currentItem.item.orderValue,
-        //         newOrderValue: hoverOverItem.orderValue,
-        //         currentItem
-        //     });
-        // }
-
-        /**
-         * This Hover is when  Card Is Dropped In Same Col
-         */
-
+        collect: monitor => ({
+            isOver: !!monitor.isOver()
+        }),
         drop(hoverItem) {
             const currentItem = hoverItem;
             reorderAfterDrop({
@@ -31,7 +19,7 @@ function Card({ children, item, index, reorderAfterDrop }: any) {
             });
         }
     });
-
+    console.log("isOver", isOver);
     const [{ isDragging }, drag] = useDrag({
         item: {
             type: "card",
@@ -42,15 +30,10 @@ function Card({ children, item, index, reorderAfterDrop }: any) {
             isDragging: monitor.isDragging()
         })
     });
+    console.log("isDragging", isDragging);
     drag(drop(ref));
     return (
-        <div
-            className="card"
-            ref={ref}
-            style={{
-                backgroundColor: isDragging ? "#fbb" : "palegoldenrod"
-            }}
-        >
+        <div className={isDragging ? "isDragging" : ""} ref={ref}>
             {children}
         </div>
     );
@@ -59,13 +42,26 @@ function Card({ children, item, index, reorderAfterDrop }: any) {
 function Column({ listOfSortableItems, content, reorderAfterDrop }: any) {
     return (
         <div className="app">
-            {listOfSortableItems.map((fullItem: any, index: any) => {
-                return (
-                    <Card reorderAfterDrop={reorderAfterDrop} item={fullItem} index={index}>
-                        {content(fullItem.item)}
-                    </Card>
-                );
-            })}
+            {listOfSortableItems.length ? (
+                listOfSortableItems.map((fullItem: any, index: any) => {
+                    return (
+                        <Card reorderAfterDrop={reorderAfterDrop} item={fullItem} index={index}>
+                            {content(fullItem.item)}
+                        </Card>
+                    );
+                })
+            ) : (
+                <Card reorderAfterDrop={reorderAfterDrop} item={null} index={0}>
+                    <div
+                        style={{
+                            border: "1px solid",
+                            padding: 10
+                        }}
+                    >
+                        Empty Drop
+                    </div>
+                </Card>
+            )}
         </div>
     );
 }

typings/DraganddropwidgetProps.d.ts

@@ -12,6 +12,7 @@ export interface DraganddropwidgetContainerProps {
     style?: CSSProperties;
     tabIndex: number;
     uuid: string;
+    dataSourceName: string;
     incomingData: ListValue;
     data: ListAttributeValue<BigJs.Big>;
     content?: ListWidgetValue;
@@ -24,6 +25,7 @@ export interface DraganddropwidgetPreviewProps {
     class: string;
     style: string;
     uuid: string;
+    dataSourceName: string;
     incomingData: {} | null;
     data: string;
     content: { widgetCount: number; renderer: ComponentType };