diff --git a/package-lock.json b/package-lock.json index 30d4c4d..8c72c9e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@angular/platform-browser": "~13.1.0", "@angular/platform-browser-dynamic": "~13.1.0", "@angular/router": "~13.1.0", + "@ng-select/ng-select": "^8.1.1", "echarts": "^5.3.0", "echarts-gl": "^2.0.8", "file-saver": "^2.0.5", @@ -2409,6 +2410,23 @@ "node": ">=6.0.0" } }, + "node_modules/@ng-select/ng-select": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/@ng-select/ng-select/-/ng-select-8.1.1.tgz", + "integrity": "sha512-CP9Pve3L1aGqej38T9utdd6Waobbybwe9QIEObwicBI5fiIMAXwKT6lFT3fDLTUK/79y5nebiGtwTBfMm71Psg==", + "dependencies": { + "tslib": "^2.3.1" + }, + "engines": { + "node": ">= 12.20.0", + "npm": ">= 6.0.0" + }, + "peerDependencies": { + "@angular/common": ">=13.0.0 <14.0.0", + "@angular/core": ">=13.0.0 <14.0.0", + "@angular/forms": ">=13.0.0 <14.0.0" + } + }, "node_modules/@ngtools/webpack": { "version": "13.2.3", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-13.2.3.tgz", @@ -13215,6 +13233,14 @@ "integrity": "sha512-cz8HFjOFfUBtvN+NXYSFMHYRdxZMaEl0XypVrhzxBgadKIXhIkRd8aMeHhmF56Sl7SuS8OnUpQ73/k9LE4VnLg==", "dev": true }, + "@ng-select/ng-select": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/@ng-select/ng-select/-/ng-select-8.1.1.tgz", + "integrity": "sha512-CP9Pve3L1aGqej38T9utdd6Waobbybwe9QIEObwicBI5fiIMAXwKT6lFT3fDLTUK/79y5nebiGtwTBfMm71Psg==", + "requires": { + "tslib": "^2.3.1" + } + }, "@ngtools/webpack": { "version": "13.2.3", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-13.2.3.tgz", diff --git a/package.json b/package.json index d6d90ce..91c8904 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@angular/platform-browser": "~13.1.0", "@angular/platform-browser-dynamic": "~13.1.0", "@angular/router": "~13.1.0", + "@ng-select/ng-select": "^8.1.1", "echarts": "^5.3.0", "echarts-gl": "^2.0.8", "file-saver": "^2.0.5", diff --git a/src/_ng_select_custom_styles.scss b/src/_ng_select_custom_styles.scss new file mode 100644 index 0000000..e6d6998 --- /dev/null +++ b/src/_ng_select_custom_styles.scss @@ -0,0 +1,30 @@ +.ng-select .ng-select-container { + background: transparent; + border: none; + border-bottom: 2px solid var(--input-border) +} + +.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label { + padding: 5px 8px; +} + +.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value { + background-color: transparent; + border: 2px solid var(--input-border); + border-radius: 3px; +} + +.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left { + border-right: 2px solid var(--input-border); +} + +.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container { + border-color: inherit; + background-color: inherit; + outline: none; + box-shadow: none; +} + +.ng-select.ng-select-opened>.ng-select-container { + background-color: transparent; +} \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index bddd953..46ee23c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -15,6 +15,7 @@ import { SettingsComponent } from './dashboard/settings/settings.component'; import { PartnerProfileService } from './services/partner-profile.service'; import { PartnerDetailsComponent } from './dashboard/partner-details/partner-details.component'; +import { NgSelectModule } from '@ng-select/ng-select'; import { FormsModule } from '@angular/forms'; import { AuthService } from './services/auth.service'; @@ -34,6 +35,7 @@ import { AuthService } from './services/auth.service'; AppRoutingModule, BrowserAnimationsModule, HttpClientModule, + NgSelectModule, FormsModule, NgxEchartsModule.forRoot({ echarts: () => import('echarts'), diff --git a/src/app/dashboard/partner-details/partner-details.component.html b/src/app/dashboard/partner-details/partner-details.component.html index 5de944b..61a9331 100644 --- a/src/app/dashboard/partner-details/partner-details.component.html +++ b/src/app/dashboard/partner-details/partner-details.component.html @@ -30,13 +30,13 @@
- +
- +
@@ -72,9 +72,11 @@
-
+ +
@@ -164,27 +166,31 @@
-
- -
+ +
-
-
- + +
+ + +
- -
-
-
- +
+ + +
- -
+
-
- -
+ +
-
- -
+ +
-
- -
+ +
@@ -241,11 +249,10 @@
-
- -
+ +
@@ -262,11 +269,10 @@
-
- -
+ +
diff --git a/src/app/dashboard/partner-details/partner-details.component.ts b/src/app/dashboard/partner-details/partner-details.component.ts index 1614094..8e25d6f 100644 --- a/src/app/dashboard/partner-details/partner-details.component.ts +++ b/src/app/dashboard/partner-details/partner-details.component.ts @@ -1,7 +1,8 @@ import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import * as Papa from 'papaparse'; -import { UserData } from 'src/shared/structure/user'; +import { AREAS_OF_WORK, COUNTRIES, STATES, COMMUNITIES, PREFERRED_MODE_OF_COMMUNICATION, PREFERRED_LANGUAGES, AREAS_OF_SUPPORT } from 'src/shared/data/form-options'; +import { UserData, UserDataOption } from 'src/shared/structure/user'; import * as XLSX from 'xlsx' type ExportType = "CSV" | "XLSX"; @@ -17,6 +18,15 @@ export class PartnerDetailsComponent implements OnInit { selectedSegment: 1 | 2 | 3 = 1; showExportOptions: boolean = false; + areasOfWork = AREAS_OF_WORK; + countries = COUNTRIES; + states = STATES; + districts: Array = []; + communities = COMMUNITIES; + preferredModesOfCommunication = PREFERRED_MODE_OF_COMMUNICATION; + preferredLanguages = PREFERRED_LANGUAGES; + areasOfSupport = AREAS_OF_SUPPORT; + exportData: Array = []; exportSurveyCtoData: Array = []; @@ -34,6 +44,15 @@ export class PartnerDetailsComponent implements OnInit { }).unsubscribe(); } + hasIndiaBranchLocation() { + return this.partnerDetails?.detailedProfile.branchLocationCountries.find(country => country.name === 'India'); + } + + updateDistricts(states: Array<{ districts: Array }>) { + console.log(states); + this.districts = states.map(state => state.districts).flat(); + } + loadExportData(partnerData: UserData) { let exportData: Array = []; diff --git a/src/styles.scss b/src/styles.scss index e7bc7d9..66b6484 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,7 +1,9 @@ /* You can add global styles to this file, and also import other style files */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap'); +@import "~@ng-select/ng-select/themes/default.theme.css"; +@import "./ng_select_custom_styles"; -* { +* { font-family: 'Roboto', sans-serif; margin: 0; padding: 0; @@ -41,7 +43,8 @@ border: none; transition: box-shadow 0.3s, color 0.3s, background-color 0.3s; - &:hover, &:active { + &:hover, + &:active { box-shadow: 0 5px 5px -3px #0003, 0 8px 10px 1px #00000024, 0 3px 14px 2px #0000001f; } } @@ -95,7 +98,7 @@ border-top-left-radius: 0px; border-left: 0px; - & + label { + &+label { border: 2px solid var(--primary); border-radius: var(--common-border-radius); border-top-right-radius: 0px; @@ -121,7 +124,9 @@ border-bottom-left-radius: 0; } - input, textarea, .text { + input, + textarea, + .text { display: block; background-color: transparent; color: var(--primary-text); @@ -142,8 +147,8 @@ border-top: 0; border-top-right-radius: 0; border-top-left-radius: 0; - - & + label { + + &+label { color: var(--primary); font-weight: 500; border-color: var(--primary);