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({
|
||||
selector: 'app-third-party-registration',
|
||||
imports: [],
|
||||
imports: [TranslateModule, CommonModule, FormsModule, PasswordHideShowComponent, NgSelectModule ],
|
||||
templateUrl: './third-party-registration.component.html',
|
||||
styleUrl: './third-party-registration.component.scss'
|
||||
})
|
||||
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 = {
|
||||
API_PATH: 'http://localhost:8090/MCONNECT',
|
||||
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