diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2017-04-16 14:06:48 +0200 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2017-04-16 14:06:48 +0200 |
commit | 3758da9489b636997a3a4fad7fc1a6081737bbe0 (patch) | |
tree | 7c335e1466887af1437c4701c859a72e58c93678 /client/src/app/videos/video-edit/video-add.component.ts | |
parent | ad42bea3a55ca7937f082cc641764de70ce34bd1 (diff) | |
download | PeerTube-3758da9489b636997a3a4fad7fc1a6081737bbe0.tar.gz PeerTube-3758da9489b636997a3a4fad7fc1a6081737bbe0.tar.zst PeerTube-3758da9489b636997a3a4fad7fc1a6081737bbe0.zip |
Client: use ng2-tag-input for forms with video tags
Diffstat (limited to 'client/src/app/videos/video-edit/video-add.component.ts')
-rw-r--r-- | client/src/app/videos/video-edit/video-add.component.ts | 55 |
1 files changed, 10 insertions, 45 deletions
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 { | |||
30 | videoLicences = []; | 30 | videoLicences = []; |
31 | videoLanguages = []; | 31 | videoLanguages = []; |
32 | 32 | ||
33 | tagValidators = VIDEO_TAGS.VALIDATORS; | ||
34 | tagValidatorsMessages = VIDEO_TAGS.MESSAGES; | ||
35 | |||
33 | error: string = null; | 36 | error: string = null; |
34 | form: FormGroup; | 37 | form: FormGroup; |
35 | formErrors = { | 38 | formErrors = { |
@@ -37,20 +40,17 @@ export class VideoAddComponent extends FormReactive implements OnInit { | |||
37 | category: '', | 40 | category: '', |
38 | licence: '', | 41 | licence: '', |
39 | language: '', | 42 | language: '', |
40 | description: '', | 43 | description: '' |
41 | currentTag: '' | ||
42 | }; | 44 | }; |
43 | validationMessages = { | 45 | validationMessages = { |
44 | name: VIDEO_NAME.MESSAGES, | 46 | name: VIDEO_NAME.MESSAGES, |
45 | category: VIDEO_CATEGORY.MESSAGES, | 47 | category: VIDEO_CATEGORY.MESSAGES, |
46 | licence: VIDEO_LICENCE.MESSAGES, | 48 | licence: VIDEO_LICENCE.MESSAGES, |
47 | language: VIDEO_LANGUAGE.MESSAGES, | 49 | language: VIDEO_LANGUAGE.MESSAGES, |
48 | description: VIDEO_DESCRIPTION.MESSAGES, | 50 | description: VIDEO_DESCRIPTION.MESSAGES |
49 | currentTag: VIDEO_TAGS.MESSAGES | ||
50 | }; | 51 | }; |
51 | 52 | ||
52 | // Special error messages | 53 | // Special error messages |
53 | tagsError = ''; | ||
54 | fileError = ''; | 54 | fileError = ''; |
55 | 55 | ||
56 | constructor( | 56 | constructor( |
@@ -80,7 +80,7 @@ export class VideoAddComponent extends FormReactive implements OnInit { | |||
80 | licence: [ '', VIDEO_LICENCE.VALIDATORS ], | 80 | licence: [ '', VIDEO_LICENCE.VALIDATORS ], |
81 | language: [ '', VIDEO_LANGUAGE.VALIDATORS ], | 81 | language: [ '', VIDEO_LANGUAGE.VALIDATORS ], |
82 | description: [ '', VIDEO_DESCRIPTION.VALIDATORS ], | 82 | description: [ '', VIDEO_DESCRIPTION.VALIDATORS ], |
83 | currentTag: [ '', VIDEO_TAGS.VALIDATORS ] | 83 | tags: [ ''] |
84 | }); | 84 | }); |
85 | 85 | ||
86 | this.form.valueChanges.subscribe(data => this.onValueChanged(data)); | 86 | this.form.valueChanges.subscribe(data => this.onValueChanged(data)); |
@@ -105,6 +105,7 @@ export class VideoAddComponent extends FormReactive implements OnInit { | |||
105 | const licence = this.form.value['licence']; | 105 | const licence = this.form.value['licence']; |
106 | const language = this.form.value['language']; | 106 | const language = this.form.value['language']; |
107 | const description = this.form.value['description']; | 107 | const description = this.form.value['description']; |
108 | const tags = this.form.value['tags']; | ||
108 | 109 | ||
109 | form.append('name', name); | 110 | form.append('name', name); |
110 | form.append('category', category); | 111 | form.append('category', category); |
@@ -118,8 +119,8 @@ export class VideoAddComponent extends FormReactive implements OnInit { | |||
118 | 119 | ||
119 | form.append('description', description); | 120 | form.append('description', description); |
120 | 121 | ||
121 | for (let i = 0; i < this.tags.length; i++) { | 122 | for (let i = 0; i < tags.length; i++) { |
122 | form.append(`tags[${i}]`, this.tags[i]); | 123 | form.append(`tags[${i}]`, tags[i]); |
123 | } | 124 | } |
124 | }; | 125 | }; |
125 | 126 | ||
@@ -133,33 +134,18 @@ export class VideoAddComponent extends FormReactive implements OnInit { | |||
133 | this.fileError = 'You did not add a file.'; | 134 | this.fileError = 'You did not add a file.'; |
134 | } | 135 | } |
135 | 136 | ||
136 | return this.form.valid === true && this.tagsError === '' && this.fileError === ''; | 137 | return this.form.valid === true && this.fileError === ''; |
137 | } | 138 | } |
138 | 139 | ||
139 | fileChanged() { | 140 | fileChanged() { |
140 | this.fileError = ''; | 141 | this.fileError = ''; |
141 | } | 142 | } |
142 | 143 | ||
143 | onTagKeyPress(event: KeyboardEvent) { | ||
144 | // Enter press | ||
145 | if (event.keyCode === 13) { | ||
146 | this.addTagIfPossible(); | ||
147 | } | ||
148 | } | ||
149 | |||
150 | removeFile() { | 144 | removeFile() { |
151 | this.uploader.clearQueue(); | 145 | this.uploader.clearQueue(); |
152 | } | 146 | } |
153 | 147 | ||
154 | removeTag(tag: string) { | ||
155 | this.tags.splice(this.tags.indexOf(tag), 1); | ||
156 | this.form.get('currentTag').enable(); | ||
157 | } | ||
158 | |||
159 | upload() { | 148 | upload() { |
160 | // Maybe the user forgot to press "enter" when he filled the field | ||
161 | this.addTagIfPossible(); | ||
162 | |||
163 | if (this.checkForm() === false) { | 149 | if (this.checkForm() === false) { |
164 | return; | 150 | return; |
165 | } | 151 | } |
@@ -206,25 +192,4 @@ export class VideoAddComponent extends FormReactive implements OnInit { | |||
206 | 192 | ||
207 | this.uploader.uploadAll(); | 193 | this.uploader.uploadAll(); |
208 | } | 194 | } |
209 | |||
210 | private addTagIfPossible() { | ||
211 | const currentTag = this.form.value['currentTag']; | ||
212 | if (currentTag === undefined) return; | ||
213 | |||
214 | // Check if the tag is valid and does not already exist | ||
215 | if ( | ||
216 | currentTag.length >= 2 && | ||
217 | this.form.controls['currentTag'].valid && | ||
218 | this.tags.indexOf(currentTag) === -1 | ||
219 | ) { | ||
220 | this.tags.push(currentTag); | ||
221 | this.form.patchValue({ currentTag: '' }); | ||
222 | |||
223 | if (this.tags.length >= 3) { | ||
224 | this.form.get('currentTag').disable(); | ||
225 | } | ||
226 | |||
227 | this.tagsError = ''; | ||
228 | } | ||
229 | } | ||
230 | } | 195 | } |