Upload ui

Issue-ID: PORTAL-1084

Signed-off-by: Fiete Ostkamp <Fiete.Ostkamp@telekom.de>
Change-Id: Id0c94859a775094e67b0bb9c91ca5e776a08c068

4 files changed, 254 insertions, 0 deletions

diff --git a/src/app/components/layout/sidemenu/sidemenu.component.css b/src/app/components/layout/sidemenu/sidemenu.component.css
new file mode 100644
index 0000000..23831b7
--- /dev/null
+++ b/src/app/components/layout/sidemenu/sidemenu.component.css
@@ -0,0 +1,113 @@
+/*
+ * Copyright (c) 2022. Deutsche Telekom AG
+ *
+ * Licensed 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+/* Sidebar container with nav menu */
+#sidebar-container {
+  margin-right: -1px;
+  flex: 0 0 230px;
+  border-right-style: solid;
+  border-right-width: 1px;
+  border-right-color: #b2b2b2;
+}
+
+/* Menu item*/
+.nav a {
+  height: 50px;
+  color: black;
+}
+
+/* Li elements from sidemenu. Thanks to padding is :focus pseudo-class visible for keyboard users*/
+.nav li {
+  padding: 2px;
+}
+
+/* Separators */
+.sidebar-separator-title {
+  height: 2em;
+}
+
+/* Sidebar sizes when collapsed*/
+.sidebar-collapsed {
+  min-width: 60px !important;
+  max-width: 63px !important;
+  height: auto;
+}
+
+/* Sidebar sizes when expanded*/
+.sidebar-expanded {
+  min-width: 250px;
+  max-width: 250px;
+  height: 100%;
+  display: block;
+  border-right-style: solid;
+  border-right-width: 1px;
+  border-right-color: #c5c5c5;
+}
+
+/* Hide list item and grouping item title if container sidebar is collapsed */
+.sidebar-collapsed a.nav-link span,
+.sidebar-collapsed li.sidebar-separator-title small {
+  display: none !important;
+}
+
+/* Hide grouping item icon if container sidebar is collapsed */
+.sidebar-expanded ul li.sidebar-separator-title i,
+.sidebar-expanded ul li.sidebar-separator-title img {
+  display: none !important;
+}
+
+/* Show grouping item icon if container sidebar is collapsed */
+.sidebar-collapsed ul li.sidebar-separator-title i,
+.sidebar-collapsed ul li.sidebar-separator-title img {
+  display: inline-block;
+}
+
+/* All list items */
+.nav-link {
+  border-style: none;
+  display: block !important;
+  padding: 0.75rem 1rem;
+}
+
+ul {
+  list-style-type: none;
+}
+
+.active-menu-item {
+  background-color: var(--active-gray);
+  color: black;
+  border-top-left-radius: 0.25rem !important;
+  border-bottom-left-radius: 0.25rem !important;
+  border-left: 2px solid var(--primary) !important;
+}
+
+.nav.inner li {
+  border: none;
+}
+
+.portal-version-title,
+.portal-version-number {
+  font-size: 13px;
+}
+
+img {
+  width: 18px;
+  height: 19px;
+  vertical-align: -0.125em;
+}
diff --git a/src/app/components/layout/sidemenu/sidemenu.component.html b/src/app/components/layout/sidemenu/sidemenu.component.html
new file mode 100644
index 0000000..fd97c50
--- /dev/null
+++ b/src/app/components/layout/sidemenu/sidemenu.component.html
@@ -0,0 +1,51 @@
+<!--
+  ~ Copyright (c) 2022. Deutsche Telekom AG
+  ~
+  ~ Licensed 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.
+  ~
+  ~ SPDX-License-Identifier: Apache-2.0
+  -->
+
+
+<nav
+  [class.sidebar-collapsed]="isSidebarCollapsed"
+  id="sidebar-container"
+  class="sidebar-expanded overflow-auto d-flex flex-column justify-content-between"
+  [attr.aria-label]="'layout.menu.mainMenu' | translate"
+>
+  <ul class="nav flex-column flex-nowrap" [attr.aria-label]="'layout.menu.menuItems' | translate">
+    <li class="nav-item">
+      <a #test [attr.accesskey]='ACCESS_KEY.SHORTCUT_6' class="nav-link" routerLinkActive="active-menu-item" [routerLink]="['/dashboard']">
+        <i class="bi bi-house-door mr-4" aria-hidden="true"></i>
+        <span class="d-sm-inline qa_menu_home">{{ 'layout.menu.items.dashboard' | translate }}</span></a
+      >
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" routerLinkActive="active-menu-item" [routerLink]="['/app-starter']">
+        <i class="bi bi-grid mr-4" aria-hidden="true"></i>
+        <span class="d-sm-inline qa_menu_app_starter">{{ 'layout.menu.items.appStarter' | translate }}</span></a
+      >
+    </li>
+
+    <li class="nav-item" [appHasPermissions]="'users.administration.list'">
+      <a class="nav-link" routerLinkActive="active-menu-item" routerLink="/user-administration">
+        <i class="bi bi-people mr-4" aria-hidden="true"></i>
+        <span class="d-sm-inline qa_menu_users">{{ 'layout.menu.items.users' | translate }}</span></a
+      >
+    </li>
+  </ul>
+  <div [ngClass]="isSidebarCollapsed ? 'flex-column' : 'flex-row'" class="d-flex justify-content-center text-center">
+    <h5 class="portal-version-title mr-1" id="portal-version">Portal Version:</h5>
+    <span class="portal-version-number" aria-labelledby="portal-version" (click)='test.blur()'>{{versionNumber}}</span>
+  </div>
+</nav>
diff --git a/src/app/components/layout/sidemenu/sidemenu.component.spec.ts b/src/app/components/layout/sidemenu/sidemenu.component.spec.ts
new file mode 100644
index 0000000..1067c49
--- /dev/null
+++ b/src/app/components/layout/sidemenu/sidemenu.component.spec.ts
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2022. Deutsche Telekom AG
+ *
+ * Licensed 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidemenuComponent } from './sidemenu.component';
+
+describe('SidemenuComponent', () => {
+  let component: SidemenuComponent;
+  let fixture: ComponentFixture<SidemenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [SidemenuComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SidemenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/layout/sidemenu/sidemenu.component.ts b/src/app/components/layout/sidemenu/sidemenu.component.ts
new file mode 100644
index 0000000..1f5c123
--- /dev/null
+++ b/src/app/components/layout/sidemenu/sidemenu.component.ts
@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2022. Deutsche Telekom AG
+ *
+ * Licensed 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Component, Injectable, Input } from '@angular/core';
+import { environment } from 'src/environments/environment';
+import VersionJson from 'src/assets/version.json';
+import { KeyboardShortcuts } from '../../../services/shortcut.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+@Component({
+  selector: 'app-sidemenu',
+  templateUrl: './sidemenu.component.html',
+  styleUrls: ['./sidemenu.component.css'],
+})
+export class SidemenuComponent {
+  versionNumber: string;
+
+  @Input() isSidebarCollapsed = false;
+
+  public ACCESS_KEY = KeyboardShortcuts;
+  public keycloakEditProfile = environment.keycloakEditProfile;
+  public isKpiDashboardSubMenuCollapsed = false;
+
+  constructor() {
+    this.versionNumber = VersionJson.number;
+  }
+  collapsed() {
+    this.isKpiDashboardSubMenuCollapsed = !this.isKpiDashboardSubMenuCollapsed;
+  }
+}