Incomplete implementation of article authors using manually created m…

…d-contact-chips.
spira · Sep 16, 2015 · 1c15f57 · 1c15f57
1 parent 73c8b9b
commit 1c15f57
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 16 deletions.
diff --git a/app/src/app/admin/articles/article/meta/meta.tpl.html b/app/src/app/admin/articles/article/meta/meta.tpl.html
@@ -1,14 +1,40 @@
 <div layout-padding>
     <h2>Author</h2>
     <label>Author</label>
-    <md-contact-chips
-            ng-model="MetaController.authors"
-            md-contact-name="firstName"
-            md-contact-image="avatarImgUrl"
-            md-contact-email="email"
-            md-contacts="MetaController.searchAuthors($query)"
-            ng-model-options="{ debounce: 500 }">
-    </md-contact-chips>
+
+    <!-- Manual implementation of md-contact-chips as md-contact-chips does not inherit from md-chips (and there are some directives we need)! -->
+    <md-chips class="md-contact-chips"
+              ng-model="MetaController.authors"
+              ng-model-options="{ debounce: 500 }"
+              md-autocomplete-snap
+              md-on-append="MetaController.authorAdded(MetaController.selectedItem)">
+        <md-autocomplete
+            md-menu-class="md-contact-chips-suggestions"
+            md-search-text="MetaController.searchText"
+            md-selected-item="MetaController.selectedItem"
+            md-items="item in MetaController.searchAuthors(MetaController.searchText)"
+            md-item-text="MetaController.itemName(item)"
+            md-no-cache="true"
+            md-autoselect
+            placeholder="{{ MetaController.authors.length == 0 ? 'Author' : '' }}">
+            <div class="md-contact-suggestion">
+                <img
+                     ng-src="{{ item.avatarImgUrl }}"
+                     alt="{{ item.firstName }}" />
+                {{ item.fullName() }}
+                <span class="md-contact-email" >{{ item.email }}</span>
+            </div>
+        </md-autocomplete>
+        <md-chip-template>
+            <div class="md-contact-avatar">
+                <img ng-src="{{ $chip.avatarImgUrl }}"
+                     alt="{{ $chip.firstName }}" />
+            </div>
+            <div class="md-contact-name">
+                {{ $chip.firstName }}
+            </div>
+        </md-chip-template>
+    </md-chips>
 
     <h2>Search Engines</h2>
     <md-whiteframe class="md-whiteframe-z1" layout="column" layout-padding>

diff --git a/app/src/app/admin/articles/article/meta/meta.ts b/app/src/app/admin/articles/article/meta/meta.ts
@@ -6,26 +6,30 @@ namespace app.admin.articles.article.meta {
 
         static $inject = ['article', 'notificationService', 'usersPaginator'];
 
-        public authors:common.models.User[] = [];
+        public authors:common.models.User[];
 
         constructor(
             public article:common.models.Article,
             private notificationService:common.services.notification.NotificationService,
             private usersPaginator:common.services.pagination.Paginator
         ) {
-            this.authors.push(article._author);
+            this.authors = [article._author];
         }
 
         /**
-         * Function called when author is searched for in the author contact chip input
+         * Function called when author is searched for in the author contact chip input.
          * @param query
          */
-        public searchAuthors(query:string) {
-
-            return [{firstName:"John", email:"email@email.com", avatarImgUrl:"http://lorempixel.com/100/100/people/?80221"},{firstName:"Doe", email:"email@email.com", avatarImgUrl:"http://lorempixel.com/100/100/people/?80221"}];
-
-            //return this.usersPaginator.query(query);
+        public searchAuthors(query:string):ng.IPromise<common.models.User[]> {
+            return this.usersPaginator.query(query);
+        }
 
+        /**
+         * Function called when an author is added.
+         */
+        public authorAdded(newAuthor:common.models.User):void {
+            this.authors = [newAuthor];
+            this.article._author = newAuthor;
         }
 
     }