3 コミット

作成者 SHA1 メッセージ 日付
  Adwaith Rao bba80f9765 Add method to update partner profile 3年前
  Adwaith Rao 783ce3804e Add multi select dropdowns for partner details 3年前
  Adwaith Rao 1cfef03543 Include partner structure 3年前
8個のファイルの変更528行の追加358行の削除
分割表示
  1. +26
    -0
      package-lock.json
  2. +1
    -0
      package.json
  3. +30
    -0
      src/_ng_select_custom_styles.scss
  4. +2
    -0
      src/app/app.module.ts
  5. +292
    -234
      src/app/dashboard/partner-details/partner-details.component.html
  6. +155
    -117
      src/app/dashboard/partner-details/partner-details.component.ts
  7. +11
    -1
      src/app/services/partner-profile.service.ts
  8. +11
    -6
      src/styles.scss

+ 26
- 0
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",


+ 1
- 0
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",


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

+ 2
- 0
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'),


+ 292
- 234
src/app/dashboard/partner-details/partner-details.component.html ファイルの表示

@@ -1,4 +1,4 @@
<section>
<section *ngIf="partnerDetails">
<div class="shadow" *ngIf="showExportOptions" (click)="showExportOptions = false"></div>

<section class="subpage">
@@ -7,10 +7,11 @@
</header>

<div class="segments">
<button class="button" [ngClass]="{'active' : selectedSegment === 1}" (click)="selectedSegment = 1"> Profile </button>
<button class="button" [ngClass]="{'active' : selectedSegment === 2}" (click)="selectedSegment = 2"
*ngIf="partnerDetails.surveyCtoData.hiiData.length > 0 || partnerDetails.surveyCtoData.spData.length > 0 || partnerDetails.surveyCtoData.spSchemeData.length > 0"
> Implementation Data </button>
<button class="button" [ngClass]="{'active' : selectedSegment === 1}" (click)="selectedSegment = 1"> Profile
</button>
<button class="button" [ngClass]="{'active' : selectedSegment === 2}" (click)="selectedSegment = 2"
*ngIf="partnerDetails.surveyCtoData.hiiData.length > 0 || partnerDetails.surveyCtoData.spData.length > 0 || partnerDetails.surveyCtoData.spSchemeData.length > 0">
Implementation Data </button>
</div>

<ng-container *ngIf="selectedSegment === 1">
@@ -21,22 +22,26 @@

<div class="container">
<div class="input-holder">
<input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.primaryContact.name">
<input type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.primaryContact.name">
<label> Name </label>
</div>
<div class="input-holder">
<input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.primaryContact.designation">
<label> Name </label>
<input type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.primaryContact.designation">
<label> Designation </label>
</div>
<div class="input-holder">
<input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.primaryContact.email">
<label> Name </label>
<input type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.primaryContact.email">
<label> Email </label>
</div>
<div class="input-holder">
<input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.primaryContact.contactNumber">
<input type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.primaryContact.contactNumber">
<label> Contact </label>
</div>
</div>
@@ -49,42 +54,53 @@

<div class="container">
<div class="input-holder">
<input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.name">
<input type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.organizationBasicInfo.name">
<label> Name </label>
</div>
<div class="input-holder">
<input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.website">
<input type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.organizationBasicInfo.website">
<label> Official Website </label>
</div>
<div class="input-holder">
<input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.type">
<input type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.organizationBasicInfo.type">
<label> Type </label>
</div>
<div class="input-holder">
<div class="text"> <button *ngFor="let area of partnerDetails.organizationBasicInfo.areasOfWork"> {{ area }} </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>
<div class="input-holder">
<input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.source">
<input type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.organizationBasicInfo.source">
<label> How did you hear about us </label>
</div>
<div class="input-holder">
<input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.referralName">
<input type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.organizationBasicInfo.referralName">
<label> Name of the organisation and person that referred </label>
</div>

<div class="checkbox-holder">
<input type="checkbox" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.wouldLikeUpdates">
<input type="checkbox" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.organizationBasicInfo.wouldLikeUpdates">
<label> I would like to receive periodic updates about CAC </label>
</div>

<div class="input-holder">
<textarea type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.reasonForBecomingMember"></textarea>
<textarea type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.organizationBasicInfo.reasonForBecomingMember"></textarea>
<label> I would like to become a member of CAC because </label>
</div>
</div>
@@ -97,20 +113,23 @@
</header>

<div class="container">
<div class="input-holder">
<input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.alternateContact.designation">
<input type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.alternateContact.designation">
<label> Name </label>
</div>
<div class="input-holder">
<input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.alternateContact.email">
<input type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.alternateContact.email">
<label> Name </label>
</div>
<div class="input-holder">
<input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.alternateContact.contactNumber">
<input type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.alternateContact.contactNumber">
<label> Contact </label>
</div>
</div>
@@ -123,80 +142,100 @@

<div class="container">
<div class="input-holder">
<input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.detailedProfile.partnerLocation">
<input type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.detailedProfile.partnerLocation">
<label> Partner/Organization/Network Headquarters Location </label>
</div>

<div class="input-holder">
<input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.detailedProfile.state">
<input type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.detailedProfile.state">
<label> State </label>
</div>

<div class="input-holder">
<input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.detailedProfile.district">
<input type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.detailedProfile.district">
<label> District </label>
</div>

<div class="checkbox-holder">
<input type="checkbox" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.detailedProfile.haveBranchesInOtherDistricts">
<input type="checkbox" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.detailedProfile.haveBranchesInOtherDistricts">
<label> Do you have Branches / Field presence in any other District? </label>
</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 }}" [(ngModel)]="partnerDetails.detailedProfile.yearOfEstablishment">
<input type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.detailedProfile.yearOfEstablishment">
<label> Which year your organisation/partner/network was established? </label>
</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 }} </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 }} </button>
</div>
<label> Preferred Language of Communication* (emails, webinars etc. Select all that apply) </label>
<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>

<div class="input-holder">
<input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.detailedProfile.totalReachOfOrganization">
<input type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.detailedProfile.totalReachOfOrganization">
<label> What is the total reach of your organisation in a year? </label>
</div>

<div class="input-holder">
<textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.detailedProfile.bio"></textarea>
<label> Bio (This information will be displayed along with your logo in the members section of this website. Max:100 Characters) </label>
<textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.detailedProfile.bio"></textarea>
<label> Bio (This information will be displayed along with your logo in the members section of
this website. Max:100 Characters) </label>
</div>
</div>
</section>
@@ -209,55 +248,68 @@
</header>

<div class="container">
<div class="input-holder">
<div class="text">
<button *ngFor="let support of partnerDetails.strengthAndCapability.primaryAreasOfSupportRequired"> {{ support }} </button>
<div class="input-holder">
<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>
<label> What are the primary areas of support that you seek from #COVIDActionCollab? </label>
</div>

<div class="input-holder">
<input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportRequiredOther">
<label> If other, please describe </label>
</div>
<div class="input-holder">
<input type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportRequiredOther">
<label> If other, please describe </label>
</div>

<div class="input-holder">
<textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportRequiredDescription"></textarea>
<label> Kindly elaborate on the option(s) selected above </label>
</div>
<div class="input-holder">
<textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportRequiredDescription"></textarea>
<label> Kindly elaborate on the option(s) selected above </label>
</div>

<div class="input-holder">
<div class="text">
<button *ngFor="let support of partnerDetails.strengthAndCapability.primaryAreasOfSupportOffered"> {{ support }} </button>
<div class="input-holder">
<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>
<label> What are the areas in which you can support/contribute to the #COVIDActionCollab and its partners? </label>
</div>

<div class="input-holder">
<input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportOfferedOther">
<label> If other, please describe </label>
</div>
<div class="input-holder">
<input type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportOfferedOther">
<label> If other, please describe </label>
</div>

<div class="input-holder">
<textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportOfferedDescription"></textarea>
<label> Kindly elaborate on the option(s) selected above </label>
</div>
<div class="input-holder">
<textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportOfferedDescription"></textarea>
<label> Kindly elaborate on the option(s) selected above </label>
</div>

<div class="input-holder">
<textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.strengthAndCapability.otherSpecificSupportRequired"></textarea>
<label> Do you require any other specific support? </label>
</div>
<div class="input-holder">
<textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}"
[(ngModel)]="partnerDetails.strengthAndCapability.otherSpecificSupportRequired"></textarea>
<label> Do you require any other specific support? </label>
</div>
</div>
</section>

<div class="card">
<div class="checkbox-holder">
<input type="checkbox" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.didAgree">
<label> I agree to the <a href="https://covidactioncollab.org/Mou-charter/" target="_blank">MOU & Charter</a>. </label>
<label> I agree to the <a href="https://covidactioncollab.org/Mou-charter/" target="_blank">MOU &
Charter</a>. </label>
</div>
<div class="checkbox-holder">
<input type="checkbox" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.didDeclare">
<label> I/We hereby declare that I/we neither support nor are associated with any act which promotes: 1. Human trafficking; 2. Smoking / Chewing tobacco; 3. Violence / terrorism 4. Child labour / Child Marriage 5. Discrimination based color, race, religion, caste, disability & sexual orientation 6. Mining 7. Terrorism 8. Abortion counselling referrals, advocate to decriminalise abortion or expand abortion services. </label>
<label> I/We hereby declare that I/we neither support nor are associated with any act which
promotes: 1. Human trafficking; 2. Smoking / Chewing tobacco; 3. Violence / terrorism 4. Child
labour / Child Marriage 5. Discrimination based color, race, religion, caste, disability &
sexual orientation 6. Mining 7. Terrorism 8. Abortion counselling referrals, advocate to
decriminalise abortion or expand abortion services. </label>
</div>
</div>
</ng-container>
@@ -268,78 +320,78 @@
<h5> HII Data </h5>
</header>
<section class="table" *ngFor="let package of partnerDetails.surveyCtoData.hiiData">
<div class="row">
<div class="col">
Name
</div>
<div class="col">
{{ package.name }}
</div>
</div>
<div class="row">
<div class="col">
Implementation Status
</div>
<div class="col">
{{ package.implementationStatus }}
</div>
</div>
<div class="row">
<div class="col">
No. of Females
</div>
<div class="col">
{{ package.noOfFemales }}
</div>
</div>
<div class="row">
<div class="col">
No. of Males
</div>
<div class="col">
{{ package.noOfMales }}
</div>
</div>
<div class="row">
<div class="col">
No. of Transgenders
</div>
<div class="col">
{{ package.noOfTransgender }}
</div>
</div>
<div class="row">
<div class="col">
Health Package ID
</div>
<div class="col">
{{ package.packagesHealth }}
</div>
</div>
<div class="row">
<div class="col">
Health Remarks
</div>
<div class="col">
{{ package.healthRemarks }}
</div>
</div>
<div class="row">
<div class="col">
Disaggregation Note
</div>
<div class="col">
{{ package.disaggregationNote }}
</div>
</div>
<div class="row">
<div class="col">
Relevant Documents
</div>
<div class="col">
<a href="{{ package.relevantDocuments }}" target="_blank"> Link </a>
</div>
<div class="row">
<div class="col">
Name
</div>
<div class="col">
{{ package.name }}
</div>
</div>
<div class="row">
<div class="col">
Implementation Status
</div>
<div class="col">
{{ package.implementationStatus }}
</div>
</div>
<div class="row">
<div class="col">
No. of Females
</div>
<div class="col">
{{ package.noOfFemales }}
</div>
</div>
<div class="row">
<div class="col">
No. of Males
</div>
<div class="col">
{{ package.noOfMales }}
</div>
</div>
<div class="row">
<div class="col">
No. of Transgenders
</div>
<div class="col">
{{ package.noOfTransgender }}
</div>
</div>
<div class="row">
<div class="col">
Health Package ID
</div>
<div class="col">
{{ package.packagesHealth }}
</div>
</div>
<div class="row">
<div class="col">
Health Remarks
</div>
<div class="col">
{{ package.healthRemarks }}
</div>
</div>
<div class="row">
<div class="col">
Disaggregation Note
</div>
<div class="col">
{{ package.disaggregationNote }}
</div>
</div>
<div class="row">
<div class="col">
Relevant Documents
</div>
<div class="col">
<a href="{{ package.relevantDocuments }}" target="_blank"> Link </a>
</div>
</div>
</section>
</section>

@@ -348,46 +400,46 @@
<h5> SP Data </h5>
</header>
<section class="table" *ngFor="let package of partnerDetails.surveyCtoData.spData">
<div class="row">
<div class="col">
Name
</div>
<div class="col">
{{ package.name }}
</div>
</div>
<div class="row">
<div class="col">
Implementation Status
</div>
<div class="col">
{{ package.status }}
</div>
</div>
<div class="row">
<div class="col">
Total Aggregation
</div>
<div class="col">
{{ package.totalAggregation }}
</div>
</div>
<div class="row">
<div class="col">
Other Remarks
</div>
<div class="col">
{{ package.otherRemarks }}
</div>
</div>
<div class="row">
<div class="col">
Relevant Documents
</div>
<div class="col">
<a href="{{ package.relevantDocuments }}" target="_blank"> Link </a>
</div>
</div>
<div class="row">
<div class="col">
Name
</div>
<div class="col">
{{ package.name }}
</div>
</div>
<div class="row">
<div class="col">
Implementation Status
</div>
<div class="col">
{{ package.status }}
</div>
</div>
<div class="row">
<div class="col">
Total Aggregation
</div>
<div class="col">
{{ package.totalAggregation }}
</div>
</div>
<div class="row">
<div class="col">
Other Remarks
</div>
<div class="col">
{{ package.otherRemarks }}
</div>
</div>
<div class="row">
<div class="col">
Relevant Documents
</div>
<div class="col">
<a href="{{ package.relevantDocuments }}" target="_blank"> Link </a>
</div>
</div>
</section>
</section>

@@ -396,22 +448,22 @@
<h5> SP Scheme </h5>
</header>
<section class="table" *ngFor="let package of partnerDetails.surveyCtoData.spSchemeData">
<div class="row">
<div class="col">
Count
</div>
<div class="col">
{{ package.count }}
</div>
</div>
<div class="row">
<div class="col">
Scheme Id
</div>
<div class="col">
{{ package.schemeId }}
</div>
</div>
<div class="row">
<div class="col">
Count
</div>
<div class="col">
{{ package.count }}
</div>
</div>
<div class="row">
<div class="col">
Scheme Id
</div>
<div class="col">
{{ package.schemeId }}
</div>
</div>
</section>
</section>
</ng-container>
@@ -423,10 +475,12 @@
<img src="assets/chevron-left.svg" alt="">
Back
</button>
<ng-container *ngIf="!isFormEditable" >
<button class="button edit" (click)="isFormEditable=true"> <img src="assets/edit.svg" alt=""> Edit </button>
<button class="button" (click)="showExportOptions=true"> <img src="assets/export.svg" alt=""> Export </button>

<ng-container *ngIf="!isFormEditable">
<button class="button edit" (click)="isFormEditable=true"> <img src="assets/edit.svg" alt=""> Edit
</button>
<button class="button" (click)="showExportOptions=true"> <img src="assets/export.svg" alt=""> Export
</button>
<button class="button delete"> <img src="assets/delete.svg" alt=""> Delete </button>
</ng-container>

@@ -436,25 +490,28 @@
<div class="sub-options">
<header>
<h5>Select Data Type</h5>
</header>
</header>
<div>
<span>Profile Data</span>
<div class="radioButton" [ngClass]="{'active' : isProfileData}" (click) = "isProfileData = true; isImplementationData=false; isBothData=false" ></div>
<div class="radioButton" [ngClass]="{'active' : isProfileData}"
(click)="isProfileData = true; isImplementationData=false; isBothData=false"></div>
</div>
<div>
<span>Implementation Data</span>
<div class="radioButton" [ngClass]="{'active' : isImplementationData}" (click) = "isImplementationData= true; isProfileData=false; isBothData=false" ></div>
<div class="radioButton" [ngClass]="{'active' : isImplementationData}"
(click)="isImplementationData= true; isProfileData=false; isBothData=false"></div>
</div>
<div>
<span>Both</span>
<div class="radioButton" [ngClass]="{'active' : isBothData}" (click)="isBothData = true; isProfileData = false; isImplementationData=false"></div>
<div class="radioButton" [ngClass]="{'active' : isBothData}"
(click)="isBothData = true; isProfileData = false; isImplementationData=false"></div>
</div>
</div>

<header>
<h5> Export as </h5>
</header>
<div class="options">
<div class="options">
<button class="button" (click)="exportProfileData('CSV')"> CSV </button>
<button class="button" (click)="exportProfileData('XLSX')"> Excel </button>
</div>
@@ -462,7 +519,8 @@
</ng-container>

<ng-container *ngIf="isFormEditable">
<button class="button edit" (click)="isFormEditable=false"> <img src="assets/save.svg" alt=""> Save </button>
<button class="button edit" (click)="save()"> <img src="assets/save.svg" alt=""> Save
</button>
<button class="button delete" (click)="isFormEditable=false"> X Cancel </button>
</ng-container>
</section>


+ 155
- 117
src/app/dashboard/partner-details/partner-details.component.ts ファイルの表示

@@ -1,9 +1,12 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import * as Papa from 'papaparse';
import { PartnerProfileService } from 'src/app/services/partner-profile.service';
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";
type ExportType = "CSV" | "XLSX";

@Component({
selector: 'app-partner-details',
@@ -11,11 +14,20 @@ type exportType = "CSV" | "XLSX";
styleUrls: ['./partner-details.component.scss']
})
export class PartnerDetailsComponent implements OnInit {
partnerDetails: any;
partnerDetails: UserData | undefined;
isFormEditable: boolean = false;
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> = [];

@@ -24,18 +36,27 @@ export class PartnerDetailsComponent implements OnInit {
isBothData: boolean = false;

constructor(
private activateRouter: ActivatedRoute
private activateRouter: ActivatedRoute,
private partnerProfileService: PartnerProfileService
) { }

ngOnInit(): void {
this.activateRouter.queryParams.subscribe((data: any) => {
this.partnerDetails = JSON.parse(data.data);
console.log(this.partnerDetails);
}).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: any) {
loadExportData(partnerData: UserData) {
let exportData: Array<any> = [];
let exportHiiData: Array<any> = [];
let exportSpData: Array<any> = [];
@@ -45,123 +66,136 @@ export class PartnerDetailsComponent implements OnInit {


exportData = [{
"PortalID": partnerData.portalId ? partnerData.portalId : '-',

// Primary Contact

"Primary Name": partnerData.primaryContact.name,
"Primary Contact Number": partnerData.primaryContact.contactNumber,
"Primary Email": partnerData.primaryContact.email,
"Primary Designation": partnerData.primaryContact.designation,

// Basic Info

"Areas Of Work": partnerData.organizationBasicInfo.areasOfWork ? partnerData.organizationBasicInfo.areasOfWork.toString() : '',
"Name": partnerData.organizationBasicInfo.name,
"Reason For Becoming Member": partnerData.organizationBasicInfo.reasonForBecomingMember,
"Referral Name": partnerData.organizationBasicInfo.referralName,
"Source": partnerData.organizationBasicInfo.source,
"Type": partnerData.organizationBasicInfo.type,
"Website": partnerData.organizationBasicInfo.website,
"Would Like Updates": partnerData.organizationBasicInfo.wouldLikeUpdates,

// Alternative Contact

'Alternative Name': partnerData.alternateContact.name,
'Alternative ContactNumber': partnerData.alternateContact.contactNumber,
'Alternative Email': partnerData.alternateContact.email,
'Alternative Designation': partnerData.alternateContact.designation,

// Detailed Profile

'Bio': partnerData.detailedProfile.bio,
'Branch Location Countries': partnerData.detailedProfile.branchLocationCountries ? partnerData.detailedProfile.branchLocationCountries.toString() : '',
"Communities": partnerData.detailedProfile.communities ? partnerData.detailedProfile.communities.toString() : '',
"District": partnerData.detailedProfile.district,
"Districts": partnerData.detailedProfile.districts ? partnerData.detailedProfile.districts.toString() : '',
"Files": partnerData.detailedProfile.files,
"Have Branches In Other Districts": partnerData.detailedProfile.haveBranchesInOtherDistricts,
"Logo": partnerData.detailedProfile.logo,
"partnerData Location": partnerData.detailedProfile.partnerDataLocation,
"Preferred Languages": partnerData.detailedProfile.preferredLanguages ? partnerData.detailedProfile.preferredLanguages.toString() : '',
"Preferred Mode Of Communications": partnerData.detailedProfile.preferredModeOfCommunications ? partnerData.detailedProfile.preferredModeOfCommunications.toString() : '',
"State": partnerData.detailedProfile.state,
"States": partnerData.detailedProfile.states ? partnerData.detailedProfile.states.toString() : '',
"Total Reach Of Organization": partnerData.detailedProfile.totalReachOfOrganization,
"Year Of Establishment": partnerData.detailedProfile.yearOfEstablishment,

// Strength

"Other Specific Support Required": partnerData.strengthAndCapability.otherSpecificSupportRequired,
"Primary Areas Of Support Offered": partnerData.strengthAndCapability.otherSpecificSupportRequired ? partnerData.strengthAndCapability.otherSpecificSupportRequired.toString() : '',
"Primary Areas Of Support Offered Description": partnerData.strengthAndCapability.primaryAreasOfSupportOffered,
"Primary Areas Of Support Offered Other": partnerData.strengthAndCapability.primaryAreasOfSupportOfferedDescription,
"Primary Areas Of Support Required": partnerData.strengthAndCapability.primaryAreasOfSupportOfferedOther ? partnerData.strengthAndCapability.primaryAreasOfSupportOfferedOther.toString() : '',
"Primary Areas Of Support Required Description": partnerData.strengthAndCapability.primaryAreasOfSupportRequired,
"Primary Areas Of Support Required Other": partnerData.strengthAndCapability.primaryAreasOfSupportRequiredOther,
}]


let surveyCtoHIIData = [];
for (const hiidata of partnerData.surveyCtoData.hiiData) {
let partnerHiiDetails = {
"HII Id": hiidata.id,
"HII Name": hiidata.name,
"HII Packages Health": hiidata.packagesHealth,
"HII Implementation Status": hiidata.implementationStatus,
"HII Disaggregation Note": hiidata.disaggregationNote,
"HII No Of Males": hiidata.id,
"HII No Of Females": hiidata.noOfMales,
"HII No Of Transgender": hiidata.noOfTransgender,
"HII Health Remarks": hiidata.healthRemarks,
"HII Relevant Documents": hiidata.relevantDocuments,
}
surveyCtoHIIData.push(partnerHiiDetails)
"PortalID": partnerData.portalId ? partnerData.portalId : '-',

// Primary Contact

"Primary Name": partnerData.primaryContact.name,
"Primary Contact Number": partnerData.primaryContact.contactNumber,
"Primary Email": partnerData.primaryContact.email,
"Primary Designation": partnerData.primaryContact.designation,

// Basic Info

"Areas Of Work": partnerData.organizationBasicInfo.areasOfWork ? partnerData.organizationBasicInfo.areasOfWork.map(option => option.name).join(', ') : '',
"Name": partnerData.organizationBasicInfo.name,
"Reason For Becoming Member": partnerData.organizationBasicInfo.reasonForBecomingMember,
"Referral Name": partnerData.organizationBasicInfo.referralName,
"Source": partnerData.organizationBasicInfo.source,
"Type": partnerData.organizationBasicInfo.type,
"Website": partnerData.organizationBasicInfo.website,
"Would Like Updates": partnerData.organizationBasicInfo.wouldLikeUpdates,

// Alternative Contact

'Alternative Name': partnerData.alternateContact.name,
'Alternative ContactNumber': partnerData.alternateContact.contactNumber,
'Alternative Email': partnerData.alternateContact.email,
'Alternative Designation': partnerData.alternateContact.designation,

// Detailed Profile

'Bio': partnerData.detailedProfile.bio,
'Branch Location Countries': partnerData.detailedProfile.branchLocationCountries ? partnerData.detailedProfile.branchLocationCountries.map(option => option.name).join(', ') : '',
"Communities": partnerData.detailedProfile.communities ? partnerData.detailedProfile.communities.map(option => option.name).join(', ') : '',
"District": partnerData.detailedProfile.district,
"Districts": partnerData.detailedProfile.districts ? partnerData.detailedProfile.districts.map(option => option.name).join(', ') : '',
"Files": partnerData.detailedProfile.files,
"Have Branches In Other Districts": partnerData.detailedProfile.haveBranchesInOtherDistricts,
"Logo": partnerData.detailedProfile.logo,
"partnerData Location": partnerData.detailedProfile.partnerLocation,
"Preferred Languages": partnerData.detailedProfile.preferredLanguages ? partnerData.detailedProfile.preferredLanguages.map(option => option.name).join(', ') : '',
"Preferred Mode Of Communications": partnerData.detailedProfile.preferredModeOfCommunications ? partnerData.detailedProfile.preferredModeOfCommunications.map(option => option.name).join(', ') : '',
"State": partnerData.detailedProfile.state,
"States": partnerData.detailedProfile.states ? partnerData.detailedProfile.states.map(option => option.name).join(', ') : '',
"Total Reach Of Organization": partnerData.detailedProfile.totalReachOfOrganization,
"Year Of Establishment": partnerData.detailedProfile.yearOfEstablishment,

// Strength

"Other Specific Support Required": partnerData.strengthAndCapability.otherSpecificSupportRequired,
"Primary Areas Of Support Offered": partnerData.strengthAndCapability.otherSpecificSupportRequired ? partnerData.strengthAndCapability.otherSpecificSupportRequired.toString() : '',
"Primary Areas Of Support Offered Description": partnerData.strengthAndCapability.primaryAreasOfSupportOffered.map(option => option.name).join(', '),
"Primary Areas Of Support Offered Other": partnerData.strengthAndCapability.primaryAreasOfSupportOfferedDescription,
"Primary Areas Of Support Required": partnerData.strengthAndCapability.primaryAreasOfSupportOfferedOther ? partnerData.strengthAndCapability.primaryAreasOfSupportOfferedOther.toString() : '',
"Primary Areas Of Support Required Description": partnerData.strengthAndCapability.primaryAreasOfSupportRequired.map(option => option.name).join(', '),
"Primary Areas Of Support Required Other": partnerData.strengthAndCapability.primaryAreasOfSupportRequiredOther,
}]



let surveyCtoHIIData = [];
for (const hiidata of partnerData.surveyCtoData.hiiData) {
let partnerHiiDetails = {
"HII Id": hiidata.id,
"HII Name": hiidata.name,
"HII Packages Health": hiidata.packagesHealth,
"HII Implementation Status": hiidata.implementationStatus,
"HII Disaggregation Note": hiidata.disaggregationNote,
"HII No Of Males": hiidata.id,
"HII No Of Females": hiidata.noOfMales,
"HII No Of Transgender": hiidata.noOfTransgender,
"HII Health Remarks": hiidata.healthRemarks,
"HII Relevant Documents": hiidata.relevantDocuments,
}
surveyCtoHIIData.forEach(data => {
exportHiiData.push(data)
})

let surveyCtoSpData = []
for (const spData of partnerData.surveyCtoData.spData) {
let partnerSpDetails = {
"SP Id": spData.id,
"SP Name": spData.name,
"SP Status": spData.status,
"SP TotalAggregation": spData.totalAggregation,
"SP OtherRemarks": spData.otherRemarks,
"SP RelevantDocuments": spData.relevantDocuments,
}

surveyCtoSpData.push(partnerSpDetails)
surveyCtoHIIData.push(partnerHiiDetails)
}
surveyCtoHIIData.forEach(data => {
exportHiiData.push(data)
})

let surveyCtoSpData = []
for (const spData of partnerData.surveyCtoData.spData) {
let partnerSpDetails = {
"SP Id": spData.id,
"SP Name": spData.name,
"SP Status": spData.status,
"SP TotalAggregation": spData.totalAggregation,
"SP OtherRemarks": spData.otherRemarks,
"SP RelevantDocuments": spData.relevantDocuments,
}
surveyCtoSpData.forEach(data => {
exportSpData.push(data)
})

let surveyCtoSpSchemaData = []
for (const spSchema of partnerData.surveyCtoData.spSchemeData) {
let partnerSpSchemaDetails = {
"SPSchema SchemeId": spSchema.schemeId,
"SPSchema Count": spSchema.count,
}

surveyCtoSpSchemaData.push(partnerSpSchemaDetails)

surveyCtoSpData.push(partnerSpDetails)
}
surveyCtoSpData.forEach(data => {
exportSpData.push(data)
})

let surveyCtoSpSchemaData = []
for (const spSchema of partnerData.surveyCtoData.spSchemeData) {
let partnerSpSchemaDetails = {
"SPSchema SchemeId": spSchema.schemeId,
"SPSchema Count": spSchema.count,
}

surveyCtoSpSchemaData.push(partnerSpSchemaDetails)
}
surveyCtoSpSchemaData.forEach(data => {
exportSPSchemaData.push(data)
})

surveyCtoData.push(exportHiiData)
surveyCtoData.push(exportSpData)
surveyCtoData.push(exportSPSchemaData)

this.exportData = exportData;
this.exportSurveyCtoData = surveyCtoData
}

async save() {

this.isFormEditable = false;

if (this.partnerDetails) {
try {
await this.partnerProfileService.updatePartnerData(this.partnerDetails);
} catch (e) {
console.error('Could not update partner data', e);
}
surveyCtoSpSchemaData.forEach(data => {
exportSPSchemaData.push(data)
})

surveyCtoData.push(exportHiiData)
surveyCtoData.push(exportSpData)
surveyCtoData.push(exportSPSchemaData)
this.exportData = exportData;
this.exportSurveyCtoData = surveyCtoData
}
}

exportProfileData(exportType: exportType) {
exportProfileData(exportType: ExportType) {
const fileTypeXLS = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8',
fileTypeCSV = 'text/csv;charset=utf-8;',
fileExtension = exportType === 'CSV' ? '.csv' : '.xlsx',
@@ -169,6 +203,10 @@ export class PartnerDetailsComponent implements OnInit {

let blob;

if (!this.partnerDetails) {
return;
}

this.loadExportData(this.partnerDetails)

const partnerData = XLSX.utils.json_to_sheet(this.exportData);


+ 11
- 1
src/app/services/partner-profile.service.ts ファイルの表示

@@ -1,8 +1,9 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { lastValueFrom } from 'rxjs';
import { UserData } from 'src/shared/structure/user';

export const BASE_URL = 'http://143.110.247.94';
export const BASE_URL = 'http://localhost:8001';
// http://localhost:8001
// http://143.110.247.94

@@ -19,4 +20,13 @@ export class PartnerProfileService {
return lastValueFrom(this.http.get(BASE_URL + '/user-data/?token=' + localStorage.getItem('token')));
}

async updatePartnerData(userData: UserData) {
const requestBody = {
userId: userData.portalId,
userData,
};

return lastValueFrom(this.http.post(BASE_URL + '/user-update/?token=' + localStorage.getItem('token'), requestBody));
}

}

+ 11
- 6
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);


読み込み中…
キャンセル
保存