Merge pull request #430 from medizininformatik-initiative/368-add-link-to-proposal-portal

368 add link to proposal portal

Author: Shayan1375

src/app/layout/components/header/header.component.html

@@ -8,15 +8,19 @@
         hideSingleSelectionIndicator
         [placeholder]="profile?.info.name ? profile?.info.name : profile?.info.preferred_username"
       >
-        <mat-option (click)="logout()">
-          <fa-icon class="circle" size="lg" [fixedWidth]="true" [icon]="'sign-out-alt'"></fa-icon>
-          Logout
-        </mat-option>
         <mat-option (click)="getActuatorInfo()">
           <fa-icon class="circle" size="lg" [fixedWidth]="true" [icon]="'info'"></fa-icon>
-          About
+          {{ 'APPLAYOUT.HEADER.ABOUT' | translate }}
+        </mat-option>
+        <mat-option (click)="logout()">
+          <fa-icon class="circle" size="lg" [fixedWidth]="true" [icon]="'sign-out-alt'"></fa-icon>
+          {{ 'APPLAYOUT.HEADER.LOGOUT' | translate }}
         </mat-option>
       </mat-select>
     </mat-form-field>
+    <span class="link-like" (click)="navigateToProposalPortal()">
+      {{ 'APPLAYOUT.HEADER.PROPOSAL_PORTAL' | translate }}
+      <fa-icon size="1x" icon="external-link-alt"></fa-icon>
+    </span>
   </div>
 </mat-toolbar>

src/app/layout/components/header/header.component.scss

@@ -3,6 +3,7 @@
   font-size: 14px;
   margin: 0 0 1em 0;
 }
+
 .toolbar fa-icon {
   padding: 0 0 0 1em;
 }
@@ -13,9 +14,11 @@
   height: 105px;
   object-fit: cover;
 }
+
 .mat-toolbar {
   height: 105px;
 }
+
 .mat-toolbar-single-row {
   padding-left: 0px !important;
 }
@@ -43,3 +46,22 @@
 ::ng-deep .mdc-list-item__primary-text {
   width: 100%;
 }
+
+span.link-like {
+  padding-top: 0.3em;
+  padding-left: 1em;
+  cursor: pointer;
+  color: var(--num-color--primary);
+  font-size: medium;
+  font-weight: 500;
+  text-decoration: none;
+  /* No underline by default */
+  transition: color 0.2s ease;
+}
+
+span.link-like:hover {
+  text-decoration: underline;
+  /* Show underline on hover */
+  color: #0056b3;
+  /* Darker blue on hover */
+}

src/app/layout/components/header/header.component.ts

@@ -1,11 +1,11 @@
+import { AboutModalComponent } from '../about-modal/about-modal.component';
 import { ActuatorInformationService } from 'src/app/service/Actuator/ActuatorInformation.service';
 import { AfterViewInit, Component, OnInit } from '@angular/core';
 import { FeatureProviderService } from 'src/app/service/FeatureProvider.service';
 import { FeatureService } from '../../../service/Feature.service';
 import { IUserProfile } from '../../../shared/models/user/user-profile.interface';
-import { OAuthService } from 'angular-oauth2-oidc';
 import { MatDialog } from '@angular/material/dialog';
-import { AboutModalComponent } from '../about-modal/about-modal.component';
+import { OAuthService } from 'angular-oauth2-oidc';
 
 @Component({
   selector: 'num-dataportal-header',
@@ -17,6 +17,7 @@ export class HeaderComponent implements OnInit, AfterViewInit {
   stylesheet: string;
   urlSrc: string;
   urlAlt: string;
+  proposalPortalLink: string;
 
   constructor(
     private oauthService: OAuthService,
@@ -47,4 +48,9 @@ export class HeaderComponent implements OnInit, AfterViewInit {
   public getActuatorInfo() {
     this.matDialog.open(AboutModalComponent, {});
   }
+
+  public navigateToProposalPortal() {
+    this.proposalPortalLink = this.featureService.getProposalPortalLink();
+    window.open(this.proposalPortalLink, '_blank');
+  }
 }

src/app/layout/font-awesome-icons.ts

@@ -1,11 +1,4 @@
-import {
-  faAngleDoubleLeft,
-  faArrowRight,
-  faExclamation,
-  faExclamationTriangle,
-  faFolderOpen,
-} from '@fortawesome/free-solid-svg-icons';
-import { faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons';
+import { faAngleDoubleRight, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import { faArrowDown } from '@fortawesome/free-solid-svg-icons';
 import { faArrowUp } from '@fortawesome/free-solid-svg-icons';
@@ -16,6 +9,7 @@ import { faCheckCircle } from '@fortawesome/free-solid-svg-icons';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import { faCircle } from '@fortawesome/free-solid-svg-icons';
+import { faClipboardList } from '@fortawesome/free-solid-svg-icons';
 import { faCog } from '@fortawesome/free-solid-svg-icons';
 import { faCubes } from '@fortawesome/free-solid-svg-icons';
 import { faDna } from '@fortawesome/free-solid-svg-icons';
@@ -25,10 +19,13 @@ import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import { faEye } from '@fortawesome/free-solid-svg-icons';
 import { faFile, faFileImage, faWindowMinimize } from '@fortawesome/free-solid-svg-icons';
 import { faFileUpload } from '@fortawesome/free-solid-svg-icons';
+import { faFilter } from '@fortawesome/free-solid-svg-icons';
 import { faFolder } from '@fortawesome/free-solid-svg-icons';
 import { faGlobeEurope } from '@fortawesome/free-solid-svg-icons';
 import { faGreaterThan } from '@fortawesome/free-solid-svg-icons';
 import { faGreaterThanEqual } from '@fortawesome/free-solid-svg-icons';
+import { faInfo } from '@fortawesome/free-solid-svg-icons';
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { faLessThan } from '@fortawesome/free-solid-svg-icons';
 import { faLessThanEqual } from '@fortawesome/free-solid-svg-icons';
 import { faLink } from '@fortawesome/free-solid-svg-icons';
@@ -52,10 +49,13 @@ import { faUser } from '@fortawesome/free-solid-svg-icons';
 import { faUsersCog } from '@fortawesome/free-solid-svg-icons';
 import { faWindowClose } from '@fortawesome/free-solid-svg-icons';
 import { faWrench } from '@fortawesome/free-solid-svg-icons';
-import { faFilter } from '@fortawesome/free-solid-svg-icons';
-import { faClipboardList } from '@fortawesome/free-solid-svg-icons';
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
-import { faInfo } from '@fortawesome/free-solid-svg-icons';
+import {
+  faAngleDoubleLeft,
+  faArrowRight,
+  faExclamation,
+  faExclamationTriangle,
+  faFolderOpen,
+} from '@fortawesome/free-solid-svg-icons';
 import {
   faClone,
   faDatabase,
@@ -133,4 +133,6 @@ export const FONT_AWESOME_ICONS = [
   faExclamationTriangle,
   faInfoCircle,
   faInfo,
+  faLink,
+  faExternalLinkAlt,
 ];

src/assets/i18n/de.json

@@ -5,6 +5,11 @@
     },
     "TOGGLE": {
       "LABEL": "Seitennavigation umschalten"
+    },
+    "HEADER": {
+      "PROPOSAL_PORTAL": "Antragsportal",
+      "ABOUT": "Über das Portal",
+      "LOGOUT": "Abmelden"
     }
   },
   "DATAQUERY": {
@@ -27,7 +32,9 @@
         "NEW_DATASELECTION": "Neue Merkmalselektion",
         "UPLOAD": "Datendefinition hochladen"
       },
-      "EMPTY": "Sie haben noch keine Merkmalselektion definiert. Laden Sie eine existierende Merkmalselektion oder erstellen Sie eine neue Merkmalselektion.",
+      "EDITOR": {
+        "EMPTY": "Sie haben noch keine Merkmalselektion definiert. Laden Sie eine existierende Merkmalselektion oder erstellen Sie eine neue Merkmalselektion."
+      },
       "ERROR": {
         "DOWNLOAD": "Es wurde keine Kohorte definiert, Download nicht möglich.",
         "UPLOAD": "In der hochgeladenen Datei wurde keine Kohorte definiert."
@@ -384,4 +391,4 @@
       "SEARCH": "Machbarkeitsabfrage - Suche"
     }
   }
-}
+}