Improving navigation for angular app

This commit is contained in:
Martin Stockhammer 2020-11-04 22:51:21 +01:00
parent b1c436ae55
commit 80fd9b5cf9
17 changed files with 425 additions and 43 deletions

View File

@ -24,9 +24,20 @@ import { ContactComponent } from './modules/general/contact/contact.component';
import { HomeComponent } from './modules/general/home/home.component';
import { NotFoundComponent } from './modules/general/not-found/not-found.component';
import { LoginComponent } from "./modules/general/login/login.component";
import { SearchComponent } from './modules/repo/search/search.component';
import {BrowseComponent} from "./modules/repo/browse/browse.component";
import {UploadComponent} from "./modules/repo/upload/upload.component";
const routes: Routes = [
{ path: '', component: HomeComponent, },
{ path: '', component: HomeComponent,
children: [
{path:'repo/search', component: SearchComponent},
{path:'repo/browse', component: BrowseComponent},
{path:'repo/upload', component: UploadComponent},
{path:'', redirectTo:'repo/search', pathMatch:'full'},
{path:'**', component: NotFoundComponent}
]},
{ path: 'contact', component: ContactComponent },
{ path: 'about', component: AboutComponent },
{ path: 'login', component: LoginComponent },

View File

@ -33,6 +33,10 @@ 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';
import { SearchComponent } from './modules/repo/search/search.component';
import { BrowseComponent } from './modules/repo/browse/browse.component';
import { UploadComponent } from './modules/repo/upload/upload.component';
@NgModule({
declarations: [
@ -45,6 +49,9 @@ import { NavSubgroupDirective } from './directives/nav-subgroup.directive';
LoginComponent,
ViewPermissionDirective,
NavSubgroupDirective,
SearchComponent,
BrowseComponent,
UploadComponent,
],
imports: [
BrowserModule,

View File

@ -21,6 +21,6 @@
<app-sidemenu></app-sidemenu>
</div>
<div class="col-10">
2 of 2
<router-outlet></router-outlet>
</div>
</div>

View File

@ -20,60 +20,55 @@
<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 disabled" href="#" tabindex="-1" aria-disabled="true">{{'sidemenu.repo.section'|translate}}</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" id="repo-search" routerLink="/repo/search" routerLinkActive="active" data-toggle="pill"
[appViewPermission]="perms.menu.repo.search" role="tab" aria-controls="v-pills-search" aria-selected="true">{{'sidemenu.repo.search'|translate}}</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" id="repo-browse" routerLink="/repo/browse" routerLinkActive="active" data-toggle="pill"
[appViewPermission]="perms.menu.repo.browse" role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.repo.browse'|translate}}</a>
<a class="nav-link my-0 py-0" id="repo-upload" href="#repo-upload" data-toggle="pill"
<a class="nav-link my-0 py-0" id="repo-upload" routerLink="/repo/upload" routerLinkActive="active" data-toggle="pill"
role="tab" aria-controls="v-pills-browse" aria-selected="false"
[appViewPermission]="perms.menu.repo.upload">Upload Artifact</a>
[appViewPermission]="perms.menu.repo.upload">{{'sidemenu.repo.upload'|translate}}</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>
role="tab" aria-controls="v-pills-home" aria-selected="false">{{'sidemenu.admin.section'|translate}}</a>
<a class="nav-link my-0 py-0" id="admin-repos" routerLink="/admin/repositories" data-toggle="pill"
[appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.admin.repositories'|translate}}</a>
<a class="nav-link my-0 py-0" id="admin-groups" routerLink="/admin/repositorygroups" data-toggle="pill"
[appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.admin.repositorygroups'|translate}}</a>
<a class="nav-link my-0 py-0" id="admin-proxy-conn" routerLink="/admin/proxy" data-toggle="pill"
[appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.admin.proxy'|translate}}</a>
<a class="nav-link my-0 py-0" id="admin-network-proxy" routerLink="/admin/network" data-toggle="pill"
[appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.admin.network'|translate}}</a>
<a class="nav-link my-0 py-0" id="admin-repo-scan" routerLink="/admin/scanning" data-toggle="pill"
[appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.admin.scanning'|translate}}</a>
<a class="nav-link my-0 py-0" id="admin-runtime-configuration" routerLink="/admin/runtimeconfig" data-toggle="pill"
[appViewPermission]="perms.menu.admin.config" role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.admin.runtimeconfig'|translate}}</a>
<a class="nav-link my-0 py-0" id="admin-status" routerLink="/admin/status" data-toggle="pill"
[appViewPermission]="perms.menu.admin.status" role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.admin.status'|translate}}</a>
<a class="nav-link my-0 py-0" id="admin-reports" routerLink="/admin/reports" data-toggle="pill"
[appViewPermission]="perms.menu.admin.reports" role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.admin.reports'|translate}}</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>
role="tab" aria-controls="v-pills-home" aria-selected="false">{{'sidemenu.user.section'|translate}}</a>
<a class="nav-link my-0 py-0" id="users-manage" routerLink="/user/users" data-toggle="pill"
role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.user.users'|translate}}</a>
<a class="nav-link my-0 py-0" id="users-roles" routerLink="/user/roles" data-toggle="pill"
role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.user.roles'|translate}}</a>
<a class="nav-link my-0 py-0" id="users-configuration" routerLink="/user/config" data-toggle="pill"
role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.user.config'|translate}}</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>
role="tab" aria-controls="v-pills-home" aria-selected="false">{{'sidemenu.doc.section'|translate}}</a>
<a class="nav-link my-0 py-0" id="doc-userdoc" routerLink="/doc/userguide" data-toggle="pill"
role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.doc.userguide'|translate}}</a>
<a class="nav-link my-0 py-0" id="doc-rest-api" routerLink="/user/restapi" data-toggle="pill"
role="tab" aria-controls="v-pills-browse" aria-selected="false">{{'sidemenu.doc.restapi'|translate}}</a>
</div>
</nav>

View File

@ -0,0 +1,19 @@
<!--
~ 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.
-->
<p>browse works!</p>

View File

@ -0,0 +1,18 @@
/*!
* 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.
*/

View File

@ -0,0 +1,43 @@
/*
* 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 { ComponentFixture, TestBed } from '@angular/core/testing';
import { BrowseComponent } from './browse.component';
describe('BrowseComponent', () => {
let component: BrowseComponent;
let fixture: ComponentFixture<BrowseComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ BrowseComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(BrowseComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,33 @@
/*
* 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 { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-browse',
templateUrl: './browse.component.html',
styleUrls: ['./browse.component.scss']
})
export class BrowseComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

View File

@ -0,0 +1,19 @@
<!--
~ 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.
-->
<p>Search Repositories</p>

View File

@ -0,0 +1,18 @@
/*!
* 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.
*/

View File

@ -0,0 +1,43 @@
/*
* 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 { ComponentFixture, TestBed } from '@angular/core/testing';
import { SearchComponent } from './search.component';
describe('SearchComponent', () => {
let component: SearchComponent;
let fixture: ComponentFixture<SearchComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ SearchComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(SearchComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,33 @@
/*
* 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 { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

View File

@ -0,0 +1,19 @@
<!--
~ 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.
-->
<p>upload works!</p>

View File

@ -0,0 +1,18 @@
/*!
* 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.
*/

View File

@ -0,0 +1,43 @@
/*
* 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 { ComponentFixture, TestBed } from '@angular/core/testing';
import { UploadComponent } from './upload.component';
describe('UploadComponent', () => {
let component: UploadComponent;
let fixture: ComponentFixture<UploadComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ UploadComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(UploadComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,33 @@
/*
* 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 { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-upload',
templateUrl: './upload.component.html',
styleUrls: ['./upload.component.scss']
})
export class UploadComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

View File

@ -15,6 +15,36 @@
"about": "About",
"contact": "Contact"
},
"sidemenu": {
"repo": {
"section": "Artifacts",
"search": "Search Artifacts",
"browse": "Browse Repositories",
"upload": "Upload Artifacts"
},
"admin": {
"section": "Administration",
"repositories": "Repositories",
"repositorygroups": "Repository Groups",
"proxy": "Proxy",
"network": "Network",
"scanning": "Repository Scanning",
"runtimeconfig": "Runtime Configuration",
"status": "System Status",
"reports": "Reports"
},
"user": {
"section": "User",
"users": "Manage Users",
"roles":"Manage Roles",
"config": "Security Configuration"
},
"doc": {
"section": "Documentation",
"userguide": "User Guide",
"restapi": "REST API"
}
},
"api" : {
"rb.auth.invalid_credentials": "Invalid credentials given"
}