kj
/
cac-desktop
1
0
Forkuj 0
Kod Zgłoszenia 0 Oczekujące zmiany 0 Wydania 0 Wiki Aktywność
Angular app for CAC desktop
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
33 Commity
1 Gałąź
1.4 MiB
 
 
 
 
Drzewo: f1e516db35
Gałęzie Tagi
${ item.name }
Utwórz gałąź ${ searchTerm }
z 'f1e516db35'
${ noResults }
cac-desktop/src/app/dashboard/partner-details/partner-details.component.html

556 wiersze
26 KiB
Czysty Wina Historia 

  1. <section *ngIf="partnerDetails">

  2.     <div class="shadow" *ngIf="showExportOptions" (click)="showExportOptions = false"></div>

  3. 

  4.     <section class="subpage">

  5.         <header class="main-header">

  6.             <h2> Partner Profile </h2>

  7.         </header>

  8. 

  9.         <div class="segments">

  10.             <button class="button" [ngClass]="{'active' : selectedSegment === 1}" (click)="selectedSegment = 1"> Profile

  11.             </button>

  12.             <button class="button" [ngClass]="{'active' : selectedSegment === 2}" (click)="selectedSegment = 2"

  13.                 *ngIf="partnerDetails.surveyCtoData.hiiData.length > 0 || partnerDetails.surveyCtoData.spData.length > 0 || partnerDetails.surveyCtoData.spSchemeData.length > 0">

  14.                 Implementation Data </button>

  15.         </div>

  16. 

  17.         <ng-container *ngIf="selectedSegment === 1">

  18.             <section class="card">

  19.                 <header>

  20.                     <h5> Primary Contact </h5>

  21.                 </header>

  22. 

  23.                 <div class="container">

  24.                     <div class="input-holder">

  25.                         <input type="text" disabled="{{ !isFormEditable }}"

  26.                             [(ngModel)]="partnerDetails.primaryContact.name">

  27.                         <label> Name </label>

  28.                     </div>

  29. 

  30.                     <div class="input-holder">

  31.                         <input type="text" disabled="{{ !isFormEditable }}"

  32.                             [(ngModel)]="partnerDetails.primaryContact.designation">

  33.                         <label> Designation </label>

  34.                     </div>

  35. 

  36.                     <div class="input-holder">

  37.                         <input type="text" disabled="{{ !isFormEditable }}"

  38.                             [(ngModel)]="partnerDetails.primaryContact.email">

  39.                         <label> Email </label>

  40.                     </div>

  41. 

  42.                     <div class="input-holder">

  43.                         <input type="text" disabled="{{ !isFormEditable }}"

  44.                             [(ngModel)]="partnerDetails.primaryContact.contactNumber">

  45.                         <label> Contact </label>

  46.                     </div>

  47.                 </div>

  48.             </section>

  49. 

  50.             <section class="card">

  51.                 <header>

  52.                     <h5> Basic Info </h5>

  53.                 </header>

  54. 

  55.                 <div class="container">

  56.                     <div class="input-holder">

  57.                         <input type="text" disabled="{{ !isFormEditable }}"

  58.                             [(ngModel)]="partnerDetails.organizationBasicInfo.name">

  59.                         <label> Name </label>

  60.                     </div>

  61. 

  62.                     <div class="input-holder">

  63.                         <input type="text" disabled="{{ !isFormEditable }}"

  64.                             [(ngModel)]="partnerDetails.organizationBasicInfo.website">

  65.                         <label> Official Website </label>

  66.                     </div>

  67. 

  68.                     <div class="input-holder">

  69.                         <input type="text" disabled="{{ !isFormEditable }}"

  70.                             [(ngModel)]="partnerDetails.organizationBasicInfo.type">

  71.                         <label> Type </label>

  72.                     </div>

  73. 

  74.                     <div class="input-holder">

  75.                         <ng-select [items]="areasOfWork" [readonly]="!isFormEditable" [multiple]="true"

  76.                             [closeOnSelect]="false" [searchable]="false" bindLabel="name"

  77.                             placeholder="Select areas of work"

  78.                             [(ngModel)]="partnerDetails.organizationBasicInfo.areasOfWork">

  79.                         </ng-select>

  80.                         <label> Thematic areas of work </label>

  81.                     </div>

  82. 

  83.                     <div class="input-holder">

  84.                         <input type="text" disabled="{{ !isFormEditable }}"

  85.                             [(ngModel)]="partnerDetails.organizationBasicInfo.source">

  86.                         <label> How did you hear about us </label>

  87.                     </div>

  88. 

  89.                     <div class="input-holder">

  90.                         <input type="text" disabled="{{ !isFormEditable }}"

  91.                             [(ngModel)]="partnerDetails.organizationBasicInfo.referralName">

  92.                         <label> Name of the organisation and person that referred </label>

  93.                     </div>

  94. 

  95.                     <div class="checkbox-holder">

  96.                         <input type="checkbox" disabled="{{ !isFormEditable }}"

  97.                             [(ngModel)]="partnerDetails.organizationBasicInfo.wouldLikeUpdates">

  98.                         <label> I would like to receive periodic updates about CAC </label>

  99.                     </div>

  100. 

  101.                     <div class="input-holder">

  102.                         <textarea type="text" disabled="{{ !isFormEditable }}"

  103.                             [(ngModel)]="partnerDetails.organizationBasicInfo.reasonForBecomingMember"></textarea>

  104.                         <label> I would like to become a member of CAC because </label>

  105.                     </div>

  106.                 </div>

  107. 

  108.             </section>

  109. 

  110.             <section class="card">

  111.                 <header>

  112.                     <h5> Alternative Contact </h5>

  113.                 </header>

  114. 

  115.                 <div class="container">

  116. 

  117. 

  118.                     <div class="input-holder">

  119.                         <input type="text" disabled="{{ !isFormEditable }}"

  120.                             [(ngModel)]="partnerDetails.alternateContact.designation">

  121.                         <label> Name </label>

  122.                     </div>

  123. 

  124.                     <div class="input-holder">

  125.                         <input type="text" disabled="{{ !isFormEditable }}"

  126.                             [(ngModel)]="partnerDetails.alternateContact.email">

  127.                         <label> Name </label>

  128.                     </div>

  129. 

  130.                     <div class="input-holder">

  131.                         <input type="text" disabled="{{ !isFormEditable }}"

  132.                             [(ngModel)]="partnerDetails.alternateContact.contactNumber">

  133.                         <label> Contact </label>

  134.                     </div>

  135.                 </div>

  136.             </section>

  137. 

  138.             <section class="card">

  139.                 <header>

  140.                     <h5> Detailed Profile </h5>

  141.                 </header>

  142. 

  143.                 <div class="container">

  144.                     <div class="input-holder">

  145.                         <input type="text" disabled="{{ !isFormEditable }}"

  146.                             [(ngModel)]="partnerDetails.detailedProfile.partnerLocation">

  147.                         <label> Partner/Organization/Network Headquarters Location </label>

  148.                     </div>

  149. 

  150.                     <div class="input-holder">

  151.                         <input type="text" disabled="{{ !isFormEditable }}"

  152.                             [(ngModel)]="partnerDetails.detailedProfile.state">

  153.                         <label> State </label>

  154.                     </div>

  155. 

  156.                     <div class="input-holder">

  157.                         <input type="text" disabled="{{ !isFormEditable }}"

  158.                             [(ngModel)]="partnerDetails.detailedProfile.district">

  159.                         <label> District </label>

  160.                     </div>

  161. 

  162.                     <div class="checkbox-holder">

  163.                         <input type="checkbox" disabled="{{ !isFormEditable }}"

  164.                             [(ngModel)]="partnerDetails.detailedProfile.haveBranchesInOtherDistricts">

  165.                         <label> Do you have Branches / Field presence in any other District? </label>

  166.                     </div>

  167. 

  168.                     <div class="input-holder">

  169.                         <ng-select [items]="countries" [readonly]="!isFormEditable" [multiple]="true"

  170.                             [closeOnSelect]="false" bindLabel="name" placeholder="Select countries"

  171.                             [(ngModel)]="partnerDetails.detailedProfile.branchLocationCountries">

  172.                         </ng-select>

  173.                         <label> Branch or Field office Location (Countries) </label>

  174.                     </div>

  175. 

  176.                     <ng-container *ngIf="hasIndiaBranchLocation()">

  177.                         <div class="input-holder">

  178.                             <ng-select [items]="states" [readonly]="!isFormEditable" [multiple]="true"

  179.                                 [closeOnSelect]="false" [searchable]="false" bindLabel="name"

  180.                                 placeholder="Select states" (change)="updateDistricts($event)"

  181.                                 [(ngModel)]="partnerDetails.detailedProfile.states">

  182.                             </ng-select>

  183.                             <label> Branch or Field office Location (States) </label>

  184.                         </div>

  185. 

  186.                         <div class="input-holder">

  187.                             <ng-select [items]="districts" [readonly]="!isFormEditable" [multiple]="true"

  188.                                 [closeOnSelect]="false" [searchable]="false" bindLabel="name"

  189.                                 placeholder="Select districts" [(ngModel)]="partnerDetails.detailedProfile.districts">

  190.                             </ng-select>

  191.                             <label> Branch or Field office Location (Districts) </label>

  192.                         </div>

  193.                     </ng-container>

  194. 

  195.                     <div class="input-holder">

  196.                         <input type="text" disabled="{{ !isFormEditable }}"

  197.                             [(ngModel)]="partnerDetails.detailedProfile.yearOfEstablishment">

  198.                         <label> Which year your organisation/partner/network was established? </label>

  199.                     </div>

  200. 

  201.                     <div class="input-holder">

  202.                         <ng-select [items]="communities" [readonly]="!isFormEditable" [multiple]="true"

  203.                             [closeOnSelect]="false" [searchable]="false" bindLabel="name"

  204.                             placeholder="Select communities" [(ngModel)]="partnerDetails.detailedProfile.communities">

  205.                         </ng-select>

  206.                         <label> Which communities do you work with? </label>

  207.                     </div>

  208. 

  209.                     <div class="input-holder">

  210.                         <ng-select [items]="preferredModesOfCommunication" [readonly]="!isFormEditable"

  211.                             [multiple]="true" [closeOnSelect]="false" [searchable]="false" bindLabel="name"

  212.                             placeholder="Select mode of communication"

  213.                             [(ngModel)]="partnerDetails.detailedProfile.preferredModeOfCommunications">

  214.                         </ng-select>

  215.                         <label> Select your preferred mode of communications with the Collab</label>

  216.                     </div>

  217. 

  218.                     <div class="input-holder">

  219.                         <ng-select [items]="preferredLanguages" [readonly]="!isFormEditable" [multiple]="true"

  220.                             [closeOnSelect]="false" [searchable]="false" bindLabel="name"

  221.                             placeholder="Select preferred Language"

  222.                             [(ngModel)]="partnerDetails.detailedProfile.preferredLanguages">

  223.                         </ng-select>

  224.                         <label> Preferred Language of Communication* (emails, webinars etc. Select all that apply)

  225.                         </label>

  226.                     </div>

  227. 

  228.                     <div class="input-holder">

  229.                         <input type="text" disabled="{{ !isFormEditable }}"

  230.                             [(ngModel)]="partnerDetails.detailedProfile.totalReachOfOrganization">

  231.                         <label> What is the total reach of your organisation in a year? </label>

  232.                     </div>

  233. 

  234.                     <div class="input-holder">

  235.                         <textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}"

  236.                             [(ngModel)]="partnerDetails.detailedProfile.bio"></textarea>

  237.                         <label> Bio (This information will be displayed along with your logo in the members section of

  238.                             this website. Max:100 Characters) </label>

  239.                     </div>

  240.                 </div>

  241.             </section>

  242. 

  243.             <section class="card">

  244.                 <header>

  245.                     <h5>

  246.                         Strength &amp; Capability

  247.                     </h5>

  248.                 </header>

  249. 

  250.                 <div class="container">

  251.                     <div class="input-holder">

  252.                         <ng-select [items]="areasOfSupport" [readonly]="!isFormEditable" [multiple]="true"

  253.                             [closeOnSelect]="false" [searchable]="false" bindLabel="name" placeholder="Select areas"

  254.                             [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportRequired">

  255.                         </ng-select>

  256.                         <label> What are the primary areas of support that you seek from #COVIDActionCollab? </label>

  257.                     </div>

  258. 

  259.                     <div class="input-holder">

  260.                         <input type="text" disabled="{{ !isFormEditable }}"

  261.                             [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportRequiredOther">

  262.                         <label> If other, please describe </label>

  263.                     </div>

  264. 

  265.                     <div class="input-holder">

  266.                         <textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}"

  267.                             [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportRequiredDescription"></textarea>

  268.                         <label> Kindly elaborate on the option(s) selected above </label>

  269.                     </div>

  270. 

  271.                     <div class="input-holder">

  272.                         <ng-select [items]="areasOfSupport" [readonly]="!isFormEditable" [multiple]="true"

  273.                             [closeOnSelect]="false" [searchable]="false" bindLabel="name" placeholder="Select areas"

  274.                             [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportOffered">

  275.                         </ng-select>

  276.                         <label> What are the areas in which you can support/contribute to the #COVIDActionCollab and its

  277.                             partners? </label>

  278.                     </div>

  279. 

  280.                     <div class="input-holder">

  281.                         <input type="text" disabled="{{ !isFormEditable }}"

  282.                             [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportOfferedOther">

  283.                         <label> If other, please describe </label>

  284.                     </div>

  285. 

  286.                     <div class="input-holder">

  287.                         <textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}"

  288.                             [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportOfferedDescription"></textarea>

  289.                         <label> Kindly elaborate on the option(s) selected above </label>

  290.                     </div>

  291. 

  292.                     <div class="input-holder">

  293.                         <textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}"

  294.                             [(ngModel)]="partnerDetails.strengthAndCapability.otherSpecificSupportRequired"></textarea>

  295.                         <label> Do you require any other specific support? </label>

  296.                     </div>

  297.                 </div>

  298.             </section>

  299. 

  300.             <div class="card">

  301.                 <div class="checkbox-holder">

  302.                     <input type="checkbox" disabled [(ngModel)]="partnerDetails.didAgree">

  303.                     <label> I agree to the <a href="https://covidactioncollab.org/Mou-charter/" target="_blank">MOU &

  304.                             Charter</a>. </label>

  305.                 </div>

  306.                 <div class="checkbox-holder">

  307.                     <input type="checkbox" disabled [(ngModel)]="partnerDetails.didDeclare">

  308.                     <label> I/We hereby declare that I/we neither support nor are associated with any act which

  309.                         promotes: 1. Human trafficking; 2. Smoking / Chewing tobacco; 3. Violence / terrorism 4. Child

  310.                         labour / Child Marriage 5. Discrimination based color, race, religion, caste, disability &

  311.                         sexual orientation 6. Mining 7. Terrorism 8. Abortion counselling referrals, advocate to

  312.                         decriminalise abortion or expand abortion services. </label>

  313.                 </div>

  314.             </div>

  315.         </ng-container>

  316. 

  317.         <ng-container *ngIf="selectedSegment === 2">

  318.             <section class="card" *ngIf="partnerDetails.surveyCtoData.hiiData.length > 0">

  319.                 <header>

  320.                     <h5> HII Data </h5>

  321.                 </header>

  322.                 <section class="table" *ngFor="let package of partnerDetails.surveyCtoData.hiiData">

  323.                     <div class="row">

  324.                         <div class="col">

  325.                             Name

  326.                         </div>

  327.                         <div class="col">

  328.                             {{ package.name }}

  329.                         </div>

  330.                     </div>

  331.                     <div class="row">

  332.                         <div class="col">

  333.                             Implementation Status

  334.                         </div>

  335.                         <div class="col">

  336.                             {{ package.implementationStatus }}

  337.                         </div>

  338.                     </div>

  339.                     <div class="row">

  340.                         <div class="col">

  341.                             No. of Females

  342.                         </div>

  343.                         <div class="col">

  344.                             {{ package.noOfFemales }}

  345.                         </div>

  346.                     </div>

  347.                     <div class="row">

  348.                         <div class="col">

  349.                             No. of Males

  350.                         </div>

  351.                         <div class="col">

  352.                             {{ package.noOfMales }}

  353.                         </div>

  354.                     </div>

  355.                     <div class="row">

  356.                         <div class="col">

  357.                             No. of Transgenders

  358.                         </div>

  359.                         <div class="col">

  360.                             {{ package.noOfTransgender }}

  361.                         </div>

  362.                     </div>

  363.                     <div class="row">

  364.                         <div class="col">

  365.                             Health Package ID

  366.                         </div>

  367.                         <div class="col">

  368.                             {{ package.packagesHealth }}

  369.                         </div>

  370.                     </div>

  371.                     <div class="row">

  372.                         <div class="col">

  373.                             Health Remarks

  374.                         </div>

  375.                         <div class="col">

  376.                             {{ package.healthRemarks }}

  377.                         </div>

  378.                     </div>

  379.                     <div class="row">

  380.                         <div class="col">

  381.                             Disaggregation Note

  382.                         </div>

  383.                         <div class="col">

  384.                             {{ package.disaggregationNote }}

  385.                         </div>

  386.                     </div>

  387.                     <div class="row">

  388.                         <div class="col">

  389.                             Relevant Documents

  390.                         </div>

  391.                         <div class="col">

  392.                             <a *ngIf="package.relevantDocuments" href="{{ package.relevantDocuments }}" target="_blank"> Link </a>

  393.                             <span *ngIf="!package.relevantDocuments"> - </span>

  394.                         </div>

  395.                     </div>

  396.                 </section>

  397.             </section>

  398. 

  399.             <section class="card" *ngIf="partnerDetails.surveyCtoData.spData.length > 0">

  400.                 <header>

  401.                     <h5> SP Data </h5>

  402.                 </header>

  403.                 <section class="table" *ngFor="let package of partnerDetails.surveyCtoData.spData">

  404.                     <div class="row">

  405.                         <div class="col">

  406.                             Name

  407.                         </div>

  408.                         <div class="col">

  409.                             {{ package.name }}

  410.                         </div>

  411.                     </div>

  412.                     <div class="row">

  413.                         <div class="col">

  414.                             Implementation Status

  415.                         </div>

  416.                         <div class="col">

  417.                             {{ package.status }}

  418.                         </div>

  419.                     </div>

  420.                     <div class="row">

  421.                         <div class="col">

  422.                             Female Number

  423.                         </div>

  424.                         <div class="col">

  425.                             {{ package.femaleNo }}

  426.                         </div>

  427.                     </div>

  428.                     <div class="row">

  429.                         <div class="col">

  430.                             Male Number

  431.                         </div>

  432.                         <div class="col">

  433.                             {{ package.maleNo }}

  434.                         </div>

  435.                     </div>

  436.                     <div class="row">

  437.                         <div class="col">

  438.                             Transgenders Number

  439.                         </div>

  440.                         <div class="col">

  441.                             {{ package.tgNo }}

  442.                         </div>

  443.                     </div>

  444. 

  445.                     <div class="row">

  446.                         <div class="col">

  447.                             Total Aggregation

  448.                         </div>

  449.                         <div class="col">

  450.                             {{ package.totalAggregation }}

  451.                         </div>

  452.                     </div>

  453.                     <div class="row">

  454.                         <div class="col">

  455.                             Other Remarks

  456.                         </div>

  457.                         <div class="col">

  458.                             {{ package.otherRemarks }}

  459.                         </div>

  460.                     </div>

  461.                     <div class="row">

  462.                         <div class="col">

  463.                             Relevant Documents

  464.                         </div>

  465.                         <div class="col">

  466.                             <a *ngIf="package.relevantDocuments" href="{{ package.relevantDocuments }}" target="_blank"> Link </a>

  467.                             <span *ngIf="!package.relevantDocuments"> - </span>

  468.                         </div>

  469.                     </div>

  470.                 </section>

  471.             </section>

  472. 

  473.             <section class="card" *ngIf="partnerDetails.surveyCtoData.spSchemeData.length > 0">

  474.                 <header>

  475.                     <h5> SP Scheme </h5>

  476.                 </header>

  477.                 <section class="table" *ngFor="let package of partnerDetails.surveyCtoData.spSchemeData">

  478.                     <div class="row">

  479.                         <div class="col">

  480.                             Count

  481.                         </div>

  482.                         <div class="col">

  483.                             {{ package.count }}

  484.                         </div>

  485.                     </div>

  486.                     <div class="row">

  487.                         <div class="col">

  488.                             Scheme Id

  489.                         </div>

  490.                         <div class="col">

  491.                             {{ package.schemeId }}

  492.                         </div>

  493.                     </div>

  494.                 </section>

  495.             </section>

  496.         </ng-container>

  497. 

  498.         <section class="footer-buttons">

  499.             <div class="shadow" *ngIf="showExportOptions" (click)="showExportOptions = false"></div>

  500. 

  501.             <button class="button back" [routerLink]="'/dashboard/partners'">

  502.                 <img src="assets/chevron-left.svg" alt="">

  503.                 Back

  504.             </button>

  505. 

  506.             <ng-container *ngIf="!isFormEditable">

  507.                 <button class="button edit" (click)="isFormEditable=true"> <img src="assets/edit.svg" alt=""> Edit

  508.                 </button>

  509.                 <button class="button" (click)="showExportOptions=true"> <img src="assets/export.svg" alt=""> Export

  510.                 </button>

  511.                 <button class="button delete"> <img src="assets/delete.svg" alt=""> Delete </button>

  512.             </ng-container>

  513. 

  514.             <ng-container *ngIf="showExportOptions">

  515.                 <div class="export-options">

  516. 

  517.                     <div class="sub-options">

  518.                         <header>

  519.                             <h5>Select Data Type</h5>

  520.                         </header>

  521.                         <div>

  522.                             <span>Profile Data</span>

  523.                             <div class="radioButton" [ngClass]="{'active' : isProfileData}"

  524.                                 (click)="isProfileData = true; isImplementationData=false; isBothData=false"></div>

  525.                         </div>

  526.                         <div>

  527.                             <span>Implementation Data</span>

  528.                             <div class="radioButton" [ngClass]="{'active' : isImplementationData}"

  529.                                 (click)="isImplementationData= true; isProfileData=false; isBothData=false"></div>

  530.                         </div>

  531.                         <div>

  532.                             <span>Both</span>

  533.                             <div class="radioButton" [ngClass]="{'active' : isBothData}"

  534.                                 (click)="isBothData = true; isProfileData = false; isImplementationData=false"></div>

  535.                         </div>

  536.                     </div>

  537. 

  538.                     <header>

  539.                         <h5> Export as </h5>

  540.                     </header>

  541.                     <div class="options">

  542.                         <button class="button" (click)="exportProfileData('CSV')"> CSV </button>

  543.                         <button class="button" (click)="exportProfileData('XLSX')"> Excel </button>

  544.                     </div>

  545.                 </div>

  546.             </ng-container>

  547. 

  548.             <ng-container *ngIf="isFormEditable">

  549.                 <button class="button edit" (click)="save()"> <img src="assets/save.svg" alt=""> Save

  550.                 </button>

  551.                 <button class="button delete" (click)="isFormEditable=false"> X Cancel </button>

  552.             </ng-container>

  553.         </section>

  554.     </section>

  555. 

  556. </section>