Improving sidemenu for angular app

5 files changed, 137 insertions, 51 deletions

diff --git a/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/app.module.ts b/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/app.module.ts
index 451e0951d..8c7786ae2 100644
--- a/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/app.module.ts
+++ b/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/app.module.ts
@@ -32,6 +32,7 @@ import { SidemenuComponent } from './modules/general/sidemenu/sidemenu.component
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import { LoginComponent } from './modules/general/login/login.component';
 import { ViewPermissionDirective } from './directives/view-permission.directive';
+import { NavSubgroupDirective } from './directives/nav-subgroup.directive';
 
 @NgModule({
   declarations: [
@@ -43,6 +44,7 @@ import { ViewPermissionDirective } from './directives/view-permission.directive'
     SidemenuComponent,
     LoginComponent,
     ViewPermissionDirective,
+    NavSubgroupDirective,
   ],
   imports: [
     BrowserModule,
diff --git a/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/directives/nav-subgroup.directive.spec.ts b/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/directives/nav-subgroup.directive.spec.ts
new file mode 100644
index 000000000..295d6c076
--- /dev/null
+++ b/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/directives/nav-subgroup.directive.spec.ts
@@ -0,0 +1,26 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { NavSubgroupDirective } from './nav-subgroup.directive';
+
+describe('NavSubgroupDirective', () => {
+  it('should create an instance', () => {
+    const directive = new NavSubgroupDirective();
+    expect(directive).toBeTruthy();
+  });
+});
diff --git a/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/directives/nav-subgroup.directive.ts b/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/directives/nav-subgroup.directive.ts
new file mode 100644
index 000000000..49c33dc49
--- /dev/null
+++ b/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/directives/nav-subgroup.directive.ts
@@ -0,0 +1,52 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {Directive, ElementRef, HostListener, Renderer2} from '@angular/core';
+
+/**
+ * Used to mark a div element as navigation subgroup. If a navigation element is clicked,
+ * it searches the siblings of the div element for activated children and deactivates them.
+ * This is a workaround for a bootstrap issue, when nav-items are collected in div elements.
+ */
+@Directive({
+  selector: '[appNavSubgroup]'
+})
+export class NavSubgroupDirective {
+
+  constructor(private renderer : Renderer2, private el : ElementRef) { }
+
+  @HostListener('click')
+  onClick() {
+    let actionEl = this.el.nativeElement;
+    let divElements = actionEl.parentElement.querySelectorAll("div[class~='nav']");
+    if (divElements != null) {
+      for (let divEl of divElements) {
+        if (divEl != actionEl) {
+          let actionElements = divEl.querySelectorAll("a[class~='active']");
+          if (actionElements != null) {
+            for (let activeEl of actionElements) {
+              this.renderer.removeClass(activeEl, "active");
+            }
+          }
+        }
+      }
+    }
+  }
+
+
+}
diff --git a/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/directives/view-permission.directive.ts b/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/directives/view-permission.directive.ts
index 70aeadb1a..f9990d567 100644
--- a/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/directives/view-permission.directive.ts
+++ b/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/directives/view-permission.directive.ts
@@ -19,7 +19,8 @@
 import {Directive, ElementRef, Input, OnChanges, OnInit, Renderer2, SimpleChanges} from '@angular/core';
 
 /**
- * This directive can be used to render based on permissions
+ * This directive can be used to render a element based on permissions. Sets the 'd-none' class for the
+ * element, if the permission returns 'false'.
  */
 @Directive({
     selector: '[appViewPermission]'
diff --git a/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/modules/general/sidemenu/sidemenu.component.html b/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/modules/general/sidemenu/sidemenu.component.html
index c394e899f..d023167f9 100644
--- a/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/modules/general/sidemenu/sidemenu.component.html
+++ b/archiva-modules/archiva-web/archiva-webapp/src/main/archiva-web/src/app/modules/general/sidemenu/sidemenu.component.html
@@ -18,57 +18,62 @@
 -->
 <nav class="nav flex-column nav-pills " role="tablist" aria-orientation="vertical">
 
-  <div [appViewPermission]="perms.menu.repo.section">
-  <a  class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" >Artifacts</a>
+    <div class="nav flex-column nav-pills" appNavSubgroup role="tablist" aria-orientation="vertical"
+         [appViewPermission]="perms.menu.repo.section">
+        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Artifacts</a>
 
-  <a  class="nav-link active my-0 py-0" href="#" data-toggle="pill"
-     role="tab" aria-controls="v-pills-search" aria-selected="true" >Search</a>
+        <a class="nav-link active my-0 py-0" id="repo-search" href="#repo-search" data-toggle="pill"
+           [appViewPermission]="perms.menu.repo.search" role="tab" aria-controls="v-pills-search" aria-selected="true">Search</a>
 
-  <a  class="nav-link my-0 py-0"  href="#" data-toggle="pill"
-     role="tab" aria-controls="v-pills-browse" aria-selected="false">Browse</a>
+        <a class="nav-link my-0 py-0" id="repo-browse" href="#repo-browse" data-toggle="pill"
+           [appViewPermission]="perms.menu.repo.browse" role="tab" aria-controls="v-pills-browse" aria-selected="false">Browse</a>
 
-  <a  class="nav-link my-0 py-0" href="#" data-toggle="pill"
-     role="tab" aria-controls="v-pills-browse" aria-selected="false"
-    [appViewPermission]="perms.menu.repo.upload">Upload Artifact</a>
-  </div>
-  <div [appViewPermission]="perms.menu.admin.section">
-  <a  class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" data-toggle="pill"
-     role="tab" aria-controls="v-pills-home" aria-selected="false" >Administration</a>
-  <a  class="nav-link my-0 py-0" href="#" data-toggle="pill"
-     role="tab" aria-controls="v-pills-browse" aria-selected="false">Repository Groups</a>
-  <a  class="nav-link my-0 py-0" href="#" data-toggle="pill"
-     role="tab" aria-controls="v-pills-browse" aria-selected="false">Repositories</a>
-  <a   class="nav-link my-0 py-0" href="#" data-toggle="pill"
-     role="tab" aria-controls="v-pills-browse" aria-selected="false">Proxy Connectors</a>
-  <a   class="nav-link my-0 py-0" href="#" data-toggle="pill"
-     role="tab" aria-controls="v-pills-browse" aria-selected="false">ProxyConnector Rules</a>
-  <a   class="nav-link my-0 py-0" href="#" data-toggle="pill"
-     role="tab" aria-controls="v-pills-browse" aria-selected="false">Network Proxies</a>
-  <a   class="nav-link my-0 py-0" href="#" data-toggle="pill"
-     role="tab" aria-controls="v-pills-browse" aria-selected="false">Repository Scanning</a>
-  <a   class="nav-link my-0 py-0" href="#" data-toggle="pill"
-     role="tab" aria-controls="v-pills-browse" aria-selected="false">Runtime Configuration</a>
-  <a   class="nav-link my-0 py-0" href="#" data-toggle="pill"
-     role="tab" aria-controls="v-pills-browse" aria-selected="false">System Status</a>
-  <a   class="nav-link my-0 py-0" href="#" data-toggle="pill"
-     role="tab" aria-controls="v-pills-browse" aria-selected="false">UI Configuration</a>
-  <a   class="nav-link my-0 py-0" href="#" data-toggle="pill"
-     role="tab" aria-controls="v-pills-browse" aria-selected="false">Reports</a>
-  </div>
-  <div [appViewPermission]="perms.menu.user.section">
-  <a  class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" data-toggle="pill"
-     role="tab" aria-controls="v-pills-home" aria-selected="false">Users</a>
-  <a   class="nav-link my-0 py-0" href="#" data-toggle="pill"
-     role="tab" aria-controls="v-pills-browse" aria-selected="false">Manage</a>
-  <a   class="nav-link my-0 py-0" href="#" data-toggle="pill"
-     role="tab" aria-controls="v-pills-browse" aria-selected="false">Roles</a>
-  <a   class="nav-link my-0 py-0" href="#" data-toggle="pill"
-     role="tab" aria-controls="v-pills-browse" aria-selected="false">Users Runtime Configuration</a>
-  </div>
-  <a  class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" data-toggle="pill"
-     role="tab" aria-controls="v-pills-home" aria-selected="false">Documentation</a>
-  <a   class="nav-link my-0 py-0" href="#" data-toggle="pill"
-     role="tab" aria-controls="v-pills-browse" aria-selected="false">REST Api</a>
-  <a   class="nav-link my-0 py-0" href="#" data-toggle="pill"
-     role="tab" aria-controls="v-pills-browse" aria-selected="false">User Documentation</a>
+        <a class="nav-link my-0 py-0" id="repo-upload" href="#repo-upload" data-toggle="pill"
+           role="tab" aria-controls="v-pills-browse" aria-selected="false"
+           [appViewPermission]="perms.menu.repo.upload">Upload Artifact</a>
+    </div>
+    <div class="nav flex-column nav-pills" appNavSubgroup aria-orientation="vertical" role="tablist"
+         [appViewPermission]="perms.menu.admin.section">
+        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"
+           role="tab" aria-controls="v-pills-home" aria-selected="false">Administration</a>
+        <a class="nav-link my-0 py-0" id="admin-groups" href="#admin-groups" data-toggle="pill"
+           [appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">Repository Groups</a>
+        <a class="nav-link my-0 py-0" id="admin-repos" href="#admin-repos" data-toggle="pill"
+           [appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">Repositories</a>
+        <a class="nav-link my-0 py-0" id="admin-proxy-conn" href="#admin-proxy-conn" data-toggle="pill"
+           [appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">Proxy Connectors</a>
+        <a class="nav-link my-0 py-0" id="admin-proxy-conn-rules" href="#admin-proxy-conn-rules" data-toggle="pill"
+           [appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">ProxyConnector Rules</a>
+        <a class="nav-link my-0 py-0" id="admin-network-proxy" href="#admin-network-proxy" data-toggle="pill"
+           [appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">Network Proxies</a>
+        <a class="nav-link my-0 py-0" id="admin-repo-scan" href="#admin-repo-scan" data-toggle="pill"
+           [appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">Repository Scanning</a>
+        <a class="nav-link my-0 py-0" id="admin-runtime-configuration" href="#admin-runtime-configuration"
+           data-toggle="pill"
+           [appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">Runtime Configuration</a>
+        <a class="nav-link my-0 py-0" id="admin-ui-configuration" href="#admin-ui-configuration" data-toggle="pill"
+         [appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">UI Configuration</a>
+        <a class="nav-link my-0 py-0" id="admin-status" href="#admin-status" data-toggle="pill"
+           [appViewPermission]="perms.menu.admin.status" role="tab" aria-controls="v-pills-browse" aria-selected="false">System Status</a>
+        <a class="nav-link my-0 py-0" id="admin-reports" href="#admin-reports" data-toggle="pill"
+           [appViewPermission]="perms.menu.admin.reports" role="tab" aria-controls="v-pills-browse" aria-selected="false">Reports</a>
+    </div>
+    <div class="nav flex-column nav-pills" appNavSubgroup [appViewPermission]="perms.menu.user.section">
+        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" data-toggle="pill"
+           role="tab" aria-controls="v-pills-home" aria-selected="false">Users</a>
+        <a class="nav-link my-0 py-0" id="users-manage" href="#users-manage" data-toggle="pill"
+           role="tab" aria-controls="v-pills-browse" aria-selected="false">Manage</a>
+        <a class="nav-link my-0 py-0" id="users-roles" href="#users-roles" data-toggle="pill"
+           role="tab" aria-controls="v-pills-browse" aria-selected="false">Roles</a>
+        <a class="nav-link my-0 py-0" id="users-configuration" href="#users-configuration" data-toggle="pill"
+           role="tab" aria-controls="v-pills-browse" aria-selected="false">Users Runtime Configuration</a>
+    </div>
+    <div class="nav flex-column nav-pills" appNavSubgroup>
+        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" data-toggle="pill"
+           role="tab" aria-controls="v-pills-home" aria-selected="false">Documentation</a>
+        <a class="nav-link my-0 py-0" id="doc-rest-api" href="#doc-rest-api" data-toggle="pill"
+           role="tab" aria-controls="v-pills-browse" aria-selected="false">REST Api</a>
+        <a class="nav-link my-0 py-0" id="doc-userdoc" href="#doc-userdoc" data-toggle="pill"
+           role="tab" aria-controls="v-pills-browse" aria-selected="false">User Documentation</a>
+    </div>
 </nav>