cac-desktop/src/app/dashboard/table/table.component.html

<div class="subpage">
    <header class="main-header">
        <h2> All Partners <ng-container *ngIf="userData">({{ userData.length }})</ng-container> </h2>
    </header>

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

        <div class="table-actions">
            <div class="input-holder side-label">
                <input type="text" placeholder="Partner name" [(ngModel)]="searchText" (input)="getFilteredData()">
                <label> Search </label>
            </div>
            <button class="button" (click)="shouldHaveImplementationData = !shouldHaveImplementationData; getFilteredData()">
                <ng-container *ngIf="!shouldHaveImplementationData">
                    Partners with implmentation data
                </ng-container>
                <ng-container *ngIf="shouldHaveImplementationData">
                    Show all Partners
                </ng-container>
            </button>
            <button [disabled]="selectedPartnerList.length === 0" class="button" (click)="showExportOptions = true"> <img src="assets/export.svg" alt=""> Export </button>
            <button class="button"> <img src="assets/filter.svg" alt=""> Filter </button>
        </div>

        <ng-container *ngIf="showExportOptions">
            <div class="export-options">

                <div class="sub-options" *ngIf="shouldHaveImplementationData">
                    <header>
                        <h5>Select Data Type</h5>
                    </header> 
                    <div>
                        <span>Profile Data</span>
                        <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>
                    <div>
                        <span>Both</span>
                        <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">                    
                    <button (click) ="exportProfileData('CSV')" class="button"> CSV </button>
                    <button (click) ="exportProfileData('XLSX')" class="button"> Excel </button>
                </div>

            </div>

        </ng-container>

        <section class="table">
            <header>
                <div class="col"> <input type="checkbox" [checked]="isAllInputChecked()" (change)="selectAllPartner()"> Select </div>
                <div class="col"> Name </div>
                <div class="col"> Primary Disctrict &amp; State </div>
                <div class="col"> Type </div>
                <div class="col"> Total Reach </div>
                <div class="col"> Website </div>
                <div class="col"> Primary Contact </div>
            </header>
            <section class="data">
                <div class="row" *ngFor="let partner of tempUserData">
                    <div class="col"> <input type="checkbox" [checked]="isInputChecked(partner)" (change)="selectPartner(partner)"> </div>
                    <div class="col" (click)="showPartnerDetails(partner)">
                        {{ partner.organizationBasicInfo.name }}
                    </div>
                    <div class="col" (click)="showPartnerDetails(partner)">
                        {{ partner.detailedProfile.district }}, {{ partner.detailedProfile.state }}
                    </div>
                    <div class="col" (click)="showPartnerDetails(partner)"> 
                        {{ partner.organizationBasicInfo.type }}
                    </div>
                    <div class="col">
                        {{ partner.detailedProfile.totalReachOfOrganization }}
                    </div>
                    <div class="col">
                        <a target="_blank" [href]="partner.organizationBasicInfo.website">{{
                            partner.organizationBasicInfo.website }}</a>
                    </div>
                    <div class="col">
                        <div> {{ partner.primaryContact.name }} </div>
                        <a href="mailTo:{{partner.primaryContact.email}}"> {{ partner.primaryContact.email }} </a>
                        <a href="tel:{{partner.primaryContact.contactNumber}}"> {{ partner.primaryContact.contactNumber }} </a>
                    </div>
                </div> 
                <div class="row" *ngIf="userData.length > tempUserData.length">
                    <button class="button" (click)="loadMore()"> Load More </button>
                </div>               
            </section>
        </section>

    </div>
</div>