-
Notifications
You must be signed in to change notification settings - Fork 24
Add split button to 'create dialog' #663
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: future
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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()" | ||
(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)"> | ||
|
@@ -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')" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 |
---|---|---|
|
@@ -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", | ||
|
@@ -54,7 +58,9 @@ import { MatInputModule } from "@angular/material/input"; | |
MatIconModule, | ||
MatListModule, | ||
MatProgressBarModule, | ||
MatInputModule | ||
MatInputModule, | ||
MatMenuModule, | ||
MatTooltipModule | ||
], | ||
providers: [], | ||
}) | ||
|
@@ -76,6 +82,8 @@ export class CreateDialogComponent implements OnInit { | |
this.amount() > 0 && | ||
this.operationNumberFormControl.valid | ||
); | ||
primaryAction = signal<Action>('ADD_CREATE'); | ||
|
||
|
||
TranslationConstants = TranslationConstants; | ||
//Form Controls | ||
|
@@ -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(); | ||
} | ||
} | ||
|
@@ -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() { | ||
|
@@ -217,8 +225,12 @@ export class CreateDialogComponent implements OnInit { | |
onlySelf: true, | ||
}); | ||
} | ||
} | ||
|
||
this.operationNumberFormControl.reset(''); | ||
this.operationNumberFormControl.markAsPristine(); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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()) { | ||
|
@@ -237,4 +249,33 @@ export class CreateDialogComponent implements OnInit { | |
} | ||
if (!failed) this.dialog.close(); | ||
} | ||
|
||
primaryActionLabel = computed(() => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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(); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 😅 |
||
} | ||
} |
There was a problem hiding this comment.
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?