Migrate shipment type incompatibilities

googlemaps · Apr 3, 2024 · 13bb2ba · 13bb2ba
1 parent b6be8de
commit 13bb2ba
Show file tree

Hide file tree

Showing 7 changed files with 378 additions and 304 deletions.
diff --git a/.../shipment-type-incompatibility-dialog/shipment-type-incompatibility-dialog.component.html b/.../shipment-type-incompatibility-dialog/shipment-type-incompatibility-dialog.component.html
@@ -1 +1,145 @@
-<p>shipment-type-incompatibility-dialog works!</p>
+<h3 mat-dialog-title>
+  Shipment Type Incompatibilities ({{ shipmentTypeIncompatsControl.value?.length }})
+</h3>
+<mat-dialog-content>
+  <form [formGroup]="form" autocomplete="off">
+    <section class="shipment-type">
+      <header>
+        <div>
+          <mat-error class="mb-4" *ngIf="shipmentTypeIncompatsControl.getError('duplicate')">
+            Cannot have duplicate incompatibility rules
+          </mat-error>
+        </div>
+      </header>
+
+      <div formArrayName="shipmentTypeIncompatibilities" class="w-100">
+        <div
+          *ngFor="
+            let shipmentTypeIncompat of shipmentTypeIncompatsControl.controls;
+            let shipmentTypeIncompatsIndex = index
+          "
+          [formGroupName]="shipmentTypeIncompatsIndex"
+          class="d-flex flex-row align-items-center w-100 mb-2">
+          <!-- types -->
+          <div class="settings-item item-xl pad-right">
+            <mat-form-field class="flex-grow-1 pb-0">
+              <mat-label>Shipment types*</mat-label>
+              <mat-chip-list #shipmentTypeIncompatibilityChipList aria-label="Shipment types">
+                <mat-chip
+                  *ngFor="let shipmentType of shipmentTypeIncompat.value?.types"
+                  [selectable]="false"
+                  (removed)="
+                    removeTypeFromShipmentTypeIncompat(shipmentType, shipmentTypeIncompatsIndex)
+                  ">
+                  {{ shipmentType }}
+                  <mat-icon matChipRemove>cancel</mat-icon>
+                </mat-chip>
+                <input
+                  #shipmentTypeIncompatibilityInput
+                  [matAutocomplete]="autoIncompatTypes"
+                  [matChipInputFor]="shipmentTypeIncompatibilityChipList"
+                  [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                  (matChipInputTokenEnd)="
+                    addTypeToShipmentTypeIncompat(
+                      $event.value,
+                      shipmentTypeIncompatsIndex,
+                      $event.input
+                    )
+                  "
+                  (focusout)="
+                    addTypeToShipmentTypeIncompat(
+                      $event.target.value,
+                      shipmentTypeIncompatsIndex,
+                      $event.target
+                    )
+                  "
+                  (input)="updateFilteredAvailableIncompatShipmentTypes($event.data)"
+                  (keydown)="
+                    onShipmentTypeIncompatTypeKeyDown($event, shipmentTypeIncompatsIndex)
+                  " />
+              </mat-chip-list>
+
+              <mat-autocomplete
+                class="cost-vehicles-panel"
+                #autoIncompatTypes="matAutocomplete"
+                (optionSelected)="
+                  addTypeToShipmentTypeIncompat(
+                    $event.option.value,
+                    shipmentTypeIncompatsIndex,
+                    shipmentTypeIncompatibilityInput
+                  )
+                ">
+                <cdk-virtual-scroll-viewport
+                  style="height: 200px"
+                  [itemSize]="48"
+                  minBufferPx="200"
+                  maxBufferPx="400">
+                  <mat-option
+                    [style.height.px]="48"
+                    *cdkVirtualFor="
+                      let shipmentType of (filteredAvailableIncompatShipmentTypes$ | async)[
+                        shipmentTypeIncompatsIndex
+                      ]
+                    "
+                    [value]="shipmentType">
+                    {{ shipmentType }}
+                  </mat-option>
+                </cdk-virtual-scroll-viewport>
+              </mat-autocomplete>
+            </mat-form-field>
+            <mat-error
+              *ngIf="
+                shipmentTypeIncompat.getError('required', 'types') ||
+                shipmentTypeIncompat.getError('minlength', 'types')
+              ">
+              At least 2 types required
+            </mat-error>
+            <div
+              class="unused-shipment-type-warning"
+              *ngIf="unusedShipmentIncompatTypes[shipmentTypeIncompatsIndex]">
+              Shipment type(s) not used on any shipments:
+              {{ unusedShipmentIncompatTypes[shipmentTypeIncompatsIndex] }}
+            </div>
+          </div>
+
+          <!-- mode -->
+          <div class="settings-item pad-right">
+            <div class="mat-body-strong">Incompatibility mode*</div>
+            <mat-form-field appearance="outline" class="pb-0">
+              <mat-select formControlName="incompatibilityMode">
+                <mat-option
+                  *ngFor="let mode of keys(shipmentTypeIncompatModeLabels)"
+                  [value]="parseInt(mode)">
+                  {{ shipmentTypeIncompatModeLabels[mode] }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+            <mat-error *ngIf="shipmentTypeIncompat.getError('required', 'incompatibilityMode')">
+              Required
+            </mat-error>
+          </div>
+
+          <!-- remove -->
+          <button
+            type="button"
+            class="clear-place"
+            (click)="removeShipmentTypeIncompat(shipmentTypeIncompatsIndex)"
+            mat-icon-button
+            title="Remove Shipment Type Incompatibility">
+            <mat-icon class="icon--smaller m-0" svgIcon="delete"></mat-icon>
+          </button>
+        </div>
+      </div>
+      <button type="button" mat-button color="primary" (click)="addShipmentTypeIncompat()">
+        Add shipment type incompatibility
+      </button>
+    </section>
+  </form>
+</mat-dialog-content>
+<mat-divider></mat-divider>
+<mat-dialog-actions>
+  <button mat-stroked-button class="light-stroked-button" color="primary" mat-dialog-close>
+    Cancel
+  </button>
+  <button mat-flat-button color="primary" (click)="onSave()" [disabled]="!form.valid">Save</button>
+</mat-dialog-actions>
diff --git a/.../shipment-type-incompatibility-dialog/shipment-type-incompatibility-dialog.component.scss b/.../shipment-type-incompatibility-dialog/shipment-type-incompatibility-dialog.component.scss
@@ -0,0 +1,17 @@
+@import '../../../../styles/variables.scss';
+
+:host {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+mat-dialog-content {
+  flex-grow: 1;
+  max-height: initial;
+}
+
+.unused-shipment-type-warning {
+  font-size: 0.8em;
+  color: $orange;
+}
diff --git a/...ipment-type-incompatibility-dialog/shipment-type-incompatibility-dialog.component.spec.ts b/...ipment-type-incompatibility-dialog/shipment-type-incompatibility-dialog.component.spec.ts
@@ -1,14 +1,34 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ShipmentTypeIncompatibilityDialogComponent } from './shipment-type-incompatibility-dialog.component';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { SharedModule } from 'src/app/shared/shared.module';
+import { MaterialModule } from 'src/app/material';
+import { provideMockStore } from '@ngrx/store/testing';
+import ShipmentModelSelectors from '../../selectors/shipment-model.selectors';
+import ShipmentSelectors from '../../selectors/shipment.selectors';
+import { selectShipmentTypes as selectScenarioShipmentTypes } from '../../../core/selectors/scenario.selectors';
 
 describe('ShipmentTypeIncompatibilityDialogComponent', () => {
   let component: ShipmentTypeIncompatibilityDialogComponent;
   let fixture: ComponentFixture<ShipmentTypeIncompatibilityDialogComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      imports: [MaterialModule, SharedModule, FormsModule, ReactiveFormsModule],
       declarations: [ShipmentTypeIncompatibilityDialogComponent],
+      providers: [
+        { provide: MatDialog, useValue: jasmine.createSpyObj('matDialog', ['open', 'close']) },
+        { provide: MatDialogRef, useValue: {} },
+        provideMockStore({
+          selectors: [
+            { selector: ShipmentModelSelectors.selectShipmentTypeIncompatibilities, value: [] },
+            { selector: ShipmentSelectors.selectShipmentTypes, value: [] },
+            { selector: selectScenarioShipmentTypes, value: [] },
+          ],
+        }),
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ShipmentTypeIncompatibilityDialogComponent);