From e54163c2d5cc925eb56ead831f2fecd000222a98 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 22 Mar 2017 21:47:05 +0100 Subject: Relax on tags (accept any characters and not required anymore) --- .../src/app/shared/forms/form-validators/video.ts | 4 +- .../app/videos/video-add/video-add.component.ts | 46 ++++++++++++---------- .../video-list/video-miniature.component.scss | 1 + 3 files changed, 28 insertions(+), 23 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/shared/forms/form-validators/video.ts b/client/src/app/shared/forms/form-validators/video.ts index d972ee44b..de5112238 100644 --- a/client/src/app/shared/forms/form-validators/video.ts +++ b/client/src/app/shared/forms/form-validators/video.ts @@ -24,8 +24,8 @@ export const VIDEO_DESCRIPTION = { }; export const VIDEO_TAGS = { - VALIDATORS: [ Validators.pattern('^[a-zA-Z0-9]{0,10}$') ], + VALIDATORS: [ Validators.maxLength(10) ], MESSAGES: { - 'pattern': 'A tag should be between 2 and 10 alphanumeric characters long.' + 'maxlength': 'A tag should be less than 10 characters long.' } }; diff --git a/client/src/app/videos/video-add/video-add.component.ts b/client/src/app/videos/video-add/video-add.component.ts index 2ef666e17..5ed1d8841 100644 --- a/client/src/app/videos/video-add/video-add.component.ts +++ b/client/src/app/videos/video-add/video-add.component.ts @@ -105,10 +105,6 @@ export class VideoAddComponent extends FormReactive implements OnInit { checkForm() { this.forceCheck(); - if (this.tags.length === 0) { - this.tagsError = 'You have 0 tags'; - } - if (this.filename === null) { this.fileError = 'You did not add a file.'; } @@ -121,25 +117,9 @@ export class VideoAddComponent extends FormReactive implements OnInit { } onTagKeyPress(event: KeyboardEvent) { - const currentTag = this.form.value['currentTag']; - // Enter press if (event.keyCode === 13) { - // Check if the tag is valid and does not already exist - if ( - currentTag.length >= 2 && - this.form.controls['currentTag'].valid && - this.tags.indexOf(currentTag) === -1 - ) { - this.tags.push(currentTag); - this.form.patchValue({ currentTag: '' }); - - if (this.tags.length >= 3) { - this.form.get('currentTag').disable(); - } - - this.tagsError = ''; - } + this.addTagIfPossible(); } } @@ -153,6 +133,9 @@ export class VideoAddComponent extends FormReactive implements OnInit { } upload() { + // Maybe the user forgot to press "enter" when he filled the field + this.addTagIfPossible(); + if (this.checkForm() === false) { return; } @@ -199,4 +182,25 @@ export class VideoAddComponent extends FormReactive implements OnInit { this.uploader.uploadAll(); } + + private addTagIfPossible() { + const currentTag = this.form.value['currentTag']; + if (currentTag === undefined) return; + + // Check if the tag is valid and does not already exist + if ( + currentTag.length >= 2 && + this.form.controls['currentTag'].valid && + this.tags.indexOf(currentTag) === -1 + ) { + this.tags.push(currentTag); + this.form.patchValue({ currentTag: '' }); + + if (this.tags.length >= 3) { + this.form.get('currentTag').disable(); + } + + this.tagsError = ''; + } + } } diff --git a/client/src/app/videos/video-list/video-miniature.component.scss b/client/src/app/videos/video-list/video-miniature.component.scss index 0d309062a..b5d24271a 100644 --- a/client/src/app/videos/video-list/video-miniature.component.scss +++ b/client/src/app/videos/video-list/video-miniature.component.scss @@ -9,6 +9,7 @@ display: inline-block; position: relative; min-width: 220px; + height: 190px; .video-miniature-thumbnail { display: inline-block; -- cgit v1.2.3