From fc4943b4bdae0032af5ed0581ca1048b9538209d Mon Sep 17 00:00:00 2001
From: Juanfran <juanfran.ag@gmail.com>
Date: Wed, 6 Sep 2023 15:03:51 +0200
Subject: [PATCH] feat(attachments): u#3728 download attachment

---
 .../attachment/attachment.component.css       |  6 ++++++
 .../attachment/attachment.component.html      |  6 ++++--
 .../attachment/attachment.component.ts        | 19 +++++++++++++++++--
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/javascript/apps/taiga/src/app/shared/attachments/components/attachment/attachment.component.css b/javascript/apps/taiga/src/app/shared/attachments/components/attachment/attachment.component.css
index 014121888..9e5e623f8 100644
--- a/javascript/apps/taiga/src/app/shared/attachments/components/attachment/attachment.component.css
+++ b/javascript/apps/taiga/src/app/shared/attachments/components/attachment/attachment.component.css
@@ -15,6 +15,12 @@ Copyright (c) 2023-present Kaleidos INC
 .row {
   block-size: var(--spacing-32);
   padding-block: var(--spacing-4);
+
+  &:hover {
+    background-color: var(--color-gray20);
+    border-radius: var(--spacing-4);
+    cursor: pointer;
+  }
 }
 
 .name-column {
diff --git a/javascript/apps/taiga/src/app/shared/attachments/components/attachment/attachment.component.html b/javascript/apps/taiga/src/app/shared/attachments/components/attachment/attachment.component.html
index a0ef476ea..6c891532e 100644
--- a/javascript/apps/taiga/src/app/shared/attachments/components/attachment/attachment.component.html
+++ b/javascript/apps/taiga/src/app/shared/attachments/components/attachment/attachment.component.html
@@ -17,7 +17,8 @@
     (confirm)="onConfirmDeleteFile()">
     <tg-ui-dtable-row
       class="row"
-      data-test="attachment-row">
+      data-test="attachment-row"
+      (click)="downloadAttachment()">
       <tg-ui-dtable-cell
         class="name-column"
         [attr.title]="attachment.name">
@@ -53,6 +54,7 @@
         </tg-ui-dtable-cell>
         <tg-ui-dtable-cell class="actions-column">
           <a
+            #download
             [download]="attachment.name"
             [href]="attachment.file"
             target="_blank"
@@ -75,7 +77,7 @@
             [tgUiTooltip]="t('attachments.delete')"
             [tgUiTooltipStaysOpenOnHover]="false"
             tgUiTooltipPosition="bottom-right"
-            (click)="deleteAttachment()"
+            (click)="deleteAttachment($event)"
             icon="trash"
             type="button"></button>
         </tg-ui-dtable-cell>
diff --git a/javascript/apps/taiga/src/app/shared/attachments/components/attachment/attachment.component.ts b/javascript/apps/taiga/src/app/shared/attachments/components/attachment/attachment.component.ts
index 1d8526671..3b8d26d13 100644
--- a/javascript/apps/taiga/src/app/shared/attachments/components/attachment/attachment.component.ts
+++ b/javascript/apps/taiga/src/app/shared/attachments/components/attachment/attachment.component.ts
@@ -6,7 +6,14 @@
  * Copyright (c) 2023-present Kaleidos INC
  */
 
-import { Component, Input, OnChanges, inject } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  ViewChild,
+  inject,
+} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TranslocoModule } from '@ngneat/transloco';
 import { TuiButtonModule, TuiSvgModule } from '@taiga-ui/core';
@@ -51,6 +58,9 @@ export class AttachmentComponent implements OnChanges {
   @Input()
   public canEdit = true;
 
+  @ViewChild('download', { read: ElementRef })
+  public download!: ElementRef<HTMLElement>;
+
   public extension = 'paperclip';
   public state = inject(AttachmentsState);
   #initUndo$ = new Subject<void>();
@@ -103,7 +113,8 @@ export class AttachmentComponent implements OnChanges {
     return 'progress' in attachment;
   };
 
-  public deleteAttachment() {
+  public deleteAttachment(event: Event) {
+    event.stopPropagation();
     this.#initUndo$.next();
   }
 
@@ -113,6 +124,10 @@ export class AttachmentComponent implements OnChanges {
     }
   }
 
+  public downloadAttachment() {
+    this.download.nativeElement.click();
+  }
+
   public ngOnChanges() {
     this.calculateExtension();
   }