From bcbc0c7b1980e036107386ae28c9afee2708f4b4 Mon Sep 17 00:00:00 2001 From: "argiro.kokogiannaki" Date: Mon, 20 Jan 2020 14:33:36 +0000 Subject: [PATCH] [Admin tool| Trunk] Customization: lattest changes in customization include upload/download options git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-admin-portal/trunk@57995 d315682c-612b-4755-9ff5-7f18f6832af3 --- deploy/beta-properties.json | 2 +- src/app/app.component.ts | 14 +-- .../pages/customization/Color.component.ts | 8 +- .../customization.component.html | 88 ++++++++++---- .../customization/customization.component.ts | 113 ++++++++++++++++-- .../pages/dashboard/dashboard.component.html | 4 +- src/index.html | 12 +- 7 files changed, 187 insertions(+), 54 deletions(-) diff --git a/deploy/beta-properties.json b/deploy/beta-properties.json index 9efb5dd..ba471dd 100644 --- a/deploy/beta-properties.json +++ b/deploy/beta-properties.json @@ -93,6 +93,6 @@ "widgetLink" : "https://beta.openaire.eu/index.php?option=com_openaire&view=widget&format=raw&projectId=", "claimsInformationLink": "https://beta.openaire.eu/linking", - "lastIndexUpdate": "2019-05-16", + "lastIndexUpdate": "2019-11-01", "indexInfoAPI": "http://beta.services.openaire.eu/openaire/info/" } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 36e8b14..98051cf 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -40,7 +40,7 @@ export class AppComponent implements OnInit { constructor(private route: ActivatedRoute, private propertiesService: EnvironmentSpecificService, private _communitiesService: CommunitiesService, - private router: Router, + public router: Router, private userManagementService: UserManagementService) { this.router.events.forEach((event) => { if (event instanceof NavigationStart) { @@ -242,13 +242,11 @@ export class AppComponent implements OnInit { '/organizations', false, [], [], {communityId: this.communityId}), items: [] }); - if(this.properties.environment == 'development') { - community.items.push({ - rootItem: new MenuItem('layout', 'Customize Layout', '/customize-layout', - '/customize-layout', false, [], [], {communityId: this.communityId}), - items: [] - }); - } + community.items.push({ + rootItem: new MenuItem('layout', 'Customize Layout', '/customize-layout', + '/customize-layout', false, [], [], {communityId: this.communityId}), + items: [] + }); /*community.items.push({ rootItem: new MenuItem('communityLayout', 'Community Layout', '/community-layout', '/community-layout', false, [], [], {communityId: this.communityId}), diff --git a/src/app/pages/customization/Color.component.ts b/src/app/pages/customization/Color.component.ts index 70bbda1..3c42f19 100644 --- a/src/app/pages/customization/Color.component.ts +++ b/src/app/pages/customization/Color.component.ts @@ -8,12 +8,8 @@ import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
{{label}}:
- - +
diff --git a/src/app/pages/customization/customization.component.html b/src/app/pages/customization/customization.component.html index db6573b..b13982e 100644 --- a/src/app/pages/customization/customization.component.html +++ b/src/app/pages/customization/customization.component.html @@ -9,17 +9,19 @@ Reset -
+
- + Customization
+
+
Download the saved customization settings and upload a customization file:
+
Download +
+
+ + Upload +
+
+
{{errorMessage}}
Style @@ -56,7 +72,7 @@
- Community Page + Community Page
@@ -74,7 +90,13 @@ -
Tooltip ....
+
+ + Set the banner background color and which fonts to be used (for dark or light background). +
  • @@ -98,7 +120,7 @@ type="radio"/> for light background
QUICK LOOK - + -
Tooltip ....
+
+ + Customize the banner fonts, and the links for dark and light background +
  • @@ -183,8 +211,7 @@ (colorChange)= " draftCustomizationOptions.panel.title.color = $event;" [addMargin]="true">
    QUICK LOOK - + -
    Tooltip ....
    +
    + + Customize the layout of dashboard elements. +
    • @@ -377,8 +410,12 @@
    -
    Identity colors are used in several - points (e.g paging, accordions, tabs, etc) in your community RCD.
    Hint: it can't be white! +
    + + Identity colors are used in several spots in your community Dashboard. Check the quick look section!
      @@ -492,7 +529,13 @@
    -
    Tooltip ....
    +
    + + Customize the buttons for dark and light backgrounds +
    • @@ -605,24 +648,27 @@
    - +
    {{successfulSaveMessage}}
    +
    {{errorMessage}}
    - + +
    -
    - -
    If you leave that Page without applying or publishing, changes will be lost.
    -
    Are you sure that you want to proceed?
    -     - - + +
    If you leave that Page without applying or publishing, changes will be lost.
    +
    Are you sure that you want to proceed?
    +     + +
    If you leave that Page without applying or publishing, changes will be lost.
    Are you sure that you want to proceed?
     diff --git a/src/app/pages/customization/customization.component.ts b/src/app/pages/customization/customization.component.ts index 2444e77..6f13f5e 100644 --- a/src/app/pages/customization/customization.component.ts +++ b/src/app/pages/customization/customization.component.ts @@ -21,7 +21,6 @@ export class CustomizationComponent implements OnInit { menuSelected = 'main'; color = 'white'; - communityUrl = 'http://scoobydoo.di.uoa.gr:4200/?communityId=ee'; publishedCustomizationOptions: CustomizationOptions = null; draftCustomizationOptions: CustomizationOptions = null; appliedCustomizationOptions: CustomizationOptions = null; @@ -33,17 +32,14 @@ export class CustomizationComponent implements OnInit { linkLightBackgroundPreview; hoveredText; public showLoading = true; - public updateErrorMessage = ''; + public errorMessage = ''; public successfulSaveMessage = ''; public communityId = null; - public hasChanged = false; public properties: EnvProperties = null; - private file: File = null; - private maxsize: number = 200 * 1024; public enabled = true; @ViewChild('backAlert') backAlert: AlertModal; @ViewChild('exitAlert') exitAlert: AlertModal; @@ -67,25 +63,36 @@ export class CustomizationComponent implements OnInit { this.route.queryParams.subscribe((params) => { this.communityId = params['communityId']; this.showLoading = true; - this.updateErrorMessage = ''; + this.errorMessage = ''; + this.successfulSaveMessage = ''; this.layoutService.getLayout(this.communityId, this.properties.adminToolsAPIURL + 'community/').subscribe(layout => { - this.publishedCustomizationOptions = layout; + this.publishedCustomizationOptions = (layout?layout:new CustomizationOptions()); this.initializeCustomizationOptions(true); }, error => { this.publishedCustomizationOptions = new CustomizationOptions(); this.initializeCustomizationOptions(true); + this.errorMessage = "An error occured fetching customizations options" }); }); } }); } - + hasChanges(object1,object2):boolean{ + return JSON.stringify(object1) != JSON.stringify(object2); + } saveLayout() { + if (!Session.isLoggedIn()) { + this._router.navigate(['/user-info'], { + queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url} + }); + } this.layoutService.saveLayout(this.communityId, this.properties.adminToolsAPIURL + 'community/', this.draftCustomizationOptions).subscribe(layout => { this.publishedCustomizationOptions = layout; this.initializeCustomizationOptions(JSON.stringify(this.publishedCustomizationOptions) != this.previewCustomization); - + this.successfulSaveMessage = "Customization Options saved!" + }, error => { + this.errorMessage = "An error occured on save" }); } @@ -168,6 +175,8 @@ export class CustomizationComponent implements OnInit { this.draftCustomizationOptions.links.darkBackground = this.copyObject(this.publishedCustomizationOptions.links.darkBackground); this.appliedCustomizationOptions.links.darkBackground = this.copyObject(this.publishedCustomizationOptions.links.darkBackground); + + this.linkDarkBackgroundPreview=this.changeFontsStyle(this.publishedCustomizationOptions.links.darkBackground, this.publishedCustomizationOptions.links.darkBackground.color); } resetFontsLinksLight() { @@ -176,6 +185,8 @@ export class CustomizationComponent implements OnInit { this.appliedCustomizationOptions.panel.title = this.copyObject(this.publishedCustomizationOptions.panel.title); this.appliedCustomizationOptions.links.lightBackground = this.copyObject(this.publishedCustomizationOptions.links.lightBackground); + + this.linkLightBackgroundPreview=this.changeFontsStyle(this.publishedCustomizationOptions.links.lightBackground, this.publishedCustomizationOptions.links.lightBackground.color); } resetElements() { @@ -193,12 +204,16 @@ export class CustomizationComponent implements OnInit { this.draftCustomizationOptions.buttons.darkBackground = this.copyObject(this.publishedCustomizationOptions.buttons.darkBackground); this.appliedCustomizationOptions.buttons.darkBackground = this.copyObject(this.publishedCustomizationOptions.buttons.darkBackground); + + this.buttonDarkBackgroundPreview=this.changeStyle(this.publishedCustomizationOptions.buttons.darkBackground); } resetButtonsLight() { this.draftCustomizationOptions.buttons.lightBackground = this.copyObject(this.publishedCustomizationOptions.buttons.lightBackground); this.appliedCustomizationOptions.buttons.lightBackground = this.copyObject(this.publishedCustomizationOptions.buttons.lightBackground); + + this.buttonLightBackgroundPreview=this.changeStyle(this.publishedCustomizationOptions.buttons.lightBackground); } resetIdentity() { @@ -263,10 +278,13 @@ export class CustomizationComponent implements OnInit { getCommunityUrlSatinized(layout: string) { return this.sanitizer.bypassSecurityTrustResourceUrl(this.getCommunityUrlNewLayout(layout)); } + getCommunityUrl() { + return 'https://'+ (this.properties.environment == 'production'?'':'beta.')+this.communityId+'.openaire.eu'; + } getCommunityUrlNewLayout(layout: string) { this.previewCustomization = layout; - return this.communityUrl + '&layout=' + StringUtils.URIEncode(layout); + return this.getCommunityUrl()+'/?' + 'layout=' + StringUtils.URIEncode(layout); } copyObject(obj) { @@ -310,4 +328,79 @@ export class CustomizationComponent implements OnInit { queryParams: {'communityId': this.communityId} }); } + downloadCustomization(){ + this.errorMessage = ""; + let options= JSON.parse(JSON.stringify(this.publishedCustomizationOptions)); + delete options['_id']; + console.info("Here!" +JSON.stringify(options)); + if(typeof document !== 'undefined') { + let dataStr = JSON.stringify(options); + let dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr); + + let exportFileDefaultName = 'layoutOptions.json'; + + let linkElement = document.createElement('a'); + linkElement.setAttribute('href', dataUri); + linkElement.setAttribute('download', exportFileDefaultName); + linkElement.click(); + } + } + fileChangeEvent(fileInput: any) { + this.errorMessage = ""; + let filesToUpload = >fileInput.target.files; + + + if (filesToUpload.length == 0) { + this.errorMessage = "There is no selected file to upload."; + return; + } else { + if (filesToUpload[0].name.indexOf(".json") == -1 || + (filesToUpload[0].type != "application/json" )) { + this.errorMessage = "No valid file type. The required type is json "+filesToUpload[0].type; + return; + } + } + + this.makeFileRequest(this.properties.utilsService + '/upload?type=json', [], filesToUpload).then((result) => { + let layout:CustomizationOptions = JSON.parse(result.toString()); + if( layout && layout.panel && layout.links && layout.buttons && layout.box){ + this.draftCustomizationOptions = layout; + //put the same id to not have any difference + if(this.publishedCustomizationOptions['_id']){ + this.draftCustomizationOptions['_id'] = this.publishedCustomizationOptions['_id']; + } + }else{ + this.errorMessage = "No valid file"; + } + + }, (error) => { + this.errorMessage = "No valid file"; + }); + } + + + makeFileRequest(url: string, params: Array, files: Array) { + return new Promise((resolve, reject) => { + const formData: any = new FormData(); + const xhr = new XMLHttpRequest(); + for (let i = 0; i < files.length; i++) { + formData.append("uploads[]", files[i], files[i].name); + } + xhr.onreadystatechange = function () { + if (xhr.readyState == 4) { + if (xhr.status == 200) { + resolve(xhr.response); + } else { + reject(xhr.response); + } + } + } + xhr.open("POST", url, true); + xhr.send(formData); + }); + } + + + + } diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html index 91f08b1..819c6a3 100644 --- a/src/app/pages/dashboard/dashboard.component.html +++ b/src/app/pages/dashboard/dashboard.component.html @@ -14,8 +14,8 @@
diff --git a/src/index.html b/src/index.html index f6c3288..f8ca058 100644 --- a/src/index.html +++ b/src/index.html @@ -27,13 +27,13 @@ - - + + - - - - + + + +