diff --git a/src/Moryx.Orders.Web/src/app/dialogs/create-dialog/create-dialog.component.html b/src/Moryx.Orders.Web/src/app/dialogs/create-dialog/create-dialog.component.html index 0cd713b8b..4ad85d626 100644 --- a/src/Moryx.Orders.Web/src/app/dialogs/create-dialog/create-dialog.component.html +++ b/src/Moryx.Orders.Web/src/app/dialogs/create-dialog/create-dialog.component.html @@ -1,9 +1,18 @@ -

{{ TranslationConstants.CREATE_DIALOG.TITLE | translate }}

+

+ {{ TranslationConstants.CREATE_DIALOG.TITLE | translate }} +

{{ TranslationConstants.CREATE_DIALOG.ORDER_DETAILS | translate }}

- {{ TranslationConstants.CREATE_DIALOG.ORDER_NUMBER | translate }} - + {{ + TranslationConstants.CREATE_DIALOG.ORDER_NUMBER | translate + }} +

@@ -11,24 +20,41 @@

- {{ TranslationConstants.CREATE_DIALOG.OPERATION_NUMBER | translate }} + {{ + TranslationConstants.CREATE_DIALOG.OPERATION_NUMBER | translate + }} - - {{ TranslationConstants.CREATE_DIALOG.OPERATION_NUMBER_INVALID | translate }} + /> + + {{ + TranslationConstants.CREATE_DIALOG.OPERATION_NUMBER_INVALID | translate + }}
- {{ TranslationConstants.CREATE_DIALOG.PRODUCT | translate }} - + {{ + TranslationConstants.CREATE_DIALOG.PRODUCT | translate + }} + {{ product.identifier }}-{{ product.revision | number : '2.0' }} {{ product.name }}{{ product.identifier }}-{{ product.revision | number : "2.0" }} + {{ product.name }} {{ TranslationConstants.CREATE_DIALOG.HINT | translate @@ -36,36 +62,51 @@

- {{ TranslationConstants.CREATE_DIALOG.RECIPE | translate }} + {{ + TranslationConstants.CREATE_DIALOG.RECIPE | translate + }} - {{ recipe.name }} + (valueChange)="detailsInputchanged($event)" + > + {{ + recipe.name + }}

- {{ TranslationConstants.CREATE_DIALOG.AMOUNT | translate }} - + {{ + TranslationConstants.CREATE_DIALOG.AMOUNT | translate + }} + - -

{{ TranslationConstants.CREATE_DIALOG.ADDED_OPERATIONS | translate }} ({{ operations().length }})

+ +

+ {{ TranslationConstants.CREATE_DIALOG.ADDED_OPERATIONS | translate }} ({{ + operations().length + }}) +

-
+
{{ operation.operationNumber }} {{ TranslationConstants.CREATE_DIALOG.PRODUCT | translate }}: {{ operation.productIdentifier }}-{{ - operation.productRevision | number : '2.0' + >{{ TranslationConstants.CREATE_DIALOG.PRODUCT | translate }}: + {{ operation.productIdentifier }}-{{ + operation.productRevision | number : "2.0" }} - {{ TranslationConstants.CREATE_DIALOG.AMOUNT | translate }}: {{ operation.totalAmount }} - + +
+ + + + + + + + +
+
diff --git a/src/Moryx.Orders.Web/src/app/dialogs/create-dialog/create-dialog.component.scss b/src/Moryx.Orders.Web/src/app/dialogs/create-dialog/create-dialog.component.scss index 8c06476ed..a9c309fe6 100644 --- a/src/Moryx.Orders.Web/src/app/dialogs/create-dialog/create-dialog.component.scss +++ b/src/Moryx.Orders.Web/src/app/dialogs/create-dialog/create-dialog.component.scss @@ -11,15 +11,6 @@ mat-form-field { display: inline-block; } -.create-dialog-operation-button { - width: 100%; - margin-top: -6px; - height: 35px; - mat-icon{ - margin-right: -8px; - } -} - .create-dialog-operation-list-container { padding: 0px; } @@ -40,4 +31,31 @@ mat-form-field { @include mat.list-overrides(( list-item-two-line-container-height: 60px, )); -} \ No newline at end of file +} + +.actions { gap: 8px; } + +.split-button{ + display:inline-flex; + gap:3px +} + +.split-button .primary{ + border-top-right-radius:0!important; + border-bottom-right-radius:0!important; + margin:0; + width: 120px; +} + +.split-button .dropdown-flat{ + border-top-left-radius:0!important; + border-bottom-left-radius:0!important; + margin:0; + padding: 0; + min-width: 40px; + width: 40px; +} + +.split-button .dropdown-flat .mat-icon { + margin: 0; +} diff --git a/src/Moryx.Orders.Web/src/app/dialogs/create-dialog/create-dialog.component.ts b/src/Moryx.Orders.Web/src/app/dialogs/create-dialog/create-dialog.component.ts index 5778a5d7e..5622cb7fc 100644 --- a/src/Moryx.Orders.Web/src/app/dialogs/create-dialog/create-dialog.component.ts +++ b/src/Moryx.Orders.Web/src/app/dialogs/create-dialog/create-dialog.component.ts @@ -35,6 +35,13 @@ import { MatIconModule } from "@angular/material/icon"; import { MatListModule } from "@angular/material/list"; import { MatProgressBarModule } from "@angular/material/progress-bar"; import { MatInputModule } from "@angular/material/input"; +import { MatMenu, MatMenuModule } from "@angular/material/menu"; +import { MatTooltipModule } from "@angular/material/tooltip"; + +enum Action { + AddCreate, + AddOnly +} @Component({ selector: "app-create-dialog", @@ -54,7 +61,9 @@ import { MatInputModule } from "@angular/material/input"; MatIconModule, MatListModule, MatProgressBarModule, - MatInputModule + MatInputModule, + MatMenuModule, + MatTooltipModule ], providers: [], }) @@ -76,6 +85,20 @@ export class CreateDialogComponent implements OnInit { this.amount() > 0 && this.operationNumberFormControl.valid ); + primaryAction = signal(Action.AddCreate); + Action = Action; + + primaryActionLabel = computed(() => { + return this.primaryAction() === Action.AddCreate + ? this.translate.instant(TranslationConstants.CREATE_DIALOG.CREATE) + : this.translate.instant(TranslationConstants.CREATE_DIALOG.ADD); + }); + + canAdd = computed(() => !this.isLoading() && this.canAddOperation()); + + canCreate = computed(() => !this.isLoading() && (this.operations().length > 0 || this.canAddOperation())); + + dropdownDisabled = computed(() => !this.canRun(Action.AddCreate) && !this.canRun(Action.AddOnly)); TranslationConstants = TranslationConstants; //Form Controls @@ -144,7 +167,7 @@ export class CreateDialogComponent implements OnInit { } detailsInputchanged(event: Event | KeyboardEvent) { - if (this.operations.length > 0) { + if (this.operations().length > 0) { this.addValidationToOperationNumber(); } } @@ -170,7 +193,7 @@ export class CreateDialogComponent implements OnInit { items.splice(index, 1); return items; }); - if (this.operations.length === 0) this.addValidationToOperationNumber(); + if (this.operations().length === 0) this.addValidationToOperationNumber(); } addValidationToOperationNumber() { @@ -217,8 +240,10 @@ export class CreateDialogComponent implements OnInit { onlySelf: true, }); } - } + this.operationNumberFormControl.reset(''); + } + async create(): Promise { let failed = false; for (const operation of this.operations()) { @@ -237,4 +262,26 @@ export class CreateDialogComponent implements OnInit { } if (!failed) this.dialog.close(); } -} + + canRun = (a: Action) => (a === Action.AddCreate ? this.canCreate() : this.canAdd()); + + onPrimaryClick = async () => { await this.performAction(this.primaryAction()); }; + + onSelectAction = (a: Action) => { this.primaryAction.set(a); }; + + isSelected = (a: Action) => this.primaryAction() === a; + + private async performAction(a: Action): Promise { + const canAdd = this.canAddOperation(); + + if (a === Action.AddCreate) { + if (canAdd) this.addOperation(); + + if (this.operations().length > 0) { + await this.create(); + } + } else if (canAdd) { + this.addOperation(); + } + } +} \ No newline at end of file diff --git a/src/Moryx.Orders.Web/src/app/extensions/translation-constants.extensions.ts b/src/Moryx.Orders.Web/src/app/extensions/translation-constants.extensions.ts index 0c45dc1b4..907f94c15 100644 --- a/src/Moryx.Orders.Web/src/app/extensions/translation-constants.extensions.ts +++ b/src/Moryx.Orders.Web/src/app/extensions/translation-constants.extensions.ts @@ -3,6 +3,7 @@ export class TranslationConstants { EN: 'en', DE: 'de', IT: 'it', + ZH: 'zh', }; public static readonly APP = { @@ -105,6 +106,7 @@ export class TranslationConstants { CANCEL: 'CREATE_DIALOG.CANCEL', CLEAR: 'CREATE_DIALOG.CLEAR', CREATE: 'CREATE_DIALOG.CREATE', + ADD: 'CREATE_DIALOG.ADD', OPERATION_NUMBER_INVALID: 'CREATE_DIALOG.OPERATION_NUMBER_INVALID', HINT: 'CREATE_DIALOG.HINT', }; diff --git a/src/Moryx.Orders.Web/src/assets/languages/de.json b/src/Moryx.Orders.Web/src/assets/languages/de.json index 2b7f03aba..76e844a8c 100644 --- a/src/Moryx.Orders.Web/src/assets/languages/de.json +++ b/src/Moryx.Orders.Web/src/assets/languages/de.json @@ -94,6 +94,7 @@ "CANCEL": "ABBRECHEN", "CLEAR": "ZURÜCKSETZEN", "CREATE": "ERSTELLEN", + "ADD": "HINZUFÜGEN", "OPERATION_NUMBER_INVALID": "Die Vorgangsnummer muss 4-stellig sein.", "HINT": "Nur Produkte mit einem Rezept können hier ausgewählt werden." }, diff --git a/src/Moryx.Orders.Web/src/assets/languages/en.json b/src/Moryx.Orders.Web/src/assets/languages/en.json index 56160cbad..fbf1ff3a5 100644 --- a/src/Moryx.Orders.Web/src/assets/languages/en.json +++ b/src/Moryx.Orders.Web/src/assets/languages/en.json @@ -94,6 +94,7 @@ "CANCEL": "CANCEL", "CLEAR": "CLEAR", "CREATE": "CREATE", + "ADD": "ADD", "OPERATION_NUMBER_INVALID": "The operation number must be 4 digits", "HINT": "Only products with a recipe can be selected here." }, diff --git a/src/Moryx.Orders.Web/src/assets/languages/it.json b/src/Moryx.Orders.Web/src/assets/languages/it.json index d11be7874..cc3512589 100644 --- a/src/Moryx.Orders.Web/src/assets/languages/it.json +++ b/src/Moryx.Orders.Web/src/assets/languages/it.json @@ -94,6 +94,7 @@ "CANCEL": "CANCELLA", "CLEAR": "PULISCI", "CREATE": "CREA", + "ADD": "AGGIUNGERE", "OPERATION_NUMBER_INVALID": "Il numero dell'operazione deve essere di 4 cifre", "HINT": "Sono visibili solo i prodotti che contengono una ricetta." }, diff --git a/src/Moryx.Orders.Web/src/assets/languages/zh.json b/src/Moryx.Orders.Web/src/assets/languages/zh.json index 9c3c45f3b..44abc2f00 100644 --- a/src/Moryx.Orders.Web/src/assets/languages/zh.json +++ b/src/Moryx.Orders.Web/src/assets/languages/zh.json @@ -94,6 +94,7 @@ "CANCEL": "取消", "CLEAR": "清除", "CREATE": "创建", + "ADD": "添加", "OPERATION_NUMBER_INVALID": "操作编号必须为4位数字", "HINT": "只能选择具有配方的产品。" },