Move video form inside a component

3 files changed, 173 insertions, 2 deletions

diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
new file mode 100644
index 000000000..e087b71a4
--- /dev/null
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -0,0 +1,85 @@
+<div [formGroup]="form">
+  <div class="form-group">
+    <label for="name">Name</label>
+    <input
+      type="text" class="form-control" id="name"
+      formControlName="name"
+    >
+    <div *ngIf="formErrors.name" class="alert alert-danger">
+      {{ formErrors.name }}
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="privacy">Privacy</label>
+    <select class="form-control" id="privacy" formControlName="privacy">
+      <option></option>
+      <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
+    </select>
+
+    <div *ngIf="formErrors.privacy" class="alert alert-danger">
+      {{ formErrors.privacy }}
+    </div>
+  </div>
+
+  <div class="form-group">
+    <input
+      type="checkbox" id="nsfw"
+      formControlName="nsfw"
+    >
+    <label for="nsfw">This video contains mature or explicit content</label>
+  </div>
+
+  <div class="form-group">
+    <label for="category">Category</label>
+    <select class="form-control" id="category" formControlName="category">
+      <option></option>
+      <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
+    </select>
+
+    <div *ngIf="formErrors.category" class="alert alert-danger">
+      {{ formErrors.category }}
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="licence">Licence</label>
+    <select class="form-control" id="licence" formControlName="licence">
+      <option></option>
+      <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
+    </select>
+
+    <div *ngIf="formErrors.licence" class="alert alert-danger">
+      {{ formErrors.licence }}
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="language">Language</label>
+    <select class="form-control" id="language" formControlName="language">
+      <option></option>
+      <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
+    </select>
+
+    <div *ngIf="formErrors.language" class="alert alert-danger">
+      {{ formErrors.language }}
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
+    <tag-input
+      [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
+      formControlName="tags" maxItems="5" modelAsStrings="true"
+    ></tag-input>
+  </div>
+
+  <div class="form-group">
+    <label for="description">Description</label>
+    <my-video-description formControlName="description"></my-video-description>
+
+    <div *ngIf="formErrors.description" class="alert alert-danger">
+      {{ formErrors.description }}
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.ts b/client/src/app/videos/+video-edit/shared/video-edit.component.ts
new file mode 100644
index 000000000..5b1cc3f9c
--- /dev/null
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.ts
@@ -0,0 +1,83 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms'
+import { ActivatedRoute, Router } from '@angular/router'
+import { NotificationsService } from 'angular2-notifications'
+import { ServerService } from 'app/core'
+import { VideoEdit } from 'app/shared/video/video-edit.model'
+import 'rxjs/add/observable/forkJoin'
+import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.enum'
+import {
+  ValidatorMessage,
+  VIDEO_CATEGORY,
+  VIDEO_DESCRIPTION,
+  VIDEO_LANGUAGE,
+  VIDEO_LICENCE,
+  VIDEO_NAME,
+  VIDEO_PRIVACY,
+  VIDEO_TAGS
+} from '../../../shared/forms/form-validators'
+
+@Component({
+  selector: 'my-video-edit',
+  styleUrls: [ './video-edit.component.scss' ],
+  templateUrl: './video-edit.component.html'
+})
+
+export class VideoEditComponent implements OnInit {
+  @Input() form: FormGroup
+  @Input() formErrors: { [ id: string ]: string } = {}
+  @Input() validationMessages: ValidatorMessage = {}
+  @Input() videoPrivacies = []
+
+  tags: string[] = []
+  videoCategories = []
+  videoLicences = []
+  videoLanguages = []
+  video: VideoEdit
+
+  tagValidators = VIDEO_TAGS.VALIDATORS
+  tagValidatorsMessages = VIDEO_TAGS.MESSAGES
+
+  error: string = null
+
+  constructor (
+    private formBuilder: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private notificationsService: NotificationsService,
+    private serverService: ServerService
+  ) { }
+
+  updateForm () {
+    this.formErrors['name'] = ''
+    this.formErrors['privacy'] = ''
+    this.formErrors['category'] = ''
+    this.formErrors['licence'] = ''
+    this.formErrors['language'] = ''
+    this.formErrors['description'] = ''
+
+    this.validationMessages['name'] = VIDEO_NAME.MESSAGES
+    this.validationMessages['privacy'] = VIDEO_PRIVACY.MESSAGES
+    this.validationMessages['category'] = VIDEO_CATEGORY.MESSAGES
+    this.validationMessages['licence'] = VIDEO_LICENCE.MESSAGES
+    this.validationMessages['language'] = VIDEO_LANGUAGE.MESSAGES
+    this.validationMessages['description'] = VIDEO_DESCRIPTION.MESSAGES
+
+    this.form.addControl('name', new FormControl('', VIDEO_NAME.VALIDATORS))
+    this.form.addControl('privacy', new FormControl('', VIDEO_PRIVACY.VALIDATORS))
+    this.form.addControl('nsfw', new FormControl(false))
+    this.form.addControl('category', new FormControl('', VIDEO_CATEGORY.VALIDATORS))
+    this.form.addControl('licence', new FormControl('', VIDEO_LICENCE.VALIDATORS))
+    this.form.addControl('language', new FormControl('', VIDEO_LANGUAGE.VALIDATORS))
+    this.form.addControl('description', new FormControl('', VIDEO_DESCRIPTION.VALIDATORS))
+    this.form.addControl('tags', new FormControl(''))
+  }
+
+  ngOnInit () {
+    this.updateForm()
+
+    this.videoCategories = this.serverService.getVideoCategories()
+    this.videoLicences = this.serverService.getVideoLicences()
+    this.videoLanguages = this.serverService.getVideoLanguages()
+  }
+}
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.module.ts b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
index cdab694f9..c7ed8c351 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.module.ts
+++ b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
@@ -5,6 +5,7 @@ import { TabsModule } from 'ngx-bootstrap/tabs'
 
 import { MarkdownService, VideoDescriptionComponent } from '../../shared'
 import { SharedModule } from '../../../shared'
+import { VideoEditComponent } from './video-edit.component'
 
 @NgModule({
   imports: [
@@ -15,14 +16,16 @@ import { SharedModule } from '../../../shared'
   ],
 
   declarations: [
-    VideoDescriptionComponent
+    VideoDescriptionComponent,
+    VideoEditComponent
   ],
 
   exports: [
     TagInputModule,
     TabsModule,
 
-    VideoDescriptionComponent
+    VideoDescriptionComponent,
+    VideoEditComponent
   ],
 
   providers: [