tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

use new control flow in `feature-management` package

pull/19469/head
Sinan997 3 years ago
parent
0c887d072f
commit
5b48fe651d
2 changed files with 317 additions and 134 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 171
      npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html
  2. 280
      npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html

171
npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html
View File

@ -1,4 +1,171 @@
<ng-container <ng-container *abpPermission="prop.permission; runChangeDetection: false">
@switch (getComponent(prop)) {
@case ('template') {
<ng-container *ngComponentOutlet="prop.template; injector: injectorForCustomComponent">
</ng-container>
}
}
<div [ngClass]="containerClassName" class="mb-2">
@switch (getComponent(prop)) {
@case ('input') {
<ng-template [ngTemplateOutlet]="label"></ng-template>
<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' }"
></ng-template>
</div>
}
@case ('select') {
<ng-template [ngTemplateOutlet]="label"></ng-template>
<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">
{{ option.key }}
</option>
}
</select>
}
@case ('multiselect') {
<ng-template [ngTemplateOutlet]="label"></ng-template>
<select
#field
[id]="prop.id"
[formControlName]="prop.name"
[abpDisabled]="disabled"
multiple="multiple"
class="form-select form-control"
>
@for (options of options$ | asnyc; track option.value) {
<option [ngValue]="option.value">
{{ option.key }}
</option>
}
</select>
}
@case ('typeahead') {
<ng-template [ngTemplateOutlet]="label"></ng-template>
<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"></ng-template>
<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"></ng-template>
<ngb-timepicker [formControlName]="prop.name"></ngb-timepicker>
}
@case ('dateTime') {
<ng-template [ngTemplateOutlet]="label"></ng-template>
<abp-extensible-date-time-picker [prop]="prop" [meridian]="meridian$ | async" />
}
@case ('textarea') {
<ng-template [ngTemplateOutlet]="label"></ng-template>
<textarea
#field
[id]="prop.id"
[formControlName]="prop.name"
[abpDisabled]="disabled"
[readonly]="readonly"
class="form-control"
></textarea>
}
@case ('passwordinputgroup') {
<ng-template [ngTemplateOutlet]="label"></ng-template>
<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]="{
'fa-eye-slash': !showPassword,
'fa-eye': showPassword
}"
></i>
</button>
</div>
}
}
@if (prop.formText) {
<small class="text-muted d-block">{{ prop.formText | abpLocalization }}</small>
}
</div>
</ng-container>
<!-- <ng-container
[ngSwitch]="getComponent(prop)" [ngSwitch]="getComponent(prop)"
*abpPermission="prop.permission; runChangeDetection: false" *abpPermission="prop.permission; runChangeDetection: false"
> >
@ -163,7 +330,7 @@
<small class="text-muted d-block">{{ prop.formText | abpLocalization }}</small> <small class="text-muted d-block">{{ prop.formText | abpLocalization }}</small>
} }
</div> </div>
</ng-container> </ng-container> -->
<ng-template #label let-classes> <ng-template #label let-classes>
<label [htmlFor]="prop.id" [ngClass]="classes || 'form-label'"> <label [htmlFor]="prop.id" [ngClass]="classes || 'form-label'">

280
npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html
View File

@ -1,145 +1,161 @@
<abp-modal *ngIf="visible" [(visible)]="visible" [busy]="modalBusy" [options]="{ size: 'lg' }"> @if (visible) {
<ng-template #abpHeader> <abp-modal [(visible)]="visible" [busy]="modalBusy" [options]="{ size: 'lg' }">
<h3>{{ 'AbpFeatureManagement::Features' | abpLocalization }}</h3> <ng-template #abpHeader>
</ng-template> <h3>{{ 'AbpFeatureManagement::Features' | abpLocalization }}</h3>
</ng-template>
<ng-template #abpBody> <ng-template #abpBody>
<div class="row"> <div class="row">
<ng-container *ngIf="groups.length"> @if (groups.length) {
<div class="col-md-4"> <div class="col-md-4">
<ul <ul
ngbNav ngbNav
#nav="ngbNav" #nav="ngbNav"
[(activeId)]="selectedGroupDisplayName" [(activeId)]="selectedGroupDisplayName"
class="nav-pills" class="nav-pills"
orientation="vertical" orientation="vertical"
>
<li
*ngFor="let group of groups; trackBy: track.by('name')"
[ngbNavItem]="group.displayName"
> >
<a ngbNavLink>{{ group.displayName }}</a> @for (group of groups; track group.name) {
<ng-template ngbNavContent> <li [ngbNavItem]="group.displayName">
<h4>{{ selectedGroupDisplayName }}</h4> <a ngbNavLink>{{ group.displayName }}</a>
<hr class="mt-2 mb-3" /> <ng-template ngbNavContent>
<h4>{{ selectedGroupDisplayName }}</h4>
<hr class="mt-2 mb-3" />
<div @for (feature of features[group.name]; track feature.id; let i = $index) {
class="mt-2" <div class="mt-2" [ngStyle]="feature.style" (keyup.enter)="save()">
*ngFor=" @switch (feature.valueType?.name) {
let feature of features[group.name]; @case (valueTypes.ToggleStringValueType) {
let i = index; <div class="form-check">
trackBy: track.by('id') <input
" class="form-check-input"
[ngStyle]="feature.style" type="checkbox"
[ngSwitch]="feature.valueType?.name" [id]="feature.name"
(keyup.enter)="save()" [(ngModel)]="feature.value"
> (ngModelChange)="onCheckboxClick($event, feature)"
<ng-container *ngSwitchCase="valueTypes.ToggleStringValueType"> />
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
[id]="feature.name"
[(ngModel)]="feature.value"
(ngModelChange)="onCheckboxClick($event, feature)"
/>
<label class="form-check-label" [htmlFor]="feature.name">{{ <label class="form-check-label" [htmlFor]="feature.name">{{
feature.displayName feature.displayName
}}</label> }}</label>
<ng-container <ng-container
*ngTemplateOutlet="descTmp; context: { $implicit: feature.description }" *ngTemplateOutlet="
></ng-container> descTmp;
</div> context: { $implicit: feature.description }
</ng-container> "
<ng-container *ngSwitchCase="valueTypes.FreeTextStringValueType"> ></ng-container>
<div class="mb-3 form-group"> </div>
<label [htmlFor]="feature.name" class="form-label">{{ }
feature.displayName @case (valueTypes.FreeTextStringValueType) {
}}</label> <div class="mb-3 form-group">
<input <label [htmlFor]="feature.name" class="form-label">{{
class="form-control" feature.displayName
type="text" }}</label>
[id]="feature.name" <input
[(ngModel)]="feature.value" class="form-control"
[abpFeatureManagementFreeText]="feature" type="text"
/> [id]="feature.name"
[(ngModel)]="feature.value"
[abpFeatureManagementFreeText]="feature"
/>
<ng-container <ng-container
*ngTemplateOutlet="descTmp; context: { $implicit: feature.description }" *ngTemplateOutlet="
></ng-container> descTmp;
</div> context: { $implicit: feature.description }
</ng-container> "
<ng-container *ngSwitchCase="valueTypes.SelectionStringValueType"> ></ng-container>
<ng-container *ngIf="feature.valueType.itemSource?.items?.length"> </div>
<div class="mb-3 form-group"> }
<label [htmlFor]="feature.name" class="form-label">{{ @case (valueTypes.SelectionStringValueType) {
feature.displayName @if (feature.valueType.itemSource?.items?.length) {
}}</label> <div class="mb-3 form-group">
<select class="form-select" [id]="feature.name" [(ngModel)]="feature.value"> <label [htmlFor]="feature.name" class="form-label">{{
<option feature.displayName
*ngFor=" }}</label>
let item of feature.valueType.itemSource?.items; <select
trackBy: track.by('value') class="form-select"
" [id]="feature.name"
[ngValue]="item.value" [(ngModel)]="feature.value"
> >
{{ @for (
item.displayText?.resourceName + '::' + item.displayText?.name item of feature.valueType.itemSource?.items;
| abpLocalization track item.value
}} ) {
</option> <option [ngValue]="item.value">
</select> {{
<ng-container item.displayText?.resourceName +
*ngTemplateOutlet="descTmp; context: { $implicit: feature.description }" '::' +
></ng-container> item.displayText?.name | abpLocalization
}}
</option>
}
</select>
<ng-container
*ngTemplateOutlet="
descTmp;
context: { $implicit: feature.description }
"
></ng-container>
</div>
}
}
@default {
{{ feature.displayName }}
}
}
</div> </div>
</ng-container> }
</ng-container> </ng-template>
<ng-container *ngSwitchDefault>{{ feature.displayName }}</ng-container> </li>
</div> }
</ng-template> </ul>
</li> </div>
</ul>
</div>
<ng-template #descTmp let-description> <ng-template #descTmp let-description>
<small *ngIf="description" class="d-block form-text text-muted">{{ description }}</small> @if (description) {
</ng-template> <small class="d-block form-text text-muted">{{ description }}</small>
}
</ng-template>
<div class="col-md-8"><div class="py-0" [ngbNavOutlet]="nav"></div></div> <div class="col-md-8"><div class="py-0" [ngbNavOutlet]="nav"></div></div>
</ng-container> }
<div class="col" *ngIf="!groups.length"> @if (!groups.length) {
{{ 'AbpFeatureManagement::NoFeatureFoundMessage' | abpLocalization }} <div class="col">
{{ 'AbpFeatureManagement::NoFeatureFoundMessage' | abpLocalization }}
</div>
}
</div> </div>
</div> </ng-template>
</ng-template>
<ng-template #abpFooter> <ng-template #abpFooter>
<button abpClose type="button" class="btn btn-link"> <button abpClose type="button" class="btn btn-link">
{{ 'AbpFeatureManagement::Cancel' | abpLocalization }} {{ 'AbpFeatureManagement::Cancel' | abpLocalization }}
</button> </button>
<abp-button @if (groups.length) {
*ngIf="groups.length" <abp-button
iconClass="fa fa-refresh" iconClass="fa fa-refresh"
buttonClass="btn btn-outline-primary" buttonClass="btn btn-outline-primary"
[disabled]="modalBusy" [disabled]="modalBusy"
(click)="resetToDefault()" (click)="resetToDefault()"
aria-hidden="true" aria-hidden="true"
> >
{{ 'AbpFeatureManagement::ResetToDefault' | abpLocalization }} {{ 'AbpFeatureManagement::ResetToDefault' | abpLocalization }}
</abp-button> </abp-button>
}
<abp-button @if (groups.length) {
*ngIf="groups.length" <abp-button
iconClass="fa fa-check" iconClass="fa fa-check"
[disabled]="modalBusy" [disabled]="modalBusy"
(click)="save()" (click)="save()"
aria-hidden="true" aria-hidden="true"
> >
{{ 'AbpFeatureManagement::Save' | abpLocalization }} {{ 'AbpFeatureManagement::Save' | abpLocalization }}
</abp-button> </abp-button>
</ng-template> }
</abp-modal> </ng-template>
</abp-modal>
}

Write Preview
Loading…
Cancel
Save