From bf9ce2ace5040e1471a2b9f009b3d82743065a68 Mon Sep 17 00:00:00 2001
From: hoa3 <anina.hold@outlook.com>
Date: Wed, 29 May 2024 14:22:24 +0200
Subject: [PATCH] fix: input mask styling

---
 .../add-institution.component.html            | 178 +++++++----
 .../add-institution.component.scss            | 283 +++++++++---------
 .../add-institution.component.ts              |  22 +-
 3 files changed, 269 insertions(+), 214 deletions(-)

diff --git a/frontend/src/app/add-institution/add-institution.component.html b/frontend/src/app/add-institution/add-institution.component.html
index 23d06d7..7a43e05 100644
--- a/frontend/src/app/add-institution/add-institution.component.html
+++ b/frontend/src/app/add-institution/add-institution.component.html
@@ -2,11 +2,7 @@
   <section class="container" [ngClass]="formStatus">
     <header>Institution Form</header>
 
-    <form
-      class="form"
-      [formGroup]="reactiveForm"
-      (ngSubmit)="OnFormSubmitted()"
-    >
+    <form [formGroup]="reactiveForm">
       The Documents in the Database are matched using the uuid. This means that
       if you make changes to the Institution with an existing uuid, the Data
       from this Institution will be overwritten! If the uuid is new (there is no
@@ -31,7 +27,7 @@
         </div>
 
         <div class="input-box">
-          <mat-label>Abbreviated name (Shortname)</mat-label>
+          <mat-label>Short name</mat-label>
           <input
             type="text"
             placeholder="e.g. Tecan"
@@ -48,44 +44,62 @@
         </div>
       </div>
 
-      <div class="input-box">
+      <div class="input-box button-container">
         <mat-label>UUID</mat-label>
-        <div class="uuid-input-container">
-          <input
-            type="text"
-            placeholder="e.g. dd2e1e51-9281-4160-a197-216dd1f623d0"
-            formControlName="uuid"
-            [readOnly]="isEditMode"
-          />
-        </div>
-        <small
-          *ngIf="
-            reactiveForm.get('uuid').invalid && reactiveForm.get('uuid').touched
-          "
-        >
-          *UUID is a required field.
-        </small>
-        <small *ngIf="isEditMode">
-          Sie befinden sich im Bearbeitungsmodus, die uuid bestehender
-          Institutionen sollte nicht abgeändert werden
-        </small>
+        <input
+          type="text"
+          placeholder="e.g. dd2e1e51-9281-4160-a197-216dd1f623d0"
+          formControlName="uuid"
+          [readOnly]="isEditMode"
+        />
         <button
+          mat-raised-button
           type="button"
-          class="btn-add-delete"
+          class="inside-btn"
           (click)="generateUUID()"
           [disabled]="isEditMode"
         >
           Generate new UUID
         </button>
       </div>
+      <small
+        *ngIf="
+          reactiveForm.get('uuid').invalid && reactiveForm.get('uuid').touched
+        "
+      >
+        *UUID is a required field.
+      </small>
+      <small *ngIf="isEditMode">
+        Sie befinden sich im Bearbeitungsmodus, die uuid bestehender
+        Institutionen sollte nicht abgeändert werden
+      </small>
 
       <div class="input-box">
-        <mat-label>Sector</mat-label>
-        <input
-          type="text"
-          placeholder="e.g. ResearchAndEducation"
-          formControlName="sector"
-        />
+        <mat-form-field>
+          <mat-label>Sector</mat-label>
+          <mat-select formControlName="sector">
+            <mat-option value="IT">IT</mat-option>
+            <mat-option value="Communities">Communities</mat-option>
+            <mat-option value="Insurances">Insurances</mat-option>
+            <mat-option value="Banking">Banking</mat-option>
+            <mat-option value="Media">Media</mat-option>
+            <mat-option value="FoodBeverage">FoodBeverage</mat-option>
+            <mat-option value="Pharma">Pharma</mat-option>
+            <mat-option value="Others">Others</mat-option>
+            <mat-option value="Gov_Companies">Gov_Companies</mat-option>
+            <mat-option value="Gov_Federal">Gov_Federal</mat-option>
+            <mat-option value="Gov_Cantons">Gov_Cantons</mat-option>
+            <mat-option value="Gov_Cities">Gov_Cities</mat-option>
+            <mat-option value="NGOs">NGOs</mat-option>
+            <mat-option value="ResearchAndEducation"
+              >ResearchAndEducation</mat-option
+            >
+            <mat-option value="FoodBeverage/Others"
+              >FoodBeverage/Others</mat-option
+            >
+            <mat-option value="City">City</mat-option>
+          </mat-select>
+        </mat-form-field>
         <small
           *ngIf="
             reactiveForm.get('sector').invalid &&
@@ -96,9 +110,22 @@
         </small>
       </div>
 
-      <div class="input-box">
-        <mat-label>Timestamp</mat-label>
-        <input type="text" placeholder="null" formControlName="ts" />
+      <div class="input-box button-container">
+        <mat-label>Timestamp (Last time Institution was crawled)</mat-label>
+        <input
+          [readOnly]="true"
+          type="text"
+          placeholder="null"
+          formControlName="ts"
+        />
+        <button
+          mat-raised-button
+          type="button"
+          class="inside-btn"
+          (click)="resetTimestamp()"
+        >
+          Reset Timestamp
+        </button>
       </div>
 
       <div class="input-box orgs" formArrayName="orgs">
@@ -116,31 +143,69 @@ <h4>Add Organization(s)</h4>
             placeholder="e.g.Tecan Genomics"
             formControlName="name"
           />
-          <input type="text" placeholder="null" formControlName="ts_org" />
-          <button type="button" class="btn-add-delete" (click)="DeleteOrg(i)">
-            Delete
+          <small
+            *ngIf="
+              reactiveForm.get('orgs').invalid &&
+              reactiveForm.get('orgs').touched
+            "
+          >
+            *shortname is a required field. No Space is allowed for Shortname.
+          </small>
+          <!-- <input type="text" placeholder="null" formControlName="ts_org" /> -->
+          <button class="btn-add-delete" (click)="DeleteOrg(i)">
+            Remove Organisation
           </button>
         </div>
       </div>
-      <button type="button" class="btn-add-delete" (click)="AddOrg()">
+      <button
+        mat-raised-button
+        color="accent"
+        type="button"
+        class="btn-add-delete"
+        (click)="AddOrg()"
+      >
         Add Organization
       </button>
 
-      <input
-        type="submit"
-        value="Save/Update Institution"
-        class="submit-btn"
-        [disabled]="!reactiveForm.valid"
-      />
+      <div class="column">
+        <button
+          type="submit"
+          mat-raised-button
+          color="accent"
+          [disabled]="!reactiveForm.valid"
+          (click)="OnFormSubmitted()"
+        >
+          Save/Update Institution
+        </button>
 
-      <button type="button" class="delete-btn" (click)="DeleteInst()">
-        Delete Whole Institution
-      </button>
+        <button
+          mat-raised-button
+          color="warn"
+          [disabled]="!reactiveForm.valid"
+          (click)="DeleteInst()"
+        >
+          Delete Whole Institution
+        </button>
+      </div>
     </form>
   </section>
 
   <div class="table-container">
     <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+      <ng-container matColumnDef="edit"
+        ><th mat-header-cell *matHeaderCellDef="">Edit</th>
+        <td mat-cell *matCellDef="let institution">
+          <button
+            mat-raised-button
+            color="accent"
+            (click)="editTodoInstitution(institution)"
+            (click)="activateEditMode()"
+          >
+            Edit
+          </button>
+        </td></ng-container
+      >
+
       <!-- Name DE Column -->
       <ng-container matColumnDef="name_de">
         <th mat-header-cell *matHeaderCellDef>Name_de</th>
@@ -194,20 +259,7 @@ <h4>Add Organization(s)</h4>
         </td>
       </ng-container>
 
-      <ng-container matColumnDef="edit"
-        ><th mat-header-cell *matHeaderCellDef>Edit</th>
-        <td mat-cell *matCellDef="let institution">
-          <button
-            mat-raised-button
-            (click)="editTodoInstitution(institution)"
-            (click)="activateEditMode()"
-          >
-            Edit
-          </button>
-        </td></ng-container
-      >
-
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
   </div>
diff --git a/frontend/src/app/add-institution/add-institution.component.scss b/frontend/src/app/add-institution/add-institution.component.scss
index 88064a6..b57d66a 100644
--- a/frontend/src/app/add-institution/add-institution.component.scss
+++ b/frontend/src/app/add-institution/add-institution.component.scss
@@ -1,176 +1,161 @@
 @import "../../styles/colors.scss";
 
-/* Adjust container to be a flex container */
 .wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
 }
 
-/* Adjust the container and table sizes */
-.container {
-  flex: 1 1 45%; /* Adjust the form to be 50% smaller */
-  max-width: 700px; /* Optional, based on your design */
-}
-
 .table-container {
-  flex: 1 1 45%; /* Adjust the table container to fit beside the form */
+  flex: 1 1 45%;
+  overflow: scroll;
+  max-height: 1000px;
 }
 
-
-
-/* Responsive adjustments */
 @media screen and (max-width: 1200px) {
   .container, .table-container {
-    flex: 1 1 100%; /* Stack the form and table vertically on smaller screens */
+    flex: 1 1 100%;
   }
 }
 
-/* Define a class for the Name_de column to control its width */
 .mat-column-name_de {
-  width: 300px; /* Set the desired width */
-  max-width: 1000px; /* Ensure it doesn't grow larger */
-  word-wrap: break-word; /* Wrap text if it overflows */
+  width: 300px;
+  max-width: 1000px;
+  word-wrap: break-word;
 }
 
-
 .container {
-    position: relative;
-    max-width: 700px;
-    width: 100%;
-    background: #fff;
-    padding: 20px 50px;
-    border-radius: 5px;
-    margin-bottom: 20px;
-    box-shadow: 
-    0px -5px 10px -5px #9e9e9e,
-    5px 0px 10px -5px #9e9e9e,
-    0px 5px 10px -5px #9e9e9e,
-    -5px 0px 10px -5px #9e9e9e;
-  }
-  .container header {
-    font-size: 1.5rem;
-    color: #333;
-    font-weight: 500;
-    text-align: center;
-  }
-  .container .form {
-    margin-top: 20px;
-    padding: 20px;
-  }
-  .form .input-box {
-    width: 100%;
-    margin-top: 10px;
-  }
-  .input-box label {
-    color: #333;
-  }
-  .form :where(.input-box input, .select-box) {
-    position: relative;
-    height: 50px;
-    width: 100%;
-    outline: none;
-    font-size: 1rem;
-    color: #707070;
-    margin-top: 8px;
-    /* border: 1px solid #ddd; */
-    border-radius: 10px;
-    padding: 0 15px;
-  }
-  .input-box input:focus {
-    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
-  }
-  .form .column {
-    display: flex;
-    column-gap: 50px;
-  }
+  position: relative;
+  max-width: 700px;
+  width: 100%;
+  background: #fff;
+  padding: 20px 50px;
+  border-radius: 5px;
+  margin-bottom: 20px;
+  box-shadow: 0px -5px 10px -5px #9e9e9e, 5px 0px 10px -5px #9e9e9e, 0px 5px 10px -5px #9e9e9e, -5px 0px 10px -5px #9e9e9e;
+  flex: 1 1 25%;
+}
 
-  .form .submit-btn {
-    height: 55px;
-    width: 100%;
-    color: #fff;
-    font-size: 1rem;
-    font-weight: 400;
-    margin-top: 30px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    background: #888;
-  }
+.container header {
+  font-size: 1.5rem;
+  color: #333;
+  font-weight: 500;
+  text-align: center;
+  line-height: 200%;
+}
 
-  .form .submit-btn:hover {
-    background: #555;
-  }
 
-  .form .delete-btn {
-    height: 55px;
-    width: 100%;
-    color: #fff;
-    font-size: 1rem;
-    font-weight: 400;
-    margin-top: 30px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    background: #d82222;
-  }
+.input-box {
+  width: 100%;
+  margin-top: 10px;
+}
 
-  .form .delete-btn:hover {
-    background: #da6565;
-  }
-  /*Responsive*/
-  @media screen and (max-width: 500px) {
-    .form .column {
-      flex-wrap: wrap;
-    }
-    .form :where(.gender-option, .gender) {
-      row-gap: 15px;
-    }
-  }
-  
-  .form-shadow{
-    box-shadow: rgba(187, 185, 185, 0.35) 0px 5px 15px;
-  }
-  
-  input.ng-invalid.ng-touched{
-    border: #673ab7 1px solid;
-  }
-  
-  small{
-    color: #673ab7;
-    font-weight: bold;
-  }
-  
-  .btn-add-delete{
-    margin: 10px 0px;
-    padding: 14px 30px;
-    border-radius: 5px;
-    background: #888;
-    border: none;
-    cursor: pointer;
-    color: white;
-    
-  }
-  .form .btn-add-delete:hover {
-    background: #555;
-  }
-  .orgs{
-    padding: 20px 0px;
-  }
+.input-box label {
+  color: #333;
+}
 
-  span{
-    padding: 5px 5px;
-    font-weight: bold;
-  }
-  
-  input.ng-invalid.ng-touched{
-    border: #673ab7 1px solid;
-  }
-  .container.VALID{
-    border: green 2px solid;
+.input-box input, .select-box {
+  height: 50px;
+  width: 100%;
+  outline: none;
+  font-size: 1rem;
+  color: #707070;
+  margin-top: 8px;
+  border-radius: 10px;
+  padding: 0 15px;
+}
+
+.input-box input:focus {
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+}
+
+.column {
+  display: flex;
+  column-gap: 50px;
+}
+
+.submit-btn, .delete-btn, .btn-add-delete, .inside-btn {
+  height: 50%;
+  width: 20%;
+  color: #fff;
+  font-size: small;
+  font-weight: 400;
+  margin-top: 30px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: center;
+}
+
+.submit-btn {
+  background: #888;
+}
+
+.submit-btn:hover {
+  background: #555;
+}
+
+.delete-btn {
+  background: #d82222;
+}
+
+.delete-btn:hover {
+  background: #da6565;
+}
+
+.btn-add-delete {
+  margin: 10px 0px;
+  padding: 14px 30px;
+  background: #888;
+}
+
+.btn-add-delete:hover, .inside-btn:hover {
+  background: #555;
+}
+
+@media screen and (max-width: 500px) {
+  .column {
+    flex-wrap: wrap;
   }
-  .container.INVALID{
-    border: #673ab7 1px solid;
+  .gender-option, .gender {
+    row-gap: 15px;
   }
+}
+
+.form-shadow {
+  box-shadow: rgba(187, 185, 185, 0.35) 0px 5px 15px;
+}
+
+input.ng-invalid.ng-touched {
+  border: #673ab7 1px solid;
+}
+
+small {
+  color: #673ab7;
+  font-weight: bold;
+}
+
+span {
+  padding: 5px 5px;
+  font-weight: bold;
+}
+
+.container.VALID {
+  border: green 2px solid;
+}
+
+.container.INVALID {
+  border: #673ab7 1px solid;
+}
+
+.button-container {
+  position: relative;
+}
+
+.inside-btn {
+  position: absolute;
+  background: #888;
+  top: 5%;
+  right: 1px;
+}
diff --git a/frontend/src/app/add-institution/add-institution.component.ts b/frontend/src/app/add-institution/add-institution.component.ts
index c30ccec..fa69a59 100644
--- a/frontend/src/app/add-institution/add-institution.component.ts
+++ b/frontend/src/app/add-institution/add-institution.component.ts
@@ -16,13 +16,13 @@ export class AddInstitutionComponent implements OnInit {
   reactiveForm: FormGroup;
   dataSource: any;
   displayedColumns: string[] = [
+    'edit',
     'name_de',
     'uuid',
     'sector',
     'shortname',
     'ts',
     'orgs',
-    'edit',
   ];
 
   constructor(private dataService: DataService) {}
@@ -48,7 +48,7 @@ export class AddInstitutionComponent implements OnInit {
       ts: new FormControl(null),
       orgs: new FormArray([
         new FormGroup({
-          name: new FormControl(null, [Validators.required]),
+          name: new FormControl(null, [Validators.required, Validators.pattern(/^(\S*)$/)]),
           ts_org: new FormControl(null),
         }),
       ]),
@@ -75,6 +75,10 @@ export class AddInstitutionComponent implements OnInit {
         },
       ],
     });
+    // reload the data after adding a new institution
+    this.dataService.LoadTodoInstitutions().then((data) => {
+      this.dataSource = data;
+    });
   }
 
   AddOrg() {
@@ -132,6 +136,11 @@ export class AddInstitutionComponent implements OnInit {
         },
       ],
     });
+    // reload the data after deleting an institution
+    this.dataService.LoadTodoInstitutions().then((data) => {
+      this.dataSource = data;
+    });
+
   }
 
   generateUUID(): void {
@@ -149,5 +158,14 @@ export class AddInstitutionComponent implements OnInit {
   deactivateEditMode(): void {
     this.isEditMode = false;
   }
+// set the timestamp value to null if reset button is clicked
+  resetTimestamp() {
+    this.reactiveForm.get('ts').setValue(null);
+    const orgsControl = <FormArray>this.reactiveForm.get('orgs');
+    for (let i = 0; i < orgsControl.length; i++) {
+      const orgFormGroup = <FormGroup>orgsControl.at(i);
+      orgFormGroup.get('ts_org').setValue(null);
+    }
+  }
 
 }