mirror of https://github.com/abpframework/abp.git
Mehmet Erim
5 years ago
27 changed files with 15 additions and 1109 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,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 './modal.service'; |
|||
export * from './toaster.service'; |
|||
export * from './nav-items.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