diff --git a/client/package.json b/client/package.json
index e8b2a1c35..00eb0e272 100644
--- a/client/package.json
+++ b/client/package.json
@@ -58,7 +58,7 @@
"ng-router-loader": "^1.0.2",
"ng2-file-upload": "^1.1.4-2",
"ng2-smart-table": "1.0.3",
- "ng2-tag-input": "1.0.1",
+ "ng2-tag-input": "^1.0.5",
"ngc-webpack": "1.1.0",
"ngx-bootstrap": "1.6.6",
"node-sass": "^4.1.1",
diff --git a/client/src/app/shared/forms/form-validators/video.ts b/client/src/app/shared/forms/form-validators/video.ts
index 293fd805f..f7e4e5e4b 100644
--- a/client/src/app/shared/forms/form-validators/video.ts
+++ b/client/src/app/shared/forms/form-validators/video.ts
@@ -38,8 +38,9 @@ export const VIDEO_DESCRIPTION = {
};
export const VIDEO_TAGS = {
- VALIDATORS: [ Validators.maxLength(10) ],
+ VALIDATORS: [ Validators.minLength(2), Validators.maxLength(10) ],
MESSAGES: {
+ 'minlength': 'A tag should be more than 2 characters long.',
'maxlength': 'A tag should be less than 10 characters long.'
}
};
diff --git a/client/src/app/videos/video-edit/video-add.component.html b/client/src/app/videos/video-edit/video-add.component.html
index 104747a8c..04f4f85b0 100644
--- a/client/src/app/videos/video-edit/video-add.component.html
+++ b/client/src/app/videos/video-edit/video-add.component.html
@@ -59,25 +59,11 @@
-
-
-
-
- {{ tagsError }}
+ (press enter to add the tag)
+
diff --git a/client/src/app/videos/video-edit/video-add.component.ts b/client/src/app/videos/video-edit/video-add.component.ts
index e3cf0e9d8..21343880d 100644
--- a/client/src/app/videos/video-edit/video-add.component.ts
+++ b/client/src/app/videos/video-edit/video-add.component.ts
@@ -30,6 +30,9 @@ export class VideoAddComponent extends FormReactive implements OnInit {
videoLicences = [];
videoLanguages = [];
+ tagValidators = VIDEO_TAGS.VALIDATORS;
+ tagValidatorsMessages = VIDEO_TAGS.MESSAGES;
+
error: string = null;
form: FormGroup;
formErrors = {
@@ -37,20 +40,17 @@ export class VideoAddComponent extends FormReactive implements OnInit {
category: '',
licence: '',
language: '',
- description: '',
- currentTag: ''
+ description: ''
};
validationMessages = {
name: VIDEO_NAME.MESSAGES,
category: VIDEO_CATEGORY.MESSAGES,
licence: VIDEO_LICENCE.MESSAGES,
language: VIDEO_LANGUAGE.MESSAGES,
- description: VIDEO_DESCRIPTION.MESSAGES,
- currentTag: VIDEO_TAGS.MESSAGES
+ description: VIDEO_DESCRIPTION.MESSAGES
};
// Special error messages
- tagsError = '';
fileError = '';
constructor(
@@ -80,7 +80,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
licence: [ '', VIDEO_LICENCE.VALIDATORS ],
language: [ '', VIDEO_LANGUAGE.VALIDATORS ],
description: [ '', VIDEO_DESCRIPTION.VALIDATORS ],
- currentTag: [ '', VIDEO_TAGS.VALIDATORS ]
+ tags: [ '']
});
this.form.valueChanges.subscribe(data => this.onValueChanged(data));
@@ -105,6 +105,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
const licence = this.form.value['licence'];
const language = this.form.value['language'];
const description = this.form.value['description'];
+ const tags = this.form.value['tags'];
form.append('name', name);
form.append('category', category);
@@ -118,8 +119,8 @@ export class VideoAddComponent extends FormReactive implements OnInit {
form.append('description', description);
- for (let i = 0; i < this.tags.length; i++) {
- form.append(`tags[${i}]`, this.tags[i]);
+ for (let i = 0; i < tags.length; i++) {
+ form.append(`tags[${i}]`, tags[i]);
}
};
@@ -133,33 +134,18 @@ export class VideoAddComponent extends FormReactive implements OnInit {
this.fileError = 'You did not add a file.';
}
- return this.form.valid === true && this.tagsError === '' && this.fileError === '';
+ return this.form.valid === true && this.fileError === '';
}
fileChanged() {
this.fileError = '';
}
- onTagKeyPress(event: KeyboardEvent) {
- // Enter press
- if (event.keyCode === 13) {
- this.addTagIfPossible();
- }
- }
-
removeFile() {
this.uploader.clearQueue();
}
- removeTag(tag: string) {
- this.tags.splice(this.tags.indexOf(tag), 1);
- this.form.get('currentTag').enable();
- }
-
upload() {
- // Maybe the user forgot to press "enter" when he filled the field
- this.addTagIfPossible();
-
if (this.checkForm() === false) {
return;
}
@@ -206,25 +192,4 @@ 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-edit/video-edit.component.scss b/client/src/app/videos/video-edit/video-edit.component.scss
index 92b731191..9ee0c520c 100644
--- a/client/src/app/videos/video-edit/video-edit.component.scss
+++ b/client/src/app/videos/video-edit/video-edit.component.scss
@@ -50,3 +50,7 @@ div.file-to-upload {
font-size: 0.8em;
font-style: italic;
}
+
+.label-tags {
+ margin-bottom: 0;
+}
diff --git a/client/src/app/videos/video-edit/video-update.component.html b/client/src/app/videos/video-edit/video-update.component.html
index 2e10d5bf7..bedbc91b8 100644
--- a/client/src/app/videos/video-edit/video-update.component.html
+++ b/client/src/app/videos/video-edit/video-update.component.html
@@ -59,25 +59,11 @@
-
-
-
-
- {{ tagsError }}
+ (press enter to add the tag)
+
diff --git a/client/src/app/videos/video-edit/video-update.component.ts b/client/src/app/videos/video-edit/video-update.component.ts
index b45780a41..adb3d295c 100644
--- a/client/src/app/videos/video-edit/video-update.component.ts
+++ b/client/src/app/videos/video-edit/video-update.component.ts
@@ -30,6 +30,9 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
videoLanguages = [];
video: Video;
+ tagValidators = VIDEO_TAGS.VALIDATORS;
+ tagValidatorsMessages = VIDEO_TAGS.MESSAGES;
+
error: string = null;
form: FormGroup;
formErrors = {
@@ -37,20 +40,16 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
category: '',
licence: '',
language: '',
- description: '',
- currentTag: ''
+ description: ''
};
validationMessages = {
name: VIDEO_NAME.MESSAGES,
category: VIDEO_CATEGORY.MESSAGES,
licence: VIDEO_LICENCE.MESSAGES,
language: VIDEO_LANGUAGE.MESSAGES,
- description: VIDEO_DESCRIPTION.MESSAGES,
- currentTag: VIDEO_TAGS.MESSAGES
+ description: VIDEO_DESCRIPTION.MESSAGES
};
- // Special error messages
- tagsError = '';
fileError = '';
constructor(
@@ -73,7 +72,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
licence: [ '', VIDEO_LICENCE.VALIDATORS ],
language: [ '', VIDEO_LANGUAGE.VALIDATORS ],
description: [ '', VIDEO_DESCRIPTION.VALIDATORS ],
- currentTag: [ '', VIDEO_TAGS.VALIDATORS ]
+ tags: [ '' ]
});
this.form.valueChanges.subscribe(data => this.onValueChanged(data));
@@ -99,33 +98,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
);
}
- checkForm() {
- this.forceCheck();
-
- return this.form.valid === true && this.tagsError === '' && this.fileError === '';
- }
-
-
- onTagKeyPress(event: KeyboardEvent) {
- // Enter press
- if (event.keyCode === 13) {
- this.addTagIfPossible();
- }
- }
-
- removeTag(tag: string) {
- this.tags.splice(this.tags.indexOf(tag), 1);
- this.form.get('currentTag').enable();
- }
-
update() {
- // Maybe the user forgot to press "enter" when he filled the field
- this.addTagIfPossible();
-
- if (this.checkForm() === false) {
- return;
- }
-
this.video.patch(this.form.value);
this.videoService.updateVideo(this.video)
@@ -143,27 +116,6 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
}
- 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 = '';
- }
- }
-
private hydrateFormFromVideo() {
this.form.patchValue(this.video.toJSON());
}
diff --git a/client/src/app/videos/videos.module.ts b/client/src/app/videos/videos.module.ts
index 4f2839c85..04a06e0a3 100644
--- a/client/src/app/videos/videos.module.ts
+++ b/client/src/app/videos/videos.module.ts
@@ -1,6 +1,6 @@
import { NgModule } from '@angular/core';
-// import { TagInputModule } from 'ng2-tag-input';
+import { TagInputModule } from 'ng2-tag-input';
import { VideosRoutingModule } from './videos-routing.module';
import { VideosComponent } from './videos.component';
@@ -18,7 +18,7 @@ import { SharedModule } from '../shared';
@NgModule({
imports: [
- // TagInputModule,
+ TagInputModule,
VideosRoutingModule,
SharedModule