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

   1 import { Component, ElementRef, OnInit } from '@angular/core'
   2 import { FormBuilder, FormGroup } from '@angular/forms'
   3 import { ActivatedRoute, Router } from '@angular/router'
   4
   5 import { FileUploader } from 'ng2-file-upload/ng2-file-upload'
   6 import { NotificationsService } from 'angular2-notifications'
   7
   8 import { AuthService } from '../../core'
   9 import {
  10   FormReactive,
  11   VIDEO_NAME,
  12   VIDEO_CATEGORY,
  13   VIDEO_LICENCE,
  14   VIDEO_LANGUAGE,
  15   VIDEO_DESCRIPTION,
  16   VIDEO_TAGS
  17 } from '../../shared'
  18 import { Video, VideoService } from '../shared'
  19
  20 @Component({
  21   selector: 'my-videos-update',
  22   styleUrls: [ './video-edit.component.scss' ],
  23   templateUrl: './video-update.component.html'
  24 })
  25
  26 export class VideoUpdateComponent extends FormReactive implements OnInit {
  27   tags: string[] = []
  28   videoCategories = []
  29   videoLicences = []
  30   videoLanguages = []
  31   video: Video
  32
  33   tagValidators = VIDEO_TAGS.VALIDATORS
  34   tagValidatorsMessages = VIDEO_TAGS.MESSAGES
  35
  36   error: string = null
  37   form: FormGroup
  38   formErrors = {
  39     name: '',
  40     category: '',
  41     licence: '',
  42     language: '',
  43     description: ''
  44   }
  45   validationMessages = {
  46     name: VIDEO_NAME.MESSAGES,
  47     category: VIDEO_CATEGORY.MESSAGES,
  48     licence: VIDEO_LICENCE.MESSAGES,
  49     language: VIDEO_LANGUAGE.MESSAGES,
  50     description: VIDEO_DESCRIPTION.MESSAGES
  51   }
  52
  53   fileError = ''
  54
  55   constructor (
  56     private authService: AuthService,
  57     private elementRef: ElementRef,
  58     private formBuilder: FormBuilder,
  59     private route: ActivatedRoute,
  60     private router: Router,
  61     private notificationsService: NotificationsService,
  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.videoService.videoCategories
  85     this.videoLicences = this.videoService.videoLicences
  86     this.videoLanguages = this.videoService.videoLanguages
  87
  88     const id = this.route.snapshot.params['id']
  89     this.videoService.getVideo(id)
  90                      .subscribe(
  91                        video => {
  92                          this.video = video
  93
  94                          this.hydrateFormFromVideo()
  95                        },
  96
  97                        err => {
  98                          console.error(err)
  99                          this.error = 'Cannot fetch video.'
 100                        }
 101                      )
 102   }
 103
 104   checkForm () {
 105     this.forceCheck()
 106
 107     return this.form.valid
 108   }
 109
 110   update () {
 111     if (this.checkForm() === false) {
 112       return
 113     }
 114
 115     this.video.patch(this.form.value)
 116
 117     this.videoService.updateVideo(this.video)
 118                      .subscribe(
 119                        () => {
 120                          this.notificationsService.success('Success', 'Video updated.')
 121                          this.router.navigate([ '/videos/watch', this.video.id ])
 122                        },
 123
 124                        err => {
 125                          this.error = 'Cannot update the video.'
 126                          console.error(err)
 127                        }
 128                       )
 129
 130   }
 131
 132   private hydrateFormFromVideo () {
 133     this.form.patchValue(this.video.toJSON())
 134   }
 135 }