Merge pull request #5 from lowdefy/develop

feat: Input grids and data csv download.
lowdefy · Mar 23, 2021 · 9571d14 · 9571d14
2 parents 9030856 + b7f6b3d
commit 9571d14
Show file tree

Hide file tree

Showing 20 changed files with 953 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -9,31 +9,60 @@ See the [Ag-Grid docs](https://www.ag-grid.com/documentation/react/getting-start
 
 ## Blocks
 
-Block types for supported [Ag-Grid themes](https://www.ag-grid.com/documentation/javascript/themes-provided/) are available.
+Block types for supported [Ag-Grid themes](https://www.ag-grid.com/documentation/javascript/themes-provided/) are available for for `dispay` and `input` block categories.
 
 ### Block type Urls
 
 The block types are hosted at:
 
-- `AgGridAlpine`: https://blocks-cdn.lowdefy.com/v3.10.1/blocks-aggrid/meta/AgGridAlpine.json
-- `AgGridAlpineDark`: https://blocks-cdn.lowdefy.com/v3.10.1/blocks-aggrid/meta/AgGridAlpineDark.json
-- `AgGridBalham`: https://blocks-cdn.lowdefy.com/v3.10.1/blocks-aggrid/meta/AgGridBalham.json
-- `AgGridBalhamDark`: https://blocks-cdn.lowdefy.com/v3.10.1/blocks-aggrid/meta/AgGridBalhamDark.json
-- `AgGridMaterial`: https://blocks-cdn.lowdefy.com/v3.10.1/blocks-aggrid/meta/AgGridMaterial.json
+- `AgGridAlpine`: https://blocks-cdn.lowdefy.com/v3.11.4/blocks-aggrid/meta/AgGridAlpine.json
+- `AgGridAlpineDark`: https://blocks-cdn.lowdefy.com/v3.11.4/blocks-aggrid/meta/AgGridAlpineDark.json
+- `AgGridBalham`: https://blocks-cdn.lowdefy.com/v3.11.4/blocks-aggrid/meta/AgGridBalham.json
+- `AgGridBalhamDark`: https://blocks-cdn.lowdefy.com/v3.11.4/blocks-aggrid/meta/AgGridBalhamDark.json
+- `AgGridMaterial`: https://blocks-cdn.lowdefy.com/v3.11.4/blocks-aggrid/meta/AgGridMaterial.json
+- `AgGridInputAlpine`: https://blocks-cdn.lowdefy.com/v3.11.4/blocks-aggrid/meta/AgGridInputAlpine.json
+- `AgGridInputAlpineDark`: https://blocks-cdn.lowdefy.com/v3.11.4/blocks-aggrid/meta/AgGridInputAlpineDark.json
+- `AgGridInputBalham`: https://blocks-cdn.lowdefy.com/v3.11.4/blocks-aggrid/meta/AgGridInputBalham.json
+- `AgGridInputBalhamDark`: https://blocks-cdn.lowdefy.com/v3.11.4/blocks-aggrid/meta/AgGridInputBalhamDark.json
+- `AgGridInputMaterial`: https://blocks-cdn.lowdefy.com/v3.11.4/blocks-aggrid/meta/AgGridInputMaterial.json
 
 ### Events
 
+##### All Blocks
+
+- `onCellClick`: Trigger event when a cell is clicked and pass `row: object`, `cell: object` and `selected: object[]` row data to action `_event`.
 - `onRowClick`: Trigger event when a row is clicked and pass `row: object` and `selected: object[]` row data to action `_event`.
-- `onCellClick`:Trigger event when a cell is clicked and pass `row: object`, `cell: object` and `selected: object[]` row data to action `_event`.
+- `onRowSelected`: Trigger event when a row is selected and pass `row: object` and `selected: object[]` row data to action `_event`.
+- `onSelectionChanged`: Triggered when the selected rows is changed and pass `selected: object[]` row data to action `_event`.
+
+##### Input Blocks
+
+- `onCellValueChanged`: Triggered when a cell value is changed on the grid. The following is passed to the action `_event`:
+  - `field: string`: The field name of the changed cell.
+  - `newRowData: object[]`: The table data with the change applied.
+  - `newValue: any`: The updated cell value.
+  - `oldValue: any`: The cell value before the update was made.
+  - `rowData: object`: The row data after the cell value has been changed.
+  - `rowIndex: number`: Array index of the row for the changed cell.
+- `onRowDragMove`: Triggered when a row is dragged to another position in the grid. The following is passed to the action `_event`:
+  - `fromData: object`: Row data of the row selection which to moved.
+  - `fromIndex: number`: Array index of the row selection which to moved.
+  - `newRowData: object[]`: The table data with the change applied.
+  - `toData: object`: Row data of the row to which the selection will be moved.
+  - `toIndex: number`: Array index of the row to which the selection will be moved.
+
+### Methods
+
+- `exportDataAsCsv`: When called, table data will be downloaded in csv format.
 
 ### AgGridAlpine Example
 
 ```yaml
 name: my-app
-lowdefy: 3.10.1
+lowdefy: 3.11.4
 types:
   AgGridAlpine:
-    url: https://blocks-cdn.lowdefy.com/v3.10.1/blocks-aggrid/meta/AgGridAlpine.json
+    url: https://blocks-cdn.lowdefy.com/v3.11.4/blocks-aggrid/meta/AgGridAlpine.json
 pages:
   - id: dashboard
     type: PageHeaderMenu
@@ -69,10 +98,10 @@ pages:
 
 ```yaml
 name: my-app
-lowdefy: 3.10.1
+lowdefy: 3.11.4
 types:
   AgGridAlpine:
-    url: https://blocks-cdn.lowdefy.com/v3.10.1/blocks-aggrid/meta/AgGridAlpine.json
+    url: https://blocks-cdn.lowdefy.com/v3.11.4/blocks-aggrid/meta/AgGridAlpine.json
 pages:
   - id: dashboard
     type: PageHeaderMenu
@@ -117,10 +146,10 @@ pages:
 
 ```yaml
 name: my-app
-lowdefy: 3.10.1
+lowdefy: 3.11.4
 types:
   AgGridAlpine:
-    url: https://blocks-cdn.lowdefy.com/v3.10.1/blocks-aggrid/meta/AgGridAlpine.json
+    url: https://blocks-cdn.lowdefy.com/v3.11.4/blocks-aggrid/meta/AgGridAlpine.json
 pages:
   - id: dashboard
     type: PageHeaderMenu
@@ -180,10 +209,10 @@ pages:
 
 ```yaml
 name: my-app
-lowdefy: 3.10.1
+lowdefy: 3.11.4
 types:
   AgGridAlpine:
-    url: https://blocks-cdn.lowdefy.com/v3.10.1/blocks-aggrid/meta/AgGridAlpine.json
+    url: https://blocks-cdn.lowdefy.com/v3.11.4/blocks-aggrid/meta/AgGridAlpine.json
 pages:
   - id: dashboard
     type: PageHeaderMenu
@@ -241,10 +270,10 @@ pages:
 
 ```yaml
 name: my-app
-lowdefy: 3.10.1
+lowdefy: 3.11.4
 types:
   AgGridAlpine:
-    url: https://blocks-cdn.lowdefy.com/v3.10.1/blocks-aggrid/meta/AgGridAlpine.json
+    url: https://blocks-cdn.lowdefy.com/v3.11.4/blocks-aggrid/meta/AgGridAlpine.json
 pages:
   - id: dashboard
     type: PageHeaderMenu
@@ -324,10 +353,10 @@ pages:
 
 ```yaml
 name: my-app
-lowdefy: 3.10.1
+lowdefy: 3.11.4
 types:
   AgGridAlpine:
-    url: https://blocks-cdn.lowdefy.com/v3.10.1/blocks-aggrid/meta/AgGridAlpine.json
+    url: https://blocks-cdn.lowdefy.com/v3.11.4/blocks-aggrid/meta/AgGridAlpine.json
 pages:
   - id: dashboard
     type: PageHeaderMenu
@@ -385,6 +414,132 @@ pages:
                       _state: all_selected
 ```
 
+### AgGridAlpine editable cells Example
+
+```yaml
+name: my-app
+lowdefy: 3.11.4
+types:
+  AgGridAlpine:
+    url: https://blocks-cdn.lowdefy.com/v3.11.4/blocks-aggrid/meta/AgGridAlpine.json
+pages:
+  - id: dashboard
+    type: PageHeaderMenu
+    blocks:
+      - id: Download
+        type: Button
+        events:
+          onClick:
+            - id: download
+              type: CallMethod
+              params:
+                blockId: table
+                method: exportDataAsCsv
+      - id: table
+        type: AgGridAlpine
+        properties:
+          rowData:
+            - a: zero
+              b: 000
+              c: AA
+            - a: one
+              b: 111
+              c: BB
+            - a: two
+              b: 222
+              c: CC
+          columnDefs:
+            - field: 'a'
+            - field: 'b'
+            - field: 'c'
+```
+
+### AgGridInputAlpine onRowDragMove Example
+
+```yaml
+name: my-app
+lowdefy: 3.11.4
+types:
+  AgGridInputAlpine:
+    url: https://blocks-cdn.lowdefy.com/v3.11.4/blocks-aggrid/meta/AgGridInputAlpine.json
+pages:
+  - id: dashboard
+    type: PageHeaderMenu
+    events:
+      onInit:
+        - id: new
+          type: SetState
+          params:
+            table:
+              - a: zero
+                b: 000
+                c: AA
+              - a: one
+                b: 111
+                c: BB
+              - a: two
+                b: 222
+                c: CC
+    blocks:
+      - id: table
+        type: AgGridInputAlpine
+        properties:
+          columnDefs:
+            - field: 'a'
+              rowDrag: true
+            - field: 'b'
+            - field: 'c'
+            - field: 'd'
+          defaultColDef:
+            width: 170
+            sortable: true
+            filter: true
+```
+
+### AgGridInputAlpine editable cells Example
+
+```yaml
+name: my-app
+lowdefy: 3.11.4
+types:
+  AgGridInputAlpine:
+    url: https://blocks-cdn.lowdefy.com/v3.11.4/blocks-aggrid/meta/AgGridInputAlpine.json
+pages:
+  - id: dashboard
+    type: PageHeaderMenu
+    events:
+      onInit:
+        - id: new
+          type: SetState
+          params:
+            table:
+              - a: zero
+                b: 000
+                c: AA
+              - a: one
+                b: 111
+                c: BB
+              - a: two
+                b: 222
+                c: CC
+    blocks:
+      - id: table
+        type: AgGridInputAlpine
+        properties:
+          columnDefs:
+            - field: 'a'
+            - field: 'b'
+            - field: 'c'
+              cellEditor: 'agSelectCellEditor'
+              cellEditorParams:
+                values: ['AA', 'BB', 'CC', 'DD']
+          defaultColDef:
+            width: 170
+            sortable: true
+            filter: true
+            editable: true
+```
+
 ## Other Lowdefy Blocks Packages
 
 - [@lowdefy/blocks-template](https://github.com/lowdefy/blocks-template): Lowdefy template for creating blocks.

diff --git a/demo/examples/AgGridInputAlpine.yaml b/demo/examples/AgGridInputAlpine.yaml
@@ -0,0 +1,48 @@
+- id: default
+  type: AgGridInputAlpine
+- id: table-basic
+  type: AgGridInputAlpine
+  properties:
+    rowData:
+      - title: One
+        year: 2010
+        viewerReviews: 30
+      - title: Two
+        year: 2011
+        viewerReviews: 20
+    columnDefs:
+      - headerName: Title
+        field: title
+        width: 350
+      - headerName: Year
+        field: year
+        width: 100
+      - headerName: Viewer Reviews
+        field: viewerReviews
+        width: 160
+        type: numericColumn
+- id: table-defaultColDef
+  type: AgGridInputAlpine
+  properties:
+    rowData:
+      - title: One
+        year: 2010
+        viewerReviews: 30
+      - title: Two
+        year: 2011
+        viewerReviews: 20
+    defaultColDef:
+      sortable: true
+      resizable: true
+      filter: true
+    columnDefs:
+      - headerName: Title
+        field: title
+        width: 350
+      - headerName: Year
+        field: year
+        width: 100
+      - headerName: Viewer Reviews
+        field: viewerReviews
+        width: 160
+        type: numericColumn
diff --git a/demo/examples/AgGridInputAlpineDark.yaml b/demo/examples/AgGridInputAlpineDark.yaml
@@ -0,0 +1,48 @@
+- id: default
+  type: AgGridInputAlpineDark
+- id: table-basic
+  type: AgGridInputAlpineDark
+  properties:
+    rowData:
+      - title: One
+        year: 2010
+        viewerReviews: 30
+      - title: Two
+        year: 2011
+        viewerReviews: 20
+    columnDefs:
+      - headerName: Title
+        field: title
+        width: 350
+      - headerName: Year
+        field: year
+        width: 100
+      - headerName: Viewer Reviews
+        field: viewerReviews
+        width: 160
+        type: numericColumn
+- id: table-defaultColDef
+  type: AgGridInputAlpineDark
+  properties:
+    rowData:
+      - title: One
+        year: 2010
+        viewerReviews: 30
+      - title: Two
+        year: 2011
+        viewerReviews: 20
+    defaultColDef:
+      sortable: true
+      resizable: true
+      filter: true
+    columnDefs:
+      - headerName: Title
+        field: title
+        width: 350
+      - headerName: Year
+        field: year
+        width: 100
+      - headerName: Viewer Reviews
+        field: viewerReviews
+        width: 160
+        type: numericColumn