Verified Commit 770cf553 authored by Chocobozzz's avatar Chocobozzz
Browse files

Client styling

parent 75671b58
......@@ -10,8 +10,8 @@
</div>
<p-table
*ngIf="syncEnabled()"
[value]="channelsSync" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
*ngIf="syncEnabled()" [value]="channelSyncs" [lazy]="true"
[paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
[sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
[showCurrentPageReport]="true" i18n-currentPageReportTemplate
currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} synchronizations"
......@@ -27,6 +27,7 @@
</div>
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th style="width: 10%"><my-global-icon iconName="columns"></my-global-icon></th>
......@@ -37,6 +38,7 @@
<th style="width: 10%" i18n pSortableColumn="lastSyncAt">Last synchronization at <p-sortIcon field="lastSyncAt"></p-sortIcon></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-expanded="expanded" let-videoChannelSync>
<tr>
<td class="action-cell">
......@@ -45,31 +47,35 @@
[actions]="videoChannelSyncActions" [entry]="videoChannelSync"
></my-action-dropdown>
</td>
<td>
<a [href]="videoChannelSync.externalChannelUrl" target="_blank" rel="noopener noreferrer">{{ videoChannelSync.externalChannelUrl }}</a>
</td>
<td>
<div class="actor">
<my-actor-avatar
class="channel"
[actor]="videoChannelSync.channel" actorType="channel"
[internalHref]="[ '/c', videoChannelSync.channel.name ]"
size="25"
></my-actor-avatar>
<div class="actor-info">
<a [routerLink]="[ '/c', videoChannelSync.channel.name ]" class="actor-names" i18n-title title="Channel page">
<div class="actor-display-name">{{ videoChannelSync.channel.displayName }}</div>
<div class="actor-name">{{ videoChannelSync.channel.name }}</div>
</a>
</div>
<div class="actor">
<my-actor-avatar
class="channel"
[actor]="videoChannelSync.channel" actorType="channel"
[internalHref]="[ '/c', videoChannelSync.channel.name ]"
size="25"
></my-actor-avatar>
<div class="actor-info">
<a [routerLink]="[ '/c', videoChannelSync.channel.name ]" class="actor-names" i18n-title title="Channel page">
<div class="actor-display-name">{{ videoChannelSync.channel.displayName }}</div>
<div class="actor-name">{{ videoChannelSync.channel.name }}</div>
</a>
</div>
</div>
<!-- <a [href]="getChannelUrl(videoChannelSync.channel.name)" target="_blank" rel="noopener noreferrer">{{ videoChannelSync.channel.displayName }}</a> -->
</td>
<td>
<span [ngClass]="getSyncStateClass(videoChannelSync.state.id)">
{{ videoChannelSync.state.label }}
</span>
</td>
<td>{{ videoChannelSync.createdAt | date: 'short' }}</td>
<td>{{ videoChannelSync.lastSyncAt | date: 'short' }}</td>
</tr>
......
......@@ -11,10 +11,11 @@ import { mergeMap } from 'rxjs'
styleUrls: [ './my-video-channel-syncs.component.scss' ]
})
export class MyVideoChannelSyncsComponent extends RestTable implements OnInit {
error: string
error: string = undefined
channelsSync: VideoChannelSync[] = []
channelSyncs: VideoChannelSync[] = []
totalRecords = 0
videoChannelSyncActions: DropdownAction<VideoChannelSync>[][] = []
sort: SortMeta = { field: 'createdAt', order: 1 }
pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
......@@ -38,9 +39,10 @@ export class MyVideoChannelSyncsComponent extends RestTable implements OnInit {
super()
}
ngOnInit (): void {
ngOnInit () {
this.serverConfig = this.serverService.getHTMLConfig()
this.initialize()
this.videoChannelSyncActions = [
[
{
......@@ -58,8 +60,9 @@ export class MyVideoChannelSyncsComponent extends RestTable implements OnInit {
]
}
protected reloadData (): void {
protected reloadData () {
this.error = undefined
this.authService.userInformationLoaded
.pipe(mergeMap(() => {
const user = this.authService.getUser()
......@@ -69,14 +72,14 @@ export class MyVideoChannelSyncsComponent extends RestTable implements OnInit {
pagination: this.pagination
})
}))
.subscribe({
next: (res) => {
this.channelsSync = res.data
},
error: err => {
this.error = err.message
}
})
.subscribe({
next: res => {
this.channelSyncs = res.data
},
error: err => {
this.error = err.message
}
})
}
syncEnabled () {
......@@ -90,7 +93,7 @@ export class MyVideoChannelSyncsComponent extends RestTable implements OnInit {
this.notifier.success($localize`Synchronization removed successfully for ${videoChannelSync.channel.displayName}.`)
this.reloadData()
},
error: (err) => {
error: err => {
this.error = err.message
}
})
......@@ -102,7 +105,7 @@ export class MyVideoChannelSyncsComponent extends RestTable implements OnInit {
next: () => {
this.notifier.success($localize`Full synchronization requested successfully for ${videoChannelSync.channel.displayName}.`)
},
error: (err) => {
error: err => {
this.error = err.message
}
})
......
......@@ -3,7 +3,7 @@
<div class="margin-content">
<form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
<div class="row"> <!-- channel grid -->
<div class="row">
<div class="col-12 col-lg-4 col-xl-3">
<div class="video-channel-sync-title" i18n>NEW SYNCHRONIZATION</div>
</div>
......@@ -11,16 +11,19 @@
<div class="col-12 col-lg-8 col-xl-9">
<div class="form-group">
<label i18n for="externalChannelUrl">Remote channel URL</label>
<div class="input-group">
<input
type="text"
id="externalChannelUrl"
i18n-placeholder
placeholder="Example: https://youtube.com/channel/UC_fancy_channel"
formControlName="externalChannelUrl"
[ngClass]="{ 'input-error': formErrors['externalChannelUrl'] }"
class="form-control">
type="text"
id="externalChannelUrl"
i18n-placeholder
placeholder="Example: https://youtube.com/channel/UC_fancy_channel"
formControlName="externalChannelUrl"
[ngClass]="{ 'input-error': formErrors['externalChannelUrl'] }"
class="form-control"
>
</div>
<div *ngIf="formErrors['externalChannelUrl']" class="form-error">
{{ formErrors['externalChannelUrl'] }}
</div>
......@@ -28,12 +31,8 @@
<div class="form-group">
<label i18n for="videoChannel">Video Channel</label>
<my-select-channel
required
[items]="userVideoChannels"
[(ngModel)]="selectedChannelId"
formControlName="videoChannel">
</my-select-channel>
<my-select-channel required [items]="userVideoChannels" formControlName="videoChannel"></my-select-channel>
<div *ngIf="formErrors['videoChannel']" class="form-error">
{{ formErrors['videoChannel'] }}
</div>
......@@ -41,6 +40,7 @@
<div class="form-group">
<label for="existingVideoStrategy" i18n>Options for existing videos on remote channel:</label>
<div class="peertube-radio-container">
<input type="radio" name="existingVideoStrategy" id="import" value="import" formControlName="existingVideoStrategy" required />
<label for="import" i18n>Import all and watch for new publications</label>
......@@ -53,6 +53,7 @@
</div>
</div>
</div>
<div class="row"> <!-- submit placement block -->
<div class="col-md-7 col-xl-5"></div>
<div class="col-md-5 col-xl-5 d-inline-flex">
......
......@@ -2,6 +2,7 @@
@use '_mixins' as *;
$form-base-input-width: 480px;
input[type=text] {
@include peertube-input-text($form-base-input-width);
}
......
import { mergeMap } from 'rxjs'
import { SelectChannelItem } from 'src/types'
import { Component, OnInit } from '@angular/core'
import { Router } from '@angular/router'
import { AuthService, Notifier } from '@app/core'
......@@ -5,9 +7,7 @@ import { listUserChannelsForSelect } from '@app/helpers'
import { VIDEO_CHANNEL_EXTERNAL_URL_VALIDATOR } from '@app/shared/form-validators/video-channel-validators'
import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
import { VideoChannelService, VideoChannelSyncService } from '@app/shared/shared-main'
import { VideoChannelSync, VideoChannelSyncCreate } from '@shared/models/videos'
import { mergeMap } from 'rxjs'
import { SelectChannelItem } from 'src/types'
import { VideoChannelSyncCreate } from '@shared/models/videos'
@Component({
selector: 'my-video-channel-sync-edit',
......@@ -16,7 +16,6 @@ import { SelectChannelItem } from 'src/types'
})
export class VideoChannelSyncEditComponent extends FormReactive implements OnInit {
error: string
selectedChannelId: number
userVideoChannels: SelectChannelItem[] = []
existingVideosStrategy: string
......@@ -37,6 +36,7 @@ export class VideoChannelSyncEditComponent extends FormReactive implements OnIni
videoChannel: null,
existingVideoStrategy: null
})
listUserChannelsForSelect(this.authService)
.subscribe(channels => this.userVideoChannels = channels)
}
......@@ -53,13 +53,13 @@ export class VideoChannelSyncEditComponent extends FormReactive implements OnIni
externalChannelUrl: body.externalChannelUrl,
videoChannelId: body.videoChannel
}
const importExistingVideos = body['existingVideoStrategy'] === 'import'
this.videoChannelSyncService.createSync(videoChannelSyncCreate)
.pipe(mergeMap(({ videoChannelSync: sync }: {videoChannelSync: VideoChannelSync}) => {
this.authService.refreshUserInformation()
this.videoChannelSyncService.createSync(videoChannelSyncCreate)
.pipe(mergeMap(({ videoChannelSync }) => {
return importExistingVideos
? this.videoChannelService.importVideos(sync.channel.name, sync.externalChannelUrl)
? this.videoChannelService.importVideos(videoChannelSync.channel.name, videoChannelSync.externalChannelUrl)
: Promise.resolve(null)
}))
.subscribe({
......
import { SortMeta } from 'primeng/api'
import { catchError, Observable } from 'rxjs'
import { environment } from 'src/environments/environment'
import { HttpClient, HttpParams } from '@angular/common/http'
import { Injectable } from '@angular/core'
import { RestExtractor, RestPagination, RestService } from '@app/core'
import { ResultList } from '@shared/models/common'
import { VideoChannelSync, VideoChannelSyncCreate } from '@shared/models/videos'
import { SortMeta } from 'primeng/api'
import { catchError, Observable } from 'rxjs'
import { environment } from 'src/environments/environment'
import { Account, AccountService } from '../account'
@Injectable({
......@@ -26,19 +26,24 @@ export class VideoChannelSyncService {
account: Account
}): Observable<ResultList<VideoChannelSync>> {
const { pagination, sort, account } = parameters
let params = new HttpParams()
params = this.restService.addRestGetParams(params, pagination, sort)
const url = AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/video-channel-syncs'
return this.authHttp.get<ResultList<VideoChannelSync>>(url, { params })
.pipe(catchError(err => this.restExtractor.handleError(err)))
}
createSync (videoChannelsSyncCreate: VideoChannelSyncCreate) {
return this.authHttp.post(VideoChannelSyncService.BASE_VIDEO_CHANNEL_URL, videoChannelsSyncCreate)
createSync (body: VideoChannelSyncCreate) {
return this.authHttp.post<{ videoChannelSync: VideoChannelSync }>(VideoChannelSyncService.BASE_VIDEO_CHANNEL_URL, body)
.pipe(catchError(err => this.restExtractor.handleError(err)))
}
deleteSync (videoChannelsSyncId: number) {
const url = `${VideoChannelSyncService.BASE_VIDEO_CHANNEL_URL}/${videoChannelsSyncId}`
return this.authHttp.delete(url)
.pipe(catchError(err => this.restExtractor.handleError(err)))
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment