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