mirror of https://github.com/abpframework/abp
Merge pull request #10102 from abpframework/remove-deprecated-code
Angular UI: Removed all deprecated codepull/10111/head
Muhammed Altuğ
4 years ago
committed by
GitHub
commit
75cafb2525
@ -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