List scroll

gistfile1.txt

 HTML
 
 <div *ngFor="let patient of patients;let i=index" [id]="'scroll'+i" class="patient-list-{{patient.id}}">
                <div class="d-flex list-row-padding align-items-center ml-4 mr-4 patients-table-data border border-top-0 border-left-0 border-right-0 "
                    [id]="'patient'+i">

                    <div class="col-1 pr-1 circle-padding mr-1" *ngIf="patient.active==true && (patient.stats && patient.stats.los)">
                        <span class="d-flex rounded-circle  justify-content-center align-items-center round-circle text-white" [ngClass]="getLos(patient)">{{patient.stats.los}}</span>
                    </div>
                    <div class="col-1 pr-1 circle-padding mr-1" *ngIf="patient.active==false">
                        <span class="d-flex rounded-circle justify-content-center align-items-center round-circle text-white bg-dark"></span>
                    </div>
                    <div class="col-1 pr-1 circle-padding mr-1" *ngIf="patient.active==true && (!patient.stats || !(patient.stats && patient.stats.los))">
                        <span>
                            <img src="assets/circle-icon.png" width="41">
                        </span>
                    </div>
                    <div class="col-9 p-0 d-flex align-items-center h4">
                        <div class="col-3 pl-2 pr-2">
                            <div class=" text-primary h3 secondary-heading patient-name">{{patient.lastName | indicateEmpty}}, {{ patient.firstName | capitalizefirst}} 
                            </div>
                            <div class="text-truncate h4 font-weight-normal">{{ patient.phone | phoneNumFormat }} {{patient.phone_type | mobileIdentification}}</div>
                        </div>
                        <div class="col-3 pl-2 pr-2">
                            <div class="text-truncate h4">{{ getEmergencyContact(patient, 'name') | indicateEmpty }}</div>
                            <div class="text-truncate h4">{{ getEmergencyContact(patient, 'phone') | phoneNumFormat }} {{getEmergencyContact(patient, 'phone_type') | mobileIdentification}}</div>
                        </div>
                        <div class="col-3 pl-2 pr-2 h4">
                            <div *ngIf="patient.stats">
                                <div class="" *ngIf="patient.stats && patient.stats.items_on_hand">{{patient.stats.items_on_hand}}
                                    <span *ngIf="patient.stats && patient.stats.items_on_hand == 1"> item</span>
                                    <span *ngIf="patient.stats && patient.stats.items_on_hand > 1">items</span>
                                </div>
                                <div class="pl-1" *ngIf="!(patient.stats && patient.stats.items_on_hand)">no items </div>
                            </div>
                            <div *ngIf="!patient.stats" class="pl-1">no items</div>
                        </div>
                        <div class="col-3 pl-2 pr-2 h4">
                            <div class="d-inline-flex align-items-center cursor-pointer" *ngIf="patient.stats && patient.stats.pending_orders" (click)="showPendingOrders(patient.stats.orders)"><span class="" >{{patient.stats.orders[0]}}</span>&nbsp; <span *ngIf="patient.stats.orders.length-1 > 0">+</span>
                                <span  class="more bg-light rounded-circle text-primary d-flex justify-content-center align-items-center" *ngIf="patient.stats.orders.length-1 > 0">{{patient.stats.orders.length-1}}</span>
                            </div>
                            <div class="pl-1" *ngIf="!patient.stats || !(patient.stats && patient.stats.pending_orders)">None</div>
                        </div>
                    </div>
                    <div class="col-2 p-0">
                        <div class="d-flex align-items-center justify-content-around" style="font-size: 22px">
                            <span class="text-primary cursor-pointer mx-2" title="Info" data-toggle="collapse" [attr.data-target]="'#collapseOne'+i"
                                aria-expanded="true" [attr.aria-controls]="'collapseOne'+i" (click)="accordion(i, patient)">
                                <app-svg name="info" class="op-icons"></app-svg>
                            </span>
                            <span class="text-primary cursor-pointer mx-2" title="Edit" (click)="editPatient($event, patient, i)">
                                <app-svg name="edit" class="op-icons"></app-svg>
                            </span>
                            <span class="text-primary cursor-pointer mx-2" title="New Order" (click)="storeId(patient)" style="font-size: 22px">
                                <app-svg name="new-order" class="op-icons2"></app-svg>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="d-flex flex-auto o-auto ">
                    <app-patient-info class="collapse w-100" [id]="'collapseOne'+i" [attr.aria-labelledby]="'headingOne'+i" data-parent="#patientAccodian"
                        (close)="closePatient($event, i)" (editPatient)="editPatient($event, patient, i)" [patientData]="patient"></app-patient-info>
                </div>
                <div class="" *ngIf="patient.show">
                    <!-- <div class="d-flex justify-content-end">
                        <span  class="icon-close text-danger h5" (click)="patient.show = false"></span>
                    </div> -->
                    <app-create (patientInfo)="updatePatientInfo($event, patient)" [showClose]=true (closeList)="patient.show = false" [editId]="patient.id"
                        [parentOffset]="parentOffset"></app-create>
                </div>
            </div>
            
         Typesctipt
         
           /**
   *  this function will handles all the scrolling functionality related to info inlays..
   * @param index  index : Number  
   * @param element parent element: HTML Element  //patientAccordion
   * @param infoElement Info element: Info Element  //collapseOne1
   */
  public scrollTo(index, element, infoElement, parentScrollEle?, setTimeOutTime?) {
    parentScrollEle = parentScrollEle || '#scroll';
    setTimeOutTime = setTimeOutTime || 500;
    if (index) {
      setTimeout(() => {
        let parentHeight = jQuery(element).height();
        let infoEleHeight = jQuery(infoElement).height();
        console.log(infoEleHeight, "height");
        let parentEle = jQuery(element);
        let currentScroll;
        let top: any;
        top = jQuery(parentScrollEle + index).position().top
        currentScroll = parentEle.scrollTop();
        let scrollTop = currentScroll + top;
        if (parentHeight < infoEleHeight) {
          parentEle.animate({
            scrollTop: scrollTop
          }, 300);
        } else {
          top = scrollTop - (parentHeight - infoEleHeight) / 2;
          currentScroll = parentEle.scrollTop();
          parentEle.animate({
            scrollTop: top
          }, 300);
        }
      }, setTimeOutTime)
    }

  }