Client imports, more info on client screen

API/Controllers/ClientController.cs

@@ -52,6 +52,18 @@ public async Task<IActionResult> CreateClient(ClientDto dto)
         return Ok();
     }
 
+    /// <summary>
+    /// Create several clients at once
+    /// </summary>
+    /// <param name="dtos"></param>
+    /// <returns></returns>
+    [HttpPost("create-bulk")]
+    public async Task<ActionResult> CreateClientBulk(IList<ClientDto> dtos)
+    {
+        await clientService.CreateClients(dtos);
+        return Ok();
+    }
+
     /// <summary>
     /// Update an existing client
     /// </summary>

API/Services/ClientService.cs

@@ -10,6 +10,7 @@ namespace API.Services;
 public interface IClientService
 {
     Task CreateClient(ClientDto dto);
+    Task CreateClients(IList<ClientDto> dtos);
     Task UpdateClient(ClientDto dto);
     Task DeleteClient(int id);
 }
@@ -18,6 +19,22 @@ public class ClientService(IUnitOfWork unitOfWork, ILogger<ClientService> logger
 {
 
     public async Task CreateClient(ClientDto dto)
+    {
+        await CreateClientFromDto(dto);
+        await unitOfWork.CommitAsync();
+    }
+
+    public async Task CreateClients(IList<ClientDto> dtos)
+    {
+        foreach (var dto in dtos)
+        {
+            await CreateClientFromDto(dto);
+        }
+
+        await unitOfWork.CommitAsync();
+    }
+
+    private async Task CreateClientFromDto(ClientDto dto)
     {
         if (!string.IsNullOrWhiteSpace(dto.CompanyNumber))
         {
@@ -39,7 +56,6 @@ public async Task CreateClient(ClientDto dto)
         };
 
         unitOfWork.ClientRepository.Add(client);
-        await unitOfWork.CommitAsync();
     }
 
     public async Task UpdateClient(ClientDto dto)

UI/Web/package.json

@@ -28,13 +28,15 @@
     "@angular/forms": "^20.1.1",
     "@angular/platform-browser": "^20.1.1",
     "@angular/router": "^20.1.1",
+    "@iplab/ngx-file-upload": "^20.0.0",
     "@jsverse/transloco": "^7.6.1",
     "@ng-bootstrap/ng-bootstrap": "^19.0.1",
     "@popperjs/core": "^2.11.8",
     "angular-oauth2-oidc": "^20.0.2",
     "bootstrap": "^5.3.6",
     "luxon": "^3.7.1",
     "ngx-toastr": "^19.0.0",
+    "papaparse": "^5.5.3",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
@@ -46,6 +48,7 @@
     "@angular/localize": "^20.1.1",
     "@types/jasmine": "~5.1.0",
     "@types/luxon": "^3.6.2",
+    "@types/papaparse": "^5.3.16",
     "jasmine-core": "~5.7.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",

UI/Web/public/assets/i18n/en.json

@@ -58,6 +58,26 @@
     "invoiceEmail-tooltip": "Email to receive invoices and billing-related communications"
   },
 
+  "import-client-modal": {
+    "title": "Import clients from CSV",
+    "cancel": "{{common.cancel}}",
+    "create": "{{common.create}}",
+    "close": "{{common.close}}",
+    "import": "Import",
+    "next": "Next",
+    "import-description": "Select your csv export, to mass import clients from a known source"
+  },
+
+  "client-field-pipe": {
+    "name": "Name",
+    "address": "Address",
+    "company-number": "Company Number",
+    "contact-email": "Contact Email",
+    "contact-name": "Contact Name",
+    "contact-number": "Contact Number",
+    "invoice-email": "Invoice email"
+  },
+
   "manage-delivery": {
     "loading": "Loading...",
     "new-delivery": "New Delivery",
@@ -89,6 +109,7 @@
     "from": "From",
     "to": "Recipient",
     "state": "Delivery state",
+    "size": "Size",
     "created": "Created on",
     "actions": "Actions",
     "transition": "Transition"
@@ -304,7 +325,10 @@
           "companyNumber": "Company number",
           "contactEmail": "Email",
           "contactNumber": "Phone number",
-          "actions": "{{common.actions}}"
+          "actions": "{{common.actions}}",
+          "address": "Address",
+          "invoiceEmail": "Invoice Email",
+          "contactName": "Contact Name"
         }
       }
     }

UI/Web/src/app/_pipes/client-field-pipe.ts

@@ -0,0 +1,31 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {
+  ClientField
+} from '../management/management-clients/_components/import-client-modal/import-client-modal.component';
+import {translate} from '@jsverse/transloco';
+
+@Pipe({
+  name: 'clientField'
+})
+export class ClientFieldPipe implements PipeTransform {
+
+  transform(value: ClientField): string {
+    switch (value) {
+      case ClientField.Name:
+        return translate('client-field-pipe.name');
+      case ClientField.Address:
+        return translate('client-field-pipe.address');
+      case ClientField.CompanyNumber:
+        return translate('client-field-pipe.company-number');
+      case ClientField.ContactEmail:
+        return translate('client-field-pipe.contact-email');
+      case ClientField.ContactName:
+        return translate('client-field-pipe.contact-name');
+      case ClientField.ContactNumber:
+        return translate('client-field-pipe.contact-number');
+      case ClientField.InvoiceEmail:
+        return translate('client-field-pipe.invoice-email');
+    }
+  }
+
+}

UI/Web/src/app/_services/client.service.ts

@@ -31,6 +31,10 @@ export class ClientService {
     return this.http.post<void>(this.baseUrl, dto);
   }
 
+  createBulk(dtos: Client[]): Observable<void> {
+    return this.http.post<void>(this.baseUrl+"create-bulk", dtos);
+  }
+
   update(dto: Client): Observable<void> {
     return this.http.put<void>(this.baseUrl, dto);
   }

UI/Web/src/app/browse-deliveries/browse-deliveries.component.html

@@ -12,6 +12,7 @@
         <th class="table-header-cell">{{t('from')}}</th>
         <th class="table-header-cell">{{t('to')}}</th>
         <th class="table-header-cell">{{t('state')}}</th>
+        <th class="table-header-cell">{{t('size')}}</th>
         <th class="table-header-cell">{{t('created')}}</th>
         <th class="table-header-cell">{{t('actions')}}</th>
       </tr>
@@ -23,16 +24,25 @@
       <td class="table-cell">
         <app-badge [colour]="stateBadgeColour(delivery.state)" [clickAble]="true" (click)="transitionDelivery(delivery)">{{delivery.state | deliveryState}}</app-badge>
       </td>
+      <td class="table-cell">
+        <app-badge>{{delivery.lines.length}}</app-badge>
+      </td>
       <td class="table-cell">{{ delivery.createdUtc ?? '—' | utcToLocalTime:'shortDate' }}</td>
-      <td class="table-cell d-flex align-items-center gap-2">
+      <td class="table-cell">
+
+        <div class="d-flex align-items-center gap-2">
+          <button class="btn btn-sm" [ngbTooltip]="t('transition')" (click)="transitionDelivery(delivery)">
+            <i class="fas fa-arrows-spin"></i>
+          </button>
 
-        <button class="btn btn-sm" [ngbTooltip]="t('transition')" (click)="transitionDelivery(delivery)">
-          <i class="fas fa-arrows-spin"></i>
-        </button>
+          <a class="btn btn-sm" href="/delivery/manage?deliveryId={{delivery.id}}" target="_blank" >
+            <i class="fas fa-pencil"></i>
+          </a>
 
-        <a class="btn btn-sm" href="/delivery/manage?deliveryId={{delivery.id}}" target="_blank" >
-          <i class="fas fa-pencil"></i>
-        </a>
+          <button class="btn btn-sm">
+            <i class="fas fa-info"></i>
+          </button>
+        </div>
 
       </td>
     </ng-template>

UI/Web/src/app/management/management-clients/_components/client-modal/client-modal.component.html

@@ -22,7 +22,7 @@ <h5 class="modal-title">{{t('title')}}</h5>
             @if (clientForm.get('name'); as control) {
               <app-settings-item [control]="control" [title]="t('name')" [subtitle]="t('name-tooltip')">
                 <ng-template #view>
-                  {{control.value}}
+                  {{control.value | defaultValue}}
                 </ng-template>
                 <ng-template #edit>
                   <input formControlName="name" type="text" class="form-control" id="form-control-name">
@@ -35,7 +35,7 @@ <h5 class="modal-title">{{t('title')}}</h5>
             @if (clientForm.get('address'); as control) {
               <app-settings-item [control]="control" [title]="t('address')" [subtitle]="t('address-tooltip')">
                 <ng-template #view>
-                  {{control.value}}
+                  {{control.value | defaultValue}}
                 </ng-template>
                 <ng-template #edit>
                   <textarea formControlName="address" type="text" class="form-control" id="form-control-address"></textarea>
@@ -48,7 +48,7 @@ <h5 class="modal-title">{{t('title')}}</h5>
             @if (clientForm.get('companyNumber'); as control) {
               <app-settings-item [control]="control" [title]="t('companyNumber')" [subtitle]="t('companyNumber-tooltip')">
                 <ng-template #view>
-                  {{control.value}}
+                  {{control.value | defaultValue}}
                 </ng-template>
                 <ng-template #edit>
                   <input formControlName="companyNumber" type="text" class="form-control" id="form-control-companyNumber">
@@ -61,7 +61,7 @@ <h5 class="modal-title">{{t('title')}}</h5>
             @if (clientForm.get('contactEmail'); as control) {
               <app-settings-item [control]="control" [title]="t('contactEmail')" [subtitle]="t('contactEmail-tooltip')">
                 <ng-template #view>
-                  {{control.value}}
+                  {{control.value | defaultValue}}
                 </ng-template>
                 <ng-template #edit>
                   <input formControlName="contactEmail" type="text" class="form-control" id="form-control-contactEmail">
@@ -74,7 +74,7 @@ <h5 class="modal-title">{{t('title')}}</h5>
             @if (clientForm.get('contactName'); as control) {
               <app-settings-item [control]="control" [title]="t('contactName')" [subtitle]="t('contactName-tooltip')">
                 <ng-template #view>
-                  {{control.value}}
+                  {{control.value | defaultValue}}
                 </ng-template>
                 <ng-template #edit>
                   <input formControlName="contactName" type="text" class="form-control" id="form-control-contactName">
@@ -87,7 +87,7 @@ <h5 class="modal-title">{{t('title')}}</h5>
             @if (clientForm.get('contactNumber'); as control) {
               <app-settings-item [control]="control" [title]="t('contactNumber')" [subtitle]="t('contactNumber-tooltip')">
                 <ng-template #view>
-                  {{control.value}}
+                  {{control.value | defaultValue}}
                 </ng-template>
                 <ng-template #edit>
                   <input formControlName="contactNumber" type="text" class="form-control" id="form-control-contactNumber">
@@ -100,7 +100,7 @@ <h5 class="modal-title">{{t('title')}}</h5>
             @if (clientForm.get('invoiceEmail'); as control) {
               <app-settings-item [control]="control" [title]="t('invoiceEmail')" [subtitle]="t('invoiceEmail-tooltip')">
                 <ng-template #view>
-                  {{control.value}}
+                  {{control.value | defaultValue}}
                 </ng-template>
                 <ng-template #edit>
                   <input formControlName="invoiceEmail" type="text" class="form-control" id="form-control-invoiceEmail">

UI/Web/src/app/management/management-clients/_components/client-modal/client-modal.component.ts

@@ -6,6 +6,7 @@ import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} fr
 import {ModalDismissReasons, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
 import {ClientService} from '../../../../_services/client.service';
 import {SettingsItemComponent} from '../../../../shared/components/settings-item/settings-item.component';
+import {DefaultValuePipe} from '../../../../_pipes/default-value.pipe';
 
 @Component({
   selector: 'app-client-modal',
@@ -14,7 +15,8 @@ import {SettingsItemComponent} from '../../../../shared/components/settings-item
     LoadingSpinnerComponent,
     FormsModule,
     ReactiveFormsModule,
-    SettingsItemComponent
+    SettingsItemComponent,
+    DefaultValuePipe
   ],
   templateUrl: './client-modal.component.html',
   styleUrl: './client-modal.component.scss',