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

DMP Profile listing. Restyle import dialog

This commit is contained in:
Kristian Ntavidi 2021-06-22 17:51:00 +03:00
parent ad0853dc20
commit d90ab00833
15 changed files with 198 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dmp-frontend/src/app/ui/admin/dmp-profile/dmp-profile.module.ts
View File

@ -9,6 +9,7 @@ import { DmpProfileExternalAutocompleteFieldEditorComponent } from './editor/ext
import { DialodConfirmationUploadDmpProfiles } from './listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component';
import { DmpProfileCriteriaComponent } from './listing/criteria/dmp-profile-criteria.component';
import { DmpProfileListingComponent } from './listing/dmp-profile-listing.component';
import { NgxDropzoneModule } from "ngx-dropzone";
@NgModule({
imports: [
@ -16,7 +17,8 @@ import { DmpProfileListingComponent } from './listing/dmp-profile-listing.compon
CommonFormsModule,
UrlListingModule,
ConfirmationDialogModule,
DmpProfileRoutingModule
DmpProfileRoutingModule,
NgxDropzoneModule
],
declarations: [
DmpProfileEditorComponent,

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

@ -13,7 +13,7 @@
</button>
</div>
<div class="col-auto" *ngIf="formGroup.get('status').value==1">
<button class="finalize-btn" (click)="downloadXML()"
<button mat-button class="finalize-btn" (click)="downloadXML()"
type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button>
</div>
<div *ngIf="formGroup.get('status').value!=1" class="col-auto">

26
dmp-frontend/src/app/ui/admin/dmp-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component.html
View File

@ -4,10 +4,26 @@
<h4>{{ data.message }}</h4>
</div>
<div class="col-auto ml-auto">
<input class="hidden" type="file" #imgFileInput (change)="selectXML($event)" accept="text/xml" />
<button class="col-auto attach-file" (click)="imgFileInput.click()" type="button">
<mat-icon color="{{btnColore}}">attach_file</mat-icon>
<mat-icon class="close-btn" (click)="cancel()">close</mat-icon>
</div>
</div>
<div class="row">
<div class="col-12">
<ngx-dropzone class="drop-file" (change)="selectXML($event)" [accept]="'text/xml'" [multiple]="false">
<ngx-dropzone-preview class="file-preview" [removable]="true" *ngIf="hasProfile()" (removed)="onRemove()">
<ngx-dropzone-label class="file-label">{{ selectedFileName }}</ngx-dropzone-label>
</ngx-dropzone-preview>
</ngx-dropzone>
</div>
</div>
<div class="row">
<div class="col-12 d-flex justify-content-center attach-btn">
<button mat-button type="button" class="col-auto attach-file" (click)="imgFileInput.click()">
<mat-icon class="mr-2">input</mat-icon>
<span *ngIf="!hasProfile()">{{'GENERAL.START-NEW-DMP-DIALOG.UPLOAD-FILE' | translate}}</span>
<span *ngIf="hasProfile()">{{'GENERAL.START-NEW-DMP-DIALOG.REPLACE-FILE' | translate}}</span>
</button>
<input class="hidden" type="file" #imgFileInput (change)="selectXML($event)" accept="text/xml" />
</div>
</div>
<div class="row">
@ -15,11 +31,11 @@
<input matInput placeholder="{{'DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-NAME'| translate}}" name="datasetProfileName" [(ngModel)]="data.name">
</mat-form-field>
<div class="col-auto">
<button mat-raised-button type="button" (click)="cancel()">{{ data.cancelButton }}</button>
<button mat-button type="button" class="cancel-btn" (click)="cancel()">{{ data.cancelButton }}</button>
</div>
<div class="col"></div>
<div class="col-auto">
<button mat-raised-button color="primary" type="button" (click)="confirm()" [disabled]="!hasProfile()">{{ data.confirmButton }}</button>
<button mat-button color="primary" class="next-btn" type="button" (click)="confirm()" [disabled]="!hasProfile()">{{ data.confirmButton }}</button>
</div>
</div>
</div>

99
dmp-frontend/src/app/ui/admin/dmp-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component.scss
View File

@ -1,3 +1,102 @@
.hidden {
display: none;
}
.cancel-btn {
background: #ffffff 0% 0% no-repeat padding-box;
border: 1px solid #b5b5b5;
border-radius: 30px;
width: 101px;
height: 43px;
color: #212121;
font-weight: 500;
}
.next-btn {
background: #ffffff 0% 0% no-repeat padding-box;
border: 1px solid #129d99;
border-radius: 30px;
opacity: 1;
width: 101px;
height: 43px;
color: #129d99;
font-weight: 500;
}
.next-btn[disabled] {
width: 100px;
height: 43px;
background: #ffffff 0% 0% no-repeat padding-box;
border: 1px solid #b5b5b5;
border-radius: 30px;
opacity: 1;
}
.next-btn:not([disabled]):hover {
background-color: #129d99;
color: #ffffff;
}
//ngx dropzone
.drop-file {
background-color: #fafafa;
border: 1px dashed #d1d1d1;
border-radius: 4px;
max-width: 480px;
height: 98px;
margin-top: 0.5rem;
}
.file-preview {
height: auto !important;
width: auto !important;
max-width: 500px !important;
min-height: 1rem !important;
background-color: #e0e0e0 !important;
background-image: none !important;
color: rgba(0, 0, 0, 0.87) !important;
font-weight: 500 !important;
border-radius: 24px !important;
line-height: 1.25 !important;
}
.file-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px !important;
}
::ng-deep ngx-dropzone-remove-badge {
opacity: 1 !important;
margin-left: .5rem !important;
position: initial !important;
}
//attach file
.attach-btn {
top: -20px;
}
.attach-file {
width: 156px;
height: 44px;
color: #ffffff;
background: #129d99 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1e202029;
border-radius: 30px;
}
.attach-file:hover {
background-color: #ffffff;
border: 1px solid #129d99;
color: #129d99;
}
.close-btn:hover{
cursor: pointer;
}

21
dmp-frontend/src/app/ui/admin/dmp-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component.ts
View File

@ -10,9 +10,9 @@ import { Inject, Component } from '@angular/core';
export class DialodConfirmationUploadDmpProfiles {
sizeError = false;
btnColore:String="primary";
selectFile =false;
maxFileSize: number = 1048576;
selectedFileName: string;
constructor(
public dialogRef: MatDialogRef<DialodConfirmationUploadDmpProfiles>,
@ -21,16 +21,20 @@ export class DialodConfirmationUploadDmpProfiles {
selectXML(event) {
const file: FileList = event.target.files;
let file: FileList = null;
if(event.target && event.target.files){
file = event.target.files;
}else if(event.addedFiles && event.addedFiles.length){
file = event.addedFiles;
}
if(!file) return;//no select closed with cancel . no file selected
const size: number = file[0].size; // Get file size.
this.sizeError = size > this.maxFileSize; // Checks if file size is valid.
const formdata: FormData = new FormData();
if (!this.sizeError) {
this.data.file = file;
this.selectFile=true;
this.btnColore="primary";
}else{
this.btnColore="warn";
this.selectedFileName = file[0].name;
}
this.data.name = file[0].name;
}
@ -49,5 +53,10 @@ export class DialodConfirmationUploadDmpProfiles {
hasProfile():boolean{
return (this.selectFile && !this.sizeError);
}
//remove selected file
onRemove(){
this.data.name="";
this.selectFile = false;
this.selectedFileName = "";
}
}

8
dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.scss
View File

@ -66,12 +66,12 @@
font-size: .8em;
}
.status-chip-inactive{
color: #ff3d33;
background: #ffd5d3 0% 0% no-repeat padding-box;
.status-chip-finalized{
color: #568b5a;
background: #9dd1a1 0% 0% no-repeat padding-box;
}
.status-chip-active{
.status-chip-draft{
color: #00c4ff;
background: #d3f5ff 0% 0% no-repeat padding-box;
}

22
dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.ts
View File

@ -7,15 +7,16 @@ import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatSort } from '@angular/material/sort';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { DmpStatus } from '@app/core/common/enum/dmp-status';
import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
import { DmpProfileListing } from '@app/core/model/dmp-profile/dmp-profile-listing';
import { DmpProfileCriteria } from '@app/core/query/dmp/dmp-profile-criteria';
import { DmpProfileService } from '@app/core/services/dmp/dmp-profile.service';
import { MatomoService } from '@app/core/services/matomo/matomo-service';
import { UiNotificationService } from '@app/core/services/notification/ui-notification-service';
import { DmpProfileCriteriaComponent } from '@app/ui/admin/dmp-profile/listing/criteria/dmp-profile-criteria.component';
import { BreadcrumbItem } from '@app/ui/misc/breadcrumb/definition/breadcrumb-item';
import { BaseComponent } from '@common/base/base.component';
import { SnackBarNotificationLevel } from '@common/modules/notification/ui-notification-service';
import { TranslateService } from '@ngx-translate/core';
import { merge as observableMerge, Observable, of as observableOf } from 'rxjs';
import { map, startWith, switchMap, takeUntil } from 'rxjs/operators';
@ -41,8 +42,8 @@ export class DmpProfileListingComponent extends BaseComponent implements OnInit
breadCrumbs: Observable<BreadcrumbItem[]>;
statuses = [
{ value: '0', viewValue: 'DMP-PROFILE-LISTING.STATUS.ACTIVE' },// active
{ value: '1', viewValue: 'DMP-PROFILE-LISTING.STATUS.INACTIVE' }// inactive
{ value: '0', viewValue: 'DMP-PROFILE-LISTING.STATUS.DRAFT' },// active
{ value: '1', viewValue: 'DMP-PROFILE-LISTING.STATUS.FINALIZED' }// inactive
];
constructor(
@ -54,6 +55,7 @@ export class DmpProfileListingComponent extends BaseComponent implements OnInit
private httpClient: HttpClient,
private matomoService: MatomoService,
private dialog: MatDialog,
private uiNotificationService: UiNotificationService,
) {
super();
}
@ -118,17 +120,23 @@ export class DmpProfileListingComponent extends BaseComponent implements OnInit
if (data && data.sucsess && data.name != null && data.file != null) {
this.dmpProfileService.uploadFile(data.file, data.name)
.pipe(takeUntil(this._destroyed))
.subscribe();
.subscribe(_=>{
this.uiNotificationService.snackBarNotification(this.languageService.instant('DMP-PROFILE-LISTING.MESSAGES.TEMPLATE-UPLOAD-SUCCESS'), SnackBarNotificationLevel.Success);
this.refresh();
},
error=>{
this.uiNotificationService.snackBarNotification(error.message, SnackBarNotificationLevel.Error);
});
}
});
}
getStatusClass(status: number):string{
if(status === 1){//inactive
return 'status-chip-inactive'
if(status === 1){//finalized
return 'status-chip-finalized'
}
if(status === 0){
return 'status-chip-active';
return 'status-chip-draft';
}
return '';
}

7
dmp-frontend/src/assets/i18n/de.json
View File

@ -1093,8 +1093,11 @@
"UPLOAD-XML-FILE-CANCEL": "Abbrechen"
},
"STATUS":{
"ACTIVE": "Active",
"INACTIVE": "Inactive"
"DRAFT": "Draft",
"FINALIZED": "Finalized"
},
"MESSAGES":{
"TEMPLATE-UPLOAD-SUCCESS":"Template successfully uploaded"
}
},
"DYNAMIC-FORM": {

7
dmp-frontend/src/assets/i18n/en.json
View File

@ -1093,8 +1093,11 @@
"UPLOAD-XML-FILE-CANCEL": "Cancel"
},
"STATUS":{
"ACTIVE": "Active",
"INACTIVE": "Inactive"
"DRAFT": "Draft",
"FINALIZED": "Finalized"
},
"MESSAGES":{
"TEMPLATE-UPLOAD-SUCCESS":"Template successfully uploaded"
}
},
"DYNAMIC-FORM": {

7
dmp-frontend/src/assets/i18n/es.json
View File

@ -1093,8 +1093,11 @@
"UPLOAD-XML-FILE-CANCEL": "Cancelar"
},
"STATUS":{
"ACTIVE": "Active",
"INACTIVE": "Inactive"
"DRAFT": "Draft",
"FINALIZED": "Finalized"
},
"MESSAGES":{
"TEMPLATE-UPLOAD-SUCCESS":"Template successfully uploaded"
}
},
"DYNAMIC-FORM": {

7
dmp-frontend/src/assets/i18n/gr.json
View File

@ -1093,8 +1093,11 @@
"UPLOAD-XML-FILE-CANCEL": "Ακύρωση"
},
"STATUS":{
"ACTIVE": "Active",
"INACTIVE": "Inactive"
"DRAFT": "Draft",
"FINALIZED": "Finalized"
},
"MESSAGES":{
"TEMPLATE-UPLOAD-SUCCESS":"Template successfully uploaded"
}
},
"DYNAMIC-FORM": {

7
dmp-frontend/src/assets/i18n/pt.json
View File

@ -1093,8 +1093,11 @@
"UPLOAD-XML-FILE-CANCEL": "Cancelar"
},
"STATUS":{
"ACTIVE": "Active",
"INACTIVE": "Inactive"
"DRAFT": "Draft",
"FINALIZED": "Finalized"
},
"MESSAGES":{
"TEMPLATE-UPLOAD-SUCCESS":"Template successfully uploaded"
}
},
"DYNAMIC-FORM": {

7
dmp-frontend/src/assets/i18n/sk.json
View File

@ -1093,8 +1093,11 @@
"UPLOAD-XML-FILE-CANCEL": "Zrušiť"
},
"STATUS":{
"ACTIVE": "Active",
"INACTIVE": "Inactive"
"DRAFT": "Draft",
"FINALIZED": "Finalized"
},
"MESSAGES":{
"TEMPLATE-UPLOAD-SUCCESS":"Template successfully uploaded"
}
},
"DYNAMIC-FORM": {

7
dmp-frontend/src/assets/i18n/sr.json
View File

@ -1093,8 +1093,11 @@
"UPLOAD-XML-FILE-CANCEL": "Otkažite"
},
"STATUS":{
"ACTIVE": "Active",
"INACTIVE": "Inactive"
"DRAFT": "Draft",
"FINALIZED": "Finalized"
},
"MESSAGES":{
"TEMPLATE-UPLOAD-SUCCESS":"Template successfully uploaded"
}
},
"DYNAMIC-FORM": {

7
dmp-frontend/src/assets/i18n/tr.json
View File

@ -1093,8 +1093,11 @@
"UPLOAD-XML-FILE-CANCEL": "İptal"
},
"STATUS":{
"ACTIVE": "Active",
"INACTIVE": "Inactive"
"DRAFT": "Draft",
"FINALIZED": "Finalized"
},
"MESSAGES":{
"TEMPLATE-UPLOAD-SUCCESS":"Template successfully uploaded"
}
},
"DYNAMIC-FORM": {