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

Write Preview
Loading…
Cancel
Save