Skip to content

Commit 7c5e54a

Browse files
shawonshawon
shawon
authored and
shawon
committed
added formcontrol to task-wizard modal
1 parent 475a1dd commit 7c5e54a

File tree

2 files changed

+230
-123
lines changed

2 files changed

+230
-123
lines changed

‎eform-client/src/app/plugins/modules/backend-configuration-pn/modules/task-wizard/components/task-wizard-actions/task-wizard-create-modal/task-wizard-create-modal.component.html‎

Lines changed: 122 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
<h3 mat-dialog-title>{{'Create new task' | translate}}</h3>
2-
<div mat-dialog-content>
3-
<mat-slide-toggle class="p-2"
4-
color="primary"
5-
id="createTaskStatusToggle"
6-
[checked]="model.status === TaskWizardStatusesEnum.Active"
7-
[ngModel]="model.status === TaskWizardStatusesEnum.Active"
8-
(ngModelChange)="changeStatus($event)">
2+
<div [formGroup]="taskForm">
3+
<div mat-dialog-content >
4+
<mat-slide-toggle
5+
class="p-2"
6+
color="primary"
7+
id="createTaskStatusToggle"
8+
[checked]="taskForm.value.status === TaskWizardStatusesEnum.Active"
9+
(change)="changeStatus($event.checked)"
10+
>
911
{{ 'Status' | translate }}
1012
</mat-slide-toggle>
13+
1114
<div class="d-flex flex-row">
1215
<mat-form-field class="p-2">
1316
<mat-label>{{ 'Location' | translate }}</mat-label>
@@ -16,7 +19,7 @@ <h3 mat-dialog-title>{{'Create new task' | translate}}</h3>
1619
[bindValue]="'id'"
1720
[bindLabel]="'name'"
1821
id="createProperty"
19-
[value]="model.propertyId"
22+
formControlName="propertyId"
2023
(change)="changePropertyId($event)"
2124
[clearable]="false"
2225
/>
@@ -28,7 +31,7 @@ <h3 mat-dialog-title>{{'Create new task' | translate}}</h3>
2831
[bindValue]="'id'"
2932
[bindLabel]="'name'"
3033
id="createTableTags"
31-
[value]="model.itemPlanningTagId"
34+
formControlName="itemPlanningTagId"
3235
(change)="changePlanningTagId($event)"
3336
[clearable]="true"
3437
[multiple]="false"
@@ -56,8 +59,8 @@ <h3 mat-dialog-title>{{'Create new task' | translate}}</h3>
5659
id="createFolder"
5760
(click)="openFoldersModal()"
5861
style="margin-left: -10px"
59-
[disabled]="!model.propertyId"
60-
[matTooltip]="(!model.propertyId ? 'Need to select property': 'Select folder') | translate"
62+
[disabled]="!taskForm.value.propertyId"
63+
[matTooltip]="(!taskForm.value.propertyId ? 'Need to select property' : 'Select folder') | translate"
6164
>
6265
<mat-icon>folder</mat-icon>
6366
</button>
@@ -71,9 +74,10 @@ <h3 mat-dialog-title>{{'Create new task' | translate}}</h3>
7174
<input
7275
matInput
7376
[matDatepicker]="picker"
74-
[value]="model.startDate"
77+
matInput
78+
[matDatepicker]="picker"
79+
formControlName="startDate"
7580
(dateChange)="updateStartDate($event)"
76-
(dateInput)="updateStartDate($event)"
7781
(click)="picker.open()"
7882
id="createStartFrom"
7983
name="createStartFrom"
@@ -88,7 +92,7 @@ <h3 mat-dialog-title>{{'Create new task' | translate}}</h3>
8892
[bindValue]="'id'"
8993
[bindLabel]="'name'"
9094
id="createTags"
91-
[value]="model.tagIds"
95+
formControlName="tagIds"
9296
(change)="changeTagIds($event)"
9397
[clearable]="true"
9498
[multiple]="true"
@@ -116,25 +120,25 @@ <h3 mat-dialog-title>{{'Create new task' | translate}}</h3>
116120
[bindValue]="'id'"
117121
[bindLabel]="'name'"
118122
id="createRepeatType"
119-
[value]="model.repeatType"
120-
(change)="changeRepeatType($event)"
123+
formControlName="repeatType"
124+
(change)="changeRepeatType($event.id ?? $event)"
121125
[clearable]="false"
122126
[multiple]="false"
123127
/>
124128
</mat-form-field>
125-
<mat-form-field class="p-2" *ngIf="model.repeatType !== 0">
129+
<mat-form-field class="p-2" *ngIf="taskForm.get('repeatType')?.value !== 0">
126130
<mat-label>{{ 'Repeat every' | translate }}</mat-label>
127131
<mtx-select
128132
[items]="repeatTypeMass()"
129133
[bindValue]="'id'"
130134
[bindLabel]="'name'"
131135
id="createRepeatEvery"
132-
[value]="model.repeatEvery"
133-
(change)="changeRepeatEvery($event)"
136+
formControlName="repeatEvery"
137+
(change)="changeRepeatEvery($event.id ?? $event)"
134138
[clearable]="false"
135139
[multiple]="false"
136-
[disabled]="model.repeatType === 0"
137-
[readonly]="model.repeatType === 0"
140+
[disabled]="taskForm.value.repeatType === 0"
141+
[readonly]="taskForm.value.repeatType === 0"
138142
/>
139143
</mat-form-field>
140144
</div>
@@ -147,73 +151,117 @@ <h3 mat-dialog-title>{{'Create new task' | translate}}</h3>
147151
[disabled]="true"
148152
>
149153
</mat-form-field>-->
150-
<ng-container *ngFor="let languageModel of model.translates; let i = index; first as isFirst; last as isLast">
151-
<ng-container *ngIf="i % 2 === 0">
152-
<div class="d-flex flex-row">
153-
<!-- Render the current item -->
154-
<!-- <div>{{getLanguageName(languageModel.languageId)}}</div>-->
155-
<mat-form-field class="p-2">
156-
<mat-label>{{'Task description' | translate}} ({{getLanguageName(languageModel.languageId)}})</mat-label>
157-
<input
158-
type="text"
159-
matInput
160-
id="createName{{i}}"
161-
name="createName{{i}}"
162-
[ngModel]="languageModel.name"
163-
(ngModelChange)="updateName($event, i)"
164-
>
165-
</mat-form-field>
166-
<!-- Check if there's a next item and render it -->
167-
168-
<mat-form-field *ngIf="model.translates[i + 1]" class="p-2">
169-
<mat-label>{{'Task description' | translate}} ({{getLanguageName(model.translates[i + 1].languageId)}})</mat-label>
170-
<input
171-
type="text"
172-
matInput
173-
id="createName{{i + 1}}"
174-
[ngModel]="model.translates[i + 1].name"
175-
(ngModelChange)="updateName($event, i + 1)"
176-
>
177-
</mat-form-field>
178-
<!-- {{ getLanguageName(model.translates[i + 1].languageId) }}-->
179-
</div>
180-
</ng-container>
181-
<!-- create -->
182-
<!-- <mat-card-->
183-
<!-- [class.mt-2]="!isFirst"-->
184-
<!-- [class.mb-2]="isLast">-->
185-
<!-- <mat-card-title>{{getLanguageName(languageModel.languageId)}}</mat-card-title>-->
186-
<!-- <mat-card-content>-->
187-
<!-- <mat-form-field>-->
188-
<!-- <mat-label>{{'Task description' | translate}} ({{getLanguageName(languageModel.languageId)}})</mat-label>-->
154+
<!-- <div formArrayName="translates">-->
155+
<!-- <ng-container *ngFor="let languageModel of taskForm.get('translates')['controls']; let i = index; first as isFirst; last as isLast" [formGroupName]="i">-->
156+
<!-- <ng-container *ngIf="i % 2 === 0">-->
157+
<!-- <div class="d-flex flex-row">-->
158+
<!-- &lt;!&ndash; Render the current item &ndash;&gt;-->
159+
<!--&lt;!&ndash; <div>{{getLanguageName(languageModel.languageId)}}</div>&ndash;&gt;-->
160+
<!-- <mat-form-field class="p-2">-->
161+
<!-- <mat-label>{{'Task description' | translate}} ({{ getLanguageName(translate.get('languageId')?.value) }})</mat-label>-->
189162
<!-- <input-->
190163
<!-- type="text"-->
191164
<!-- matInput-->
192165
<!-- id="createName{{i}}"-->
193-
<!-- [ngModel]="languageModel.name"-->
166+
<!-- name="createName{{i}}"-->
167+
<!-- formControlName="name"-->
194168
<!-- (ngModelChange)="updateName($event, i)"-->
195169
<!-- >-->
196170
<!-- </mat-form-field>-->
197-
<!-- </mat-card-content>-->
198-
<!-- </mat-card>-->
171+
<!-- &lt;!&ndash; Check if there's a next item and render it &ndash;&gt;-->
199172

200-
<!--<app-eform-translation
201-
[class.mt-2]="!isFirst"
202-
[class.mb-2]="isLast"
203-
[model]="languageModel"
204-
(modelChange)="updateLanguageModel($event, i)"
205-
[title]="getLanguageName(languageModel.languageId)"/>-->
206-
</ng-container>
207-
<div class="d-flex flex-row">
173+
<!-- <mat-form-field *ngIf="model.translates[i + 1]" class="p-2">-->
174+
<!-- <mat-label>{{'Task description' | translate}} ({{getLanguageName(model.translates[i + 1].languageId)}})</mat-label>-->
175+
<!-- <input-->
176+
<!-- type="text"-->
177+
<!-- matInput-->
178+
<!-- id="createName{{i + 1}}"-->
179+
<!-- [ngModel]="model.translates[i + 1].name"-->
180+
<!-- (ngModelChange)="updateName($event, i + 1)"-->
181+
<!-- >-->
182+
<!-- </mat-form-field>-->
183+
<!--&lt;!&ndash; {{ getLanguageName(model.translates[i + 1].languageId) }}&ndash;&gt;-->
184+
<!-- </div>-->
185+
<!-- </ng-container>-->
186+
<!-- &lt;!&ndash; create &ndash;&gt;-->
187+
<!--&lt;!&ndash; <mat-card&ndash;&gt;-->
188+
<!--&lt;!&ndash; [class.mt-2]="!isFirst"&ndash;&gt;-->
189+
<!--&lt;!&ndash; [class.mb-2]="isLast">&ndash;&gt;-->
190+
<!--&lt;!&ndash; <mat-card-title>{{getLanguageName(languageModel.languageId)}}</mat-card-title>&ndash;&gt;-->
191+
<!--&lt;!&ndash; <mat-card-content>&ndash;&gt;-->
192+
<!--&lt;!&ndash; <mat-form-field>&ndash;&gt;-->
193+
<!--&lt;!&ndash; <mat-label>{{'Task description' | translate}} ({{getLanguageName(languageModel.languageId)}})</mat-label>&ndash;&gt;-->
194+
<!--&lt;!&ndash; <input&ndash;&gt;-->
195+
<!--&lt;!&ndash; type="text"&ndash;&gt;-->
196+
<!--&lt;!&ndash; matInput&ndash;&gt;-->
197+
<!--&lt;!&ndash; id="createName{{i}}"&ndash;&gt;-->
198+
<!--&lt;!&ndash; [ngModel]="languageModel.name"&ndash;&gt;-->
199+
<!--&lt;!&ndash; (ngModelChange)="updateName($event, i)"&ndash;&gt;-->
200+
<!--&lt;!&ndash; >&ndash;&gt;-->
201+
<!--&lt;!&ndash; </mat-form-field>&ndash;&gt;-->
202+
<!--&lt;!&ndash; </mat-card-content>&ndash;&gt;-->
203+
<!--&lt;!&ndash; </mat-card>&ndash;&gt;-->
204+
205+
<!-- &lt;!&ndash;<app-eform-translation-->
206+
<!-- [class.mt-2]="!isFirst"-->
207+
<!-- [class.mb-2]="isLast"-->
208+
<!-- [model]="languageModel"-->
209+
<!-- (modelChange)="updateLanguageModel($event, i)"-->
210+
<!-- [title]="getLanguageName(languageModel.languageId)"/>&ndash;&gt;-->
211+
<!-- </ng-container>-->
212+
<!-- </div>-->
213+
214+
215+
<div formArrayName="translates">
216+
<ng-container
217+
*ngFor="let translate of taskForm.get('translates')['controls']; let i = index"
218+
[formGroupName]="i"
219+
>
220+
<ng-container *ngIf="i % 2 === 0">
221+
<div class="d-flex flex-row">
222+
<!-- First translation -->
223+
<mat-form-field class="p-2">
224+
<mat-label>
225+
{{ 'Task description' | translate }}
226+
({{ getLanguageName(translate.get('languageId')?.value) }})
227+
</mat-label>
228+
<input
229+
matInput
230+
type="text"
231+
id="createName{{ i }}"
232+
formControlName="name"
233+
/>
234+
</mat-form-field>
235+
236+
<!-- Next translation if exists -->
237+
<ng-container *ngIf="taskForm.get('translates')['controls'][i + 1] as nextTranslate">
238+
<mat-form-field class="p-2">
239+
<mat-label>
240+
{{ 'Task description' | translate }}
241+
({{ getLanguageName(nextTranslate.get('languageId')?.value) }})
242+
</mat-label>
243+
<input
244+
matInput
245+
type="text"
246+
id="createName{{ i + 1 }}"
247+
[formControl]="nextTranslate.get('name')"
248+
/>
249+
</mat-form-field>
250+
</ng-container>
251+
</div>
252+
</ng-container>
253+
</ng-container>
254+
</div>
255+
<div class="d-flex flex-row">
208256
<mat-form-field class="p-2">
209257
<mat-label>{{'eForm template' | translate}}</mat-label>
210258
<mtx-select
211259
[items]="templatesModel.templates"
212260
[bindLabel]="'label'"
213261
[bindValue]="'id'"
214262
[typeahead]="typeahead"
215-
[value]="model.eformId"
216-
(change)="updateEformId($event)"
263+
formControlName="eformId"
264+
(change)="updateEformId($event.id ?? $event)"
217265
id="createTemplateSelector"
218266
[clearable]="false"
219267
[multiple]="false"
@@ -261,3 +309,4 @@ <h3 mat-dialog-title>{{'Create new task' | translate}}</h3>
261309
{{ 'Cancel' | translate }}
262310
</button>
263311
</div>
312+
</div>

0 commit comments

Comments
 (0)