MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Admin Template Editor: table styling.

This commit is contained in:
Kristian Ntavidi 2021-04-09 17:05:01 +03:00
parent 167cae9e59
commit 23d664a48b
4 changed files with 172 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
dmp-frontend/src/app/ui/admin/dataset-profile/editor/animations/animations.ts
View File

@ -60,5 +60,16 @@ export const GENERAL_ANIMATIONS = [
state('updated',style({opacity:0})),
transition("*=>updated",
animate('2s 1s ease-out'))
]),
trigger('add-new-user-field', [
state('untriggered', style({
transform:'translateX(120%)'
})),
state('triggered', style({
transform:'translateX(0)'
})),
transition('untriggered => triggered', animate('400ms ease')),
transition('triggered => untriggered', animate('400ms 100ms ease'))
])
]

64
dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
View File

@ -167,28 +167,56 @@
<div class="col-12">
<!-- <div class="heading">1.3 {{'DMP-EDITOR.FIELDS.LANGUAGE' | translate}}</div> -->
<div class="heading">1.4 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-USERS'| translate}}</div>
<div class="full-width basic-info-input">
<table class="col-12 user-table">
<tr class="row user-table-header">
<th class="col-4">{{'USERS.LISTING.NAME' | translate}}</th>
<th class="col-4">{{'USERS.LISTING.EMAIL' | translate}}</th>
<th class="col-4"></th>
</tr>
<tr *ngFor="let user of userChipList" class="row user-table-row">
<td class="col-4">{{user.name}}</td>
<td class="col-4">{{user.email}}</td>
<td class="col-4">
<button mat-raised-button class="delete-btn" (click)="removeUser(user)">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-REMOVE-USER'| translate}}</button>
<div class="full-width basic-info-input">
<table class="col-12 user-table">
<tr class="row user-table-header">
<th>{{'USERS.LISTING.NAME' | translate}}</th>
<th>{{'USERS.LISTING.EMAIL' | translate}}</th>
<th></th>
</tr>
<tbody class="user-table-body">
<tr *ngFor="let user of userChipList" class="user-table-row">
<td>{{user.name}}</td>
<td >{{user.email}}</td>
<td>
<!-- <button mat-raised-button class="delete-btn" (click)="removeUser(user)">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-REMOVE-USER'| translate}}</button> -->
<button mat-button class="delete-btn" (click)="verifyAndRemoveUser(user)" [matTooltip]="'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-REMOVE-USER'| translate"><mat-icon>person_remove</mat-icon></button>
</td>
</tr>
</table>
</div>
<div class = "row">
<input matInput #email class = "col-8 email-input" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-USERS'| translate}}">
<button mat-raised-button color="primary" (click)="checkAndAdd(email.value)">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-VALIDATE-AND-ADD-USER'| translate}}</button>
</div>
</tbody>
</table>
</div>
</div>
<div class="col-12">
<div class="row justify-content-end">
<div class="col d-flex justify-content-end" style="overflow: hidden;">
<!-- <div class="row">
<input matInput #email class = "col-8 email-input" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-USERS'| translate}}">
<button mat-raised-button color="primary" (click)="checkAndAdd(email.value)">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-VALIDATE-AND-ADD-USER'| translate}}</button>
</div> -->
<!-- <div class="row"> -->
<div style="min-width: 20em;max-width: 25em;" [@add-new-user-field]="inputUserState">
<mat-form-field appearance="legacy">
<input matInput #email placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-USERS'| translate}}" (focus)="onUserFieldFocus()" (blur)="onUserFieldBlur()" (keyup.enter)="addUser(email)">
</mat-form-field>
</div>
<!-- <button mat-raised-button color="primary" (click)="checkAndAdd(email.value)">{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-VALIDATE-AND-ADD-USER'| translate}}</button> -->
<!-- </div> -->
</div>
<div class="col-auto">
<button mat-mini-fab color="primary" (click)="addUser(email)" (focus)="onUserButtonFocus()" (blur)="onUserButtonBlur()" [matTooltip]="'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-VALIDATE-AND-ADD-USER'| translate" [disabled]="userFormDisabled">
<ng-container *ngIf="inputUserState === 'untriggered' else triggericon">
<mat-icon>add</mat-icon>
</ng-container>
<ng-template #triggericon>
<mat-icon>person_add</mat-icon>
</ng-template>
</button>
</div>
</div>
</div>
<!-- <div class="col-12">
<button mat-button class="full-width" (click)="addPage()"
[disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.ACTIONS.NEXT' | translate}}</button>

27
dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss
View File

@ -230,8 +230,8 @@ $blue-color-light: #5cf7f2;
}
.delete-btn {
background-color: rgba(255, 0, 0, 0.76);
color: white;
// background-color: rgba(255, 0, 0, 0.76);
// color: white;
}
.email-input {
@ -247,26 +247,41 @@ $blue-color-light: #5cf7f2;
.user-table {
border: thin solid rgb(179, 173, 173);
// border: thin solid rgb(179, 173, 173);
border: 1px solid rgba(0, 0, 0, 0.12);
background-color: white;
border-radius: 4px;
padding-bottom: 1em;
}
.user-table-header {
text-align: center;
display: revert;
background-color: rgb(243 245 248);
}
.user-table-header th {
padding-top: 10px;
padding-bottom: 10px;
border: thin solid darkgray;
// border: thin solid darkgray;
}
.user-table-row {
display: revert;
// display: revert;
background-color: #fafafa;
td{
padding-top: .5em;
padding-bottom: .5em;
}
&:hover{
background-color: #eef5f6;
}
border-top:1px solid rgba(0, 0, 0, 0.12);
}
.user-table-row:nth-child(even) {
background-color: silver;
// background-color: silver;
}
.user-table-body{
text-align: center;
}

98
dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
View File

@ -1,5 +1,5 @@
import { of as observableOf, Observable } from 'rxjs';
import { of as observableOf, Observable, Subject, combineLatest, BehaviorSubject, pipe, of, from } from 'rxjs';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { AfterViewInit, Component, OnChanges, OnInit, QueryList, SimpleChanges, ViewChild } from '@angular/core';
import { AbstractControl, Form, FormArray, FormBuilder, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
@ -7,7 +7,7 @@ import { MatDialog } from '@angular/material/dialog';
import { MatHorizontalStepper, MatStep } from '@angular/material/stepper';
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { map, takeUntil } from 'rxjs/operators';
import { debounce, debounceTime, filter, map, mergeMap, takeUntil, tap } from 'rxjs/operators';
import * as FileSaver from 'file-saver';
import { BaseComponent } from '@common/base/base.component';
import { DatasetProfileEditorModel } from '@app/ui/admin/dataset-profile/editor/dataset-profile-editor-model';
@ -43,7 +43,7 @@ import { invalid } from '@angular/compiler/src/render3/view/util';
import { SideNavService } from '@app/core/services/sidenav/side-nav.sevice';
import { EditorCustomValidators, EditorCustomValidatorsEnum } from './custom-validators/editor-custom-validators';
import { CustomErrorValidator } from '@common/forms/validation/custom-validator';
import { STEPPER_ANIMATIONS } from './animations/animations';
import { GENERAL_ANIMATIONS, STEPPER_ANIMATIONS } from './animations/animations';
import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profile-combo-box-type';
import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
import { DmpInvitationUser } from '@app/core/model/dmp/invitation/dmp-invitation-user';
@ -51,6 +51,7 @@ import { RequestItem } from '@app/core/query/request-item';
import { DmpInvitationUserCriteria } from '@app/core/query/dmp/dmp-invitation-user-criteria';
import { DmpInvitationService } from '@app/core/services/dmp/dmp-invitation.service';
import { UserService } from '@app/core/services/user/user.service';
import { MatInput } from '@angular/material';
const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.json');
@ -59,7 +60,7 @@ const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.
selector: 'app-dataset-profile-editor-component',
templateUrl: './dataset-profile-editor.component.html',
styleUrls: ['./dataset-profile-editor.component.scss'],
animations:[...STEPPER_ANIMATIONS],
animations:[...STEPPER_ANIMATIONS, ...GENERAL_ANIMATIONS],
providers:[VisibilityRulesService]
})
export class DatasetProfileEditorComponent extends BaseComponent implements OnInit {
@ -85,6 +86,9 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
displayedColumns: String[] = ['name', 'email', 'button'];
colorizeInvalid:boolean = false;
inputUserState: 'untriggered'| 'triggered' = 'untriggered';
private _inputUserField$:BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
private _inputUserButton$:BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
// customEditorValidators = new EditorCustomValidators();
@ -220,6 +224,22 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
});
combineLatest(this._inputUserButton$.asObservable(),this._inputUserField$.asObservable())
.pipe(takeUntil(this._destroyed))
.pipe(debounceTime(400))
.pipe(filter(_=> !_[0] && !_[1]))
.subscribe(_=>{
// if(!this.userFormDisabled)
this.inputUserState = 'untriggered';
});
// combineLatest(this._inputUserButton$.asObservable(),this._inputUserField$.asObservable())
// .pipe(takeUntil(this._destroyed))
// .pipe(debounceTime(200))
// .pipe(filter(_=> _[0] || _[1]))
// .subscribe(_=>{
// // if(!this.userFormDisabled)
// this.inputUserState = 'triggered';
// });
}
private _initializeToCEntries(){
@ -1792,6 +1812,58 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
return invalidControls;
}
userFormDisabled:boolean = false;
addUser(email:MatInput){
// email.focus();
if(this.userFormDisabled) return;
// console.log('user add');
if(this.inputUserState === 'triggered'){
// this.checkAndAdd(email);
of(email.value)
.pipe(tap(_=> {this.userFormDisabled = true; email.focus()}))
.pipe(mergeMap(email=>this.userService.getFromEmail(email)))
.pipe(takeUntil(this._destroyed))
.subscribe((result) => {
this.userChipList.push(result);
this.form.patchValue({'users': this.userChipList});
email.value = '';
this.userFormDisabled = false;
// email.focus();
// this.inputUserState = 'triggered';
},
error=>{
// console.log(error.message);
this.uiNotificationService.snackBarNotification(error.message, SnackBarNotificationLevel.Error);
this.userFormDisabled = false;
// this.inputUserState = 'triggered';//when it loses focus(when disabled) it becomes untriggered
// email.focus();
});
// this.inputUserState = 'untriggered';
}else{
this.inputUserState = 'triggered';
email.focus();
}
}
onUserButtonFocus(){
this._inputUserButton$.next(true);
}
onUserButtonBlur(){
this._inputUserButton$.next(false);
}
onUserFieldFocus(){
this._inputUserField$.next(true);
}
onUserFieldBlur(){
this._inputUserField$.next(false);
}
//Temporary patch
@ -1847,6 +1919,24 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
this.form.patchValue({'users': this.userChipList});
}
verifyAndRemoveUser(user:any){
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
restoreFocus: false,
data: {
message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'),
isDeleteConfirmation: true
}
});
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(approve => {
if (approve) {
this.removeUser(user);
}
});
}
}
interface InvalidControl{