1
|
import { Category } from './../../../../shared/models/category.interface';
|
2
|
import { Component, Input, OnInit } from '@angular/core';
|
3
|
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
|
4
|
import { DocumentClassification } from 'src/app/shared/models/document-classification.interface';
|
5
|
import { CategoriesService } from 'src/app/shared/services/administration/categories.service';
|
6
|
import { DocumentClassificationsService } from 'src/app/shared/services/administration/document-classifications.service';
|
7
|
import { ErrorHandlingService } from 'src/app/shared/services/error-handling/error-handling.service';
|
8
|
|
9
|
@Component({
|
10
|
selector: 'app-category-form',
|
11
|
templateUrl: './category-form.component.html',
|
12
|
styleUrls: ['./category-form.component.scss']
|
13
|
})
|
14
|
export class CategoryFormComponent implements OnInit {
|
15
|
|
16
|
/*
|
17
|
* Inputs
|
18
|
*/
|
19
|
@Input() dialogLayout: boolean = false; // Controls .scss classes to allow for better dispay in a dialog.
|
20
|
@Input() requiredFields: string[] | boolean = false; // True/False indicates that all/none are required. String[] specifies the form controls required.
|
21
|
@Input() displayValidationMessagesEvenIfPristine: boolean = false; // Serves for manually treating the controls as dirty.
|
22
|
@Input() autosuggestInputs: boolean = false;
|
23
|
|
24
|
/*
|
25
|
* Reactive Form
|
26
|
*/
|
27
|
categoryForm = this.fb.group({
|
28
|
documentClassification: [null],
|
29
|
categoryName: [null],
|
30
|
categoryCode: [null]
|
31
|
});
|
32
|
|
33
|
setFormValue: Category = null;
|
34
|
selectedCategory: Category;
|
35
|
|
36
|
/*
|
37
|
* Other Variables
|
38
|
*/
|
39
|
documentClassificationsList: DocumentClassification[];
|
40
|
|
41
|
categoryNameSuggestions: string[];
|
42
|
categoryCodeSuggestions: string[];
|
43
|
categorySuggestions: Category[];
|
44
|
|
45
|
/*
|
46
|
* Constructor & Initialisers
|
47
|
*/
|
48
|
constructor(
|
49
|
private fb: FormBuilder,
|
50
|
private categoriesService: CategoriesService,
|
51
|
private documentClassificationsService: DocumentClassificationsService,
|
52
|
private errorHandlingService: ErrorHandlingService
|
53
|
) { }
|
54
|
|
55
|
ngOnInit(): void {
|
56
|
this.initData();
|
57
|
this.initValidators()
|
58
|
}
|
59
|
|
60
|
initData() {
|
61
|
this.documentClassificationsService.getAll().subscribe(
|
62
|
value => this.documentClassificationsList = value,
|
63
|
err => this.errorHandlingService.showHttpResponseError(err)
|
64
|
);
|
65
|
}
|
66
|
|
67
|
// TODO: Have this mechanism offer the use of custom validators too.
|
68
|
initValidators() {
|
69
|
|
70
|
if (!this.requiredFields) { return; }
|
71
|
|
72
|
// In a true/false case.
|
73
|
if (typeof this.requiredFields == 'boolean') {
|
74
|
// If true, enable the required validator for all controls and sub-controls.
|
75
|
if (this.requiredFields) {
|
76
|
this.setRequiredValidatorRecursively(this.categoryForm);
|
77
|
}
|
78
|
|
79
|
// If false, do nothing.
|
80
|
return;
|
81
|
}
|
82
|
|
83
|
// If it was a string array, enable the validators for all provided field-names. TODO: This ONLY supports 1st level controls and not nested ones.
|
84
|
(<string[]>this.requiredFields).forEach(field => this.categoryForm.controls[field].setValidators(Validators.required))
|
85
|
}
|
86
|
|
87
|
setRequiredValidatorRecursively(group: FormGroup) {
|
88
|
Object.keys(group.controls).forEach(key => {
|
89
|
group.controls[key].setValidators(Validators.required);
|
90
|
|
91
|
if (group.controls[key]['controls']) {
|
92
|
this.setRequiredValidatorRecursively(<FormGroup>group.controls[key])
|
93
|
}
|
94
|
});
|
95
|
}
|
96
|
|
97
|
/*
|
98
|
* Auto-suggest & Auto-complete Category
|
99
|
*/
|
100
|
autosuggestCategoryName(event) {
|
101
|
|
102
|
if (!event.query || event.query.length < 3) {
|
103
|
this.categoryNameSuggestions = [];
|
104
|
return;
|
105
|
}
|
106
|
|
107
|
let classId = this.categoryForm.get('documentClassification').value ? this.categoryForm.get('documentClassification').value.classificationId : null;
|
108
|
this.categoriesService.autosuggestCategoryName(event.query, classId).subscribe(
|
109
|
(values: Category[]) => {
|
110
|
let temp: string[] = [];
|
111
|
this.categorySuggestions = values;
|
112
|
values.map(val => temp.push(val.categoryName));
|
113
|
this.categoryNameSuggestions = temp
|
114
|
},
|
115
|
err => this.errorHandlingService.showHttpResponseError(err)
|
116
|
);
|
117
|
}
|
118
|
|
119
|
autosuggestCategoryCode(event) {
|
120
|
|
121
|
if (event.query.length < 3) {
|
122
|
this.categoryCodeSuggestions = [];
|
123
|
return;
|
124
|
}
|
125
|
|
126
|
let classId = this.categoryForm.get('documentClassification').value ? this.categoryForm.get('documentClassification').value.classificationId : null;
|
127
|
this.categoriesService.autosuggestCategoryCode(event.query, classId).subscribe(
|
128
|
(values: Category[]) => {
|
129
|
let temp: string[] = [];
|
130
|
this.categorySuggestions = values;
|
131
|
values.map(val => temp.push(val.categoryCode));
|
132
|
this.categoryCodeSuggestions = temp
|
133
|
},
|
134
|
err => this.errorHandlingService.showHttpResponseError(err)
|
135
|
);
|
136
|
}
|
137
|
|
138
|
categoryNameSelected(name: string) {
|
139
|
this.selectedCategory = this.categorySuggestions.find(cat => cat.categoryName == name);
|
140
|
this.categoryForm.get('categoryCode').patchValue(this.selectedCategory.categoryCode);
|
141
|
this.categoryForm.updateValueAndValidity();
|
142
|
}
|
143
|
|
144
|
categoryCodeSelected(code: string) {
|
145
|
this.selectedCategory = this.categorySuggestions.find(cat => cat.categoryCode == code);
|
146
|
this.categoryForm.get('categoryName').patchValue(this.selectedCategory.categoryName);
|
147
|
this.categoryForm.updateValueAndValidity();
|
148
|
}
|
149
|
|
150
|
/*
|
151
|
* API methods
|
152
|
*/
|
153
|
public resetForm(): void {
|
154
|
this.categoryForm.reset();
|
155
|
}
|
156
|
|
157
|
public formValue(): Category {
|
158
|
let formValue: Category = {
|
159
|
id: this.setFormValue ? this.setFormValue.id : null,
|
160
|
documentClassification: this.categoryForm.get('documentClassification').value,
|
161
|
categoryName: this.categoryForm.get('categoryName').value,
|
162
|
categoryCode: this.categoryForm.get('categoryCode').value
|
163
|
};
|
164
|
|
165
|
return formValue;
|
166
|
}
|
167
|
|
168
|
public setValue(value: Category): void {
|
169
|
if (!value) {
|
170
|
return;
|
171
|
}
|
172
|
|
173
|
this.setFormValue = value;
|
174
|
this.categoryForm.get('documentClassification').setValue(value.documentClassification);
|
175
|
this.categoryForm.get('categoryName').setValue(value.categoryName);
|
176
|
this.categoryForm.get('categoryCode').setValue(value.categoryCode);
|
177
|
this.categoryForm.updateValueAndValidity();
|
178
|
}
|
179
|
|
180
|
public isValid(): boolean {
|
181
|
return this.categoryForm.valid;
|
182
|
}
|
183
|
}
|