mazdak/UI-transcation-form
#66
Merged
naeem.ullah
merged 3 commits from mazdak/UI-transcation-form into FMFI-PRE-PRODUCTION-2026 1 month ago
@ -1,67 +1,299 @@
|
||||
<div class="page-content">
|
||||
<div id="layout-wrapper">
|
||||
<div class="inner-pg-sp">
|
||||
<div class="container-fluid">
|
||||
<!-- User Selection Card -->
|
||||
<div class="card shadow-sm mb-4">
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<!-- Custom template for dropdown options -->
|
||||
<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 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>
|
||||
</ng-template>
|
||||
</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>
|
||||
|
||||
<!-- Optional: Custom template for selected item -->
|
||||
<ng-template ng-label-tmp let-item="item">
|
||||
<span>{{ item.userName }} ({{ item.userId }})</span>
|
||||
</ng-template>
|
||||
</ng-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card shadow-sm" *ngIf="showPermissions">
|
||||
<!-- CARD 2: Create Third Party User Form -->
|
||||
<div class="card border">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title mb-3">{{ "menu" | translate }}</h4>
|
||||
<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">
|
||||
|
||||
<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>
|
||||
<form [formGroup]="thirdPartyForm" autocomplete="off">
|
||||
|
||||
<tbody>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<!-- 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>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
|
||||
<div class="text-end mt-3">
|
||||
<button class="btn btn-primary btn-sm px-4" (click)="savePermissions()">
|
||||
{{ "save" | translate }}
|
||||
</button>
|
||||
<!-- 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>
|
||||
Loading…
Reference in New Issue