hamzahamidi/todo-list

<!--
  Generated template for the SharedWithMePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <nav-bar title="Shared With Me" (onClickSearch)="_showHideSearchBar=!_showHideSearchBar"></nav-bar>
</ion-header>

<ion-content padding-top>
  <div [hidden]="_transparentBackGroundColor">
    <ion-searchbar [hidden]="!_showHideSearchBar" [(ngModel)]="users">
    </ion-searchbar>
    <ion-list>
      <ion-item-divider>
        Users who share with me
      </ion-item-divider>
      <ng-container *ngIf="!userObservables; else showList">
        <ion-spinner></ion-spinner>
      </ng-container>
      <ng-template #showList>
        <empty-list *ngIf="userObservables.length == 0" icon="ios-people" h3Text="There is currently No User" h3Textsecond="who share with me"></empty-list>
        <ng-container *ngIf="userObservables.length > 0">
          <div *ngFor="let userObser of userObservables">
            <ion-item-sliding *ngIf="userObser | async as user">
              <ion-item (click)="goToLists(user)">
                <ion-avatar item-start>
                  <img src="{{user.photoURL}}" alt="avatar">
                </ion-avatar>
                <h2>{{user.displayName}}</h2>
                <h3>{{user.email}}</h3>
              </ion-item>
              <ion-item-options side="left">
                <button ion-button color="warning">
                  <ion-icon name="checkmark"></ion-icon>
                  Write
                </button>
                <button ion-button color="success">
                  <ion-icon name="checkmark"></ion-icon>
                  Read
                </button>
              </ion-item-options>
              <ion-item-options side="right">
                <button ion-button color="danger" (click)="deleteUser(user)">
                  <ion-icon name="trash"></ion-icon>
                  Delete
                </button>
              </ion-item-options>
            </ion-item-sliding>
          </div>
        </ng-container>
      </ng-template>
    </ion-list>
  </div>
</ion-content>
<ion-footer text-center>
  <button *ngIf="!_transparentBackGroundColor" text-center ion-button round (click)="scanQR()">Scan QR code</button>
  <button *ngIf="_transparentBackGroundColor" text-center ion-button round color="danger" (click)="cancelScan()">Cancel</button>
</ion-footer>