Fixes Layouts on Admin Pages
This commit is contained in:
parent
fb1dd376fc
commit
c5d2ebe8f8
|
@ -1,76 +1,77 @@
|
|||
<div class="container" *ngIf="form" [formGroup]='form' class="dataset-profile-editor">
|
||||
<mat-form-field class="full-width">
|
||||
<input matInput formControlName="label" [disabled]="newVersionId"
|
||||
placeholder="{{'DATASET-PROFILE-EDITOR.FIELDS.DATASET-TITLE' | translate}}" required>
|
||||
<mat-error *ngIf="form.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<div class="row" *ngIf="form.get('status').value==1">
|
||||
<div class="col"></div>
|
||||
<button mat-raised-button class="col-auto" color="primary" (click)="downloadXML();"
|
||||
type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button>
|
||||
</div>
|
||||
<mat-horizontal-stepper [linear]="true" #stepper>
|
||||
<mat-step>
|
||||
<ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.PAGES.TITLE' | translate}}</ng-template>
|
||||
<div class="row">
|
||||
<app-dataset-profile-editor-page-component class="col-12" [form]="form.get('pages')"
|
||||
[viewOnly]="viewOnly"></app-dataset-profile-editor-page-component>
|
||||
<div class="col-12">
|
||||
<button mat-button class="full-width" (click)="addPage()"
|
||||
[disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.ACTIONS.ADD-PAGE' | translate}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</mat-step>
|
||||
<mat-step>
|
||||
<ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate}}</ng-template>
|
||||
<div class="row">
|
||||
<mat-accordion class="col-12" [multi]="true">
|
||||
<mat-expansion-panel *ngFor="let section of dataModel.sections; let i=index;" #panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}
|
||||
</mat-panel-title>
|
||||
<button mat-icon-button type="button" (click)="DeleteSection(i);" [disabled]="viewOnly">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</mat-expansion-panel-header>
|
||||
<div id="{{'s' + i}}" class="row" *ngIf="panel.expanded">
|
||||
<app-dataset-profile-editor-section-component class="col-12"
|
||||
[form]="form.get('sections').get(''+i)" [dataModel]="section" [indexPath]="'s' + i"
|
||||
[viewOnly]="viewOnly"></app-dataset-profile-editor-section-component>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
<div class="col-12">
|
||||
<button mat-button (click)="addSection()" class="full-width"
|
||||
[disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</mat-step>
|
||||
<!-- <mat-step>
|
||||
<ng-template matStepLabel>{{'DATASET-PROFILE.PREVIEW' | translate}}</ng-template>
|
||||
<div *ngIf='this.isStepActive(2)'>
|
||||
<app-dynamic-form *ngIf="dataWizardModel && previewerFormGroup" [form]="this.previewerFormGroup" [dataModel]="dataWizardModel"></app-dynamic-form>
|
||||
</div>
|
||||
</mat-step> -->
|
||||
</mat-horizontal-stepper>
|
||||
<div class="row">
|
||||
<!-- SAVE BUTTON -->
|
||||
<div class="col-auto" *ngIf="!viewOnly">
|
||||
<div class="row">
|
||||
<button mat-raised-button color="primary" type="button col-auto" (click)='onSubmit()'
|
||||
[disabled]="!form.valid">Save</button>
|
||||
<div class="col-1"></div>
|
||||
<button mat-raised-button color="primary" type="button col-auto" (click)='finalize()'
|
||||
[disabled]="!form.valid">Finalize</button>
|
||||
</div>
|
||||
<div class="main-content">
|
||||
<div class="container-fluid dataset-profile-editor" *ngIf="form" [formGroup]='form'>
|
||||
<mat-form-field class="full-width">
|
||||
<input matInput formControlName="label" [disabled]="newVersionId"
|
||||
placeholder="{{'DATASET-PROFILE-EDITOR.FIELDS.DATASET-TITLE' | translate}}" required>
|
||||
<mat-error *ngIf="form.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<div class="row" *ngIf="form.get('status').value==1">
|
||||
<div class="col"></div>
|
||||
<button mat-raised-button class="col-auto" color="primary" (click)="downloadXML();"
|
||||
type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
<!-- DELETE BUTTON -->
|
||||
<div class="col-auto" *ngIf="!isNew">
|
||||
<button mat-raised-button color="primary" (click)="delete()">
|
||||
<mat-icon>delete</mat-icon>{{'DATASET-PROFILE-EDITOR.ACTIONS.DELETE' | translate}}
|
||||
</button>
|
||||
<mat-horizontal-stepper [linear]="true" #stepper>
|
||||
<mat-step>
|
||||
<ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.PAGES.TITLE' | translate}}</ng-template>
|
||||
<div class="row">
|
||||
<app-dataset-profile-editor-page-component class="col-12" [form]="form.get('pages')"
|
||||
[viewOnly]="viewOnly"></app-dataset-profile-editor-page-component>
|
||||
<div class="col-12">
|
||||
<button mat-button class="full-width" (click)="addPage()"
|
||||
[disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.ACTIONS.ADD-PAGE' | translate}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</mat-step>
|
||||
<mat-step>
|
||||
<ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate}}</ng-template>
|
||||
<div class="row">
|
||||
<mat-accordion class="col-12" [multi]="true">
|
||||
<mat-expansion-panel *ngFor="let section of dataModel.sections; let i=index;" #panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}
|
||||
</mat-panel-title>
|
||||
<button mat-icon-button type="button" (click)="DeleteSection(i);" [disabled]="viewOnly">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</mat-expansion-panel-header>
|
||||
<div id="{{'s' + i}}" class="row" *ngIf="panel.expanded">
|
||||
<app-dataset-profile-editor-section-component class="col-12"
|
||||
[form]="form.get('sections').get(''+i)" [dataModel]="section" [indexPath]="'s' + i"
|
||||
[viewOnly]="viewOnly">
|
||||
</app-dataset-profile-editor-section-component>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
<div class="col-12">
|
||||
<button mat-button (click)="addSection()" class="full-width"
|
||||
[disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</mat-step>
|
||||
<!-- <mat-step>
|
||||
<ng-template matStepLabel>{{'DATASET-PROFILE.PREVIEW' | translate}}</ng-template>
|
||||
<div *ngIf='this.isStepActive(2)'>
|
||||
<app-dynamic-form *ngIf="dataWizardModel && previewerFormGroup" [form]="this.previewerFormGroup" [dataModel]="dataWizardModel"></app-dynamic-form>
|
||||
</div>
|
||||
</mat-step> -->
|
||||
</mat-horizontal-stepper>
|
||||
<div>
|
||||
<!-- SAVE BUTTON -->
|
||||
<div class="col-6" *ngIf="!viewOnly">
|
||||
<div class="row mt-4">
|
||||
<button mat-raised-button class="col-auto mr-2" color="primary" type="button col-auto" (click)='onSubmit()'
|
||||
[disabled]="!form.valid">Save</button>
|
||||
<button mat-raised-button class="col-auto" color="primary" type="button col-auto" (click)='finalize()'
|
||||
[disabled]="!form.valid">Finalize</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- DELETE BUTTON -->
|
||||
<div class="col-6" *ngIf="!isNew">
|
||||
<button mat-raised-button color="primary" (click)="delete()">
|
||||
<mat-icon>delete</mat-icon>{{'DATASET-PROFILE-EDITOR.ACTIONS.DELETE' | translate}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,61 +1,69 @@
|
|||
<div class="container-fluid">
|
||||
<h3>{{titlePrefix}} {{'DATASET-PROFILE-LISTING.TITLE' | translate}}</h3>
|
||||
<div class="main-content">
|
||||
<div class="container-fluid">
|
||||
<h3>{{titlePrefix}} {{'DATASET-PROFILE-LISTING.TITLE' | translate}}</h3>
|
||||
|
||||
<app-dataset-profile-criteria-component></app-dataset-profile-criteria-component>
|
||||
<mat-card class="mat-card">
|
||||
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
|
||||
<app-dataset-profile-criteria-component></app-dataset-profile-criteria-component>
|
||||
<mat-card class="row mat-card">
|
||||
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
|
||||
|
||||
<!-- Column Definition: Name -->
|
||||
<ng-container cdkColumnDef="label">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'DATASET-PROFILE-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Column Definition: Name -->
|
||||
<ng-container cdkColumnDef="label">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header="label">
|
||||
{{'DATASET-PROFILE-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Column Definition: Description -->
|
||||
<ng-container cdkColumnDef="description">
|
||||
<mat-header-cell *matHeaderCellDef>{{'DATASET-PROFILE-LISTING.COLUMNS.DESCRIPTION' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
|
||||
</ng-container>
|
||||
<!-- Column Definition: Description -->
|
||||
<ng-container cdkColumnDef="description">
|
||||
<mat-header-cell *matHeaderCellDef>{{'DATASET-PROFILE-LISTING.COLUMNS.DESCRIPTION' | translate}}
|
||||
</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Column Definition: Created -->
|
||||
<ng-container cdkColumnDef="created">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DATASET-PROFILE-LISTING.COLUMNS.CREATED' |
|
||||
translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Column Definition: Created -->
|
||||
<ng-container cdkColumnDef="created">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DATASET-PROFILE-LISTING.COLUMNS.CREATED' |
|
||||
translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Column Definition: Submission Time -->
|
||||
<ng-container cdkColumnDef="actions">
|
||||
<mat-header-cell *matHeaderCellDef>{{'DATASET-PROFILE-LISTING.COLUMNS.ACTIONS' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
|
||||
<mat-menu #actionsMenu="matMenu">
|
||||
<button mat-menu-item (click)="newVersion(row.id, row.label)">
|
||||
<mat-icon>queue</mat-icon>{{'DATASET-PROFILE-LISTING.ACTIONS.NEW-VERSION' | translate}}
|
||||
<!-- Column Definition: Submission Time -->
|
||||
<ng-container cdkColumnDef="actions">
|
||||
<mat-header-cell *matHeaderCellDef>{{'DATASET-PROFILE-LISTING.COLUMNS.ACTIONS' | translate}}
|
||||
</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
|
||||
<mat-menu #actionsMenu="matMenu">
|
||||
<button mat-menu-item (click)="newVersion(row.id, row.label)">
|
||||
<mat-icon>queue</mat-icon>{{'DATASET-PROFILE-LISTING.ACTIONS.NEW-VERSION' | translate}}
|
||||
</button>
|
||||
<button mat-menu-item (click)="clone(row.id)">
|
||||
<mat-icon>filter_none</mat-icon>{{'DATASET-PROFILE-LISTING.ACTIONS.CLONE' | translate}}
|
||||
</button>
|
||||
<button mat-menu-item (click)="viewVersions(row.groupId, row.label)">
|
||||
<mat-icon>library_books</mat-icon>
|
||||
{{'DATASET-PROFILE-LISTING.ACTIONS.VIEW-VERSIONS' | translate}}
|
||||
</button>
|
||||
<!--<button *ngIf="row.status==1" mat-menu-item (click)="makeItPublic(row.id)"><mat-icon>people_outline</mat-icon>{{'DATASET-LISTING.ACTIONS.MAKE-IT-PUBLIC' | translate}}</button> -->
|
||||
</mat-menu>
|
||||
<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<button mat-menu-item (click)="clone(row.id)">
|
||||
<mat-icon>filter_none</mat-icon>{{'DATASET-PROFILE-LISTING.ACTIONS.CLONE' | translate}}
|
||||
</button>
|
||||
<button mat-menu-item (click)="viewVersions(row.groupId, row.label)">
|
||||
<mat-icon>library_books</mat-icon>{{'DATASET-PROFILE-LISTING.ACTIONS.VIEW-VERSIONS' | translate}}
|
||||
</button>
|
||||
<!--<button *ngIf="row.status==1" mat-menu-item (click)="makeItPublic(row.id)"><mat-icon>people_outline</mat-icon>{{'DATASET-LISTING.ACTIONS.MAKE-IT-PUBLIC' | translate}}</button> -->
|
||||
</mat-menu>
|
||||
<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id);"></mat-row>
|
||||
<!-- (click)="rowClick(row.id)" -->
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id);"></mat-row>
|
||||
<!-- (click)="rowClick(row.id)" -->
|
||||
|
||||
</mat-table>
|
||||
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
|
||||
</mat-paginator>
|
||||
</mat-card>
|
||||
</mat-table>
|
||||
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
|
||||
</mat-paginator>
|
||||
</mat-card>
|
||||
|
||||
<button mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['./new']">
|
||||
<mat-icon class="mat-24">add</mat-icon>
|
||||
</button>
|
||||
<div class="row justify-content-end pr-2">
|
||||
<button mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['./new']">
|
||||
<mat-icon class="mat-24">add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,38 +1,68 @@
|
|||
.mat-table {
|
||||
margin: 24px;
|
||||
margin: 24px;
|
||||
}
|
||||
|
||||
.mat-fab-bottom-right {
|
||||
// top: auto !important;
|
||||
// right: 20px !important;
|
||||
// bottom: 10px !important;
|
||||
// left: auto !important;
|
||||
// position: fixed !important;
|
||||
float: right;
|
||||
z-index: 5;
|
||||
// top: auto !important;
|
||||
// right: 20px !important;
|
||||
// bottom: 10px !important;
|
||||
// left: auto !important;
|
||||
// position: fixed !important;
|
||||
float: right;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-card {
|
||||
margin: 16px 0;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.mat-row {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
mat-row:hover {
|
||||
background-color: lightgray;
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
// mat-row:nth-child(even){
|
||||
// background-color:red;
|
||||
// }
|
||||
|
||||
mat-row:nth-child(odd){
|
||||
background-color:#eef0fb;
|
||||
}
|
||||
mat-row:nth-child(odd) {
|
||||
background-color: #eef0fb;
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-container {
|
||||
flex-direction: row-reverse !important;
|
||||
justify-content: space-between !important;
|
||||
background-color: #f6f6f6;
|
||||
height: 30px;
|
||||
min-height: 30px !important;
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-page-size {
|
||||
height: 43px;
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-range-label {
|
||||
margin: 15px 32px 0 24px !important;
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-range-actions {
|
||||
width: 55% !important;
|
||||
min-height: 43px !important;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-navigation-previous {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
::ng-deep .mat-icon-button {
|
||||
height: 30px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
|
|
@ -1,95 +1,134 @@
|
|||
<div class="dmp-profile-editor">
|
||||
<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title *ngIf="isNew">
|
||||
<h4>{{'DMP-PROFILE-EDITOR.TITLE.NEW' | translate}}</h4>
|
||||
</mat-card-title>
|
||||
<mat-card-title *ngIf="!isNew">
|
||||
<h4>{{formGroup.get('label').value}}</h4>
|
||||
</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="row">
|
||||
<mat-form-field class="col-12">
|
||||
<input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}" type="text"
|
||||
name="label" formControlName="label" required>
|
||||
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">
|
||||
{{formGroup.get('label').getError('backendError').message}}</mat-error>
|
||||
<mat-error *ngIf="formGroup.get('label').hasError('required')">
|
||||
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
<div class="main-content">
|
||||
<div class="container-fluid dmp-profile-editor">
|
||||
<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
|
||||
<h3 *ngIf="isNew">{{'DMP-PROFILE-EDITOR.TITLE.NEW' | translate}}</h3>
|
||||
<h3 *ngIf="!isNew">{{formGroup.get('label').value}}</h3>
|
||||
<mat-card>
|
||||
<!-- <mat-card-header>
|
||||
<mat-card-title *ngIf="isNew">
|
||||
<h4>{{'DMP-PROFILE-EDITOR.TITLE.NEW' | translate}}</h4>
|
||||
</mat-card-title>
|
||||
<mat-card-title *ngIf="!isNew">
|
||||
<h4>{{formGroup.get('label').value}}</h4>
|
||||
</mat-card-title>
|
||||
</mat-card-header> -->
|
||||
<mat-card-content>
|
||||
<div class="row pl-5">
|
||||
<mat-form-field class="col-10">
|
||||
<input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}" type="text"
|
||||
name="label" formControlName="label" required>
|
||||
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">
|
||||
{{formGroup.get('label').getError('backendError').message}}</mat-error>
|
||||
<mat-error *ngIf="formGroup.get('label').hasError('required')">
|
||||
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
<h4 class="col-12">{{'DMP-PROFILE-EDITOR.FIELDS.TITLE' | translate}}</h4>
|
||||
|
||||
<h4 class="col-12">{{'DMP-PROFILE-EDITOR.FIELDS.TITLE' | translate}}</h4>
|
||||
<div class="col-12">
|
||||
<div class="row"
|
||||
*ngFor="let fieldFormGroup of formGroup.get('definition').get('fields')['controls'];let i=index">
|
||||
<mat-form-field class="col">
|
||||
<input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}"
|
||||
type="text" name="label" [formControl]="fieldFormGroup.get('label')" required>
|
||||
<mat-error *ngIf="fieldFormGroup.get('label').hasError('required')">
|
||||
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
<mat-error *ngIf="fieldFormGroup.get('label').hasError('backendError')">
|
||||
{{fieldFormGroup.get('label').getError('backendError').message}}</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="col">
|
||||
<mat-select placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.TYPE' | translate}}"
|
||||
[formControl]="fieldFormGroup.get('type')" required>
|
||||
<mat-option *ngFor="let fieldType of getDMPProfileFieldTypeValues()"
|
||||
[value]="fieldType">{{
|
||||
getDMPProfileFieldTypeWithLanguage(fieldType) | translate}}</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="fieldFormGroup.get('type').hasError('required')">
|
||||
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
<mat-error *ngIf="fieldFormGroup.get('type').hasError('backendError')">
|
||||
{{fieldFormGroup.get('type').getError('backendError').message}}</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="col">
|
||||
<mat-select placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.DATATYPE' | translate}}"
|
||||
[formControl]="fieldFormGroup.get('dataType')" required>
|
||||
<mat-option *ngFor="let fieldDataType of getDMPProfileFieldDataTypeValues()"
|
||||
[value]="fieldDataType">{{
|
||||
getDMPProfileFieldDataTypeWithLanguage(fieldDataType) | translate}}</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="fieldFormGroup.get('dataType').hasError('required')">
|
||||
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
<mat-error *ngIf="fieldFormGroup.get('dataType').hasError('backendError')">
|
||||
{{fieldFormGroup.get('dataType').getError('backendError').message}}</mat-error>
|
||||
</mat-form-field>
|
||||
<div class="centered-row-item col-auto">
|
||||
<mat-checkbox [formControl]="fieldFormGroup.get('required')">
|
||||
{{'DMP-PROFILE-EDITOR.FIELDS.REQUIRED' | translate}}</mat-checkbox>
|
||||
</div>
|
||||
<div class="centered-row-item col-auto"><button mat-icon-button type="button"
|
||||
(click)="removeField(i)" [disabled]="viewOnly">
|
||||
<mat-icon class="mat-24">delete</mat-icon>
|
||||
</button>
|
||||
<div class="col-12">
|
||||
<div class="row"
|
||||
*ngFor="let fieldFormGroup of formGroup.get('definition').get('fields')['controls'];let i=index">
|
||||
<div class="col-10">
|
||||
<div class="row">
|
||||
<mat-form-field class="col">
|
||||
<input matInput
|
||||
placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}"
|
||||
type="text" name="label" [formControl]="fieldFormGroup.get('label')"
|
||||
required>
|
||||
<mat-error *ngIf="fieldFormGroup.get('label').hasError('required')">
|
||||
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
<mat-error *ngIf="fieldFormGroup.get('label').hasError('backendError')">
|
||||
{{fieldFormGroup.get('label').getError('backendError').message}}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="col">
|
||||
<mat-select placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.TYPE' | translate}}"
|
||||
[formControl]="fieldFormGroup.get('type')" required>
|
||||
<mat-option *ngFor="let fieldType of getDMPProfileFieldTypeValues()"
|
||||
[value]="fieldType">{{
|
||||
getDMPProfileFieldTypeWithLanguage(fieldType) | translate}}</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="fieldFormGroup.get('type').hasError('required')">
|
||||
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
<mat-error *ngIf="fieldFormGroup.get('type').hasError('backendError')">
|
||||
{{fieldFormGroup.get('type').getError('backendError').message}}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="col">
|
||||
<mat-select
|
||||
placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.DATATYPE' | translate}}"
|
||||
[formControl]="fieldFormGroup.get('dataType')" required>
|
||||
<mat-option
|
||||
*ngFor="let fieldDataType of getDMPProfileFieldDataTypeValues()"
|
||||
[value]="fieldDataType">{{
|
||||
getDMPProfileFieldDataTypeWithLanguage(fieldDataType) | translate}}</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="fieldFormGroup.get('dataType').hasError('required')">
|
||||
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
<mat-error *ngIf="fieldFormGroup.get('dataType').hasError('backendError')">
|
||||
{{fieldFormGroup.get('dataType').getError('backendError').message}}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<div class="centered-row-item col-auto">
|
||||
<mat-checkbox [formControl]="fieldFormGroup.get('required')">
|
||||
{{'DMP-PROFILE-EDITOR.FIELDS.REQUIRED' | translate}}</mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-2">
|
||||
<div class="row">
|
||||
<div class="col-auto" *ngIf="!isNew">
|
||||
<button mat-icon-button type="button"
|
||||
(click)="removeField(i)" [disabled]="viewOnly">
|
||||
<mat-icon class="mat-24">delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto"
|
||||
*ngIf="!isNew && formGroup.get('status').value==0 && i == (formGroup.get('definition').get('fields')['controls'].length - 1)">
|
||||
<button mat-mini-fab color="primary" type="button" (click)="addField()"
|
||||
[disabled]="viewOnly">
|
||||
<mat-icon class="mat-24">add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto" *ngIf="isNew && i != 0">
|
||||
<button mat-mini-fab class="remove" type="button"
|
||||
(click)="removeField(i)">
|
||||
<mat-icon class="mat-24">remove</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto"
|
||||
*ngIf="isNew && i == (formGroup.get('definition').get('fields')['controls'].length - 1)">
|
||||
<button mat-mini-fab color="primary" type="button" (click)="addField()"
|
||||
[disabled]="viewOnly">
|
||||
<mat-icon class="mat-24">add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button mat-icon-button class="col-auto" color="primary" type="button" (click)="addField()"
|
||||
[disabled]="viewOnly">
|
||||
<mat-icon class="mat-24">add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
<div class="row mt-4 pl-5 pr-4">
|
||||
<div class="col-auto"><button mat-raised-button color="primary" (click)="cancel()"
|
||||
type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.CANCEL' | translate}}</button></div>
|
||||
<div class="col"></div>
|
||||
<div class="col-auto" *ngIf="!isNew"><button mat-raised-button color="primary" type="button"
|
||||
(click)="delete()">{{'DMP-PROFILE-EDITOR.ACTIONS.DELETE' | translate}}</button></div>
|
||||
(click)="delete()">{{'DMP-PROFILE-EDITOR.ACTIONS.DELETE' | translate}}</button>
|
||||
</div>
|
||||
<button mat-raised-button *ngIf="formGroup.get('status').value!=1" class="col-auto"
|
||||
color="primary" (click)="finalize()" [disabled]="!formGroup.valid"
|
||||
type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
|
||||
<button mat-raised-button *ngIf="formGroup.get('status').value==1" class="col-auto"
|
||||
color="primary" (click)="downloadXML()"
|
||||
type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button>
|
||||
<div class="col-auto" *ngIf="!viewOnly"><button mat-raised-button color="primary"
|
||||
type="submit">{{'DMP-PROFILE-EDITOR.ACTIONS.SAVE' | translate}}</button></div>
|
||||
<div class="col-auto" *ngIf="!viewOnly">
|
||||
<button mat-raised-button color="primary" type="submit" [disabled]="!formGroup.valid">
|
||||
{{'DMP-PROFILE-EDITOR.ACTIONS.SAVE' | translate}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</form>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,6 +1,24 @@
|
|||
.dmp-profile-editor {
|
||||
.centered-row-item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
.centered-row-item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.remove {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.add {
|
||||
background-color: white;
|
||||
color: #009700;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
|
||||
background-color: #0070c0;
|
||||
}
|
||||
|
||||
::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
|
||||
background-color: #b0b0b0;
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { AfterViewInit, Component } from '@angular/core';
|
||||
import { AfterViewInit, Component, OnInit } from '@angular/core';
|
||||
import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
|
||||
import { ActivatedRoute, Params, Router } from '@angular/router';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
|
@ -71,6 +71,7 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
|
|||
this.dmpProfileModel = new DmpProfileEditorModel();
|
||||
setTimeout(() => {
|
||||
this.formGroup = this.dmpProfileModel.buildForm();
|
||||
this.addField();
|
||||
});
|
||||
this.breadCrumbs = Observable.of([{
|
||||
parentComponentName: 'DmpProfileListingComponent',
|
||||
|
@ -95,8 +96,8 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
|
|||
this.dmpProfileService.createDmp(this.formGroup.value)
|
||||
.pipe(takeUntil(this._destroyed))
|
||||
.subscribe(
|
||||
complete => this.onCallbackSuccess(),
|
||||
error => this.onCallbackError(error)
|
||||
complete => this.onCallbackSuccess(),
|
||||
error => this.onCallbackError(error)
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -198,8 +199,8 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
|
|||
this.dmpProfileService.createDmp(this.formGroup.value)
|
||||
.pipe(takeUntil(this._destroyed))
|
||||
.subscribe(
|
||||
complete => this.onCallbackSuccess(),
|
||||
error => this.onCallbackError(error)
|
||||
complete => this.onCallbackSuccess(),
|
||||
error => this.onCallbackError(error)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -1,40 +1,47 @@
|
|||
<div class="dmp-profile-listing">
|
||||
<h3>{{titlePrefix}} {{'DMP-PROFILE-LISTING.TITLE' | translate}}</h3>
|
||||
<div class="main-content">
|
||||
<div class="container-fluid dmp-profile-listing">
|
||||
<h3>{{titlePrefix}} {{'DMP-PROFILE-LISTING.TITLE' | translate}}</h3>
|
||||
|
||||
<app-dmp-profile-criteria-component></app-dmp-profile-criteria-component>
|
||||
<mat-card class="mat-card">
|
||||
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
|
||||
<app-dmp-profile-criteria-component></app-dmp-profile-criteria-component>
|
||||
<mat-card class="row mat-card">
|
||||
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
|
||||
|
||||
<!-- Column Definition: Name -->
|
||||
<ng-container cdkColumnDef="label">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'DMP-PROFILE-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Column Definition: Name -->
|
||||
<ng-container cdkColumnDef="label">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header="label">
|
||||
{{'DMP-PROFILE-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Column Definition: status -->
|
||||
<ng-container cdkColumnDef="status">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header="status">{{'DMP-PROFILE-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{row.status}}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Column Definition: status -->
|
||||
<ng-container cdkColumnDef="status">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header="status">
|
||||
{{'DMP-PROFILE-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{row.status}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Column Definition: Created -->
|
||||
<ng-container cdkColumnDef="created">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DMP-PROFILE-LISTING.COLUMNS.CREATED' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Column Definition: Created -->
|
||||
<ng-container cdkColumnDef="created">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header="created">
|
||||
{{'DMP-PROFILE-LISTING.COLUMNS.CREATED' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Column Definition: Submission Time -->
|
||||
<!-- Column Definition: Submission Time -->
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id)"></mat-row>
|
||||
<!-- (click)="rowClick(row.id)" -->
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id)"></mat-row>
|
||||
<!-- (click)="rowClick(row.id)" -->
|
||||
|
||||
</mat-table>
|
||||
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
|
||||
</mat-paginator>
|
||||
</mat-card>
|
||||
</mat-table>
|
||||
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
|
||||
</mat-paginator>
|
||||
</mat-card>
|
||||
|
||||
<button mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['/dmp-profiles/new'] ">
|
||||
<mat-icon class="mat-24">add</mat-icon>
|
||||
</button>
|
||||
<div class="row justify-content-end pr-2">
|
||||
<button mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['/dmp-profiles/new'] ">
|
||||
<mat-icon class="mat-24">add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,28 +1,62 @@
|
|||
.dmp-profile-listing {
|
||||
|
||||
.mat-row {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mat-card {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
mat-row:hover {
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
mat-row:nth-child(odd) {
|
||||
background-color: #eef0fb;
|
||||
}
|
||||
|
||||
.mat-fab-bottom-right {
|
||||
// top: auto !important;
|
||||
// right: 20px !important;
|
||||
// bottom: 10px !important;
|
||||
// left: auto !important;
|
||||
// position: fixed !important;
|
||||
float: right;
|
||||
z-index: 5;
|
||||
}
|
||||
.mat-table {
|
||||
margin: 24px;
|
||||
}
|
||||
|
||||
.dmp-profile-listing {
|
||||
.mat-row {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mat-card {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
mat-row:hover {
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
mat-row:nth-child(odd) {
|
||||
background-color: #eef0fb;
|
||||
}
|
||||
|
||||
.mat-fab-bottom-right {
|
||||
// top: auto !important;
|
||||
// right: 20px !important;
|
||||
// bottom: 10px !important;
|
||||
// left: auto !important;
|
||||
// position: fixed !important;
|
||||
float: right;
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-container {
|
||||
flex-direction: row-reverse !important;
|
||||
justify-content: space-between !important;
|
||||
background-color: #f6f6f6;
|
||||
height: 30px;
|
||||
min-height: 30px !important;
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-page-size {
|
||||
height: 43px;
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-range-label {
|
||||
margin: 15px 32px 0 24px !important;
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-range-actions {
|
||||
width: 55% !important;
|
||||
min-height: 43px !important;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-navigation-previous {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
::ng-deep .mat-icon-button {
|
||||
height: 30px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<form class="user-role-editor" [formGroup]="formGroup" (ngSubmit)="formSubmit()">
|
||||
<form class="d-flex user-role-editor" [formGroup]="formGroup" (ngSubmit)="formSubmit()">
|
||||
<mat-form-field class="roles-width-80">
|
||||
<mat-select formControlName="appRoles" multiple required>
|
||||
<mat-option *ngFor="let role of getPrincipalAppRoleValues()" [value]="role">{{getPrincipalAppRoleWithLanguage(role)}}</mat-option>
|
||||
|
|
|
@ -1,39 +1,41 @@
|
|||
<div class="user-listing">
|
||||
<h3>{{'USERS.LISTING.TITLE' | translate}}</h3>
|
||||
<div class="main-content">
|
||||
<div class="container-fluid user-listing">
|
||||
<h3>{{'USERS.LISTING.TITLE' | translate}}</h3>
|
||||
|
||||
<app-user-criteria-component></app-user-criteria-component>
|
||||
<mat-card class="mat-card">
|
||||
<mat-table [dataSource]="dataSource" matSort>
|
||||
<app-user-criteria-component></app-user-criteria-component>
|
||||
<mat-card class="mat-card">
|
||||
<mat-table [dataSource]="dataSource" matSort>
|
||||
|
||||
<!-- Column Definition: Label -->
|
||||
<ng-container cdkColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.LABEL' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{row.name}}</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Column Definition: Label -->
|
||||
<ng-container cdkColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.LABEL' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{row.name}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container cdkColumnDef="email">
|
||||
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.EMAIL' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{row.email}}</mat-cell>
|
||||
</ng-container>
|
||||
<ng-container cdkColumnDef="email">
|
||||
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.EMAIL' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{row.email}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container cdkColumnDef="lastloggedin">
|
||||
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.LAST-LOGGED-IN' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{row.lastloggedin | date:'shortDate'}}</mat-cell>
|
||||
</ng-container>
|
||||
<ng-container cdkColumnDef="lastloggedin">
|
||||
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.LAST-LOGGED-IN' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{row.lastloggedin | date:'shortDate'}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Column Definition: Roles -->
|
||||
<ng-container cdkColumnDef="roles">
|
||||
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.ROLES' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<app-user-role-editor-component [item]="row"></app-user-role-editor-component>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Column Definition: Roles -->
|
||||
<ng-container cdkColumnDef="roles">
|
||||
<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.ROLES' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<app-user-role-editor-component [item]="row"></app-user-role-editor-component>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
|
||||
</mat-table>
|
||||
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
|
||||
</mat-paginator>
|
||||
</mat-card>
|
||||
</mat-table>
|
||||
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
|
||||
</mat-paginator>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,14 +1,48 @@
|
|||
.user-listing {
|
||||
.mat-table {
|
||||
margin: 24px;
|
||||
}
|
||||
|
||||
.mat-card {
|
||||
margin: 1em 0;
|
||||
}
|
||||
.user-listing {
|
||||
.mat-card {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
mat-row:hover {
|
||||
background-color: lightgray;
|
||||
}
|
||||
mat-row:hover {
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
mat-row:nth-child(odd) {
|
||||
background-color: #eef0fb;
|
||||
}
|
||||
}
|
||||
mat-row:nth-child(odd) {
|
||||
background-color: #eef0fb;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-container {
|
||||
flex-direction: row-reverse !important;
|
||||
justify-content: space-between !important;
|
||||
background-color: #f6f6f6;
|
||||
height: 30px;
|
||||
min-height: 30px !important;
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-page-size {
|
||||
height: 43px;
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-range-label {
|
||||
margin: 15px 32px 0 24px !important;
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-range-actions {
|
||||
width: 55% !important;
|
||||
min-height: 43px !important;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-navigation-previous {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
::ng-deep .mat-icon-button {
|
||||
height: 30px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue