new admin user list UI

conf/app.ini

@@ -18,6 +18,10 @@ EXPLORE_PAGING_NUM = 20
 ; Number of issues that are showed in one page
 ISSUE_PAGING_NUM = 10
 
+[ui.admin]
+; Numer of users that are showed in one page
+USER_PAGING_NUM = 50
+
 [markdown]
 ; Enable hard line break extension
 ENABLE_HARD_LINE_BREAK = false

conf/locale/locale_en-US.ini

@@ -716,8 +716,8 @@ authentication = Authentications
 config = Configuration
 notices = System Notices
 monitor = Monitoring
-prev = Prev.
-next = Next
+first_page = First
+last_page = Last
 total = Total: %d
 
 dashboard.statistic = Statistic

models/user.go

@@ -432,11 +432,10 @@ func CountUsers() int64 {
 	return countUsers(x)
 }
 
-// GetUsers returns given number of user objects with offset.
-func GetUsers(num, offset int) ([]*User, error) {
-	users := make([]*User, 0, num)
-	err := x.Limit(num, offset).Where("type=0").Asc("id").Find(&users)
-	return users, err
+// Users returns number of users in given page.
+func Users(page, pageSize int) ([]*User, error) {
+	users := make([]*User, 0, pageSize)
+	return users, x.Limit(pageSize, (page-1)*pageSize).Where("type=0").Asc("id").Find(&users)
 }
 
 // get user by erify code

modules/setting/setting.go

@@ -91,8 +91,9 @@ var (
 	AnsiCharset  string
 
 	// UI settings.
-	ExplorePagingNum int
-	IssuePagingNum   int
+	ExplorePagingNum   int
+	IssuePagingNum     int
+	AdminUserPagingNum int
 
 	// Markdown sttings.
 	Markdown struct {
@@ -367,6 +368,9 @@ func NewConfigContext() {
 	ExplorePagingNum = sec.Key("EXPLORE_PAGING_NUM").MustInt(20)
 	IssuePagingNum = sec.Key("ISSUE_PAGING_NUM").MustInt(10)
 
+	sec = Cfg.Section("ui.admin")
+	AdminUserPagingNum = sec.Key("USER_PAGING_NUM").MustInt(50)
+
 	sec = Cfg.Section("picture")
 	PictureService = sec.Key("SERVICE").In("server", []string{"server"})
 	AvatarUploadPath = sec.Key("AVATAR_UPLOAD_PATH").MustString("data/avatars")

routers/admin/users.go

@@ -9,6 +9,7 @@ import (
 	"strings"
 
 	"github.com/Unknwon/com"
+	"github.com/Unknwon/paginater"
 
 	"github.com/gogits/gogs/models"
 	"github.com/gogits/gogs/modules/auth"
@@ -46,15 +47,21 @@ func Users(ctx *middleware.Context) {
 	ctx.Data["PageIsAdmin"] = true
 	ctx.Data["PageIsAdminUsers"] = true
 
-	pageNum := 50
-	p := pagination(ctx, models.CountUsers(), pageNum)
+	total := models.CountUsers()
+	page := ctx.QueryInt("page")
+	if page <= 1 {
+		page = 1
+	}
+	ctx.Data["Page"] = paginater.New(int(total), setting.AdminUserPagingNum, page, 5)
 
-	users, err := models.GetUsers(pageNum, (p-1)*pageNum)
+	users, err := models.Users(page, setting.AdminUserPagingNum)
 	if err != nil {
-		ctx.Handle(500, "GetUsers", err)
+		ctx.Handle(500, "Users", err)
 		return
 	}
 	ctx.Data["Users"] = users
+
+	ctx.Data["Total"] = total
 	ctx.HTML(200, USERS)
 }
 

templates/admin/user/list.tmpl

@@ -1,61 +1,72 @@
-{{template "ng/base/head" .}}
-{{template "ng/base/header" .}}
-<div id="admin-wrapper">
-    <div id="setting-wrapper" class="main-wrapper">
-        <div id="admin-setting" class="container clear">
-            {{template "admin/nav" .}}
-            <div class="grid-4-5 left">
-                <div class="setting-content">
-                    {{template "ng/base/alert" .}}
-                    <div id="setting-content">
-                        <div class="panel panel-radius">
-                            <div class="panel-header">
-                                <strong>{{.i18n.Tr "admin.users.user_manage_panel"}}</strong>
-                            </div>
-                            <div class="panel-body admin-panel">
-								<a class="btn-blue btn-medium btn-link btn-radius" href="{{AppSubUrl}}/admin/users/new">{{.i18n.Tr "admin.users.new_account"}}</a>
-                                <div class="admin-table">
-					                <table class="table table-striped">
-					                    <thead>
-					                        <tr>
-					                            <th>Id</th>
-					                            <th>{{.i18n.Tr "admin.users.name"}}</th>
-					                            <th>{{.i18n.Tr "email"}}</th>
-					                            <th>{{.i18n.Tr "admin.users.activated"}}</th>
-					                            <th>{{.i18n.Tr "admin.users.admin"}}</th>
-					                            <th>{{.i18n.Tr "admin.users.repos"}}</th>
-					                            <th>{{.i18n.Tr "admin.users.created"}}</th>
-					                            <th>{{.i18n.Tr "admin.users.edit"}}</th>
-					                        </tr>
-					                    </thead>
-					                    <tbody>
-					                        {{range .Users}}
-					                        <tr>
-					                            <td>{{.Id}}</td>
-					                            <td><a href="{{AppSubUrl}}/{{.Name}}">{{.Name}}</a></td>
-					                            <td>{{.Email}}</td>
-					                            <td><i class="fa fa{{if .IsActive}}-check{{end}}-square-o"></i></td>
-					                            <td><i class="fa fa{{if .IsAdmin}}-check{{end}}-square-o"></i></td>
-					                            <td>{{.NumRepos}}</td>
-					                            <td><span title="{{DateFmtLong .Created}}">{{DateFmtShort .Created }}</span></td>
-					                            <td><a href="{{AppSubUrl}}/admin/users/{{.Id}}"><i class="fa fa-pencil-square-o"></i></a></td>
-					                        </tr>
-					                        {{end}}
-					                    </tbody>
-					                </table>
-					                {{if or .LastPageNum .NextPageNum}}
-					                <ul class="pagination">
-					                    {{if .LastPageNum}}<li><a class="btn btn-medium btn-gray btn-radius" href="{{AppSubUrl}}/admin/users?p={{.LastPageNum}}">&laquo; {{.i18n.Tr "admin.prev"}}</a></li>{{end}}
-					                    {{if .NextPageNum}}<li><a class="btn btn-medium btn-gray btn-radius" href="{{AppSubUrl}}/admin/users?p={{.NextPageNum}}">&raquo; {{.i18n.Tr "admin.next"}}</a></li>{{end}}
-					                </ul>
-					                {{end}}
-				                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+{{template "base/head" .}}
+<div class="admin user">
+  <div class="ui container">
+    <div class="ui grid">
+      {{template "admin/navbar" .}}
+      <div class="twelve wide column content">
+        {{template "base/alert" .}}
+        <h4 class="ui top attached header">
+          {{.i18n.Tr "admin.users.user_manage_panel"}} ({{.i18n.Tr "admin.total" .Total}})
+          <div class="ui right">
+            <a class="ui blue tiny button" href="{{AppSubUrl}}/admin/users/new">{{.i18n.Tr "admin.users.new_account"}}</a>
+          </div>
+        </h4>
+        <div class="ui attached table segment">
+          <table class="ui very basic striped table">
+            <thead>
+              <tr>
+                <th>ID</th>
+                <th>{{.i18n.Tr "admin.users.name"}}</th>
+                <th>{{.i18n.Tr "email"}}</th>
+                <th>{{.i18n.Tr "admin.users.activated"}}</th>
+                <th>{{.i18n.Tr "admin.users.admin"}}</th>
+                <th>{{.i18n.Tr "admin.users.repos"}}</th>
+                <th>{{.i18n.Tr "admin.users.created"}}</th>
+                <th>{{.i18n.Tr "admin.users.edit"}}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {{range .Users}}
+              <tr>
+                <td>{{.Id}}</td>
+                <td><a href="{{AppSubUrl}}/{{.Name}}">{{.Name}}</a></td>
+                <td>{{.Email}}</td>
+                <td><i class="fa fa{{if .IsActive}}-check{{end}}-square-o"></i></td>
+                <td><i class="fa fa{{if .IsAdmin}}-check{{end}}-square-o"></i></td>
+                <td>{{.NumRepos}}</td>
+                <td><span title="{{DateFmtLong .Created}}">{{DateFmtShort .Created }}</span></td>
+                <td><a href="{{AppSubUrl}}/admin/users/{{.Id}}"><i class="fa fa-pencil-square-o"></i></a></td>
+              </tr>
+              {{end}}
+            </tbody>
+        	</table>
         </div>
+        	
+				{{with .Page}}
+				{{if gt .TotalPages 1}}
+				<div class="center page buttons">
+					<div class="ui borderless pagination menu">
+						<a class="{{if .IsFirst}}disabled{{end}} item" href="{{$.Link}}"><i class="angle double left icon"></i> {{$.i18n.Tr "admin.first_page"}}</a>
+					  <a class="{{if not .HasPrevious}}disabled{{end}} item" {{if .HasPrevious}}href="{{$.Link}}?page={{.Previous}}"{{end}}>
+					    <i class="left arrow icon"></i> {{$.i18n.Tr "repo.issues.previous"}}
+					  </a>
+						{{range .Pages}}
+						{{if eq .Num -1}}
+						<a class="disabled item">...</a>
+						{{else}}
+						<a class="{{if .IsCurrent}}active{{end}} item" {{if not .IsCurrent}}href="{{$.Link}}?page={{.Num}}"{{end}}>{{.Num}}</a>
+						{{end}}
+						{{end}}
+					  <a class="{{if not .HasNext}}disabled{{end}} item" {{if .HasNext}}href="{{$.Link}}?page={{.Next}}"{{end}}>
+					    {{$.i18n.Tr "repo.issues.next"}} <i class="icon right arrow"></i>
+					  </a>
+						<a class="{{if .IsLast}}disabled{{end}} item" href="{{$.Link}}?page={{.TotalPages}}">{{$.i18n.Tr "admin.last_page"}}&nbsp;<i class="angle double right icon"></i></a>
+					</div>
+				</div>
+				{{end}}
+				{{end}}
+      </div>
     </div>
+  </div>
 </div>
-{{template "ng/base/footer" .}}
+{{template "base/footer" .}}