-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(admin-ui): Implement order process state chart view
- Loading branch information
1 parent
0a77438
commit 7283258
Showing
24 changed files
with
503 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
34 changes: 34 additions & 0 deletions
34
packages/admin-ui/src/lib/core/src/shared/pipes/order-state-i18n-token.pipe.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { OrderStateI18nTokenPipe } from './order-state-i18n-token.pipe'; | ||
|
|
||
| describe('orderStateI18nTokenPipe', () => { | ||
| const pipe = new OrderStateI18nTokenPipe(); | ||
|
|
||
| it('works with default states', () => { | ||
| const result = pipe.transform('AddingItems'); | ||
|
|
||
| expect(result).toBe('order.state-adding-items'); | ||
| }); | ||
|
|
||
| it('works with unknown states', () => { | ||
| const result = pipe.transform('ValidatingCustomer'); | ||
|
|
||
| expect(result).toBe('order.state-validating-customer'); | ||
| }); | ||
|
|
||
| it('works with unknown states with various formatting', () => { | ||
| const result1 = pipe.transform('validating-Customer'); | ||
| expect(result1).toBe('order.state-validating-customer'); | ||
|
|
||
| const result2 = pipe.transform('validating-Customer'); | ||
| expect(result2).toBe('order.state-validating-customer'); | ||
|
|
||
| const result3 = pipe.transform('Validating Customer'); | ||
| expect(result3).toBe('order.state-validating-customer'); | ||
| }); | ||
|
|
||
| it('passes through non-string values', () => { | ||
| expect(pipe.transform(null)).toBeNull(); | ||
| expect(pipe.transform(1)).toBe(1); | ||
| expect(pipe.transform({})).toEqual({}); | ||
| }); | ||
| }); |
31 changes: 31 additions & 0 deletions
31
packages/admin-ui/src/lib/core/src/shared/pipes/order-state-i18n-token.pipe.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { Pipe, PipeTransform } from '@angular/core'; | ||
| import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; | ||
|
|
||
| @Pipe({ | ||
| name: 'orderStateI18nToken', | ||
| }) | ||
| export class OrderStateI18nTokenPipe implements PipeTransform { | ||
| private readonly stateI18nTokens = { | ||
| AddingItems: _('order.state-adding-items'), | ||
| ArrangingPayment: _('order.state-arranging-payment'), | ||
| PaymentAuthorized: _('order.state-payment-authorized'), | ||
| PaymentSettled: _('order.state-payment-settled'), | ||
| PartiallyFulfilled: _('order.state-partially-fulfilled'), | ||
| Fulfilled: _('order.state-fulfilled'), | ||
| Cancelled: _('order.state-cancelled'), | ||
| }; | ||
| transform<T extends unknown>(value: T): T { | ||
| if (typeof value === 'string') { | ||
| const defaultStateToken = this.stateI18nTokens[value as any]; | ||
| if (defaultStateToken) { | ||
| return defaultStateToken; | ||
| } | ||
| return ('order.state-' + | ||
| value | ||
| .replace(/([a-z])([A-Z])/g, '$1-$2') | ||
| .replace(/ +/g, '-') | ||
| .toLowerCase()) as any; | ||
| } | ||
| return value; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 3 additions & 0 deletions
3
...order/src/components/order-process-graph-dialog/order-process-graph-dialog.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <ng-template vdrDialogTitle>{{ 'order.order-state-diagram' | translate }}</ng-template> | ||
|
|
||
| <vdr-order-process-graph [states]="states" [initialState]="activeState"></vdr-order-process-graph> |
Empty file.
27 changes: 27 additions & 0 deletions
27
...b/order/src/components/order-process-graph-dialog/order-process-graph-dialog.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; | ||
| import { | ||
| CancelOrderInput, | ||
| DataService, | ||
| Dialog, | ||
| OrderProcessState, | ||
| ServerConfigService, | ||
| } from '@vendure/admin-ui/core'; | ||
| import { Observable } from 'rxjs'; | ||
|
|
||
| @Component({ | ||
| selector: 'vdr-order-process-graph-dialog', | ||
| templateUrl: './order-process-graph-dialog.component.html', | ||
| styleUrls: ['./order-process-graph-dialog.component.scss'], | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| }) | ||
| export class OrderProcessGraphDialogComponent implements OnInit, Dialog<void> { | ||
| activeState: string; | ||
| states: OrderProcessState[] = []; | ||
| constructor(private serverConfigService: ServerConfigService) {} | ||
|
|
||
| ngOnInit(): void { | ||
| this.states = this.serverConfigService.getOrderProcessStates(); | ||
| } | ||
|
|
||
| resolveWith: (result: void | undefined) => void; | ||
| } |
1 change: 1 addition & 0 deletions
1
packages/admin-ui/src/lib/order/src/components/order-process-graph/constants.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export const NODE_HEIGHT = 72; |
8 changes: 8 additions & 0 deletions
8
...min-ui/src/lib/order/src/components/order-process-graph/order-process-edge.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <div | ||
| [attr.data-from]="from.node.name" | ||
| [attr.data-to]="to.node.name" | ||
| [ngStyle]="getStyle()" | ||
| [class.active]="active$ | async" | ||
| class="edge"> | ||
| <clr-icon shape="arrow" flip="vertical" class="arrow"></clr-icon> | ||
| </div> |
23 changes: 23 additions & 0 deletions
23
...min-ui/src/lib/order/src/components/order-process-graph/order-process-edge.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| @import 'variables'; | ||
|
|
||
| .edge { | ||
| position: absolute; | ||
| border: 1px solid $color-grey-300; | ||
| background-color: $color-grey-300; | ||
| opacity: 0.3; | ||
| transition: border 0.2s, opacity 0.2s, background-color 0.2s; | ||
| &.active { | ||
| border-color: $color-primary-500; | ||
| background-color: $color-primary-500; | ||
| opacity: 1; | ||
| .arrow { | ||
| color: $color-primary-500; | ||
| } | ||
| } | ||
| .arrow { | ||
| position: absolute; | ||
| bottom: -4px; | ||
| left: -8px; | ||
| color: $color-grey-300; | ||
| } | ||
| } |
45 changes: 45 additions & 0 deletions
45
...admin-ui/src/lib/order/src/components/order-process-graph/order-process-edge.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; | ||
| import { Observable } from 'rxjs'; | ||
| import { tap } from 'rxjs/operators'; | ||
|
|
||
| import { OrderProcessNodeComponent } from './order-process-node.component'; | ||
|
|
||
| @Component({ | ||
| selector: 'vdr-order-process-edge', | ||
| templateUrl: './order-process-edge.component.html', | ||
| styleUrls: ['./order-process-edge.component.scss'], | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| }) | ||
| export class OrderProcessEdgeComponent implements OnInit { | ||
| @Input() from: OrderProcessNodeComponent; | ||
| @Input() to: OrderProcessNodeComponent; | ||
| @Input() index: number; | ||
| active$: Observable<boolean>; | ||
|
|
||
| ngOnInit() { | ||
| this.active$ = this.from.active$ | ||
| .asObservable() | ||
| .pipe(tap((active) => this.to.activeTarget$.next(active))); | ||
| } | ||
|
|
||
| getStyle() { | ||
| const direction = this.from.index < this.to.index ? 'down' : 'up'; | ||
| const startPos = this.from.getPos(direction === 'down' ? 'bottom' : 'top'); | ||
| const endPos = this.to.getPos(direction === 'down' ? 'top' : 'bottom'); | ||
| const dX = Math.abs(startPos.x - endPos.x); | ||
| const dY = Math.abs(startPos.y - endPos.y); | ||
| const length = Math.sqrt(dX ** 2 + dY ** 2); | ||
| return { | ||
| 'top.px': startPos.y, | ||
| 'left.px': startPos.x + (direction === 'down' ? 10 : 40) + this.index * 12, | ||
| 'height.px': length, | ||
| 'width.px': 1, | ||
| ...(direction === 'up' | ||
| ? { | ||
| transform: 'rotateZ(180deg)', | ||
| 'transform-origin': 'top', | ||
| } | ||
| : {}), | ||
| }; | ||
| } | ||
| } |
12 changes: 12 additions & 0 deletions
12
...in-ui/src/lib/order/src/components/order-process-graph/order-process-graph.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| <ng-container *ngFor="let state of nodes; let i = index"> | ||
| <vdr-order-process-node | ||
| [node]="state" | ||
| [index]="i" | ||
| [active]="(activeState$ | async) === state.name" | ||
| (mouseenter)="onMouseOver(state.name)" | ||
| (mouseleave)="onMouseOut()" | ||
| ></vdr-order-process-node> | ||
| </ng-container> | ||
| <ng-container *ngFor="let edge of edges"> | ||
| <vdr-order-process-edge [from]="edge.from" [to]="edge.to" [index]="edge.index"></vdr-order-process-edge> | ||
| </ng-container> |
13 changes: 13 additions & 0 deletions
13
...in-ui/src/lib/order/src/components/order-process-graph/order-process-graph.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| @import "variables"; | ||
|
|
||
| :host { | ||
| display: block; | ||
| border: 1px hotpink; | ||
| margin: 20px; | ||
| padding: 12px; | ||
| position: relative; | ||
| } | ||
|
|
||
| .state-row { | ||
| display: flex; | ||
| } |
Oops, something went wrong.