From ff90c7cfb4c3c17a303ce4af8fd8be7725c9d6e6 Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Tue, 7 Aug 2018 17:05:41 +0800
Subject: [PATCH] [org admin] added 'address-book'

---
 .../templates/js/admin-common-templates.html  | 223 ++++++++++++++++++
 seahub/templates/js/orgadmin-templates.html   |  30 +++
 seahub/templates/js/sysadmin-templates.html   | 217 -----------------
 .../templates/sysadmin/sysadmin_backbone.html |   4 +-
 static/scripts/common.js                      |  17 +-
 static/scripts/orgadmin-app/main.js           |   6 +
 static/scripts/orgadmin-app/router.js         |  76 ++++++
 static/scripts/orgadmin-app/views/side-nav.js |  74 ++++++
 static/scripts/orgadmin-main.js               |   4 +
 .../collection/address-book-group.js          |  19 +-
 .../collection/address-book-groups.js         |  13 +-
 .../sysadmin-app/collection/group-repos.js    |  15 +-
 .../views/address-book-group-item.js          |  38 ++-
 .../views/address-book-group-library.js       |  21 +-
 .../sysadmin-app/views/address-book-group.js  |  67 ++++--
 .../sysadmin-app/views/group-member.js        |  30 ++-
 16 files changed, 588 insertions(+), 266 deletions(-)
 create mode 100644 seahub/templates/js/admin-common-templates.html
 create mode 100644 seahub/templates/js/orgadmin-templates.html
 create mode 100644 static/scripts/orgadmin-app/main.js
 create mode 100644 static/scripts/orgadmin-app/router.js
 create mode 100644 static/scripts/orgadmin-app/views/side-nav.js
 create mode 100644 static/scripts/orgadmin-main.js

diff --git a/seahub/templates/js/admin-common-templates.html b/seahub/templates/js/admin-common-templates.html
new file mode 100644
index 0000000000..1de5fce527
--- /dev/null
+++ b/seahub/templates/js/admin-common-templates.html
@@ -0,0 +1,223 @@
+{% load avatar_tags i18n %}
+
+<script type="text/template" id="user-info-popup-tmpl">
+    <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
+    <div class="sf-popover-con">
+        <div class="item ovhd">
+            {% avatar request.user 36 %}
+            <div class="txt">
+                <%- app.pageOptions.name %>
+            </div>
+        </div>
+        <div class="loading-icon loading-tip"></div>
+        <p class="error alc hide"></p>
+        <div id="space-traffic" class="hide"></div>
+        <a class="item" href="{{ SITE_ROOT }}profile/">{% trans "Settings" %}</a>
+        <a href="{{ SITE_ROOT }}" title="{% trans "Exit admin panel" %}" class="item">{% trans "Exit admin panel" %}</a>
+        <a href="{{ SITE_ROOT }}accounts/logout/" class="item" id="logout">{% trans "Log out" %}</a>
+    </div>
+</script>
+
+<script type="text/template" id="group-member-item-tmpl">
+    <td><img src="<%= avatar_url %>" alt="" width="20" class="avatar" /></td>
+    <td><%- name %></td>
+    <td>
+        <% if (app.pageOptions.org_id) { %>
+        <a href="{{ SITE_ROOT }}org/useradmin/info/<% print(encodeURIComponent(email)); %>/"><%- email %></a>
+        <% } else { %>
+        <a href="{{ SITE_ROOT }}useradmin/info/<% print(encodeURIComponent(email)); %>/"><%- email %></a>
+        <% } %>
+    </td>
+    <td>
+        <% if (role == 'Owner') { %>
+        <span class="cur-role">{% trans "Owner" %}</span>
+        <% } else if (role == 'Admin') { %>
+        <span class="cur-role">{% trans "Admin" %}</span>
+        <span title="{% trans "Edit" %}" class="user-role-edit-icon sf2-icon-edit op-icon vh"></span>
+        <select name="role" class="user-role-select hide">
+            <option value="0">{% trans "Member" %}</option>
+            <option value="1" selected="selected">{% trans "Admin" %}</option>
+        </select>
+        <% } else if (role == 'Member') { %>
+        <span class="cur-role">{% trans "Member" %}</span>
+        <span title="{% trans "Edit" %}" class="user-role-edit-icon sf2-icon-edit op-icon vh"></span>
+        <select name="role" class="user-role-select hide">
+            <option value="0" selected="selected">{% trans "Member" %}</option>
+            <option value="1">{% trans "Admin" %}</option>
+        </select>
+        <% } %>
+    </td>
+    <td> 
+        <% if (role != 'Owner') { %>
+        <a href="#" class="sf2-icon-delete sf2-x member-delete-btn op-icon vh" title="{% trans "Delete" %}" aria-label="{% trans "Delete" %}"></a>
+        <% } %>
+    </td>
+</script>
+
+<script type="text/template" id="add-group-member-form-tmpl">
+    <form id="add-group-member-form" action="" method="post" class="hide">{% csrf_token %}
+        <h3 id="dialogTitle">{% trans "Add Member" %}</h3>
+        <label for="email">{% trans "Email" %}</label><br />
+        <input type="text" name="email" value="" id="email" /><br />
+        <p class="error hide"></p>
+        <input type="submit" class="submit" value="{% trans "Submit" %}" />
+    </form>
+</script>
+
+{# address book #}
+<script type="text/template" id="address-book-tmpl">
+    <div class="hd ovhd">
+        <h3 class="fleft">{% trans "Departments" context "address book" %}</h3>
+        <div class="fright">
+            <button class="btn-white js-add-group">{% trans "New Department" %}</button>
+        </div>
+    </div>
+    <span class="loading-icon loading-tip"></span>
+    <table>
+        <thead>
+            <tr>
+                <th width="40%">{% trans "Name" %}</th>
+                <th width="25%">{% trans "Created At" %}</th>
+                <th width="20%">{% trans "Quota" %}</th>
+                <th width="15%"><!--Operations--></th>
+            </tr>
+        </thead>
+        <tbody>
+        </tbody>
+    </table>
+    <div class="empty-tips hide">
+        <h2 class="alc">{% trans "No departments" %}</h2>
+    </div>
+    <p class="error error-tip hide"></p>
+</script>
+<script type="text/template" id="address-book-group-tmpl">
+    <div class="hd">
+        <h3 class="group-path"></h3>
+    </div>
+    <span class="loading-icon loading-tip"></span>
+    <div class="groups">
+        <div class="small-hd">
+            <h4 class="small-hd-heading">{% trans "Sub-departments" %}</h4>
+            <button class="btn-white js-add-group">{% trans "New Sub-department" %}</button>
+        </div>
+        <table class="hide">
+            <thead>
+                <tr>
+                    <th width="40%">{% trans "Name" %}</th>
+                    <th width="25%">{% trans "Created At" %}</th>
+                    <th width="25%">{% trans "Quota" %}</th>
+                    <th width="10%"><!--Operations--></th>
+                </tr>
+            </thead>
+            <tbody>
+            </tbody>
+        </table>
+        <p class="empty-tip hide">{% trans "No sub-departments" %}</p>
+    </div>
+    <div class="members">
+        <div class="small-hd">
+            <h4 class="small-hd-heading">{% trans "Members" %}</h4>
+            <button class="btn-white js-add-member">{% trans "Add Member" %}</button>
+        </div>
+        <table class="hide">
+            <thead>
+                <tr>
+                    <th width="5%"></th>
+                    <th width="25%">{% trans "Name" %}</th>
+                    <th width="35%">{% trans "Email" %}</th>
+                    <th width="25%">{% trans "Role" %}</th>
+                    <th width="10%"><!--Operations--></th>
+                </tr>
+            </thead>
+            <tbody>
+            </tbody>
+        </table>
+        <p class="empty-tip hide">{% trans "No members" %}</p>
+    </div>
+    <div class="libraries">
+        <div class="small-hd">
+            <h4 class="small-hd-heading">{% trans "Libraries" %}</h4>
+            <button class="btn-white js-add-library">{% trans "New Library" %}</button>
+        </div>
+        <table class="hide">
+            <thead>
+                <tr>
+                    <th width="5%"></th>
+                    <th width="55%">{% trans "Name" %}</th>
+                    <th width="30%">{% trans "Size" %}</th>
+                    <th width="10%"><!--Operations--></th>
+                </tr>
+            </thead>
+            <tbody>
+            </tbody>
+        </table>
+        <p class="empty-tip hide">{% trans "No libraries" %}</p>
+    </div>
+    <p class="error error-tip hide"></p>
+</script>
+<script type="text/template" id="address-book-group-path-tmpl">
+    <a href="#address-book/" class="normal">{% trans "Departments" context "address book" %}</a>
+    <span class="path-split">/</span>
+    <% for (var i = 0,len = ancestor_groups.length; i < len; i++) { %>
+    <a href="#address-book/groups/<%= ancestor_groups[i].id %>/" class="normal"><%- ancestor_groups[i].name %></a>
+    <span class="path-split">/</span>
+    <% } %>
+    <%- name %>
+</script>
+<script type="text/template" id="address-book-group-item-tmpl">
+    <td><a href="#address-book/groups/<%= id %>/"><%- name %></a></td>
+    <td><time title="<%= time %>"><%= time_from_now %></time></td>
+    <td>
+        <span <% if (quota_error) { %>class="error"<% } %>><%= quota_shown %></span>
+        <span title="{% trans "Edit Quota" %}" class="quota-edit-icon sf2-icon-edit op-icon vh"></span>
+    </td>
+    <td>
+        <a href="#" class="sf2-icon-delete sf2-x group-delete-btn op-icon vh" title="{% trans "Delete" %}" aria-label="{% trans "Delete" %}"></a>
+    </td>
+</script>
+<script type="text/template" id="address-book-group-add-form-tmpl">
+    <form id="group-add-form" action="" method="post" class="hide">{% csrf_token %}
+        <h3 id="dialogTitle"><%= title %></h3>
+        <label for="group-name">{% trans "Name" %}</label><br />
+        <input type="text" name="group_name" value="" class="input" id="group-name" /><br />
+        <p class="error hide"></p>
+        <input type="submit" class="submit" value="{% trans "Submit" %}" />
+    </form>
+</script>
+<script type="text/template" id="address-book-group-quota-set-form-tmpl">
+<form id="set-quota-form" method="post" action="" class="hide">{% csrf_token %}
+    <h3>{% trans "Set quota" %}</h3>
+    <input type="text" name="quota" class="input" /> MB
+    <p class="tip">
+        <span>{% trans "An integer that is greater than 0 or equal to -2." %}</span><br />
+        <span>{% trans "Tip: -2 means no limit." %}</span>
+    </p>
+    <p class="error hide"></p>
+    <input type="submit" value="{% trans "Submit" %}" class="submit" />
+</form>
+</script>
+<script type="text/template" id="address-book-group-library-item-tmpl">
+    <td>
+        <img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
+    </td>
+    <td>
+        <% if (enable_sys_admin_view_repo && is_pro && !encrypted) { %>
+        <a href="#libs/<%= repo_id %>/"><%- name %></a>
+        <% } else { %>
+        <%- name %>
+        <% } %>
+    </td>
+    <td><%- formatted_size %></td>
+    <td>
+        <a href="#" class="sf2-icon-delete sf2-x repo-delete-btn op-icon vh" title="{% trans "Delete" %}" aria-label="{% trans "Delete" %}"></a>
+    </td>
+</script>
+<script type="text/template" id="address-book-library-add-form-tmpl">
+    <form id="library-add-form" action="" method="post" class="hide">{% csrf_token %}
+        <h3 id="dialogTitle">{% trans "New Library" %}</h3>
+        <label for="library-name">{% trans "Name" %}</label><br />
+        <input type="text" name="library_name" value="" class="input" id="library-name" /><br />
+        <p class="error hide"></p>
+        <input type="submit" class="submit" value="{% trans "Submit" %}" />
+    </form>
+</script>
diff --git a/seahub/templates/js/orgadmin-templates.html b/seahub/templates/js/orgadmin-templates.html
new file mode 100644
index 0000000000..f00b5050e1
--- /dev/null
+++ b/seahub/templates/js/orgadmin-templates.html
@@ -0,0 +1,30 @@
+{% load avatar_tags i18n %}
+
+<script type="text/template" id="side-nav-tmpl">
+    <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
+    <h3 class="hd">{% trans "Admin" %}</h3>
+    <ul class="side-tabnav-tabs">
+        <li class="tab">
+        <a href="{% url 'org_manage' %}"><span class="sf2-icon-organization"></span>{% trans "Info" %}</a>
+        </li>
+        <li class="tab">
+        <a href="{% url 'org_repo_admin' %}"><span class="sf2-icon-library"></span>{% trans "Libraries" %}</a>
+        </li>
+        <li class="tab">
+        <a href="{% url 'org_user_admin' %}"><span class="sf2-icon-user"></span>{% trans "Users" %}</a>
+        </li>
+        <li class="tab">
+        <a href="{% url 'org_group_admin' %}"><span class="sf2-icon-group"></span>{% trans "Groups" %}</a>
+        </li>
+
+        <li class="tab<% if (cur_tab == 'address-book') { %> tab-cur<% } %>">
+            <a href="{{ SITE_ROOT }}org/admin/#address-book/"><span class="sf2-icon-organization"></span>{% trans "Departments" context "address book" %}</a>
+        </li>
+        <li class="tab">
+        <a href="{% url 'org_publink_admin' %}"><span class="sf2-icon-link"></span>{% trans "Links" %}</a>
+        </li>
+        <li class="tab">
+        <a href="{% url 'org_log_file_audit' %}"><span class="sf2-icon-clock"></span>{% trans "Logs" %}</a>
+        </li>
+    </ul>
+</script>
diff --git a/seahub/templates/js/sysadmin-templates.html b/seahub/templates/js/sysadmin-templates.html
index 29f84019cb..da8574e486 100644
--- a/seahub/templates/js/sysadmin-templates.html
+++ b/seahub/templates/js/sysadmin-templates.html
@@ -314,25 +314,6 @@
 
 {% include "trusted_ip/sysadmin-templates_trusted_ip.html" %}
 
-<script type="text/template" id="user-info-popup-tmpl">
-    <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
-    <div class="sf-popover-con">
-        <div class="item ovhd">
-            {% avatar request.user 36 %}
-            <div class="txt">
-                <%- app.pageOptions.name %><br />
-                <%- app.pageOptions.contact_email %>
-            </div>
-        </div>
-        <div class="loading-icon loading-tip"></div>
-        <p class="error alc hide"></p>
-        <div id="space-traffic" class="hide"></div>
-        <a class="item" href="{{ SITE_ROOT }}profile/">{% trans "Settings" %}</a>
-        <a href="{{ SITE_ROOT }}" title="{% trans "Exit admin panel" %}" class="item">{% trans "Exit admin panel" %}</a>
-        <a href="{{ SITE_ROOT }}accounts/logout/" class="item" id="logout">{% trans "Log out" %}</a>
-    </div>
-</script>
-
 <script type="text/template" id="confirm-dialog-with-extra-option-tmpl">
     <h3 id="dialogTitle"><%= title %></h3>
     <p><%= content %></p>
@@ -877,16 +858,6 @@
     </div>
 </script>
 
-<script type="text/template" id="add-group-member-form-tmpl">
-    <form id="add-group-member-form" action="" method="post" class="hide">{% csrf_token %}
-        <h3 id="dialogTitle">{% trans "Add Member" %}</h3>
-        <label for="email">{% trans "Email" %}</label><br />
-        <input type="text" name="email" value="" id="email" /><br />
-        <p class="error hide"></p>
-        <input type="submit" class="submit" value="{% trans "Submit" %}" />
-    </form>
-</script>
-
 <script type="text/template" id="group-libraries-tmpl">
     <span class="loading-icon loading-tip"></span>
     <table class="hide">
@@ -945,36 +916,6 @@
     </div>
 </script>
 
-<script type="text/template" id="group-member-item-tmpl">
-    <td><img src="<%= avatar_url %>" alt="" width="20" class="avatar" /></td>
-    <td><%- name %></td>
-    <td><a href="{{ SITE_ROOT }}useradmin/info/<% print(encodeURIComponent(email)); %>/"><%- email %></a></td>
-    <td>
-        <% if (role == 'Owner') { %>
-        <span class="cur-role">{% trans "Owner" %}</span>
-        <% } else if (role == 'Admin') { %>
-        <span class="cur-role">{% trans "Admin" %}</span>
-        <span title="{% trans "Edit" %}" class="user-role-edit-icon sf2-icon-edit op-icon vh"></span>
-        <select name="role" class="user-role-select hide">
-            <option value="0">{% trans "Member" %}</option>
-            <option value="1" selected="selected">{% trans "Admin" %}</option>
-        </select>
-        <% } else if (role == 'Member') { %>
-        <span class="cur-role">{% trans "Member" %}</span>
-        <span title="{% trans "Edit" %}" class="user-role-edit-icon sf2-icon-edit op-icon vh"></span>
-        <select name="role" class="user-role-select hide">
-            <option value="0" selected="selected">{% trans "Member" %}</option>
-            <option value="1">{% trans "Admin" %}</option>
-        </select>
-        <% } %>
-    </td>
-    <td>
-        <% if (role != 'Owner') { %>
-        <a href="#" class="sf2-icon-delete sf2-x member-delete-btn op-icon vh" title="{% trans "Delete" %}" aria-label="{% trans "Delete" %}"></a>
-        <% } %>
-    </td>
-</script>
-
 <script type="text/template" id="admin-operation-logs-tmpl">
     <div class="hd ovhd">
         <ul class="tab-tabs-nav fleft">
@@ -1060,161 +1001,3 @@
     </td>
     <td><time title="<%- time %>"><%- time_from_now %></time></td>
 </script>
-
-{# address book #}
-<script type="text/template" id="address-book-tmpl">
-    <div class="hd ovhd">
-        <h3 class="fleft">{% trans "Departments" context "address book" %}</h3>
-        <div class="fright">
-            <button class="btn-white js-add-group">{% trans "New Department" %}</button>
-        </div>
-    </div>
-    <span class="loading-icon loading-tip"></span>
-    <table>
-        <thead>
-            <tr>
-                <th width="40%">{% trans "Name" %}</th>
-                <th width="25%">{% trans "Created At" %}</th>
-                <th width="20%">{% trans "Quota" %}</th>
-                <th width="15%"><!--Operations--></th>
-            </tr>
-        </thead>
-        <tbody>
-        </tbody>
-    </table>
-    <div class="empty-tips hide">
-        <h2 class="alc">{% trans "No departments" %}</h2>
-    </div>
-    <p class="error error-tip hide"></p>
-</script>
-<script type="text/template" id="address-book-group-tmpl">
-    <div class="hd">
-        <h3 class="group-path"></h3>
-    </div>
-    <span class="loading-icon loading-tip"></span>
-    <div class="groups">
-        <div class="small-hd">
-            <h4 class="small-hd-heading">{% trans "Sub-departments" %}</h4>
-            <button class="btn-white js-add-group">{% trans "New Sub-department" %}</button>
-        </div>
-        <table class="hide">
-            <thead>
-                <tr>
-                    <th width="40%">{% trans "Name" %}</th>
-                    <th width="25%">{% trans "Created At" %}</th>
-                    <th width="25%">{% trans "Quota" %}</th>
-                    <th width="10%"><!--Operations--></th>
-                </tr>
-            </thead>
-            <tbody>
-            </tbody>
-        </table>
-        <p class="empty-tip hide">{% trans "No sub-departments" %}</p>
-    </div>
-    <div class="members">
-        <div class="small-hd">
-            <h4 class="small-hd-heading">{% trans "Members" %}</h4>
-            <button class="btn-white js-add-member">{% trans "Add Member" %}</button>
-        </div>
-        <table class="hide">
-            <thead>
-                <tr>
-                    <th width="5%"></th>
-                    <th width="25%">{% trans "Name" %}</th>
-                    <th width="35%">{% trans "Email" %}</th>
-                    <th width="25%">{% trans "Role" %}</th>
-                    <th width="10%"><!--Operations--></th>
-                </tr>
-            </thead>
-            <tbody>
-            </tbody>
-        </table>
-        <p class="empty-tip hide">{% trans "No members" %}</p>
-    </div>
-    <div class="libraries">
-        <div class="small-hd">
-            <h4 class="small-hd-heading">{% trans "Libraries" %}</h4>
-            <button class="btn-white js-add-library">{% trans "New Library" %}</button>
-        </div>
-        <table class="hide">
-            <thead>
-                <tr>
-                    <th width="5%"></th>
-                    <th width="55%">{% trans "Name" %}</th>
-                    <th width="30%">{% trans "Size" %}</th>
-                    <th width="10%"><!--Operations--></th>
-                </tr>
-            </thead>
-            <tbody>
-            </tbody>
-        </table>
-        <p class="empty-tip hide">{% trans "No libraries" %}</p>
-    </div>
-    <p class="error error-tip hide"></p>
-</script>
-<script type="text/template" id="address-book-group-path-tmpl">
-    <a href="#address-book/" class="normal">{% trans "Departments" context "address book" %}</a>
-    <span class="path-split">/</span>
-    <% for (var i = 0,len = ancestor_groups.length; i < len; i++) { %>
-    <a href="#address-book/groups/<%= ancestor_groups[i].id %>/" class="normal"><%- ancestor_groups[i].name %></a>
-    <span class="path-split">/</span>
-    <% } %>
-    <%- name %>
-</script>
-<script type="text/template" id="address-book-group-item-tmpl">
-    <td><a href="{{ SITE_ROOT }}sysadmin/#address-book/groups/<%= id %>/"><%- name %></a></td>
-    <td><time title="<%= time %>"><%= time_from_now %></time></td>
-    <td>
-        <span <% if (quota_error) { %>class="error"<% } %>><%= quota_shown %></span>
-        <span title="{% trans "Edit Quota" %}" class="quota-edit-icon sf2-icon-edit op-icon vh"></span>
-    </td>
-    <td>
-        <a href="#" class="sf2-icon-delete sf2-x group-delete-btn op-icon vh" title="{% trans "Delete" %}" aria-label="{% trans "Delete" %}"></a>
-    </td>
-</script>
-<script type="text/template" id="address-book-group-add-form-tmpl">
-    <form id="group-add-form" action="" method="post" class="hide">{% csrf_token %}
-        <h3 id="dialogTitle"><%= title %></h3>
-        <label for="group-name">{% trans "Name" %}</label><br />
-        <input type="text" name="group_name" value="" class="input" id="group-name" /><br />
-        <p class="error hide"></p>
-        <input type="submit" class="submit" value="{% trans "Submit" %}" />
-    </form>
-</script>
-<script type="text/template" id="address-book-group-quota-set-form-tmpl">
-<form id="set-quota-form" method="post" action="" class="hide">{% csrf_token %}
-    <h3>{% trans "Set quota" %}</h3>
-    <input type="text" name="quota" class="input" /> MB
-    <p class="tip">
-        <span>{% trans "An integer that is greater than 0 or equal to -2." %}</span><br />
-        <span>{% trans "Tip: -2 means no limit." %}</span>
-    </p>
-    <p class="error hide"></p>
-    <input type="submit" value="{% trans "Submit" %}" class="submit" />
-</form>
-</script>
-<script type="text/template" id="address-book-group-library-item-tmpl">
-    <td>
-        <img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
-    </td>
-    <td>
-        <% if (enable_sys_admin_view_repo && is_pro && !encrypted) { %>
-        <a href="#libs/<%= repo_id %>/"><%- name %></a>
-        <% } else { %>
-        <%- name %>
-        <% } %>
-    </td>
-    <td><%- formatted_size %></td>
-    <td>
-        <a href="#" class="sf2-icon-delete sf2-x repo-delete-btn op-icon vh" title="{% trans "Delete" %}" aria-label="{% trans "Delete" %}"></a>
-    </td>
-</script>
-<script type="text/template" id="address-book-library-add-form-tmpl">
-    <form id="library-add-form" action="" method="post" class="hide">{% csrf_token %}
-        <h3 id="dialogTitle">{% trans "New Library" %}</h3>
-        <label for="library-name">{% trans "Name" %}</label><br />
-        <input type="text" name="library_name" value="" class="input" id="library-name" /><br />
-        <p class="error hide"></p>
-        <input type="submit" class="submit" value="{% trans "Submit" %}" />
-    </form>
-</script>
diff --git a/seahub/templates/sysadmin/sysadmin_backbone.html b/seahub/templates/sysadmin/sysadmin_backbone.html
index 1912e336be..faf48381c3 100644
--- a/seahub/templates/sysadmin/sysadmin_backbone.html
+++ b/seahub/templates/sysadmin/sysadmin_backbone.html
@@ -71,7 +71,9 @@
 
 {% include 'js/common-templates.html' %}
 {% include 'js/sysadmin-templates.html' %}
-{% include "js/lib-op-popups.html" %}
+{% include 'js/admin-common-templates.html' %} {# for sys admin & org admin #}
+{% include 'js/lib-op-popups.html' %}
+
 <script type="text/javascript">
 var app = {
     config: {
diff --git a/static/scripts/common.js b/static/scripts/common.js
index f9d0af24cd..7c015ec2b8 100644
--- a/static/scripts/common.js
+++ b/static/scripts/common.js
@@ -200,7 +200,7 @@ define([
                 case 'admin-group-owned-libraries': return siteRoot + 'api/v2.1/admin/groups/' + options.group_id + '/group-owned-libraries/';
                 case 'admin-group-owned-library': return siteRoot + 'api/v2.1/admin/groups/' + options.group_id + '/group-owned-libraries/' + options.repo_id + '/';
                 case 'admin-group-members': return siteRoot + 'api/v2.1/admin/groups/' + options.group_id + '/members/';
-                case 'admin-group-member': return siteRoot + 'api/v2.1/admin/groups/' + options.group_id + '/members/' + options.email+ '/';
+                case 'admin-group-member': return siteRoot + 'api/v2.1/admin/groups/' + options.group_id + '/members/' + encodeURIComponent(options.email) + '/';
                 case 'admin-system-library': return siteRoot + 'api/v2.1/admin/system-library/';
                 case 'admin-system-library-upload-link': return siteRoot + 'api/v2.1/admin/system-library/upload-link/';
                 case 'admin-trash-libraries': return siteRoot + 'api/v2.1/admin/trash-libraries/';
@@ -213,6 +213,16 @@ define([
                 case 'admin-address-book-groups': return siteRoot + 'api/v2.1/admin/address-book/groups/';
                 case 'admin-address-book-group': return siteRoot + 'api/v2.1/admin/address-book/groups/' + options.group_id + '/';
 
+                // org admin
+                case 'org-admin-address-book-groups': return siteRoot + 'api/v2.1/org/' + options.org_id + '/admin/address-book/groups/';
+                case 'org-admin-address-book-group': return siteRoot + 'api/v2.1/org/' + options.org_id + '/admin/address-book/groups/' + options.group_id + '/';
+                case 'org-admin-group': return siteRoot + 'api/v2.1/org/' + options.org_id + '/admin/groups/' + options.group_id + '/';
+                case 'org-admin-group-members': return siteRoot + 'api/v2.1/org/' + options.org_id + '/admin/groups/' + options.group_id + '/members/';
+                case 'org-admin-group-member': return siteRoot + 'api/v2.1/org/' + options.org_id + '/admin/groups/' + options.group_id + '/members/' + encodeURIComponent(options.email) + '/';
+                case 'org-admin-group-libraries': return siteRoot + 'api/v2.1/org/' + options.org_id + '/admin/groups/' + options.group_id + '/libraries/';
+                case 'org-admin-group-owned-libraries': return siteRoot + 'api/v2.1/org/' + options.org_id + '/admin/groups/' + options.group_id + '/group-owned-libraries/';
+                case 'org-admin-group-owned-library': return siteRoot + 'api/v2.1/org/' + options.org_id + '/admin/groups/' + options.group_id + '/group-owned-libraries/' + options.repo_id + '/';
+
                 case 'license': return siteRoot + 'api/v2.1/admin/license/';
             }
         },
@@ -359,14 +369,13 @@ define([
             $yesBtn.on('click', yesCallback);
         },
 
-        confirm_with_extra_option_template: _.template($('#confirm-dialog-with-extra-option-tmpl').html()),
-
         showConfirmWithExtraOption: function(title, content, extraOption, yesCallback) {
             var $popup = $("#confirm-popup");
             var $cont = $('#confirm-con');
             var $yesBtn = $('#confirm-yes');
 
-            var html = this.confirm_with_extra_option_template({
+            var confirm_with_extra_option_template = _.template($('#confirm-dialog-with-extra-option-tmpl').html());
+            var html = confirm_with_extra_option_template({
                 'is_pro': app.pageOptions.is_pro,
                 'title': title,
                 'content': content,
diff --git a/static/scripts/orgadmin-app/main.js b/static/scripts/orgadmin-app/main.js
new file mode 100644
index 0000000000..9c72a83b13
--- /dev/null
+++ b/static/scripts/orgadmin-app/main.js
@@ -0,0 +1,6 @@
+define([
+    'orgadmin-app/router'
+], function(Router){
+    app.router = new Router();
+    Backbone.history.start();
+});
diff --git a/static/scripts/orgadmin-app/router.js b/static/scripts/orgadmin-app/router.js
new file mode 100644
index 0000000000..da42ea4851
--- /dev/null
+++ b/static/scripts/orgadmin-app/router.js
@@ -0,0 +1,76 @@
+/*global define*/
+define([
+    'jquery',
+    'backbone',
+    'common',
+
+    'orgadmin-app/views/side-nav',
+
+    'sysadmin-app/views/address-book',
+    'sysadmin-app/views/address-book-group',
+
+    'app/views/account'
+], function($, Backbone, Common, SideNavView,
+    AddressBookView, AddressBookGroupView,
+    AccountView) {
+
+    "use strict";
+
+    var Router = Backbone.Router.extend({
+        routes: {
+            '': 'showAddressBook',
+
+            'address-book/': 'showAddressBook',
+            'address-book/groups/:group_id/': 'showAddressBookGroup',
+
+            // Default
+            '*actions': 'showAddressBook',
+        },
+
+        initialize: function() {
+            $('#initial-loading').hide()
+                .next('.row').removeClass('hide');
+
+            Common.prepareApiCsrf();
+            Common.initLocale();
+
+            this.accountView = new AccountView();
+            this.sideNavView = new SideNavView();
+            app.ui = {
+                sideNavView: this.sideNavView,
+                accountView: this.accountView
+            };
+
+            $('#info-bar .close').on('click', Common.closeTopNoticeBar);
+
+            this.addressBookView = new AddressBookView();
+            this.addressBookGroupView = new AddressBookGroupView();
+        },
+
+        switchCurrentView: function(newView) {
+            if (!this.currentView) {
+                this.currentView = newView;
+            } else {
+                if (this.currentView != newView) {
+                    this.currentView.hide();
+                    this.currentView = newView;
+                }
+            }
+        },
+
+        showAddressBook: function() {
+            this.switchCurrentView(this.addressBookView);
+            this.sideNavView.setCurTab('address-book');
+            this.addressBookView.show();
+        },
+
+        showAddressBookGroup: function(group_id) {
+            this.switchCurrentView(this.addressBookGroupView);
+            this.sideNavView.setCurTab('address-book');
+            this.addressBookGroupView.show({'group_id': group_id});
+        }
+
+    });
+
+    return Router;
+});
diff --git a/static/scripts/orgadmin-app/views/side-nav.js b/static/scripts/orgadmin-app/views/side-nav.js
new file mode 100644
index 0000000000..6ea34cc218
--- /dev/null
+++ b/static/scripts/orgadmin-app/views/side-nav.js
@@ -0,0 +1,74 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common'
+], function($, _, Backbone, Common) {
+    'use strict';
+
+    var sideNavView = Backbone.View.extend({
+        el: '#side-nav',
+
+        template: _.template($("#side-nav-tmpl").html()),
+
+        initialize: function() {
+            this.default_cur_tab = 'address-book';
+            this.data = {
+                'cur_tab': this.default_cur_tab
+            };
+            this.render();
+
+            var _this = this;
+            $('#js-toggle-side-nav').on('click', function() {
+                _this.show();
+                return false;
+            });
+            $(window).on('resize', function() {
+                if ($(window).width() >= 768) {
+                    _this.show();
+                }
+            });
+        },
+
+        render: function() {
+            this.$el.html(this.template(this.data));
+            return this;
+        },
+
+        setCurTab: function(cur_tab, options) {
+            this.data.cur_tab = cur_tab || this.default_cur_tab;
+            if (options) {
+                $.extend(this.data, options);
+            }
+            this.render();
+        },
+
+        show: function() {
+            this.$el.css({ 'left':'0px' });
+        },
+
+        hide: function() {
+            this.$el.css({ 'left':'-300px' });
+        },
+
+        events: {
+            'click .js-close-side-nav': 'closeNav',
+            'click li a': 'visitLink'
+        },
+
+        closeNav: function() {
+            this.hide();
+            return false;
+        },
+
+        visitLink: function(e) {
+            if ($(window).width() < 768) {
+                this.hide();
+            }
+            return true;
+        }
+
+    });
+
+    return sideNavView;
+});
diff --git a/static/scripts/orgadmin-main.js b/static/scripts/orgadmin-main.js
new file mode 100644
index 0000000000..999bb7bd38
--- /dev/null
+++ b/static/scripts/orgadmin-main.js
@@ -0,0 +1,4 @@
+//Load common code that includes config, then load the app logic for this page.
+require(['./common'], function (common) {
+    require(['orgadmin-app/main']);
+});
diff --git a/static/scripts/sysadmin-app/collection/address-book-group.js b/static/scripts/sysadmin-app/collection/address-book-group.js
index fae902ffae..1f673667b7 100644
--- a/static/scripts/sysadmin-app/collection/address-book-group.js
+++ b/static/scripts/sysadmin-app/collection/address-book-group.js
@@ -11,10 +11,21 @@ define([
         },
 
         url: function() {
-            return Common.getUrl({
-                name: 'admin-address-book-group',
-                group_id: this.options.group_id
-            });
+            var url_options;
+            if (app.pageOptions.org_id) { // org admin
+                url_options = {
+                    name: 'org-admin-address-book-group',
+                    org_id: app.pageOptions.org_id,
+                    group_id: this.options.group_id
+                };
+            } else {
+                url_options = {
+                    name: 'admin-address-book-group',
+                    group_id: this.options.group_id
+                };
+            }
+
+            return Common.getUrl(url_options);
         },
 
         parse: function(data) {
diff --git a/static/scripts/sysadmin-app/collection/address-book-groups.js b/static/scripts/sysadmin-app/collection/address-book-groups.js
index b86db627b4..4b51150bb4 100644
--- a/static/scripts/sysadmin-app/collection/address-book-groups.js
+++ b/static/scripts/sysadmin-app/collection/address-book-groups.js
@@ -7,7 +7,18 @@ define([
 
     var collection = Backbone.Collection.extend({
         url: function() {
-            return Common.getUrl({name: 'admin-address-book-groups'});
+            var url_options;
+            if (app.pageOptions.org_id) { // org admin
+                url_options = {
+                    name: 'org-admin-address-book-groups',
+                    org_id: app.pageOptions.org_id
+                };
+            } else {
+                url_options = {
+                    name: 'admin-address-book-groups'
+                };
+            }
+            return Common.getUrl(url_options);
         },
 
         parse: function(data) {
diff --git a/static/scripts/sysadmin-app/collection/group-repos.js b/static/scripts/sysadmin-app/collection/group-repos.js
index 4fec1500fe..ac96693b9c 100644
--- a/static/scripts/sysadmin-app/collection/group-repos.js
+++ b/static/scripts/sysadmin-app/collection/group-repos.js
@@ -21,7 +21,20 @@ define([
         },
 
         url: function () {
-            return Common.getUrl({name: 'admin-group-libraries', group_id: this.group_id});
+            var url_options = {
+                group_id: this.group_id
+            };
+            if (app.pageOptions.org_id) { // org admin
+                $.extend(url_options, {
+                    name: 'org-admin-group-libraries',
+                    org_id: app.pageOptions.org_id
+                });
+            } else {
+                $.extend(url_options, {
+                    name: 'admin-group-libraries'
+                });
+            }
+            return Common.getUrl(url_options);
         }
     });
 
diff --git a/static/scripts/sysadmin-app/views/address-book-group-item.js b/static/scripts/sysadmin-app/views/address-book-group-item.js
index f90f0475d7..b2fa275dcf 100644
--- a/static/scripts/sysadmin-app/views/address-book-group-item.js
+++ b/static/scripts/sysadmin-app/views/address-book-group-item.js
@@ -29,14 +29,25 @@ define([
         deleteGroup: function() {
             var _this = this;
             var group_name = this.model.get('name');
+            var url_options = {
+                'group_id': _this.model.get('id')
+            };
+            if (app.pageOptions.org_id) { // org admin
+                $.extend(url_options, {
+                    'name':'org-admin-address-book-group',
+                    'org_id': app.pageOptions.org_id
+                });
+            } else {
+                $.extend(url_options, {
+                    'name':'admin-address-book-group'
+                });
+            }
+
             var popupTitle = gettext("Delete Department");
             var popupContent = gettext("Are you sure you want to delete %s ?").replace('%s', '<span class="op-target ellipsis ellipsis-op-target" title="' + Common.HTMLescape(group_name) + '">' + Common.HTMLescape(group_name) + '</span>');
             var yesCallback = function() {
                 $.ajax({
-                    url: Common.getUrl({
-                        'name':'admin-address-book-group',
-                        'group_id': _this.model.get('id')
-                    }),
+                    url: Common.getUrl(url_options),
                     type: 'DELETE',
                     cache: false,
                     beforeSend: Common.prepareCSRFToken,
@@ -81,12 +92,23 @@ define([
                     return false;
                 }
 
-                Common.disableButton($submitBtn);
-                $.ajax({
-                    url: Common.getUrl({
+                var url_options;
+                if (app.pageOptions.org_id) { // org admin
+                    url_options = {
+                        'name':'org-admin-group',
+                        'org_id': app.pageOptions.org_id,
+                        'group_id': model.get('id')
+                    };
+                } else {
+                    url_options = {
                         'name':'admin-group',
                         'group_id': model.get('id')
-                    }),
+                    };
+                }
+
+                Common.disableButton($submitBtn);
+                $.ajax({
+                    url: Common.getUrl(url_options),
                     type: 'PUT',
                     cache: false,
                     beforeSend: Common.prepareCSRFToken,
diff --git a/static/scripts/sysadmin-app/views/address-book-group-library.js b/static/scripts/sysadmin-app/views/address-book-group-library.js
index b507441855..6043c458c7 100644
--- a/static/scripts/sysadmin-app/views/address-book-group-library.js
+++ b/static/scripts/sysadmin-app/views/address-book-group-library.js
@@ -30,12 +30,23 @@ define([
             var popupTitle = gettext("Delete Library");
             var popupContent = gettext("Are you sure you want to delete %s ?").replace('%s', '<span class="op-target ellipsis ellipsis-op-target" title="' + Common.HTMLescape(repo_name) + '">' + Common.HTMLescape(repo_name) + '</span>');
             var yesCallback = function() {
+                var url_options = {
+                    group_id: _this.group_id,
+                    repo_id: _this.model.get('repo_id')
+                };
+                if (app.pageOptions.org_id) { // org admin
+                    $.extend(url_options, {
+                        name: 'org-admin-group-owned-library',
+                        org_id: app.pageOptions.org_id
+                    });
+                } else {
+                    $.extend(url_options, {
+                        name: 'admin-group-owned-library'
+                    });
+                }
+
                 $.ajax({
-                    url: Common.getUrl({
-                        'name': 'admin-group-owned-library',
-                        'group_id': _this.group_id,
-                        'repo_id': _this.model.get('repo_id')
-                    }),
+                    url: Common.getUrl(url_options),
                     type: 'DELETE',
                     beforeSend: Common.prepareCSRFToken,
                     dataType: 'json',
diff --git a/static/scripts/sysadmin-app/views/address-book-group.js b/static/scripts/sysadmin-app/views/address-book-group.js
index a4f70ee77d..81e7c65fac 100644
--- a/static/scripts/sysadmin-app/views/address-book-group.js
+++ b/static/scripts/sysadmin-app/views/address-book-group.js
@@ -3,13 +3,15 @@ define([
     'underscore',
     'backbone',
     'common',
+    'select2',
     'sysadmin-app/views/address-book-group-item',
     'sysadmin-app/views/group-member',
     'sysadmin-app/views/address-book-group-library',
     'sysadmin-app/collection/address-book-group',
     'sysadmin-app/collection/group-repos'
-], function($, _, Backbone, Common, GroupItemView, MemberItemView,
-    LibItemView, GroupCollection, GroupRepoCollection) {
+], function($, _, Backbone, Common, Select2,
+    GroupItemView, MemberItemView, LibItemView,
+    GroupCollection, GroupRepoCollection) {
     'use strict';
 
     var view = Backbone.View.extend({
@@ -107,18 +109,28 @@ define([
                 var $error = $('.error', $form);
                 var $submitBtn = $('[type="submit"]', $form);
 
+
                 if (!group_name) {
                     $error.html(gettext("Name is required.")).show();
                     return false;
                 }
 
+                var url_options;
+                if (app.pageOptions.org_id) { // org admin
+                    url_options = {
+                        name: 'org-admin-address-book-groups',
+                        org_id: app.pageOptions.org_id
+                    };
+                } else {
+                    url_options = {
+                        name: 'admin-address-book-groups'
+                    };
+                }
+
                 $error.hide();
                 Common.disableButton($submitBtn);
-
                 $.ajax({
-                    url: Common.getUrl({
-                        'name': 'admin-address-book-groups'
-                    }),
+                    url: Common.getUrl(url_options),
                     type: 'POST',
                     cache: false,
                     data: {
@@ -170,14 +182,25 @@ define([
                     return false;
                 }
 
+                var url_options;
+                if (app.pageOptions.org_id) { // org admin
+                    url_options = {
+                        name: 'org-admin-group-members',
+                        org_id: app.pageOptions.org_id,
+                        group_id: _this.options.group_id
+                    };
+                } else {
+                    url_options = {
+                        name: 'admin-group-members',
+                        group_id: _this.options.group_id
+                    };
+                }
+
                 $error.hide();
                 Common.disableButton($submitBtn);
 
                 $.ajax({
-                    url: Common.getUrl({
-                        'name': 'admin-group-members',
-                        'group_id': _this.options.group_id
-                    }),
+                    url: Common.getUrl(url_options),
                     type: 'POST',
                     dataType: 'json',
                     data: {'email': emails.split(',')},
@@ -233,11 +256,22 @@ define([
                 $error.hide();
                 Common.disableButton($submitBtn);
 
+                var url_options = { 
+                    group_id: _this.options.group_id
+                };
+                if (app.pageOptions.org_id) { // org admin
+                    $.extend(url_options, {
+                        name: 'org-admin-group-owned-libraries',
+                        org_id: app.pageOptions.org_id
+                    });
+                } else {
+                    $.extend(url_options, {
+                        name: 'admin-group-owned-libraries'
+                    });
+                }
+
                 $.ajax({
-                    url: Common.getUrl({
-                        'name': 'admin-group-owned-libraries',
-                        'group_id': _this.options.group_id
-                    }),
+                    url: Common.getUrl(url_options),
                     type: 'POST',
                     dataType: 'json',
                     data: {'repo_name': name},
@@ -321,7 +355,10 @@ define([
         },
 
         addLibrary: function(item, collection, options) {
-            var view = new LibItemView({model: item, group_id: this.options.group_id});
+            var view = new LibItemView({
+                model: item,
+                group_id: this.options.group_id
+            });
             if (options.prepend) {
                 this.$libsTableBody.prepend(view.render().el);
             } else {
diff --git a/static/scripts/sysadmin-app/views/group-member.js b/static/scripts/sysadmin-app/views/group-member.js
index 386387938f..62e79ac7a9 100644
--- a/static/scripts/sysadmin-app/views/group-member.js
+++ b/static/scripts/sysadmin-app/views/group-member.js
@@ -24,6 +24,23 @@ define([
             HLItemView.prototype.initialize.call(this);
             this.listenTo(this.model, 'change', this.render);
 
+            var url_options = {
+                'group_id': this.model.get('group_id'),
+                'email': this.model.get('email')
+            };
+            if (app.pageOptions.org_id) { // org admin
+                $.extend(url_options, {
+                    'name': 'org-admin-group-member',
+                    'org_id': app.pageOptions.org_id
+                });
+            } else {
+                $.extend(url_options, {
+                    'name': 'admin-group-member'
+                });
+            }
+            this.url_options = url_options;
+
+
             var _this = this;
             $(document).on('click', function(e) {
                 var target = e.target || event.srcElement;
@@ -45,12 +62,9 @@ define([
             // '0': member, '1': admin
             var val = this.$('[name="role"]').val();
             var is_admin = val == 1 ? true : false;
+
             $.ajax({
-                url: Common.getUrl({
-                    'name': 'admin-group-member',
-                    'group_id': _this.model.get('group_id'),
-                    'email': _this.model.get('email')
-                }),
+                url: Common.getUrl(this.url_options),
                 type: 'put',
                 dataType: 'json',
                 beforeSend: Common.prepareCSRFToken,
@@ -77,11 +91,7 @@ define([
             var popupContent = gettext("Are you sure you want to delete %s ?").replace('%s', '<span class="op-target ellipsis ellipsis-op-target" title="' + Common.HTMLescape(email) + '">' + Common.HTMLescape(email) + '</span>');
             var yesCallback = function() {
                 $.ajax({
-                    url: Common.getUrl({
-                        'name': 'admin-group-member',
-                        'group_id': _this.model.get('group_id'),
-                        'email': email
-                    }),
+                    url: Common.getUrl(_this.url_options),
                     type: 'DELETE',
                     beforeSend: Common.prepareCSRFToken,
                     dataType: 'json',