You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
299 lines
16 KiB
HTML
299 lines
16 KiB
HTML
<div id="layout-wrapper">
|
|
<div class="inner-pg-sp">
|
|
<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>
|
|
</div>
|
|
|
|
<div class="container-fluid">
|
|
<div class="col-xl-12 mt-4">
|
|
|
|
<!-- CARD 1: User Selection + Permissions Table -->
|
|
<div class="card border mb-4">
|
|
<div class="card-body">
|
|
<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 mb-3">
|
|
{{ "userPermission" | translate }}
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
<!-- User Selection -->
|
|
<div class="card shadow-sm mb-4">
|
|
<div class="card-body">
|
|
<form [formGroup]="permission" class="row align-items-center">
|
|
<label class="col-md-2 col-form-label fw-semibold">
|
|
{{ "userCode" | translate }}
|
|
</label>
|
|
<div class="col-md-6">
|
|
<ng-select class="form-select" formControlName="userCode" [items]="users"
|
|
bindLabel="userName" bindValue="userId"
|
|
placeholder="{{ 'choose' | translate }}" (change)="onUserChange()"
|
|
[searchable]="true" [clearable]="false" [dropdownPosition]="'auto'"
|
|
[virtualScroll]="true" [bufferAmount]="20" appendTo="body">
|
|
<ng-template ng-option-tmp let-item="item">
|
|
<div class="d-flex flex-column">
|
|
<span class="fw-medium">{{ item.userName }}</span>
|
|
<small class="text-muted">{{ item.userId }}</small>
|
|
</div>
|
|
</ng-template>
|
|
<ng-template ng-label-tmp let-item="item">
|
|
<span>{{ item.userName }} ({{ item.userId }})</span>
|
|
</ng-template>
|
|
</ng-select>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Permissions Table -->
|
|
<div class="card shadow-sm" *ngIf="showPermissions">
|
|
<div class="card-body">
|
|
<h4 class="card-title mb-3">{{ "menu" | translate }}</h4>
|
|
<div class="table-responsive scrollable-table">
|
|
<table class="table table-hover table-bordered table-sm permission-table">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th style="width: 50px">#</th>
|
|
<th>{{ "type" | translate }}</th>
|
|
<th style="width: 100px;" class="text-center">{{ "allow" | translate }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr *ngFor="let item of menuItems; let i = index">
|
|
<td class="text-muted">{{ i + 1 }}</td>
|
|
<td>{{ item.endpoint | translate }}</td>
|
|
<td class="text-center">
|
|
<input type="checkbox" [(ngModel)]="item.checked" />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="text-end mt-3">
|
|
<button class="btn btn-primary btn-sm px-4" (click)="savePermissions()">
|
|
{{ "save" | translate }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CARD 2: Create Third Party User Form -->
|
|
<div class="card border">
|
|
<div class="card-body">
|
|
<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 mb-3">
|
|
{{ "createThirdPartyUser" | translate }}
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
<form [formGroup]="thirdPartyForm" autocomplete="off">
|
|
|
|
<div class="row g-3 mb-3">
|
|
<!-- SUS_USERCODE -->
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<label for="SUS_USERCODE" class="text-nowrap">
|
|
{{ "SUS_USERCODE" | translate }}<span class="mandatory">*</span>
|
|
</label>
|
|
<div class="position-relative w-100">
|
|
<input type="text" id="SUS_USERCODE" class="form-control"
|
|
formControlName="SUS_USERCODE"
|
|
placeholder="{{ 'SUS_USERCODE' | translate }}"
|
|
/>
|
|
<div class="text-danger"
|
|
*ngIf="thirdPartyForm.get('SUS_USERCODE')?.touched && thirdPartyForm.get('SUS_USERCODE')?.invalid">
|
|
<div *ngIf="thirdPartyForm.get('SUS_USERCODE')?.errors?.['required']">
|
|
{{ "fieldRequired" | translate }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SUS_EMPCODE -->
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<label for="SUS_EMPCODE" class="text-nowrap">
|
|
{{ "SUS_EMPCODE" | translate }}<span class="mandatory">*</span>
|
|
</label>
|
|
<div class="position-relative w-100">
|
|
<input type="text" id="SUS_EMPCODE" class="form-control"
|
|
formControlName="SUS_EMPCODE"
|
|
placeholder="{{ 'SUS_EMPCODE' | translate }}"
|
|
appNoWhitespaces />
|
|
<div class="text-danger"
|
|
*ngIf="thirdPartyForm.get('SUS_EMPCODE')?.touched && thirdPartyForm.get('SUS_EMPCODE')?.invalid">
|
|
<div *ngIf="thirdPartyForm.get('SUS_EMPCODE')?.errors?.['required']">
|
|
{{ "fieldRequired" | translate }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<!-- SUS_NAME -->
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<label for="SUS_NAME" class="text-nowrap">
|
|
{{ "SUS_NAME" | translate }}<span class="mandatory">*</span>
|
|
</label>
|
|
<div class="position-relative w-100">
|
|
<input type="text" id="SUS_NAME" class="form-control"
|
|
formControlName="SUS_NAME"
|
|
placeholder="{{ 'SUS_NAME' | translate }}"
|
|
appNoWhitespaces />
|
|
<div class="text-danger"
|
|
*ngIf="thirdPartyForm.get('SUS_NAME')?.touched && thirdPartyForm.get('SUS_NAME')?.invalid">
|
|
<div *ngIf="thirdPartyForm.get('SUS_NAME')?.errors?.['required']">
|
|
{{ "fieldRequired" | translate }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SUS_PASSWORD -->
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-start gap-2">
|
|
<label for="SUS_PASSWORD" class="text-nowrap">
|
|
{{ "SUS_PASSWORD" | translate }}<span class="mandatory">*</span>
|
|
</label>
|
|
<div class="w-100">
|
|
<div class="password-wrapper">
|
|
<input [type]="passwordType" id="SUS_PASSWORD" class="form-control" formControlName="SUS_PASSWORD"
|
|
placeholder="{{ 'SUS_PASSWORD' | translate }}" appNoWhitespaces />
|
|
<app-password-hide-show #passShowMenu class="password-eye align-items" [showPassword]="true"
|
|
(onEyeClick)="toggleSetupPass()"></app-password-hide-show>
|
|
</div>
|
|
<div class="text-danger"
|
|
*ngIf="thirdPartyForm.get('SUS_PASSWORD')?.touched && thirdPartyForm.get('SUS_PASSWORD')?.invalid">
|
|
<div *ngIf="thirdPartyForm.get('SUS_PASSWORD')?.errors?.['required']">
|
|
{{ "fieldRequired" | translate }}
|
|
</div>
|
|
<div *ngIf="thirdPartyForm.get('SUS_PASSWORD')?.errors?.['pattern']">
|
|
{{ "passwordPattern" | translate }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<!-- SUS_EMAIL -->
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<label for="SUS_EMAIL" class="text-nowrap">
|
|
{{ "SUS_EMAIL" | translate }}<span class="mandatory">*</span>
|
|
</label>
|
|
<div class="position-relative w-100">
|
|
<input type="email" id="SUS_EMAIL" class="form-control"
|
|
formControlName="SUS_EMAIL"
|
|
placeholder="{{ 'SUS_EMAIL' | translate }}"
|
|
appNoWhitespaces />
|
|
<div class="text-danger"
|
|
*ngIf="thirdPartyForm.get('SUS_EMAIL')?.touched && thirdPartyForm.get('SUS_EMAIL')?.invalid">
|
|
<div *ngIf="thirdPartyForm.get('SUS_EMAIL')?.errors?.['required']">
|
|
{{ "fieldRequired" | translate }}
|
|
</div>
|
|
<div *ngIf="thirdPartyForm.get('SUS_EMAIL')?.errors?.['email']">
|
|
{{ "invalidEmail" | translate }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SUS_USERCELLNO -->
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<label for="SUS_USERCELLNO" class="text-nowrap">
|
|
{{ "SUS_USERCELLNO" | translate }}<span class="mandatory">*</span>
|
|
</label>
|
|
<div class="position-relative w-100">
|
|
<input type="tel" id="SUS_USERCELLNO" class="form-control"
|
|
formControlName="SUS_USERCELLNO"
|
|
placeholder="{{ 'SUS_USERCELLNO' | translate }}"
|
|
(keypress)="onlyNumbers($event)"
|
|
maxlength="10"
|
|
appNoWhitespaces />
|
|
<div class="text-danger"
|
|
*ngIf="thirdPartyForm.get('SUS_USERCELLNO')?.touched && thirdPartyForm.get('SUS_USERCELLNO')?.invalid">
|
|
<div *ngIf="thirdPartyForm.get('SUS_USERCELLNO')?.errors?.['required']">
|
|
{{ "fieldRequired" | translate }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<!-- SUS_ACTIVE -->
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<input type="checkbox" id="SUS_ACTIVE" class="form-check-input"
|
|
formControlName="SUS_ACTIVE" />
|
|
<label for="SUS_ACTIVE" class="form-check-label">
|
|
{{ "SUS_ACTIVE" | translate }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SUS_THIRDPARTY -->
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<input type="checkbox" id="SUS_THIRDPARTY" class="form-check-input"
|
|
formControlName="SUS_THIRDPARTY" />
|
|
<label for="SUS_THIRDPARTY" class="form-check-label">
|
|
{{ "SUS_THIRDPARTY" | translate }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-end mt-3">
|
|
<button class="btn btn-primary btn-sm px-4" (click)="submitForm()">
|
|
{{ "save" | translate }}
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div> |