Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,71 +1,111 @@
<h2 mat-dialog-title>{{ TranslationConstants.CREATE_DIALOG.TITLE | translate }}</h2>
<h2 mat-dialog-title>
{{ TranslationConstants.CREATE_DIALOG.TITLE | translate }}
</h2>
<mat-dialog-content>
<h3>{{ TranslationConstants.CREATE_DIALOG.ORDER_DETAILS | translate }}</h3>
<mat-form-field appearance="outline">
<mat-label>{{ TranslationConstants.CREATE_DIALOG.ORDER_NUMBER | translate }}</mat-label>
<input matInput [(ngModel)]="orderNumber" [disabled]="operations().length > 0 || isLoading()" [tabIndex]="0"/>
<mat-label>{{
TranslationConstants.CREATE_DIALOG.ORDER_NUMBER | translate
}}</mat-label>
<input
matInput
[(ngModel)]="orderNumber"
[disabled]="operations().length > 0 || isLoading()"
[tabIndex]="0"
/>
</mat-form-field>
<div class="create-dialog-operation-container">
<h3 class="create-dialog-operation-title">
{{ TranslationConstants.CREATE_DIALOG.OPERATION_DETAILS | translate }}
</h3>
</div>
<mat-form-field appearance="outline">
<mat-label>{{ TranslationConstants.CREATE_DIALOG.OPERATION_NUMBER | translate }}</mat-label>
<mat-label>{{
TranslationConstants.CREATE_DIALOG.OPERATION_NUMBER | translate
}}</mat-label>
<input
matInput
[formControl]="operationNumberFormControl"
[(ngModel)]="operationNumber"
[disabled]="isLoading()"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this not needed anymore? if yes, why?

(keydown)="detailsInputchanged($event)"
/>
<mat-error *ngIf="operationNumberFormControl.hasError('isOperationNumberNotValid')">
{{ TranslationConstants.CREATE_DIALOG.OPERATION_NUMBER_INVALID | translate }}
/>
<mat-error
*ngIf="
operationNumberFormControl.hasError('isOperationNumberNotValid') &&
operationNumberFormControl.touched &&
operationNumberFormControl.value
"
>
{{
TranslationConstants.CREATE_DIALOG.OPERATION_NUMBER_INVALID | translate
}}
</mat-error>
</mat-form-field>
<div>
<mat-form-field appearance="outline">
<mat-label>{{ TranslationConstants.CREATE_DIALOG.PRODUCT | translate }}</mat-label>
<mat-select [(value)]="selectedProduct" [disabled]="isLoading()" (valueChange)="detailsInputchanged($event)">
<mat-label>{{
TranslationConstants.CREATE_DIALOG.PRODUCT | translate
}}</mat-label>
<mat-select
[(value)]="selectedProduct"
[disabled]="isLoading()"
(valueChange)="detailsInputchanged($event)"
>
<mat-option *ngFor="let product of products()" [value]="product"
>{{ product.identifier }}-{{ product.revision | number : '2.0' }} {{ product.name }}</mat-option
>{{ product.identifier }}-{{ product.revision | number : "2.0" }}
{{ product.name }}</mat-option
>
<mat-hint class="product-without-recipe-hint">{{
TranslationConstants.CREATE_DIALOG.HINT | translate
}}</mat-hint>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>{{ TranslationConstants.CREATE_DIALOG.RECIPE | translate }}</mat-label>
<mat-label>{{
TranslationConstants.CREATE_DIALOG.RECIPE | translate
}}</mat-label>
<mat-select
[(value)]="selectedRecipe"
[disabled]="isLoading() || recipes().length === 0"
(valueChange)="detailsInputchanged($event)">
<mat-option *ngFor="let recipe of recipes()" [value]="recipe">{{ recipe.name }}</mat-option>
(valueChange)="detailsInputchanged($event)"
>
<mat-option *ngFor="let recipe of recipes()" [value]="recipe">{{
recipe.name
}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<mat-form-field appearance="outline">
<mat-label>{{ TranslationConstants.CREATE_DIALOG.AMOUNT | translate }}</mat-label>
<input matInput [(ngModel)]="amount" [disabled]="isLoading()" (keydown)="detailsInputchanged($event)" />
<mat-label>{{
TranslationConstants.CREATE_DIALOG.AMOUNT | translate
}}</mat-label>
<input
matInput
[(ngModel)]="amount"
[disabled]="isLoading()"
(keydown)="detailsInputchanged($event)"
/>
</mat-form-field>
<button
mat-flat-button
class="create-dialog-operation-button"
[disabled]="!canAddOperation()"
(click)="addOperation()">
<mat-icon>add</mat-icon>
</button>
<h3>{{ TranslationConstants.CREATE_DIALOG.ADDED_OPERATIONS | translate }} ({{ operations().length }})</h3>

<h3>
{{ TranslationConstants.CREATE_DIALOG.ADDED_OPERATIONS | translate }} ({{
operations().length
}})
</h3>
<mat-list class="create-dialog-operation-list-container">
<div *ngFor="let operation of operations()" class="operation-mat-list-item-container">
<div
*ngFor="let operation of operations()"
class="operation-mat-list-item-container"
>
<mat-list-item class="operation-list-item">
<span matListItemTitle>{{ operation.operationNumber }}</span>
<span matListItemLine
>{{ 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 }}</span
{{ TranslationConstants.CREATE_DIALOG.AMOUNT | translate }}:
{{ operation.totalAmount }}</span
>
</mat-list-item>
<button mat-icon-button (click)="deleteOperation(operation)">
Expand All @@ -81,8 +121,47 @@ <h3>{{ TranslationConstants.CREATE_DIALOG.ADDED_OPERATIONS | translate }} ({{ op
<button mat-button mat-dialog-close color="primary">
{{ TranslationConstants.CREATE_DIALOG.CANCEL | translate }}
</button>
<button mat-flat-button color="primary" [disabled]="operations().length === 0" (click)="create()">
{{ TranslationConstants.CREATE_DIALOG.CREATE | translate }}
</button>

<div class="split-button">
<button
mat-flat-button
color="primary"
class="primary"
(click)="onPrimaryClick()"
[disabled]="!canRun(primaryAction())"
>
{{ primaryActionLabel() }}
</button>

<button
mat-flat-button
color="primary"
class="dropdown-flat"
[matMenuTriggerFor]="actionMenu"
[disabled]="dropdownDisabled()"
>
<mat-icon>arrow_drop_down</mat-icon>
</button>

<mat-menu #actionMenu="matMenu">
<button
mat-menu-item
(click)="onSelectAction('ADD_CREATE')"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this would make a nice little enum, don't you think? 🤔

[disabled]="!canRun('ADD_CREATE')"
>
<mat-icon *ngIf="isSelected('ADD_CREATE')">check</mat-icon>
<span>{{ TranslationConstants.CREATE_DIALOG.CREATE | translate }}</span>
</button>
<button
mat-menu-item
(click)="onSelectAction('ADD_ONLY')"
[disabled]="!canRun('ADD_ONLY')"
>
<mat-icon *ngIf="isSelected('ADD_ONLY')">check</mat-icon>
<span>{{ TranslationConstants.CREATE_DIALOG.ADD | translate }}</span>
</button>
</mat-menu>
</div>

<mat-progress-bar mode="indeterminate" *ngIf="isLoading()"></mat-progress-bar>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -40,4 +31,31 @@ mat-form-field {
@include mat.list-overrides((
list-item-two-line-container-height: 60px,
));
}
}

.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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,10 @@ 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";

type Action = 'ADD_CREATE' | 'ADD_ONLY';

@Component({
selector: "app-create-dialog",
Expand All @@ -54,7 +58,9 @@ import { MatInputModule } from "@angular/material/input";
MatIconModule,
MatListModule,
MatProgressBarModule,
MatInputModule
MatInputModule,
MatMenuModule,
MatTooltipModule
],
providers: [],
})
Expand All @@ -76,6 +82,8 @@ export class CreateDialogComponent implements OnInit {
this.amount() > 0 &&
this.operationNumberFormControl.valid
);
primaryAction = signal<Action>('ADD_CREATE');


TranslationConstants = TranslationConstants;
//Form Controls
Expand Down Expand Up @@ -144,7 +152,7 @@ export class CreateDialogComponent implements OnInit {
}

detailsInputchanged(event: Event | KeyboardEvent) {
if (this.operations.length > 0) {
if (this.operations().length > 0) {
this.addValidationToOperationNumber();
}
}
Expand All @@ -170,7 +178,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() {
Expand Down Expand Up @@ -217,8 +225,12 @@ export class CreateDialogComponent implements OnInit {
onlySelf: true,
});
}
}

this.operationNumberFormControl.reset('');
this.operationNumberFormControl.markAsPristine();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this and the following line should be redundant, see https://angular.dev/api/forms/FormControl -> reset

Also check line 208, that shouldn't be necessary anymore either

this.operationNumberFormControl.markAsUntouched();
}

async create(): Promise<void> {
let failed = false;
for (const operation of this.operations()) {
Expand All @@ -237,4 +249,33 @@ export class CreateDialogComponent implements OnInit {
}
if (!failed) this.dialog.close();
}

primaryActionLabel = computed(() => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fields belong at the beginning of the class to the others 😊

return this.primaryAction() === 'ADD_CREATE'
? this.translate.instant(TranslationConstants.CREATE_DIALOG.CREATE)
: this.translate.instant(TranslationConstants.CREATE_DIALOG.ADD);
});

canAdd = () => !this.isLoading() && this.canAddOperation();

canCreate = () => !this.isLoading() && (this.operations().length > 0 || this.canAddOperation());

canRun = (a: Action) => (a === 'ADD_CREATE' ? this.canCreate() : this.canAdd());

dropdownDisabled = () => !this.canRun('ADD_CREATE') && !this.canRun('ADD_ONLY');

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<void> {
if (a === 'ADD_CREATE') {
if (this.canAddOperation()) this.addOperation();
if (this.operations().length > 0) await this.create();
return;
}
if (this.canAddOperation()) this.addOperation();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

either make this if-else and remove the return or use the early return and remove the second if, this is half of both options 😅

}
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ export class TranslationConstants {
EN: 'en',
DE: 'de',
IT: 'it',
ZH: 'zh',
};

public static readonly APP = {
Expand Down Expand Up @@ -102,6 +103,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',
};
Expand Down
1 change: 1 addition & 0 deletions src/Moryx.Orders.Web/src/assets/languages/de.json
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,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."
},
Expand Down
1 change: 1 addition & 0 deletions src/Moryx.Orders.Web/src/assets/languages/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,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."
},
Expand Down
1 change: 1 addition & 0 deletions src/Moryx.Orders.Web/src/assets/languages/it.json
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,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."
},
Expand Down
1 change: 1 addition & 0 deletions src/Moryx.Orders.Web/src/assets/languages/zh.json
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@
"CANCEL": "取消",
"CLEAR": "清除",
"CREATE": "创建",
"ADD": "添加",
"OPERATION_NUMBER_INVALID": "操作编号必须为4位数字",
"HINT": "只能选择具有配方的产品。"
},
Expand Down
Loading