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">
|
<div class="container-fluid">
|
||||||
<!-- User Selection Card -->
|
|
||||||
<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">
|
|
||||||
<!-- 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>
|
|
||||||
</ng-template>
|
|
||||||
|
|
||||||
<!-- Optional: Custom template for selected item -->
|
<div class="row">
|
||||||
<ng-template ng-label-tmp let-item="item">
|
<div class="col-12">
|
||||||
<span>{{ item.userName }} ({{ item.userId }})</span>
|
<div class="d-sm-flex align-items-center justify-content-between navbar-header p-0"></div>
|
||||||
</ng-template>
|
|
||||||
</ng-select>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="col-xl-12 mt-4">
|
||||||
|
|
||||||
<div class="card shadow-sm" *ngIf="showPermissions">
|
<!-- CARD 1: User Selection + Permissions Table -->
|
||||||
|
<div class="card border mb-4">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h4 class="card-title mb-3">{{ "menu" | translate }}</h4>
|
<div class="table-section">
|
||||||
|
<div class="row">
|
||||||
<div class="table-responsive scrollable-table">
|
<div class="col-lg-12">
|
||||||
<table class="table table-hover table-bordered table-sm permission-table">
|
<div class="card-body mt-2 p-0">
|
||||||
<thead class="table-light">
|
<div class="card mb-0 mt-2">
|
||||||
<tr>
|
<div class="card-header font-edit-13-child mb-3">
|
||||||
<th style="width: 50px">#</th>
|
{{ "userPermission" | translate }}
|
||||||
<th>{{ "type" | translate }}</th>
|
</div>
|
||||||
<th style="width: 100px;" class="text-center">{{ "allow" | translate }}</th>
|
<div class="card-body">
|
||||||
</tr>
|
|
||||||
</thead>
|
<!-- User Selection -->
|
||||||
|
<div class="card shadow-sm mb-4">
|
||||||
<tbody>
|
<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">
|
<tr *ngFor="let item of menuItems; let i = index">
|
||||||
<td class="text-muted">{{ i + 1 }}</td>
|
<td class="text-muted">{{ i + 1 }}</td>
|
||||||
<td>{{ item.endpoint | translate }}</td>
|
<td>{{ item.endpoint | translate }}</td>
|
||||||
<td class="text-center"><input type="checkbox"
|
<td class="text-center">
|
||||||
[(ngModel)]="item.checked" /></td>
|
<input type="checkbox" [(ngModel)]="item.checked" />
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
</tbody>
|
||||||
</tbody>
|
</table>
|
||||||
</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>
|
||||||
|
</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">
|
||||||
|
|
||||||
<div class="text-end mt-3">
|
<form [formGroup]="thirdPartyForm" autocomplete="off">
|
||||||
<button class="btn btn-primary btn-sm px-4" (click)="savePermissions()">
|
|
||||||
{{ "save" | translate }}
|
<div class="row g-3 mb-3">
|
||||||
</button>
|
<!-- 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>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Loading…
Reference in New Issue