Search results is starting to look really good. Need to extend interf…

…ace to rest of app.
walkeriniraq · Dec 27, 2014 · 8be8dfc · 8be8dfc
1 parent f06ecb1
commit 8be8dfc
Show file tree

Hide file tree

Showing 13 changed files with 310 additions and 140 deletions.
diff --git a/app/assets/javascripts/controllers/search_controllers.js.coffee b/app/assets/javascripts/controllers/search_controllers.js.coffee
@@ -0,0 +1,7 @@
+Twitarr.SearchResultsController = Twitarr.Controller.extend
+  error: ''
+
+Twitarr.SearchUserResultController = Twitarr.ObjectController.extend
+  profile_pic: (->
+    "/api/v2/user/photo/#{@get('username')}"
+  ).property('username')
diff --git a/app/assets/javascripts/models/stream.js.coffee b/app/assets/javascripts/models/stream.js.coffee
@@ -54,7 +54,7 @@ Twitarr.StreamPost = Ember.Object.extend
 
   author_small_profile_pic: (->
     "/api/v2/user/photo/#{@get('author')}"
-  ).property('author_small_profile_pic')
+  ).property('author')
 
 
 Twitarr.StreamPost.reopenClass

diff --git a/app/assets/javascripts/router.js.coffee b/app/assets/javascripts/router.js.coffee
@@ -15,6 +15,6 @@ Twitarr.Router.map ()->
     @route 'view', { path: 'tweet/:id' }
 
   @resource 'search', ->
-    @route 'results', { path: ':id' }
+    @route 'results', { path: ':text' }
 
   @route 'profile'
diff --git a/app/assets/javascripts/routes/search_routes.js.coffee b/app/assets/javascripts/routes/search_routes.js.coffee
@@ -1,6 +1,27 @@
 Twitarr.SearchRoute = Ember.Route.extend
+  text: ''
+
   actions:
     search: (text) ->
-      $.getJSON("search/#{text}").done (data) =>
-        if data.status is 'ok'
-          console.log data.results
+      if !!text
+        @transitionTo('search.results', text)
+
+Twitarr.SearchResultsRoute = Ember.Route.extend
+  model: (params) ->
+    params
+
+  setupController: (controller, model) ->
+    @controllerFor('search').set('text', model.text)
+    $.getJSON("search/#{model.text}").done (data) =>
+      if data.status is 'ok'
+        controller.set('error', null)
+        controller.set('users', data.users)
+        controller.set('more_users', data.more_users)
+        controller.set('seamails', data.seamails)
+        controller.set('more_seamails', data.more_seamails)
+        controller.set('tweets', Ember.A(Twitarr.StreamPost.create(post) for post in data.tweets))
+        controller.set('more_tweets', data.more_tweets)
+        controller.set('forums', data.forums)
+        controller.set('more_forums', data.more_forums)
+      else
+        controller.set('error', data.status)
diff --git a/...ts/javascripts/templates/search/index.hbs → app/assets/javascripts/templates/search.hbs b/...ts/javascripts/templates/search/index.hbs → app/assets/javascripts/templates/search.hbs
@@ -5,12 +5,12 @@
         <span class="glyphicon glyphicon-search"></span>
       </td>
       <td>
-        {{input value=search_text class='input'}}
+        {{input value=text class='input' placeholder='Search...'}}
       </td>
       <td style="width: 3em; padding-left: 1em;">
-        <button {{action 'search' search_text}}>Go</button>
+        <button {{action 'search' text}}>Go</button>
       </td>
     </tr>
   </table>
 </div>
-
+{{outlet}}
diff --git a/app/assets/javascripts/templates/search/results.hbs b/app/assets/javascripts/templates/search/results.hbs
@@ -0,0 +1,96 @@
+<div class="display_card">
+  <div class="header">
+    <div class="title">Users</div>
+  </div>
+  {{#each user in users}}
+    {{render 'search.user_result' user}}
+  {{else}}
+    <div class="card-section">
+      No results.
+    </div>
+  {{/each}}
+  {{#if more_users}}
+    <div class="card-section">
+      View all matching users...
+    </div>
+  {{/if}}
+</div>
+<div class="display_card">
+  <div class="header">
+    <div class="title">Tweets</div>
+  </div>
+  {{#each tweet in tweets}}
+    {{render "stream_post" tweet}}
+  {{else}}
+    <div class="card-section">
+      No results.
+    </div>
+  {{/each}}
+  {{#if more_tweets}}
+    <div class="card-section">
+      View all matching tweets...
+    </div>
+  {{/if}}
+</div>
+<div class="display_card">
+  <div class="header">
+    <div class="title">Forums</div>
+  </div>
+  {{#each forum in forums}}
+    <div class="card-section">
+      <span class="title">
+        {{forum.subject}}
+      </span>
+      <span class="timestamp">
+        {{forum.timestamp}}
+      </span>
+
+      <div class="body">
+        <div class="body-section">
+          {{forum.posts}}
+        </div>
+      </div>
+    </div>
+  {{else}}
+    <div class="card-section">
+      No results.
+    </div>
+  {{/each}}
+  {{#if more_forums}}
+    <div class="card-section">
+      View all matching forums...
+    </div>
+  {{/if}}
+</div>
+<div class="display_card">
+  <div class="header">
+    <div class="title">Your Seamail</div>
+  </div>
+  {{#each seamail in seamails}}
+    <div class="card-section">
+      <span class="title">
+        {{#each user in seamail.users}}
+          {{user}}
+        {{/each}}
+      </span>
+      <span class="timestamp">
+        {{seamail.timestamp}}
+      </span>
+
+      <div class="body">
+        <div class="body-section">
+          {{seamail.subject}}
+        </div>
+      </div>
+    </div>
+  {{else}}
+    <div class="card-section">
+      No results.
+    </div>
+  {{/each}}
+  {{#if more_seamails}}
+    <div class="card-section">
+      View all matching seamails...
+    </div>
+  {{/if}}
+</div>
diff --git a/app/assets/javascripts/templates/search/user_result.hbs b/app/assets/javascripts/templates/search/user_result.hbs
@@ -0,0 +1,15 @@
+<div class="card-section section-with-photo">
+
+  <div class="section-photo">
+    <img {{bind-attr src=profile_pic}} />
+  </div>
+
+  <span class="title">
+    {{#if display_name}}
+      {{display_name}} (@{{username}})
+    {{else}}
+      @{{username}}
+    {{/if}}
+  </span>
+
+</div>
diff --git a/app/assets/javascripts/templates/stream/page.hbs b/app/assets/javascripts/templates/stream/page.hbs
@@ -1,19 +1,23 @@
-<div class="main-page-header">
-  <span class="controls">
-    {{#if logged_in}}
-      {{#link-to "stream.new"}}New Post{{/link-to}}
-    {{/if}}
-    <a href="#" {{action 'reload'}}>Refresh</a>
-  </span>
-  <h4>Tweets</h4>
-</div>
+<div class="display_card">
+  <div class="header">
+    <span class="title">
+      Tweets
+    </span>
+    <div class="controls">
+      {{#if logged_in}}
+        {{#link-to "stream.new"}}New Post{{/link-to}}
+      {{/if}}
+      <a href="#" {{action 'reload'}}>Refresh</a>
+    </div>
+  </div>
 
-{{#each post in posts}}
-  {{render "stream_post" post}}
-{{/each}}
+  {{#each post in posts}}
+    {{render "stream_post" post}}
+  {{/each}}
 
-{{#if has_next_page}}
-  <div class="next-page-button">
-    <button {{action 'next_page'}}>Next</button>
-  </div>
-{{/if}}
+  {{#if has_next_page}}
+    <div class="card-section">
+      <button {{action 'next_page'}} class="controls">Next</button>
+    </div>
+  {{/if}}
+</div>
diff --git a/app/assets/javascripts/templates/stream_post.hbs b/app/assets/javascripts/templates/stream_post.hbs
@@ -1,38 +1,34 @@
-<div class="stream-post">
-  <div class="content">
-    <img {{bind-attr src=author_small_profile_pic}} class="profile-pic"/>
+<div class="card-section section-with-photo">
 
-    <div>
-      <span class="author">
-        {{author}}
-      </span>
-      <span class="timestamp">
-        {{#link-to "stream.view" id}}{{pretty_timestamp}}{{/link-to}}
-      </span>
-    </div>
-    <div>
-      <div class="text">
-        {{{text}}}
-      </div>
-      <div>
-        {{#if photo}}
-          {{render 'photo_mini' photo }}
-        {{/if}}
-      </div>
+  <div class="section-photo">
+    <img {{bind-attr src=author_small_profile_pic}}/>
+  </div>
+
+  <span class="title">
+    {{author}}
+  </span>
+  <span class="timestamp">
+    {{#link-to "stream.view" id}}{{pretty_timestamp}}{{/link-to}}
+  </span>
+
+  <div class="body">
+    <div class="body-section">
+      {{{text}}}
     </div>
-    <div class="clearfix">
-      <div class="pull-right">
-        {{likes_string}}
-        {{#if logged_in}}
-          <div class="pull-right">
-            {{#if user_likes}}
-              <a href="#" {{action 'unlike' model}}>Unlike</a>
-            {{else}}
-              <a href="#" {{action 'like' model}}>Like</a>
-            {{/if}}
-          </div>
-        {{/if}}
-      </div>
+    <div class="body-section">
+      {{#if photo}}
+        {{render 'photo_mini' photo }}
+      {{/if}}
     </div>
   </div>
+  <div class="controls">
+    {{likes_string}}
+    {{#if logged_in}}
+      {{#if user_likes}}
+        <a href="#" {{action 'unlike' model}}>Unlike</a>
+      {{else}}
+        <a href="#" {{action 'like' model}}>Like</a>
+      {{/if}}
+    {{/if}}
+  </div>
 </div>