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 => this.error = 'Cannot fetch video.'
  98                      );
  99   }
 100
 101   checkForm() {
 102     this.forceCheck();
 103
 104     return this.form.valid;
 105   }
 106
 107   update() {
 108     if (this.checkForm() === false) {
 109       return;
 110     }
 111
 112     this.video.patch(this.form.value);
 113
 114     this.videoService.updateVideo(this.video)
 115                      .subscribe(
 116                        () => {
 117                          this.notificationsService.success('Success', 'Video updated.');
 118                          this.router.navigate([ '/videos/watch', this.video.id ]);
 119                        },
 120
 121                        err => {
 122                          this.error = 'Cannot update the video.';
 123                          console.error(err);
 124                        }
 125                       );
 126
 127   }
 128
 129   private hydrateFormFromVideo() {
 130     this.form.patchValue(this.video.toJSON());
 131   }
 132 }