feat: Adding angular list template

List template is ready with filtering and toggleable favorite star
IgniteUI · Feb 7, 2018 · 1be1fa0 · 1be1fa0
1 parent 1539347
commit 1be1fa0
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 126 deletions.
diff --git a/templates/angular/igx-ts/list/default/files/src/app/__path__/__name__.component.css b/templates/angular/igx-ts/list/default/files/src/app/__path__/__name__.component.css
@@ -1,41 +1,31 @@
-.list-sample {
-    display: block;
-    position: relative;
-    height: 640px;
-    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
-}
-
-.item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.item > [igxLabel],
-.item > .person {
-    position: absolute;
-    margin-left: 72px;
-}
-
-.person .name {
-    padding: 0;
-    margin: 0;
-}
-
-.person .phone {
-    font-size: 12px;
-    color: gray;
-}
-
-.item igx-icon {
-    color: lightgray;
-}
-
-.item igx-icon.favorite {
-    color: orange;
-}
-
-.item .delete-item:hover {
-    color: crimson;
-    cursor: pointer;
-}
+igx-icon {
+	cursor: pointer;
+	user-select: none;
+  }
+
+  .item-container {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+  }
+
+  .contact {
+	display: flex;
+	flex: 1 0 240px;
+	align-items: center;
+  }
+
+  .contact__info {
+	display: flex;
+	flex-flow: column nowrap;
+	margin-left: 24px;
+  }
+
+  .name {
+	font-weight: 600;
+  }
+
+  .phone {
+	font-size: 0.875em;
+  }
+
diff --git a/templates/angular/igx-ts/list/default/files/src/app/__path__/__name__.component.html b/templates/angular/igx-ts/list/default/files/src/app/__path__/__name__.component.html
@@ -1,10 +1,22 @@
+<p>igx-list component with filtering. You can read more about configuring the igx-grid component <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/src/list/README.md" target="_blank">here</a>.</p>
+	<div class="igx-form-group" style="margin: 4px">
+	<input class="igx-form-group__input--search" placeholder="Search Contacts" [(ngModel)]="searchContact">
+	<label class="igx-form-group__label">
+		<igx-icon name="search"></igx-icon>
+	</label>
+</div>
 <igx-list>
-	<igx-list-item [isHeader]="true">Contacts</igx-list-item>
-	<igx-list-item igxRipple="pink" igxRippleTarget=".igx-list__item" *ngFor="let item of navItems">
-		<div class="item">
-			<igx-avatar [src]="item.avatar" roundShape="true"></igx-avatar>
-			<span igxLabel>{{item.text}}</span>
-			<igx-icon name="star" [class.favorite]="item.favorite"></igx-icon>
+	<igx-list-item isHeader="true"> Contacts </igx-list-item>
+	<igx-list-item #item *ngFor="let contact of contacts | igxFilter: filterContacts;">
+		<div class="item-container">
+			<div class="contact">
+				<igx-avatar [src]="contact.photo" roundShape="true"></igx-avatar>
+				<div class="contact__info">
+					<span class="name">{{ contact.name }}</span>
+					<span class="phone">{{ contact.phone }}</span>
+				</div>
+			</div>
+			<igx-icon name="star" [color]="contact.isFavorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(item)"></igx-icon>
 		</div>
 	</igx-list-item>
 </igx-list>
diff --git a/templates/angular/igx-ts/list/default/files/src/app/__path__/__name__.component.ts b/templates/angular/igx-ts/list/default/files/src/app/__path__/__name__.component.ts
@@ -1,16 +1,5 @@
-import { Component, ElementRef, ViewChild } from "@angular/core";
-import {
-	IgxDialog,
-	IgxDialogModule,
-	IgxFilterModule,
-	IgxFilterOptions,
-	IgxInput,
-	IgxList,
-	IgxListItem,
-	IgxListModule,
-	IgxListPanState,
-	IgxRippleModule
-} from 'igniteui-angular/main';
+import { Component, OnInit, ViewEncapsulation } from "@angular/core";
+import { IgxFilterOptions, IgxListItem } from 'igniteui-angular/main';
 
 @Component({
 	selector: 'app-home',
@@ -20,77 +9,53 @@ import {
 })
 export class $(ClassName)Component implements OnInit {
 	title = '$(name)';
-	public navItems: object[] = [
+	public searchContact: string;
+	public contacts = [
 		{
-			avatar: "assets/1.jpg",
-			favorite: true,
-			key: "1",
-			link: "#",
+			isFavorite: false,
+			name: "Terrance Orta",
 			phone: "770-504-2217",
-			text: "Terrance Orta"
-		}, {
-			avatar: "assets/2.jpg",
-			favorite: false,
-			key: "2",
-			link: "#",
+			photo: "https://randomuser.me/api/portraits/men/27.jpg"
+		},
+		{
+			isFavorite: true,
+			name: "Richard Mahoney",
 			phone: "423-676-2869",
-			text: "Richard Mahoney"
-		}, {
-			avatar: "assets/3.jpg",
-			favorite: false,
-			key: "3",
-			link: "#",
+			photo: "https://randomuser.me/api/portraits/men/1.jpg"
+		},
+		{
+			isFavorite: false,
+			name: "Donna Price",
 			phone: "859-496-2817",
-			text: "Donna Price"
-		}, {
-			avatar: "assets/4.jpg",
-			favorite: false,
-			key: "4",
-			link: "#",
+			photo: "https://randomuser.me/api/portraits/women/50.jpg"
+		},
+		{
+			isFavorite: false,
+			name: "Lisa Landers",
 			phone: "901-747-3428",
-			text: "Lisa Landers"
-		}, {
-			avatar: "assets/12.jpg",
-			favorite: true,
-			key: "5",
-			link: "#",
+			photo: "https://randomuser.me/api/portraits/women/3.jpg"
+		},
+		{
+			isFavorite: true,
+			name: "Dorothy H. Spencer",
 			phone: "573-394-9254",
-			text: "Dorothy H. Spencer"
-		}, {
-			avatar: "assets/13.jpg",
-			favorite: false,
-			key: "6",
-			link: "#",
-			phone: "323-668-1482",
-			text: "Stephanie May"
-		}, {
-			avatar: "assets/14.jpg",
-			favorite: false,
-			key: "7",
-			link: "#",
-			phone: "401-661-3742",
-			text: "Marianne Taylor"
-		}, {
-			avatar: "assets/15.jpg",
-			favorite: true,
-			key: "8",
-			link: "#",
-			phone: "662-374-2920",
-			text: "Tammie Alvarez"
-		}, {
-			avatar: "assets/16.jpg",
-			favorite: true,
-			key: "9",
-			link: "#",
-			phone: "240-455-2267",
-			text: "Charlotte Flores"
-		}, {
-			avatar: "assets/17.jpg",
-			favorite: false,
-			key: "10",
-			link: "#",
-			phone: "724-742-0979",
-			text: "Ward Riley"
+			photo: "https://randomuser.me/api/portraits/women/67.jpg"
 		}
 	];
+
+	constructor() { }
+
+	ngOnInit() { }
+
+	public toggleFavorite(item: IgxListItem) {
+		const contact = this.contacts[item.index - 1];
+		contact.isFavorite = !contact.isFavorite;
+	}
+
+	get filterContacts() {
+		const fo = new IgxFilterOptions();
+		fo.key = "name";
+		fo.inputValue = this.searchContact;
+		return fo;
+	}
 }
diff --git a/templates/angular/igx-ts/list/default/index.ts b/templates/angular/igx-ts/list/default/index.ts
@@ -10,7 +10,7 @@ class IgxListTemplate extends IgniteUIForAngularTemplate {
 		this.projectType = "igx-ts";
 		this.name = "List";
 		this.description = "Basic IgxList";
-		this.dependencies = ["IgxListModule"];
+		this.dependencies = ["IgxListModule, IgxAvatarModule", "IgxIconModule", "IgxFilterModule"];
 	}
 }
 module.exports = new IgxListTemplate();
diff --git a/templates/angular/igx-ts/projects/empty/files/src/app/app.module.ts b/templates/angular/igx-ts/projects/empty/files/src/app/app.module.ts
@@ -1,4 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -13,6 +14,7 @@ import { HomeComponent } from './home/home.component';
   ],
   imports: [
     BrowserModule,
+	FormsModule,
     AppRoutingModule,
     IgxButtonModule
   ],