fixed ESS Button layout

eclipse-tractusx · Dec 14, 2023 · d8deddf · d8deddf
1 parent ef5d090
commit d8deddf
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 57 deletions.
diff --git a/frontend/src/app/modules/page/ess/presentation/ess.component.html b/frontend/src/app/modules/page/ess/presentation/ess.component.html
@@ -21,7 +21,7 @@
 <div class="ess-table-container">
   <div class="split-container-wrapper">
     <div class="parts-table-wrapper">
-      <ng-container *viewContainer="esss$ | async; main: mainTmp; error: errorTmp; loading: loaderTmp"/>
+      <ng-container *viewContainer="esss$ | async; main: mainTmp; error: errorTmp; loading: loaderTmp" />
       <ng-template #mainTmp let-esss="view">
         <app-ess-table class="ess-table"
                        [paginationData]="esss.data"
@@ -45,14 +45,15 @@
   </div>
 
   <app-sidenav-wrapper [isOpen]="isPartOpen$ | async">
-    <h1>{{ this.essContext + '.headline' | i18n }}</h1>
-    <p>
-      Please select the product in whose supply chain you want to search for a specific company.
-      You can also select several products. An investigation of the supply chain is started for
-      each selected product.
-    </p>
-    &nbsp;
-    <div class="searchbar-wrapper">
+    <div>
+      <h1>{{ this.essContext + '.headline' | i18n }}</h1>
+      <p>
+        Please select the product in whose supply chain you want to search for a specific company.
+        You can also select several products. An investigation of the supply chain is started for
+        each selected product.
+      </p>
+
+
       <div class="searchbar-container" [formGroup]="searchFormGroup">
         <app-input
           [label]="'parts.input.global-search.placeholder' | i18n"
@@ -68,49 +69,52 @@ <h1>{{ this.essContext + '.headline' | i18n }}</h1>
           suffixIconColor="primary"
         ></app-input>
       </div>
+      <div class="parts-table-wrapper">
+        <ng-container
+          *viewContainer="partsAsPlanned4Ess$ | async; main: mainTmpParts; error: errorTmp; loading: loaderTmp"></ng-container>
+        <ng-template #mainTmpParts let-partsAsPlanned4Ess="view">
+          <app-parts-table class="parts-asPlanned-table"
+                           [buttonContainerClass]="'padding-bottom-1'"
+                           [paginationData]="partsAsPlanned4Ess.data | formatPaginationSemanticDataModelToCamelCase"
+                           [labelId]="titleId"
+                           [selectedPartsInfoLabel]="'page.selectedParts.info'"
+                           [selectedPartsActionLabel]="'page.selectedParts.action'"
+                           [selectedPartEssActionLabel]="'page.selectedEss.action'"
+                           [deselectTrigger]="deselectTrigger$ | async"
+                           [addTrigger]="addTrigger$ | async"
+                           (selected)="onSelectPartItem($event)"
+                           (configChanged)="onAsPlannedTableConfigChange($event)"
+                           (multiSelect)="currentSelectedItems$.next($event)"
+                           (clickSelectEssAction)="openCloseEssCreateDialogForm(true)"
+                           (filterActivated)="filterActivated(true, $event )"
+                           [multiSortList]="tableAsPlannedSortList"
+                           [tableHeader]='"page.asPlannedParts" | i18n'
+                           [tableType]="TableType.AS_PLANNED_OWN"
+                           [listType]="TableType.ESS"
+          ></app-parts-table>
+        </ng-template>
+      </div>
     </div>
-    <ng-container
-      *viewContainer="partsAsPlanned4Ess$ | async; main: mainTmpParts; error: errorTmp; loading: loaderTmp"></ng-container>
-    <ng-template #mainTmpParts let-partsAsPlanned4Ess="view">
-      <app-parts-table class="parts-asPlanned-table"
-                       [paginationData]="partsAsPlanned4Ess.data | formatPaginationSemanticDataModelToCamelCase"
-                       [labelId]="titleId"
-                       [selectedPartsInfoLabel]="'page.selectedParts.info'"
-                       [selectedPartsActionLabel]="'page.selectedParts.action'"
-                       [selectedPartEssActionLabel]="'page.selectedEss.action'"
-                       [deselectTrigger]="deselectTrigger$ | async"
-                       [addTrigger]="addTrigger$ | async"
-                       (selected)="onSelectPartItem($event)"
-                       (configChanged)="onAsPlannedTableConfigChange($event)"
-                       (multiSelect)="currentSelectedItems$.next($event)"
-                       (clickSelectEssAction)="openCloseEssCreateDialogForm(true)"
-                       (filterActivated)="filterActivated(true, $event )"
-                       [multiSortList]="tableAsPlannedSortList"
-                       [tableHeader]='"page.asPlannedParts" | i18n'
-                       [tableType]="TableType.AS_PLANNED_OWN"
-                       [listType]="TableType.ESS"
-      ></app-parts-table>
-    </ng-template>
   </app-sidenav-wrapper>
 
-    <app-sidenav-wrapper [isOpen]="isEssOpen$ | async" (sidenavAction)="isEssOpen$.next($event)">
-      <app-request-ess-investigation
-        *ngIf="isEssOpen$ | async"
-        [selectedItems]="currentSelectedItems$ | async"
-        (deselectPart)="deselectPartTrigger$.next([$event])"
-        (restorePart)="addPartTrigger$.next($event)"
-        (clearSelected)="deselectPartTrigger$.next(currentSelectedItems$.value)"
-        (submitted)="isEssOpen$.next(false)"
-      ></app-request-ess-investigation>
-    </app-sidenav-wrapper>
+  <app-sidenav-wrapper [isOpen]="isEssOpen$ | async" (sidenavAction)="isEssOpen$.next($event)">
+    <app-request-ess-investigation
+      *ngIf="isEssOpen$ | async"
+      [selectedItems]="currentSelectedItems$ | async"
+      (deselectPart)="deselectPartTrigger$.next([$event])"
+      (restorePart)="addPartTrigger$.next($event)"
+      (clearSelected)="deselectPartTrigger$.next(currentSelectedItems$.value)"
+      (submitted)="isEssOpen$.next(false)"
+    ></app-request-ess-investigation>
+  </app-sidenav-wrapper>
 
-    <ng-template #errorTmp let-parts="view">
-        <h1>{{ 'dataLoading.error' | i18n }}</h1>
-        <p>{{ parts.error }}</p>
-    </ng-template>
+  <ng-template #errorTmp let-parts="view">
+    <h1>{{ 'dataLoading.error' | i18n }}</h1>
+    <p>{{ parts.error }}</p>
+  </ng-template>
 
-    <ng-template #loaderTmp let-parts="view">
-        <mat-spinner></mat-spinner>
-    </ng-template>
+  <ng-template #loaderTmp let-parts="view">
+    <mat-spinner></mat-spinner>
+  </ng-template>
 
 </div>
diff --git a/frontend/src/app/modules/shared/components/parts-table/parts-table.component.html b/frontend/src/app/modules/shared/components/parts-table/parts-table.component.html
@@ -20,14 +20,14 @@
 
 <div class="table-header-wrapper">
   <div class="table-header-container">
-    <div class="large-text table--header--text">{{tableHeader}}
-      <mat-icon (click)="openDialog()" class="table&#45;&#45;settings&#45;&#45;button ml-2">
+    <div class="large-text padding-top-bottom-05 table--header--text">{{tableHeader}}
+      <mat-icon (click)="openDialog()" class="table&#45;&#45;settings&#45;&#45;button ml-2 float-right">
         settings
       </mat-icon>
     </div>
-    <div *appHasRole="tableConfig.columnRoles?.['select'] ?? 'user'" class="table&#45;&#45;selected__container">
+    <div *appHasRole="tableConfig.columnRoles?.['select'] ?? 'user'" class="table&#45;&#45;selected__container" [ngClass]="buttonContainerClass">
       <p class="regular-text table&#45;&#45;selected&#45;&#45;label">{{ selectedPartsInfoLabel | i18n : {count: selection?.selected?.length || 0} }}</p>
-      <app-button
+      <app-button class="margin-right-05"
         *ngIf="selection?.selected?.length && tableType == TableType.AS_PLANNED_OWN && showEssButton()"
         (click)="clickSelectEssAction.emit()"
         [variant]="'raised'"

diff --git a/frontend/src/app/modules/shared/components/parts-table/parts-table.component.ts b/frontend/src/app/modules/shared/components/parts-table/parts-table.component.ts
@@ -86,6 +86,8 @@ export class PartsTableComponent implements OnInit {
   @Input() tableType: TableType;
   @Input() listType = TableType.AS_PLANNED_OWN;
 
+  @Input() buttonContainerClass:string;
+
   public tableConfig: TableConfig;
 
   @Input() set paginationData({ page, pageSize, totalItems, content }: Pagination<unknown>) {

diff --git a/frontend/src/theme/base.scss b/frontend/src/theme/base.scss
@@ -89,6 +89,23 @@
     @apply font-light lg:text-base sm:text-sm text-dark;
   }
 
+  .padding-top-bottom-05 {
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+  }
+
+  .margin-right-05 {
+    margin-right: 0.5em;
+  }
+
+  .padding-bottom-1 {
+    padding-bottom: 1em;
+  }
+
+  .float-right {
+    float: right;
+  }
+
   .small-text {
     @apply font-light lg:text-xs sm:text-tiny text-dark;
   }
@@ -182,8 +199,8 @@ app-ess-table {
   }
 }
 
-as-split{
-  height: 61vh!important;
+as-split {
+  height: 61vh !important;
 }
 
 app-other-parts {
@@ -201,9 +218,9 @@ app-parts, app-notification-tab {
 }
 
 app-ess, app-notification-tab {
-  .table-wrapper{
+  .table-wrapper {
     background-color: white;
-    height:45vh;
+    height: 45vh;
   }
 }
 
@@ -227,7 +244,7 @@ app-multiselect {
 app-parts, app-other-parts, app-notifications-tab {
 
   .mat-mdc-table .mdc-data-table__row:last-child {
-   border-bottom: 1px solid lightgrey;
+    border-bottom: 1px solid lightgrey;
   }
 
   .app-bom-lifecycle-activator-container {