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 {
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 {ActivatedRoute} from '@angular/router';
import {properties} from '../../../environments/environment';
import {Subscriber} from 'rxjs';
import {Subscriber, Subscription} from 'rxjs';
import {Title} from "@angular/platform-browser";
import {CommunityInfo} from "../../openaireLibrary/connect/community/communityInfo";
import {CommunityService} from "../../openaireLibrary/connect/community/community.service";
@Component({
selector: 'claims',
template: `
<div page-content class="admin-pages">
<div page-content (stickyEmitter)="stickyPageHeader = $event">
<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>
</div>
<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">
</claims-admin>
</div>
@ -21,28 +31,31 @@ import {Title} from "@angular/platform-browser";
})
export class ClaimsComponent implements OnInit {
communityId: string;
public community: CommunityInfo;
public stickyPageHeader: boolean = false;
claimsInfoURL: string;
externalPortalUrl = '';
sub;
subs: any[] = [];
constructor(private route: ActivatedRoute,
private communityService: CommunityService,
private title: Title) {
}
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
this.communityId = params['community'];
this.title.setTitle(this.communityId.toUpperCase() + ' | Manage Links');
this.subs.push(this.communityService.getCommunityAsObservable().subscribe(community => {
this.community = community;
this.title.setTitle(this.community.shortTitle.toUpperCase() + ' | Manage Links');
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() {
if (this.sub instanceof Subscriber) {
this.sub.unsubscribe();
}
this.subs.forEach(sub => {
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 {EnvProperties} from "../../../../openaireLibrary/utils/properties/env-properties";
import {properties} from "../../../../../environments/environment";
@ -16,7 +16,6 @@ declare var UIkit;
@Component({
selector: 'edit-community',
template: `
<form *ngIf="communityFb" [formGroup]="communityFb" class="uk-margin-xlarge-bottom">
<div class="uk-grid uk-grid-large" uk-grid>
<div class="uk-width-1-2@m">
@ -64,13 +63,13 @@ declare var UIkit;
<img class="uk-position-center uk-blend-multiply" [src]="photo">
</div>
<div class="uk-margin-left">
<button (click)="remove()" class="uk-button-default uk-icon-button">
<icon name="delete"></icon>
<button (click)="remove()" class="uk-button-danger uk-icon-button uk-icon-button-small">
<icon [flex]="true" ratio="0.8" name="delete"></icon>
</button>
</div>
<div class="uk-margin-small-left">
<button class="uk-button-default uk-icon-button" (click)="file.click()">
<icon name="edit"></icon>
<button class="uk-button-secondary uk-icon-button uk-icon-button-small" (click)="file.click()">
<icon [flex]="true" ratio="0.8" name="edit"></icon>
</button>
</div>
</div>

View File

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

View File

@ -14,7 +14,9 @@ import {Subscription} from "rxjs";
<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 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>
</div>
</div>
@ -22,7 +24,7 @@ import {Subscription} from "rxjs";
</div>
<div inner>
<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">
<button class="uk-button uk-button-default uk-margin-right"
(click)="reset()" [class.uk-disabled]="loading || !editCommunityComponent.dirty"
@ -35,7 +37,7 @@ import {Subscription} from "rxjs";
</div>
</div>
<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>
</div>
<div *ngIf="loading" class="uk-position-center">
@ -53,10 +55,10 @@ export class ProfileComponent implements OnInit, OnDestroy {
public properties: EnvProperties = properties;
public loading: boolean = false;
private subscriptions: any[] = [];
@ViewChild('editCommunityComponent', { static: true }) editCommunityComponent: EditCommunityComponent;
@ViewChild('editCommunityComponent', {static: true}) editCommunityComponent: EditCommunityComponent;
public stickyPageHeader: boolean = false;
constructor(private communityService: CommunityService,
private title: Title) {
}

View File

@ -9,65 +9,69 @@
<users-tabs tab="notifications"></users-tabs>
</div>
<div inner>
<div class="uk-margin-top">
<div class="uk-flex uk-flex-center uk-flex-right@m">
<button class="uk-button uk-button-secondary" [class.uk-disabled]="!hasChanged || showLoading"
[disabled]="!hasChanged || showLoading"
(click)="resetForm()">Reset
</button>
<button class="uk-button uk-margin-left uk-button-primary"
[disabled]="!hasChanged || showLoading" [class.uk-disabled]="!hasChanged || showLoading"
(click)="updateUserNotifications()">Save
</button>
</div>
</div>
<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 class="uk-flex uk-flex-center">
<div class="uk-width-xlarge">
<div class="uk-margin-top">
<div class="uk-flex uk-flex-center uk-flex-right@m">
<button class="uk-button uk-button-secondary" [class.uk-disabled]="!hasChanged || showLoading"
[disabled]="!hasChanged || showLoading"
(click)="resetForm()">Reset
</button>
<button class="uk-button uk-margin-left uk-button-primary"
[disabled]="!hasChanged || showLoading" [class.uk-disabled]="!hasChanged || showLoading"
(click)="updateUserNotifications()">Save
</button>
</div>
<div class="uk-margin uk-grid">
<div class="uk-width-expand" uk-tooltip="Get e-mail notification when a user subscribes in your community">
Notify me for new members
</div>
<mat-slide-toggle [checked]="userNotifications.notifyForNewSubscribers"
(change)="($event.source.checked = userNotifications.notifyForNewSubscribers);changeValueForNewSubscribers(userNotifications.notifyForNewSubscribers)">
{{userNotifications.notifyForNewSubscribers?' Enabled':'Disabled'}}
</mat-slide-toggle>
</div>
<hr class="uk-margin-medium">
<div *ngFor="let notification of notifications; let i=index">
<div class="uk-margin uk-grid">
<div class="uk-width-expand"
title="Get e-mail notification when users create new links related your community">
Notify me for any linking actions related to your community</div>
<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-emphasis 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 class="uk-section uk-section uk-position-relative">
<div *ngIf="!showLoading">
<div class="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 class="uk-margin uk-grid">
<div class="uk-width-expand" uk-tooltip="Get e-mail notification when a user subscribes in your community">
Notify me for new members
</div>
<mat-slide-toggle [checked]="userNotifications.notifyForNewSubscribers"
(change)="($event.source.checked = userNotifications.notifyForNewSubscribers);changeValueForNewSubscribers(userNotifications.notifyForNewSubscribers)">
{{userNotifications.notifyForNewSubscribers?' Enabled':'Disabled'}}
</mat-slide-toggle>
</div>
<hr class="uk-margin-medium">
<div *ngFor="let notification of notifications; let i=index">
<div class="uk-margin uk-grid">
<div class="uk-width-expand"
title="Get e-mail notification when users create new links related your community">
Notify me for any linking actions related to your community</div>
<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 *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
</div>
</div>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
</div>
</div>
</div>

View File

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

View File

@ -35,7 +35,7 @@ declare var UIkit;
<users-tabs tab="personal"></users-tabs>
</div>
<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">
<button class="uk-button uk-button-secondary" [class.uk-disabled]="!hasChanged || loading"
[disabled]="!hasChanged || loading"
@ -56,7 +56,7 @@ declare var UIkit;
<div class="image">
<img [src]="photo"/>
<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>
<div *ngIf="curator.photo || file" #element
uk-dropdown="mode: click; pos: bottom-left; delay-hide: 0; flip: false">
@ -68,11 +68,11 @@ declare var UIkit;
</div>
</div>
<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>
</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>
<div class="uk-width-1-1">
<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 {InputModule} from "../../../openaireLibrary/sharedComponents/input/input.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 {HelpContentService} from "../../../services/help-content.service";
@ -35,7 +33,4 @@ import {HelpContentService} from "../../../services/help-content.service";
})
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