Skip to content
This repository has been archived by the owner on Apr 13, 2021. It is now read-only.

Commit

Permalink
docs: 🔥 adding to readme and cleanUp
Browse files Browse the repository at this point in the history
  • Loading branch information
@ahwelgemoed
ahwelgemoed committed Jan 4, 2021
1 parent fa77594 commit 07eb067
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 39 deletions.
82 changes: 70 additions & 12 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,75 @@
## Draganddropwidget
[My widget description]

## Features
[feature highlights]
## Drag and Drop Widget

## Usage
[step by step instructions]

## Demo project
[link to sandbox]
| Object list group | List | List of items to Show cards for |
| --------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| UUID/Status | `string` | If the attribute you are filtering on is an ENUM and all the data is coming from the same Data source (i.e same Entity in the domain model) use the same Enum here to give the widget context of what it is displaying. If how ever you are dragging and dropping between 2 different Data sources (Different Entities with data similar structures), this field must be an unique id. In either case this field will be unique to for every instance of the widgets you have. |
| Data Source Name | `string` | Text Name of the Data Source ??\*\* Check if this is Still used. |
| In Coming Data | `datasource` | Specify the Data to display, usually a Micro- or Nano- Flow where the Mendix Dev Limits and sorts the Incoming data. |
| Non Persistable Data | `datasource` | The non persistable data entity you wrap all your widgets in. This is used as state in the widget |
| Same Column Drop | `action` | Microflow to trigger if data comes in from the same column |
| Different Column Drop | `action` | Microflow to trigger if data comes in from different column |

## Column Drop Actions

We provide some pre-created actions that you should implement and configure.

**TO-DO** :: Show where to download it :: **TO-DO**

### Same Column Drop

- Same Datasource _(Same Entity)_

- After importing the Commons File Find the Folder called `nanoflows` in the `draganddrop` folder. Use the
nanoflow called `Same_Col_Drop_NF`. Copy it into your project and start setting it up.

- Configure the incoming data to be that of your non-persistable data source you wrapped the widget in.

- Configure the 3 Strings:

- `nonPersitabileModelName` - Model name of the Non Persistable Model (i.e:
`DragAndDropWidget.SimpleListState`)

- `nonPersistableAttName` - Attribute name of the Non Persistable Model (i.e: `json`)

- `persitableOrderAtt` - Attribute name used to 'sort' the Persistable Model (i.e: `Order`)

- Then copy over the Javascript Action in the folder `Javascript_Actions` called `Same_Col_Drop_JS` and configure
the nanoflow to use it.

This action does some cool stuff: It parses the Json coming in from the React Widget, Loops offer the array of
mxObjects then fetched that object on very iteration Updates the order attribute and then commits this.

The React Widget handles the sorting after the Mendix dev sets it once. All objects in that list will have new
updated order values, after the initial drop. Thus what ever is selected as the 'order' value, must not be unique.
The order is also seen as irrelevant to the end user and should never be displayed to them. It has been build in
such a way that the React State and MEndix state should never run out of sync with each other, and seems robust.

### Different Column Drop

Is called by THAT widget when another widget drops an Object into it.

- Same Datasource _(Same Entity)_

- After importing the Commons File Find the Folder called `nanoflows` in the `draganddrop` folder. Use the
nanoflow called `Same_Col_Drop_NF`. Copy it into your project and start setting it up.

- Configure the incoming data to be that of your non-persistable data source you wrapped the widget in.

- Configure the 3 Strings:

- `nonPersitabileModelName` - Model name of the Non Persistable Model (i.e:
`DragAndDropWidget.SimpleListState`)

- `nonPersistableAttName` - Attribute name of the Non Persistable Model (i.e: `json`)

- `persitableOrderAtt` - Attribute name used to 'sort' the Persistable Model (i.e: `Order`)

- Then copy over the Javascript Action in the folder `Javascript_Actions` called `Same_Col_Drop_JS` and configure
the nanoflow to use it.

## Issues, suggestions and feature requests
[link to GitHub issues]
This action does some cool stuff: It parses the Json coming in from the React Widget, Loops offer the array of
mxObjects then fetched that object on very iteration Updates the order attribute and then commits this.

## Development and contribution
[specify contribute]
- Different Datasource _(Different Entity)_
44 changes: 23 additions & 21 deletions src/Draganddropwidget.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
<icon/>
<properties>
<propertyGroup caption="General">

<property key="uuid" type="string">
<caption>UUID/Status</caption>
<description>Unique Identifyer for Dragable Colum, or If same DS the Enum on what to Filter on (Read Docs)</description>
Expand All @@ -24,34 +23,37 @@
<description>List of entry objects that are used to populate the Dragable column</description>
</property>

<property key="content" type="widgets" required="true" dataSource="incomingData">
<caption>Content</caption>
<description>Widgets using data source</description>
</property>

<property key="emptyData" type="widgets" required="true">
<caption>Displayed when column is empty</caption>
<description></description>
</property>

<property key="dropDataAttr" type="attribute">
<caption>Drop data</caption>
<description>JSON data containing the new sequence numbers of items in the column the item was dropped on.</description>
<caption>Non Persistable Data</caption>
<description>JSON String</description>
<attributeTypes>
<attributeType name="String"/>
</attributeTypes>
</property>
</propertyGroup>

<propertyGroup caption="Drop Actions">
<property key="onDropAction" type="action">
<caption>Same Column Drop</caption>
<description>Nanoflow to trigger if data comes in from the same column</description>
</property>

<property key="onDropAction" type="action">
<caption>onDropAction</caption>
<description>Configure the action to handle drops. Use the drop data to update the sequence. Also reset context ID value</description>
</property>
<property key="onDifferentColumDrop" type="action">
<caption>Different Column Drop</caption>
<description>Nanoflow to trigger if data comes in from different column</description>
</property>
</propertyGroup>

<property key="onDifferentColumDrop" type="action">
<caption>onDifferentColumDrop</caption>
<description>Microflow to trigger if Other Cardß Comes in</description>
</property>
<propertyGroup caption="Layout">
<property key="content" type="widgets" required="true" dataSource="incomingData">
<caption>Style the List Card</caption>
<description>Widgets using data source</description>
</property>

<property key="emptyData" type="widgets" required="true">
<caption>Displayed when column is empty</caption>
<description></description>
</property>
</propertyGroup>
</properties>
</widget>
5 changes: 3 additions & 2 deletions src/components/DragCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,11 @@ const DragCard = ({ children, item, index, reorderAfterDrop, listOfSortableItems
}
// Dropped on the Bottom Halve of the Card
if (hoverMiddleY < hoverClientY) {
if (hoverIndex == dragIndex) {
// Dropped in Empty Col
if (hoverIndex == dragIndex && !listOfSortableItems) {
return hoverIndex;
}
//@ts-ignore
// @ts-ignore
if (!hoverIndex || hoverIndex == listOfSortableItems?.length - 1) {
return hoverIndex + 1;
}
Expand Down
8 changes: 4 additions & 4 deletions typings/DraganddropwidgetProps.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ export interface DraganddropwidgetContainerProps {
uuid: string;
dataSourceName: string;
incomingData: ListValue;
content: ListWidgetValue;
emptyData: ReactNode;
dropDataAttr: EditableValue<string>;
onDropAction?: ActionValue;
onDifferentColumDrop?: ActionValue;
content: ListWidgetValue;
emptyData: ReactNode;
}

export interface DraganddropwidgetPreviewProps {
Expand All @@ -27,9 +27,9 @@ export interface DraganddropwidgetPreviewProps {
uuid: string;
dataSourceName: string;
incomingData: {} | null;
content: { widgetCount: number; renderer: ComponentType };
emptyData: { widgetCount: number; renderer: ComponentType };
dropDataAttr: string;
onDropAction: {} | null;
onDifferentColumDrop: {} | null;
content: { widgetCount: number; renderer: ComponentType };
emptyData: { widgetCount: number; renderer: ComponentType };
}

0 comments on commit 07eb067

Please sign in to comment.