admin/cmc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#46 refactor to use ngClass and ngStyle

Browse Source
This commit is contained in:
Art
2021-10-08 11:05:50 +03:00
parent fa29b7e4fe
commit 05b5a9fb0e
3 changed files with 30 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
support-portal-frontend/src/app/component/login/login.component.html
View File

@ -29,8 +29,7 @@
<div class="d-flex justify-content-center mt-3 login_container">
<button type="submit" [disabled]="loginForm.invalid || showLoading" name="button" class="btn login_btn">
<i class="fas fa-spinner fa-spin" *ngIf="showLoading"></i>&nbsp;&nbsp;
<span *ngIf="showLoading">Loading...</span>
<span *ngIf="!showLoading">Login</span>
<span>{{showLoading ? 'Loading...' : 'Login'}}</span>
</button>
</div>
</form>

3
support-portal-frontend/src/app/component/register/register.component.html
View File

@ -52,8 +52,7 @@
<div class="d-flex justify-content-center mt-3 login_container">
<button type="submit" [disabled]="registerForm.invalid || showLoading" name="button" class="btn login_btn">
<i class="fas fa-spinner fa-spin" *ngIf="showLoading"></i>&nbsp;&nbsp;
<span *ngIf="showLoading">Loading...</span>
<span *ngIf="!showLoading">Register</span>
<span *ngIf="showLoading">{{showLoading ? 'Loading...' : 'Register'}}</span>
</button>
</div>
</form>

57
support-portal-frontend/src/app/component/user/user.component.html
View File

@ -60,8 +60,7 @@
</div>
<div class="btn-group">
<button type="button" class="btn btn-info" (click)="getUsers(true)">
<i *ngIf="refreshing" class="fas fa-sync fa-spin"></i>
<i *ngIf="!refreshing" class="fas fa-sync"></i>
<i class="fas fa-sync" [ngClass]="{'fa-spin': refreshing }"></i>
</button>
</div>
</div>
@ -90,8 +89,9 @@
<td (click)="onSelectUser(appUser)">{{appUser?.username}}</td>
<td (click)="onSelectUser(appUser)">{{appUser?.email}}</td>
<td (click)="onSelectUser(appUser)">
<span class="badge bg-success" [hidden]="!appUser?.active">Active</span>
<span class="badge bg-danger" [hidden]="appUser?.active">Inactive</span>
<span class="badge" [ngClass]="{ 'bg-success': appUser?.active, 'bg-danger': !appUser?.active }">
{{appUser?.active ? 'Active' : 'Inactive'}}
</span>
</td>
<td class="">
<div class="btn-group">
@ -124,8 +124,7 @@
</div>
<button type="submit" [disabled]="resetPasswordForm.invalid" class="btn btn-primary">
<i *ngIf="refreshing" class="fas fa-spinner fa-spin"></i>&nbsp;&nbsp;
<span *ngIf="refreshing">Loading...</span>
<span *ngIf="!refreshing">Reset Password</span>
<span>{{refreshing ? 'Loading...' : 'Reset Password'}}</span>
</button>
</fieldset>
</form>
@ -221,12 +220,13 @@
<div class="col mb-3">
<div class="form-group">
<label>Role</label><small [hidden]="isAdmin">(read only)</small>
<select [disabled]="!isAdmin" name="role" required [(ngModel)]="loggedInUser.role" class="form-control">
<option [hidden]="false" value="ROLE_USER">USER</option>
<option [hidden]="false" value="ROLE_HR">HR</option>
<option [hidden]="false" value="ROLE_MANAGER">MANAGER</option>
<option [hidden]="false" value="ROLE_ADMIN">ADMIN</option>
<option [hidden]="false" value="ROLE_SUPER_ADMIN">SUPER ADMIN</option>
<select [disabled]="!isAdmin" name="role" required [(ngModel)]="loggedInUser.role"
class="form-control">
<option value="ROLE_USER">USER</option>
<option value="ROLE_HR">HR</option>
<option value="ROLE_MANAGER">MANAGER</option>
<option value="ROLE_ADMIN">ADMIN</option>
<option value="ROLE_SUPER_ADMIN">SUPER ADMIN</option>
</select>
</div>
</div>
@ -240,7 +240,8 @@
<div class="col">
<div class="custom-controls-stacked px-2">
<div class="custom-control custom-checkbox">
<input [disabled]="!isAdmin" name="active" type="checkbox" [(ngModel)]="loggedInUser.active"
<input [disabled]="!isAdmin" name="active" type="checkbox"
[(ngModel)]="loggedInUser.active"
class="custom-control-input">
<label class="custom-control-label">Active</label>
</div>
@ -258,8 +259,7 @@
<div class="col d-flex justify-content-end">
<button class="btn btn-primary" type="submit">
<i *ngIf="refreshing" class="fas fa-spinner fa-spin"></i>&nbsp;&nbsp;
<span *ngIf="refreshing">Loading...</span>
<span *ngIf="!refreshing">Save Changes</span>
<span>{{refreshing ? 'Loading...' : 'Save Changes'}}</span>
</button>
</div>
</div>
@ -326,8 +326,10 @@
class="pt-sm-2 pb-1 mb-0 text-nowrap">{{selectedUser.firstName}} {{selectedUser.lastName}}</h6>
<p class="mb-1">{{selectedUser.username}}</p>
<div class="">Status:
<span *ngIf="selectedUser.active" class="badge bg-success">Active</span>
<span *ngIf="!selectedUser.active" class="badge bg-danger">Inactive</span>
<span class="badge"
[ngClass]="{'bg-success':selectedUser.active,'bg-danger':!selectedUser.active}">
{{selectedUser.active ? 'Active' : 'Inactive'}}
</span>
</div>
<div *ngIf="selectedUser.lastLoginDateDisplay" class="text-muted">
<small>Last Login: {{selectedUser.lastLoginDateDisplay | date: 'medium' }}</small>
@ -353,13 +355,11 @@
{{ selectedUser.lastLoginDateDisplay | date: 'medium' }}
</li>
<li class="list-group-item">
<span *ngIf="!selectedUser?.notLocked">
<i class="fa fa-lock float-end" style="color: red;"></i>
Account Locked
</span>
<span *ngIf="selectedUser?.notLocked">
<i class="fa fa-unlock float-end" style="color: green;"></i>
Account Unlocked
<span>
<i class="fa float-end"
[ngClass]="{'fa-unlock':selectedUser?.notLocked, 'fa-lock':!selectedUser?.notLocked}"
[ngStyle]="{color: selectedUser?.notLocked ? 'green' : 'red'}"></i>
Account {{selectedUser?.notLocked ? 'Unlocked' : 'Locked'}}
</span>
</li>
</ul>
@ -374,7 +374,8 @@
</div>
<!-- modal add user -->
<div *ngIf="isManager" class="modal draggable fade bd-example-modal-lg" id="addUserModal" tabindex="-1" role="dialog"
<div *ngIf="isManager" class="modal draggable fade bd-example-modal-lg" id="addUserModal" tabindex="-1"
role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
@ -428,8 +429,7 @@
(change)="onProfileImageChange($any($event).target.files)"
class="custom-file-input">
<label class="custom-file-label">
<span [hidden]="!profileImageFileName">{{profileImageFileName}}</span>
<span [hidden]="profileImageFileName">Choose File</span>
<span>{{profileImageFileName ? profileImageFileName : 'Choose File'}}</span>
</label>
</div>
</div>
@ -517,8 +517,7 @@
(change)="onProfileImageChange($any($event).target.files)"
class="custom-file-input" [disabled]="!isManager">
<label class="custom-file-label">
<span [hidden]="!profileImageFileName">{{profileImageFileName}}</span>
<span [hidden]="profileImageFileName">Choose File</span>
<span>{{profileImageFileName ? profileImageFileName : 'Choose File'}}</span>
</label>
</div>
</div>