#369: updated UI for User profile

app/assets/javascripts/angular-new/controllers/profile_controller.js.coffee

@@ -1,6 +1,6 @@
-RosaABF.controller 'Groups::ProfileController', ['$scope', '$http', '$location', ($scope, $http, $location) ->
+RosaABF.controller 'ProfileController', ['$scope', '$http', '$location', ($scope, $http, $location) ->
 
-  $scope.group       = $('#group_uname').val()
+  $scope.subject     = $('#subject_uname').val()
   $scope.processing  = true
   $scope.projects    = []
   $scope.page        = null
@@ -22,7 +22,7 @@ RosaABF.controller 'Groups::ProfileController', ['$scope', '$http', '$location',
       page:         $scope.page
       format:       'json'
 
-    $http.get Routes.user_path($scope.group), params: params
+    $http.get Routes.user_path($scope.subject), params: params
     .success (data) ->
       $scope.projects    = data.projects
       $scope.total_items = data.total_items

app/assets/javascripts/angular-new/controllers/statistics_controller.js.coffee

@@ -135,7 +135,12 @@ RosaABF.controller 'StatisticsController', ['$scope', '$http', '$timeout', ($sco
       options =
         responsive: true
 
-      context           = $(id)[0].getContext('2d')
+      chart = $(id)
+      chart.attr
+        width:  chart.parent().width()
+        height: chart.parent().outerHeight()
+
+      context           = chart[0].getContext('2d')
       $scope.charts[id] = new Chart(context).Line(data, options)
 
   $scope.initBuildListsChart = ->

app/assets/stylesheets/views/statistics.css.sass

@@ -10,8 +10,10 @@
   .graph-key-color5
     background-color: #ffbb78
 
-  .graph-wrapper span
+  .graph-wrapper
-    display: inline-block
+    min-height: 300px
-    width: 10px
+    span
-    height: 10px
+      display: inline-block
-    margin-left: 15px
+      width: 10px
+      height: 10px
+      margin-left: 15px

app/controllers/groups/profile_controller.rb

@@ -27,7 +27,6 @@ class Groups::ProfileController < Groups::BaseController
         @projects     = @projects.paginate(paginate_params)
       end
     end
-
   end
 
   def new

app/controllers/users/base_controller.rb

@@ -1,4 +1,6 @@
 class Users::BaseController < ApplicationController
+  layout 'bootstrap'
+
   before_filter :authenticate_user!
   before_filter :find_user
 

app/controllers/users/profile_controller.rb

@@ -1,26 +1,25 @@
 class Users::ProfileController < Users::BaseController
+  include PaginateHelper
+
   skip_before_filter :authenticate_user!, only: :show if APP_CONFIG['anonymous_access']
 
   def show
-    @path, page = user_path, params[:page].to_i
+    respond_to do |format|
-    @projects = @user.own_projects.search(params[:search]).recent
+      format.html do
-    if request.xhr?
+        @groups = @user.groups.order(:uname)
-      if params[:visibility] != 'hidden'
+      end
-        @projects = @projects.opened
+      format.json do
-        @hidden = true
+        @projects = @user.own_projects.search(params[:term]).recent
-      else
+        case params[:visibility]
-        @projects = @projects.by_visibilities('hidden').accessible_by(current_ability, :read)
+        when 'hidden'
+          @projects = @projects.by_visibilities('hidden').accessible_by(current_ability, :read)
+        else
+          @projects = @projects.opened
+        end
+        @total_items  = @projects.count
+        @projects     = @projects.paginate(paginate_params)
       end
-      render partial: 'shared/profile_projects', layout: nil, locals: {projects: paginate_projects(page)}
-    else
-      @projects = @projects.opened
-      @projects = paginate_projects(page)
     end
   end
 
-  protected
-
-  def paginate_projects(page)
-    @projects.paginate(page: (page>0 ? page : nil), per_page: 24)
-  end
 end

app/helpers/paginate_helper.rb

@@ -22,7 +22,7 @@ module PaginateHelper
   def angularjs_paginate(options = {})
     options.reverse_merge!(
       {
-        per_page:    params[:per_page].to_i > 0 ? params[:per_page] : 25,
+        per_page:    params[:per_page].to_i > 0 ? params[:per_page] : 20,
         total_items: 'total_items',
         page:        'page',
         select_page: "goToPage(page)"

app/views/groups/profile/show.html.slim

@@ -16,11 +16,10 @@
         = @group.description
 hr
 .row
-  .col-md-8.col-md-offset-1 ng-controller='Groups::ProfileController'
+  .col-md-8.col-md-offset-1 ng-controller='ProfileController'
 
     = simple_form_for :project, html: { 'ng-submit' => 'search()', id: 'search_projects_form' } do |f|
-      = hidden_field_tag 'group_uname', @group.uname
+      = hidden_field_tag 'subject_uname', @group.uname
-      = hidden_field_tag 'page'
 
       .row
         - if current_user
@@ -51,7 +50,7 @@ hr
         tr ng-repeat='project in projects'
           td
             h4
-              a ng-href='project.path'
+              a ng-href='{{project.path}}'
                 | {{project.name}}
             p
               | {{project.description}}

app/views/shared/_profile.html.haml

@@ -1,55 +0,0 @@
-- edit_url ||= nil
-- user ||= nil
-- group ||= nil
-- name ||= uname
-- desc, desc_title = if user
-  - [user.professional_experience,  t('activerecord.attributes.user.professional_experience')]
-- else
-  - [group.description , t('activerecord.attributes.group.description')]
-- max_length = 35
-
-= hidden_field_tag :profile_path, @profile_path
-.row
-  .span3.profile
-    .avatar= image_tag avatar_url(user || group, :big), alt: (user || group).uname
-    .base_info
-      %h3{title: uname}= title short_message(uname, 16)
-      %p{title: user.try(:name)}
-        - if user
-          = short_message(user.name, 28)
-      = link_to image_tag('gears.png'), edit_url if edit_url.present?
-    .both
-    - if user
-      - unless user.hide_email?
-        %p.info.first
-          - message = "#{t 'activerecord.attributes.user.email'}: "
-          = message
-          = mail_to user.email, short_message(user.email, max_length - message.length), encode: 'javascript', title: user.email
-      %p.info{ class: user.hide_email? ? 'first' : '' }
-        - message = "#{t 'activerecord.attributes.user.site'}: "
-        = message
-        = link_to short_message(user.site, max_length - message.length), user.site, title: user.site
-      %p.info{title: user.company}= short_message("#{t 'activerecord.attributes.user.company'}: #{user.company}", max_length)
-      %p.info{title: user.location}= short_message("#{t 'activerecord.attributes.user.location'}: #{user.location}", max_length)
-  .span6
-    %h3{style: 'margin-top: 0;'}= desc_title
-    = desc
-
-%hr.profile_line{color: 'dfe8ef', size: '3'}
-
-.row-fluid.profile-content
-  .span12.content
-    %nav
-      %ul
-        %li
-          = link_to t('layout.projects.list_header'), '#', class: 'projects active'
-  .span12.sub-menu
-    %nav
-      %ul
-        %li= link_to t('layout.projects.public'),  '#', class: "public-projects #{!@hidden ? 'active' : ''}"
-        %li= link_to t('layout.projects.private'), '#', class: "private-projects #{@hidden ? 'active' : ''}"
-  .search
-    .pic
-    .field= text_field_tag :query_projects, @query, placeholder: t('layout.find_project')
-  .both
-  .profile-table= render 'shared/profile_projects', projects: projects

app/views/shared/_profile_projects.html.haml

@@ -1,17 +0,0 @@
-- pr_groups = projects.in_groups(2)
-%table
-  %tbody
-    - pr_groups[0].each_with_index do |project, ind|
-      %tr{class: ind.odd? ? 'odd' : 'even'}
-        - [project, pr_groups[1][ind]].each do |project|
-          %th
-            - if project.present?
-              .project-link= link_to short_message(project.name, 60), project, title: project.name
-              .both
-              .row-fluid
-                = datetime_moment project.updated_at, class: :span3
-                - commits_count = project.total_commits_count
-                .span3= "#{commits_count > 10000 ? '10000+' : commits_count} #{commits_pluralize(commits_count)}"
-%br
-%div{style: 'margin: 10px;'}= will_paginate projects
-

app/views/statistics/_build_lists.html.slim

@@ -6,7 +6,7 @@
 .row
   .col-md-8
     .graph-wrapper
-      h4
+      b
         span.graph-key-color1>
         = t('.build_started_title')
         span.graph-key-color2>
@@ -23,7 +23,7 @@
 
   .col-md-3
     .panel-wrapper
-      h4
+      b
         = t('.total_build_started')
       .panel-data
         = image_tag 'loading-small.gif', ng_show: 'loading'
@@ -32,7 +32,7 @@
         | {{ statistics.build_lists.build_started_count | number }}
 
     .panel-wrapper
-      h4
+      b
         = t('.total_success')
       .panel-data
         = image_tag 'loading-small.gif', ng_show: 'loading'
@@ -41,7 +41,7 @@
         | {{ statistics.build_lists.success_count | number }}
 
     .panel-wrapper
-      h4
+      b
         = t('.total_build_error')
       .panel-data
         = image_tag 'loading-small.gif', ng_show: 'loading'
@@ -50,7 +50,7 @@
         | {{ statistics.build_lists.build_error_count | number }}
 
     .panel-wrapper
-      h4
+      b
         = t('.total_build_published')
       .panel-data
         = image_tag 'loading-small.gif', ng_show: 'loading'

app/views/statistics/_commits.html.slim

@@ -6,7 +6,7 @@
 .row
   .col-md-8
     .graph-wrapper
-      h4
+      b
         span.graph-key-color1>
         = t('.commits_title')
       .text-center.graph-loading ng-show='loading'
@@ -17,7 +17,7 @@
 
   .col-md-3
     .panel-wrapper
-      h4
+      b
         = t('.total_commits')
       .panel-data
         = image_tag 'loading-small.gif', ng_show: 'loading'

app/views/statistics/_filter.html.slim

@@ -1,3 +1,4 @@
+- user ||= false
 .row
   .col-md-12
 
@@ -55,18 +56,22 @@
               i.glyphicon.glyphicon-calendar
 
         |  
-      .form-group>
-        label.control-label>
-          = t('.users_or_groups_label')
 
-        input#users_or_groups[
+      - if user
-          name        = 'users_or_groups'
+        .form-group ng-init="users_or_groups = '#{user.uname}'"
-          type        = 'text'
+      - else
-          data-ajax   = autocomplete_user_or_group_autocompletes_path
+        .form-group>
-          ng-model    = 'users_or_groups'
+          label.control-label>
-          placeholder = t('.users_or_groups_placeholder')
+            = t('.users_or_groups_label')
-          ng-disabled = 'loading'
+
-          class       = 'form-control typeahead' ]
+          input#users_or_groups[
+            name        = 'users_or_groups'
+            type        = 'text'
+            data-ajax   = autocomplete_user_or_group_autocompletes_path
+            ng-model    = 'users_or_groups'
+            placeholder = t('.users_or_groups_placeholder')
+            ng-disabled = 'loading'
+            class       = 'form-control typeahead' ]
 
       a href='#' ng-click='update()'
         b

app/views/statistics/_issues.html.slim

@@ -6,7 +6,7 @@
 .row
   .col-md-8
     .graph-wrapper
-      h4
+      b
         span.graph-key-color1>
         = t('.open_title')
         span.graph-key-color2>
@@ -21,7 +21,7 @@
 
   .col-md-3
     .panel-wrapper
-      h4
+      b
         = t('.total_open')
       .panel-data
         = image_tag 'loading-small.gif', ng_show: 'loading'
@@ -30,7 +30,7 @@
         | {{ statistics.issues.open_count | number }}
 
     .panel-wrapper
-      h4
+      b
         = t('.total_reopen')
       .panel-data
         = image_tag 'loading-small.gif', ng_show: 'loading'
@@ -39,7 +39,7 @@
         | {{ statistics.issues.reopen_count | number }}
 
     .panel-wrapper
-      h4
+      b
         = t('.total_closed')
       .panel-data
         = image_tag 'loading-small.gif', ng_show: 'loading'

app/views/statistics/_pull_requests.html.slim

@@ -6,7 +6,7 @@
 .row
   .col-md-8
     .graph-wrapper
-      h4
+      b
         span.graph-key-color1>
         = t('.open_title')
         span.graph-key-color2>
@@ -21,7 +21,7 @@
 
   .col-md-3
     .panel-wrapper
-      h4
+      b
         = t('.total_open')
       .panel-data
         = image_tag 'loading-small.gif', ng_show: 'loading'
@@ -30,7 +30,7 @@
         | {{ statistics.pull_requests.open_count | number }}
 
     .panel-wrapper
-      h4
+      b
         = t('.total_merged')
       .panel-data
         = image_tag 'loading-small.gif', ng_show: 'loading'
@@ -39,7 +39,7 @@
         | {{ statistics.pull_requests.merged_count | number }}
 
     .panel-wrapper
-      h4
+      b
         = t('.total_closed')
       .panel-data
         = image_tag 'loading-small.gif', ng_show: 'loading'

app/views/users/base/_submenu.html.slim

@@ -11,7 +11,7 @@
           span.icon-bar
           span.icon-bar
         .navbar-brand
-          = link_to current_user.uname, current_user
+          = link_to @user.uname, @user
       / Collect the nav links, forms, and other content for toggling
       #submenu-navbar-collapse.collapse.navbar-collapse
         ul.nav.navbar-nav.left-border

app/views/users/profile/_projects.html.slim

@@ -0,0 +1,38 @@
+= simple_form_for :project, html: { 'ng-submit' => 'search()', id: 'search_projects_form' } do |f|
+  = hidden_field_tag 'subject_uname', @user.uname
+
+  .row
+    - if current_user
+      .col-md-3
+
+        = f.input :visibility,
+          label:          false,
+          collection:     project_visibility_options,
+          include_blank:  false,
+          input_html:     { ng_model: 'visibility' }
+    .col-md-4
+      = f.input :name,
+        label:          false,
+        input_html:     { ng_model: 'term' }
+
+    .col-md-5
+      => f.button :submit, t('layout.search.header')
+      => t('layout.or')
+      a href=user_path(@user)
+        = t('layout.clear')
+hr
+
+table.table.table-striped ng-show='!processing'
+  thead
+    tr
+      th
+  tbody
+    tr ng-repeat='project in projects'
+      td
+        h4
+          a ng-href='{{project.path}}'
+            | {{project.name}}
+        p
+          | {{project.description}}
+
+= angularjs_paginate

app/views/users/profile/_statistics.html.slim

@@ -0,0 +1,5 @@
+= render 'statistics/filter', user: @user
+= render 'statistics/build_lists'
+= render 'statistics/commits'
+= render 'statistics/issues'
+= render 'statistics/pull_requests'

app/views/users/profile/show.html.haml

@@ -1,10 +0,0 @@
--set_meta_tags title: title_object(@user)
-
-- edit_url = can?(:edit, @user) ? (current_user == @user ? profile_settings_path : edit_admin_user_path(@user)) : nil
-
-= render 'shared/profile', uname:       @user.uname,
-                           name:        @user.name,
-                           user:        @user,
-                           search_path: user_path,
-                           projects:    @projects,
-                           edit_url:    edit_url

app/views/users/profile/show.html.slim

@@ -0,0 +1,61 @@
+- set_meta_tags title: title_object(@user)
+
+= render 'users/base/submenu'
+
+.row
+  .col-md-3.col-md-offset-1
+    - size = User::AVATAR_SIZES[:big]
+    = image_tag avatar_url(@user, :big),
+      alt: @user.uname, height: size, width: size
+    - if @user.name.present?
+      h2= @user.name.truncate(20)
+    h3.help-block= @user.uname.truncate(20)
+    hr
+
+    - if @user.professional_experience.present?
+      b= t('activerecord.attributes.user.professional_experience')
+      p= @user.professional_experience
+
+    - unless @user.hide_email?
+      b= t('activerecord.attributes.user.email')
+      p= mail_to @user.email, @user.email.truncate(50), title: @user.email
+
+    - if @user.site.present?
+      b= t('activerecord.attributes.user.site')
+      p= link_to @user.site.truncate(50), @user.site
+
+    - if @user.company.present?
+      b= t('activerecord.attributes.user.company')
+      p= @user.company.truncate(50)
+
+    - if @user.location.present?
+      b= t('activerecord.attributes.user.location')
+      p= @user.location.truncate(50)
+    hr
+    h4= t('top_menu.groups')
+    - size = User::AVATAR_SIZES[:micro]
+    - @groups.each do |group|
+      p
+        => image_tag avatar_url(group, :micro), alt: group.uname, height: size, width: size
+        = link_to group.uname.truncate(20), group
+
+  .col-md-7
+
+    ul.nav.nav-tabs ng-init="tab = 'projects'"
+      li[ role='presentation'
+          ng-class="{ active: tab == 'projects' }"
+          ng-click="tab = 'projects'" ]
+        a href="#"
+          = t('top_menu.projects')
+      li[ role='presentation'
+          ng-class="{ active: tab == 'statistics' }"
+          ng-click="tab = 'statistics'" ]
+        a href="#"
+          = t('top_menu.statistics')
+
+    .offset20 ng-show="tab == 'projects'" ng-controller='ProfileController'
+      = render 'projects'
+    #manage-statistics.offset20 ng-show="tab == 'statistics'" ng-controller='StatisticsController' ng-init='init()'
+      = render 'statistics'
+
+

app/views/users/profile/show.json.jbuilder

@@ -0,0 +1,6 @@
+json.projects @projects do |project|
+  json.(project, :name, :description)
+  json.path project_path(project)
+end
+
+json.total_items @total_items