Add multi select dropdowns for partner details

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",

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",

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;
+}

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'),

src/app/dashboard/partner-details/partner-details.component.html

@@ -30,13 +30,13 @@
                     <div class="input-holder">
                         <input type="text" disabled="{{ !isFormEditable }}"
                             [(ngModel)]="partnerDetails.primaryContact.designation">
-                        <label> Name </label>
+                        <label> Designation </label>
                     </div>
 
                     <div class="input-holder">
                         <input type="text" disabled="{{ !isFormEditable }}"
                             [(ngModel)]="partnerDetails.primaryContact.email">
-                        <label> Name </label>
+                        <label> Email </label>
                     </div>
 
                     <div class="input-holder">
@@ -72,9 +72,11 @@
                     </div>
 
                     <div class="input-holder">
-                        <div class="text"> <button
-                                *ngFor="let area of partnerDetails.organizationBasicInfo.areasOfWork"> {{ area.name }}
-                            </button> </div>
+                        <ng-select [items]="areasOfWork" [readonly]="!isFormEditable" [multiple]="true"
+                            [closeOnSelect]="false" [searchable]="false" bindLabel="name"
+                            placeholder="Select areas of work"
+                            [(ngModel)]="partnerDetails.organizationBasicInfo.areasOfWork">
+                        </ng-select>
                         <label> Thematic areas of work </label>
                     </div>
 
@@ -164,27 +166,31 @@
                     </div>
 
                     <div class="input-holder">
-                        <div class="text">
-                            <button *ngFor="let country of partnerDetails.detailedProfile.branchLocationCountries"> {{
-                                country }} </button>
-                        </div>
+                        <ng-select [items]="countries" [readonly]="!isFormEditable" [multiple]="true"
+                            [closeOnSelect]="false" bindLabel="name" placeholder="Select countries"
+                            [(ngModel)]="partnerDetails.detailedProfile.branchLocationCountries">
+                        </ng-select>
                         <label> Branch or Field office Location (Countries) </label>
                     </div>
 
-                    <div class="input-holder">
-                        <div class="text">
-                            <button *ngFor="let state of partnerDetails.detailedProfile.states"> {{ state }} </button>
+                    <ng-container *ngIf="hasIndiaBranchLocation()">
+                        <div class="input-holder">
+                            <ng-select [items]="states" [readonly]="!isFormEditable" [multiple]="true"
+                                [closeOnSelect]="false" [searchable]="false" bindLabel="name"
+                                placeholder="Select states" (change)="updateDistricts($event)"
+                                [(ngModel)]="partnerDetails.detailedProfile.states">
+                            </ng-select>
+                            <label> Branch or Field office Location (States) </label>
                         </div>
-                        <label> Branch or Field office Location (States) </label>
-                    </div>
 
-                    <div class="input-holder">
-                        <div class="text">
-                            <button *ngFor="let district of partnerDetails.detailedProfile.districts"> {{ district }}
-                            </button>
+                        <div class="input-holder">
+                            <ng-select [items]="districts" [readonly]="!isFormEditable" [multiple]="true"
+                                [closeOnSelect]="false" [searchable]="false" bindLabel="name"
+                                placeholder="Select districts" [(ngModel)]="partnerDetails.detailedProfile.districts">
+                            </ng-select>
+                            <label> Branch or Field office Location (Districts) </label>
                         </div>
-                        <label> Branch or Field office Location (Districts) </label>
-                    </div>
+                    </ng-container>
 
                     <div class="input-holder">
                         <input type="text" disabled="{{ !isFormEditable }}"
@@ -193,26 +199,28 @@
                     </div>
 
                     <div class="input-holder">
-                        <div class="text">
-                            <button *ngFor="let community of partnerDetails.detailedProfile.communities"> {{ community
-                                }} </button>
-                        </div>
+                        <ng-select [items]="communities" [readonly]="!isFormEditable" [multiple]="true"
+                            [closeOnSelect]="false" [searchable]="false" bindLabel="name"
+                            placeholder="Select communities" [(ngModel)]="partnerDetails.detailedProfile.communities">
+                        </ng-select>
                         <label> Which communities do you work with? </label>
                     </div>
 
                     <div class="input-holder">
-                        <div class="text">
-                            <button *ngFor="let mode of partnerDetails.detailedProfile.preferredModeOfCommunications">
-                                {{ mode.name }} </button>
-                        </div>
+                        <ng-select [items]="preferredModesOfCommunication" [readonly]="!isFormEditable"
+                            [multiple]="true" [closeOnSelect]="false" [searchable]="false" bindLabel="name"
+                            placeholder="Select mode of communication"
+                            [(ngModel)]="partnerDetails.detailedProfile.preferredModeOfCommunications">
+                        </ng-select>
                         <label> Select your preferred mode of communications with the Collab</label>
                     </div>
 
                     <div class="input-holder">
-                        <div class="text">
-                            <button *ngFor="let language of partnerDetails.detailedProfile.preferredLanguages"> {{
-                                language.name }} </button>
-                        </div>
+                        <ng-select [items]="preferredLanguages" [readonly]="!isFormEditable" [multiple]="true"
+                            [closeOnSelect]="false" [searchable]="false" bindLabel="name"
+                            placeholder="Select preferred Language"
+                            [(ngModel)]="partnerDetails.detailedProfile.preferredLanguages">
+                        </ng-select>
                         <label> Preferred Language of Communication* (emails, webinars etc. Select all that apply)
                         </label>
                     </div>
@@ -241,11 +249,10 @@
 
                 <div class="container">
                     <div class="input-holder">
-                        <div class="text">
-                            <button
-                                *ngFor="let support of partnerDetails.strengthAndCapability.primaryAreasOfSupportRequired">
-                                {{ support.name }} </button>
-                        </div>
+                        <ng-select [items]="areasOfSupport" [readonly]="!isFormEditable" [multiple]="true"
+                            [closeOnSelect]="false" [searchable]="false" bindLabel="name" placeholder="Select areas"
+                            [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportRequired">
+                        </ng-select>
                         <label> What are the primary areas of support that you seek from #COVIDActionCollab? </label>
                     </div>
 
@@ -262,11 +269,10 @@
                     </div>
 
                     <div class="input-holder">
-                        <div class="text">
-                            <button
-                                *ngFor="let support of partnerDetails.strengthAndCapability.primaryAreasOfSupportOffered">
-                                {{ support.name }} </button>
-                        </div>
+                        <ng-select [items]="areasOfSupport" [readonly]="!isFormEditable" [multiple]="true"
+                            [closeOnSelect]="false" [searchable]="false" bindLabel="name" placeholder="Select areas"
+                            [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportOffered">
+                        </ng-select>
                         <label> What are the areas in which you can support/contribute to the #COVIDActionCollab and its
                             partners? </label>
                     </div>

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<UserDataOption> = [];
+    communities = COMMUNITIES;
+    preferredModesOfCommunication = PREFERRED_MODE_OF_COMMUNICATION;
+    preferredLanguages = PREFERRED_LANGUAGES;
+    areasOfSupport = AREAS_OF_SUPPORT;
+
     exportData: Array<any> = [];
     exportSurveyCtoData: Array<any> = [];
 
@@ -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<UserDataOption> }>) {
+        console.log(states);
+        this.districts = states.map(state => state.districts).flat();
+    }
+
 
     loadExportData(partnerData: UserData) {
         let exportData: Array<any> = [];

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);