core&ui: extensible domain & system manage sidebar

packages/hydrooj/package.json

@@ -1,6 +1,6 @@
 {
     "name": "hydrooj",
-    "version": "4.2.5",
+    "version": "4.2.6",
     "bin": "bin/hydrooj.js",
     "main": "src/plugin-api",
     "module": "src/plugin-api",

packages/hydrooj/src/interface.ts

@@ -695,7 +695,7 @@ export interface Lib extends Record<string, any> {
     problemSearch: ProblemSearch;
 }
 
-export type UIInjectableFields = 'ProblemAdd' | 'Nav' | 'UserDropdown';
+export type UIInjectableFields = 'ProblemAdd' | 'Nav' | 'UserDropdown' | 'DomainManage' | 'ControlPanel';
 export interface UI {
     template: Record<string, string>,
     nodes: Record<UIInjectableFields, any[]>,

packages/hydrooj/src/lib/ui.ts

@@ -63,6 +63,19 @@ inject('Nav', 'ranking', { prefix: 'ranking' }, PERM.PERM_VIEW_RANKING);
 inject('Nav', 'domain_dashboard', { prefix: 'domain' }, PERM.PERM_EDIT_DOMAIN);
 inject('Nav', 'manage_dashboard', { prefix: 'manage' }, PRIV.PRIV_EDIT_SYSTEM);
 inject('ProblemAdd', 'problem_create', { icon: 'add', text: 'Create Problem' });
+inject('ControlPanel', 'manage_dashboard');
+inject('ControlPanel', 'manage_script');
+inject('ControlPanel', 'manage_user_import');
+inject('ControlPanel', 'manage_user_priv');
+inject('ControlPanel', 'manage_setting');
+inject('ControlPanel', 'manage_config');
+inject('DomainManage', 'domain_dashboard', { family: 'Properties', icon: 'info' });
+inject('DomainManage', 'domain_edit', { family: 'Properties', icon: 'info' });
+inject('DomainManage', 'domain_join_applications', { family: 'Properties', icon: 'info' });
+inject('DomainManage', 'domain_role', { family: 'Access Control', icon: 'user' });
+inject('DomainManage', 'domain_user', { family: 'Access Control', icon: 'user' });
+inject('DomainManage', 'domain_permission', { family: 'Access Control', icon: 'user' });
+inject('DomainManage', 'domain_group', { family: 'Access Control', icon: 'user' });
 
 global.Hydro.ui.inject = inject;
 global.Hydro.ui.nodes = nodes as any;

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.42.1",
+  "version": "4.42.2",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "index.ts",

packages/ui-default/templates/domain_base.html

@@ -7,27 +7,18 @@
   <div class="medium-3 columns"><div data-sticky="large">
     <div class="section side">
       <ol class="menu">
-        <li class="menu__item">
-          <div class="menu__link expandable">
-            <span class="icon icon-info"></span> {{ _('Properties') }}
-          </div>
-          <ol class="menu collapsed">
-            {{ sidemenu.render_item(null, 'domain_dashboard') }}
-            {{ sidemenu.render_item(null, 'domain_edit') }}
-            {{ sidemenu.render_item(null, 'domain_join_applications') }}
-          </ol>
-        </li>
-        <li class="menu__item">
-          <div class="menu__link expandable">
-            <span class="icon icon-user"></span> {{ _('Access Control') }}
-          </div>
-          <ol class="menu collapsed">
-            {{ sidemenu.render_item(null, 'domain_role') }}
-            {{ sidemenu.render_item(null, 'domain_user') }}
-            {{ sidemenu.render_item(null, 'domain_permission') }}
-            {{ sidemenu.render_item(null, 'domain_group') }}
-          </ol>
-        </li>
+        {%- for family, items in ui.getNodes('DomainManage')|groupby('args.family') -%}
+          <li class="menu__item">
+            <div class="menu__link expandable">
+              <span class="icon icon-{{ items[0].args.icon }}"></span> {{ _(family) }}
+            </div>
+            <ol class="menu collapsed">
+              {%- for item in items -%}
+                {{ sidemenu.render_item(null, item.name) }}
+              {%- endfor -%}
+            </ol>
+          </li>
+        {% endfor %}
       </ol>
     </div>
   </div></div>

packages/ui-default/templates/manage_base.html

@@ -12,12 +12,9 @@
             <span class="icon icon-info"></span> {{ _('Properties') }}
           </div>
           <ol class="menu collapsed">
-            {{ sidemenu.render_item(null, 'manage_dashboard') }}
-            {{ sidemenu.render_item(null, 'manage_script') }}
-            {{ sidemenu.render_item(null, 'manage_user_import') }}
-            {{ sidemenu.render_item(null, 'manage_user_priv') }}
-            {{ sidemenu.render_item(null, 'manage_setting') }}
-            {{ sidemenu.render_item(null, 'manage_config') }}
+            {%- for item in ui.getNodes('ControlPanel') -%}
+              {{ sidemenu.render_item(item.icon, item.name) }}
+            {%- endfor -%}
           </ol>
         </li>
       </ol>