Merge pull request #3177 from SMassola/issue-3169-b

feat: add file item as template outlet context to file actions

Author: zvonimirfras

src/file-uploader/file-uploader.stories.ts

@@ -1,3 +1,5 @@
+/* tslint:disable variable-name */
+
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { Meta, moduleMetadata } from "@storybook/angular";
 import { ButtonModule } from "../button";

src/file-uploader/file.component.ts

@@ -31,7 +31,8 @@ import { FileItem } from "./file-item.interface";
 			</svg>
 			<ng-template
 				*ngIf="isTemplate(actionsTpl); else defaultActions"
-				[ngTemplateOutlet]="actionsTpl">
+				[ngTemplateOutlet]="actionsTpl"
+				[ngTemplateOutletContext]="{ $implicit: fileItem }">
 			</ng-template>
 			<ng-template #defaultActions>
 				<button

src/file-uploader/file.stories.ts

@@ -1,3 +1,5 @@
+/* tslint:disable variable-name */
+
 import { Meta, moduleMetadata } from "@storybook/angular";
 
 import { ButtonModule } from "../button";

src/file-uploader/stories/uploader-custom-file.component.ts

@@ -5,6 +5,8 @@ import { FileItem } from "../";
 @Component({
 	selector: "app-file-uploader-with-custom-file",
 	template: `
+		<p *ngIf="lastViewedFile">Last viewed file: {{ lastViewedFile | json }}</p>
+		<p *ngIf="lastDownloadedFile">Last downloaded file: {{ lastDownloadedFile | json }}</p>
 		<cds-file-uploader
 			[title]="title"
 			[description]="description"
@@ -32,25 +34,30 @@ import { FileItem } from "../";
 			<a href="#" cdsLink>{{ fileItem.file.name }}</a>
 		</ng-template>
 
-		<ng-template #actionsTpl>
+		<ng-template #actionsTpl let-fileItem>
 			<button
 				ibmButton="ghost"
 				iconOnly="true"
 				aria-label="View"
-				[size]="fileItemSize">
+				[size]="fileItemSize"
+				(click)="onViewClick(fileItem)">
 				<svg ibmIcon="view" size="16"></svg>
 			</button>
 			<button
 				ibmButton="ghost"
 				iconOnly="true"
 				aria-label="Download"
-				[size]="fileItemSize">
+				[size]="fileItemSize"
+				(click)="onDownloadClick(fileItem)">
 				<svg ibmIcon="download" size="16"></svg>
 			</button>
 		</ng-template>
 	`
 })
 export class FileUploaderWithCustomFileStory {
+	lastViewedFile: FileItem | null = null;
+	lastDownloadedFile: FileItem | null = null;
+
 	@Input() files = new Set<FileItem>();
 	@Input() title;
 	@Input() description;
@@ -65,6 +72,14 @@ export class FileUploaderWithCustomFileStory {
 
 	protected maxSize = 500000;
 
+	onViewClick(file: FileItem) {
+		this.lastViewedFile = file;
+	}
+
+	onDownloadClick(file: FileItem) {
+		this.lastDownloadedFile = file;
+	}
+
 	onUpload() {
 		this.files.forEach((fileItem) => {
 			if (!fileItem.uploaded) {