added design for third party registration screen
atif118-mfsys
1 week ago
parent
d59d64987c
commit
383772db87
@ -1 +1 @@
|
|||||||
<button class="btn btn-light shadow-none ms-0" type="button" (click)="togglePassword()"><i [hidden]="!this.showPassword" class="mdi mdi-eye-off-outline"></i><i class="mdi mdi-eye-outline" [hidden]="this.showPassword"></i></button>
|
<button class="btn btn-light lh-sm" type="button" (click)="togglePassword()"><i [hidden]="!this.showPassword" class="mdi mdi-eye-off-outline"></i><i class="mdi mdi-eye-outline" [hidden]="this.showPassword"></i></button>
|
||||||
|
|||||||
@ -1 +1,294 @@
|
|||||||
<p>third-party-registration works!</p>
|
<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">
|
||||||
|
<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 d-flex justify-content-between align-items-center">
|
||||||
|
{{'thirdPartyRegistration' | translate}}
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<form>
|
||||||
|
<div class="row g-3 mb-3">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<label for="renewalDate" class="text-nowrap">
|
||||||
|
{{ 'ThirdPartyID' | translate }}<span
|
||||||
|
class="mandatory">*</span>
|
||||||
|
</label>
|
||||||
|
<div class="d-flex flex-column w-100">
|
||||||
|
<input type="text" id="renewalDate"
|
||||||
|
class="form-control"
|
||||||
|
placeholder="{{ 'ThirdPartyID' | translate }}" />
|
||||||
|
<!-- <div *ngIf="vacForm.get('renewalDate')?.invalid && (vacForm.get('renewalDate')?.touched || isSubmitted)"
|
||||||
|
class="text-danger">
|
||||||
|
{{ 'requiredField' | translate }}
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="d-flex align-items-start gap-2">
|
||||||
|
<label for="renewalRemarks"
|
||||||
|
class="text-nowrap mt-2">
|
||||||
|
{{ 'Name' | translate }}<span
|
||||||
|
class="mandatory">*</span>
|
||||||
|
</label>
|
||||||
|
<div class="d-flex flex-column w-100">
|
||||||
|
<input type="text" id="renewalDate"
|
||||||
|
class="form-control"
|
||||||
|
placeholder="{{ 'thirdPartyNamePlaceholder' | translate }}" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="row g-3 mb-3">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<label for="renewalDate" class="text-nowrap">
|
||||||
|
{{ 'Email' | translate }}<span
|
||||||
|
class="mandatory">*</span>
|
||||||
|
</label>
|
||||||
|
<div class="d-flex flex-column w-100">
|
||||||
|
<input type="text" id="renewalDate"
|
||||||
|
class="form-control"
|
||||||
|
placeholder="{{ 'Email' | translate }}" />
|
||||||
|
<!-- <div *ngIf="vacForm.get('renewalDate')?.invalid && (vacForm.get('renewalDate')?.touched || isSubmitted)"
|
||||||
|
class="text-danger">
|
||||||
|
{{ 'requiredField' | translate }}
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="d-flex align-items-start gap-2">
|
||||||
|
<label for="renewalRemarks"
|
||||||
|
class="text-nowrap mt-2">
|
||||||
|
{{ 'Address' | translate }}<span
|
||||||
|
class="mandatory">*</span>
|
||||||
|
</label>
|
||||||
|
<div class="d-flex flex-column w-100">
|
||||||
|
<input type="text" id="renewalDate"
|
||||||
|
class="form-control"
|
||||||
|
placeholder="{{ 'Address' | translate }}" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="row g-3 mb-3">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<label for="renewalDate" class="text-nowrap">
|
||||||
|
{{ 'PhoneNumber' | translate }}<span
|
||||||
|
class="mandatory">*</span>
|
||||||
|
</label>
|
||||||
|
<div class="d-flex flex-column w-100">
|
||||||
|
<input type="text" id="renewalDate"
|
||||||
|
class="form-control"
|
||||||
|
placeholder="{{ 'phoneNumberPlaceholder' | translate }}" />
|
||||||
|
<!-- <div *ngIf="vacForm.get('renewalDate')?.invalid && (vacForm.get('renewalDate')?.touched || isSubmitted)"
|
||||||
|
class="text-danger">
|
||||||
|
{{ 'requiredField' | translate }}
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="d-flex align-items-start gap-2">
|
||||||
|
<label for="renewalRemarks"
|
||||||
|
class="text-nowrap mt-2">
|
||||||
|
{{ 'NewNoOfAccounts' | translate }}<span
|
||||||
|
class="mandatory">*</span>
|
||||||
|
</label>
|
||||||
|
<div class="d-flex flex-column w-100">
|
||||||
|
<input type="text" id="renewalDate"
|
||||||
|
class="form-control"
|
||||||
|
placeholder="{{ 'newNoOfAccountsPlaceholder' | translate }}" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="row g-3 mb-3">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="d-flex align-items-start gap-2">
|
||||||
|
<label for="renewalRemarks"
|
||||||
|
class="text-nowrap mt-2">
|
||||||
|
{{ 'password' | translate }}<span
|
||||||
|
class="mandatory">*</span>
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="password-wrapper position-relative w-100">
|
||||||
|
<input [type]="passwordType"
|
||||||
|
autocomplete="new-password"
|
||||||
|
class="form-control pe-5"
|
||||||
|
placeholder="Password" />
|
||||||
|
|
||||||
|
<app-password-hide-show class="password-eye"
|
||||||
|
[showPassword]="true"
|
||||||
|
(onEyeClick)="togglePasswordType()">
|
||||||
|
</app-password-hide-show>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="row g-3 mb-3">
|
||||||
|
<div class="col-md-6 ms-auto text-end">
|
||||||
|
<button
|
||||||
|
class="btn btn-primary waves-effect waves-light">{{'save'
|
||||||
|
|
|
||||||
|
translate}}</button>
|
||||||
|
<!-- <button
|
||||||
|
class="btn btn-primary waves-effect waves-light"
|
||||||
|
>{{'update' |
|
||||||
|
translate}}</button>
|
||||||
|
<button
|
||||||
|
class="btn btn-primary waves-effect waves-light"
|
||||||
|
>{{'cancel' |
|
||||||
|
translate}}</button> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="col-xl-12 mt-4">
|
||||||
|
<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 d-flex justify-content-between align-items-center">
|
||||||
|
{{'thirdPartyRegistrationDetails' | translate}}
|
||||||
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<div class="search-box">
|
||||||
|
<input type="text" class="form-control form-control-sm"
|
||||||
|
[(ngModel)]="searchText"
|
||||||
|
placeholder="{{ 'search' | translate }}">
|
||||||
|
<i class="fas fa-search search-icon"></i>
|
||||||
|
</div>
|
||||||
|
<i class="materialdesignicons">
|
||||||
|
<ng-container *ngIf="renewalDataExpanded; else collapsedIcon">
|
||||||
|
<i class="dripicons-chevron-up float-end"></i>
|
||||||
|
</ng-container>
|
||||||
|
<ng-template #collapsedIcon>
|
||||||
|
<i class="dripicons-chevron-down float-end"></i>
|
||||||
|
</ng-template>
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table mb-0 border">
|
||||||
|
<thead class="table-light">
|
||||||
|
<tr>
|
||||||
|
<th>{{'ThirdPartyID' | translate}}</th>
|
||||||
|
<th>{{'Name' | translate}}</th>
|
||||||
|
<th>{{'Email' | translate}}</th>
|
||||||
|
<th>{{'Address' | translate}}</th>
|
||||||
|
<th>{{'PhoneNumber' | translate}}</th>
|
||||||
|
<th>{{'TotalNoOfAccounts' | translate}}</th>
|
||||||
|
<th>{{'action' | translate}}</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td>
|
||||||
|
<div
|
||||||
|
class="d-flex justify-content-center gap-2">
|
||||||
|
|
||||||
|
<button class="btn btn-info btn-sm"
|
||||||
|
title="View">
|
||||||
|
<i class="mdi mdi-eye-outline"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="btn btn-secondary btn-sm"
|
||||||
|
title="Edit">
|
||||||
|
<i class="fas fa-pen"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
|
||||||
|
<button class="btn btn-danger btn-sm"
|
||||||
|
title="Delete">
|
||||||
|
<i class="fas fa-trash-alt"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<div class="d-flex justify-content-between align-items-center mt-3">
|
||||||
|
<div class="form-group mb-0">
|
||||||
|
<ng-select class="form-select-sm" [items]="pageSizeOptions" bindLabel="label" bindValue="value"
|
||||||
|
[(ngModel)]="itemsPerPage" [searchable]="false" [clearable]="false">
|
||||||
|
</ng-select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-muted">
|
||||||
|
{{'page' | translate}} {{'of' | translate}} ( {{'totalItems' | translate}})
|
||||||
|
</div>
|
||||||
|
<!-- <div class="text-muted">
|
||||||
|
{{'no_record' | translate}}
|
||||||
|
</div>
|
||||||
|
<div class="text-muted">
|
||||||
|
{{'page' | translate}} {{'of' | translate}} ( {{'record' | translate}})
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<div class="btn-group">
|
||||||
|
<button class="btn btn-primary waves-effect waves-light">
|
||||||
|
{{'previous' | translate}}
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-primary waves-effect waves-light">
|
||||||
|
{{'next' | translate}}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -1,11 +1,28 @@
|
|||||||
import { Component } from '@angular/core';
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { Component, ViewChild } from '@angular/core';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
|
import { TranslateModule } from '@ngx-translate/core';
|
||||||
|
import { NgSelectModule } from '@ng-select/ng-select';
|
||||||
|
|
||||||
|
import { PasswordHideShowComponent } from '../../shared/components/password-hide-show/password-hide-show.component';
|
||||||
|
import { pageSizeOptions } from '../../utils/app.constants';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-third-party-registration',
|
selector: 'app-third-party-registration',
|
||||||
imports: [],
|
imports: [TranslateModule, CommonModule, FormsModule, PasswordHideShowComponent, NgSelectModule ],
|
||||||
templateUrl: './third-party-registration.component.html',
|
templateUrl: './third-party-registration.component.html',
|
||||||
styleUrl: './third-party-registration.component.scss'
|
styleUrl: './third-party-registration.component.scss'
|
||||||
})
|
})
|
||||||
export class ThirdPartyRegistrationComponent {
|
export class ThirdPartyRegistrationComponent {
|
||||||
|
searchText: string = '';
|
||||||
|
passwordType: string = 'password';
|
||||||
|
renewalDataExpanded = true;
|
||||||
|
pageSizeOptions = pageSizeOptions;
|
||||||
|
itemsPerPage: number = 5;
|
||||||
|
|
||||||
|
@ViewChild(PasswordHideShowComponent) passwordHideShow?: PasswordHideShowComponent;
|
||||||
|
|
||||||
|
togglePasswordType() {
|
||||||
|
this.passwordType = this.passwordHideShow?.showPassword ? 'password' : 'text';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,9 @@
|
|||||||
export const CONSTANTS = {
|
export const CONSTANTS = {
|
||||||
API_PATH: 'http://localhost:8090/MCONNECT',
|
|
||||||
POR_ORGACODE: '0005',
|
POR_ORGACODE: '0005',
|
||||||
VERSION_NUMBER:'Version 1.0.0.0 Build-1.0'
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const pageSizeOptions = [
|
||||||
|
{ label: '5 items', value: 5 },
|
||||||
|
{ label: '10 items', value: 10 },
|
||||||
|
{ label: '20 items', value: 20 }
|
||||||
|
];
|
||||||
|
|||||||
@ -1 +1,158 @@
|
|||||||
/* You can add global styles to this file, and also import other style files */
|
.vertical-collapsed .main-content {
|
||||||
|
margin-left: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content.extended {
|
||||||
|
margin-left: 15%;
|
||||||
|
}
|
||||||
|
.table th input[type="text"] {
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
text-align: center;
|
||||||
|
border-style: dotted;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100% !important;
|
||||||
|
border-collapse: collapse !important;
|
||||||
|
}
|
||||||
|
th, td {
|
||||||
|
border: 1px solid #ddd !important;
|
||||||
|
padding: 8px !important;
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
background-color: #2A7BC3 !important; /* Green background for headers */
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
.sub-header {
|
||||||
|
background-color: #E2F0D9 !important; /* Light blue background for sub-headers */
|
||||||
|
color: black !important;
|
||||||
|
}
|
||||||
|
.data-row {
|
||||||
|
background-color: #f9f9f9 !important; /* Light gray background for data rows */
|
||||||
|
}
|
||||||
|
.mandatory
|
||||||
|
{
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
.text-nowrap
|
||||||
|
{
|
||||||
|
min-width:160px;
|
||||||
|
}
|
||||||
|
.custom-ng-select {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
.search-box {
|
||||||
|
position: relative;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box .search-icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-14%);
|
||||||
|
color: #6c757d;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box input {
|
||||||
|
padding-right: 30px;
|
||||||
|
}
|
||||||
|
.custom-popup-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-popup-container {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||||
|
width: 400px;
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-popup-header {
|
||||||
|
padding: 16px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-popup-close {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
font-size: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #666;
|
||||||
|
&:hover {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-popup-body {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-popup-footer {
|
||||||
|
padding: 16px;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.pagination-controls {
|
||||||
|
margin-top: 15px;
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-controls button {
|
||||||
|
padding: 5px 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-controls button:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
ng-select.form-select-sm {
|
||||||
|
width: 120px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.password-wrapper {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-eye {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 0.5px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: transparent !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 0;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-eye * {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue