List of character cards + name search.

Author: jeandat

app/characters/_characters.scss

@@ -0,0 +1,5 @@
+.crt{
+    &__form{
+        width: 100%;
+    }
+}

app/characters/characters.controller.js

@@ -5,13 +5,16 @@
         .module('app')
         .controller('CharactersController', CharactersController);
 
-    function CharactersController($log, charactersService, $cordovaToast) {
+    function CharactersController($log, charactersService, $cordovaToast, throwErr, $scope, $cordovaKeyboard) {
 
         var vm = this;
         vm.title = 'CharactersController';
-        //vm.request = request;
-        vm.characters = charactersService.getList().$object;
+        vm.filter = '';
+        // Let's start with something cool ;)
+        vm.characters = charactersService.getList({nameStartsWith:'Deadpool'}).$object;
         vm.keep = keep;
+        vm.search = search;
+        vm.searching = false;
 
         activate();
 
@@ -21,16 +24,28 @@
             $log.debug(vm.title + ' instantiated');
         }
 
-        function keep(){
+        function keep() {
             $cordovaToast.showShortBottom('Not implemented yet…');
         }
 
-        //function request(){
-        //    charactersService.getList().then(function (characters) {
-        //        $log.debug(characters.length + ' characters:', characters);
-        //        $cordovaToast.showLongBottom(characters.length + ' characters in stock');
-        //    }).catch(throwErr);
-        //}
+        function search() {
+            var criteria = vm.filter ? {nameStartsWith: vm.filter} : {};
+            var promise = charactersService.getList(criteria);
+            vm.characters = promise.$object;
+            vm.searching = true;
+            $cordovaKeyboard.close();
+            return promise.then(log).catch(throwErr).finally(hideSpinner);
+
+            ///////////
+
+            function log(characters) {
+                $log.debug(characters.length + ' results:', characters);
+            }
+
+            function hideSpinner(){
+                vm.searching = false;
+            }
+        }
 
     }
 

app/characters/tab-characters.jade

@@ -1,8 +1,15 @@
 ion-view.crt(view-title='Characters')
-    ion-content.has-tabs
-            .list.card(ng-repeat="character in vm.characters track by character.id")
-                .item.item-image
-                    img(ng-src="{{character.getThumbnailUrl()}}")
-                .item.item-icon-right.assertive
-                    i.icon.ion-android-favorite-outline(ng-click='vm.keep()')
-                    | {{character.name}}
+    ion-content
+        .bar.item-input-inset
+            form.crt__form(name='crtSearchForm', novalidate, ng-submit='vm.search()', autocomplete="off")
+                label.item-input-wrapper
+                    i.icon.ion-ios-search.placeholder-icon
+                    input(type='search', placeholder='Name starts with…', name='name',
+                        ng-model='vm.filter', spellcheck="false")
+                    ion-spinner.spinner-assertive(ng-if='vm.searching')
+        .list.card(ng-repeat="character in vm.characters track by character.id")
+            .item.item-image(ui-sref='tab.character-detail({character:character})')
+                img(ng-src="{{character.getThumbnailUrl()}}")
+            .item.item-icon-right.assertive
+                i.icon.ion-android-favorite-outline(ng-click='vm.keep()')
+                | {{character.name}}