From 64d44959f113f57e34929345b212d54c07c4103c Mon Sep 17 00:00:00 2001 From: Deepika Mahindroo Date: Wed, 4 Dec 2024 12:33:46 +0530 Subject: [PATCH] feat(arc-saas): creating add user page and manage user page creating add user page and manage user page --- .../add-users/add-users.component.html | 186 +++++++++++++++++ .../add-users/add-users.component.scss | 196 ++++++++++++++++++ .../add-users/add-users.component.spec.ts | 23 ++ .../add-users/add-users.component.ts | 56 +++++ .../manage-users/manage-users.component.html | 30 +++ .../manage-users/manage-users.component.scss | 19 ++ .../manage-users.component.spec.ts | 23 ++ .../manage-users/manage-users.component.ts | 47 +++++ .../src/app/main/main-routing.module.ts | 10 + .../saas-ui/src/app/main/main.component.ts | 7 + projects/saas-ui/src/app/main/main.module.ts | 4 + .../app/shared/constants/roles.constant.ts | 5 + 12 files changed, 606 insertions(+) create mode 100644 projects/saas-ui/src/app/main/components/add-users/add-users.component.html create mode 100644 projects/saas-ui/src/app/main/components/add-users/add-users.component.scss create mode 100644 projects/saas-ui/src/app/main/components/add-users/add-users.component.spec.ts create mode 100644 projects/saas-ui/src/app/main/components/add-users/add-users.component.ts create mode 100644 projects/saas-ui/src/app/main/components/manage-users/manage-users.component.html create mode 100644 projects/saas-ui/src/app/main/components/manage-users/manage-users.component.scss create mode 100644 projects/saas-ui/src/app/main/components/manage-users/manage-users.component.spec.ts create mode 100644 projects/saas-ui/src/app/main/components/manage-users/manage-users.component.ts create mode 100644 projects/saas-ui/src/app/shared/constants/roles.constant.ts diff --git a/projects/saas-ui/src/app/main/components/add-users/add-users.component.html b/projects/saas-ui/src/app/main/components/add-users/add-users.component.html new file mode 100644 index 00000000..f7ea9572 --- /dev/null +++ b/projects/saas-ui/src/app/main/components/add-users/add-users.component.html @@ -0,0 +1,186 @@ + + +
+
+ +
+ +
+
+
+ First Name * +
+
+
+ + +
+
+ First Name must contain only characters. +
+
+
+ +
+
+ Last Name * +
+
+
+ + +
+
+ Last Name must contain only characters. +
+
+
+ + +
+
+ Email * +
+
+
+ + +
+
+ +
+ Email is required. +
+
+ Invalid email format. +
+
+ + + +
+
+ Role * +
+
+ + + {{ option.label }} + + +
+
+ + +
+
+ IDP * +
+
+ + + {{ option.label }} + + +
+
+
+ + +
+ + +
+
+
+
+ + diff --git a/projects/saas-ui/src/app/main/components/add-users/add-users.component.scss b/projects/saas-ui/src/app/main/components/add-users/add-users.component.scss new file mode 100644 index 00000000..c03fed88 --- /dev/null +++ b/projects/saas-ui/src/app/main/components/add-users/add-users.component.scss @@ -0,0 +1,196 @@ +@use '../../../on-boarding/styles/forms.style.scss' as *; + + +:host { + .logo { + padding-top: 10%; + } + + .description { + padding-top: 10%; + } + + .login-btn { + padding-top: 7%; + } + + .footer { + padding-top: 7%; + } +} +.btn{ + .btn-danger{ + background-color: #f00a18 !important; + color: white !important; + } +} + +.error-msg { + color: red; + font-size: 14px; + margin-top: 3px; +} + +.required { + color: red; +} + +.input-container { + position: relative; +} + +.info-icon { + margin-left: 8px; + cursor: pointer; + color: #007bff; +} + +.input-box { + position: relative; + + .input-title { + margin-bottom: 10px; + font-weight: bold; + font-size: 14px; + } + .input-box{ + .input{ + .payment-comment-box{ + min-width: 100%; + border: 1px solid #dcdcdc; + } + } + } + + + + + nb-select{ + .select-button{ + height: 46px !important; + margin-top: 5px !important; + } + } + + + .input-container { + position: relative; + display: flex; + align-items: center; + } + + input[nbInput] { + padding-right: 2.5rem; + } + + .info-icon { + position: absolute; + right: 0.5rem; + font-size: 1.2rem; + color: #007bff; + } + + .inputTags { + position: relative; + + .input-container { + display: flex; + align-items: center; + position: relative; + + input { + width: 100%; + padding: 10px; + padding-right: 30px; + border: 1px solid #dcdcdc; + border-radius: 4px; + box-sizing: border-box; + } + + .info-icon { + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + cursor: pointer; + color: #007bff; + font-size: 18px; + z-index: 1; + } + } + } +} + +.input-wrapper{ + .input-box{ + .select{ + .dropdown-wrapper{ + min-width: 100%; + margin-top: 5px; + border: 1px solid #dcdcdc; + border-radius: 3px; + } + } + } +} + +.input-box { + .inputTags { + input { + margin: 5px 0; + width: 100% !important; + max-width: 100%; + border-radius: 0; + background: #fff; + } + } +} + +.card-row{ +border-radius: 16px; +box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; +max-width: 100%; +margin: auto; +.sign-in-title h2 { + font-size: 34px; +} + .sign-in-title h3 { + font-size: 20px; + color: #525252; + margin-top: 0px; + margin-bottom: 10px; +} + +} + + +.add-lead-wrapper { + .btn { + margin-top: 30px; + justify-content: space-between; + display: flex + + } +} + +.address-input-box { + width: 100%; +} + +.main-wrapper { + padding-top: 10px; +} + +.green-icon { + color: green; +} + +.invisible-icon { + display: none; +} + +.add-lead-wrapper { + h2 { + margin-top: 0 !important; + } +} diff --git a/projects/saas-ui/src/app/main/components/add-users/add-users.component.spec.ts b/projects/saas-ui/src/app/main/components/add-users/add-users.component.spec.ts new file mode 100644 index 00000000..9c99111d --- /dev/null +++ b/projects/saas-ui/src/app/main/components/add-users/add-users.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddUsersComponent } from './add-users.component'; + +describe('AddUsersComponent', () => { + let component: AddUsersComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AddUsersComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AddUsersComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/saas-ui/src/app/main/components/add-users/add-users.component.ts b/projects/saas-ui/src/app/main/components/add-users/add-users.component.ts new file mode 100644 index 00000000..cc4edf48 --- /dev/null +++ b/projects/saas-ui/src/app/main/components/add-users/add-users.component.ts @@ -0,0 +1,56 @@ +import {Component} from '@angular/core'; +import {FormGroup, FormBuilder, Validators} from '@angular/forms'; +import {ActivatedRoute, Router} from '@angular/router'; +import {NbToastrService} from '@nebular/theme'; +import {COUNTRIES} from '../../../shared/constants/countries.constant'; +import {OnBoardingService} from '../../../shared/services'; +import {ROLES} from '../../../shared/constants/roles.constant'; + +@Component({ + selector: 'app-add-users', + templateUrl: './add-users.component.html', + styleUrls: ['./add-users.component.scss'], +}) +export class AddUsersComponent { + addUserForm: FormGroup; + roleOptions = ROLES; + idpOptions = [ + {label: 'Cognito', value: 'cognito'}, + {label: 'Auth0', value: 'auth0'}, + {label: 'KeyCloak', value: 'keycloak'}, + ]; + + constructor( + private route: ActivatedRoute, + private readonly onBoardingService: OnBoardingService, + private toastrService: NbToastrService, + private readonly router: Router, + private fb: FormBuilder, + ) { + this.addUserForm = this.fb.group({ + firstName: ['', [Validators.required, Validators.pattern('^[a-zA-Z]+$')]], + lastName: ['', [Validators.required, Validators.pattern('^[a-zA-Z]+$')]], + email: ['', [Validators.required, Validators.email]], + role: ['', [Validators.required]], + idp: ['', [Validators.required]], + }); + } + + onCancel() { + this.router.navigate(['main/users']); + } + + onSubmit() { + if (this.addUserForm.valid) { + const userData = this.addUserForm.value; + const user = { + firstName: userData.firstName, + lastName: userData.lastName, + email: userData.email, + role: userData.role, + idp: userData.idp, + }; + console.log(userData); + } + } +} diff --git a/projects/saas-ui/src/app/main/components/manage-users/manage-users.component.html b/projects/saas-ui/src/app/main/components/manage-users/manage-users.component.html new file mode 100644 index 00000000..8b912412 --- /dev/null +++ b/projects/saas-ui/src/app/main/components/manage-users/manage-users.component.html @@ -0,0 +1,30 @@ +
+ + +
+

Manage Users

+
+ +
+
+ +
+ + +
+ + +
diff --git a/projects/saas-ui/src/app/main/components/manage-users/manage-users.component.scss b/projects/saas-ui/src/app/main/components/manage-users/manage-users.component.scss new file mode 100644 index 00000000..2d176554 --- /dev/null +++ b/projects/saas-ui/src/app/main/components/manage-users/manage-users.component.scss @@ -0,0 +1,19 @@ +@use '../../styles/grid-styles.scss' as *; +.regbtn { + padding: 10px 0; + text-align: right; + button { + min-width: 200px; + &:hover { + background-color: #ff3d71; + color: white; + } + } +} + +.heading-wrapper { + display: flex; + justify-content: space-between; + align-items: center; +} + diff --git a/projects/saas-ui/src/app/main/components/manage-users/manage-users.component.spec.ts b/projects/saas-ui/src/app/main/components/manage-users/manage-users.component.spec.ts new file mode 100644 index 00000000..25d14e2a --- /dev/null +++ b/projects/saas-ui/src/app/main/components/manage-users/manage-users.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ManageUsersComponent } from './manage-users.component'; + +describe('ManageUsersComponent', () => { + let component: ManageUsersComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ManageUsersComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ManageUsersComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/saas-ui/src/app/main/components/manage-users/manage-users.component.ts b/projects/saas-ui/src/app/main/components/manage-users/manage-users.component.ts new file mode 100644 index 00000000..abaadb0a --- /dev/null +++ b/projects/saas-ui/src/app/main/components/manage-users/manage-users.component.ts @@ -0,0 +1,47 @@ +import {Component} from '@angular/core'; +import {FormBuilder} from '@angular/forms'; +import {ActivatedRoute, Router} from '@angular/router'; +import {ToasterService} from '@project-lib/theme/toaster'; +import {Location} from '@angular/common'; +import {ColDef, GridApi, GridOptions} from 'ag-grid-community'; +import {AnyObject} from '@project-lib/core/api'; + +@Component({ + selector: 'app-manage-users', + templateUrl: './manage-users.component.html', + styleUrls: ['./manage-users.component.scss'], +}) +export class ManageUsersComponent { + gridApi: GridApi; + gridOptions: GridOptions; + limit = 5; + colDefs: ColDef[] = [ + {field: 'name', headerName: 'User Name', width: 200, minWidth: 20}, + {field: 'email', headerName: 'Email', width: 200, minWidth: 20}, + {field: 'role', headerName: 'Role', width: 250, minWidth: 20}, + {field: 'idp', headerName: 'IDP', width: 250, minWidth: 20}, + ]; + rowData = []; + constructor( + private toastrService: ToasterService, + private readonly router: Router, + private fb: FormBuilder, + ) { + this.gridOptions = { + pagination: true, + rowModelType: 'infinite', + paginationPageSize: this.limit, + paginationPageSizeSelector: [this.limit, 10, 20, 50, 100], + cacheBlockSize: this.limit, + onGridReady: this.onGridReady.bind(this), + rowHeight: 60, + defaultColDef: {flex: 1}, + }; + } + onGridReady(params: AnyObject) { + this.gridApi = params.api; + } + showManageUsers() { + this.router.navigate(['/main/add-user']); + } +} diff --git a/projects/saas-ui/src/app/main/main-routing.module.ts b/projects/saas-ui/src/app/main/main-routing.module.ts index ed880059..c1dcdbdb 100644 --- a/projects/saas-ui/src/app/main/main-routing.module.ts +++ b/projects/saas-ui/src/app/main/main-routing.module.ts @@ -8,6 +8,8 @@ import {BillingPlanComponent} from './components/billing-plan/billing-plan.compo import {AddPlanComponent} from './components/add-plan/add-plan.component'; import {TenantRegistrationComponent} from './components/tenant-registration/tenant-registration.component'; import {TenantDetailComponent} from './components/tenant-detail/tenant-detail.component'; +import {ManageUsersComponent} from './components/manage-users/manage-users.component'; +import {AddUsersComponent} from './components/add-users/add-users.component'; const routes: Routes = [ { @@ -31,6 +33,10 @@ const routes: Routes = [ path: 'plans', component: ManagePlansComponent, }, + { + path: 'users', + component: ManageUsersComponent, + }, { path: 'billing-plan', component: BillingPlanComponent, @@ -39,6 +45,10 @@ const routes: Routes = [ path: 'add-plan', component: AddPlanComponent, }, + { + path: 'add-user', + component: AddUsersComponent, + }, { path: 'edit-plan/:id', component: AddPlanComponent, diff --git a/projects/saas-ui/src/app/main/main.component.ts b/projects/saas-ui/src/app/main/main.component.ts index 66ebb6ea..4cc513e4 100644 --- a/projects/saas-ui/src/app/main/main.component.ts +++ b/projects/saas-ui/src/app/main/main.component.ts @@ -68,6 +68,13 @@ export class MainComponent home: true, pathMatch: 'prefix', }, + { + title: 'Manage-Users', + icon: 'people-outline', + link: '/main/users', + home: true, + pathMatch: 'prefix', + }, ]; navigate(link: string) { diff --git a/projects/saas-ui/src/app/main/main.module.ts b/projects/saas-ui/src/app/main/main.module.ts index 606307b1..34958cc1 100644 --- a/projects/saas-ui/src/app/main/main.module.ts +++ b/projects/saas-ui/src/app/main/main.module.ts @@ -22,6 +22,8 @@ import {ButtonRendererComponent} from './components/button-renderer/button-rende import {TenantRegistrationComponent} from './components/tenant-registration/tenant-registration.component'; import { TenantDetailComponent } from './components/tenant-detail/tenant-detail.component'; import { EyeIconRendererComponent } from './components/eye-icon-renderer/eye-icon-renderer.component'; +import { ManageUsersComponent } from './components/manage-users/manage-users.component'; +import { AddUsersComponent } from './components/add-users/add-users.component'; @NgModule({ declarations: [ @@ -35,6 +37,8 @@ import { EyeIconRendererComponent } from './components/eye-icon-renderer/eye-ico TenantRegistrationComponent, TenantDetailComponent, EyeIconRendererComponent, + ManageUsersComponent, + AddUsersComponent, ], imports: [ CommonModule, diff --git a/projects/saas-ui/src/app/shared/constants/roles.constant.ts b/projects/saas-ui/src/app/shared/constants/roles.constant.ts new file mode 100644 index 00000000..b08c6b02 --- /dev/null +++ b/projects/saas-ui/src/app/shared/constants/roles.constant.ts @@ -0,0 +1,5 @@ +export const ROLES = [ + {label: 'Super Admin', value: 'super admin'}, + {label: 'Admin', value: 'admin'}, + {label: 'User', value: 'user'}, +];