-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Angular - Applying the latest migrations - Issue 24564 #24579
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
Merged
+499
−768
Merged
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
0881499
Refactor to replace NgClass with class bindings
fahrigedik dbccb4a
Refactor style bindings to use [style] instead of [ngStyle]
fahrigedik ca0172b
Refactor Angular imports for component modules
fahrigedik a03b33e
Refactor to replace NgClass with class binding
fahrigedik 89f873b
Refactor profile and alert components for cleaner templates
fahrigedik 9c7fa77
Merge branch 'dev' into issue-24564
fahrigedik 839686e
Merge branch 'dev' into issue-24564
fahrigedik 7a64085
Merge branch 'dev' into issue-24564
fahrigedik File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or 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 hidden or 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
240 changes: 88 additions & 152 deletions
240
...ponents/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html
This file contains hidden or 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 |
|---|---|---|
| @@ -1,177 +1,113 @@ | ||
| <ng-container *abpPermission="prop.permission; runChangeDetection: false"> | ||
| @switch (getComponent(prop)) { | ||
| @case ('template') { | ||
| <ng-container *ngComponentOutlet="prop.template; injector: injectorForCustomComponent" /> | ||
| } | ||
| @case ('template') { | ||
| <ng-container *ngComponentOutlet="prop.template; injector: injectorForCustomComponent" /> | ||
| } | ||
| } | ||
|
|
||
| <div [ngClass]="containerClassName" class="mb-2"> | ||
| <div [class]="containerClassName" class="mb-2"> | ||
| @switch (getComponent(prop)) { | ||
| @case ('input') { | ||
| <ng-template [ngTemplateOutlet]="label" /> | ||
| <input | ||
| #field | ||
| [id]="prop.id" | ||
| [formControlName]="prop.name" | ||
| [autocomplete]="prop.autocomplete" | ||
| [type]="getType(prop)" | ||
| [abpDisabled]="disabled" | ||
| [readonly]="readonly" | ||
| class="form-control" | ||
| /> | ||
| } | ||
| @case ('hidden') { | ||
| <input [formControlName]="prop.name" type="hidden" /> | ||
| } | ||
| @case ('checkbox') { | ||
| <div class="form-check" validationTarget> | ||
| <input | ||
| #field | ||
| [id]="prop.id" | ||
| [formControlName]="prop.name" | ||
| [abpDisabled]="disabled" | ||
| type="checkbox" | ||
| class="form-check-input" | ||
| /> | ||
| <ng-template | ||
| [ngTemplateOutlet]="label" | ||
| [ngTemplateOutletContext]="{ $implicit: 'form-check-label' }" | ||
| /> | ||
| </div> | ||
| } | ||
| @case ('select') { | ||
| <ng-template [ngTemplateOutlet]="label" /> | ||
| <select | ||
| #field | ||
| [id]="prop.id" | ||
| [formControlName]="prop.name" | ||
| [abpDisabled]="disabled" | ||
| class="form-select form-control" | ||
| > | ||
| @for (option of options$ | async; track option.value) { | ||
| <option [ngValue]="option.value"> | ||
| @if (prop.isExtra) { | ||
| {{ '::' + option.key | abpLocalization }} | ||
| } @else { | ||
| {{ option.key }} | ||
| } | ||
| </option> | ||
| } | ||
| </select> | ||
| } | ||
| @case ('multiselect') { | ||
| <ng-template [ngTemplateOutlet]="label"></ng-template> | ||
| <abp-extensible-form-multi-select | ||
| [prop]="prop" | ||
| [options]="options$ | async" | ||
| [formControlName]="prop.name" | ||
| [abpDisabled]="disabled" | ||
| /> | ||
| } | ||
| @case ('typeahead') { | ||
| <ng-template [ngTemplateOutlet]="label" /> | ||
| <div #typeahead class="position-relative" validationStyle validationTarget> | ||
| <input | ||
| #field | ||
| [id]="prop.id" | ||
| [autocomplete]="prop.autocomplete" | ||
| [abpDisabled]="disabled" | ||
| [ngbTypeahead]="search" | ||
| [editable]="false" | ||
| [inputFormatter]="typeaheadFormatter" | ||
| [resultFormatter]="typeaheadFormatter" | ||
| [ngModelOptions]="{ standalone: true }" | ||
| [(ngModel)]="typeaheadModel" | ||
| (selectItem)="setTypeaheadValue($event.item)" | ||
| (blur)="setTypeaheadValue(typeaheadModel)" | ||
| [class.is-invalid]="typeahead.classList.contains('is-invalid')" | ||
| class="form-control" | ||
| /> | ||
| <input [formControlName]="prop.name" type="hidden" /> | ||
| </div> | ||
| } | ||
| @case ('date') { | ||
| <ng-template [ngTemplateOutlet]="label" /> | ||
| <input | ||
| [id]="prop.id" | ||
| [formControlName]="prop.name" | ||
| (click)="datepicker.open()" | ||
| (keyup.space)="datepicker.open()" | ||
| ngbDatepicker | ||
| #datepicker="ngbDatepicker" | ||
| type="text" | ||
| class="form-control" | ||
| /> | ||
| } | ||
| @case ('time') { | ||
| <ng-template [ngTemplateOutlet]="label" /> | ||
| <ngb-timepicker [formControlName]="prop.name" /> | ||
| } | ||
| @case ('dateTime') { | ||
| <ng-template [ngTemplateOutlet]="label" /> | ||
| <abp-extensible-date-time-picker [prop]="prop" [meridian]="meridian$ | async" /> | ||
| } | ||
| @case ('textarea') { | ||
| <ng-template [ngTemplateOutlet]="label" /> | ||
| <textarea | ||
| #field | ||
| [id]="prop.id" | ||
| [formControlName]="prop.name" | ||
| [abpDisabled]="disabled" | ||
| [readonly]="readonly" | ||
| class="form-control" | ||
| ></textarea> | ||
| @case ('input') { | ||
| <ng-template [ngTemplateOutlet]="label" /> | ||
| <input #field [id]="prop.id" [formControlName]="prop.name" [autocomplete]="prop.autocomplete" [type]="getType(prop)" | ||
| [abpDisabled]="disabled" [readonly]="readonly" class="form-control" /> | ||
| } | ||
| @case ('hidden') { | ||
| <input [formControlName]="prop.name" type="hidden" /> | ||
| } | ||
| @case ('checkbox') { | ||
| <div class="form-check" validationTarget> | ||
| <input #field [id]="prop.id" [formControlName]="prop.name" [abpDisabled]="disabled" type="checkbox" | ||
| class="form-check-input" /> | ||
| <ng-template [ngTemplateOutlet]="label" [ngTemplateOutletContext]="{ $implicit: 'form-check-label' }" /> | ||
| </div> | ||
| } | ||
| @case ('select') { | ||
| <ng-template [ngTemplateOutlet]="label" /> | ||
| <select #field [id]="prop.id" [formControlName]="prop.name" [abpDisabled]="disabled" | ||
| class="form-select form-control"> | ||
| @for (option of options$ | async; track option.value) { | ||
| <option [ngValue]="option.value"> | ||
| @if (prop.isExtra) { | ||
| {{ '::' + option.key | abpLocalization }} | ||
| } @else { | ||
| {{ option.key }} | ||
| } | ||
| </option> | ||
| } | ||
| @case ('passwordinputgroup') { | ||
| <ng-template [ngTemplateOutlet]="label" /> | ||
| <div class="input-group form-group" validationTarget> | ||
| <input | ||
| class="form-control" | ||
| [id]="prop.id" | ||
| [formControlName]="prop.name" | ||
| [abpShowPassword]="showPassword" | ||
| /> | ||
| <button class="btn btn-secondary" type="button" (click)="showPassword = !showPassword"> | ||
| <i | ||
| class="fa" | ||
| aria-hidden="true" | ||
| [ngClass]="{ | ||
| </select> | ||
| } | ||
| @case ('multiselect') { | ||
| <ng-template [ngTemplateOutlet]="label"></ng-template> | ||
| <abp-extensible-form-multi-select [prop]="prop" [options]="options$ | async" [formControlName]="prop.name" | ||
| [abpDisabled]="disabled" /> | ||
| } | ||
| @case ('typeahead') { | ||
| <ng-template [ngTemplateOutlet]="label" /> | ||
| <div #typeahead class="position-relative" validationStyle validationTarget> | ||
| <input #field [id]="prop.id" [autocomplete]="prop.autocomplete" [abpDisabled]="disabled" [ngbTypeahead]="search" | ||
| [editable]="false" [inputFormatter]="typeaheadFormatter" [resultFormatter]="typeaheadFormatter" | ||
| [ngModelOptions]="{ standalone: true }" [(ngModel)]="typeaheadModel" | ||
| (selectItem)="setTypeaheadValue($event.item)" (blur)="setTypeaheadValue(typeaheadModel)" | ||
| [class.is-invalid]="typeahead.classList.contains('is-invalid')" class="form-control" /> | ||
| <input [formControlName]="prop.name" type="hidden" /> | ||
| </div> | ||
| } | ||
| @case ('date') { | ||
| <ng-template [ngTemplateOutlet]="label" /> | ||
| <input [id]="prop.id" [formControlName]="prop.name" (click)="datepicker.open()" (keyup.space)="datepicker.open()" | ||
| ngbDatepicker #datepicker="ngbDatepicker" type="text" class="form-control" /> | ||
| } | ||
| @case ('time') { | ||
| <ng-template [ngTemplateOutlet]="label" /> | ||
| <ngb-timepicker [formControlName]="prop.name" /> | ||
| } | ||
| @case ('dateTime') { | ||
| <ng-template [ngTemplateOutlet]="label" /> | ||
| <abp-extensible-date-time-picker [prop]="prop" [meridian]="meridian$ | async" /> | ||
| } | ||
| @case ('textarea') { | ||
| <ng-template [ngTemplateOutlet]="label" /> | ||
| <textarea #field [id]="prop.id" [formControlName]="prop.name" [abpDisabled]="disabled" [readonly]="readonly" | ||
| class="form-control"></textarea> | ||
| } | ||
| @case ('passwordinputgroup') { | ||
| <ng-template [ngTemplateOutlet]="label" /> | ||
| <div class="input-group form-group" validationTarget> | ||
| <input class="form-control" [id]="prop.id" [formControlName]="prop.name" [abpShowPassword]="showPassword" /> | ||
| <button class="btn btn-secondary" type="button" (click)="showPassword = !showPassword"> | ||
| <i class="fa" aria-hidden="true" [class]="{ | ||
| 'fa-eye-slash': !showPassword, | ||
| 'fa-eye': showPassword, | ||
| }" | ||
| ></i> | ||
| </button> | ||
| </div> | ||
| } | ||
| }"></i> | ||
| </button> | ||
| </div> | ||
| } | ||
| } | ||
|
|
||
| @if (prop.formText) { | ||
| <small class="text-muted d-block">{{ prop.formText | abpLocalization }}</small> | ||
| <small class="text-muted d-block">{{ prop.formText | abpLocalization }}</small> | ||
| } | ||
| </div> | ||
| </ng-container> | ||
|
|
||
| <ng-template #label let-classes> | ||
| <label [htmlFor]="prop.id" [ngClass]="classes || 'form-label d-inline-block'"> | ||
| <label [htmlFor]="prop.id" [class]="classes || 'form-label d-inline-block'"> | ||
| <span class="d-inline-flex align-items-center gap-1 text-nowrap"> | ||
| @if (prop.displayTextResolver) { | ||
| {{ prop.displayTextResolver(data) | abpLocalization }} | ||
| {{ prop.displayTextResolver(data) | abpLocalization }} | ||
| } @else { | ||
| @if (prop.isExtra) { | ||
| {{ '::' + prop.displayName | abpLocalization }} | ||
| } @else { | ||
| {{ prop.displayName | abpLocalization }} | ||
| } | ||
| @if (prop.isExtra) { | ||
| {{ '::' + prop.displayName | abpLocalization }} | ||
| } @else { | ||
| {{ prop.displayName | abpLocalization }} | ||
| } | ||
| } | ||
| {{ asterisk }} | ||
| @if (prop.tooltip) { | ||
| <i | ||
| [ngbTooltip]="prop.tooltip.text | abpLocalization" | ||
| [placement]="prop.tooltip.placement || 'auto'" | ||
| container="body" | ||
| class="bi bi-info-circle" | ||
| ></i> | ||
| <i [ngbTooltip]="prop.tooltip.text | abpLocalization" [placement]="prop.tooltip.placement || 'auto'" | ||
| container="body" class="bi bi-info-circle"></i> | ||
| } | ||
| </span> | ||
| </label> | ||
| </ng-template> | ||
| </ng-template> |
This file contains hidden or 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
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
The trailing comma is missing after the last element in the imports array. This is inconsistent with TypeScript style conventions used elsewhere in the codebase where trailing commas are present after the last array element.