Skip to content

Commit a84e056

Browse files
Angeluz-07Angeluz-07
authored
Merge pull request #533 from ioet/529_improve_forms
fix: 📱 improve forms of time-entries page
2 parents 90b85f3 + 279c46c commit a84e056

File tree

4 files changed

+98
-114
lines changed

4 files changed

+98
-114
lines changed

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

Lines changed: 87 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,9 @@
22
<label *ngIf='canMarkEntryAsWIP'><input id='isEntryRunning' type="checkbox" (change)="onGoingToWorkOnThisChange($event)" [checked]="goingToWorkOnThis"> I am working on
33
this</label>
44

5-
<div class="input-group input-group-sm mb-3">
6-
7-
<div class="input-group-prepend">
8-
<span class="input-group-text span-width">Project</span>
9-
</div>
10-
11-
<div class="form-control autocomplete">
5+
<div class="form-group row">
6+
<label class="col-12 col-sm-2 col-form-label">Project:</label>
7+
<div class="col-12 col-sm-10 autocomplete">
128
<ng-autocomplete
139
(selected)='onSelectedProject($event)'
1410
(inputCleared)='onClearedComponent($event)'
@@ -36,110 +32,116 @@
3632
</ng-template>
3733
<!-- <app-loading-bar *ngIf="(isLoading$ | async)"></app-loading-bar> -->
3834
</div>
39-
40-
4135
</div>
4236

43-
<div class="input-group input-group-sm mb-3">
44-
<div class="input-group-prepend">
45-
<span class="input-group-text span-width">Activity</span>
37+
38+
<div class="form-group row">
39+
<label class="col-12 col-sm-2 col-form-label">Activity:</label>
40+
<div class="col-12 col-sm-10">
41+
<select
42+
[class.is-invalid]="activity_id.invalid"
43+
required
44+
id="activity_id"
45+
class="custom-select"
46+
formControlName="activity_id"
47+
>
48+
<option value="" selected="selected"></option>
49+
<option *ngFor="let activity of activities" value="{{ activity.id }}">{{ activity.name }}</option>
50+
</select>
4651
</div>
47-
<select
48-
[class.is-invalid]="activity_id.invalid"
49-
required
50-
id="activity_id"
51-
class="custom-select"
52-
formControlName="activity_id"
53-
>
54-
<option value="" selected="selected"></option>
55-
<option *ngFor="let activity of activities" value="{{ activity.id }}">{{ activity.name }}</option>
56-
</select>
5752
<div
5853
class="invalid-feedback"
5954
*ngIf="(activity_id.dirty || activity_id.touched) && activity_id.invalid && activity_id.errors.required"
6055
></div>
6156
</div>
6257

63-
<div class="input-group input-group-sm mb-3">
64-
<div class="input-group-prepend">
65-
<span class="input-group-text span-width">Ticket</span>
58+
59+
<div class="form-group row">
60+
<label class="col-12 col-sm-2 col-form-label">Ticket:</label>
61+
<div class="col-12 col-sm-10">
62+
<input
63+
formControlName="uri"
64+
id="uri"
65+
type="text"
66+
class="form-control"
67+
aria-label="Small"
68+
aria-describedby="inputGroup-sizing-sm"
69+
/>
6670
</div>
67-
<input
68-
formControlName="uri"
69-
id="uri"
70-
type="text"
71-
class="form-control"
72-
aria-label="Small"
73-
aria-describedby="inputGroup-sizing-sm"
74-
/>
7571
</div>
7672

77-
<div class="input-group input-group-sm mb-3">
78-
<div class="input-group-prepend">
79-
<span class="input-group-text span-width">Date</span>
73+
74+
<div class="form-group row">
75+
<label class="col-12 col-sm-2 col-form-label">Date:</label>
76+
<div class="col-12 col-sm-10">
77+
<input
78+
formControlName="entry_date"
79+
id="entry_date"
80+
type="date"
81+
class="form-control"
82+
aria-label="Small"
83+
aria-describedby="inputGroup-sizing-sm"
84+
[class.is-invalid]="entry_date.invalid && entry_date.touched"
85+
required
86+
/>
8087
</div>
81-
<input
82-
formControlName="entry_date"
83-
id="entry_date"
84-
type="date"
85-
class="form-control"
86-
aria-label="Small"
87-
aria-describedby="inputGroup-sizing-sm"
88-
[class.is-invalid]="entry_date.invalid && entry_date.touched"
89-
required
90-
/>
9188
</div>
92-
<div class="input-group input-group-sm mb-3">
93-
<div class="input-group-prepend">
94-
<span class="input-group-text span-width">Time in</span>
89+
90+
91+
<div class="form-group row">
92+
<label class="col-12 col-sm-2 col-form-label pr-0">Time in:</label>
93+
<div class="col-12 col-sm-4">
94+
<input
95+
[clearIfNotMatch]="true"
96+
[showMaskTyped]="true"
97+
[dropSpecialCharacters]="false"
98+
matInput
99+
mask="Hh:m0:s0"
100+
onClick="this.select();"
101+
formControlName="start_hour"
102+
id="start_hour"
103+
type="text"
104+
class="form-control"
105+
aria-label="Small"
106+
[class.is-invalid]="start_hour.invalid && start_hour.touched"
107+
required
108+
aria-describedby="inputGroup-sizing-sm"
109+
/>
95110
</div>
96-
<input
97-
[clearIfNotMatch]="true"
98-
[showMaskTyped]="true"
99-
[dropSpecialCharacters]="false"
100-
matInput
101-
mask="Hh:m0:s0"
102-
onClick="this.select();"
103-
formControlName="start_hour"
104-
id="start_hour"
105-
type="text"
106-
class="form-control"
107-
aria-label="Small"
108-
[class.is-invalid]="start_hour.invalid && start_hour.touched"
109-
required
110-
aria-describedby="inputGroup-sizing-sm"
111-
/>
112-
<div class="input-group-prepend" *ngIf="!goingToWorkOnThis">
113-
<span class="input-group-text span-width">Time out</span>
111+
112+
<label class="col-12 col-sm-2 col-form-label pr-0" *ngIf="!goingToWorkOnThis">Time out:</label>
113+
<div class="col-12 col-sm-4" *ngIf="!goingToWorkOnThis">
114+
<input
115+
*ngIf="!goingToWorkOnThis"
116+
[clearIfNotMatch]="true"
117+
[showMaskTyped]="true"
118+
[dropSpecialCharacters]="false"
119+
matInput
120+
onClick="this.select();"
121+
mask="Hh:m0:s0"
122+
formControlName="end_hour"
123+
type="text"
124+
id="end_hour"
125+
class="form-control"
126+
aria-label="Small"
127+
[class.is-invalid]="end_hour.invalid && end_hour.touched"
128+
required
129+
aria-describedby="inputGroup-sizing-sm"
130+
/>
114131
</div>
115-
<input
116-
*ngIf="!goingToWorkOnThis"
117-
[clearIfNotMatch]="true"
118-
[showMaskTyped]="true"
119-
[dropSpecialCharacters]="false"
120-
matInput
121-
onClick="this.select();"
122-
mask="Hh:m0:s0"
123-
formControlName="end_hour"
124-
type="text"
125-
id="end_hour"
126-
class="form-control"
127-
aria-label="Small"
128-
[class.is-invalid]="end_hour.invalid && end_hour.touched"
129-
required
130-
aria-describedby="inputGroup-sizing-sm"
131-
/>
132132
</div>
133133

134+
134135
<app-technologies
135136
(technologyAdded)="onTechnologiesUpdated($event)"
136137
(technologyRemoved)="onTechnologiesUpdated($event)"
137138
[selectedTechnologies]="selectedTechnologies"
138139
>
139140
</app-technologies>
140141

142+
141143
<div class="form-group text-left">
142-
<label for="NotesTextarea">Description</label>
144+
<label for="NotesTextarea">Description:</label>
143145
<textarea maxlength="1500" formControlName="description" class="form-control" id="NotesTextarea"
144146
rows="3"></textarea>
145147
</div>

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

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -60,32 +60,6 @@
6060
}
6161
}
6262

63-
.ng-autocomplete {
64-
width: 100%;
65-
}
66-
67-
.autocomplete::ng-deep .autocomplete-container {
68-
border: 1px solid #ced4da;
69-
border-radius: 0 0.25rem 0.25rem 0;
70-
box-shadow: none;
71-
height: 2rem;
72-
73-
.input-container {
74-
height: 100%;
75-
76-
input {
77-
border-radius: 0.25rem;
78-
height: 100%;
79-
}
80-
}
81-
}
82-
83-
.validation::ng-deep {
84-
.autocomplete .autocomplete-container {
85-
border: 1px solid red;
86-
}
87-
}
88-
8963

9064
input[type="date"]::-webkit-calendar-picker-indicator {
9165
position: absolute;
@@ -114,10 +88,8 @@ input[type="date"]::-webkit-clear-button {
11488
}
11589

11690
.autocomplete {
117-
width: 80%;
11891
display: block;
11992
background-clip: padding-box;
12093
border: none;
12194
margin: 0em;
122-
padding: 0em;
12395
}

‎src/app/modules/time-clock/pages/time-clock.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<app-time-entries-summary></app-time-entries-summary>
22

3-
<div style="width: 70%;">
3+
<div class="entry-container">
44

55
<div class="row pb-4">
66
<div class="col-12">

‎src/app/modules/time-clock/pages/time-clock.component.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,13 @@
1212
background-color: $primary;
1313
color: white;
1414
}
15+
16+
.entry-container{
17+
width: 100%;
18+
}
19+
20+
@media (min-width: 992px) {
21+
.entry-container{
22+
width: 70%;
23+
}
24+
}

0 commit comments

Comments
 (0)