Export refactoring

angular.json

@@ -26,8 +26,8 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "assets": [
-              "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/assets/images/favicon.png"
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
@@ -113,8 +113,8 @@
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "assets": [
-              "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/assets/images/favicon.png"
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",

src/app/app.component.css

@@ -67,13 +67,27 @@ h6 {
   align-items: center;
   justify-content: space-evenly;
   gap: 2em;
+  font-size: 16px;
 }
 .color-change{
   padding-top: 5%;
   padding-bottom: 5%;
   width: 80%;
 }
 
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px;
+  z-index: 100;
+  background-color: white;
+  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+}
+
 @media screen and (min-width: 768px) {
   .toolbar {
     grid-template-columns: auto 1fr auto;

src/app/app.component.html

@@ -35,4 +35,14 @@
     </div>
   </div>
   <app-sidebar></app-sidebar>
+  <div class="footer">
+    <a class="user-agreement" href="">Nutzervereinbarung</a>
+    <a class="email" href="mailto:[email protected]">CCP&#64;dkfz.de</a>
+    <div class="copyright">
+      <span>&#169; 2023 </span>
+      <a href="https://dktk.dkfz.de/en/clinical-platform/about-ccp"
+      >Clinical Comunication Platform (CCP)</a
+      >
+    </div>
+  </div>
 </div>

src/app/app.module.ts

@@ -45,6 +45,7 @@ import {MatDatepickerModule} from "@angular/material/datepicker";
 import {MatNativeDateModule} from "@angular/material/core";
 import {MatFormFieldModule} from "@angular/material/form-field";
 import {MatButtonToggleModule} from "@angular/material/button-toggle";
+import {MatSortModule} from "@angular/material/sort";
 
 @NgModule({
   declarations: [
@@ -91,7 +92,8 @@ import {MatButtonToggleModule} from "@angular/material/button-toggle";
         MatCheckboxModule,
         MatDatepickerModule,
         MatNativeDateModule,
-        MatButtonToggleModule
+        MatButtonToggleModule,
+        MatSortModule
 
     ],
   providers: [

src/app/embedded/execution/execution.component.css

@@ -294,24 +294,6 @@ button{
 .visible-button-group {
   display: inline-flex;
 }
-.file-upload {
-  text-transform: none !important;
-  width: 200px;
-  height: 45px;
-  font-size: 13px;
-  color: black!important;
-  display: flex;
-  padding: 5px;
-  background-color: #2BCDD563 !important;
-}
-.file-upload-text {
-  margin: 8px 5px;
-}
-.file-name {
-  color: black;
-  margin: 5px;
-  height: 20px;
-}
 .template_dropdown, .outputformat_dropdown {
   margin: 0 2%;
   /*width: 20%;*/

src/app/embedded/execution/execution.component.html

@@ -79,19 +79,19 @@ <h2 i18n>Exporter Ausführungen</h2>
             <div class="dropdowns-left">
               <mat-form-field class="queryformat_dropdown">
                 <mat-label>Anfrageformat</mat-label>
-                <select class="queryformat-select" matNativeControl required [(ngModel)]="selectedQueryFormat" [disabled] = "true">
+                <select class="queryformat-select" matNativeControl [(ngModel)]="selectedQueryFormat" [disabled] = "true">
                   <option *ngFor="let id of queryFormats" [value]="id.value">{{id.display}}</option>
                 </select>
               </mat-form-field>
               <mat-form-field class="outputformat_dropdown">
                 <mat-label>Ausgabeformat</mat-label>
-                <select class="outputformat-select" matNativeControl required [(ngModel)]="selectedOutputFormat" >
+                <select class="outputformat-select" matNativeControl [(ngModel)]="selectedOutputFormat" >
                   <option *ngFor="let id of outputFormats" [value]="id.value">{{id.display}}</option>
                 </select>
               </mat-form-field>
               <mat-form-field class="template_dropdown">
                 <mat-label>Template</mat-label>
-                <select class="template-select" matNativeControl required [(ngModel)]="selectedTemplate" >
+                <select class="template-select" matNativeControl [(ngModel)]="selectedTemplate" >
                   <option *ngFor="let id of templateIDs" [value]="id.value">{{id.display}}</option>
                 </select>
               </mat-form-field>

src/app/embedded/exporter/exporter.component.css

@@ -31,6 +31,13 @@ table {
 .mat-mdc-header-cell {
   background-color: #2BCDD563!important;
 }
+::ng-deep .mat-mdc-text-field-wrapper .mat-mdc-form-field-input-control {
+  height: 35px !important;
+}
+mat-form-field {
+  font-size: small;
+}
+
 .table-link-column {
   text-align: center;
 }
@@ -144,7 +151,7 @@ button{
 .generate-button:disabled, .cancel-button:disabled, .download-button:disabled, .create-button:disabled, .edit-button:disabled, .execute-button:disabled {
   color: darkgrey!important;
 }
-.generate-button, .create-button, .edit-button, .download-button, .execute-button, .cancel-edit-button {
+.generate-button, .create-button, .edit-button, .download-button, .execute-button, .cancel-edit-button, .plus-button, .minus-button {
   background-color: #2BCDD563 !important;
 }
 .download-button, .edit-button, .cancel-edit-button, .upload-button {
@@ -157,6 +164,17 @@ button{
 .visible-button-group {
   display: inline-flex;
 }
+.plus-button, .minus-button {
+  width: 35px;
+  height: 35px;
+  padding: 5px;
+  font-size: 14px;
+  color: black!important;
+  min-width: 35px;
+}
+.minus-button {
+  margin-right: 10px;
+}
 .file-upload {
   text-transform: none !important;
   width: 200px;
@@ -176,7 +194,7 @@ button{
   height: 20px;
 }
 .template_dropdown, .outputformat_dropdown {
-  margin: 0 2%;
+  margin: 0;
   /*width: 20%;*/
 }
 .button-accordion {
@@ -193,17 +211,22 @@ mat-expansion-panel-header {
 }
 ::ng-deep .query-input .mat-mdc-text-field-wrapper {
   background-color: #f5f5f5;
-  min-width: 300px;
+  min-width: 220px;
+}
+::ng-deep .query-expiration-date .mat-mdc-text-field-wrapper {
+  width: 220px;
+}
+.query-contactid, .query-context {
+  margin-right: 20px;
 }
-
 .download-link {
   font-weight: bold;
   color: #0AADB5;
 }
 .query-input {
   display: flex;
   margin-bottom: 30px;
-  max-width: 1250px;
+  max-width: 1310px;
 }
 .query-input-right {
   display: grid;
@@ -222,23 +245,33 @@ mat-expansion-panel-header {
 }
 .dropdowns-left {
   margin-right: 20px;
-}
-.query-contactid {
-  font-size: 15px;
+  width: min-content;
 }
 ::ng-deep .query-input .mat-mdc-form-field-infix {
   padding-top: 18px!important;
   padding-bottom: 2px!important;
+  min-height: 52px!important;
+}
+::ng-deep .query-context .mat-mdc-form-field-infix {
+  padding-top: 15px!important;
+  padding-bottom: 2px!important;
+  min-height: 50px!important;
 }
 ::ng-deep .query-selection .mdc-label {
   padding-left: 0;
 }
 ::ng-deep .query-selection .mat-mdc-checkbox {
   margin-right: 15px;
 }
+::ng-deep .mat-mdc-floating-label.mdc-floating-label {
+  font-size: small!important;
+}
 .link-icon {
   font-size: 24px;
 }
+.description-textfield {
+  height: 114px;
+}
 @media(max-width : 1400px){
   .main{
     width: 80%;

src/app/embedded/exporter/exporter.component.html

@@ -67,8 +67,8 @@ <h2 i18n>Exporter Anfragen</h2>
             <div>
               <div>Beschreibung</div>
               <textarea
-                class="query-textfield"
-                name="query-textfield"
+                class="description-textfield"
+                name="description-textfield"
                 rows="6"
                 cols="40"
                 [(ngModel)]="queryDescription"
@@ -94,19 +94,19 @@ <h2 i18n>Exporter Anfragen</h2>
               <div class="dropdowns-left">
                 <mat-form-field class="queryformat_dropdown">
                   <mat-label>Anfrageformat</mat-label>
-                  <select class="queryformat-select" matNativeControl required [(ngModel)]="selectedQueryFormat" [disabled] = "!editModus">
+                  <select class="queryformat-select" matNativeControl [(ngModel)]="selectedQueryFormat" [disabled] = "!editModus">
                     <option *ngFor="let id of queryFormats" [value]="id.value">{{id.display}}</option>
                   </select>
                 </mat-form-field>
                 <mat-form-field class="outputformat_dropdown">
                   <mat-label>Ausgabeformat</mat-label>
-                  <select class="outputformat-select" matNativeControl required [(ngModel)]="selectedOutputFormat" >
+                  <select class="outputformat-select" matNativeControl [(ngModel)]="selectedOutputFormat" >
                     <option *ngFor="let id of outputFormats" [value]="id.value">{{id.display}}</option>
                   </select>
                 </mat-form-field>
                 <mat-form-field class="template_dropdown">
                   <mat-label>Template</mat-label>
-                  <select class="template-select" matNativeControl required [(ngModel)]="selectedTemplate" >
+                  <select class="template-select" matNativeControl [(ngModel)]="selectedTemplate" >
                     <option *ngFor="let id of templateIDs" [value]="id.value">{{id.display}}</option>
                   </select>
                 </mat-form-field>
@@ -134,6 +134,37 @@ <h2 i18n>Exporter Anfragen</h2>
                 </mat-form-field>
               </div>
             </div>
+            <!--<mat-form-field appearance="outline" class="query-context">
+                  <mat-label i18n>Context</mat-label>-->
+            <div *ngFor="let context of contextArray; let i=index">
+              <mat-form-field appearance="outline" class="query-context">
+                <mat-label i18n>Schlüssel</mat-label>
+                <input
+                  matInput
+                  type="text"
+                  [(ngModel)]="context.key"
+                  [disabled] = "!editModus"
+                />
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="query-context">
+                <mat-label i18n>Wert</mat-label>
+                <input
+                  matInput
+                  type="text"
+                  [(ngModel)]="context.value"
+                  [disabled] = "!editModus"
+                />
+              </mat-form-field>
+              <button *ngIf="contextArray.length > 1" mat-raised-button color="primary" class="minus-button"
+                      [disabled] = "!editModus"
+                      (click)="deleteContextInput(i)">-
+              </button>
+              <button *ngIf="i === contextArray.length - 1" mat-raised-button color="primary" class="plus-button"
+                      [disabled] = "!editModus"
+                      (click)="addContextInput()">+
+              </button>
+            </div>
+            <!--</mat-form-field>-->
           </div>
         </div>
       </div>

src/app/embedded/exporter/exporter.component.ts

@@ -39,6 +39,10 @@ export enum ExportStatus {
   EMPTY = "EMPTY",
   ERROR = "ERROR"
 }
+export interface Context {
+  key: string;
+  value: string;
+}
 @Component({
   selector: 'exporter',
   templateUrl: './exporter.component.html',
@@ -88,6 +92,7 @@ export class ExporterComponent implements OnInit, OnDestroy {
   queryList:ExporterQueries[] = [];
   executionLink: string = EmbeddedTeilerApps.EXECUTION;
   panelOpenState: boolean = false;
+  contextArray: Context[] = [{key: "", value: ""}];
 
   constructor(private exporterService: ExporterService, private router: Router, public authService: TeilerAuthService) {
     from(authService.loadUserProfile()).subscribe(keycloakProfile => this.contactID = keycloakProfile.email);
@@ -165,7 +170,7 @@ export class ExporterComponent implements OnInit, OnDestroy {
 
   createAndExecuteQuery() {
     this.subscriptionGenerateExport?.unsubscribe();
-    this.subscriptionGenerateExport = this.exporterService.generateExport(this.query, this.queryLabel, this.queryDescription, this.selectedQueryFormat, this.selectedOutputFormat, this.selectedTemplate, this.importTemplate).subscribe({
+    this.subscriptionGenerateExport = this.exporterService.generateExport(this.query, this.queryLabel, this.queryDescription, this.selectedQueryFormat, this.selectedOutputFormat, this.selectedTemplate, this.getContext(), this.importTemplate).subscribe({
       next: (response: QBResponse) => {
         const url = new URL(response.responseUrl)
         const id = url.searchParams.get("query-execution-id");
@@ -243,7 +248,7 @@ export class ExporterComponent implements OnInit, OnDestroy {
           complete: () => {}
         });
       } else {
-        this.subscriptionCreateQuery = this.exporterService.createQuery(this.query, this.queryLabel, this.queryDescription, this.selectedQueryFormat, this.selectedOutputFormat, this.contactID, this.selectedTemplate, this.importTemplate).subscribe({
+        this.subscriptionCreateQuery = this.exporterService.createQuery(this.query, this.queryLabel, this.queryDescription, this.selectedQueryFormat, this.selectedOutputFormat, this.contactID, this.selectedTemplate, this.getContext(), this.importTemplate).subscribe({
           next: (response: QueryResponse) => {
             this.getQueries();
             this.editModus = false;
@@ -386,4 +391,23 @@ export class ExporterComponent implements OnInit, OnDestroy {
   getRouterLink(id: string): string {
     return '/' + createRouterLinkForBase(this.executionLink + '/' + id);
   }
+  addContextInput(): void {
+    this.contextArray.push({key: "", value: ""} as Context)
+  }
+  deleteContextInput(index: number): void {
+    this.contextArray.splice(index, 1)
+  }
+  getContext(): string {
+    let context: string = "";
+    this.contextArray.forEach(contextPair => {
+      if (contextPair.key.length !== 0 && contextPair.value.length !== 0) {
+        if (context.length !== 0) {
+          context += ";"
+        }
+        context += contextPair.key + "=" + contextPair.value;
+      }
+    })
+    //return Buffer.from(context).toString("base64");
+    return btoa(context);
+  }
 }