From 51548b31815c6f96f314ae96588a9adca150519d Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 15 Nov 2017 10:10:41 +0100 Subject: Add follow tabs Following Follow Followers --- .../followers-list/followers-list.component.html | 16 +++ .../followers-list/followers-list.component.scss | 3 + .../followers-list/followers-list.component.ts | 41 +++++++ .../src/app/+admin/follows/followers-list/index.ts | 1 + .../following-add/following-add.component.html | 35 ++++++ .../following-add/following-add.component.scss | 7 ++ .../following-add/following-add.component.ts | 121 +++++++++++++++++++++ .../src/app/+admin/follows/following-add/index.ts | 1 + .../following-list/following-list.component.html | 16 +++ .../following-list/following-list.component.ts | 40 +++++++ .../src/app/+admin/follows/following-list/index.ts | 1 + .../src/app/+admin/follows/follows.component.html | 11 ++ .../src/app/+admin/follows/follows.component.scss | 21 ++++ client/src/app/+admin/follows/follows.component.ts | 43 ++++++++ client/src/app/+admin/follows/follows.routes.ts | 53 +++++++++ client/src/app/+admin/follows/index.ts | 6 + .../app/+admin/follows/shared/follow.service.ts | 49 +++++++++ client/src/app/+admin/follows/shared/index.ts | 1 + 18 files changed, 466 insertions(+) create mode 100644 client/src/app/+admin/follows/followers-list/followers-list.component.html create mode 100644 client/src/app/+admin/follows/followers-list/followers-list.component.scss create mode 100644 client/src/app/+admin/follows/followers-list/followers-list.component.ts create mode 100644 client/src/app/+admin/follows/followers-list/index.ts create mode 100644 client/src/app/+admin/follows/following-add/following-add.component.html create mode 100644 client/src/app/+admin/follows/following-add/following-add.component.scss create mode 100644 client/src/app/+admin/follows/following-add/following-add.component.ts create mode 100644 client/src/app/+admin/follows/following-add/index.ts create mode 100644 client/src/app/+admin/follows/following-list/following-list.component.html create mode 100644 client/src/app/+admin/follows/following-list/following-list.component.ts create mode 100644 client/src/app/+admin/follows/following-list/index.ts create mode 100644 client/src/app/+admin/follows/follows.component.html create mode 100644 client/src/app/+admin/follows/follows.component.scss create mode 100644 client/src/app/+admin/follows/follows.component.ts create mode 100644 client/src/app/+admin/follows/follows.routes.ts create mode 100644 client/src/app/+admin/follows/index.ts create mode 100644 client/src/app/+admin/follows/shared/follow.service.ts create mode 100644 client/src/app/+admin/follows/shared/index.ts (limited to 'client/src/app/+admin/follows') diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html new file mode 100644 index 000000000..24d75d2b3 --- /dev/null +++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html @@ -0,0 +1,16 @@ +
+
+

Followers list

+ + + + + + + + +
+
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.scss b/client/src/app/+admin/follows/followers-list/followers-list.component.scss new file mode 100644 index 000000000..0a0f621c6 --- /dev/null +++ b/client/src/app/+admin/follows/followers-list/followers-list.component.scss @@ -0,0 +1,3 @@ +.btn { + margin-top: 10px; +} diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.ts b/client/src/app/+admin/follows/followers-list/followers-list.component.ts new file mode 100644 index 000000000..208a0c648 --- /dev/null +++ b/client/src/app/+admin/follows/followers-list/followers-list.component.ts @@ -0,0 +1,41 @@ +import { Component, OnInit } from '@angular/core' + +import { NotificationsService } from 'angular2-notifications' +import { SortMeta } from 'primeng/primeng' + +import { ConfirmService } from '../../../core' +import { RestTable, RestPagination } from '../../../shared' +import { Pod } from '../../../../../../shared' +import { FollowService } from '../shared' + +@Component({ + selector: 'my-followers-list', + templateUrl: './followers-list.component.html', + styleUrls: [ './followers-list.component.scss' ] +}) +export class FollowersListComponent extends RestTable { + followers: Pod[] = [] + totalRecords = 0 + rowsPerPage = 10 + sort: SortMeta = { field: 'createdAt', order: 1 } + pagination: RestPagination = { count: this.rowsPerPage, start: 0 } + + constructor ( + private notificationsService: NotificationsService, + private followService: FollowService + ) { + super() + } + + protected loadData () { + this.followService.getFollowers(this.pagination, this.sort) + .subscribe( + resultList => { + this.followers = resultList.data + this.totalRecords = resultList.total + }, + + err => this.notificationsService.error('Error', err.message) + ) + } +} diff --git a/client/src/app/+admin/follows/followers-list/index.ts b/client/src/app/+admin/follows/followers-list/index.ts new file mode 100644 index 000000000..15390cfbe --- /dev/null +++ b/client/src/app/+admin/follows/followers-list/index.ts @@ -0,0 +1 @@ +export * from './followers-list.component' diff --git a/client/src/app/+admin/follows/following-add/following-add.component.html b/client/src/app/+admin/follows/following-add/following-add.component.html new file mode 100644 index 000000000..111f6a8de --- /dev/null +++ b/client/src/app/+admin/follows/following-add/following-add.component.html @@ -0,0 +1,35 @@ +
+
+ +

Add following

+ +
{{ error }}
+ +
+
+ + +
+ + + + + +
+ +
+ It should be a valid host. +
+
+ +
+ It seems that you are not on a HTTPS pod. Your webserver need to have TLS activated in order to follow servers. +
+ + +
+
+
diff --git a/client/src/app/+admin/follows/following-add/following-add.component.scss b/client/src/app/+admin/follows/following-add/following-add.component.scss new file mode 100644 index 000000000..5fde51636 --- /dev/null +++ b/client/src/app/+admin/follows/following-add/following-add.component.scss @@ -0,0 +1,7 @@ +table { + margin-bottom: 40px; +} + +.input-group-btn button { + width: 35px; +} diff --git a/client/src/app/+admin/follows/following-add/following-add.component.ts b/client/src/app/+admin/follows/following-add/following-add.component.ts new file mode 100644 index 000000000..d95d6afa9 --- /dev/null +++ b/client/src/app/+admin/follows/following-add/following-add.component.ts @@ -0,0 +1,121 @@ +import { Component, OnInit } from '@angular/core' +import { FormControl, FormGroup } from '@angular/forms' +import { Router } from '@angular/router' + +import { NotificationsService } from 'angular2-notifications' + +import { ConfirmService } from '../../../core' +import { validateHost } from '../../../shared' +import { FollowService } from '../shared' + +@Component({ + selector: 'my-following-add', + templateUrl: './following-add.component.html', + styleUrls: [ './following-add.component.scss' ] +}) +export class FollowingAddComponent implements OnInit { + form: FormGroup + hosts: string[] = [ ] + error: string = null + + constructor ( + private router: Router, + private notificationsService: NotificationsService, + private confirmService: ConfirmService, + private followService: FollowService + ) {} + + ngOnInit () { + this.form = new FormGroup({}) + this.addField() + } + + addField () { + this.form.addControl(`host-${this.hosts.length}`, new FormControl('', [ validateHost ])) + this.hosts.push('') + } + + canMakeFriends () { + return window.location.protocol === 'https:' + } + + customTrackBy (index: number, obj: any): any { + return index + } + + displayAddField (index: number) { + return index === (this.hosts.length - 1) + } + + displayRemoveField (index: number) { + return (index !== 0 || this.hosts.length > 1) && index !== (this.hosts.length - 1) + } + + isFormValid () { + // Do not check the last input + for (let i = 0; i < this.hosts.length - 1; i++) { + if (!this.form.controls[`host-${i}`].valid) return false + } + + const lastIndex = this.hosts.length - 1 + // If the last input (which is not the first) is empty, it's ok + if (this.hosts[lastIndex] === '' && lastIndex !== 0) { + return true + } else { + return this.form.controls[`host-${lastIndex}`].valid + } + } + + removeField (index: number) { + // Remove the last control + this.form.removeControl(`host-${this.hosts.length - 1}`) + this.hosts.splice(index, 1) + } + + addFollowing () { + this.error = '' + + const notEmptyHosts = this.getNotEmptyHosts() + if (notEmptyHosts.length === 0) { + this.error = 'You need to specify at least 1 host.' + return + } + + if (!this.isHostsUnique(notEmptyHosts)) { + this.error = 'Hosts need to be unique.' + return + } + + const confirmMessage = 'Are you sure to make friends with:
- ' + notEmptyHosts.join('
- ') + this.confirmService.confirm(confirmMessage, 'Follow new server(s)').subscribe( + res => { + if (res === false) return + + this.followService.follow(notEmptyHosts).subscribe( + status => { + this.notificationsService.success('Success', 'Follow request(s) sent!') + // Wait requests between pods + setTimeout(() => this.router.navigate([ '/admin/friends/list' ]), 1000) + }, + + err => this.notificationsService.error('Error', err.message) + ) + } + ) + } + + private getNotEmptyHosts () { + const notEmptyHosts = [] + + Object.keys(this.form.value).forEach((hostKey) => { + const host = this.form.value[hostKey] + if (host !== '') notEmptyHosts.push(host) + }) + + return notEmptyHosts + } + + private isHostsUnique (hosts: string[]) { + return hosts.every(host => hosts.indexOf(host) === hosts.lastIndexOf(host)) + } +} diff --git a/client/src/app/+admin/follows/following-add/index.ts b/client/src/app/+admin/follows/following-add/index.ts new file mode 100644 index 000000000..1b1897ffa --- /dev/null +++ b/client/src/app/+admin/follows/following-add/index.ts @@ -0,0 +1 @@ +export * from './following-add.component' diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html new file mode 100644 index 000000000..fbcebfaa7 --- /dev/null +++ b/client/src/app/+admin/follows/following-list/following-list.component.html @@ -0,0 +1,16 @@ +
+
+

Following list

+ + + + + + + + +
+
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.ts b/client/src/app/+admin/follows/following-list/following-list.component.ts new file mode 100644 index 000000000..7d2c5084b --- /dev/null +++ b/client/src/app/+admin/follows/following-list/following-list.component.ts @@ -0,0 +1,40 @@ +import { Component, OnInit } from '@angular/core' + +import { NotificationsService } from 'angular2-notifications' +import { SortMeta } from 'primeng/primeng' + +import { ConfirmService } from '../../../core' +import { RestTable, RestPagination } from '../../../shared' +import { Pod } from '../../../../../../shared' +import { FollowService } from '../shared' + +@Component({ + selector: 'my-followers-list', + templateUrl: './following-list.component.html' +}) +export class FollowingListComponent extends RestTable { + following: Pod[] = [] + totalRecords = 0 + rowsPerPage = 10 + sort: SortMeta = { field: 'createdAt', order: 1 } + pagination: RestPagination = { count: this.rowsPerPage, start: 0 } + + constructor ( + private notificationsService: NotificationsService, + private followService: FollowService + ) { + super() + } + + protected loadData () { + this.followService.getFollowing(this.pagination, this.sort) + .subscribe( + resultList => { + this.following = resultList.data + this.totalRecords = resultList.total + }, + + err => this.notificationsService.error('Error', err.message) + ) + } +} diff --git a/client/src/app/+admin/follows/following-list/index.ts b/client/src/app/+admin/follows/following-list/index.ts new file mode 100644 index 000000000..a70d46a7e --- /dev/null +++ b/client/src/app/+admin/follows/following-list/index.ts @@ -0,0 +1 @@ +export * from './following-list.component' diff --git a/client/src/app/+admin/follows/follows.component.html b/client/src/app/+admin/follows/follows.component.html new file mode 100644 index 000000000..b67bc9736 --- /dev/null +++ b/client/src/app/+admin/follows/follows.component.html @@ -0,0 +1,11 @@ +
+ + + + {{ link.title }} + + + +
+ + diff --git a/client/src/app/+admin/follows/follows.component.scss b/client/src/app/+admin/follows/follows.component.scss new file mode 100644 index 000000000..d8ab41975 --- /dev/null +++ b/client/src/app/+admin/follows/follows.component.scss @@ -0,0 +1,21 @@ +.follows-menu { + margin-top: 20px; +} + +tabset /deep/ { + .nav-link { + padding: 0; + } + + .tab-link { + display: block; + text-align: center; + height: 40px; + width: 120px; + line-height: 40px; + + &:hover, &:active, &:focus { + text-decoration: none !important; + } + } +} diff --git a/client/src/app/+admin/follows/follows.component.ts b/client/src/app/+admin/follows/follows.component.ts new file mode 100644 index 000000000..97422a41b --- /dev/null +++ b/client/src/app/+admin/follows/follows.component.ts @@ -0,0 +1,43 @@ +import { AfterViewInit, Component, ViewChild } from '@angular/core' +import { TabsetComponent } from 'ngx-bootstrap/tabs' + +@Component({ + templateUrl: './follows.component.html', + styleUrls: [ './follows.component.scss' ] +}) +export class FollowsComponent implements AfterViewInit { + @ViewChild('followsMenuTabs') followsMenuTabs: TabsetComponent + + links = [ + { + path: 'following-list', + title: 'Following' + }, + { + path: 'following-add', + title: 'Follow' + }, + { + path: 'followers-list', + title: 'Followers' + } + ] + + ngAfterViewInit () { + // Avoid issue with change detector + setTimeout(() => this.updateActiveTab()) + } + + private updateActiveTab () { + const url = window.location.pathname + + for (let i = 0; i < this.links.length; i++) { + const path = this.links[i].path + + if (url.endsWith(path) === true) { + this.followsMenuTabs.tabs[i].active = true + return + } + } + } +} diff --git a/client/src/app/+admin/follows/follows.routes.ts b/client/src/app/+admin/follows/follows.routes.ts new file mode 100644 index 000000000..b7d44f75b --- /dev/null +++ b/client/src/app/+admin/follows/follows.routes.ts @@ -0,0 +1,53 @@ +import { Routes } from '@angular/router' + +import { UserRightGuard } from '../../core' +import { FollowsComponent } from './follows.component' +import { FollowingAddComponent } from './following-add' +import { FollowersListComponent } from './followers-list' +import { UserRight } from '../../../../../shared' +import { FollowingListComponent } from './following-list/following-list.component' + +export const FollowsRoutes: Routes = [ + { + path: 'follows', + component: FollowsComponent, + canActivate: [ UserRightGuard ], + data: { + userRight: UserRight.MANAGE_APPLICATION_FOLLOW + }, + children: [ + { + path: '', + redirectTo: 'following-list', + pathMatch: 'full' + }, + { + path: 'following-list', + component: FollowingListComponent, + data: { + meta: { + title: 'Following list' + } + } + }, + { + path: 'followers-list', + component: FollowersListComponent, + data: { + meta: { + title: 'Followers list' + } + } + }, + { + path: 'following-add', + component: FollowingAddComponent, + data: { + meta: { + title: 'Add follow' + } + } + } + ] + } +] diff --git a/client/src/app/+admin/follows/index.ts b/client/src/app/+admin/follows/index.ts new file mode 100644 index 000000000..7849a06e7 --- /dev/null +++ b/client/src/app/+admin/follows/index.ts @@ -0,0 +1,6 @@ +export * from './following-add' +export * from './followers-list' +export * from './following-list' +export * from './shared' +export * from './follows.component' +export * from './follows.routes' diff --git a/client/src/app/+admin/follows/shared/follow.service.ts b/client/src/app/+admin/follows/shared/follow.service.ts new file mode 100644 index 000000000..622c33cea --- /dev/null +++ b/client/src/app/+admin/follows/shared/follow.service.ts @@ -0,0 +1,49 @@ +import { Injectable } from '@angular/core' +import { HttpClient, HttpParams } from '@angular/common/http' +import { Observable } from 'rxjs/Observable' +import 'rxjs/add/operator/catch' +import 'rxjs/add/operator/map' + +import { SortMeta } from 'primeng/primeng' + +import { RestExtractor, RestPagination, RestService } from '../../../shared' +import { Pod, ResultList } from '../../../../../../shared' + +@Injectable() +export class FollowService { + private static BASE_APPLICATION_URL = API_URL + '/api/v1/application' + + constructor ( + private authHttp: HttpClient, + private restService: RestService, + private restExtractor: RestExtractor + ) {} + + getFollowing (pagination: RestPagination, sort: SortMeta): Observable> { + let params = new HttpParams() + params = this.restService.addRestGetParams(params, pagination, sort) + + return this.authHttp.get>(FollowService.BASE_APPLICATION_URL + '/following', { params }) + .map(res => this.restExtractor.convertResultListDateToHuman(res)) + .catch(res => this.restExtractor.handleError(res)) + } + + getFollowers (pagination: RestPagination, sort: SortMeta): Observable> { + let params = new HttpParams() + params = this.restService.addRestGetParams(params, pagination, sort) + + return this.authHttp.get>(FollowService.BASE_APPLICATION_URL + '/followers', { params }) + .map(res => this.restExtractor.convertResultListDateToHuman(res)) + .catch(res => this.restExtractor.handleError(res)) + } + + follow (notEmptyHosts: String[]) { + const body = { + hosts: notEmptyHosts + } + + return this.authHttp.post(FollowService.BASE_APPLICATION_URL + '/follow', body) + .map(this.restExtractor.extractDataBool) + .catch(res => this.restExtractor.handleError(res)) + } +} diff --git a/client/src/app/+admin/follows/shared/index.ts b/client/src/app/+admin/follows/shared/index.ts new file mode 100644 index 000000000..78d456def --- /dev/null +++ b/client/src/app/+admin/follows/shared/index.ts @@ -0,0 +1 @@ +export * from './follow.service' -- cgit v1.2.3