feat: upload CSV file

Author: gultyayev

src/app/admin/admin.module.ts

@@ -7,10 +7,18 @@ import { MatTableModule } from '@angular/material/table';
 import { OrdersService } from './orders/orders.service';
 import { ManageProductsComponent } from './manage-products/manage-products.component';
 import { MatButtonModule } from '@angular/material/button';
+import { FilePickerModule } from '../shared/file-picker/file-picker.module';
+import { ManageProductsService } from './manage-products/manage-products.service';
 
 @NgModule({
   declarations: [OrdersComponent, ManageProductsComponent],
-  imports: [CommonModule, AdminRoutingModule, MatTableModule, MatButtonModule],
-  providers: [OrdersService],
+  imports: [
+    CommonModule,
+    AdminRoutingModule,
+    MatTableModule,
+    MatButtonModule,
+    FilePickerModule,
+  ],
+  providers: [OrdersService, ManageProductsService],
 })
 export class AdminModule {}

src/app/admin/manage-products/manage-products.component.html

@@ -1,5 +1,10 @@
 <h1>Manage products</h1>
 
+<app-file-picker
+  [(file)]="selectedFile"
+  (uploadClick)="onUploadCSV()"
+></app-file-picker>
+
 <table class="w-100" [dataSource]="products$" mat-table>
   <ng-container matColumnDef="from">
     <th mat-header-cell *matHeaderCellDef>Title</th>

src/app/admin/manage-products/manage-products.component.ts

@@ -1,7 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Product } from '../../products/product.interface';
 import { ProductsService } from '../../products/products.service';
+import { ManageProductsService } from './manage-products.service';
 
 @Component({
   selector: 'app-manage-products',
@@ -11,11 +12,30 @@ import { ProductsService } from '../../products/products.service';
 export class ManageProductsComponent implements OnInit {
   readonly columns = ['from', 'description', 'price', 'count', 'action'];
 
+  selectedFile: File | null = null;
+
   products$!: Observable<Product[]>;
 
-  constructor(private readonly productsService: ProductsService) {}
+  constructor(
+    private readonly productsService: ProductsService,
+    private readonly manageProductsService: ManageProductsService,
+    private readonly cdr: ChangeDetectorRef
+  ) {}
 
   ngOnInit(): void {
     this.products$ = this.productsService.getProducts();
   }
+
+  onUploadCSV(): void {
+    if (!this.selectedFile) {
+      return;
+    }
+
+    this.manageProductsService
+      .uploadProductsCSV(this.selectedFile)
+      .subscribe(() => {
+        this.selectedFile = null;
+        this.cdr.markForCheck();
+      });
+  }
 }

src/app/admin/manage-products/manage-products.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ManageProductsService } from './manage-products.service';
+
+describe('ManageProductsService', () => {
+  let service: ManageProductsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ManageProductsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/admin/manage-products/manage-products.service.ts

@@ -0,0 +1,41 @@
+import { Injectable, Injector } from '@angular/core';
+import { EMPTY, Observable } from 'rxjs';
+import { ApiService } from '../../core/api.service';
+import { switchMap } from 'rxjs/operators';
+
+@Injectable()
+export class ManageProductsService extends ApiService {
+  constructor(injector: Injector) {
+    super(injector);
+  }
+
+  uploadProductsCSV(file: File): Observable<unknown> {
+    if (!this.endpointEnabled('import')) {
+      console.warn(
+        'Endpoint "import" is disabled. To enable change your environment.ts config'
+      );
+      return EMPTY;
+    }
+
+    return this.getPreSignedUrl(file.name).pipe(
+      switchMap((url) =>
+        this.http.put(url, file, {
+          headers: {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            'Content-Type': 'text/csv',
+          },
+        })
+      )
+    );
+  }
+
+  private getPreSignedUrl(fileName: string): Observable<string> {
+    const url = this.getUrl('import', 'import');
+
+    return this.http.get<string>(url, {
+      params: {
+        name: fileName,
+      },
+    });
+  }
+}

src/app/products/products.service.ts

@@ -10,6 +10,9 @@ import { ApiService } from '../core/api.service';
 export class ProductsService extends ApiService {
   getProducts(): Observable<Product[]> {
     if (!this.endpointEnabled('bff')) {
+      console.warn(
+        'Endpoint "bff" is disabled. To enable change your environment.ts config'
+      );
       return this.http.get<Product[]>('/assets/products.json');
     }
 

src/app/shared/file-picker/file-picker.component.html

@@ -0,0 +1,25 @@
+<input
+  #fileInput
+  (change)="selectFile(fileInput.files)"
+  accept="text/csv"
+  class="d-none"
+  type="file"
+/>
+
+<div class="h5 text-muted d-flex align-items-center">
+  <ng-container *ngIf="file; else selectFileTemplate">
+    <span class="mr-3">Selected file: {{ file.name }}</span>
+
+    <button (click)="uploadClick.emit()" color="primary" mat-flat-button>
+      Upload
+    </button>
+    <button (click)="removeFile()" color="warn" mat-flat-button>Delete</button>
+  </ng-container>
+</div>
+
+<ng-template #selectFileTemplate>
+  <span class="mr-3">Select file to upload</span>
+  <button (click)="fileInput.click()" color="accent" mat-flat-button>
+    Select file
+  </button>
+</ng-template>

src/app/shared/file-picker/file-picker.component.scss

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilePickerComponent } from './file-picker.component';
+
+describe('FilePickerComponent', () => {
+  let component: FilePickerComponent;
+  let fixture: ComponentFixture<FilePickerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FilePickerComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilePickerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/file-picker/file-picker.component.spec.ts

@@ -0,0 +1,35 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-file-picker',
+  templateUrl: './file-picker.component.html',
+  styleUrls: ['./file-picker.component.scss'],
+})
+export class FilePickerComponent {
+  @Input() file: File | null = null;
+
+  @Output() fileChange = new EventEmitter<File | null>();
+  @Output() uploadClick = new EventEmitter<void>();
+
+  selectFile(files: FileList | null): void {
+    if (!files?.length) {
+      this.removeFile();
+      return;
+    }
+
+    const file = files.item(0) as File;
+
+    if (!['text/csv', 'application/vnd.ms-excel'].includes(file.type)) {
+      this.removeFile();
+      return;
+    }
+
+    this.fileChange.emit(file);
+    this.file = file;
+  }
+
+  removeFile(): void {
+    this.file = null;
+    this.fileChange.emit(null);
+  }
+}