Skip to content

Commit 71a1c99

Browse files
DiegoTinitanaDiegoTinitana
committed
fix: #227 Enhance entries modal
1 parent d8d8339 commit 71a1c99

File tree

11 files changed

+389
-156
lines changed

11 files changed

+389
-156
lines changed

‎src/app/modules/shared/components/details-fields/details-fields.component.html‎

Lines changed: 127 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,143 @@
1-
<div>
2-
<div class="input-group input-group-sm mb-3 flex-nowrap">
1+
<form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
2+
<div class="input-group input-group-sm mb-3">
33
<div class="input-group-prepend">
44
<span class="input-group-text span-width" id="inputGroup-sizing-sm">Project</span>
55
</div>
6-
<div class="ng-autocomplete">
7-
<ng-autocomplete
8-
class="autocomplete"
9-
name="projectName"
10-
ngDefaultControl
11-
[(ngModel)]="projectName"
12-
[data]="listProjects && listProjects"
13-
[searchKeyword]="keyword"
14-
[itemTemplate]="itemTemplate"
15-
[notFoundTemplate]="notFoundTemplate"
16-
>
17-
</ng-autocomplete>
18-
<ng-template #itemTemplate let-item>
19-
<a [innerHTML]="item.name"></a>
20-
</ng-template>
21-
<ng-template #notFoundTemplate let-notFound>
22-
<div [innerHTML]="notFound"></div>
23-
</ng-template>
24-
</div>
6+
<select
7+
[class.is-invalid]="project.invalid && project.touched"
8+
required
9+
id="activity"
10+
class="form-control"
11+
formControlName="project"
12+
>
13+
<option *ngFor="let project of listProjects">{{ project.name }}</option>
14+
</select>
2515
</div>
26-
<form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
27-
<div class="input-group input-group-sm mb-3">
28-
<div class="input-group-prepend">
29-
<span class="input-group-text span-width" id="inputGroup-sizing-sm">Activity</span>
30-
</div>
31-
<select id="activitiesSelect" class="form-control" formControlName="activity">
32-
<option *ngFor="let activity of activities">{{ activity.name }}</option>
33-
</select>
16+
<div class="input-group input-group-sm mb-3">
17+
<div class="input-group-prepend">
18+
<span class="input-group-text span-width" id="inputGroup-sizing-sm">Activity</span>
3419
</div>
20+
<select
21+
[class.is-invalid]="activity.invalid && activity.touched"
22+
required
23+
id="activity"
24+
class="form-control"
25+
formControlName="activity"
26+
>
27+
<option *ngFor="let activity of activities">{{ activity.name }}</option>
28+
</select>
29+
</div>
3530

36-
<div class="input-group input-group-sm mb-3">
37-
<div class="input-group-prepend">
38-
<span class="input-group-text span-width" id="inputGroup-sizing-sm">Ticket</span>
39-
</div>
40-
<input
41-
formControlName="uri"
42-
type="text"
43-
class="form-control"
44-
aria-label="Small"
45-
aria-describedby="inputGroup-sizing-sm"
46-
/>
31+
<div class="input-group input-group-sm mb-3">
32+
<div class="input-group-prepend">
33+
<span class="input-group-text span-width" id="inputGroup-sizing-sm">Ticket</span>
4734
</div>
35+
<input
36+
formControlName="uri"
37+
id="uri"
38+
type="text"
39+
class="form-control"
40+
aria-label="Small"
41+
aria-describedby="inputGroup-sizing-sm"
42+
/>
43+
</div>
4844

49-
<div class="input-group input-group-sm mb-3">
50-
<div class="input-group-prepend">
51-
<span class="input-group-text span-width" id="inputGroup-sizing-sm">Start/Date</span>
52-
</div>
53-
<input
54-
formControlName="start_date"
55-
type="date"
56-
class="form-control"
57-
aria-label="Small"
58-
aria-describedby="inputGroup-sizing-sm"
59-
/>
60-
<div class="input-group-prepend">
61-
<span class="input-group-text span-width" id="inputGroup-sizing-sm">Start/Hour</span>
62-
</div>
63-
<input
64-
formControlName="start_hour"
65-
type="text"
66-
class="form-control"
67-
aria-label="Small"
68-
aria-describedby="inputGroup-sizing-sm"
69-
/>
45+
<div class="input-group input-group-sm mb-3">
46+
<div class="input-group-prepend">
47+
<span class="input-group-text span-width" id="inputGroup-sizing-sm">Start/Date</span>
7048
</div>
71-
<div class="input-group input-group-sm mb-3">
72-
<div class="input-group-prepend">
73-
<span class="input-group-text span-width" id="inputGroup-sizing-sm">End/Date</span>
74-
</div>
75-
<input
76-
formControlName="end_date"
77-
type="date"
78-
class="form-control"
79-
aria-label="Small"
80-
aria-describedby="inputGroup-sizing-sm"
81-
/>
82-
<div class="input-group-prepend">
83-
<span class="input-group-text span-width" id="inputGroup-sizing-sm">End/Hour</span>
84-
</div>
85-
<input
86-
formControlName="end_hour"
87-
type="text"
88-
class="form-control"
89-
aria-label="Small"
90-
aria-describedby="inputGroup-sizing-sm"
91-
/>
49+
<input
50+
formControlName="start_date"
51+
id="start_date"
52+
type="date"
53+
class="form-control"
54+
aria-label="Small"
55+
aria-describedby="inputGroup-sizing-sm"
56+
[class.is-invalid]="start_date.invalid && start_date.touched || hoursValidation"
57+
required
58+
/>
59+
<div class="input-group-prepend">
60+
<span class="input-group-text span-width" id="inputGroup-sizing-sm">Start/Hour</span>
9261
</div>
93-
<div class="input-group input-group-sm">
94-
<div class="input-group-prepend">
95-
<span class="input-group-text span-width" id="inputGroup-sizing-sm">Technology</span>
96-
</div>
97-
<input
98-
(keypress)="getTechnologies($event.target.value)"
99-
type="text"
100-
class="form-control"
101-
aria-label="Small"
102-
aria-describedby="inputGroup-sizing-sm"
103-
/>
62+
<input
63+
formControlName="start_hour"
64+
id="start_hour"
65+
type="text"
66+
class="form-control"
67+
aria-label="Small"
68+
[class.is-invalid]="start_hour.invalid && start_hour.touched || hoursValidation"
69+
required
70+
aria-describedby="inputGroup-sizing-sm"
71+
/>
72+
</div>
73+
<div class="input-group input-group-sm mb-3">
74+
<div class="input-group-prepend">
75+
<span class="input-group-text span-width" id="inputGroup-sizing-sm">End/Date</span>
10476
</div>
105-
106-
<div *ngIf="isLoading">LOADING...</div>
107-
<div #list *ngIf="technology && showlist" class="d-flex flex-column technology-content">
108-
<div
109-
*ngFor="let item of technology.items"
110-
(click)="setTechnology(item.name)"
111-
class="technology-list"
112-
[ngClass]="{ active: selectedTechnology.includes(item.name) }"
113-
>
114-
{{ item.name }}
115-
</div>
77+
<input
78+
formControlName="end_date"
79+
id="end_date"
80+
type="date"
81+
class="form-control"
82+
aria-label="Small"
83+
[class.is-invalid]="end_date.invalid && end_date.touched"
84+
required
85+
aria-describedby="inputGroup-sizing-sm"
86+
/>
87+
<div class="input-group-prepend">
88+
<span class="input-group-text span-width" id="inputGroup-sizing-sm">End/Hour</span>
11689
</div>
117-
<div class="tags-content d-flex flex-wrap">
118-
<div *ngFor="let technology of selectedTechnology; let tagIndex = index" class="tag">
119-
<span class="mr-3">{{ technology }}</span>
120-
<i class="fas fa-times text-white" (click)="removeTag(tagIndex)"></i>
121-
</div>
90+
<input
91+
formControlName="end_hour"
92+
type="text"
93+
id="end_hour"
94+
class="form-control"
95+
aria-label="Small"
96+
[class.is-invalid]="end_hour.invalid && end_hour.touched"
97+
required
98+
aria-describedby="inputGroup-sizing-sm"
99+
/>
100+
</div>
101+
<div class="input-group input-group-sm">
102+
<div class="input-group-prepend">
103+
<span class="input-group-text span-width" id="inputGroup-sizing-sm">Technology</span>
122104
</div>
105+
<input
106+
(keypress)="getTechnologies($event.target.value)"
107+
type="text"
108+
class="form-control"
109+
aria-label="Small"
110+
aria-describedby="inputGroup-sizing-sm"
111+
formControlName="technology"
112+
/>
113+
</div>
123114

124-
<div class="form-group text-left">
125-
<label for="NotesTextarea">Description</label>
126-
<textarea formControlName="description" class="form-control" id="NotesTextarea" rows="3"></textarea>
115+
<div *ngIf="isLoading">LOADING...</div>
116+
<div #list *ngIf="technology && showlist" class="d-flex flex-column technology-content">
117+
<div
118+
*ngFor="let item of technology.items"
119+
(click)="setTechnology(item.name)"
120+
class="technology-list"
121+
[ngClass]="{ active: selectedTechnology.includes(item.name) }"
122+
>
123+
{{ item.name }}
127124
</div>
128-
<div class="modal-footer">
129-
<button type="submit" class="btn btn-primary">Save</button>
130-
<button #closeModal type="button" class="btn btn-secondary" data-dismiss="modal">
131-
Cancel
132-
</button>
125+
</div>
126+
<div class="tags-content d-flex flex-wrap">
127+
<div *ngFor="let technology of selectedTechnology; let tagIndex = index" class="tag">
128+
<span class="mr-3">{{ technology }}</span>
129+
<i class="fas fa-times text-white" (click)="removeTag(tagIndex)"></i>
133130
</div>
134-
</form>
135-
</div>
131+
</div>
132+
133+
<div class="form-group text-left">
134+
<label for="NotesTextarea">Description</label>
135+
<textarea formControlName="description" class="form-control" id="NotesTextarea" rows="3"></textarea>
136+
</div>
137+
<div class="modal-footer">
138+
<button type="submit" class="btn btn-primary" [disabled]="!entryForm.valid">Save</button>
139+
<button #closeModal type="button" class="btn btn-secondary" data-dismiss="modal">
140+
Close
141+
</button>
142+
</div>
143+
</form>

‎src/app/modules/shared/components/details-fields/details-fields.component.scss‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,13 @@
8080
}
8181
}
8282

83+
.validation::ng-deep {
84+
.autocomplete .autocomplete-container {
85+
border: 1px solid red;
86+
}
87+
}
88+
89+
8390
input[type="date"]::-webkit-calendar-picker-indicator {
8491
position: absolute;
8592
top: 0;
@@ -98,5 +105,5 @@ input[type="date"]::-webkit-inner-spin-button {
98105
}
99106

100107
input[type="date"]::-webkit-clear-button {
101-
z-index: 1;
108+
display: none;
102109
}

0 commit comments

Comments
 (0)