client/src/app/videos/+video-edit/video-update.component.ts

   1 import { Component, OnInit } from '@angular/core'
   2 import { FormBuilder, FormGroup } from '@angular/forms'
   3 import { ActivatedRoute, Router } from '@angular/router'
   4 import { Observable } from 'rxjs/Observable'
   5 import 'rxjs/add/observable/forkJoin'
   6
   7 import { NotificationsService } from 'angular2-notifications'
   8
   9 import { ServerService } from '../../core'
  10 import {
  11   FormReactive,
  12   VIDEO_NAME,
  13   VIDEO_CATEGORY,
  14   VIDEO_LICENCE,
  15   VIDEO_LANGUAGE,
  16   VIDEO_DESCRIPTION,
  17   VIDEO_TAGS
  18 } from '../../shared'
  19 import { VideoEdit, VideoService } from '../shared'
  20
  21 @Component({
  22   selector: 'my-videos-update',
  23   styleUrls: [ './video-edit.component.scss' ],
  24   templateUrl: './video-update.component.html'
  25 })
  26
  27 export class VideoUpdateComponent extends FormReactive implements OnInit {
  28   tags: string[] = []
  29   videoCategories = []
  30   videoLicences = []
  31   videoLanguages = []
  32   video: VideoEdit
  33
  34   tagValidators = VIDEO_TAGS.VALIDATORS
  35   tagValidatorsMessages = VIDEO_TAGS.MESSAGES
  36
  37   error: string = null
  38   form: FormGroup
  39   formErrors = {
  40     name: '',
  41     category: '',
  42     licence: '',
  43     language: '',
  44     description: ''
  45   }
  46   validationMessages = {
  47     name: VIDEO_NAME.MESSAGES,
  48     category: VIDEO_CATEGORY.MESSAGES,
  49     licence: VIDEO_LICENCE.MESSAGES,
  50     language: VIDEO_LANGUAGE.MESSAGES,
  51     description: VIDEO_DESCRIPTION.MESSAGES
  52   }
  53
  54   fileError = ''
  55
  56   constructor (
  57     private formBuilder: FormBuilder,
  58     private route: ActivatedRoute,
  59     private router: Router,
  60     private notificationsService: NotificationsService,
  61     private serverService: ServerService,
  62     private videoService: VideoService
  63   ) {
  64     super()
  65   }
  66
  67   buildForm () {
  68     this.form = this.formBuilder.group({
  69       name: [ '', VIDEO_NAME.VALIDATORS ],
  70       nsfw: [ false ],
  71       category: [ '', VIDEO_CATEGORY.VALIDATORS ],
  72       licence: [ '', VIDEO_LICENCE.VALIDATORS ],
  73       language: [ '', VIDEO_LANGUAGE.VALIDATORS ],
  74       description: [ '', VIDEO_DESCRIPTION.VALIDATORS ],
  75       tags: [ '' ]
  76     })
  77
  78     this.form.valueChanges.subscribe(data => this.onValueChanged(data))
  79   }
  80
  81   ngOnInit () {
  82     this.buildForm()
  83
  84     this.videoCategories = this.serverService.getVideoCategories()
  85     this.videoLicences = this.serverService.getVideoLicences()
  86     this.videoLanguages = this.serverService.getVideoLanguages()
  87
  88     const uuid: string = this.route.snapshot.params['uuid']
  89
  90     this.videoService.getVideo(uuid)
  91       .switchMap(video => {
  92         return this.videoService
  93           .loadCompleteDescription(video.descriptionPath)
  94           .do(description => video.description = description)
  95           .map(() => video)
  96       })
  97       .subscribe(
  98         video => {
  99           this.video = new VideoEdit(video)
 100
 101           this.hydrateFormFromVideo()
 102         },
 103
 104         err => {
 105           console.error(err)
 106           this.error = 'Cannot fetch video.'
 107         }
 108       )
 109   }
 110
 111   checkForm () {
 112     this.forceCheck()
 113
 114     return this.form.valid
 115   }
 116
 117   update () {
 118     if (this.checkForm() === false) {
 119       return
 120     }
 121
 122     this.video.patch(this.form.value)
 123
 124     this.videoService.updateVideo(this.video)
 125                      .subscribe(
 126                        () => {
 127                          this.notificationsService.success('Success', 'Video updated.')
 128                          this.router.navigate([ '/videos/watch', this.video.uuid ])
 129                        },
 130
 131                        err => {
 132                          this.error = 'Cannot update the video.'
 133                          console.error(err)
 134                        }
 135                       )
 136
 137   }
 138
 139   private hydrateFormFromVideo () {
 140     this.form.patchValue(this.video.toJSON())
 141   }
 142 }