From 3758da9489b636997a3a4fad7fc1a6081737bbe0 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Sun, 16 Apr 2017 14:06:48 +0200 Subject: Client: use ng2-tag-input for forms with video tags --- client/package.json | 2 +- .../src/app/shared/forms/form-validators/video.ts | 3 +- .../app/videos/video-edit/video-add.component.html | 24 ++------- .../app/videos/video-edit/video-add.component.ts | 55 ++++---------------- .../videos/video-edit/video-edit.component.scss | 4 ++ .../videos/video-edit/video-update.component.html | 24 ++------- .../videos/video-edit/video-update.component.ts | 60 +++------------------- client/src/app/videos/videos.module.ts | 4 +- 8 files changed, 35 insertions(+), 141 deletions(-) (limited to 'client') 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 @@
- (press enter to add the tag) - -
- {{ formErrors.currentTag }} -
-
- -
-
- {{ tag }} - x -
-
- -
- {{ 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 @@
- (press enter to add the tag) - -
- {{ formErrors.currentTag }} -
-
- -
-
- {{ tag }} - x -
-
- -
- {{ 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 -- cgit v1.2.3