Skip to content

Commit

Permalink
feat(admin-ui): Support custom state transitions from Order detail view
Browse files Browse the repository at this point in the history
  • Loading branch information
@michaelbromley
michaelbromley committed Jul 10, 2020
1 parent 3196b52 commit 1d2ba31
Show file tree
Hide file tree
Showing 12 changed files with 161 additions and 72 deletions.
20 changes: 10 additions & 10 deletions packages/admin-ui/i18n-coverage.json
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,36 @@
{
"generatedOn": "2020-06-30T13:29:58.358Z",
"lastCommit": "dc82b2c2392004d08f4a1aea4b126360f733b296",
"generatedOn": "2020-07-10T12:40:06.107Z",
"lastCommit": "3196b525dfbb31edc2bbe8c5f50b0349b8386f15",
"translationStatus": {
"de": {
"tokenCount": 656,
"tokenCount": 658,
"translatedCount": 609,
"percentage": 93
},
"en": {
"tokenCount": 656,
"translatedCount": 656,
"tokenCount": 658,
"translatedCount": 658,
"percentage": 100
},
"es": {
"tokenCount": 656,
"tokenCount": 658,
"translatedCount": 467,
"percentage": 71
},
"pl": {
"tokenCount": 656,
"tokenCount": 658,
"translatedCount": 566,
"percentage": 86
},
"zh_Hans": {
"tokenCount": 656,
"tokenCount": 658,
"translatedCount": 550,
"percentage": 84
},
"zh_Hant": {
"tokenCount": 656,
"tokenCount": 658,
"translatedCount": 550,
"percentage": 84
}
}
}
}
29 changes: 28 additions & 1 deletion packages/admin-ui/src/lib/core/src/common/generated-types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1899,6 +1899,7 @@ export type Mutation = {
setUiLanguage?: Maybe<LanguageCode>;
settlePayment: Payment;
settleRefund: Refund;
transitionOrderToState?: Maybe<Order>;
/** Update an existing Administrator */
updateAdministrator: Administrator;
/** Update an existing Asset */
Expand Down Expand Up @@ -2289,6 +2290,12 @@ export type MutationSettleRefundArgs = {
};


export type MutationTransitionOrderToStateArgs = {
id: Scalars['ID'];
state: Scalars['String'];
};


export type MutationUpdateAdministratorArgs = {
input: UpdateAdministratorInput;
};
Expand Down Expand Up @@ -4780,7 +4787,7 @@ export type OrderAddressFragment = (

export type OrderFragment = (
{ __typename?: 'Order' }
& Pick<Order, 'id' | 'createdAt' | 'updatedAt' | 'code' | 'state' | 'total' | 'currencyCode'>
& Pick<Order, 'id' | 'createdAt' | 'updatedAt' | 'code' | 'state' | 'nextStates' | 'total' | 'currencyCode'>
& { customer?: Maybe<(
{ __typename?: 'Customer' }
& Pick<Customer, 'id' | 'firstName' | 'lastName'>
Expand Down Expand Up @@ -5015,6 +5022,20 @@ export type DeleteOrderNoteMutation = (
) }
);

export type TransitionOrderToStateMutationVariables = {
id: Scalars['ID'];
state: Scalars['String'];
};


export type TransitionOrderToStateMutation = (
{ __typename?: 'Mutation' }
& { transitionOrderToState?: Maybe<(
{ __typename?: 'Order' }
& OrderFragment
)> }
);

export type AssetFragment = (
{ __typename?: 'Asset' }
& Pick<Asset, 'id' | 'createdAt' | 'updatedAt' | 'name' | 'fileSize' | 'mimeType' | 'type' | 'preview' | 'source' | 'width' | 'height'>
Expand Down Expand Up @@ -7322,6 +7343,12 @@ export namespace DeleteOrderNote {
export type DeleteOrderNote = DeleteOrderNoteMutation['deleteOrderNote'];
}

export namespace TransitionOrderToState {
export type Variables = TransitionOrderToStateMutationVariables;
export type Mutation = TransitionOrderToStateMutation;
export type TransitionOrderToState = OrderFragment;
}

export namespace Asset {
export type Fragment = AssetFragment;
export type FocalPoint = (NonNullable<AssetFragment['focalPoint']>);
Expand Down
10 changes: 10 additions & 0 deletions packages/admin-ui/src/lib/core/src/data/definitions/order-definitions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export const ORDER_FRAGMENT = gql`
updatedAt
code
state
nextStates
total
currencyCode
customer {
Expand Down Expand Up @@ -291,3 +292,12 @@ export const DELETE_ORDER_NOTE = gql`
}
}
`;

export const TRANSITION_ORDER_TO_STATE = gql`
mutation TransitionOrderToState($id: ID!, $state: String!) {
transitionOrderToState(id: $id, state: $state) {
...Order
}
}
${ORDER_FRAGMENT}
`;
12 changes: 12 additions & 0 deletions packages/admin-ui/src/lib/core/src/data/providers/order-data.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
SettlePayment,
SettleRefund,
SettleRefundInput,
TransitionOrderToState,
UpdateOrderNote,
UpdateOrderNoteInput,
} from '../../common/generated-types';
Expand All @@ -29,6 +30,7 @@ import {
REFUND_ORDER,
SETTLE_PAYMENT,
SETTLE_REFUND,
TRANSITION_ORDER_TO_STATE,
UPDATE_ORDER_NOTE,
} from '../definitions/order-definitions';

Expand Down Expand Up @@ -119,4 +121,14 @@ export class OrderDataService {
},
);
}

transitionToState(id: string, state: string) {
return this.baseDataService.mutate<TransitionOrderToState.Mutation, TransitionOrderToState.Variables>(
TRANSITION_ORDER_TO_STATE,
{
id,
state,
},
);
}
}
103 changes: 55 additions & 48 deletions packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
type="button"
class="btn"
vdrDropdownItem
*ngIf="order.state !== 'Cancelled'"
*ngIf="order.nextStates.includes('Cancelled')"
(click)="cancelOrRefund(order)"
>
<clr-icon shape="error-standard" class="is-error"></clr-icon>
Expand All @@ -37,6 +37,13 @@
{{ 'order.cancel-order' | translate }}
</ng-template>
</button>
<ng-container *ngFor="let nextState of nextStates$ | async">
<div class="dropdown-divider"></div>
<button type="button" class="btn" vdrDropdownItem (click)="transitionToState(nextState)">
<clr-icon shape="step-forward-2"></clr-icon>
{{ 'order.transition-to-state' | translate: { state: nextState } }}
</button>
</ng-container>
</vdr-dropdown-menu>
</vdr-dropdown>
</vdr-ab-right>
Expand All @@ -47,47 +54,47 @@
<div class="clr-col-lg-8">
<table class="order-lines table">
<thead>
<tr>
<th></th>
<th>{{ 'order.product-name' | translate }}</th>
<th>{{ 'order.product-sku' | translate }}</th>
<th>{{ 'order.unit-price' | translate }}</th>
<th>{{ 'order.quantity' | translate }}</th>
<ng-container *ngFor="let customField of visibileOrderLineCustomFields">
<th class="order-line-custom-field">
<button
class="custom-field-header-button"
(click)="toggleOrderLineCustomFields()"
[title]="'common.hide-custom-fields' | translate"
>
{{ customField | customFieldLabel }}
</button>
</th>
</ng-container>
<ng-container *ngIf="showElided">
<th>
<button
class="custom-field-header-button"
(click)="toggleOrderLineCustomFields()"
[title]="'common.display-custom-fields' | translate"
>
<clr-icon
shape="ellipsis-horizontal"
class="custom-field-ellipsis"
></clr-icon>
</button>
</th>
</ng-container>
<th>{{ 'order.total' | translate }}</th>
</tr>
<tr>
<th></th>
<th>{{ 'order.product-name' | translate }}</th>
<th>{{ 'order.product-sku' | translate }}</th>
<th>{{ 'order.unit-price' | translate }}</th>
<th>{{ 'order.quantity' | translate }}</th>
<ng-container *ngFor="let customField of visibleOrderLineCustomFields">
<th class="order-line-custom-field">
<button
class="custom-field-header-button"
(click)="toggleOrderLineCustomFields()"
[title]="'common.hide-custom-fields' | translate"
>
{{ customField | customFieldLabel }}
</button>
</th>
</ng-container>
<ng-container *ngIf="showElided">
<th>
<button
class="custom-field-header-button"
(click)="toggleOrderLineCustomFields()"
[title]="'common.display-custom-fields' | translate"
>
<clr-icon
shape="ellipsis-horizontal"
class="custom-field-ellipsis"
></clr-icon>
</button>
</th>
</ng-container>
<th>{{ 'order.total' | translate }}</th>
</tr>
</thead>
<tr
*ngFor="let line of order.lines"
class="order-line"
[class.is-cancelled]="line.quantity === 0"
>
<td class="align-middle thumb">
<img *ngIf="line.featuredAsset" [src]="line.featuredAsset | assetPreview:'tiny'" />
<img *ngIf="line.featuredAsset" [src]="line.featuredAsset | assetPreview: 'tiny'" />
</td>
<td class="align-middle name">{{ line.productVariant.name }}</td>
<td class="align-middle sku">{{ line.productVariant.sku }}</td>
Expand All @@ -102,13 +109,13 @@
<vdr-line-refunds [line]="line"></vdr-line-refunds>
<vdr-line-fulfillment [line]="line" [orderState]="order.state"></vdr-line-fulfillment>
</td>
<ng-container *ngFor="let customField of visibileOrderLineCustomFields">
<ng-container *ngFor="let customField of visibleOrderLineCustomFields">
<td class="order-line-custom-field align-middle">
<ng-container [ngSwitch]="customField.type">
<ng-template [ngSwitchCase]="'datetime'">
<span [title]="line.customFields[customField.name]">{{
line.customFields[customField.name] | date: 'short'
}}</span>
}}</span>
</ng-template>
<ng-template [ngSwitchCase]="'boolean'">
<ng-template [ngIf]="line.customFields[customField.name] === true">
Expand All @@ -125,11 +132,11 @@
</td>
</ng-container>
<ng-container *ngIf="showElided"
><td class="order-line-custom-field align-middle">
<clr-icon
shape="ellipsis-horizontal"
class="custom-field-ellipsis"
></clr-icon></td
><td class="order-line-custom-field align-middle">
<clr-icon
shape="ellipsis-horizontal"
class="custom-field-ellipsis"
></clr-icon></td
></ng-container>
<td class="align-middle total">
{{ line.totalPrice / 100 | currency: order.currencyCode }}
Expand All @@ -150,7 +157,7 @@
<a
class="promotion-name"
[routerLink]="getPromotionLink(promotion)"
>{{ promotion.description }}</a
>{{ promotion.description }}</a
>
<div class="promotion-amount">
{{ promotion.amount / 100 | currency: order.currencyCode }}
Expand All @@ -164,7 +171,7 @@
<tr class="sub-total">
<td class="left clr-align-middle">{{ 'order.sub-total' | translate }}</td>
<td></td>
<td [attr.colspan]="3 + visibileOrderLineCustomFields.length"></td>
<td [attr.colspan]="3 + visibleOrderLineCustomFields.length"></td>
<ng-container *ngIf="showElided"><td></td></ng-container>
<td class="clr-align-middle">
{{ order.subTotal / 100 | currency: order.currencyCode }}
Expand All @@ -175,13 +182,13 @@
</tr>
<tr class="order-ajustment" *ngFor="let adjustment of order.adjustments">
<td
[attr.colspan]="5 + visibileOrderLineCustomFields.length"
[attr.colspan]="5 + visibleOrderLineCustomFields.length"
class="left clr-align-middle"
>
<a [routerLink]="getPromotionLink(adjustment)">{{ adjustment.description }}</a>
<vdr-chip *ngIf="getCouponCodeForAdjustment(order, adjustment) as couponCode">{{
couponCode
}}</vdr-chip>
}}</vdr-chip>
</td>
<ng-container *ngIf="showElided"><td></td></ng-container>
<td class="clr-align-middle">
Expand All @@ -191,7 +198,7 @@
<tr class="shipping">
<td class="left clr-align-middle">{{ 'order.shipping' | translate }}</td>
<td class="clr-align-middle">{{ order.shippingMethod?.description }}</td>
<td [attr.colspan]="3 + visibileOrderLineCustomFields.length"></td>
<td [attr.colspan]="3 + visibleOrderLineCustomFields.length"></td>
<ng-container *ngIf="showElided"><td></td></ng-container>
<td class="clr-align-middle">
{{ order.shippingWithTax / 100 | currency: order.currencyCode }}
Expand All @@ -203,7 +210,7 @@
<tr class="total">
<td class="left clr-align-middle">{{ 'order.total' | translate }}</td>
<td></td>
<td [attr.colspan]="3 + visibileOrderLineCustomFields.length"></td>
<td [attr.colspan]="3 + visibleOrderLineCustomFields.length"></td>
<ng-container *ngIf="showElided"><td></td></ng-container>
<td class="clr-align-middle">
{{ order.total / 100 | currency: order.currencyCode }}
Expand Down
Loading

0 comments on commit 1d2ba31

Please sign in to comment.