From aa074ee1355de94880074b3cf4e6c6ed18cff01e Mon Sep 17 00:00:00 2001
From: Alexandre Esteves <alexandre.esteves.ae@gmail.com>
Date: Fri, 10 Nov 2023 10:40:05 +0100
Subject: [PATCH] fix(datagrid): icons & isSelectable toggle

---
 .../components/osds-datagrid/osds-datagrid.e2e.ts | 15 +++++++++++++++
 .../components/osds-datagrid/osds-datagrid.scss   |  2 ++
 .../components/osds-datagrid/osds-datagrid.tsx    |  3 +++
 packages/components/datagrid/src/index.html       | 10 +++++++---
 4 files changed, 27 insertions(+), 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
index 1c8093666a..15187884a3 100644
--- 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
index 4e5a4782a8..9d86101002 100644
--- 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,13 @@
 
         &:checked::before {
             background-color: var(--ods-color-primary-500);
+            -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);
+            -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
index d534b1dd18..f9ff6eb183 100644
--- 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
index b83a98b111..938ee61fd5 100644
--- 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))