Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | 2x 2x 2x 2x 2x 2x 6x 6x 6x 6x 6x 4x 4x 5x 5x 7x 7x 5x 3x 2x 2x 2x 1x 1x 2x 3x 3x 3x 3x 3x 4x | import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
DestroyRef,
ElementRef,
OnInit,
ViewChild,
inject,
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ShoppingFacade } from 'ish-core/facades/shopping.facade';
import { SkuQuantityType } from 'ish-core/models/product/product.model';
import { CsvImportData, CsvImportHandler, CsvImportStatus } from 'ish-core/utils/csv/csv.import-handler';
@Component({
selector: 'ish-quickorder-csv-form',
templateUrl: './quickorder-csv-form.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class QuickorderCsvFormComponent implements OnInit {
csvForm: FormGroup;
status: CsvImportStatus = 'Default';
// not-dead-code
productsFromCsv: SkuQuantityType[] = [];
private quickOrderHeaders: string[] = ['Product ID', 'Quantity'];
private readonly destroyRef = inject(DestroyRef);
@ViewChild('fileInput') fileInput: ElementRef<HTMLInputElement>;
constructor(private shoppingFacade: ShoppingFacade, private cdRef: ChangeDetectorRef, private fb: FormBuilder) {}
ngOnInit(): void {
this.productsFromCsv = [];
this.csvForm = this.fb.group({
csvFile: [undefined],
});
}
onFileChange(event: Event) {
const input = event.target as HTMLInputElement;
const file = input.files?.[0];
Iif (!file) {
return;
}
CsvImportHandler.processCsvFile(file, this.quickOrderHeaders)
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe({
next: fileContent => {
this.parseCsvData(fileContent);
this.cdRef.markForCheck();
},
error: error => {
this.status = error as CsvImportStatus;
this.cdRef.markForCheck();
},
});
}
// not-dead-code
parseCsvData(csvData: CsvImportData) {
try {
this.productsFromCsv = csvData.data
.map(line => line.split(','))
.map(columns => ({
sku: columns[0].trim(),
quantity: +columns[1].trim(),
}))
.filter(record => record.sku && !isNaN(record.quantity));
this.status = 'Valid';
} catch (error) {
this.status = 'InvalidData';
this.productsFromCsv = [];
}
}
addCsvToCart() {
if (this.productsFromCsv.length > 0) {
this.productsFromCsv.forEach(product => {
this.shoppingFacade.addProductToBasket(product.sku, product.quantity);
});
}
this.resetInput();
}
resetInput() {
this.productsFromCsv = [];
this.status = 'Default';
this.csvForm.reset();
if (this.fileInput) {
this.fileInput.nativeElement.value = '';
}
}
get isCsvDisabled() {
return this.status !== 'Valid';
}
}
|