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

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

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