Design follow admin page
This commit is contained in:
Chocobozzz
parent
cd83ea1b90
commit
e600e1fea2
|
|
@ -1,5 +1,3 @@
|
|||
<h3>Followers list</h3>
|
||||
|
||||
<p-dataTable
|
||||
[value]="followers" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
|
||||
sortField="createdAt" (onLazyLoad)="loadLazy($event)"
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
.btn {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
|
@ -1,30 +1,22 @@
|
|||
<h3>Add following</h3>
|
||||
|
||||
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
|
||||
|
||||
<form (ngSubmit)="addFollowing()" [formGroup]="form">
|
||||
<div class="form-group" *ngFor="let host of hosts; let id = index; trackBy:customTrackBy">
|
||||
<label [for]="'host-' + id">Host (so without "http://")</label>
|
||||
<form (ngSubmit)="addFollowing()">
|
||||
<div class="form-group">
|
||||
<label for="hosts">1 host (without "http://") per line</label>
|
||||
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="text" class="form-control" placeholder="example.com"
|
||||
[id]="'host-' + id" [formControlName]="'host-' + id"
|
||||
/>
|
||||
<span class="input-group-btn">
|
||||
<button *ngIf="displayAddField(id)" (click)="addField()" class="btn btn-default" type="button">+</button>
|
||||
<button *ngIf="displayRemoveField(id)" (click)="removeField(id)" class="btn btn-default" type="button">-</button>
|
||||
</span>
|
||||
</div>
|
||||
<textarea
|
||||
type="text" class="form-control" placeholder="example.com" id="hosts" name="hosts"
|
||||
[(ngModel)]="hostsString" (ngModelChange)="onHostsChanged()" [ngClass]="{ 'input-error': hostsError }"
|
||||
></textarea>
|
||||
|
||||
<div [hidden]="form.controls['host-' + id].valid || form.controls['host-' + id].pristine" class="alert alert-warning">
|
||||
It should be a valid host.
|
||||
<div *ngIf="hostsError" class="form-error">
|
||||
{{ hostsError }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="canMakeFriends() === false" class="alert alert-warning">
|
||||
It seems that you are not on a HTTPS server. Your webserver need to have TLS activated in order to follow servers.
|
||||
<div *ngIf="httpEnabled() === false" class="alert alert-warning">
|
||||
It seems that you are not on a HTTPS server. Your webserver needs to have TLS activated in order to follow servers.
|
||||
</div>
|
||||
|
||||
<input type="submit" value="Add following" class="btn btn-default" [disabled]="!isFormValid()">
|
||||
<input type="submit" value="Add following" [disabled]="hostsError || !hostsString" class="btn btn-default">
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
table {
|
||||
margin-bottom: 40px;
|
||||
textarea {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.input-group-btn button {
|
||||
width: 35px;
|
||||
input[type=submit] {
|
||||
@include peertube-button;
|
||||
@include orange-button;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
import { Component, OnInit } from '@angular/core'
|
||||
import { FormControl, FormGroup } from '@angular/forms'
|
||||
import { Component } from '@angular/core'
|
||||
import { Router } from '@angular/router'
|
||||
|
||||
import { NotificationsService } from 'angular2-notifications'
|
||||
|
||||
import { ConfirmService } from '../../../core'
|
||||
import { validateHost } from '../../../shared'
|
||||
import { FollowService } from '../shared'
|
||||
|
|
@ -13,9 +10,9 @@ import { FollowService } from '../shared'
|
|||
templateUrl: './following-add.component.html',
|
||||
styleUrls: [ './following-add.component.scss' ]
|
||||
})
|
||||
export class FollowingAddComponent implements OnInit {
|
||||
form: FormGroup
|
||||
hosts: string[] = [ ]
|
||||
export class FollowingAddComponent {
|
||||
hostsString = ''
|
||||
hostsError: string = null
|
||||
error: string = null
|
||||
|
||||
constructor (
|
||||
|
|
@ -25,76 +22,50 @@ export class FollowingAddComponent implements OnInit {
|
|||
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 () {
|
||||
httpEnabled () {
|
||||
return window.location.protocol === 'https:'
|
||||
}
|
||||
|
||||
customTrackBy (index: number, obj: any): any {
|
||||
return index
|
||||
}
|
||||
onHostsChanged () {
|
||||
this.hostsError = null
|
||||
|
||||
displayAddField (index: number) {
|
||||
return index === (this.hosts.length - 1)
|
||||
}
|
||||
const newHostsErrors = []
|
||||
const hosts = this.getNotEmptyHosts()
|
||||
|
||||
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
|
||||
for (const host of hosts) {
|
||||
if (validateHost(host) === false) {
|
||||
newHostsErrors.push(`${host} is not valid`)
|
||||
}
|
||||
}
|
||||
|
||||
removeField (index: number) {
|
||||
// Remove the last control
|
||||
this.form.removeControl(`host-${this.hosts.length - 1}`)
|
||||
this.hosts.splice(index, 1)
|
||||
if (newHostsErrors.length !== 0) {
|
||||
this.hostsError = newHostsErrors.join('. ')
|
||||
}
|
||||
}
|
||||
|
||||
addFollowing () {
|
||||
this.error = ''
|
||||
|
||||
const notEmptyHosts = this.getNotEmptyHosts()
|
||||
if (notEmptyHosts.length === 0) {
|
||||
this.error = 'You need to specify at least 1 host.'
|
||||
return
|
||||
const hosts = this.getNotEmptyHosts()
|
||||
if (hosts.length === 0) {
|
||||
this.error = 'You need to specify hosts to follow.'
|
||||
}
|
||||
|
||||
if (!this.isHostsUnique(notEmptyHosts)) {
|
||||
if (!this.isHostsUnique(hosts)) {
|
||||
this.error = 'Hosts need to be unique.'
|
||||
return
|
||||
}
|
||||
|
||||
const confirmMessage = 'Are you sure to make friends with:<br /> - ' + notEmptyHosts.join('<br /> - ')
|
||||
const confirmMessage = 'If you confirm, you will send a follow request to:<br /> - ' + hosts.join('<br /> - ')
|
||||
this.confirmService.confirm(confirmMessage, 'Follow new server(s)').subscribe(
|
||||
res => {
|
||||
if (res === false) return
|
||||
|
||||
this.followService.follow(notEmptyHosts).subscribe(
|
||||
this.followService.follow(hosts).subscribe(
|
||||
status => {
|
||||
this.notificationsService.success('Success', 'Follow request(s) sent!')
|
||||
this.router.navigate([ '/admin/follows/following-list' ])
|
||||
|
||||
setTimeout(() => this.router.navigate([ '/admin/follows/following-list' ]), 500)
|
||||
},
|
||||
|
||||
err => this.notificationsService.error('Error', err.message)
|
||||
|
|
@ -103,18 +74,15 @@ export class FollowingAddComponent implements OnInit {
|
|||
)
|
||||
}
|
||||
|
||||
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))
|
||||
}
|
||||
|
||||
private getNotEmptyHosts () {
|
||||
const hosts = this.hostsString
|
||||
.split('\n')
|
||||
.filter(host => host && host.length !== 0) // Eject empty hosts
|
||||
|
||||
return hosts
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
<h3>Following list</h3>
|
||||
|
||||
<p-dataTable
|
||||
[value]="following" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
|
||||
sortField="createdAt" (onLazyLoad)="loadLazy($event)"
|
||||
|
|
@ -10,7 +8,7 @@
|
|||
<p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
|
||||
<p-column header="Unfollow" styleClass="action-cell">
|
||||
<ng-template pTemplate="body" let-following="rowData">
|
||||
<span (click)="removeFollowing(following)" class="glyphicon glyphicon-remove glyphicon-black" title="Unfollow"></span>
|
||||
<my-delete-button (click)="removeFollowing(following)"></my-delete-button>
|
||||
</ng-template>
|
||||
</p-column>
|
||||
</p-dataTable>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<div class="follows-menu">
|
||||
<div class="admin-sub-header">
|
||||
<div class="admin-sub-title">Manage follows</div>
|
||||
|
||||
<tabset #followsMenuTabs>
|
||||
<tab *ngFor="let link of links">
|
||||
<ng-template tabHeading>
|
||||
|
|
@ -8,4 +10,6 @@
|
|||
</tabset>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
.follows-menu {
|
||||
margin-top: 20px;
|
||||
.admin-sub-title {
|
||||
flex-grow: 0;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ export class FollowsComponent implements OnInit, AfterViewInit {
|
|||
for (let i = 0; i < this.links.length; i++) {
|
||||
const path = this.links[i].path
|
||||
|
||||
if (url.endsWith(path) === true) {
|
||||
if (url.endsWith(path) === true && this.followsMenuTabs.tabs[i]) {
|
||||
this.followsMenuTabs.tabs[i].active = true
|
||||
return
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,5 +64,5 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<input type="submit" value="{{ getFormButtonTitle() }}" class="btn btn-default" [disabled]="!form.valid">
|
||||
<input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,8 @@
|
|||
import { FormControl } from '@angular/forms'
|
||||
|
||||
export function validateHost (c: FormControl) {
|
||||
export function validateHost (value: string) {
|
||||
// Thanks to http://stackoverflow.com/a/106223
|
||||
const HOST_REGEXP = new RegExp(
|
||||
'^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$'
|
||||
)
|
||||
|
||||
return HOST_REGEXP.test(c.value) ? null : {
|
||||
validateHost: {
|
||||
valid: false
|
||||
}
|
||||
}
|
||||
return HOST_REGEXP.test(value)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@
|
|||
text-align: center;
|
||||
padding: 0 17px 0 13px;
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
@mixin peertube-button-link {
|
||||
|
|
|
|||
|
|
@ -269,21 +269,25 @@ p-datatable {
|
|||
}
|
||||
|
||||
.nav {
|
||||
margin-top: 10px;
|
||||
font-size: 16px !important;
|
||||
border: none !important;
|
||||
|
||||
.nav-item .nav-link {
|
||||
height: 30px !important;
|
||||
margin-right: 30px;
|
||||
padding: 0 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
border-radius: 3px;
|
||||
border: none !important;
|
||||
|
||||
.tab-link {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
height: 30px !important;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
&, & a {
|
||||
color: #000 !important;
|
||||
@include disable-default-a-behaviour;
|
||||
}
|
||||
|
||||
&.active, &:hover {
|
||||
|
|
|
|||
Loading…
Reference in New Issue