Merge pull request #328 from TheJacksonLaboratory/feature/feedback-form

Feature/feedback form

Author: iimpulse

src/app/app.component.html

@@ -72,4 +72,5 @@ <h3 class="center menuTitle">Menu</h3>
     <router-outlet></router-outlet>
   </div>
   <app-footer class="mat-elevation-z4"></app-footer>
+  <app-floating-feedback></app-floating-feedback>
 </mat-sidenav-container>

src/app/app.component.spec.ts

@@ -2,7 +2,6 @@ import { TestBed, waitForAsync } from '@angular/core/testing';
 import { NavbarComponent } from './shared/navbar/navbar.component';
 import { FooterComponent } from './shared/footer/footer.component';
 import { AppComponent } from './app.component';
-import { RouterTestingModule } from '@angular/router/testing';
 import { environment } from '../environments/environment';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { GlobalMaterialModules } from './shared/modules/global.module';
@@ -13,23 +12,27 @@ import { NewsService } from './shared/news/news.service';
 import { SearchModule } from './shared/search/search.module';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-
+import { FloatingFeedbackComponent } from './shared/floating-feedback/floating-feedback.component';
+import { provideRouter, RouterOutlet } from '@angular/router';
+import { provideLocationMocks } from '@angular/common/testing';
 
 describe('AppComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
     declarations: [
         AppComponent,
         NavbarComponent,
-        FooterComponent
+        FooterComponent,
+        FloatingFeedbackComponent
     ],
-    imports: [RouterTestingModule,
+    imports: [
         GlobalMaterialModules,
         FormsModule,
         ExtrasModule,
         SearchModule,
-        NoopAnimationsModule],
-    providers: [SearchService, NewsService, provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
+        NoopAnimationsModule, RouterOutlet],
+    providers: [SearchService, NewsService, provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting(), provideRouter([]), // Pass your routes here if needed
+    provideLocationMocks()]
 }).compileComponents();
   }));
 

src/app/app.module.ts

@@ -19,19 +19,27 @@ import { NoPageFoundComponent } from './error/no-page-found.component';
 import { SearchModule } from './shared/search/search.module';
 import { NewsService } from './shared/news/news.service';
 import { SafeHtmlPipe } from './shared/pipes/sanitize.pipe';
+import { FloatingFeedbackComponent } from './shared/floating-feedback/floating-feedback.component';
 
-@NgModule({ declarations: [
+@NgModule({
+    declarations: [
         AppComponent,
         NavbarComponent,
         FooterComponent,
         NoPageFoundComponent,
-        SafeHtmlPipe
+        SafeHtmlPipe,
+        FloatingFeedbackComponent
     ],
-    bootstrap: [AppComponent], imports: [BrowserModule,
+    bootstrap: [AppComponent],
+    imports: [BrowserModule,
         BrowserAnimationsModule,
         GlobalMaterialModules,
         ExtrasModule,
         RoutingModule,
-        SearchModule], providers: [SearchService, NewsService, { provide: MAT_TABS_CONFIG, useValue: { animationDuration: '0ms' } }, provideHttpClient(withInterceptorsFromDi())] })
+        SearchModule],
+    providers: [SearchService, NewsService,
+        { provide: MAT_TABS_CONFIG, useValue: { animationDuration: '0ms' } },
+        provideHttpClient(withInterceptorsFromDi())]
+})
 export class AppModule {
 }

src/app/shared/floating-feedback/floating-feedback.component.html

@@ -0,0 +1,9 @@
+<a mat-fab
+   color="secondary"
+   routerLink="/feedback"
+   matTooltip="Give Feedback"
+   matTooltipPosition="left"
+   class="feedback-fab"
+   aria-label="Give Feedback">
+  <mat-icon>feedback</mat-icon>
+</a>

src/app/shared/floating-feedback/floating-feedback.component.scss

@@ -0,0 +1,17 @@
+:host {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 1000;
+
+}
+
+.feedback-fab {
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  background-color: #ff4081;
+  fill: white;
+  color: white;
+  &:hover {
+    transform: scale(1.1);
+  }
+}

src/app/shared/floating-feedback/floating-feedback.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-floating-feedback',
+  templateUrl: './floating-feedback.component.html',
+  styleUrls: ['./floating-feedback.component.scss']
+})
+export class FloatingFeedbackComponent {}

src/app/shared/footer/footer.component.html

@@ -14,7 +14,7 @@
       <a href="https://www.jax.org/" target="__blank">
         <img class="footer-brand-larger" src="assets/jax_logo.png"/>
       </a>
-      <a href="https://www.bihealth.org/" target="__blank">
+      <a href="https://www.bihealth.org/" target="__blank" class="mr-4">
       <img class="footer-brand-larger" src="assets/bih-logo.svg"/>
       </a>
     </div>

src/app/shared/search/search/search.component.html

@@ -24,13 +24,12 @@
       <div class="result-title">
         Phenotypes - {{terms.length}} of {{termsCount}} displayed
       </div>
-      <div class="result-list">
+      <div class="result-list flex flex-column">
         <div class="result" (click)="closeDropDown()" routerLink="/browse/term/{{item.id}}"
              *ngFor="let item of terms;">
-          <div class="id">{{item.id}}</div>
           <div class="name" *ngIf="!item.synonym" [innerHtml]="{name: item.name } | highlight: queryText"></div>
           <div class="name" *ngIf="item.synonym" [innerHtml]="{name: item.synonym } | highlight: queryText"></div>
-          <br>
+          <div class="id">{{item.id}}</div>
         </div>
       </div>
     </div>
@@ -39,11 +38,11 @@
       <div class="result-title">
         Diseases - {{diseases.length}} of {{diseasesCount}} displayed
       </div>
-      <div class="result-list">
+      <div class="result-list flex flex-column">
         <div class="result" (click)="closeDropDown()" routerLink="/browse/disease/{{item.id}}"
              *ngFor="let item of diseases;">
-          <div class="id">{{dbOnly(item.id)}}</div>
           <div class="name" [innerHtml]="{name: item.name } | highlight: queryText"></div>
+          <div class="id">{{item.id}}</div>
           <br>
         </div>
       </div>
@@ -53,11 +52,11 @@
       <div class="result-title">
         Genes - {{genes.length}} of {{genesCount}} displayed
       </div>
-      <div class="result-list">
+      <div class="result-list flex flex-column">
         <div class="result" (click)="closeDropDown()" routerLink="/browse/gene/{{item.id}}"
              *ngFor="let item of genes;">
-          <div class="id">{{item.id.split(":")[0]}}</div>
           <div class="name" [innerHtml]="{name: item.name } | highlight: queryText"></div>
+          <div class="id">{{item.id}}</div>
           <br>
         </div>
       </div>

src/app/shared/search/search/search.component.scss

@@ -43,9 +43,9 @@ $orange-hover: rgba(236, 151, 54, 0.8);
     position: relative;
     z-index: 999;
     line-height: 20px;
+    padding: 0 0 .5rem 0;
 
     & .search-all {
-      padding: 2px 10px 0 10px;
       margin: 0 0 10px 0;
       font-weight: 900;
       background-color: $blue-searchall-color;
@@ -86,13 +86,15 @@ $orange-hover: rgba(236, 151, 54, 0.8);
       cursor: pointer;
       text-decoration: none;
       color: black !important;
+      display: flex;
+      flex-direction: column;
 
       & .result {
         display: flex;
         align-items: center;
         flex-direction: row;
         justify-content: space-around;
-        padding: 5px 10px 0 25px;
+        padding: 5px 10px 0 10px;
         height: 25px;
         outline: none;
 
@@ -117,22 +119,7 @@ $orange-hover: rgba(236, 151, 54, 0.8);
           font-size: 12px;
           color: grey;
           margin: 0 15px 0 0;
-        }
-      }
-    }
-
-    & .term-result {
-      & .result-list {
-        & .result .id {
-          width: 60px;
-        }
-      }
-    }
-
-    & .disease-result {
-      & .result-list {
-        & .result .id {
-          width: 50px;
+          flex: 0 0 22%;
         }
       }
     }

src/app/static/feedback/feedback.component.html

@@ -0,0 +1,13 @@
+<div class="container">
+  <div class="form-container">
+    <iframe
+      [src]="safeFormUrl"
+      width="100%"
+      height="800"
+      frameborder="0"
+      marginheight="0"
+      marginwidth="0">
+      Loading…
+    </iframe>
+  </div>
+</div>