CSV Download (#128)

* Change CSV builder to allow expansion of type mapper and add Customer CSV DTO

* Frontend: Export as CSV for Products and Customers

Src/Application/Common/Interfaces/ICsvBuilder.cs

@@ -0,0 +1,6 @@
+namespace Northwind.Application.Common.Interfaces;
+
+public interface ICsvBuilder
+{
+    Task<byte[]> GetCsvBytes<T>(IEnumerable<T> records);
+}

Src/Application/Customers/Queries/GetCustomersCsv/CustomerCsvLookupDto.cs

@@ -0,0 +1,18 @@
+using AutoMapper;
+using Northwind.Application.Common.Mappings;
+using Northwind.Domain.Customers;
+
+namespace Northwind.Application.Customers.Queries.GetCustomersCsv;
+
+public class CustomerCsvLookupDto : IMapFrom<Customer>
+{
+    public required string Id { get; init; }
+    public required string Name { get; init; }
+
+    public void Mapping(Profile profile)
+    {
+        profile.CreateMap<Customer, CustomerCsvLookupDto>()
+            .ForMember(d => d.Id, opt => opt.MapFrom(s => s.Id.Value))
+            .ForMember(d => d.Name, opt => opt.MapFrom(s => s.CompanyName));
+    }
+}

Src/Application/Customers/Queries/GetCustomersCsv/CustomersCsvVm.cs

@@ -0,0 +1,8 @@
+namespace Northwind.Application.Customers.Queries.GetCustomersCsv;
+
+public class CustomersCsvVm
+{
+    public required byte[] Data { get; set; }
+    public required string FileName { get; set; }
+    public readonly string ContentType = "text/csv";
+}

Src/Application/Customers/Queries/GetCustomersCsv/GetCustomersCsvQuery.cs

@@ -0,0 +1,31 @@
+using AutoMapper;
+using AutoMapper.QueryableExtensions;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+using Northwind.Application.Common.Interfaces;
+
+namespace Northwind.Application.Customers.Queries.GetCustomersCsv;
+
+public sealed record GetCustomersCsvQuery : IRequest<CustomersCsvVm>;
+
+public sealed class GetCustomersCsvQueryHandler(
+    INorthwindDbContext context,
+    IMapper mapper,
+    IDateTime dateTime,
+    ICsvBuilder csvBuilder) : IRequestHandler<GetCustomersCsvQuery, CustomersCsvVm>
+{
+    public async Task<CustomersCsvVm> Handle(GetCustomersCsvQuery request, CancellationToken cancellationToken)
+    {
+        IEnumerable<CustomerCsvLookupDto> customers = await context.Customers
+            .ProjectTo<CustomerCsvLookupDto>(mapper.ConfigurationProvider)
+            .ToListAsync(cancellationToken);
+
+        byte[] data = await csvBuilder.GetCsvBytes(customers);
+
+        return new CustomersCsvVm
+        {
+            Data = data,
+            FileName = $"{dateTime.Now:yyyy-MM-dd}-Products.csv",
+        };
+    }
+}

Src/Application/Products/Queries/GetProductsFile/GetProductsFileQuery.cs

@@ -9,10 +9,9 @@
 
 namespace Northwind.Application.Products.Queries.GetProductsFile;
 
-public record GetProductsFileQuery : IRequest<ProductsFileVm>;
+public sealed record GetProductsFileQuery : IRequest<ProductsFileVm>;
 
-// ReSharper disable once UnusedType.Global
-public class GetProductsFileQueryHandler(INorthwindDbContext context, ICsvFileBuilder fileBuilder, IMapper mapper,
+public sealed class GetProductsFileQueryHandler(INorthwindDbContext context, ICsvBuilder fileBuilder, IMapper mapper,
         IDateTime dateTime)
     : IRequestHandler<GetProductsFileQuery, ProductsFileVm>
 {
@@ -22,7 +21,7 @@ public async Task<ProductsFileVm> Handle(GetProductsFileQuery request, Cancellat
             .ProjectTo<ProductRecordDto>(mapper.ConfigurationProvider)
             .ToListAsync(cancellationToken);
 
-        var fileContent = fileBuilder.BuildProductsFile(records);
+        var fileContent = await fileBuilder.GetCsvBytes(records);
 
         var vm = new ProductsFileVm
         {

Src/Infrastructure/DependencyInjection.cs

@@ -26,7 +26,7 @@ public static IServiceCollection AddInfrastructure(this IServiceCollection servi
 
     private static void AddFiles(IServiceCollection services)
     {
-        services.AddTransient<ICsvFileBuilder, CsvFileBuilder>();
+        services.AddTransient<ICsvBuilder, CsvBuilder>();
     }
 
     private static void AddServices(IServiceCollection services)

Src/Infrastructure/Files/CsvBuilder.cs

@@ -0,0 +1,21 @@
+using CsvHelper;
+using Northwind.Application.Common.Interfaces;
+using System.Globalization;
+
+namespace Northwind.Infrastructure.Files;
+
+public class CsvBuilder : ICsvBuilder
+{
+    public Task<byte[]> GetCsvBytes<T>(IEnumerable<T> records)
+    {
+        using var stream = new MemoryStream();
+        using var streamWriter = new StreamWriter(stream);
+        using (var csvWriter = new CsvWriter(streamWriter, CultureInfo.InvariantCulture))
+        {
+            csvWriter.Context.ConfigureMappingProvider<T>();
+            csvWriter.WriteRecords(records);
+        }
+
+        return Task.FromResult(stream.ToArray());
+    }
+}

Src/Infrastructure/Files/CsvMapProviders.cs

@@ -0,0 +1,20 @@
+using CsvHelper;
+using Northwind.Application.Customers.Queries.GetCustomersCsv;
+using Northwind.Application.Products.Queries.GetProductsFile;
+
+namespace Northwind.Infrastructure.Files;
+
+public static class CsvMapProviders
+{
+    private static readonly IReadOnlyDictionary<Type, Action<CsvContext>> TypeConfiguration = new Dictionary<Type, Action<CsvContext>>
+    {
+        { typeof(ProductRecordDto), context => context.RegisterClassMap<ProductFileRecordMap>() },
+        { typeof(CustomerCsvLookupDto), context => context.RegisterClassMap<CustomerFileRecordMap>() },
+    };
+
+    public static void ConfigureMappingProvider<T>(
+        this CsvContext csvContext)
+    {
+        TypeConfiguration.GetValueOrDefault(typeof(T))?.Invoke(csvContext);
+    }
+}

Src/Infrastructure/Files/CustomerFileRecordMap.cs

@@ -0,0 +1,13 @@
+using CsvHelper.Configuration;
+using Northwind.Application.Customers.Queries.GetCustomersCsv;
+using System.Globalization;
+
+namespace Northwind.Infrastructure.Files;
+
+public sealed class CustomerFileRecordMap : ClassMap<CustomerCsvLookupDto>
+{
+    public CustomerFileRecordMap()
+    {
+        AutoMap(CultureInfo.InvariantCulture);
+    }
+}

Src/WebUI/ClientApp/package.json

@@ -28,6 +28,7 @@
     "angular-feather": "^6.0.2",
     "aspnet-prerendering": "^3.0.1",
     "bootstrap": "^5.2.3",
+    "file-saver": "^2.0.5",
     "jquery": "^3.6.4",
     "ngx-bootstrap": "^5.1.1",
     "popper.js": "^1.16.0",
@@ -40,6 +41,7 @@
     "@angular-devkit/build-angular": "^15.2.7",
     "@angular/cli": "^15.2.7",
     "@angular/compiler-cli": "^15.2.8",
+    "@types/file-saver": "^2.0.7",
     "@types/jasmine": "~4.3.1",
     "@types/jasminewd2": "~2.0.10",
     "@types/node": "^18.16.3",

Src/WebUI/ClientApp/src/app/customers/customers.component.html

@@ -2,8 +2,10 @@
   <h1 class="h2">Customers</h1>
   <div class="btn-toolbar mb-2 mb-md-0">
     <div class="btn-group mr-2">
-      <button class="btn btn-sm btn-outline-secondary">Share</button>
-      <button class="btn btn-sm btn-outline-secondary">Export</button>
+      <button class="btn btn-sm btn-outline-secondary"
+              (click)="exportAsCsv()">
+        Export
+      </button>
     </div>
   </div>
 </div>

Src/WebUI/ClientApp/src/app/customers/customers.component.ts

@@ -1,29 +1,38 @@
-import { Component } from '@angular/core';
-import { Client, CustomerDetailVm, CustomersListVm } from '../northwind-traders-api';
+import { Component, inject, OnInit } from '@angular/core';
+import { Client, CustomersListVm } from '../northwind-traders-api';
 import { CustomerDetailComponent } from '../customer-detail/customer-detail.component';
-import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { saveAs } from 'file-saver';
 
 @Component({
   selector: 'app-customers',
   templateUrl: './customers.component.html'
 })
-export class CustomersComponent {
+export class CustomersComponent implements OnInit {
+  private client = inject(Client);
+  private modalService =inject(BsModalService);
 
   public vm: CustomersListVm = new CustomersListVm();
-  private bsModalRef: BsModalRef;
 
-  constructor(private client: Client, private modalService: BsModalService) {
-    client.getCustomersList().subscribe(result => {
+  ngOnInit(): void {
+    this.client.getCustomersList().subscribe(result => {
       this.vm = result;
-    }, error => console.error(error));
+    });
   }
 
   public customerDetail(id: string) {
     this.client.getCustomer(id).subscribe(result => {
       const initialState = {
         customer: result
       };
-      this.bsModalRef = this.modalService.show(CustomerDetailComponent, {initialState});
-    }, error => console.error(error));
+      this.modalService.show(CustomerDetailComponent, {initialState});
+    });
+  }
+
+  protected exportAsCsv() {
+    this.client.getCustomersCsv().subscribe(result => {
+      const blob = new Blob([result.data], { type: result.headers.contentType });
+      saveAs(blob, result.fileName);
+    });
   }
 }