Partner profile info data integration - same as CAC website admin panel

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

@@ -86,6 +86,176 @@
 
     </section>
 
+    <section class="card">
+        <header>
+            <h5> Alternative Contact </h5>
+        </header>
+
+        <div class="container">
+            
+    
+            <div class="input-holder">
+                <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">
+                <label> Name </label>
+            </div>
+            
+            <div class="input-holder">
+                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.alternateContact.contactNumber">
+                <label> Contact </label>
+            </div>
+        </div>
+    </section>
+
+    <section class="card">
+        <header>
+            <h5> Detailed Profile </h5>
+        </header>
+
+        <div class="container">
+            <div class="input-holder">
+                <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">
+                <label> State </label>
+            </div>
+
+            <div class="input-holder">
+                <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">
+                <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>
+                <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>
+                </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>
+                <label> Branch or Field office Location (Districts) </label>
+            </div>
+
+            <div class="input-holder">
+                <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>
+                <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>
+                <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>
+            </div>
+
+            <div class="input-holder">
+                <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>
+            </div>
+        </div>
+    </section>
+
+    <section class="card">
+        <header>
+            <h5>
+                Strength &amp; Capability
+            </h5>
+        </header>
+
+       <div class="container">
+        <div class="input-holder">
+            <div class="text">
+                <button *ngFor="let support of partnerDetails.strengthAndCapability.primaryAreasOfSupportRequired"> {{ support }} </button>
+            </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">
+            <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>
+            <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">
+            <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>
+    </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>
+        </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>
+        </div>
+    </div>
+
     <section class="footer-buttons">
         <button class="button back" [routerLink]="'/dashboard/partners'">
             <img src="assets/chevron-left.svg" alt="">

src/app/dashboard/table/table.component.html

@@ -46,15 +46,15 @@
                 <div class="col"> Primary Contact </div>
             </header>
             <section class="data">
-                <div class="row" *ngFor="let partner of tempUserData" (click)="showPartnerDetails(partner)">
+                <div class="row" *ngFor="let partner of tempUserData">
                     <div class="col"> <input type="checkbox"> </div>
-                    <div class="col">
+                    <div class="col" (click)="showPartnerDetails(partner)">
                         {{ partner.organizationBasicInfo.name }}
                     </div>
-                    <div class="col">
+                    <div class="col" (click)="showPartnerDetails(partner)">
                         {{ partner.detailedProfile.district }}, {{ partner.detailedProfile.state }}
                     </div>
-                    <div class="col">
+                    <div class="col" (click)="showPartnerDetails(partner)"> 
                         {{ partner.organizationBasicInfo.type }}
                     </div>
                     <div class="col">

src/styles.scss

@@ -158,14 +158,17 @@
     }
 
     .text {
+        overflow: hidden;
+        height: auto;
+
         button {
             border: 2px solid var(--input-border);
             border-radius: var(--common-border-radius);
             font-size: 12px;
             color: var(--primary-text);
             padding: 5px 15px;
-            margin-right: 5px;
-            margin-top: 3px;
+            margin: 5px;
+            margin-right: 0;
             font-weight: 500;
             letter-spacing: 0.5px;
         }