[IndexTable] - Importer un document au click d'une ligne

[mbriand-lucca]

Hello team LF !

We must import a document when clicking on an indexTable row. We want to be able to click anywhere on the row, not just on a specific part of it.

Initially, we thought about having a button and replacing a column with this "import a file" button. However, we realized that when using the following code, the size of the row changes, so we end up with rows containing this code being larger than those that don't :

<label>
   <input
      (change)="import($event.target.files)"
      (cancel)="$event.stopPropagation()"
      type="file"
      accept=".pdf, .jpg, .jpeg, .png"
      class="u-mask"
    />
   <span class="button">{{ 'Toto' | tr }}</span>
</label>

As a result, we decided to hide the entire input, but other issues arose: "How do we enable clicking while hiding this part," especially since our table is managed via a ngFor. We had to implement some hacks, handling the click on the TypeScript side, but we wonder if what we did is fully accessible. @vvalentin-lucca maybe you could help us with this.

Here is the PR that attempted this: https://github.com/LuccaSA/Cleemy.Procurement/pull/5191

We were also wondering if it’s possible to enable actions on row clicks without having to select only a specific element of the row. Do others need to import upon clicking a row?