From ebff94aa64f8d1527da3ee61a49413bc3421a51c Mon Sep 17 00:00:00 2001
From: Martin Maul <martin.maul@doubleslash.de>
Date: Tue, 2 Jul 2024 12:50:44 +0200
Subject: [PATCH] chore(admin): #994 improve bpn edc configuration

---
 .../bpn-configuration.component.html          | 44 +++++++++----------
 .../bpn-configuration.component.scss          | 15 +++----
 2 files changed, 25 insertions(+), 34 deletions(-)

diff --git a/frontend/src/app/modules/page/admin/presentation/bpn-configuration/bpn-configuration.component.html b/frontend/src/app/modules/page/admin/presentation/bpn-configuration/bpn-configuration.component.html
index 62ce04611a..55cea32d5d 100644
--- a/frontend/src/app/modules/page/admin/presentation/bpn-configuration/bpn-configuration.component.html
+++ b/frontend/src/app/modules/page/admin/presentation/bpn-configuration/bpn-configuration.component.html
@@ -26,10 +26,30 @@
     >
   </mat-card-header>
   <mat-card-content>
+    <div class="bpn-config--top-container">
     <p class="bpn-config--intro">
       {{ 'pageAdmin.bpnConfig.intro' | i18n }}
     </p>
 
+      <div class="bpn-config--save" *ngIf="changeInformation$ | async as info"
+           matTooltip="{{  ((info.deleted.length + info.added.length + info.changed.length) > 0 ? 'actions.save' : 'actions.noChanges') | i18n}}"
+           matTooltipClass="table--header--tooltip"
+           matTooltipPosition="above"
+           [class.mdc-tooltip--multiline]="true"
+           [matTooltipShowDelay]="1000"
+      >
+        <app-button
+          color="primary"
+          iconName="save"
+          [isDisabled]="!(info.deleted.length + info.added.length + info.changed.length)"
+          onkeydown="saveData()"
+          (click)="saveData()"
+        >
+        </app-button>
+
+      </div>
+    </div>
+
     <div class="bpn-config">
       <div class="bpn--add-new">
 
@@ -51,31 +71,7 @@
         </div>
       </div>
 
-      <div class="bpn-config--save" *ngIf="changeInformation$ | async as info">
-        <app-text-with-icon [testId]="'text-with-icon--deleted'" iconName="delete" color="warn"
-        >{{ 'pageAdmin.bpnConfig.deleted' | i18n }}: {{ info.deleted.length }}</app-text-with-icon
-        >
 
-        <app-text-with-icon [testId]="'text-with-icon--added'" iconName="add" color="primary"
-        >{{ 'pageAdmin.bpnConfig.added' | i18n }}: {{ info.added.length }}</app-text-with-icon
-        >
-
-        <app-text-with-icon [testId]="'text-with-icon--changed'" iconName="edit"
-        >{{ 'pageAdmin.bpnConfig.changed' | i18n }}: {{ info.changed.length }}</app-text-with-icon
-        >
-
-        <app-button
-          class="bpn-config--button"
-          variant="raised"
-          color="primary"
-          [isDisabled]="!(info.deleted.length + info.added.length + info.changed.length)"
-          onkeydown="saveData()"
-          (click)="saveData()"
-        >
-          {{ 'actions.saveChanges' | i18n }}
-        </app-button>
-
-      </div>
 
       <div class="flex w-full justify-start"
            *ngIf="newBpnConfig.controls.length > 0 || editBpnConfig.controls.length > 0">
diff --git a/frontend/src/app/modules/page/admin/presentation/bpn-configuration/bpn-configuration.component.scss b/frontend/src/app/modules/page/admin/presentation/bpn-configuration/bpn-configuration.component.scss
index d52c53b390..928a017a67 100644
--- a/frontend/src/app/modules/page/admin/presentation/bpn-configuration/bpn-configuration.component.scss
+++ b/frontend/src/app/modules/page/admin/presentation/bpn-configuration/bpn-configuration.component.scss
@@ -33,6 +33,11 @@
   }
 }
 
+.bpn-config--top-container {
+  display: flex;
+  justify-content: space-between;
+}
+
 .bpn-config--intro {
   width: 90%;
   padding: 10px 20px;
@@ -83,17 +88,7 @@
 }
 
 .bpn-config--save {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  height: 70px;
-  padding: 10px;
-  width: calc(100% + 32px);
-  background: white;
 
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
 }
 
 .bpn-config--delete_animation {