Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<ion-header>
<ion-toolbar color="success">
<ion-title>
{{ checklist?.title }}
</ion-title>
<ion-buttons slot="start">
<ion-back-button defaultHref="/checklists"></ion-back-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button (click)="addItem()">
<ion-icon slot="icon-only" name="add-circle"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-list lines="none">
<!-- ### Function: Hiding/Showing -->
<ion-item>
<ion-label>Hide complete items</ion-label>
<!-- Save the preference when any change is detected -->
<ion-toggle color="success" [(ngModel)]="hideComplete" (ionChange)="hideSwitch()"></ion-toggle>
</ion-item>
<!-- ### Function: Sorting -->
<ion-item>
<!-- Alphabet -->
<ion-buttons>
<!-- <button ion-button block (click)="addEvent();" [ngStyle]="{"background-color": buttonColor}">Add Event</button> -->
<ion-button (click)="sortSwitchAlphabet()" [ngClass]=buttonAlphabet>
<span>Sort: A-Z</span>
</ion-button>
</ion-buttons>
<!-- Priority -->
<ion-buttons>
<ion-button (click)="sortSwitchPriority()" [ngClass]=buttonPriority>
<span>Sort Priority</span>
</ion-button>
</ion-buttons>
</ion-item>
<!-- If hideCompplete is false, show all the items -->
<section *ngIf="!hideComplete; else other">
<ion-item-sliding *ngFor="let item of checklist?.items">
<ion-item>
<!-- Title -->
<ion-label>{{ item.title }}</ion-label>
<!-- Priority -->
<ion-buttons class="priority">
<ion-button (click)="setPriority(item)">
<ion-icon slot="icon-only" name="list"></ion-icon>
<ion-label>
<span *ngIf="item.priority == 1">High</span>
<span *ngIf="item.priority == 2">Medium</span>
<span *ngIf="item.priority == 3">Low</span>
<span *ngIf="item.priority == 4">No Priority</span>
</ion-label>
</ion-button>
</ion-buttons>
<!-- Checkbox -->
<ion-checkbox [checked]="item.checked" (ionChange)="toggleItem(item)"></ion-checkbox>
</ion-item>
<ion-item-options>
<ion-item-option tappable color="light" (click)="renameItem(item)"><ion-icon slot="icon-only" name="clipboard"></ion-icon></ion-item-option>
<ion-item-option tappable color="danger" (click)="removeItem(item)"><ion-icon slot="icon-only" name="trash"></ion-icon></ion-item-option>
</ion-item-options>
</ion-item-sliding>
</section>
<!-- If hideCompplete is true, show items that are not checked as complete -->
<ng-template #other>
<ion-item-sliding *ngFor="let item of checklist?.items">
<ion-item *ngIf="!item.checked">
<!-- Title -->
<ion-label>{{ item.title }}</ion-label>
<!-- Priority -->
<ion-buttons class="priority">
<ion-button (click)="setPriority(item)">
<ion-icon slot="icon-only" name="list"></ion-icon>
<ion-label>
<span *ngIf="item.priority == 1">High</span>
<span *ngIf="item.priority == 2">Medium</span>
<span *ngIf="item.priority == 3">Low</span>
<span *ngIf="item.priority == 4">No Priority</span>
</ion-label>
</ion-button>
</ion-buttons>
<!-- Checkbox -->
<ion-checkbox [checked]="item.checked" (ionChange)="toggleItem(item)"></ion-checkbox>
</ion-item>
<ion-item-options>
<ion-item-option tappable color="light" (click)="renameItem(item)"><ion-icon slot="icon-only" name="clipboard"></ion-icon></ion-item-option>
<ion-item-option tappable color="danger" (click)="removeItem(item)"><ion-icon slot="icon-only" name="trash"></ion-icon></ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ng-template>
</ion-list>
</ion-content>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.