Add ability to hide plugin form fields

This commit is contained in:
Chocobozzz 2021-04-22 14:25:32 +02:00
parent 87e0b71d36
commit 0f31933406
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
7 changed files with 35 additions and 18 deletions

View File

@ -3,7 +3,6 @@ import { PrimeNGConfig } from 'primeng/api'
@Injectable()
export class I18nPrimengCalendarService {
private readonly calendarLocale: any = {}
constructor (private config: PrimeNGConfig) {
this.config.setTranslation({
@ -73,10 +72,6 @@ export class I18nPrimengCalendarService {
})
}
getCalendarLocale () {
return this.calendarLocale
}
getTimezone () {
const gmt = new Date().toString().match(/([A-Z]+[\+-][0-9]+)/)[1]
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone

View File

@ -333,7 +333,7 @@
<div class="row plugin-settings">
<div class="col-md-12 col-xl-8">
<div *ngFor="let pluginSetting of pluginFields" class="form-group">
<div *ngFor="let pluginSetting of pluginFields" class="form-group" [hidden]="isPluginFieldHidden(pluginSetting)">
<my-dynamic-form-field [form]="pluginDataFormGroup" [formErrors]="formErrors" [setting]="pluginSetting.commonOptions"></my-dynamic-form-field>
</div>
</div>

View File

@ -2,7 +2,7 @@ import { forkJoin } from 'rxjs'
import { map } from 'rxjs/operators'
import { SelectChannelItem } from 'src/types/select-options-item.model'
import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
import { FormArray, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms'
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms'
import { HooksService, PluginService, ServerService } from '@app/core'
import { removeElementFromArray } from '@app/helpers'
import {
@ -21,13 +21,17 @@ import {
import { FormReactiveValidationMessages, FormValidatorService } from '@app/shared/shared-forms'
import { InstanceService } from '@app/shared/shared-instance'
import { VideoCaptionEdit, VideoEdit, VideoService } from '@app/shared/shared-main'
import { LiveVideo, ServerConfig, VideoConstant, VideoPrivacy } from '@shared/models'
import { LiveVideo, ServerConfig, VideoConstant, VideoDetails, VideoPrivacy } from '@shared/models'
import { RegisterClientFormFieldOptions, RegisterClientVideoFieldOptions } from '@shared/models/plugins/register-client-form-field.model'
import { I18nPrimengCalendarService } from './i18n-primeng-calendar.service'
import { VideoCaptionAddModalComponent } from './video-caption-add-modal.component'
import { VideoEditType } from './video-edit.type'
type VideoLanguages = VideoConstant<string> & { group?: string }
type PluginField = {
commonOptions: RegisterClientFormFieldOptions
videoFormOptions: RegisterClientVideoFieldOptions
}
@Component({
selector: 'my-video-edit',
@ -38,9 +42,14 @@ export class VideoEditComponent implements OnInit, OnDestroy {
@Input() form: FormGroup
@Input() formErrors: { [ id: string ]: string } = {}
@Input() validationMessages: FormReactiveValidationMessages = {}
@Input() videoToUpdate: VideoDetails
@Input() userVideoChannels: SelectChannelItem[] = []
@Input() schedulePublicationPossible = true
@Input() videoCaptions: (VideoCaptionEdit & { captionPath?: string })[] = []
@Input() waitTranscodingEnabled = true
@Input() type: VideoEditType
@Input() liveVideo: LiveVideo
@ -57,9 +66,6 @@ export class VideoEditComponent implements OnInit, OnDestroy {
videoLicences: VideoConstant<number>[] = []
videoLanguages: VideoLanguages[] = []
tagValidators: ValidatorFn[]
tagValidatorsMessages: { [ name: string ]: string }
pluginDataFormGroup: FormGroup
schedulePublicationEnabled = false
@ -73,10 +79,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
serverConfig: ServerConfig
pluginFields: {
commonOptions: RegisterClientFormFieldOptions
videoFormOptions: RegisterClientVideoFieldOptions
}[] = []
pluginFields: PluginField[] = []
private schedulerInterval: any
private firstPatchDone = false
@ -92,7 +95,6 @@ export class VideoEditComponent implements OnInit, OnDestroy {
private ngZone: NgZone,
private hooks: HooksService
) {
this.calendarLocale = this.i18nPrimengCalendarService.getCalendarLocale()
this.calendarTimezone = this.i18nPrimengCalendarService.getTimezone()
this.calendarDateFormat = this.i18nPrimengCalendarService.getDateFormat()
}
@ -251,6 +253,16 @@ export class VideoEditComponent implements OnInit, OnDestroy {
return this.form.value['permanentLive'] === true
}
isPluginFieldHidden (pluginField: PluginField) {
if (typeof pluginField.commonOptions.hidden !== 'function') return false
return pluginField.commonOptions.hidden({
formValues: this.form.value,
videoToUpdate: this.videoToUpdate,
liveVideo: this.liveVideo
})
}
private sortVideoCaptions () {
this.videoCaptions.sort((v1, v2) => {
if (v1.language.label < v2.language.label) return -1

View File

@ -11,7 +11,7 @@
[validationMessages]="validationMessages" [userVideoChannels]="userVideoChannels"
[videoCaptions]="videoCaptions" [waitTranscodingEnabled]="isWaitTranscodingEnabled()"
type="update" (pluginFieldsAdded)="hydratePluginFieldsFromVideo()"
[liveVideo]="liveVideo"
[liveVideo]="liveVideo" [videoToUpdate]="videoDetails"
></my-video-edit>
<div class="submit-container">

View File

@ -777,6 +777,7 @@ export class PeerTubeEmbed {
getSettings: unimplemented,
isLoggedIn: unimplemented,
getAuthHeader: unimplemented,
notifier: {
info: unimplemented,

View File

@ -13,6 +13,9 @@ export type RegisterClientFormFieldOptions = {
// Default setting value
default?: string | boolean
// Not supported by plugin setting registration, use registerSettingsScript instead
hidden?: (options: any) => boolean
}
export interface RegisterClientVideoFieldOptions {

View File

@ -623,7 +623,13 @@ async function register ({ registerVideoField, peertubeHelpers }) {
label: 'My added field',
descriptionHTML: 'Optional description',
type: 'input-textarea',
default: ''
default: '',
// Optional, to hide a field depending on the current form state
// liveVideo is in the options object when the user is creating/updating a live
// videoToUpdate is in the options object when the user is updating a video
hidden: ({ formValues, videoToUpdate, liveVideo }) => {
return formValues.pluginData['other-field'] === 'toto'
}
}
for (const type of [ 'upload', 'import-url', 'import-torrent', 'update', 'go-live' ]) {