Edit community: Add small buttons for edit delete logo. Page alignments fro manage notification and personal info.

This commit is contained in:
Konstantinos Triantafyllou 2022-06-30 13:41:36 +03:00
parent 98e16ab975
commit eef84e9fe5
12 changed files with 107 additions and 110 deletions

@ -1 +1 @@
Subproject commit 9b5607fbd0204b44fb2c650df77fcb88f613fc2e Subproject commit 7ebf4f7f9054c2119d5e3d1eb07d3cb0d52a8aeb

View File

@ -39,6 +39,6 @@ import {HelpContentService} from "../../services/help-content.service";
export class AffiliationsModule { export class AffiliationsModule {
constructor(private iconsService: IconsService) { constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([add, preview, edit, remove]) this.iconsService.registerIcons([add, preview, remove])
} }
} }

View File

@ -1,18 +1,28 @@
import {Component, OnInit} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router'; import {ActivatedRoute} from '@angular/router';
import {properties} from '../../../environments/environment'; import {properties} from '../../../environments/environment';
import {Subscriber} from 'rxjs'; import {Subscriber, Subscription} from 'rxjs';
import {Title} from "@angular/platform-browser"; import {Title} from "@angular/platform-browser";
import {CommunityInfo} from "../../openaireLibrary/connect/community/communityInfo";
import {CommunityService} from "../../openaireLibrary/connect/community/community.service";
@Component({ @Component({
selector: 'claims', selector: 'claims',
template: ` template: `
<div page-content class="admin-pages"> <div page-content (stickyEmitter)="stickyPageHeader = $event">
<div header> <div header>
<div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader">
<div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Personal Info &
Affiliations
</div>
<h1 class="uk-h4 uk-margin-remove">{{community.shortTitle}}</h1>
</div>
</div>
<users-tabs tab="claims"></users-tabs> <users-tabs tab="claims"></users-tabs>
</div> </div>
<div inner> <div inner>
<claims-admin fetchBy="Context" [fetchId]=communityId [isConnect]="true" [claimsInfoURL]=claimsInfoURL <claims-admin fetchBy="Context" [fetchId]=community.communityId [isConnect]="true" [claimsInfoURL]=claimsInfoURL
[externalPortalUrl]="externalPortalUrl"> [externalPortalUrl]="externalPortalUrl">
</claims-admin> </claims-admin>
</div> </div>
@ -21,28 +31,31 @@ import {Title} from "@angular/platform-browser";
}) })
export class ClaimsComponent implements OnInit { export class ClaimsComponent implements OnInit {
communityId: string; public community: CommunityInfo;
public stickyPageHeader: boolean = false;
claimsInfoURL: string; claimsInfoURL: string;
externalPortalUrl = ''; externalPortalUrl = '';
sub; subs: any[] = [];
constructor(private route: ActivatedRoute, constructor(private route: ActivatedRoute,
private communityService: CommunityService,
private title: Title) { private title: Title) {
} }
ngOnInit() { ngOnInit() {
this.sub = this.route.params.subscribe(params => { this.subs.push(this.communityService.getCommunityAsObservable().subscribe(community => {
this.communityId = params['community']; this.community = community;
this.title.setTitle(this.communityId.toUpperCase() + ' | Manage Links'); this.title.setTitle(this.community.shortTitle.toUpperCase() + ' | Manage Links');
this.claimsInfoURL = properties.claimsInformationLink; this.claimsInfoURL = properties.claimsInformationLink;
this.externalPortalUrl = 'https://' + (properties.environment == 'beta' ? 'beta.' : '') + ((this.communityId == 'openaire') ? 'explore' : this.communityId) + '.openaire.eu'; this.externalPortalUrl = 'https://' + (properties.environment == 'beta' ? 'beta.' : '') + ((this.community.communityId == 'openaire') ? 'explore' : this.community.communityId) + '.openaire.eu';
}); }));
} }
ngOnDestroy() { ngOnDestroy() {
if (this.sub instanceof Subscriber) { this.subs.forEach(sub => {
this.sub.unsubscribe(); if(sub instanceof Subscription) {
} sub.unsubscribe();
}
})
} }
} }

View File

@ -1,4 +1,4 @@
import {Component, Input} from "@angular/core"; import {Component} from "@angular/core";
import {FormBuilder, FormGroup, Validators} from "@angular/forms"; import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {EnvProperties} from "../../../../openaireLibrary/utils/properties/env-properties"; import {EnvProperties} from "../../../../openaireLibrary/utils/properties/env-properties";
import {properties} from "../../../../../environments/environment"; import {properties} from "../../../../../environments/environment";
@ -16,7 +16,6 @@ declare var UIkit;
@Component({ @Component({
selector: 'edit-community', selector: 'edit-community',
template: ` template: `
<form *ngIf="communityFb" [formGroup]="communityFb" class="uk-margin-xlarge-bottom"> <form *ngIf="communityFb" [formGroup]="communityFb" class="uk-margin-xlarge-bottom">
<div class="uk-grid uk-grid-large" uk-grid> <div class="uk-grid uk-grid-large" uk-grid>
<div class="uk-width-1-2@m"> <div class="uk-width-1-2@m">
@ -64,13 +63,13 @@ declare var UIkit;
<img class="uk-position-center uk-blend-multiply" [src]="photo"> <img class="uk-position-center uk-blend-multiply" [src]="photo">
</div> </div>
<div class="uk-margin-left"> <div class="uk-margin-left">
<button (click)="remove()" class="uk-button-default uk-icon-button"> <button (click)="remove()" class="uk-button-danger uk-icon-button uk-icon-button-small">
<icon name="delete"></icon> <icon [flex]="true" ratio="0.8" name="delete"></icon>
</button> </button>
</div> </div>
<div class="uk-margin-small-left"> <div class="uk-margin-small-left">
<button class="uk-button-default uk-icon-button" (click)="file.click()"> <button class="uk-button-secondary uk-icon-button uk-icon-button-small" (click)="file.click()">
<icon name="edit"></icon> <icon [flex]="true" ratio="0.8" name="edit"></icon>
</button> </button>
</div> </div>
</div> </div>

View File

@ -3,11 +3,8 @@ import {EditCommunityComponent} from "./edit-community.component";
import {CommonModule} from "@angular/common"; import {CommonModule} from "@angular/common";
import {ReactiveFormsModule} from "@angular/forms"; import {ReactiveFormsModule} from "@angular/forms";
import {CKEditorModule} from 'ng2-ckeditor'; import {CKEditorModule} from 'ng2-ckeditor';
// import { CKEditorModule } from 'ckeditor4-angular';
import {InputModule} from "../../../../openaireLibrary/sharedComponents/input/input.module"; import {InputModule} from "../../../../openaireLibrary/sharedComponents/input/input.module";
import {IconsModule} from "../../../../openaireLibrary/utils/icons/icons.module"; import {IconsModule} from "../../../../openaireLibrary/utils/icons/icons.module";
import {IconsService} from "../../../../openaireLibrary/utils/icons/icons.service";
import {cloud_upload, edit, remove} from "../../../../openaireLibrary/utils/icons/icons";
@NgModule({ @NgModule({
imports: [CommonModule, ReactiveFormsModule, InputModule, IconsModule imports: [CommonModule, ReactiveFormsModule, InputModule, IconsModule
@ -16,9 +13,4 @@ import {cloud_upload, edit, remove} from "../../../../openaireLibrary/utils/icon
declarations: [EditCommunityComponent], declarations: [EditCommunityComponent],
exports: [EditCommunityComponent] exports: [EditCommunityComponent]
}) })
export class EditCommunityModule { export class EditCommunityModule {}
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([remove, edit, cloud_upload])
}
}

View File

@ -14,7 +14,9 @@ import {Subscription} from "rxjs";
<div header> <div header>
<div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader"> <div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader">
<div> <div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Community Profile</div> <div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Community
Profile
</div>
<h1 class="uk-h4 uk-margin-remove">{{community.shortTitle}}</h1> <h1 class="uk-h4 uk-margin-remove">{{community.shortTitle}}</h1>
</div> </div>
</div> </div>
@ -22,7 +24,7 @@ import {Subscription} from "rxjs";
</div> </div>
<div inner> <div inner>
<div class="uk-container"> <div class="uk-container">
<div class="uk-flex uk-flex-right uk-margin-medium-top uk-margin-medium-bottom"> <div class="uk-flex uk-flex-right@m uk-flex-center uk-margin-top">
<div class="uk-width-auto uk-text-right@m uk-text-center"> <div class="uk-width-auto uk-text-right@m uk-text-center">
<button class="uk-button uk-button-default uk-margin-right" <button class="uk-button uk-button-default uk-margin-right"
(click)="reset()" [class.uk-disabled]="loading || !editCommunityComponent.dirty" (click)="reset()" [class.uk-disabled]="loading || !editCommunityComponent.dirty"
@ -35,7 +37,7 @@ import {Subscription} from "rxjs";
</div> </div>
</div> </div>
<div class="uk-position-relative" style="min-height: 60vh"> <div class="uk-position-relative" style="min-height: 60vh">
<div [class.hidden]="loading"> <div [class.hidden]="loading" class="uk-section uk-section-small">
<edit-community #editCommunityComponent></edit-community> <edit-community #editCommunityComponent></edit-community>
</div> </div>
<div *ngIf="loading" class="uk-position-center"> <div *ngIf="loading" class="uk-position-center">
@ -53,7 +55,7 @@ export class ProfileComponent implements OnInit, OnDestroy {
public properties: EnvProperties = properties; public properties: EnvProperties = properties;
public loading: boolean = false; public loading: boolean = false;
private subscriptions: any[] = []; private subscriptions: any[] = [];
@ViewChild('editCommunityComponent', { static: true }) editCommunityComponent: EditCommunityComponent; @ViewChild('editCommunityComponent', {static: true}) editCommunityComponent: EditCommunityComponent;
public stickyPageHeader: boolean = false; public stickyPageHeader: boolean = false;

View File

@ -9,65 +9,69 @@
<users-tabs tab="notifications"></users-tabs> <users-tabs tab="notifications"></users-tabs>
</div> </div>
<div inner> <div inner>
<div class="uk-margin-top"> <div class="uk-flex uk-flex-center">
<div class="uk-flex uk-flex-center uk-flex-right@m"> <div class="uk-width-xlarge">
<button class="uk-button uk-button-secondary" [class.uk-disabled]="!hasChanged || showLoading" <div class="uk-margin-top">
[disabled]="!hasChanged || showLoading" <div class="uk-flex uk-flex-center uk-flex-right@m">
(click)="resetForm()">Reset <button class="uk-button uk-button-secondary" [class.uk-disabled]="!hasChanged || showLoading"
</button> [disabled]="!hasChanged || showLoading"
<button class="uk-button uk-margin-left uk-button-primary" (click)="resetForm()">Reset
[disabled]="!hasChanged || showLoading" [class.uk-disabled]="!hasChanged || showLoading" </button>
(click)="updateUserNotifications()">Save <button class="uk-button uk-margin-left uk-button-primary"
</button> [disabled]="!hasChanged || showLoading" [class.uk-disabled]="!hasChanged || showLoading"
</div> (click)="updateUserNotifications()">Save
</div> </button>
<div class="uk-section uk-section-small uk-container uk-container-small uk-position-relative">
<div *ngIf="!showLoading" class="uk-flex uk-flex-center">
<div class="uk-width-xlarge uk-margin-bottom">
<div class="uk-margin uk-grid" >
<div class="uk-width-expand" uk-tooltip="Get e-mail notification when there are changes in the managers list of your community">
Notify me for any changes in the managers list</div>
<mat-slide-toggle [checked]="userNotifications.notifyForNewManagers"
(change)="($event.source.checked = userNotifications.notifyForNewManagers);changeValueForNewManagers(userNotifications.notifyForNewManagers)">
{{userNotifications.notifyForNewManagers?' Enabled':'Disabled'}}
</mat-slide-toggle>
</div> </div>
<div class="uk-margin uk-grid"> </div>
<div class="uk-width-expand" uk-tooltip="Get e-mail notification when a user subscribes in your community"> <div class="uk-section uk-section uk-position-relative">
Notify me for new members <div *ngIf="!showLoading">
</div> <div class="uk-margin-bottom">
<mat-slide-toggle [checked]="userNotifications.notifyForNewSubscribers" <div class="uk-margin uk-grid" >
(change)="($event.source.checked = userNotifications.notifyForNewSubscribers);changeValueForNewSubscribers(userNotifications.notifyForNewSubscribers)"> <div class="uk-width-expand" uk-tooltip="Get e-mail notification when there are changes in the managers list of your community">
{{userNotifications.notifyForNewSubscribers?' Enabled':'Disabled'}} Notify me for any changes in the managers list</div>
</mat-slide-toggle> <mat-slide-toggle [checked]="userNotifications.notifyForNewManagers"
</div> (change)="($event.source.checked = userNotifications.notifyForNewManagers);changeValueForNewManagers(userNotifications.notifyForNewManagers)">
<hr class="uk-margin-medium"> {{userNotifications.notifyForNewManagers?' Enabled':'Disabled'}}
<div *ngFor="let notification of notifications; let i=index"> </mat-slide-toggle>
<div class="uk-margin uk-grid"> </div>
<div class="uk-width-expand" <div class="uk-margin uk-grid">
title="Get e-mail notification when users create new links related your community"> <div class="uk-width-expand" uk-tooltip="Get e-mail notification when a user subscribes in your community">
Notify me for any linking actions related to your community</div> Notify me for new members
<mat-slide-toggle [checked]="notification.notify" </div>
(change)="($event.source.checked = notification.notify);changeNotify(notification, !notification.notify, i)"> <mat-slide-toggle [checked]="userNotifications.notifyForNewSubscribers"
{{notification.notify?' Enabled':'Disabled'}} (change)="($event.source.checked = userNotifications.notifyForNewSubscribers);changeValueForNewSubscribers(userNotifications.notifyForNewSubscribers)">
</mat-slide-toggle> {{userNotifications.notifyForNewSubscribers?' Enabled':'Disabled'}}
</div> </mat-slide-toggle>
<div *ngIf="notification.notify" class="uk-margin"> </div>
<div class="uk-text-emphasis uk-text-bold uk-margin-small-bottom">Set Notification Frequency</div> <hr class="uk-margin-medium">
<div class="uk-flex uk-flex-between"> <div *ngFor="let notification of notifications; let i=index">
<label *ngFor="let option of frequencyOptions"> <div class="uk-margin uk-grid">
<input class="uk-radio" type="radio" [checked]="notification.frequency === option.value" <div class="uk-width-expand"
(click)="notification.frequency = option.value"> title="Get e-mail notification when users create new links related your community">
<span class="uk-margin-small-left">{{option.label}}</span> Notify me for any linking actions related to your community</div>
</label> <mat-slide-toggle [checked]="notification.notify"
(change)="($event.source.checked = notification.notify);changeNotify(notification, !notification.notify, i)">
{{notification.notify?' Enabled':'Disabled'}}
</mat-slide-toggle>
</div>
<div *ngIf="notification.notify" class="uk-margin">
<div class="uk-text-bold uk-margin-small-bottom">Set Notification Frequency</div>
<div class="uk-flex uk-flex-between">
<label *ngFor="let option of frequencyOptions">
<input class="uk-radio" type="radio" [checked]="notification.frequency === option.value"
(click)="notification.frequency = option.value">
<span class="uk-margin-small-left">{{option.label}}</span>
</label>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
</div> </div>
</div> </div>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -28,7 +28,7 @@ export class ManageUserNotificationsComponent implements OnInit {
@Input('group') @Input('group')
myForm: FormGroup; myForm: FormGroup;
public properties: EnvProperties = null; public properties: EnvProperties = properties;
public community: CommunityInfo; public community: CommunityInfo;
public userNotifications: UserNotificationsRights = null; public userNotifications: UserNotificationsRights = null;
public initialUserNotifications: UserNotificationsRights = null; public initialUserNotifications: UserNotificationsRights = null;
@ -52,9 +52,6 @@ export class ManageUserNotificationsComponent implements OnInit {
} }
ngOnInit() { ngOnInit() {
this.properties = properties;
HelperFunctions.scroll();
this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(community => { this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(community => {
if (community) { if (community) {
this.community = community; this.community = community;
@ -178,11 +175,6 @@ export class ManageUserNotificationsComponent implements OnInit {
if (this.userNotifications.managerEmail) { if (this.userNotifications.managerEmail) {
userNotifications['managerEmail'] = this.userNotifications.managerEmail; userNotifications['managerEmail'] = this.userNotifications.managerEmail;
} }
// else {
// if (this.user) {
// userNotifications['managerEmail'] = this.user.email;
// }
// }
return userNotifications; return userNotifications;
} }

View File

@ -35,7 +35,7 @@ declare var UIkit;
<users-tabs tab="personal"></users-tabs> <users-tabs tab="personal"></users-tabs>
</div> </div>
<div inner> <div inner>
<div class="uk-margin-top"> <div class="uk-margin-top uk-container">
<div class="uk-flex uk-flex-center uk-flex-right@m"> <div class="uk-flex uk-flex-center uk-flex-right@m">
<button class="uk-button uk-button-secondary" [class.uk-disabled]="!hasChanged || loading" <button class="uk-button uk-button-secondary" [class.uk-disabled]="!hasChanged || loading"
[disabled]="!hasChanged || loading" [disabled]="!hasChanged || loading"
@ -56,7 +56,7 @@ declare var UIkit;
<div class="image"> <div class="image">
<img [src]="photo"/> <img [src]="photo"/>
<input #fileInput id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/> <input #fileInput id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>
<icon class="uk-text-secondary clickable" name="photo" ratio="1.5" <icon class="uk-text-secondary clickable" name="photo_camera" ratio="1.5"
(click)="$event.stopPropagation();uploadPhoto(fileInput);$event.preventDefault()"></icon> (click)="$event.stopPropagation();uploadPhoto(fileInput);$event.preventDefault()"></icon>
<div *ngIf="curator.photo || file" #element <div *ngIf="curator.photo || file" #element
uk-dropdown="mode: click; pos: bottom-left; delay-hide: 0; flip: false"> uk-dropdown="mode: click; pos: bottom-left; delay-hide: 0; flip: false">
@ -68,11 +68,11 @@ declare var UIkit;
</div> </div>
</div> </div>
<div class="uk-width-expand"> <div class="uk-width-expand">
<div dashboard-input class="uk-width-large@m uk-width-1-1" placeholder="Name" <div input class="uk-width-large@m uk-width-1-1" placeholder="Name"
[formInput]="curatorFb.get('name')" inputClass="border-bottom normal-font-size"></div> [formInput]="curatorFb.get('name')" inputClass="border-bottom normal-font-size"></div>
</div> </div>
</div> </div>
<div dashboard-input class="uk-width-1-1" placeholder="Biography" <div input class="uk-width-1-1" placeholder="Biography"
[formInput]="curatorFb.get('bio')" type="textarea" rows="8"></div> [formInput]="curatorFb.get('bio')" type="textarea" rows="8"></div>
<div class="uk-width-1-1"> <div class="uk-width-1-1">
<h5 class="uk-margin-large uk-text-bold">My Affiliations</h5> <h5 class="uk-margin-large uk-text-bold">My Affiliations</h5>

View File

@ -11,8 +11,6 @@ import {UsersTabsModule} from "../users-tabs.module";
import {LoadingModule} from "../../../openaireLibrary/utils/loading/loading.module"; import {LoadingModule} from "../../../openaireLibrary/utils/loading/loading.module";
import {InputModule} from "../../../openaireLibrary/sharedComponents/input/input.module"; import {InputModule} from "../../../openaireLibrary/sharedComponents/input/input.module";
import {IconsModule} from "../../../openaireLibrary/utils/icons/icons.module"; import {IconsModule} from "../../../openaireLibrary/utils/icons/icons.module";
import {IconsService} from "../../../openaireLibrary/utils/icons/icons.service";
import {add, edit, photo, remove} from "../../../openaireLibrary/utils/icons/icons";
import {UrlPrefixModule} from "../../../openaireLibrary/utils/pipes/url-prefix.module"; import {UrlPrefixModule} from "../../../openaireLibrary/utils/pipes/url-prefix.module";
import {HelpContentService} from "../../../services/help-content.service"; import {HelpContentService} from "../../../services/help-content.service";
@ -35,7 +33,4 @@ import {HelpContentService} from "../../../services/help-content.service";
}) })
export class PersonalInfoModule { export class PersonalInfoModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([photo, edit, remove, add])
}
} }

@ -1 +1 @@
Subproject commit f79a0c8ddbbe2e0cb266034073513356fd801095 Subproject commit 8818983564cb9e9232979af27fa568c18fa4eba8

@ -1 +1 @@
Subproject commit 8c4585873a56165631bee6b9d33d11fe83fc897c Subproject commit 25f7f7dd34fae80d1e2e25935c2f2772c5800e70