feat(admin-ui): Enable cancellation of active orders

admin-ui/src/app/common/generated-types.ts

@@ -186,7 +186,10 @@ export type Cancellation = Node & StockMovement & {
 };
 
 export type CancelOrderInput = {
-  lines: Array<OrderLineInput>,
+  /** The id of the order to be cancelled */
+  orderId: Scalars['ID'],
+  /** Optionally specify which OrderLines to cancel. If not provided, all OrderLines will be cancelled */
+  lines?: Maybe<Array<OrderLineInput>>,
   reason?: Maybe<Scalars['String']>,
 };
 

admin-ui/src/app/order/components/cancel-order-dialog/cancel-order-dialog.component.html

@@ -29,12 +29,13 @@
                 </td>
                 <td class="align-middle fulfil">
                     <input
-                        *ngIf="line.quantity > 0"
+                        *ngIf="line.quantity > 0 && !order.active; else nonEditable"
                         [(ngModel)]="lineQuantities[line.id]"
                         type="number"
                         [max]="line.quantity"
                         min="0"
                     />
+                    <ng-template #nonEditable>{{ line.quantity }}</ng-template>
                 </td>
             </tr>
         </table>
@@ -57,9 +58,14 @@
     <button
         type="submit"
         (click)="select()"
-        [disabled]="!reason || selectionCount === 0"
+        [disabled]="!reason || (!order.active && selectionCount === 0)"
         class="btn btn-primary"
     >
-        {{ 'order.cancel-selected-items' | translate }}
+        <ng-container *ngIf="!order.active">
+            {{ 'order.cancel-selected-items' | translate }}
+        </ng-container>
+        <ng-container *ngIf="order.active">
+            {{ 'order.cancel-order' | translate }}
+        </ng-container>
     </button>
 </ng-template>

admin-ui/src/app/order/components/cancel-order-dialog/cancel-order-dialog.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { _ } from 'src/app/core/providers/i18n/mark-for-extraction';
 
-import { CancelOrderInput, OrderDetailFragment } from '../../../common/generated-types';
+import { CancelOrderInput, OrderDetailFragment, OrderLineInput } from '../../../common/generated-types';
 import { I18nService } from '../../../core/providers/i18n/i18n.service';
 import { Dialog } from '../../../shared/providers/modal/modal.service';
 
@@ -33,14 +33,9 @@ export class CancelOrderDialogComponent implements OnInit, Dialog<CancelOrderInp
     }
 
     select() {
-        const lines = Object.entries(this.lineQuantities)
-            .map(([orderLineId, quantity]) => ({
-                orderLineId,
-                quantity,
-            }))
-            .filter(l => 0 < l.quantity);
         this.resolveWith({
-            lines,
+            orderId: this.order.id,
+            lines: this.getLineInputs(),
             reason: this.reason,
         });
     }
@@ -48,4 +43,16 @@ export class CancelOrderDialogComponent implements OnInit, Dialog<CancelOrderInp
     cancel() {
         this.resolveWith();
     }
+
+    private getLineInputs(): OrderLineInput[] | undefined {
+        if (this.order.active) {
+            return;
+        }
+        return Object.entries(this.lineQuantities)
+            .map(([orderLineId, quantity]) => ({
+                orderLineId,
+                quantity,
+            }))
+            .filter(l => 0 < l.quantity);
+    }
 }

admin-ui/src/app/order/components/order-detail/order-detail.component.html

@@ -26,14 +26,18 @@
                     type="button"
                     class="btn"
                     vdrDropdownItem
-                    *ngIf="!order.active && order.state !== 'Cancelled'"
+                    *ngIf="order.state !== 'Cancelled'"
                     (click)="cancelOrRefund(order)"
                 >
                     <clr-icon shape="error-standard" class="is-error"></clr-icon>
-                    <ng-container *ngIf="order.state !== 'PaymentAuthorized'; else cancelOnly">
+                    <ng-container
+                        *ngIf="order.state !== 'PaymentAuthorized' && !order.active; else cancelOnly"
+                    >
                         {{ 'order.refund-and-cancel-order' | translate }}
                     </ng-container>
-                    <ng-template #cancelOnly>{{ 'order.cancel-order' | translate }}</ng-template>
+                    <ng-template #cancelOnly>
+                        {{ 'order.cancel-order' | translate }}
+                    </ng-template>
                 </button>
             </vdr-dropdown-menu>
         </vdr-dropdown>

admin-ui/src/app/order/components/order-detail/order-detail.component.ts

@@ -111,7 +111,7 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
     }
 
     cancelOrRefund(order: OrderDetail.Fragment) {
-        if (order.state === 'PaymentAuthorized') {
+        if (order.state === 'PaymentAuthorized' || order.active === true) {
             this.cancelOrder(order);
         } else {
             this.refundOrder(order);
@@ -201,6 +201,7 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
                             switchMap(result => {
                                 if (input.cancel.length) {
                                     return this.dataService.order.cancelOrder({
+                                        orderId: this.id,
                                         lines: input.cancel,
                                         reason: input.reason,
                                     });

admin-ui/src/app/shared/components/object-tree/object-tree.component.html

@@ -8,7 +8,7 @@
     [class.array-item]="isArrayItem"
     [class.expanded]="expanded"
 >
-    <li *ngFor="let entry of entries; trackBy: index">
+    <li *ngFor="let entry of entries">
         <span class="key">{{ entry.key }}:</span>
         <ng-container *ngIf="isObject(entry.value)">
             <vdr-object-tree [value]="entry.value" [isArrayItem]="valueIsArray"></vdr-object-tree>

packages/common/src/generated-types.ts

@@ -185,7 +185,9 @@ export type Cancellation = Node & StockMovement & {
 };
 
 export type CancelOrderInput = {
+  /** The id of the order to be cancelled */
   orderId: Scalars['ID'],
+  /** Optionally specify which OrderLines to cancel. If not provided, all OrderLines will be cancelled */
   lines?: Maybe<Array<OrderLineInput>>,
   reason?: Maybe<Scalars['String']>,
 };

packages/core/e2e/graphql/generated-e2e-admin-types.ts

@@ -186,7 +186,9 @@ export type Cancellation = Node &
     };
 
 export type CancelOrderInput = {
+    /** The id of the order to be cancelled */
     orderId: Scalars['ID'];
+    /** Optionally specify which OrderLines to cancel. If not provided, all OrderLines will be cancelled */
     lines?: Maybe<Array<OrderLineInput>>;
     reason?: Maybe<Scalars['String']>;
 };