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

171. Open edit model logic (#23 Section 24: User Page - Edit User)

Browse Source
This commit is contained in:
Art
2021-09-21 18:55:48 +03:00
parent 6300e95650
commit 72a3336e14
2 changed files with 99 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -67,23 +67,23 @@
</tr>
</thead>
<tbody>
<tr class="text-center" *ngFor="let appUser of users" (click)="onSelectUser(appUser)">
<td>
<tr class="text-center" *ngFor="let appUser of users">
<td (click)="onSelectUser(appUser)">
<img height="40" width="40" src="{{appUser?.profileImageUrl}}"
class="rounded-circle img-fluid img-thumbnail" alt=""/>
</td>
<td>{{appUser?.userId}}</td>
<td>{{appUser?.firstName}}</td>
<td>{{appUser?.lastName}}</td>
<td>{{appUser?.username}}</td>
<td>{{appUser?.email}}</td>
<td>
<td (click)="onSelectUser(appUser)">{{appUser?.userId}}</td>
<td (click)="onSelectUser(appUser)">{{appUser?.firstName}}</td>
<td (click)="onSelectUser(appUser)">{{appUser?.lastName}}</td>
<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>
</td>
<td class="">
<div class="btn-group">
<button class="btn btn-outline-info"><i class="fas fa-edit"></i></button>
<button class="btn btn-outline-info" (click)="onEditUser(appUser)"><i class="fas fa-edit"></i></button>
<button class="btn btn-outline-danger"><i class="fas fa-trash"></i></button>
</div>
</td>
@ -94,7 +94,7 @@
<button [hidden]="true" type="button" id="openUserInfo" data-bs-toggle="modal" data-bs-target="#viewUserModal">
</button>
<button [hidden]="true" type="button" id="openUserEdit" data-toggle="modal" data-bs-target="#editUserModal">
<button [hidden]="true" type="button" id="openUserEdit" data-bs-toggle="modal" data-bs-target="#editUserModal">
</button>
<!-- modal user info -->
@ -258,6 +258,87 @@
</div>
</div>
<!-- modal edit user -->
<div class="modal draggable fade bd-example-modal-lg" id="editUserModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-center">Edit User</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div>
<form #editUserForm="ngForm" (ngSubmit)="onAddNewUser(editUserForm)">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" name="firstName" required ngModel="{{editUser.firstName}}" class="form-control">
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" name="lastName" required ngModel class="form-control">
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" required ngModel class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" required ngModel class="form-control">
</div>
<div class="form-group">
<label for="authority">Role</label>
<select name="role" required ngModel="ROLE_USER" 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 class="input-group mb-2">
<div class="input-group-prepend">
<span class="input-group-text">Profile Picture </span>
</div>
<div class="custom-file">
<input type="file" accept="image/*" name="profileImage"
(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>
</label>
</div>
</div>
<fieldset class="form-group">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" name="active" ngModel class="form-check-input">
Active
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="checkbox" name="notLocked" ngModel class="form-check-input">
Unlocked
</label>
</div>
</fieldset>
<button type="submit" style="display: none;" id="new-user-save"></button>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="new-user-close">Close</button>
<button type="button" class="btn btn-primary" (click)="saveNewUser()" [disabled]="newUserForm.invalid">Save
changes
</button>
</div>
</div>
</div>
</div>
</div>
</div>

8
support-portal-frontend/src/app/component/user/user.component.ts
View File

@ -23,6 +23,8 @@ export class UserComponent implements OnInit, OnDestroy {
public selectedUser: User;
public profileImageFileName: string | null;
public profileImage: File | null;
public editUser: User = new User();
private currentUsername: string;
constructor(private userService: UserService,
private notificationService: NotificationService) {
@ -128,4 +130,10 @@ export class UserComponent implements OnInit, OnDestroy {
private clickButton(buttonId: string): void {
document.getElementById(buttonId)?.click();
}
public onEditUser(user: User): void {
this.editUser = user;
this.currentUsername = user.username;
this.clickButton('openUserEdit');
}
}