hamzahamidi/todo-list

<ion-header>
  <nav-bar enabledChangeDisplay="true" [title]="titlePage" (onChangeDisplay)="_cardOrList=!_cardOrList" (onClickSearch)="_showHideSearchBar=!_showHideSearchBar"></nav-bar>
</ion-header>

<ion-content padding>
  <ion-searchbar [hidden]="_showHideSearchBar" [(ngModel)]="users">
  </ion-searchbar>
  <ion-spinner *ngIf="_showSpinner"></ion-spinner>
  <ion-refresher *ngIf="!_showSpinner" (ionRefresh)="refreshLists($event)">
    <ion-refresher-content>
    </ion-refresher-content>
  </ion-refresher>
  <div *ngIf="!_showSpinner">
    <empty-list *ngIf="_emptyTodoList" icon="notifications" h1Text="OMG!" h3Text="You have no Lists." h3Textsecond="Let's change that!"></empty-list>
    <ion-card [hidden]="_cardOrList" *ngFor="let todoList of todoLists">
      <ion-card-header>
        <h2 text-center ion-text color="primary">{{todoList.name}}</h2>
      </ion-card-header>
      <ion-card-content (click)="goToDetails(todoList)">
        <h5>
          List Summary
        </h5>
        <div *ngIf="!todoList.items" padding>
          <h3 ion-text text-center color="gray">
            <i>
              Click on
              <span ion-text color="warning">the list</span> to Add your first Task
            </i>
          </h3>
        </div>
        <div *ngIf="!!todoList.items" padding>
          <ion-list>
            <ion-item *ngFor="let item of (todoList.items | value)">
              <span [ngClass]="{'strike':item.state}"> {{item.name}} </span>
            </ion-item>
          </ion-list>
        </div>
      </ion-card-content>
      <ion-row justify-content-around>
        <ion-col col-3>
          <button  *ngIf="!_hideAddButton" ion-button clear small icon-start color="danger" (click)="deleteList(todoList)">
            <ion-icon name="trash"></ion-icon>
            <div>Delete</div>
          </button>
          <button *ngIf="_hideAddButton" ion-button clear small icon-start color="danger" (click)="unshareList(todoList)">
            <ion-icon name="trash"></ion-icon>
            <div>Unshare</div>
          </button>
        </ion-col>
        <ion-col col-4>
          <button ion-button clear small icon-start color="warning" (click)="updateList(todoList)">
            <ion-icon name="create"></ion-icon>
            <div>Edit name</div>
          </button>
        </ion-col>
        <ion-col *ngIf="!_hideAddButton" col-4>
          <button ion-button clear small icon-start color="success" (click)="shareList(todoList)">
            <ion-icon name="share"></ion-icon>
            <div>Share</div>
          </button>
        </ion-col>
        <ion-col col-3 align-self-center text-center>
          <ion-note>
            {{todoList.date | dateCreated}}
          </ion-note>
        </ion-col>
      </ion-row>
    </ion-card>
    <ion-list [hidden]="!_cardOrList" *ngFor="let todoList of todoLists">
      <ion-item-sliding>
        <ion-item (click)="goToDetails(todoList)">
          <ion-avatar item-start>
            <img src="https://ui-avatars.com/api/?name={{todoList.name}}&length=1&background=E91E63">
          </ion-avatar>
          <ion-row wrap justify-content-start>
            <ion-col col-10>
              <h2>
                <b>{{todoList.name}}</b>
              </h2>
            </ion-col>
            <ion-col text-wrap>
              <ion-note>
                Created {{todoList.date | dateCreated}}
              </ion-note>
            </ion-col>
          </ion-row>
        </ion-item>
        <ion-item-options side="left">
          <button ion-button color="warning" (click)="updateList(todoList)" s>
            <ion-icon name="create"></ion-icon>
            Edit name
          </button>
          <button *ngIf="!_hideAddButton" ion-button color="success" (click)="shareList(todoList)">
            <ion-icon name="share"></ion-icon>
            Share
          </button>
        </ion-item-options>
        <ion-item-options side="right">
          <button *ngIf="!_hideAddButton" ion-button color="danger" (click)="deleteList(todoList)">
            <ion-icon name="trash"></ion-icon>
            Delete
          </button>
          <button *ngIf="_hideAddButton" ion-button color="danger" (click)="unshareList(todoList)">
            <ion-icon name="trash"></ion-icon>
            Unshare
          </button>
        </ion-item-options>
      </ion-item-sliding>
    </ion-list>
  </div>
  <ion-fab *ngIf="!_hideAddButton" right bottom>
    <button color="secondary" ion-fab (click)="addList()">
      <ion-icon name="add"></ion-icon>
    </button>
  </ion-fab>
</ion-content>