mirror of https://github.com/abpframework/abp.git
Muhammed Altuğ
5 years ago
committed by
GitHub
GitHub
30 changed files with 21 additions and 1140 deletions
@ -1,66 +0,0 @@ |
|||||
import { AfterViewInit, Directive, ElementRef, Input, Optional, Renderer2 } from '@angular/core'; |
|
||||
import { Subject } from 'rxjs'; |
|
||||
|
|
||||
/** |
|
||||
* |
|
||||
* @deprecated To be deleted in v5.0 |
|
||||
*/ |
|
||||
@Directive({ |
|
||||
selector: '[abpVisibility]', |
|
||||
}) |
|
||||
export class VisibilityDirective implements AfterViewInit { |
|
||||
@Input('abpVisibility') |
|
||||
focusedElement: HTMLElement; |
|
||||
|
|
||||
completed$ = new Subject<boolean>(); |
|
||||
|
|
||||
constructor(@Optional() private elRef: ElementRef, private renderer: Renderer2) {} |
|
||||
|
|
||||
ngAfterViewInit() { |
|
||||
if (!this.focusedElement && this.elRef) { |
|
||||
this.focusedElement = this.elRef.nativeElement; |
|
||||
} |
|
||||
|
|
||||
const observer = new MutationObserver(mutations => { |
|
||||
mutations.forEach(mutation => { |
|
||||
if (!mutation.target) return; |
|
||||
|
|
||||
const htmlNodes = |
|
||||
Array.from(mutation.target.childNodes || []).filter( |
|
||||
node => node instanceof HTMLElement, |
|
||||
) || []; |
|
||||
|
|
||||
if (!htmlNodes.length) { |
|
||||
this.removeFromDOM(); |
|
||||
} |
|
||||
}); |
|
||||
}); |
|
||||
|
|
||||
observer.observe(this.focusedElement, { |
|
||||
childList: true, |
|
||||
}); |
|
||||
|
|
||||
setTimeout(() => { |
|
||||
const htmlNodes = |
|
||||
Array.from(this.focusedElement.childNodes || []).filter( |
|
||||
node => node instanceof HTMLElement, |
|
||||
) || []; |
|
||||
|
|
||||
if (!htmlNodes.length) this.removeFromDOM(); |
|
||||
}, 0); |
|
||||
|
|
||||
this.completed$.subscribe(() => observer.disconnect()); |
|
||||
} |
|
||||
|
|
||||
disconnect() { |
|
||||
this.completed$.next(); |
|
||||
this.completed$.complete(); |
|
||||
} |
|
||||
|
|
||||
removeFromDOM() { |
|
||||
if (!this.elRef.nativeElement) return; |
|
||||
|
|
||||
this.renderer.removeChild(this.elRef.nativeElement.parentElement, this.elRef.nativeElement); |
|
||||
this.disconnect(); |
|
||||
} |
|
||||
} |
|
||||
@ -1,117 +0,0 @@ |
|||||
import { ABP } from './common'; |
|
||||
|
|
||||
export namespace ApplicationConfiguration { |
|
||||
/** |
|
||||
* @deprecated Use the ApplicationConfigurationDto interface instead. To be deleted in v5.0. |
|
||||
*/ |
|
||||
export interface Response { |
|
||||
localization: Localization; |
|
||||
auth: Auth; |
|
||||
setting: Value; |
|
||||
currentUser: CurrentUser; |
|
||||
currentTenant: CurrentTenant; |
|
||||
features: Value; |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* @deprecated Use the ApplicationLocalizationConfigurationDto interface instead. To be deleted in v5.0. |
|
||||
*/ |
|
||||
export interface Localization { |
|
||||
currentCulture: CurrentCulture; |
|
||||
defaultResourceName: string; |
|
||||
languages: Language[]; |
|
||||
values: LocalizationValue; |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* @deprecated Use the Record<string, Record<string, string>> type instead. To be deleted in v5.0. |
|
||||
*/ |
|
||||
export interface LocalizationValue { |
|
||||
[key: string]: { [key: string]: string }; |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* @deprecated Use the LanguageInfo interface instead. To be deleted in v5.0. |
|
||||
*/ |
|
||||
export interface Language { |
|
||||
cultureName: string; |
|
||||
uiCultureName: string; |
|
||||
displayName: string; |
|
||||
flagIcon: string; |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* @deprecated Use the CurrentCultureDto interface instead. To be deleted in v5.0. |
|
||||
*/ |
|
||||
export interface CurrentCulture { |
|
||||
cultureName: string; |
|
||||
dateTimeFormat: DateTimeFormat; |
|
||||
displayName: string; |
|
||||
englishName: string; |
|
||||
isRightToLeft: boolean; |
|
||||
name: string; |
|
||||
nativeName: string; |
|
||||
threeLetterIsoLanguageName: string; |
|
||||
twoLetterIsoLanguageName: string; |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* @deprecated Use the DateTimeFormatDto interface instead. To be deleted in v5.0. |
|
||||
*/ |
|
||||
export interface DateTimeFormat { |
|
||||
calendarAlgorithmType: string; |
|
||||
dateSeparator: string; |
|
||||
fullDateTimePattern: string; |
|
||||
longTimePattern: string; |
|
||||
shortDatePattern: string; |
|
||||
shortTimePattern: string; |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* @deprecated Use the ApplicationAuthConfigurationDto interface instead. To be deleted in v5.0. |
|
||||
*/ |
|
||||
export interface Auth { |
|
||||
policies: Policy; |
|
||||
grantedPolicies: Policy; |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* @deprecated Use the Record<string, boolean> type instead. To be deleted in v5.0. |
|
||||
*/ |
|
||||
export interface Policy { |
|
||||
[key: string]: boolean; |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* @deprecated To be deleted in v5.0. |
|
||||
*/ |
|
||||
export interface Value { |
|
||||
values: ABP.Dictionary<string>; |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* @deprecated Use the CurrentUserDto interface instead. To be deleted in v5.0. |
|
||||
*/ |
|
||||
export interface CurrentUser { |
|
||||
email: string; |
|
||||
emailVerified: false; |
|
||||
id: string; |
|
||||
isAuthenticated: boolean; |
|
||||
roles: string[]; |
|
||||
tenantId: string; |
|
||||
userName: string; |
|
||||
name: string; |
|
||||
phoneNumber: string; |
|
||||
phoneNumberVerified: boolean; |
|
||||
surName: string; |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* @deprecated Use the CurrentTenantDto interface instead. To be deleted in v5.0. |
|
||||
*/ |
|
||||
export interface CurrentTenant { |
|
||||
id: string; |
|
||||
name: string; |
|
||||
isAvailable?: boolean; |
|
||||
} |
|
||||
} |
|
||||
@ -1,24 +0,0 @@ |
|||||
import { Injectable } from '@angular/core'; |
|
||||
import { Observable } from 'rxjs'; |
|
||||
import { Rest } from '../models/rest'; |
|
||||
import { ApplicationConfigurationDto } from '../proxy/volo/abp/asp-net-core/mvc/application-configurations/models'; |
|
||||
import { RestService } from './rest.service'; |
|
||||
|
|
||||
/** |
|
||||
* @deprecated Use AbpApplicationConfigurationService instead. To be deleted in v5.0. |
|
||||
*/ |
|
||||
@Injectable({ |
|
||||
providedIn: 'root', |
|
||||
}) |
|
||||
export class ApplicationConfigurationService { |
|
||||
constructor(private rest: RestService) {} |
|
||||
|
|
||||
getConfiguration(): Observable<ApplicationConfigurationDto> { |
|
||||
const request: Rest.Request<null> = { |
|
||||
method: 'GET', |
|
||||
url: '/api/abp/application-configuration', |
|
||||
}; |
|
||||
|
|
||||
return this.rest.request<null, ApplicationConfigurationDto>(request, {}); |
|
||||
} |
|
||||
} |
|
||||
@ -1,31 +0,0 @@ |
|||||
import { Observable, Subject } from 'rxjs'; |
|
||||
import { takeUntil } from 'rxjs/operators'; |
|
||||
|
|
||||
function isFunction(value) { |
|
||||
return typeof value === 'function'; |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* @deprecated no longer working, please use SubscriptionService (https://docs.abp.io/en/abp/latest/UI/Angular/Subscription-Service) instead.
|
|
||||
*/ |
|
||||
export const takeUntilDestroy = |
|
||||
(componentInstance, destroyMethodName = 'ngOnDestroy') => |
|
||||
<T>(source: Observable<T>) => { |
|
||||
const originalDestroy = componentInstance[destroyMethodName]; |
|
||||
if (isFunction(originalDestroy) === false) { |
|
||||
throw new Error( |
|
||||
`${componentInstance.constructor.name} is using untilDestroyed but doesn't implement ${destroyMethodName}`, |
|
||||
); |
|
||||
} |
|
||||
if (!componentInstance['__takeUntilDestroy']) { |
|
||||
componentInstance['__takeUntilDestroy'] = new Subject(); |
|
||||
|
|
||||
componentInstance[destroyMethodName] = function () { |
|
||||
// eslint-disable-next-line prefer-rest-params
|
|
||||
isFunction(originalDestroy) && originalDestroy.apply(this, arguments); |
|
||||
componentInstance['__takeUntilDestroy'].next(true); |
|
||||
componentInstance['__takeUntilDestroy'].complete(); |
|
||||
}; |
|
||||
} |
|
||||
return source.pipe(takeUntil<T>(componentInstance['__takeUntilDestroy'])); |
|
||||
}; |
|
||||
@ -1,13 +0,0 @@ |
|||||
import { Component, ViewChild, ViewContainerRef } from '@angular/core'; |
|
||||
|
|
||||
/** |
|
||||
* @deprecated To be removed in v5.0 |
|
||||
*/ |
|
||||
@Component({ |
|
||||
selector: 'abp-modal-container', |
|
||||
template: '<ng-container #container></ng-container>', |
|
||||
}) |
|
||||
export class ModalContainerComponent { |
|
||||
@ViewChild('container', { static: true, read: ViewContainerRef }) |
|
||||
container: ViewContainerRef; |
|
||||
} |
|
||||
@ -1,3 +0,0 @@ |
|||||
<div class="float-right {{ iconClass }}"> |
|
||||
<span class="{{ icon }}"></span> |
|
||||
</div> |
|
||||
@ -1,63 +0,0 @@ |
|||||
import { Component, EventEmitter, Input, Output } from '@angular/core'; |
|
||||
|
|
||||
/** |
|
||||
* @deprecated To be deleted in v5.0. Use ngx-datatale instead. |
|
||||
*/ |
|
||||
@Component({ |
|
||||
selector: 'abp-sort-order-icon', |
|
||||
templateUrl: './sort-order-icon.component.html', |
|
||||
}) |
|
||||
export class SortOrderIconComponent { |
|
||||
private _order: 'asc' | 'desc' | ''; |
|
||||
private _selectedSortKey: string; |
|
||||
|
|
||||
@Input() |
|
||||
sortKey: string; |
|
||||
|
|
||||
@Input() |
|
||||
set selectedSortKey(value: string) { |
|
||||
this._selectedSortKey = value; |
|
||||
this.selectedSortKeyChange.emit(value); |
|
||||
} |
|
||||
get selectedSortKey(): string { |
|
||||
return this._selectedSortKey; |
|
||||
} |
|
||||
|
|
||||
@Input() |
|
||||
set order(value: 'asc' | 'desc' | '') { |
|
||||
this._order = value; |
|
||||
this.orderChange.emit(value); |
|
||||
} |
|
||||
get order(): 'asc' | 'desc' | '' { |
|
||||
return this._order; |
|
||||
} |
|
||||
|
|
||||
@Output() readonly orderChange = new EventEmitter<string>(); |
|
||||
@Output() readonly selectedSortKeyChange = new EventEmitter<string>(); |
|
||||
|
|
||||
@Input() |
|
||||
iconClass: string; |
|
||||
|
|
||||
get icon(): string { |
|
||||
if (this.selectedSortKey === this.sortKey) return `sorting_${this.order}`; |
|
||||
else return 'sorting'; |
|
||||
} |
|
||||
|
|
||||
sort(key: string) { |
|
||||
this.selectedSortKey = key; |
|
||||
switch (this.order) { |
|
||||
case '': |
|
||||
this.order = 'asc'; |
|
||||
this.orderChange.emit('asc'); |
|
||||
break; |
|
||||
case 'asc': |
|
||||
this.order = 'desc'; |
|
||||
this.orderChange.emit('desc'); |
|
||||
break; |
|
||||
case 'desc': |
|
||||
this.order = ''; |
|
||||
this.orderChange.emit(''); |
|
||||
break; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,28 +0,0 @@ |
|||||
import { Component, Input } from '@angular/core'; |
|
||||
|
|
||||
@Component({ |
|
||||
// eslint-disable-next-line @angular-eslint/component-selector
|
|
||||
selector: '[abp-table-empty-message]', |
|
||||
template: ` |
|
||||
<td class="text-center" [attr.colspan]="colspan"> |
|
||||
{{ emptyMessage | abpLocalization }} |
|
||||
</td> |
|
||||
`,
|
|
||||
}) |
|
||||
export class TableEmptyMessageComponent { |
|
||||
@Input() |
|
||||
colspan = 2; |
|
||||
|
|
||||
@Input() |
|
||||
message: string; |
|
||||
|
|
||||
@Input() |
|
||||
localizationResource = 'AbpAccount'; |
|
||||
|
|
||||
@Input() |
|
||||
localizationProp = 'NoDataAvailableInDatatable'; |
|
||||
|
|
||||
get emptyMessage(): string { |
|
||||
return this.message || `${this.localizationResource}::${this.localizationProp}`; |
|
||||
} |
|
||||
} |
|
||||
@ -1,81 +0,0 @@ |
|||||
<div #wrapper class="ui-table ui-widget"> |
|
||||
<div class="ui-table-wrapper"> |
|
||||
<ng-container |
|
||||
*ngTemplateOutlet="scrollable ? scrollableTemplate : defaultTemplate" |
|
||||
></ng-container> |
|
||||
<div class="pagination-wrapper"> |
|
||||
<ngb-pagination |
|
||||
[class.op-0]="!totalPages" |
|
||||
[collectionSize]="totalPages" |
|
||||
[pageSize]="1" |
|
||||
[page]="page" |
|
||||
(pageChange)="pageChange.emit($event)" |
|
||||
[maxSize]="3" |
|
||||
[rotate]="true" |
|
||||
></ngb-pagination> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<ng-template #scrollableTemplate> |
|
||||
<div class="ui-table-scrollable-wrapper"> |
|
||||
<div class="ui-table-scrollable-view"></div> |
|
||||
<div class="ui-table-scrollable-header ui-widget-header"> |
|
||||
<div #header class="ui-table-scrollable-header-box"> |
|
||||
<table class="ui-table-scrollable-header-table"> |
|
||||
<ng-container *ngTemplateOutlet="colGroup"></ng-container> |
|
||||
<ng-container *ngTemplateOutlet="head"></ng-container> |
|
||||
<tbody></tbody> |
|
||||
</table> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div |
|
||||
#scrollableBody |
|
||||
(scroll)="header.style.margin = marginCalculator(scrollableBody)" |
|
||||
class="ui-table-scrollable-body" |
|
||||
[style.max-height]="scrollHeight" |
|
||||
> |
|
||||
<table class="ui-table-scrollable-body-table"> |
|
||||
<ng-container *ngTemplateOutlet="colGroup"></ng-container> |
|
||||
<ng-container *ngTemplateOutlet="body"></ng-container> |
|
||||
</table> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ng-template> |
|
||||
|
|
||||
<ng-template #defaultTemplate> |
|
||||
<table> |
|
||||
<ng-container *ngTemplateOutlet="colGroup"></ng-container> |
|
||||
<ng-container *ngTemplateOutlet="head"></ng-container> |
|
||||
<ng-container *ngTemplateOutlet="body"></ng-container> |
|
||||
</table> |
|
||||
</ng-template> |
|
||||
|
|
||||
<ng-template #colGroup> |
|
||||
<ng-container *ngTemplateOutlet="colgroupTemplate"></ng-container> |
|
||||
</ng-template> |
|
||||
|
|
||||
<ng-template #head> |
|
||||
<thead class="ui-table-thead"> |
|
||||
<ng-container *ngTemplateOutlet="headerTemplate"></ng-container> |
|
||||
</thead> |
|
||||
</ng-template> |
|
||||
|
|
||||
<ng-template #body> |
|
||||
<tbody class="ui-table-tbody" *ngIf="value && value.length; else emptyTemplate"> |
|
||||
<ng-template |
|
||||
#bodyTemplateWrapper |
|
||||
*ngFor="let val of slicedValue; let index = index; trackBy: trackByFn" |
|
||||
[ngTemplateOutlet]="bodyTemplate" |
|
||||
[ngTemplateOutletContext]="{ $implicit: val, rowIndex: index }" |
|
||||
></ng-template> |
|
||||
</tbody> |
|
||||
</ng-template> |
|
||||
|
|
||||
<ng-template #emptyTemplate> |
|
||||
<caption class="ui-table-empty"> |
|
||||
{{ |
|
||||
emptyMessage | abpLocalization |
|
||||
}} |
|
||||
</caption> |
|
||||
</ng-template> |
|
||||
@ -1,337 +0,0 @@ |
|||||
.ui-table { |
|
||||
position: relative; |
|
||||
|
|
||||
.ui-table-tbody > tr:nth-child(even):hover, |
|
||||
.ui-table-tbody > tr:hover { |
|
||||
filter: brightness(90%); |
|
||||
} |
|
||||
|
|
||||
.ui-table-empty { |
|
||||
padding: 20px 0; |
|
||||
text-align: center; |
|
||||
border: 1px solid #e0e0e0; |
|
||||
border-top-width: 0; |
|
||||
} |
|
||||
|
|
||||
.ui-table-caption, |
|
||||
.ui-table-summary { |
|
||||
background-color: #f4f4f4; |
|
||||
color: #333333; |
|
||||
border: 1px solid #c8c8c8; |
|
||||
padding: 0.571em 1em; |
|
||||
text-align: center; |
|
||||
} |
|
||||
.ui-table-caption { |
|
||||
border-bottom: 0 none; |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
.ui-table-summary { |
|
||||
border-top: 0 none; |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
.ui-table-thead > tr > th { |
|
||||
padding: 0.571em 0.857em; |
|
||||
border: 1px solid #c8c8c8; |
|
||||
font-weight: 700; |
|
||||
color: #333333; |
|
||||
background-color: #f4f4f4; |
|
||||
} |
|
||||
.ui-table-tbody > tr > td { |
|
||||
padding: 0.571em 0.857em; |
|
||||
} |
|
||||
.ui-table-tfoot > tr > td { |
|
||||
padding: 0.571em 0.857em; |
|
||||
border: 1px solid #c8c8c8; |
|
||||
font-weight: 700; |
|
||||
color: #333333; |
|
||||
background-color: #ffffff; |
|
||||
} |
|
||||
.ui-sortable-column { |
|
||||
-moz-transition: box-shadow 0.2s; |
|
||||
-o-transition: box-shadow 0.2s; |
|
||||
-webkit-transition: box-shadow 0.2s; |
|
||||
transition: box-shadow 0.2s; |
|
||||
} |
|
||||
.ui-sortable-column:focus { |
|
||||
outline: 0 none; |
|
||||
outline-offset: 0; |
|
||||
-webkit-box-shadow: inset 0 0 0 0.2em #8dcdff; |
|
||||
-moz-box-shadow: inset 0 0 0 0.2em #8dcdff; |
|
||||
box-shadow: inset 0 0 0 0.2em #8dcdff; |
|
||||
} |
|
||||
.ui-sortable-column .ui-sortable-column-icon { |
|
||||
color: #848484; |
|
||||
} |
|
||||
.ui-sortable-column:not(.ui-state-highlight):hover { |
|
||||
background-color: #e0e0e0; |
|
||||
color: #333333; |
|
||||
} |
|
||||
.ui-sortable-column:not(.ui-state-highlight):hover .ui-sortable-column-icon { |
|
||||
color: #333333; |
|
||||
} |
|
||||
.ui-sortable-column.ui-state-highlight { |
|
||||
background-color: #007ad9; |
|
||||
color: #ffffff; |
|
||||
} |
|
||||
.ui-sortable-column.ui-state-highlight .ui-sortable-column-icon { |
|
||||
color: #ffffff; |
|
||||
} |
|
||||
.ui-editable-column input { |
|
||||
font-size: 14px; |
|
||||
font-family: 'Open Sans', 'Helvetica Neue', sans-serif; |
|
||||
} |
|
||||
.ui-editable-column input:focus { |
|
||||
outline: 1px solid #007ad9; |
|
||||
outline-offset: 2px; |
|
||||
} |
|
||||
.ui-table-tbody > tr { |
|
||||
background-color: #ffffff; |
|
||||
color: #333333; |
|
||||
} |
|
||||
.ui-table-tbody > tr > td { |
|
||||
background-color: inherit; |
|
||||
border: 1px solid #c8c8c8; |
|
||||
} |
|
||||
.ui-table-tbody > tr.ui-state-highlight { |
|
||||
background-color: #007ad9; |
|
||||
color: #ffffff; |
|
||||
} |
|
||||
.ui-table-tbody > tr.ui-state-highlight a { |
|
||||
color: #ffffff; |
|
||||
} |
|
||||
.ui-table-tbody > tr.ui-contextmenu-selected { |
|
||||
background-color: #007ad9; |
|
||||
color: #ffffff; |
|
||||
} |
|
||||
.ui-table-tbody > tr.ui-table-dragpoint-top > td { |
|
||||
-webkit-box-shadow: inset 0 2px 0 0 #007ad9; |
|
||||
-moz-box-shadow: inset 0 2px 0 0 #007ad9; |
|
||||
box-shadow: inset 0 2px 0 0 #007ad9; |
|
||||
} |
|
||||
.ui-table-tbody > tr.ui-table-dragpoint-bottom > td { |
|
||||
-webkit-box-shadow: inset 0 -2px 0 0 #007ad9; |
|
||||
-moz-box-shadow: inset 0 -2px 0 0 #007ad9; |
|
||||
box-shadow: inset 0 -2px 0 0 #007ad9; |
|
||||
} |
|
||||
.ui-table-tbody > tr:nth-child(even) { |
|
||||
background-color: #f9f9f9; |
|
||||
} |
|
||||
.ui-table-tbody > tr:nth-child(even).ui-state-highlight { |
|
||||
background-color: #007ad9; |
|
||||
color: #ffffff; |
|
||||
} |
|
||||
.ui-table-tbody > tr:nth-child(even).ui-state-highlight a { |
|
||||
color: #ffffff; |
|
||||
} |
|
||||
.ui-table-tbody > tr:nth-child(even).ui-contextmenu-selected { |
|
||||
background-color: #007ad9; |
|
||||
color: #ffffff; |
|
||||
} |
|
||||
|
|
||||
&.ui-table-hoverable-rows |
|
||||
.ui-table-tbody |
|
||||
> tr.ui-selectable-row:not(.ui-state-highlight):not(.ui-contextmenu-selected):hover { |
|
||||
cursor: pointer; |
|
||||
background-color: #eaeaea; |
|
||||
color: #333333; |
|
||||
} |
|
||||
.ui-column-resizer-helper { |
|
||||
background-color: #007ad9; |
|
||||
} |
|
||||
@media screen and (max-width: 40em) { |
|
||||
&.ui-table-responsive .ui-table-tbody > tr > td { |
|
||||
border: 0 none; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
table { |
|
||||
border-collapse: collapse; |
|
||||
width: 100%; |
|
||||
table-layout: fixed; |
|
||||
} |
|
||||
|
|
||||
.ui-table-tbody > tr > td, |
|
||||
.ui-table-tfoot > tr > td, |
|
||||
.ui-table-thead > tr > th { |
|
||||
padding: 0.571em 0.857em; |
|
||||
} |
|
||||
|
|
||||
.ui-sortable-column { |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
p-sorticon { |
|
||||
vertical-align: middle; |
|
||||
} |
|
||||
|
|
||||
.ui-table-auto-layout > .ui-table-wrapper { |
|
||||
overflow-x: auto; |
|
||||
} |
|
||||
|
|
||||
.ui-table-auto-layout > .ui-table-wrapper > table { |
|
||||
table-layout: auto; |
|
||||
} |
|
||||
|
|
||||
.ui-table-caption, |
|
||||
.ui-table-summary { |
|
||||
padding: 0.25em 0.5em; |
|
||||
text-align: center; |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
|
|
||||
.ui-table-caption { |
|
||||
border-bottom: 0; |
|
||||
} |
|
||||
|
|
||||
.ui-table-summary { |
|
||||
border-top: 0; |
|
||||
} |
|
||||
|
|
||||
.ui-table-scrollable-wrapper { |
|
||||
position: relative; |
|
||||
} |
|
||||
|
|
||||
.ui-table-scrollable-footer, |
|
||||
.ui-table-scrollable-header { |
|
||||
overflow: hidden; |
|
||||
border: 0; |
|
||||
} |
|
||||
|
|
||||
.ui-table-scrollable-body { |
|
||||
overflow: auto; |
|
||||
position: relative; |
|
||||
} |
|
||||
|
|
||||
.ui-table-virtual-table { |
|
||||
position: absolute; |
|
||||
} |
|
||||
|
|
||||
.ui-table-loading-virtual-table { |
|
||||
display: none; |
|
||||
} |
|
||||
|
|
||||
.ui-table-frozen-view .ui-table-scrollable-body { |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
.ui-table-frozen-view > .ui-table-scrollable-body > table > .ui-table-tbody > tr > td:last-child { |
|
||||
border-right: 0; |
|
||||
} |
|
||||
|
|
||||
.ui-table-unfrozen-view { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
} |
|
||||
|
|
||||
.ui-table-resizable > .ui-table-wrapper { |
|
||||
overflow-x: auto; |
|
||||
} |
|
||||
|
|
||||
.ui-table-resizable .ui-table-tbody > tr > td, |
|
||||
.ui-table-resizable .ui-table-tfoot > tr > td, |
|
||||
.ui-table-resizable .ui-table-thead > tr > th { |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
.ui-table-resizable .ui-resizable-column { |
|
||||
background-clip: padding-box; |
|
||||
position: relative; |
|
||||
} |
|
||||
|
|
||||
.ui-table-resizable-fit .ui-resizable-column:last-child .ui-column-resizer { |
|
||||
display: none; |
|
||||
} |
|
||||
|
|
||||
.ui-column-resizer { |
|
||||
display: block; |
|
||||
position: absolute !important; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
margin: 0; |
|
||||
width: 0.5em; |
|
||||
height: 100%; |
|
||||
padding: 0; |
|
||||
cursor: col-resize; |
|
||||
border: 1px solid rgba(0, 0, 0, 0); |
|
||||
} |
|
||||
|
|
||||
.ui-column-resizer-helper { |
|
||||
width: 1px; |
|
||||
position: absolute; |
|
||||
z-index: 10; |
|
||||
display: none; |
|
||||
} |
|
||||
|
|
||||
.ui-table-tbody > tr > td.ui-editing-cell { |
|
||||
padding: 0; |
|
||||
} |
|
||||
|
|
||||
.ui-table-tbody > tr > td.ui-editing-cell p-celleditor > * { |
|
||||
width: 100%; |
|
||||
} |
|
||||
|
|
||||
.ui-table-reorder-indicator-down, |
|
||||
.ui-table-reorder-indicator-up { |
|
||||
position: absolute; |
|
||||
display: none; |
|
||||
} |
|
||||
|
|
||||
.ui-table-responsive .ui-table-tbody > tr > td .ui-column-title { |
|
||||
display: none; |
|
||||
} |
|
||||
|
|
||||
@media screen and (max-width: 40em) { |
|
||||
.ui-table-responsive .ui-table-tfoot > tr > td, |
|
||||
.ui-table-responsive .ui-table-thead > tr > th, |
|
||||
.ui-table-responsive colgroup { |
|
||||
display: none !important; |
|
||||
} |
|
||||
.ui-table-responsive .ui-table-tbody > tr > td { |
|
||||
text-align: left; |
|
||||
display: block; |
|
||||
border: 0; |
|
||||
width: 100% !important; |
|
||||
box-sizing: border-box; |
|
||||
float: left; |
|
||||
clear: left; |
|
||||
} |
|
||||
.ui-table-responsive .ui-table-tbody > tr > td .ui-column-title { |
|
||||
padding: 0.4em; |
|
||||
min-width: 30%; |
|
||||
display: inline-block; |
|
||||
margin: -0.4em 1em -0.4em -0.4em; |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.ui-widget { |
|
||||
font-family: 'Open Sans', 'Helvetica Neue', sans-serif; |
|
||||
font-size: 14px; |
|
||||
text-decoration: none; |
|
||||
} |
|
||||
|
|
||||
.page-item.disabled .page-link, |
|
||||
.page-link { |
|
||||
background-color: transparent; |
|
||||
border: none; |
|
||||
} |
|
||||
|
|
||||
.page-item.disabled .page-link { |
|
||||
box-shadow: none; |
|
||||
} |
|
||||
|
|
||||
.pagination { |
|
||||
margin-bottom: 0; |
|
||||
} |
|
||||
|
|
||||
.pagination-wrapper { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
border-top: 0; |
|
||||
padding: 0; |
|
||||
} |
|
||||
|
|
||||
.op-0 { |
|
||||
opacity: 0; |
|
||||
} |
|
||||
} |
|
||||
@ -1,110 +0,0 @@ |
|||||
import { |
|
||||
Component, |
|
||||
ElementRef, |
|
||||
EventEmitter, |
|
||||
Input, |
|
||||
OnInit, |
|
||||
Output, |
|
||||
TemplateRef, |
|
||||
TrackByFunction, |
|
||||
ViewChild, |
|
||||
ViewEncapsulation, |
|
||||
} from '@angular/core'; |
|
||||
|
|
||||
/** |
|
||||
* |
|
||||
* @deprecated To be deleted in v5.0. Use ngx-datatale instead. |
|
||||
*/ |
|
||||
@Component({ |
|
||||
selector: 'abp-table', |
|
||||
templateUrl: 'table.component.html', |
|
||||
styleUrls: ['table.component.scss'], |
|
||||
encapsulation: ViewEncapsulation.None, |
|
||||
}) |
|
||||
export class TableComponent implements OnInit { |
|
||||
private _totalRecords: number; |
|
||||
bodyScrollLeft = 0; |
|
||||
|
|
||||
@Input() |
|
||||
value: any[]; |
|
||||
|
|
||||
@Input() |
|
||||
headerTemplate: TemplateRef<any>; |
|
||||
|
|
||||
@Input() |
|
||||
bodyTemplate: TemplateRef<any>; |
|
||||
|
|
||||
@Input() |
|
||||
colgroupTemplate: TemplateRef<any>; |
|
||||
|
|
||||
@Input() |
|
||||
scrollHeight: string; |
|
||||
|
|
||||
@Input() |
|
||||
scrollable: boolean; |
|
||||
|
|
||||
@Input() |
|
||||
rows: number; |
|
||||
|
|
||||
@Input() |
|
||||
page = 1; |
|
||||
|
|
||||
@Input() |
|
||||
trackingProp = 'id'; |
|
||||
|
|
||||
@Input() |
|
||||
emptyMessage = 'AbpAccount::NoDataAvailableInDatatable'; |
|
||||
|
|
||||
@Output() |
|
||||
readonly pageChange = new EventEmitter<number>(); |
|
||||
|
|
||||
@ViewChild('wrapper', { read: ElementRef }) |
|
||||
wrapperRef: ElementRef<HTMLDivElement>; |
|
||||
|
|
||||
@Input() |
|
||||
get totalRecords(): number { |
|
||||
return this._totalRecords || this.value.length; |
|
||||
} |
|
||||
set totalRecords(newValue: number) { |
|
||||
if (newValue < 0) this._totalRecords = 0; |
|
||||
|
|
||||
this._totalRecords = newValue; |
|
||||
} |
|
||||
|
|
||||
get totalPages(): number { |
|
||||
if (!this.rows) { |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
return Math.ceil(this.totalRecords / this.rows); |
|
||||
} |
|
||||
|
|
||||
get slicedValue(): any[] { |
|
||||
if (!this.rows || this.rows >= this.value.length) { |
|
||||
return this.value; |
|
||||
} |
|
||||
|
|
||||
const start = (this.page - 1) * this.rows; |
|
||||
return this.value.slice(start, start + this.rows); |
|
||||
} |
|
||||
|
|
||||
marginCalculator: MarginCalculator; |
|
||||
|
|
||||
trackByFn: TrackByFunction<any> = (_, value) => { |
|
||||
return typeof value === 'object' ? value[this.trackingProp] || value : value; |
|
||||
}; |
|
||||
|
|
||||
ngOnInit() { |
|
||||
this.marginCalculator = document.body.dir === 'rtl' ? rtlCalculator : ltrCalculator; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function ltrCalculator(div: HTMLDivElement): string { |
|
||||
return `0 auto 0 -${div.scrollLeft}px`; |
|
||||
} |
|
||||
|
|
||||
function rtlCalculator(div: HTMLDivElement): string { |
|
||||
return `0 ${-(div.scrollWidth - div.clientWidth - div.scrollLeft)}px 0 auto`; |
|
||||
} |
|
||||
|
|
||||
type MarginCalculator = (div: HTMLDivElement) => string; |
|
||||
@ -1,57 +0,0 @@ |
|||||
import { SortOrder, SortPipe } from '@abp/ng.core'; |
|
||||
import { |
|
||||
ChangeDetectorRef, |
|
||||
Directive, |
|
||||
Host, |
|
||||
Input, |
|
||||
OnChanges, |
|
||||
Optional, |
|
||||
Self, |
|
||||
SimpleChanges, |
|
||||
} from '@angular/core'; |
|
||||
import clone from 'just-clone'; |
|
||||
import { TableComponent } from '../components/table/table.component'; |
|
||||
|
|
||||
export interface TableSortOptions { |
|
||||
key: string; |
|
||||
order: SortOrder; |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* |
|
||||
* @deprecated To be deleted in v5.0 |
|
||||
*/ |
|
||||
@Directive({ |
|
||||
selector: '[abpTableSort]', |
|
||||
providers: [SortPipe], |
|
||||
}) |
|
||||
export class TableSortDirective implements OnChanges { |
|
||||
@Input() |
|
||||
abpTableSort: TableSortOptions; |
|
||||
|
|
||||
@Input() |
|
||||
value: any[] = []; |
|
||||
|
|
||||
get table(): TableComponent | any { |
|
||||
return ( |
|
||||
this.abpTable || this.cdRef['_view'].component || this.cdRef['context'] // 'context' for ivy
|
|
||||
); |
|
||||
} |
|
||||
|
|
||||
constructor( |
|
||||
@Host() @Optional() @Self() private abpTable: TableComponent, |
|
||||
private sortPipe: SortPipe, |
|
||||
private cdRef: ChangeDetectorRef, |
|
||||
) {} |
|
||||
|
|
||||
ngOnChanges({ value, abpTableSort }: SimpleChanges) { |
|
||||
if (this.table && (value || abpTableSort)) { |
|
||||
this.abpTableSort = this.abpTableSort || ({} as TableSortOptions); |
|
||||
this.table.value = this.sortPipe.transform( |
|
||||
clone(this.value), |
|
||||
this.abpTableSort.order, |
|
||||
this.abpTableSort.key, |
|
||||
); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,5 +1,4 @@ |
|||||
export * from './confirmation.service'; |
export * from './confirmation.service'; |
||||
export * from './modal.service'; |
|
||||
export * from './toaster.service'; |
|
||||
export * from './nav-items.service'; |
export * from './nav-items.service'; |
||||
export * from './page-alert.service'; |
export * from './page-alert.service'; |
||||
|
export * from './toaster.service'; |
||||
|
|||||
@ -1,54 +0,0 @@ |
|||||
import { ContentProjectionService, PROJECTION_STRATEGY } from '@abp/ng.core'; |
|
||||
import { ComponentRef, Injectable, TemplateRef, ViewContainerRef, OnDestroy } from '@angular/core'; |
|
||||
import { ModalContainerComponent } from '../components/modal/modal-container.component'; |
|
||||
|
|
||||
/** |
|
||||
* @deprecated Use ng-bootstrap modal. To be deleted in v5.0. |
|
||||
*/ |
|
||||
@Injectable({ |
|
||||
providedIn: 'root', |
|
||||
}) |
|
||||
export class ModalService implements OnDestroy { |
|
||||
private containerComponentRef: ComponentRef<ModalContainerComponent>; |
|
||||
|
|
||||
constructor(private contentProjectionService: ContentProjectionService) { |
|
||||
this.setContainer(); |
|
||||
} |
|
||||
|
|
||||
private setContainer() { |
|
||||
this.containerComponentRef = this.contentProjectionService.projectContent( |
|
||||
PROJECTION_STRATEGY.AppendComponentToBody(ModalContainerComponent), |
|
||||
); |
|
||||
|
|
||||
this.containerComponentRef.changeDetectorRef.detectChanges(); |
|
||||
} |
|
||||
|
|
||||
clearModal() { |
|
||||
this.getContainer().clear(); |
|
||||
this.detectChanges(); |
|
||||
} |
|
||||
|
|
||||
detectChanges() { |
|
||||
this.containerComponentRef.changeDetectorRef.detectChanges(); |
|
||||
} |
|
||||
|
|
||||
getContainer(): ViewContainerRef { |
|
||||
return this.containerComponentRef.instance.container; |
|
||||
} |
|
||||
|
|
||||
renderTemplate<T extends any>(template: TemplateRef<T>, context?: T) { |
|
||||
const containerRef = this.getContainer(); |
|
||||
|
|
||||
const strategy = PROJECTION_STRATEGY.ProjectTemplateToContainer( |
|
||||
template, |
|
||||
containerRef, |
|
||||
context, |
|
||||
); |
|
||||
|
|
||||
this.contentProjectionService.projectContent(strategy); |
|
||||
} |
|
||||
|
|
||||
ngOnDestroy() { |
|
||||
this.containerComponentRef.destroy(); |
|
||||
} |
|
||||
} |
|
||||
Loading…
Reference in new issue