fix: change implem to extra column to avoid formatting issues

opendatasoft · Nov 13, 2024 · 87e64cc · 87e64cc
1 parent fec030e
commit 87e64cc
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 61 deletions.
diff --git a/packages/visualizations/src/components/Table/Cell/Cell.svelte b/packages/visualizations/src/components/Table/Cell/Cell.svelte
@@ -1,44 +1,21 @@
 <script lang="ts">
     import type { Column } from '../types';
     import Format, { isValidRawValue } from './Format';
-    import ZoomIcon from './ZoomIcon.svelte';
 
     export let rawValue: unknown;
     export let column: Column;
-    export let onClick: (() => void) | null;
-    export let isRowHovered = false;
 
     $: ({ dataFormat, options = {} } = column);
 </script>
 
 <!-- To display a format value, rawValue must be different from undefined or null -->
 <td class={`table-data--${dataFormat}`}>
-    <div class="cell-wrapper">
-        {#if onClick}
-            <button on:click={onClick} class:visible={isRowHovered}>
-                <ZoomIcon />
-            </button>
-        {/if}
-        <div class="value-container">
-            {#if isValidRawValue(rawValue)}
-                <svelte:component this={Format[dataFormat]} {rawValue} {...options} />
-            {/if}
-        </div>
-    </div>
+    {#if isValidRawValue(rawValue)}
+        <svelte:component this={Format[dataFormat]} {rawValue} {...options} />
+    {/if}
 </td>
 
 <style>
-    .cell-wrapper {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding-right: 6px;
-    }
-    .value-container {
-        flex-shrink: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
     :global(.ods-dataviz--default td) {
         padding: var(--spacing-75);
     }
@@ -66,29 +43,4 @@
     :global(.ods-dataviz--default td.table-data--number) {
         text-align: right;
     }
-
-    :global(.ods-dataviz--default) button {
-        background-color: transparent;
-        color: #142e7b;
-        border-radius: 50%;
-        height: 28px;
-        width: 28px;
-        margin-right: 3px;
-        padding: 6px;
-        border: none;
-        box-shadow: none;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        visibility: hidden;
-    }
-
-    :global(.ods-dataviz--default) button:hover {
-        background-color: #e2e6ee;
-        cursor: pointer;
-    }
-
-    :global(.ods-dataviz--default) button.visible {
-        visibility: visible;
-    }
 </style>
diff --git a/packages/visualizations/src/components/Table/Headers/Headers.svelte b/packages/visualizations/src/components/Table/Headers/Headers.svelte
@@ -3,11 +3,15 @@
     import type { Column } from '../types';
 
     export let columns: Column[];
+    export let extraButtonColumn = false;
 </script>
 
 <thead>
     <tr>
         {#each columns as column}
+            {#if extraButtonColumn}
+                <th />
+            {/if}
             <th class={`table-header--${column.dataFormat}`}>
                 {#if column.onClick}
                     <SortButton

diff --git a/packages/visualizations/src/components/Table/Row.svelte b/packages/visualizations/src/components/Table/Row.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import Cell from './Cell';
+    import ZoomIcon from './ZoomIcon.svelte';
     import type { Column, Rows } from './types';
 
     export let columns: Column[];
@@ -29,18 +30,18 @@
 </script>
 
 <tr on:mouseenter={onMouseEnter} on:mouseleave={onMouseLeave}>
-    {#each columns as column, index}
-        <Cell
-            rawValue={record[column.key]}
-            {column}
-            onClick={index === 0 && rows?.onClick ? onClick : null}
-            {isRowHovered}
-        />
+    {#if rows?.onClick}
+        <td class="button-cell">
+            <button on:click={onClick} class:visible={isRowHovered}>
+                <ZoomIcon />
+            </button>
+        </td>
+    {/if}
+    {#each columns as column}
+        <Cell rawValue={record[column.key]} {column} />
     {/each}
 </tr>
 
-<!-- markup (zero or more items) goes here -->
-
 <style>
     :global(.ods-dataviz--default) tr {
         border-bottom: 1px solid var(--border-color);
@@ -49,4 +50,34 @@
     :global(.ods-dataviz--default) tr:last-child {
         border-bottom: none;
     }
+
+    :global(.ods-dataviz--default) button {
+        background-color: transparent;
+        color: #142e7b;
+        border-radius: 50%;
+        height: 28px;
+        width: 28px;
+        padding: 6px;
+        margin-right: -6px; /* cancels next cell padding */
+        border: none;
+        box-shadow: none;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        visibility: hidden;
+    }
+
+    :global(.ods-dataviz--default) button:hover {
+        background-color: #e2e6ee;
+        cursor: pointer;
+    }
+
+    :global(.ods-dataviz--default) button.visible {
+        visibility: visible;
+    }
+
+    :global(.ods-dataviz--default) .button-cell {
+        padding: 0;
+        padding-left: 6px;
+    }
 </style>
diff --git a/packages/visualizations/src/components/Table/Table.svelte b/packages/visualizations/src/components/Table/Table.svelte
@@ -16,7 +16,7 @@
 
 <div class="scrollbox">
     <table aria-describedby={description ? tableId : undefined}>
-        <Headers {columns} />
+        <Headers {columns} extraButtonColumn={Boolean(rows?.onClick)} />
         <Body {loadingRowsNumber} {records} {columns} {rows} {emptyStateLabel} />
     </table>
 </div>

diff --git a/packages/visualizations/src/components/Table/TableCard.svelte b/packages/visualizations/src/components/Table/TableCard.svelte
@@ -12,6 +12,7 @@
     export let options: $$Props['options'];
 
     $: ({ value: records, loading: isLoading } = data);
+
     $: ({
         columns,
         rows,

diff --git a/...src/components/Table/Cell/ZoomIcon.svelte → ...ions/src/components/Table/ZoomIcon.svelte b/...src/components/Table/Cell/ZoomIcon.svelte → ...ions/src/components/Table/ZoomIcon.svelte
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,7 @@ @@
         export let options: $$Props['options'];
         $: ({ value: records, loading: isLoading } = data);
         $: ({
             columns,
             rows,
@@ Expand Down @@