Skip to content

Commit 79fede2

Browse files
AramAlsabtiAramAlsabti
committed
Fix UI bug with search field
1 parent 67e7f1e commit 79fede2

File tree

3 files changed

+85
-70
lines changed

3 files changed

+85
-70
lines changed

‎src/app/admin/users/new-kombit-user-page/new-user.component.html‎

Lines changed: 42 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -7,63 +7,58 @@
77
<h1>
88
{{ 'NEW_USER.FIRST_LOGIN' | translate }}
99
</h1>
10-
<form (ngSubmit)="onSubmit()" #newUserForm="ngForm" class="p-3 mt-4">
10+
<form (ngSubmit)="onSubmit()" #newUserForm="ngForm">
1111
<div *ngIf="errorMessages" class="error-messages p-3">
1212
<ul class="mb-0">
1313
<li *ngFor="let error of errorMessages">
1414
{{ error | translate }}
1515
</li>
1616
</ul>
1717
</div>
18-
<div class="row">
19-
<div class="form-group mt-3">
20-
<label class="form-label" for="createNewKombitUserDto.email">{{
21-
'USERS.EMAIL' | translate
22-
}}</label
23-
>*
18+
<div class="form-group mt-3">
19+
<label class="form-label" for="createNewKombitUserDto.email">{{
20+
'USERS.EMAIL' | translate
21+
}}</label
22+
>*
23+
24+
<input
25+
type="email"
26+
class="form-control"
27+
id="email"
28+
maxlength="50"
29+
required
30+
name="email"
31+
[(ngModel)]="createNewKombitUserFromFrontend.email"
32+
[ngClass]="{
33+
'is-invalid':
34+
formFailedSubmit && errorFields.includes('email'),
35+
'is-valid': formFailedSubmit && !errorFields.includes('email')
36+
}"
37+
/>
38+
</div>
2439

25-
<input
26-
type="email"
27-
class="form-control"
28-
id="email"
29-
maxlength="50"
30-
required
31-
name="email"
32-
[(ngModel)]="createNewKombitUserFromFrontend.email"
33-
[ngClass]="{
34-
'is-invalid':
35-
formFailedSubmit && errorFields.includes('email'),
36-
'is-valid': formFailedSubmit && !errorFields.includes('email')
37-
}"
38-
/>
39-
</div>
40+
<div class="form-group mt-3 mb-5">
41+
<label class="form-label" for="new-organisations">{{'NAV.ORGANISATIONS' | translate}}</label>*
42+
<mat-select
43+
class="form-control"
44+
[placeholder]="'NAV.ORGANISATIONS' | translate"
45+
[multiple]="true"
46+
name="new-organisations"
47+
[compareWith]="compare"
48+
[(ngModel)]="createNewKombitUserFromFrontend.requestedOrganizations"
49+
panelClass="overflow-x-hidden"
50+
aria-required="true"
51+
>
52+
<mat-select-search
53+
[formControl]="organisationsFilterCtrl"
54+
></mat-select-search>
4055

41-
<div class="form-group mt-3 mb-4 col-12">
42-
<label class="form-label" for="organisations">{{'NAV.ORGANISATIONS' | translate}}</label>*
43-
<mat-select
44-
id="organisations"
45-
name="organisations"
46-
class="form-control"
47-
[placeholder]="'NAV.ORGANISATIONS' | translate"
48-
[multiple]="true"
49-
[compareWith]="compare"
50-
[(ngModel)]="
51-
createNewKombitUserFromFrontend.requestedOrganizations
52-
"
53-
panelClass="overflow-x-hidden"
54-
aria-required="true"
56+
<mat-option
57+
*ngFor="let org of filteredOrganisations | async"
58+
[value]="org"
59+
>{{ org.name }}</mat-option
5560
>
56-
<mat-select-search
57-
[formControl]="organisationsFilterCtrl"
58-
></mat-select-search>
59-
60-
<mat-option
61-
*ngFor="let org of filteredOrganisations | async"
62-
[value]="org"
63-
>{{ org.name }}</mat-option
64-
>
65-
</mat-select>
66-
</div>
61+
</mat-select>
6762
</div>
6863
<div class="form-group mt-3">
6964
<button class="btn btn-primary" type="submit">

‎src/app/shared/components/top-bar/top-bar.component.html‎

Lines changed: 37 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
<ng-template #emptySearchForm>
2+
<mat-form-field class="search-form--full-width invisible">
3+
<input
4+
matInput
5+
/>
6+
</mat-form-field>
7+
</ng-template>
8+
19
<div class="row top-bar-wrapper">
210
<div class="top-bar">
311
<div class="topbarWidth">
@@ -102,28 +110,35 @@ <h3 class="pl-md-3">{{ title || staticTitle }}</h3>
102110
<div class="col-md-5 order-first order-md-last search-form-wrapper">
103111
<!-- Search -->
104112

105-
<form *ngIf="hasEmail() && hasAnyPermission()" class="search-form">
106-
<mat-form-field class="search-form--full-width">
107-
<mat-label >{{ 'SEARCH.PLACEHOLDER' | translate }}</mat-label>
108-
<input
109-
matInput
110-
id="searchQuery"
111-
class="search--input"
112-
aria-label="Search"
113-
#searchInput
114-
[value]="decode(searchQuery)"
115-
(keyup.enter)="search(searchInput.value)"
116-
/>
117-
<a
118-
matSuffix
119-
class="has-pointer"
120-
(click)="search(searchInput.value)"
121-
>
122-
<div class="search-icon">
123-
<fa-icon [icon]="faSearch"></fa-icon>
124-
</div>
125-
</a>
126-
</mat-form-field>
113+
<form class="search-form">
114+
<!--
115+
Handle UI bug where mat-select-field isn't full width. Use an empty form if the
116+
condition isn't true.
117+
Material styling are not applied properly if the ng-container is moved inside the mat-form-field.
118+
-->
119+
<ng-container *ngIf="hasEmail() && hasAnyPermission(); else emptySearchForm">
120+
<mat-form-field class="search-form--full-width">
121+
<mat-label >{{ 'SEARCH.PLACEHOLDER' | translate }}</mat-label>
122+
<input
123+
matInput
124+
id="searchQuery"
125+
class="search--input"
126+
aria-label="Search"
127+
#searchInput
128+
[value]="decode(searchQuery)"
129+
(keyup.enter)="search(searchInput.value)"
130+
/>
131+
<a
132+
matSuffix
133+
class="has-pointer"
134+
(click)="search(searchInput.value)"
135+
>
136+
<div class="search-icon">
137+
<fa-icon [icon]="faSearch"></fa-icon>
138+
</div>
139+
</a>
140+
</mat-form-field>
141+
</ng-container>
127142
</form>
128143
</div>
129144
</div>

‎src/app/shared/components/top-bar/top-bar.component.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,9 @@ button:focus {
3939
align-items: center;
4040
}
4141

42-
42+
.invisible{
43+
display: none;
44+
visibility: hidden;
45+
height: 0;
46+
width: 0;
47+
}

0 commit comments

Comments
 (0)