mirror of https://github.com/abpframework/abp
Mehmet Erim
4 years ago
parent
aac65e9ff9
commit
7057da5a67
@ -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