Fix/datagrid bugs

e2e/tests/plugin-datagrid.spec.ts

@@ -0,0 +1,116 @@
+import { expect, test } from '@playwright/test'
+
+test.describe.configure({ mode: 'serial' })
+
+const ADD_ROW_LABEL = 'Add data row'
+const CLEAR_TABLE_LABEL = 'Clear table content'
+const DEFAULT_EXAMPLE_PAGE =
+  'http://localhost:3000/view/?documentId=dmss://DemoDataSource/$Default'
+const DEFAULT_EXAMPLE_CONTENT_AREA = 'enabled:dmss://DemoDataSource/$Default'
+const NUMERIC_EXAMPLE_PAGE =
+  'http://localhost:3000/view/?documentId=dmss://DemoDataSource/$Numeric'
+const NUMERIC_EXAMPLE_CONTENT_AREA = 'enabled:dmss://DemoDataSource/$Numeric'
+
+test('Unknown dimensions', async ({ page }) => {
+  await page.goto(DEFAULT_EXAMPLE_PAGE)
+  const contentArea = page.getByTestId(DEFAULT_EXAMPLE_CONTENT_AREA)
+  const table = contentArea.getByRole('table')
+
+  await expect(contentArea.getByLabel(ADD_ROW_LABEL)).toBeVisible()
+  await expect(table.getByRole('textbox').first()).toHaveValue('Dodge')
+  await table.getByRole('textbox').first().fill('Not Dodge')
+  await expect(table.getByRole('textbox').first()).toHaveValue('Not Dodge')
+})
+
+test('Set dimensions', async ({ page }) => {
+  await page.goto(DEFAULT_EXAMPLE_PAGE)
+  await page
+    .getByRole('button', { name: 'Set dimensions', exact: true })
+    .click()
+  const contentArea = page.getByTestId(DEFAULT_EXAMPLE_CONTENT_AREA)
+  const table = contentArea.getByRole('table')
+
+  await expect(contentArea.getByLabel(ADD_ROW_LABEL)).toBeHidden()
+  await expect(table.getByRole('textbox').nth(16)).toHaveValue('Ford')
+})
+
+test('Vertical (Set dimensions)', async ({ page }) => {
+  await page.goto(DEFAULT_EXAMPLE_PAGE)
+  await page
+    .getByRole('button', { name: 'Vertical (Set dimensions)', exact: true })
+    .click()
+  const contentArea = page.getByTestId(DEFAULT_EXAMPLE_CONTENT_AREA)
+  const table = contentArea.getByRole('table')
+
+  await expect(contentArea.getByLabel(ADD_ROW_LABEL)).toBeHidden()
+  await expect(table.getByRole('textbox').nth(4)).toHaveValue('Ford')
+  await expect(table.getByRole('textbox').nth(15)).toHaveValue(
+    '1D3MX48D48B28FPJU'
+  )
+})
+
+test('Vertical (Unknown dimensions)', async ({ page }) => {
+  await page.goto(DEFAULT_EXAMPLE_PAGE)
+  await page
+    .getByRole('button', { name: 'Vertical (Unknown dimensions)', exact: true })
+    .click()
+  const contentArea = page.getByTestId(DEFAULT_EXAMPLE_CONTENT_AREA)
+  const table = contentArea.getByRole('table')
+
+  await expect(contentArea.getByLabel(ADD_ROW_LABEL)).toBeVisible()
+  await expect(table.getByRole('textbox').nth(4)).toHaveValue('Ford')
+  await expect(table.getByRole('textbox').nth(10)).toHaveValue(
+    'Extended Cab Pickup'
+  )
+})
+
+test('Custom labels', async ({ page }) => {
+  await page.goto(DEFAULT_EXAMPLE_PAGE)
+  await page.getByRole('button', { name: 'Custom labels', exact: true }).click()
+  const contentArea = page.getByTestId(DEFAULT_EXAMPLE_CONTENT_AREA)
+  const table = contentArea.getByRole('table')
+
+  await expect(contentArea.getByLabel(ADD_ROW_LABEL)).toBeHidden()
+  await expect(table.getByText('John')).toBeVisible()
+  await expect(table.getByText('Manufacturer')).toBeVisible()
+})
+
+test('Hidden labels', async ({ page }) => {
+  await page.goto(DEFAULT_EXAMPLE_PAGE)
+  await page.getByRole('button', { name: 'Hidden labels', exact: true }).click()
+  const contentArea = page.getByTestId(DEFAULT_EXAMPLE_CONTENT_AREA)
+  const table = contentArea.getByRole('table')
+
+  await expect(table.getByText('A', { exact: true })).toBeHidden()
+  await expect(table.getByText('2', { exact: true })).toBeHidden()
+})
+
+test('No-edit columns and rows', async ({ page }) => {
+  await page.goto(DEFAULT_EXAMPLE_PAGE)
+  await page
+    .getByRole('button', { name: 'No-edit columns and rows', exact: true })
+    .click()
+  const contentArea = page.getByTestId(DEFAULT_EXAMPLE_CONTENT_AREA)
+  await expect(contentArea.getByLabel(ADD_ROW_LABEL)).toBeHidden()
+})
+
+test('Non-editable', async ({ page }) => {
+  await page.goto(DEFAULT_EXAMPLE_PAGE)
+  await page.getByRole('button', { name: 'Non-editable', exact: true }).click()
+  const contentArea = page.getByTestId(DEFAULT_EXAMPLE_CONTENT_AREA)
+  const table = contentArea.getByRole('table')
+  await expect(contentArea.getByLabel(ADD_ROW_LABEL)).toBeHidden()
+  await expect(contentArea.getByLabel(CLEAR_TABLE_LABEL)).toBeHidden()
+  await expect(table.getByRole('textbox').first()).toHaveValue('Dodge')
+  await expect(table.getByRole('textbox').first()).toHaveAttribute('readonly')
+})
+
+test('Integer is number input in data grid', async ({ page }) => {
+  await page.goto(NUMERIC_EXAMPLE_PAGE)
+  const contentArea = page.getByTestId(NUMERIC_EXAMPLE_CONTENT_AREA)
+  await expect(contentArea).toBeVisible()
+  const table = contentArea.getByRole('table')
+  await expect(table).toBeVisible()
+  await expect(table.locator('input').first()).toHaveValue('1000')
+  await expect(table.locator('input').first()).toHaveAttribute('type', 'number')
+})

example/app/data/DemoDataSource/plugins/data_grid/numeric/blueprints/Numeric.blueprint.json

@@ -0,0 +1,22 @@
+{
+  "name": "Numeric",
+  "type": "CORE:Blueprint",
+  "attributes": [
+    {
+      "name": "type",
+      "type": "dmss://system/SIMOS/BlueprintAttribute",
+      "attributeType": "string"
+    },
+    {
+      "name": "name",
+      "type": "dmss://system/SIMOS/BlueprintAttribute",
+      "attributeType": "string"
+    },
+    {
+      "name": "data",
+      "type": "CORE:BlueprintAttribute",
+      "attributeType": "integer",
+      "dimensions": "*,*"
+    }
+  ]
+}

example/app/data/DemoDataSource/plugins/data_grid/numeric/numeric.entity.json

@@ -0,0 +1,11 @@
+{
+  "_id": "Numeric",
+  "name": "Numeric",
+  "type": "./blueprints/Numeric",
+  "data": [
+    [1000, 2000, 4000, 8000],
+    [1000, 2000, 3000, 5000],
+    [1000, 2000, 3000, 4000],
+    [999, 888, 666, 555]
+  ]
+}

example/app/data/DemoDataSource/recipes/plugins/data_grid/numeric/numeric.recipe.json

@@ -0,0 +1,32 @@
+{
+  "type": "CORE:RecipeLink",
+  "_blueprintPath_": "/plugins/data_grid/numeric/blueprints/Numeric",
+  "initialUiRecipe": {
+    "name": "ViewSelector",
+    "type": "CORE:UiRecipe",
+    "config": {
+      "type": "PLUGINS:dm-core-plugins/view_selector/ViewSelectorConfig",
+      "items": [
+        {
+          "type": "PLUGINS:dm-core-plugins/view_selector/ViewSelectorItem",
+          "label": "Numeric",
+          "viewConfig": {
+            "type": "CORE:InlineRecipeViewConfig",
+            "recipe": {
+              "name": "Numeric",
+              "type": "CORE:UiRecipe",
+              "description": "Single multidimensional primitive",
+              "config": {
+                "type": "PLUGINS:dm-core-plugins/data_grid/DataGridPluginConfig",
+                "fieldNames": ["data"]
+              },
+              "plugin": "@development-framework/dm-core-plugins/data_grid"
+            },
+            "scope": "self"
+          }
+        }
+      ]
+    },
+    "plugin": "@development-framework/dm-core-plugins/view_selector/tabs"
+  }
+}

packages/dm-core-plugins/blueprints/data_grid/DataGridPluginConfig.json

@@ -52,7 +52,7 @@
     {
       "name": "columnLabels",
       "type": "CORE:BlueprintAttribute",
-      "description": "Define column labels or use predefined columns. Predefined values are ABC, ZYX, 123 and you can select those by using the spread operator ['...ABC']. You can also merge the two like this: ['custom field', 'custom field2', '...ABC']",
+      "description": "Define column labels or use predefined columns. Predefined values are ABC, ZYX, 123 and you can select those by using the spread operator ['...ABC'].",
       "attributeType": "string",
       "default": ["...ABC"],
       "dimensions": "*",
@@ -72,17 +72,10 @@
       "default": true,
       "optional": true
     },
-    {
-      "name": "movableRows",
-      "type": "CORE:BlueprintAttribute",
-      "attributeType": "boolean",
-      "default": true,
-      "optional": true
-    },
     {
       "name": "rowLabels",
       "type": "CORE:BlueprintAttribute",
-      "description": "Define row labels or use predefined rows. Predefined values are ABC, ZYX, 123and you can select those by using the spread operator ['...ABC']. You can also merge the two like this: ['custom field', 'custom field2', '...ABC']",
+      "description": "Define row labels or use predefined rows. Predefined values are ABC, ZYX, 123and you can select those by using the spread operator ['...ABC'].",
       "attributeType": "string",
       "default": ["...123"],
       "dimensions": "*",

packages/dm-core-plugins/src/data-grid/DataCell/DataCell.tsx

@@ -27,6 +27,13 @@ export function DataCell(props: DataCellProps) {
           ? '-'
           : Number.parseFloat(value)
     }
+    if (attributeType === 'integer') {
+      return value === ''
+        ? undefined
+        : value === '-'
+          ? '-'
+          : Number.parseInt(value, 10)
+    }
     if (attributeType === 'boolean') {
       return checked
     }
@@ -62,7 +69,11 @@ export function DataCell(props: DataCellProps) {
           onChange={(event) => updateValue(event, rowIndex, cellIndex)}
           attributeType={attributeType}
           readOnly={!config.editable}
-          type={attributeType === 'number' ? 'number' : 'text'}
+          type={
+            attributeType === 'number' || attributeType === 'integer'
+              ? 'number'
+              : 'text'
+          }
         />
       )}
     </Styled.Cell>