custom search button enhancement for SPV portal.

jest.config.js

@@ -1,17 +1,17 @@
 module.exports = {
-  preset: 'ts-jest',
+  preset: 'jest-preset-angular',
   testEnvironment: 'jsdom',
-  transform: {
-    '^.+\\.tsx?$': 'ts-jest',
+  setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
+  transformIgnorePatterns: [
+    'node_modules/(?!.*\\.mjs$)',
+  ],
+  moduleNameMapper: {
+    'worker-loader!.*': '<rootDir>/test/mocks/workerMock.js',
+    'pdfjs-dist/build/pdf.worker': '<rootDir>/test/mocks/workerMock.js',
+    "^src/environments/environment$": "<rootDir>/src/environments/environment.ts",
   },
-  // moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
-  // transformIgnorePatterns: ['/node_modules/'],
-  // moduleNameMapper: {
-  //   '^src/(.*)$': '/home/sujithsojan/Desktop/igot-jest/sunbird-cb-adminportal/src/$1',
-  // },
-  // setupFiles: ['/home/sujithsojan/Desktop/igot-jest/sunbird-cb-adminportal/src/jest.setup.ts'],
-  coverageDirectory: './coverage',
   coverageReporters: ["clover", "json", "lcov", "text", "text-summary"],
   collectCoverage: true,
-  testResultsProcessor: "jest-sonar-reporter"
-}
+  testResultsProcessor: "jest-sonar-reporter",
+  setupFiles: ['zone.js', ]
+};

package.json

@@ -16,7 +16,7 @@
     "start:spv-dev": "node --max_old_space_size=12288 ./node_modules/@angular/cli/bin/ng serve --proxy-config proxy/spv-dev-ip.proxy.json -o",
     "analyse": "webpack-bundle-analyzer ./dist/www/ng serve --proxy-config proxy/localhost.proxy.json -o/stats-es5.json",
     "test": "jest",
-    "test-coverage": "./node_modules/jest/bin/jest.js --clearCache && node --max_old_space_size=1024 ./node_modules/jest/bin/jest.js --silent --ci --collectCoverage=true --coverageReporters=lcov --detectOpenHandles --forceExit=true",
+    "test-coverage": "./node_modules/jest/bin/jest.js --clearCache && node --max_old_space_size=8000 ./node_modules/jest/bin/jest.js --silent --ci --collectCoverage=true --coverageReporters=lcov --detectOpenHandles --forceExit=true",
     "lint": "ng lint",
     "lint:fix": "ng lint --fix",
     "e2e": "ng e2e",
@@ -27,6 +27,7 @@
   },
   "private": true,
   "dependencies": {
+    "@angular-builders/jest": "^19.0.0",
     "@angular/animations": "^16.2.12",
     "@angular/cdk": "^16.2.14",
     "@angular/common": "^16.2.12",
@@ -43,7 +44,7 @@
     "@babel/core": "7.22.0",
     "@babel/preset-env": "7.25.4",
     "@project-sunbird/telemetry-sdk": "0.0.26",
-    "@sunbird-cb/collection": "1.0.49-ang-13-16",
+    "@sunbird-cb/collection": "1.0.53-ang-13-16",
     "@sunbird-cb/rain-dashboards": "0.0.36-ang-13-16",
     "@sunbird-cb/resolver": "1.0.0-ang-13-16",
     "@sunbird-cb/taxonomy-editor": "0.0.0-ang-13-16",
@@ -61,7 +62,7 @@
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
     "husky": "^4.2.3",
-    "jest": "29.7.0",
+    "jest": "^29.7.0",
     "jest-preset-angular": "^14.2.4",
     "jquery": "^3.4.1",
     "jsoneditor": "^10.1.0",
@@ -117,6 +118,7 @@
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
     "jest-sonar-reporter": "^2.0.0",
+    "jest-localstorage-mock": "^2.4.26",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",

project/ws/app/src/lib/head/ui-admin-table/create-organisation/create-organisation.component.ts

@@ -44,7 +44,6 @@ export class CreateOrganisationComponent implements OnInit, OnDestroy {
   uploadedLogoResponse!: IUploadedLogoresponse
   organizationNameList: string[] = []
   ORG_NAME_PATTERN = /^[a-zA-Z0-9 ().,@\-\$\/\\:\[\]!\s]*$/
-  rootOrgId: any
 
   untilDestroyed$ = new Subject<void>();
   isMatcompleteOpened = false
@@ -57,7 +56,7 @@ export class CreateOrganisationComponent implements OnInit, OnDestroy {
     private snackBar: MatSnackBar,
     private createMDOService: CreateMDOService,
     private activatedRoute: ActivatedRoute,
-    private loaderService: LoaderService,
+    private loaderService: LoaderService
   ) {
 
     this.addOverflowHidden()
@@ -218,8 +217,6 @@ export class CreateOrganisationComponent implements OnInit, OnDestroy {
   }
 
   onSubmitCreateOrganization() {
-    const userProfile = _.get(this.activatedRoute, 'snapshot.parent.data.configService.userProfile')
-    this.rootOrgId = userProfile.rootOrgId
     let payload: any = {
       orgName: this.controls['organisationName']?.value || "",
       channel: this.controls['organisationName']?.value || "",
@@ -230,10 +227,8 @@ export class CreateOrganisationComponent implements OnInit, OnDestroy {
       logo: this.uploadedLogoResponse?.qrcodepath || "",
       description: this.controls['description']?.value || "",
       parentMapId: "",
-      sbRootOrgId: this.rootOrgId
-
     }
-    // if (this.heirarchyObject && this.heirarchyObject.sbRootOrgId) {
+    // if (this.heirarchyObject.sbRootOrgId) {
     //   payload['sbRootOrgId'] = this.heirarchyObject.sbRootOrgId
     // }
     if (this.controls['category']?.value === 'state') {

project/ws/app/src/lib/head/ui-admin-table/directory-list/directory-table.component.html

@@ -14,14 +14,23 @@
     </div>
     <div class="example-table-container">
 
-        <div class="search items-center">
-            <div class=rsearch>
+        <div class="search">
+            <div class="rsearch flex-row">
                 <div class="sinput mat-field-rounded">
                     <span class="material-icons"> search </span>
                     <input type="Standard" id="search" label="" #searchInput (input)="applyFilter($event.target.value)"
-                        (keydown.enter)="onSearchEnter($event.target.value)" placeholder="Search">
+                        [(ngModel)]="searchValue" (keydown.enter)="onSearchEnter($event.target.value)"
+                        placeholder="Search">
+                </div>
+                <div class="margin-left-xs">
+                    <button mat-raised-button type="button" (click)="onSearchEnter(searchValue)"
+                        [ngClass]="{ 'disabled-cls': !moreThanTwoChar }"
+                        class="text-white ws-mat-primary-background text-white cstm-height-width mat-btn-flat">
+                        <span class="text-white">Search</span>
+                    </button>
                 </div>
             </div>
+
             <button mat-flat-button *ngIf="needCreate" class="mat-btn-flat margin-right-m" (click)="gotoCreateNew()">
                 <b class="text-white">Create new</b>
             </button>

project/ws/app/src/lib/head/ui-admin-table/directory-list/directory-table.component.scss

@@ -631,6 +631,7 @@ $title-line-count: 2;
 .search {
   display: flex;
   flex: 1;
+  margin-bottom:16px;
 }
 
 .lsearch {
@@ -648,28 +649,30 @@ $title-line-count: 2;
 }
 
 .noContent {
+  /* stylelint-disable */
   font: 700 14px 'Lato';
+  /* stylelint-enable */
   color: #000000de;
 }
 
 .sinput {
-  width: 50%;
-  border-radius: 9999px;
+  width: 400px;
+  border-radius: 20px;
   border: 1px solid #d5d0d0;
-  padding: 12px 16px;
-  margin-bottom: 10px;
-  margin-top: 10px;
-  min-height: 20px;
+  padding: 8px 16px;
+  box-sizing: border-box;
+  // margin-bottom: 10px;
+  height: 42px;
 
   .material-icons {
-    vertical-align: bottom;
+    vertical-align: middle;
     font-size: 20px;
-    margin-right: 7px;
+    margin-right: 4px;
   }
 
   input {
     border: 0 !important;
-    width: 75%;
+    // width: 75%;
     outline: none !important;
   }
 }
@@ -734,4 +737,13 @@ $title-line-count: 2;
 ::ng-deep .mat-column-mdo {
   width: 450px;
   flex: none;
+}
+.disabled-cls {
+  opacity: 0.6;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.search-btn-div {
+  margin-top: 6px;
 }

project/ws/app/src/lib/head/ui-admin-table/directory-list/directory-table.component.ts

@@ -49,6 +49,8 @@ export class UIDirectoryTableComponent implements OnInit, AfterViewInit, OnChang
   showNewNoContent = false
   openCreateNavBar = false
   openMode = ''
+  searchValue: string = ''
+  moreThanTwoChar = false
   rowData: any
   dropdownList: {
     statesList: any[],
@@ -120,8 +122,20 @@ export class UIDirectoryTableComponent implements OnInit, AfterViewInit, OnChang
   }
   ngAfterViewInit() { }
 
+  // applyFilter(filterValue: any) {
+  //   this.filterSubject.next(filterValue)
+  // }
   applyFilter(filterValue: any) {
-    this.filterSubject.next(filterValue)
+
+    if (filterValue?.length === 0) {
+      this.onSearchEnter('')
+      this.filterSubject.next('')
+    }
+    if (filterValue?.length > 2) {
+      this.moreThanTwoChar = true
+    } else {
+      this.moreThanTwoChar = false
+    }
   }
 
   onOrgPageChange(event: any) {
@@ -235,7 +249,11 @@ export class UIDirectoryTableComponent implements OnInit, AfterViewInit, OnChang
   }
 
   onSearchEnter(filterValue: any) {
-    this.searchByEnterKey.emit(filterValue)
+    if (filterValue === '') {
+      this.searchByEnterKey.emit('')
+    } else if (filterValue?.length > 2) {
+      this.searchByEnterKey.emit(filterValue)
+    }
   }
 
   buttonClickAction(event: any) {

project/ws/app/src/lib/head/ui-admin-table/user-list/ui-admin-user-table.component.html

@@ -4,43 +4,53 @@
     <div class="example-table-container">
         <div class=rsearch>
             <div class="w-100">
-                <div class="sinput">
-                    <span class="material-icons"> search </span>
-                    <input type="Standard" label="" (input)="applyFilter($event.target.value)"
-                        (keydown.enter)="onSearchEnter($event)" placeholder="Search">
+                <div class="flex flex-row">
+                    <div class="sinput">
+                        <span class="material-icons"> search </span>
+                        <input type="Standard" label="" (input)="applyFilter($event.target.value)" placeholder="Search"
+                            [(ngModel)]="searchValue" (keydown.enter)="onSearchEnter($event.target.value)">
+                    </div>
+                    <div *ngIf="isSurveySearch">
+                        <button mat-raised-button type="button" (click)="onSearchEnter(searchValue)"
+                            [ngClass]="{ 'disabled-cls': !moreThanTwoChar }"
+                            class="text-white ws-mat-primary-background text-white margin-left-s cstm-height-width mat-btn-flat">
+                            <span class="text-white">Search</span>
+                        </button>
+                    </div>
                 </div>
             </div>
 
             <div>
-                <button mat-raised-button type="button" *ngIf="isReports" class="download-btn margin-right-m"
-                    (click)="downloadUsersReport(departmentName)">
+                <button mat-raised-button type="button" *ngIf="isReports"
+                    class="download-btn margin-right-m mat-btn-flat" (click)="downloadUsersReport(departmentName)">
                     <mat-icon>vertical_align_bottom</mat-icon> Users Report
                 </button>
             </div>
 
             <div>
-                <button mat-raised-button type="button" *ngIf="isReports" class="download-btn margin-right-m"
+                <button mat-raised-button type="button" *ngIf="isReports"
+                    class="download-btn margin-right-m mat-btn-flat"
                     (click)="downloadConsumptionReport(departmentName)">
                     <mat-icon>vertical_align_bottom</mat-icon> Consumption Report
                 </button>
             </div>
             <div *ngIf="!isReports">
                 <button mat-raised-button type="button" *ngIf="needCreateUser"
-                    class="text-white ws-mat-primary-background text-white margin-right-l custom-btn"
+                    class="text-white ws-mat-primary-background text-white margin-right-l custom-btn mat-btn-flat"
                     (click)="gotoCreateUser()">
                     <b class="text-white">Create user</b>
                 </button>
             </div>
             <div style="margin-right: 7px;" *ngIf="!isReports">
                 <button mat-raised-button type="button" *ngIf="needCreatePosition"
-                    class="text-white ws-mat-primary-background text-white margin-right-l"
+                    class="text-white ws-mat-primary-background text-white margin-right-l mat-btn-flat"
                     (click)="gotoCreatePosition()">
                     <b class="text-white">Add new designation</b>
                 </button>
             </div>
             <div *ngIf="!isReports">
                 <button mat-raised-button type="button" *ngIf="needAddAdmin"
-                    class="text-white ws-mat-primary-background text-white margin-right-m custom-btn"
+                    class="text-white ws-mat-primary-background text-white margin-right-m custom-btn mat-btn-flat"
                     (click)="openPopup()">
                     <b class="text-white">Add admin</b>
                 </button>

project/ws/app/src/lib/head/ui-admin-table/user-list/ui-admin-user-table.component.scss

@@ -636,18 +636,20 @@ $title-line-count: 2;
 .rsearch {
   display: flex;
   flex: 1 1 auto;
+  margin-bottom: 12px;
 
 }
 .w-100{
   width: 100%;
 }
 .sinput {
-  width: 300px;
-  border-radius: 4px;
+ width: 400px;
+  border-radius: 20px;
   border: 1px solid #d5d0d0;
-  padding: 4px 8px 8px;
-  margin-bottom: 20px;
-  min-height: 20px;
+  padding: 8px 16px;
+  box-sizing: border-box;
+  // margin-bottom: 10px;
+  height: 42px;
 
   .material-icons {
     vertical-align: bottom;
@@ -657,7 +659,6 @@ $title-line-count: 2;
 
   input {
     border: 0 !important;
-    width: 84%;
     outline: none !important;
   }
 }
@@ -702,4 +703,12 @@ $title-line-count: 2;
   font-family: "Lato-Regular", sans-serif;
   font-weight: 700;
   font-size: 14px;
+}
+.cstm-height-width {
+  height: 38px;
+}
+.disabled-cls {
+  opacity: 0.6;
+  pointer-events: none;
+  cursor: not-allowed;
 }