|
|
|
|
@ -3,9 +3,9 @@
|
|
|
|
|
<div class="container-fluid">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-12">
|
|
|
|
|
<div class="d-sm-flex align-items-center justify-content-between navbar-header p-0">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="d-sm-flex align-items-center justify-content-between navbar-header p-0"
|
|
|
|
|
></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="container-fluid">
|
|
|
|
|
@ -18,176 +18,309 @@
|
|
|
|
|
<div class="card-body mt-2 p-0">
|
|
|
|
|
<div class="card mb-0 mt-2">
|
|
|
|
|
<div
|
|
|
|
|
class="card-header font-edit-13-child d-flex justify-content-between align-items-center">
|
|
|
|
|
{{'setupUser' | translate}}
|
|
|
|
|
class="card-header font-edit-13-child d-flex justify-content-between align-items-center"
|
|
|
|
|
>
|
|
|
|
|
{{ "setupUser" | translate }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<form [formGroup]="userForm">
|
|
|
|
|
<div class="row g-3 mb-3">
|
|
|
|
|
<!-- User ID -->
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<div class="d-flex align-items-center gap-2">
|
|
|
|
|
<label for="userId" class="text-nowrap">
|
|
|
|
|
{{ 'userId' | translate }}<span
|
|
|
|
|
class="mandatory">*</span>
|
|
|
|
|
{{ "userId" | translate
|
|
|
|
|
}}<span class="mandatory">*</span>
|
|
|
|
|
</label>
|
|
|
|
|
<div class="password-wrapper position-relative w-100">
|
|
|
|
|
<div class="d-flex flex-row align-items-stretch">
|
|
|
|
|
<input type="text" id="userId"
|
|
|
|
|
<div
|
|
|
|
|
class="password-wrapper position-relative w-100"
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
id="userId"
|
|
|
|
|
class="form-control"
|
|
|
|
|
formControlName="userId"
|
|
|
|
|
name="userId"
|
|
|
|
|
placeholder="{{ 'userID' | translate }}" appNoWhitespaces
|
|
|
|
|
placeholder="{{ 'userID' | translate }}"
|
|
|
|
|
appNoWhitespaces
|
|
|
|
|
[readonly]="mode === 'edit'"
|
|
|
|
|
[class.bg-light]="mode === 'edit'"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="text-danger" *ngIf="userForm.get('userId')?.touched && userForm.get('userId')?.invalid">
|
|
|
|
|
<div *ngIf="
|
|
|
|
|
userForm.get('userId')?.errors?.['required'] &&
|
|
|
|
|
!userForm.get('userId')?.value
|
|
|
|
|
">
|
|
|
|
|
{{ 'fieldRequired' | translate }}
|
|
|
|
|
<div
|
|
|
|
|
class="text-danger"
|
|
|
|
|
*ngIf="
|
|
|
|
|
userForm.get('userId')?.touched &&
|
|
|
|
|
userForm.get('userId')?.invalid
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
*ngIf="
|
|
|
|
|
userForm.get('userId')?.errors?.[
|
|
|
|
|
'required'
|
|
|
|
|
]
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
{{ "fieldRequired" | translate }}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
*ngIf="
|
|
|
|
|
userForm.get('userId')?.errors?.[
|
|
|
|
|
'minlength'
|
|
|
|
|
]
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
{{ "userIdMinLength" | translate }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-danger" *ngIf="
|
|
|
|
|
userForm.get('userId')?.errors?.['minlength'] &&
|
|
|
|
|
userForm.get('userId')?.value
|
|
|
|
|
">
|
|
|
|
|
{{'userIdMinLength' | translate }}
|
|
|
|
|
<div
|
|
|
|
|
*ngIf="
|
|
|
|
|
userForm.get('userId')?.errors?.[
|
|
|
|
|
'pattern'
|
|
|
|
|
]
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
{{
|
|
|
|
|
"emptySpaceRestriction" | translate
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="text-danger" *ngIf="
|
|
|
|
|
userForm.get('userId')?.errors?.['pattern'] &&
|
|
|
|
|
userForm.get('userId')?.value
|
|
|
|
|
">
|
|
|
|
|
{{'emptySpaceRestriction' | translate}}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Full Name -->
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<div class="d-flex align-items-start gap-2">
|
|
|
|
|
<label for="name"
|
|
|
|
|
class="text-nowrap mt-2">
|
|
|
|
|
{{ 'name' | translate }}<span
|
|
|
|
|
class="mandatory">*</span>
|
|
|
|
|
<label
|
|
|
|
|
for="userFullname"
|
|
|
|
|
class="text-nowrap mt-2"
|
|
|
|
|
>
|
|
|
|
|
{{ "name" | translate
|
|
|
|
|
}}<span class="mandatory">*</span>
|
|
|
|
|
</label>
|
|
|
|
|
<div class="password-wrapper position-relative w-100">
|
|
|
|
|
|
|
|
|
|
<input id="userFullname"
|
|
|
|
|
<div
|
|
|
|
|
class="password-wrapper position-relative w-100"
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
id="userFullname"
|
|
|
|
|
class="form-control"
|
|
|
|
|
formControlName="userFullname"
|
|
|
|
|
name="userFullname"
|
|
|
|
|
maxlength="500"
|
|
|
|
|
placeholder="{{ 'Full Name' | translate }}"
|
|
|
|
|
rows="3" />
|
|
|
|
|
placeholder="{{
|
|
|
|
|
'Full Name' | translate
|
|
|
|
|
}}"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<div class="text-danger" *ngIf="userForm.get('userFullname')?.touched && userForm.get('userFullname')?.invalid">
|
|
|
|
|
<div *ngIf="
|
|
|
|
|
userForm.get('userFullname')?.errors?.['required'] &&
|
|
|
|
|
!userForm.get('userFullname')?.value
|
|
|
|
|
">
|
|
|
|
|
{{ 'fieldRequired' | translate }}
|
|
|
|
|
<div
|
|
|
|
|
class="text-danger"
|
|
|
|
|
*ngIf="
|
|
|
|
|
userForm.get('userFullname')?.touched &&
|
|
|
|
|
userForm.get('userFullname')?.invalid
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
*ngIf="
|
|
|
|
|
userForm.get('userFullname')
|
|
|
|
|
?.errors?.['required']
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
{{ "fieldRequired" | translate }}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
*ngIf="
|
|
|
|
|
userForm.get('userFullname')
|
|
|
|
|
?.errors?.['minlength']
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
{{ "nameMinLength" | translate }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-danger" *ngIf="
|
|
|
|
|
userForm.get('userFullname')?.errors?.['minlength'] &&
|
|
|
|
|
userForm.get('userFullname')?.value
|
|
|
|
|
">
|
|
|
|
|
{{'nameMinLength' | translate }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="row g-3 mb-3">
|
|
|
|
|
<!-- Email -->
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<div class="d-flex align-items-center gap-2">
|
|
|
|
|
<label for="email" class="text-nowrap">
|
|
|
|
|
{{ 'email' | translate }}<span
|
|
|
|
|
class="mandatory">*</span>
|
|
|
|
|
{{ "email" | translate
|
|
|
|
|
}}<span class="mandatory">*</span>
|
|
|
|
|
</label>
|
|
|
|
|
<div class="password-wrapper position-relative w-100">
|
|
|
|
|
<input id="email"
|
|
|
|
|
<div
|
|
|
|
|
class="password-wrapper position-relative w-100"
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
id="email"
|
|
|
|
|
class="form-control"
|
|
|
|
|
formControlName="email"
|
|
|
|
|
name="email"
|
|
|
|
|
placeholder="{{ 'email' | translate }}" appNoWhitespaces/>
|
|
|
|
|
placeholder="{{ 'email' | translate }}"
|
|
|
|
|
appNoWhitespaces
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<div class="text-danger" *ngIf="userForm.get('email')?.errors?.['required']
|
|
|
|
|
&& userForm.get('email')?.touched">
|
|
|
|
|
{{ 'fieldRequired' | translate }}
|
|
|
|
|
<div
|
|
|
|
|
class="text-danger"
|
|
|
|
|
*ngIf="
|
|
|
|
|
userForm.get('email')?.touched &&
|
|
|
|
|
userForm.get('email')?.invalid
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
*ngIf="
|
|
|
|
|
userForm.get('email')?.errors?.[
|
|
|
|
|
'required'
|
|
|
|
|
]
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
{{ "fieldRequired" | translate }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-danger" *ngIf="userForm.get('email')?.errors?.['email']
|
|
|
|
|
&& userForm.get('email')?.touched">
|
|
|
|
|
<div
|
|
|
|
|
*ngIf="
|
|
|
|
|
userForm.get('email')?.errors?.[
|
|
|
|
|
'email'
|
|
|
|
|
]
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
{{ "invalidEmail" | translate }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Password -->
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<div class="d-flex align-items-center gap-2">
|
|
|
|
|
<label for="defaultPassword" class="text-nowrap">
|
|
|
|
|
{{ 'defaultPassword' | translate }}<span
|
|
|
|
|
class="mandatory">*</span>
|
|
|
|
|
<label
|
|
|
|
|
for="defaultPassword"
|
|
|
|
|
class="text-nowrap"
|
|
|
|
|
>
|
|
|
|
|
{{ "password" | translate
|
|
|
|
|
}}<span class="mandatory" *ngIf="mode === 'create'">*</span>
|
|
|
|
|
<span class="text-muted small" *ngIf="mode === 'edit'"></span>
|
|
|
|
|
</label>
|
|
|
|
|
<div class="password-wrapper position-relative w-100">
|
|
|
|
|
<input id="defaultPassword"
|
|
|
|
|
<div
|
|
|
|
|
class="password-wrapper position-relative w-100"
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
id="defaultPassword"
|
|
|
|
|
type="password"
|
|
|
|
|
class="form-control"
|
|
|
|
|
formControlName="defaultPassword"
|
|
|
|
|
name="defaultPassword"
|
|
|
|
|
placeholder="{{ 'passwordPlaceHolder' | translate }}" appNoWhitespaces/>
|
|
|
|
|
placeholder="{{
|
|
|
|
|
mode === 'create' ? ('passwordPlaceHolder' | translate) : ('newPasswordOptional' | translate)
|
|
|
|
|
}}"
|
|
|
|
|
appNoWhitespaces
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<div class="text-danger" *ngIf="userForm.get('defaultPassword')?.touched && userForm.get('defaultPassword')?.invalid">
|
|
|
|
|
<div *ngIf="userForm.get('defaultPassword')?.hasError('required')">
|
|
|
|
|
{{ 'fieldRequired' | translate }}
|
|
|
|
|
<div
|
|
|
|
|
class="text-danger"
|
|
|
|
|
*ngIf="
|
|
|
|
|
userForm.get('defaultPassword')
|
|
|
|
|
?.touched &&
|
|
|
|
|
userForm.get('defaultPassword')?.invalid
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
*ngIf="
|
|
|
|
|
userForm.get('defaultPassword')
|
|
|
|
|
?.errors?.['required'] &&
|
|
|
|
|
mode === 'create'
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
{{ "fieldRequired" | translate }}
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="
|
|
|
|
|
!userForm.get('defaultPassword')?.hasError('required') &&
|
|
|
|
|
userForm.get('defaultPassword')?.hasError('pattern')
|
|
|
|
|
">
|
|
|
|
|
{{ 'passwordPattern' | translate }}
|
|
|
|
|
<div
|
|
|
|
|
*ngIf="
|
|
|
|
|
!userForm.get('defaultPassword')
|
|
|
|
|
?.errors?.['required'] &&
|
|
|
|
|
userForm.get('defaultPassword')
|
|
|
|
|
?.errors?.['pattern']
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
{{ "passwordPattern" | translate }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="row g-3 mb-3">
|
|
|
|
|
<!-- User Role -->
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<div class="d-flex align-items-center gap-2">
|
|
|
|
|
<label for="userRole" class="text-nowrap">
|
|
|
|
|
{{ 'SelectRole' | translate }}<span class="mandatory">*</span>
|
|
|
|
|
{{ "SelectRole" | translate
|
|
|
|
|
}}<span class="mandatory">*</span>
|
|
|
|
|
</label>
|
|
|
|
|
<div class="position-relative w-100">
|
|
|
|
|
<ng-select id="userRole" class="form-select form-select-narrow" formControlName="userRole" [items]="roleOptions" bindLabel="label"
|
|
|
|
|
bindValue="value" placeholder="{{ 'SelectRole' | translate }}" >
|
|
|
|
|
<ng-select
|
|
|
|
|
id="userRole"
|
|
|
|
|
class="form-select form-select-narrow"
|
|
|
|
|
formControlName="userRole"
|
|
|
|
|
[items]="roleOptions"
|
|
|
|
|
bindLabel="label"
|
|
|
|
|
bindValue="value"
|
|
|
|
|
placeholder="{{
|
|
|
|
|
'SelectRole' | translate
|
|
|
|
|
}}"
|
|
|
|
|
>
|
|
|
|
|
</ng-select>
|
|
|
|
|
|
|
|
|
|
<div class="text-danger" *ngIf="userForm.get('userRole')?.touched && userForm.get('userRole')?.invalid">
|
|
|
|
|
{{ 'fieldRequired' | translate }}
|
|
|
|
|
<div
|
|
|
|
|
class="text-danger"
|
|
|
|
|
*ngIf="
|
|
|
|
|
userForm.get('userRole')?.touched &&
|
|
|
|
|
userForm.get('userRole')?.invalid
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
{{ "fieldRequired" | translate }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Action Buttons -->
|
|
|
|
|
<div class="row g-3 mb-3">
|
|
|
|
|
<div class="col-md-6 ms-auto text-end">
|
|
|
|
|
<button type="button" class="btn btn-primary waves-effect waves-light" (click)="onSubmit()" [disabled]="userForm.invalid"
|
|
|
|
|
<!-- Save button for create mode -->
|
|
|
|
|
<button
|
|
|
|
|
*ngIf="mode === 'create'"
|
|
|
|
|
type="button"
|
|
|
|
|
class="btn btn-primary waves-effect waves-light"
|
|
|
|
|
(click)="onSubmit()"
|
|
|
|
|
[disabled]="userForm.invalid"
|
|
|
|
|
>
|
|
|
|
|
{{ 'save' | translate }}
|
|
|
|
|
{{ "save" | translate }}
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<!-- Update button for edit mode -->
|
|
|
|
|
<button
|
|
|
|
|
*ngIf="mode === 'edit'"
|
|
|
|
|
type="button"
|
|
|
|
|
class="btn btn-primary waves-effect waves-light me-2"
|
|
|
|
|
(click)="onUpdate()"
|
|
|
|
|
[disabled]="userForm.invalid || !isFormDirty()"
|
|
|
|
|
>
|
|
|
|
|
{{ "update" | translate }}
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<!-- Cancel button for edit mode -->
|
|
|
|
|
<button
|
|
|
|
|
*ngIf="mode === 'edit'"
|
|
|
|
|
type="button"
|
|
|
|
|
class="btn btn-secondary waves-effect waves-light"
|
|
|
|
|
(click)="cancelEdit()"
|
|
|
|
|
>
|
|
|
|
|
{{ "cancel" | translate }}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -202,23 +335,42 @@
|
|
|
|
|
<div class="container-fluid">
|
|
|
|
|
<div class="col-xl-12 mt-4">
|
|
|
|
|
<div class="card border">
|
|
|
|
|
<div class="card-body" *ngIf="renewalDataExpanded && allItems.length; else noRecordsFound">
|
|
|
|
|
<div
|
|
|
|
|
class="card-body"
|
|
|
|
|
*ngIf="
|
|
|
|
|
renewalDataExpanded && allItems.length;
|
|
|
|
|
else noRecordsFound
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
<div class="table-section">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-lg-12">
|
|
|
|
|
<div class="card-body mt-2 p-0">
|
|
|
|
|
<div class="card mb-0 mt-2">
|
|
|
|
|
<div class="card-header font-edit-13-child d-flex justify-content-between align-items-center">
|
|
|
|
|
{{'SetupUserDetails' | translate}}
|
|
|
|
|
<div
|
|
|
|
|
class="card-header font-edit-13-child d-flex justify-content-between align-items-center"
|
|
|
|
|
>
|
|
|
|
|
{{ "SetupUserDetails" | translate }}
|
|
|
|
|
<div class="d-flex align-items-center gap-2">
|
|
|
|
|
<div class="search-box">
|
|
|
|
|
<input type="text" class="form-control form-control-sm"
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
class="form-control form-control-sm"
|
|
|
|
|
[(ngModel)]="searchText"
|
|
|
|
|
placeholder="{{ 'search' | translate }}">
|
|
|
|
|
placeholder="{{ 'search' | translate }}"
|
|
|
|
|
/>
|
|
|
|
|
<i class="fas fa-search search-icon"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<i class="materialdesignicons" (click)="toggleTableCard()">
|
|
|
|
|
<ng-container *ngIf="userSetupDataExpanded; else collapsedIcon">
|
|
|
|
|
<i
|
|
|
|
|
class="materialdesignicons"
|
|
|
|
|
(click)="toggleTableCard()"
|
|
|
|
|
>
|
|
|
|
|
<ng-container
|
|
|
|
|
*ngIf="
|
|
|
|
|
userSetupDataExpanded;
|
|
|
|
|
else collapsedIcon
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
<i class="dripicons-chevron-up float-end"></i>
|
|
|
|
|
</ng-container>
|
|
|
|
|
<ng-template #collapsedIcon>
|
|
|
|
|
@ -227,51 +379,99 @@
|
|
|
|
|
</i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-body" *ngIf="userSetupDataExpanded && allItems.length; else noRecordsFound">
|
|
|
|
|
<div
|
|
|
|
|
class="card-body"
|
|
|
|
|
*ngIf="
|
|
|
|
|
userSetupDataExpanded && allItems.length;
|
|
|
|
|
else noRecordsFound
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
<div class="table-responsive">
|
|
|
|
|
<table class="table mb-0 border">
|
|
|
|
|
<thead class="table-light">
|
|
|
|
|
<tr>
|
|
|
|
|
<th style="width: 30%">{{'userID' | translate}}</th>
|
|
|
|
|
<th style="width: 30%">{{'Name' | translate}}</th>
|
|
|
|
|
<th style="width: 30%">{{'Role' | translate}}</th>
|
|
|
|
|
<th style="width: 10%">{{'action' | translate}}</th>
|
|
|
|
|
<th style="width: 25%">
|
|
|
|
|
{{ "userID" | translate }}
|
|
|
|
|
</th>
|
|
|
|
|
<th style="width: 25%">
|
|
|
|
|
{{ "Name" | translate }}
|
|
|
|
|
</th>
|
|
|
|
|
<th style="width: 25%">
|
|
|
|
|
{{ "Email" | translate }}
|
|
|
|
|
</th>
|
|
|
|
|
<th style="width: 15%">
|
|
|
|
|
{{ "Role" | translate }}
|
|
|
|
|
</th>
|
|
|
|
|
<th style="width: 10%">
|
|
|
|
|
{{ "action" | translate }}
|
|
|
|
|
</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr *ngFor="let item of (allItems | tableFilter: searchText : ['userId', 'userFullname']).slice((currentPage-1)*itemsPerPage, currentPage*itemsPerPage)">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<tr
|
|
|
|
|
*ngFor="
|
|
|
|
|
let item of (
|
|
|
|
|
allItems
|
|
|
|
|
| tableFilter
|
|
|
|
|
: searchText
|
|
|
|
|
: ['userId', 'userFullname', 'email']
|
|
|
|
|
).slice(
|
|
|
|
|
(currentPage - 1) * itemsPerPage,
|
|
|
|
|
currentPage * itemsPerPage
|
|
|
|
|
)
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
<td>{{ item.userId }}</td>
|
|
|
|
|
<td>{{ item.userFullname }}</td>
|
|
|
|
|
<td>{{item.role}}</td>
|
|
|
|
|
|
|
|
|
|
<td>{{ item.email }}</td>
|
|
|
|
|
<td>{{ getRoleLabel(item.role) }}</td>
|
|
|
|
|
|
|
|
|
|
<td>
|
|
|
|
|
<div class="d-flex justify-content-center gap-2">
|
|
|
|
|
|
|
|
|
|
<button class="btn btn-info btn-sm" title="View" (click)="onView(item.userId)">
|
|
|
|
|
<div
|
|
|
|
|
class="d-flex justify-content-center gap-2"
|
|
|
|
|
>
|
|
|
|
|
<button
|
|
|
|
|
class="btn btn-info btn-sm"
|
|
|
|
|
title="View/Edit"
|
|
|
|
|
(click)="onView(item.userId)"
|
|
|
|
|
>
|
|
|
|
|
<i class="mdi mdi-eye-outline"></i>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="btn btn-warning btn-sm" *ngIf="buttonPermissions?.resetPasswordButton" title="Reset Password" (click)="openResetPasswordModal(item.userId)">
|
|
|
|
|
<button
|
|
|
|
|
class="btn btn-warning btn-sm"
|
|
|
|
|
*ngIf="
|
|
|
|
|
buttonPermissions?.resetPasswordButton
|
|
|
|
|
"
|
|
|
|
|
title="Reset Password"
|
|
|
|
|
(click)="
|
|
|
|
|
openResetPasswordModal(item.userId)
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
<i class="mdi mdi-lock-reset"></i>
|
|
|
|
|
</button>
|
|
|
|
|
<button *ngIf="buttonPermissions?.delete" class="btn btn-danger btn-sm" title="Delete"
|
|
|
|
|
(click)="confirmDelete(item.userId)">
|
|
|
|
|
<button
|
|
|
|
|
*ngIf="buttonPermissions?.delete"
|
|
|
|
|
class="btn btn-danger btn-sm"
|
|
|
|
|
title="Delete"
|
|
|
|
|
(click)="confirmDelete(item.userId)"
|
|
|
|
|
>
|
|
|
|
|
<i class="fas fa-trash-alt"></i>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
<app-reset-password-modal [userId]="selectedUserId">
|
|
|
|
|
<app-reset-password-modal
|
|
|
|
|
[userId]="selectedUserIdForReset ?? ''"
|
|
|
|
|
(modalClosed)="closeResetPasswordModal()">
|
|
|
|
|
</app-reset-password-modal>
|
|
|
|
|
<div class="d-flex justify-content-between align-items-center mt-3">
|
|
|
|
|
<div
|
|
|
|
|
class="d-flex justify-content-between align-items-center mt-3"
|
|
|
|
|
>
|
|
|
|
|
<div class="form-group mb-0">
|
|
|
|
|
<ng-select class="form-select-sm"
|
|
|
|
|
<ng-select
|
|
|
|
|
class="form-select-sm"
|
|
|
|
|
[items]="pageSizeOptions"
|
|
|
|
|
bindLabel="label"
|
|
|
|
|
bindValue="value"
|
|
|
|
|
@ -279,27 +479,39 @@
|
|
|
|
|
(change)="itemsPerPageChanged()"
|
|
|
|
|
[searchable]="false"
|
|
|
|
|
[clearable]="false"
|
|
|
|
|
[dropdownPosition]="'top'">
|
|
|
|
|
[dropdownPosition]="'top'"
|
|
|
|
|
>
|
|
|
|
|
</ng-select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="text-muted" *ngIf="allItems.length > 1">
|
|
|
|
|
{{'page' | translate}} {{currentPage}} {{'of' |
|
|
|
|
|
translate}} {{totalPages()}} ({{allItems.length}}
|
|
|
|
|
{{'totalItems' | translate}})
|
|
|
|
|
<div
|
|
|
|
|
class="text-muted"
|
|
|
|
|
*ngIf="allItems.length > 1"
|
|
|
|
|
>
|
|
|
|
|
{{ "page" | translate }} {{ currentPage }}
|
|
|
|
|
{{ "of" | translate }} {{ totalPages() }} ({{
|
|
|
|
|
allItems.length
|
|
|
|
|
}}
|
|
|
|
|
{{ "totalItems" | translate }})
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="btn-group">
|
|
|
|
|
<button class="btn btn-primary waves-effect waves-light" (click)="previousPage()">
|
|
|
|
|
{{ 'previous' | translate }}
|
|
|
|
|
<button
|
|
|
|
|
class="btn btn-primary waves-effect waves-light"
|
|
|
|
|
(click)="previousPage()"
|
|
|
|
|
[disabled]="currentPage === 1"
|
|
|
|
|
>
|
|
|
|
|
{{ "previous" | translate }}
|
|
|
|
|
</button>
|
|
|
|
|
<button class="btn btn-primary waves-effect waves-light" (click)="nextPage()">
|
|
|
|
|
{{ 'next' | translate }}
|
|
|
|
|
<button
|
|
|
|
|
class="btn btn-primary waves-effect waves-light"
|
|
|
|
|
(click)="nextPage()"
|
|
|
|
|
[disabled]="currentPage === totalPages()"
|
|
|
|
|
>
|
|
|
|
|
{{ "next" | translate }}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -315,7 +527,10 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<ng-template #noRecordsFound>
|
|
|
|
|
<div *ngIf="!isLoading && allItems.length === 0" class="text-center text-muted mt-3">
|
|
|
|
|
<p>{{'noUserDetailsFound' | translate}}</p>
|
|
|
|
|
<div
|
|
|
|
|
*ngIf="!isLoading && allItems.length === 0"
|
|
|
|
|
class="text-center text-muted mt-3"
|
|
|
|
|
>
|
|
|
|
|
<p>{{ "noUserDetailsFound" | translate }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</ng-template>
|