fix(datagrid): icons & isSelectable toggle

ovh · Nov 10, 2023 · fb11c20 · fb11c20
1 parent 824942a
commit fb11c20
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 3 deletions.
diff --git a/packages/components/datagrid/src/components/osds-datagrid/osds-datagrid.e2e.ts b/packages/components/datagrid/src/components/osds-datagrid/osds-datagrid.e2e.ts
@@ -57,6 +57,21 @@ describe('e2e:osds-datagrid', () => {
     expect(selectableHeader).not.toBe(null);
   });
 
+  it('should deselect all selected columns after toggle isSelectable', async() => {
+    await setup({ attributes: {
+      columns: JSON.stringify([{ field: 'name', title: 'Name' }, { field: 'firstname', title: 'Firstname' }]),
+      isSelectable: true,
+      rows: JSON.stringify([{ firstname: 'Simpson', name: 'Homer' }]),
+    } });
+    const selectableRow = await table?.find('.tabulator-row input[type="checkbox"]');
+    await selectableRow?.click();
+    expect(await selectableRow?.getProperty('checked')).toBe(true);
+
+    el.setProperty('isSelectable', false);
+    await page.waitForChanges();
+    expect(await selectableRow?.getProperty('checked')).toBe(false);
+  });
+
   it('should select all rows', async() => {
     await setup({ attributes: {
       columns: JSON.stringify([{ field: 'name', title: 'Name' }, { field: 'firstname', title: 'Firstname' }]),

diff --git a/packages/components/datagrid/src/components/osds-datagrid/osds-datagrid.scss b/packages/components/datagrid/src/components/osds-datagrid/osds-datagrid.scss
@@ -30,11 +30,15 @@
 
         &:checked::before {
             background-color: var(--ods-color-primary-500);
+            /* stylelint-disable-next-line property-no-vendor-prefix */
+            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath stroke-linecap='round' stroke-width='2' d='M4 13l5 5M20 7L9 18'/%3E%3Cpath fill='%23000000' d='M19.293 6.293a1 1 0 011.414 1.414l-11 11a.995.995 0 01-.53.277l-.118.014h-.118a.996.996 0 01-.648-.29l-5-5a1 1 0 011.414-1.415L9 16.585z'/%3E%3C/g%3E%3C/svg%3E"); 
             mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath stroke-linecap='round' stroke-width='2' d='M4 13l5 5M20 7L9 18'/%3E%3Cpath fill='%23000000' d='M19.293 6.293a1 1 0 011.414 1.414l-11 11a.995.995 0 01-.53.277l-.118.014h-.118a.996.996 0 01-.648-.29l-5-5a1 1 0 011.414-1.415L9 16.585z'/%3E%3C/g%3E%3C/svg%3E");
         }
 
         &:indeterminate::before {
             background-color: var(--ods-color-primary-500);
+            /* stylelint-disable-next-line property-no-vendor-prefix */
+            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' fill-rule='evenodd' d='M20 11a1 1 0 010 2H4a1 1 0 010-2h16z'/%3E%3C/svg%3E"); 
             mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' fill-rule='evenodd' d='M20 11a1 1 0 010 2H4a1 1 0 010-2h16z'/%3E%3C/svg%3E");
         }
     }

diff --git a/packages/components/datagrid/src/components/osds-datagrid/osds-datagrid.tsx b/packages/components/datagrid/src/components/osds-datagrid/osds-datagrid.tsx
@@ -84,6 +84,9 @@ export class OsdsDatagrid implements OdsDatagridAttribute, OdsDatagridEvent {
     const columns = this.controler.getColumns();
     this.table?.setColumns(this.controler.getTabulatorColumns(columns));
     this.setColumnsHeight();
+    if (!this.isSelectable) {
+      this.table?.getRows().forEach((row) => row.deselect());
+    }
   }
 
   @Listen('odsCheckedChange')

diff --git a/packages/components/datagrid/src/index.html b/packages/components/datagrid/src/index.html
@@ -18,8 +18,8 @@
 </head>
 <body>
   <osds-datagrid id="datagridFormatter" is-selectable height="600"></osds-datagrid>
-
-  <!-- <h1>With sorted column</h1>
+  <button id="buttonDatagrid">Toggle isSelectable</button>
+  <h1>With sorted column</h1>
   <osds-datagrid
     id="datagridFormatter"
     columns='[{"title":"Name", "field":"name", "isSortable": true}, {"title":"Firstname", "field":"firstname", "isSortable": true}, {"title":"Gender", "field":"gender"}]'
@@ -41,7 +41,7 @@ <h1>Empty state</h1>
     rows='[]'
     no-result-label="Aucune données de renseignée"
     height="100">
-  </osds-datagrid> -->
+  </osds-datagrid>
 
   <style>
     :root {
@@ -51,6 +51,10 @@ <h1>Empty state</h1>
 
   <script>
     const datagrid = document.getElementById('datagridFormatter');
+    const button = document.getElementById('buttonDatagrid');
+    button.addEventListener('click', () => {
+      datagrid.isSelectable = !datagrid.isSelectable;
+    });
     datagrid.addEventListener('odsSortChange', (data) => console.log('odsSortChange', data));
     datagrid.addEventListener('odsRowSelectedChange', (data) => console.log('odsRowSelectedChange', data))
 

diff --git a/packages/components/datagrid/src/jestStub.js b/packages/components/datagrid/src/jestStub.js
@@ -20,6 +20,11 @@ class TabulatorFullStub {
   getColumns() {
     return [];
   }
+
+  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+  getRows() {
+    return [];
+  }
 }
 
 // eslint-disable-next-line no-undef