|
1 | 1 | <div class="details-container"> |
2 | 2 | <form [formGroup]="detailsForm" class="form-grid" *ngIf="projectDetail"> |
3 | 3 | <div class="form-item"> |
4 | | - <label>Project Type<span class="required">*</span></label> |
5 | | - <select id="projectTypeCode" formControlName="projectTypeCode" [matTooltip]="getCodeDescription(CodeTableKeys.PROJECT_TYPE_CODE)"> |
6 | | - <option *ngFor="let item of projectTypeCode" [value]="item.projectTypeCode"> |
7 | | - {{ item.description }} |
8 | | - </option> |
9 | | - </select> |
| 4 | + <wfprev-select-field |
| 5 | + [label]="'Project Type'" |
| 6 | + [required]="true" |
| 7 | + [control]="getControl('projectTypeCode')" |
| 8 | + [options]="projectTypeCode" |
| 9 | + [optionValueField]="'projectTypeCode'" |
| 10 | + [optionLabelField]="'description'" |
| 11 | + [tooltip]="getCodeDescription(CodeTableKeys.PROJECT_TYPE_CODE)" |
| 12 | + id="projectTypeCode" |
| 13 | + placeholder="Select" |
| 14 | + /> |
10 | 15 | </div> |
11 | 16 |
|
12 | 17 | <div class="form-item funding-stream"> |
|
15 | 20 | </div> |
16 | 21 |
|
17 | 22 | <div class="form-item"> |
18 | | - <label>Business/Program Area<span class="required">*</span></label> |
19 | | - <select id="programAreaGuid" formControlName="programAreaGuid" [matTooltip]="getCodeDescription(CodeTableKeys.PROGRAM_AREA_GUID)"> |
20 | | - <option *ngFor="let item of programAreaCode" [value]="item.programAreaGuid"> |
21 | | - {{ item.programAreaName }} |
22 | | - </option> |
23 | | - </select> |
| 23 | + <wfprev-select-field |
| 24 | + [label]="'Business/Program Area'" |
| 25 | + [required]="true" |
| 26 | + [control]="getControl('programAreaGuid')" |
| 27 | + [options]="programAreaCode" |
| 28 | + [optionValueField]="'programAreaGuid'" |
| 29 | + [optionLabelField]="'programAreaName'" |
| 30 | + [tooltip]="getCodeDescription(CodeTableKeys.PROGRAM_AREA_GUID)" |
| 31 | + id="programAreaGuid" |
| 32 | + /> |
24 | 33 | </div> |
25 | 34 |
|
26 | 35 | <div class="form-item"> |
27 | | - <label for="closestCommunityName">Closest Community<span class="required">*</span></label> |
28 | | - <input type="text" id="closestCommunityName" formControlName="closestCommunityName" placeholder="Begin Typing" |
29 | | - [matTooltip]="detailsForm.get('closestCommunityName')?.value" /> |
30 | | - <div class="error" |
31 | | - *ngIf="detailsForm.get('closestCommunityName')?.hasError('maxlength') && detailsForm.get('closestCommunityName')?.touched"> |
32 | | - {{messages.maxLengthExceeded}} |
33 | | - </div> |
| 36 | + <wfprev-input-field |
| 37 | + [id]="'closestCommunityName'" |
| 38 | + [label]="'Closest Community'" |
| 39 | + [placeholder]="'Begin Typing'" |
| 40 | + [control]="getControl('closestCommunityName')" |
| 41 | + [tooltip]="getControl('closestCommunityName')?.value" |
| 42 | + [required]="true" |
| 43 | + [errorMessages]="{ maxlength: messages.maxLengthExceeded }" |
| 44 | + ></wfprev-input-field> |
| 45 | + |
34 | 46 | </div> |
35 | 47 |
|
36 | 48 | <div class="form-item"> |
37 | | - <label>Forest Region<span class="required">*</span></label> |
38 | | - <select id="forestRegionOrgUnitId" formControlName="forestRegionOrgUnitId" [matTooltip]="getCodeDescription(CodeTableKeys.FOREST_REGION_ORG_UNIT_ID)"> |
39 | | - <option *ngFor="let item of forestRegionCode" [value]="item.orgUnitId"> |
40 | | - {{ item.orgUnitName }} |
41 | | - </option> |
42 | | - </select> |
| 49 | + <wfprev-select-field |
| 50 | + [label]="'Forest Region'" |
| 51 | + [required]="true" |
| 52 | + [control]="getControl('forestRegionOrgUnitId')" |
| 53 | + [options]="forestRegionCode" |
| 54 | + [optionValueField]="'orgUnitId'" |
| 55 | + [optionLabelField]="'orgUnitName'" |
| 56 | + [tooltip]="getCodeDescription(CodeTableKeys.FOREST_REGION_ORG_UNIT_ID)" |
| 57 | + id="forestRegionOrgUnitId" |
| 58 | + /> |
43 | 59 | </div> |
44 | 60 |
|
45 | 61 | <div class="form-item"> |
46 | | - <label> Forest District </label> |
47 | | - <select id="forestDistrictOrgUnitId" formControlName="forestDistrictOrgUnitId" [matTooltip]="getCodeDescription(CodeTableKeys.FOREST_DISTRICT_ORG_UNIT_ID)"> |
48 | | - <option value="">Select</option> |
49 | | - <option *ngFor="let item of forestDistrictCode" [value]="item.orgUnitId"> |
50 | | - {{ item.orgUnitName }} |
51 | | - </option> |
52 | | - </select> |
| 62 | + <wfprev-select-field |
| 63 | + [label]="'Forest District'" |
| 64 | + [required]="false" |
| 65 | + [control]="getControl('forestDistrictOrgUnitId')" |
| 66 | + [options]="forestDistrictCode" |
| 67 | + [optionValueField]="'orgUnitId'" |
| 68 | + [optionLabelField]="'orgUnitName'" |
| 69 | + [tooltip]="getCodeDescription(CodeTableKeys.FOREST_DISTRICT_ORG_UNIT_ID)" |
| 70 | + [placeholder]="'Select'" |
| 71 | + id="forestDistrictOrgUnitId" |
| 72 | + /> |
53 | 73 | </div> |
54 | 74 |
|
55 | 75 | <div class="form-item"> |
56 | | - <label> BC Parks Region </label> |
57 | | - <select id="bcParksRegionOrgUnitId" formControlName="bcParksRegionOrgUnitId" [matTooltip]="getCodeDescription(CodeTableKeys.BC_PARKS_REGION_ORG_UNIT_ID)"> |
58 | | - <option value="">Select</option> |
59 | | - <option *ngFor="let item of bcParksRegionCode" [value]="item.orgUnitId"> |
60 | | - {{ item.orgUnitName }} |
61 | | - </option> |
62 | | - </select> |
| 76 | + <wfprev-select-field |
| 77 | + [label]="'BC Parks Region'" |
| 78 | + [required]="false" |
| 79 | + [control]="getControl('bcParksRegionOrgUnitId')" |
| 80 | + [options]="bcParksRegionCode" |
| 81 | + [optionValueField]="'orgUnitId'" |
| 82 | + [optionLabelField]="'orgUnitName'" |
| 83 | + [tooltip]="getCodeDescription(CodeTableKeys.BC_PARKS_REGION_ORG_UNIT_ID)" |
| 84 | + [placeholder]="'Select'" |
| 85 | + id="bcParksRegionOrgUnitId" |
| 86 | + /> |
63 | 87 | </div> |
64 | 88 |
|
65 | 89 | <div class="form-item"> |
66 | | - <label>BC Parks Section</label> |
67 | | - <select id="bcParksSectionOrgUnitId" formControlName="bcParksSectionOrgUnitId" [matTooltip]="getCodeDescription(CodeTableKeys.BC_PARKS_SECTION_ORG_UNIT_ID)"> |
68 | | - <option value="">Select</option> |
69 | | - <option *ngFor="let item of bcParksSectionCode" [value]="item.orgUnitId"> |
70 | | - {{ item.orgUnitName }} |
71 | | - </option> |
72 | | - </select> |
| 90 | + <wfprev-select-field |
| 91 | + [label]="'BC Parks Section'" |
| 92 | + [required]="false" |
| 93 | + [control]="getControl('bcParksSectionOrgUnitId')" |
| 94 | + [options]="bcParksSectionCode" |
| 95 | + [optionValueField]="'orgUnitId'" |
| 96 | + [optionLabelField]="'orgUnitName'" |
| 97 | + [tooltip]="getCodeDescription(CodeTableKeys.BC_PARKS_SECTION_ORG_UNIT_ID)" |
| 98 | + [placeholder]="'Select'" |
| 99 | + id="bcParksSectionOrgUnitId" |
| 100 | + /> |
73 | 101 | </div> |
74 | 102 |
|
75 | 103 | <div class="form-item"> |
76 | | - <label>BCWS Fire Centre<span class="required">*</span></label> |
77 | | - <select id="fireCentre" formControlName="fireCentreId" [matTooltip]="getCodeDescription(CodeTableKeys.FIRE_CENTRE_ID)"> |
78 | | - <option *ngFor="let item of fireCentres" [value]="item.properties.MOF_FIRE_CENTRE_ID"> |
79 | | - {{ item.properties.MOF_FIRE_CENTRE_NAME }} |
80 | | - </option> |
81 | | - </select> |
| 104 | + <wfprev-select-field |
| 105 | + [label]="'BCWS Fire Centre'" |
| 106 | + [required]="true" |
| 107 | + [control]="getControl('fireCentreId')" |
| 108 | + [options]="fireCentres" |
| 109 | + [optionValueField]="'id'" |
| 110 | + [optionLabelField]="'label'" |
| 111 | + [tooltip]="getCodeDescription(CodeTableKeys.FIRE_CENTRE_ID)" |
| 112 | + id="fireCentreId" |
| 113 | + /> |
82 | 114 | </div> |
83 | 115 |
|
84 | 116 | <div class="form-item"> |
85 | | - <label for="projectLead">Project Lead<span class="required">*</span></label> |
86 | | - <input type="text" id="projectLead" formControlName="projectLead" placeholder="Begin Typing" |
87 | | - [matTooltip]="detailsForm.get('projectLead')?.value" /> |
88 | | - <div class="error" |
89 | | - *ngIf="detailsForm.get('projectLead')?.hasError('maxlength') && detailsForm.get('projectLead')?.touched"> |
90 | | - {{messages.maxLengthExceeded}} |
91 | | - </div> |
| 117 | + <wfprev-input-field |
| 118 | + [id]="'projectLead'" |
| 119 | + [label]="'Project Lead'" |
| 120 | + [placeholder]="'Begin Typing'" |
| 121 | + [control]="getControl('projectLead')" |
| 122 | + [tooltip]="getControl('projectLead')?.value" |
| 123 | + [required]="true" |
| 124 | + [errorMessages]="{ maxlength: messages.maxLengthExceeded }" |
| 125 | + /> |
92 | 126 | </div> |
93 | 127 |
|
94 | 128 | <div class="form-item"> |
95 | | - <label for="projectLeadEmailAddress">Project Lead Email</label> |
96 | | - <input type="email" id="projectLeadEmailAddress" formControlName="projectLeadEmailAddress" |
97 | | - placeholder="Begin Typing" [matTooltip]="detailsForm.get('projectLeadEmailAddress')?.value" /> |
98 | | - <div class="error" |
99 | | - *ngIf="detailsForm.get('projectLeadEmailAddress')?.hasError('email') && detailsForm.get('projectLeadEmailAddress')?.touched"> |
100 | | - {{messages.invalidEmail}} |
101 | | - </div> |
102 | | - <div class="error" |
103 | | - *ngIf="detailsForm.get('projectLeadEmailAddress')?.hasError('maxlength') && detailsForm.get('projectLeadEmailAddress')?.touched"> |
104 | | - {{messages.maxLengthExceeded}} |
105 | | - </div> |
| 129 | + <wfprev-input-field |
| 130 | + [id]="'projectLeadEmailAddress'" |
| 131 | + [label]="'Project Lead Email'" |
| 132 | + [placeholder]="'Begin Typing'" |
| 133 | + [control]="getControl('projectLeadEmailAddress')" |
| 134 | + [tooltip]="getControl('projectLeadEmailAddress')?.value" |
| 135 | + [type]="'email'" |
| 136 | + [errorMessages]="{ |
| 137 | + email: messages.invalidEmail, |
| 138 | + maxlength: messages.maxLengthExceeded |
| 139 | + }" |
| 140 | + /> |
106 | 141 | </div> |
107 | 142 |
|
108 | 143 | <div class="form-item"> |
109 | | - <label for="siteUnitName">Planning Unit</label> |
110 | | - <input type="text" id="siteUnitName" formControlName="siteUnitName" placeholder="Begin Typing" |
111 | | - [matTooltip]="detailsForm.get('siteUnitName')?.value" /> |
112 | | - <div class="error" |
113 | | - *ngIf="detailsForm.get('siteUnitName')?.hasError('maxlength') && detailsForm.get('siteUnitName')?.touched"> |
114 | | - {{messages.maxLengthExceeded}} |
115 | | - </div> |
| 144 | + <wfprev-input-field |
| 145 | + [id]="'siteUnitName'" |
| 146 | + [label]="'Planning Unit'" |
| 147 | + [placeholder]="'Begin Typing'" |
| 148 | + [control]="getControl('siteUnitName')" |
| 149 | + [tooltip]="getControl('siteUnitName')?.value" |
| 150 | + [errorMessages]="{ maxlength: messages.maxLengthExceeded }" |
| 151 | + /> |
116 | 152 | </div> |
117 | 153 |
|
118 | 154 | <div class="objective-group"> |
119 | 155 | <div class="form-item objective-field"> |
120 | | - <label>Primary Objective<span class="required">*</span></label> |
121 | | - <select id="primaryObjectiveTypeCode" formControlName="primaryObjectiveTypeCode" [matTooltip]="getCodeDescription(CodeTableKeys.PRIMARY_OBJECTIVE_TYPE_CODE)"> |
122 | | - <option *ngFor="let item of objectiveTypeCode" [value]="item.objectiveTypeCode"> |
123 | | - {{ item.description }} |
124 | | - </option> |
125 | | - </select> |
| 156 | + <wfprev-select-field |
| 157 | + [label]="'Primary Objective'" |
| 158 | + [required]="true" |
| 159 | + [control]="getControl('primaryObjectiveTypeCode')" |
| 160 | + [options]="objectiveTypeCode" |
| 161 | + [optionValueField]="'objectiveTypeCode'" |
| 162 | + [optionLabelField]="'description'" |
| 163 | + [tooltip]="getCodeDescription(CodeTableKeys.PRIMARY_OBJECTIVE_TYPE_CODE)" |
| 164 | + id="primaryObjectiveTypeCode" |
| 165 | + /> |
126 | 166 | </div> |
127 | 167 |
|
128 | 168 | <div class="form-item objective-field"> |
129 | | - <label>Secondary Objective</label> |
130 | | - <select id="secondaryObjectiveTypeCode" formControlName="secondaryObjectiveTypeCode" [matTooltip]="getCodeDescription(CodeTableKeys.SECONDARY_OBJECTIVE_TYPE_CODE)"> |
131 | | - <option value="">Select</option> |
132 | | - <option *ngFor="let item of objectiveTypeCode" [value]="item.objectiveTypeCode"> |
133 | | - {{ item.description }} |
134 | | - </option> |
135 | | - </select> |
| 169 | + <wfprev-select-field |
| 170 | + [label]="'Secondary Objective'" |
| 171 | + [required]="false" |
| 172 | + [control]="getControl('secondaryObjectiveTypeCode')" |
| 173 | + [options]="objectiveTypeCode" |
| 174 | + [optionValueField]="'objectiveTypeCode'" |
| 175 | + [optionLabelField]="'description'" |
| 176 | + [tooltip]="getCodeDescription(CodeTableKeys.SECONDARY_OBJECTIVE_TYPE_CODE)" |
| 177 | + id="secondaryObjectiveTypeCode" |
| 178 | + [placeholder]="'Select'" |
| 179 | + /> |
136 | 180 | </div> |
137 | 181 |
|
138 | 182 | <div class="form-item secondary-rationale"> |
|
0 commit comments