From 7496e4905b7393737d4b80a2d7f898f9936e78bd Mon Sep 17 00:00:00 2001
From: Bastian Jakobi <bastian.jakobi2000@gmail.com>
Date: Mon, 19 Aug 2024 12:53:05 +0200
Subject: [PATCH 1/2] refactor: create initial search header story

---
 .../search-header/search-header.stories.ts    | 116 ++++++++++++++++++
 1 file changed, 116 insertions(+)
 create mode 100644 libs/angular-accelerator/src/lib/components/search-header/search-header.stories.ts

diff --git a/libs/angular-accelerator/src/lib/components/search-header/search-header.stories.ts b/libs/angular-accelerator/src/lib/components/search-header/search-header.stories.ts
new file mode 100644
index 00000000..e36a8a7b
--- /dev/null
+++ b/libs/angular-accelerator/src/lib/components/search-header/search-header.stories.ts
@@ -0,0 +1,116 @@
+import { DatePipe } from '@angular/common'
+import { importProvidersFrom } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { RouterModule } from '@angular/router'
+import { action } from '@storybook/addon-actions'
+import { Meta, StoryFn, applicationConfig, moduleMetadata } from '@storybook/angular'
+import { PrimeIcons } from 'primeng/api'
+import { BreadcrumbModule } from 'primeng/breadcrumb'
+import { ButtonModule } from 'primeng/button'
+import { MenuModule } from 'primeng/menu'
+import { SkeletonModule } from 'primeng/skeleton'
+import { DynamicPipe } from '../../pipes/dynamic.pipe'
+import { StorybookTranslateModule } from '../../storybook-translate.module'
+import { StorybookBreadcrumbModule } from './../../storybook-breadcrumb.module'
+import { AngularAcceleratorModule } from './../../angular-accelerator.module'
+import { SearchHeaderComponent } from './search-header.component'
+import { PageHeaderComponent } from '../page-header/page-header.component'
+import { SearchConfigComponent } from '../search-config/search-config.component'
+import { DropdownModule } from 'primeng/dropdown'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { InputTextModule } from 'primeng/inputtext'
+
+export default {
+  title: 'SearchHeaderComponent',
+  component: SearchHeaderComponent,
+  decorators: [
+    applicationConfig({
+      providers: [
+        importProvidersFrom(BrowserModule),
+        importProvidersFrom(BrowserAnimationsModule),
+        importProvidersFrom(RouterModule.forRoot([], { useHash: true })),
+      ],
+    }),
+    moduleMetadata({
+      declarations: [SearchHeaderComponent, DynamicPipe, PageHeaderComponent, SearchConfigComponent],
+      imports: [
+        MenuModule,
+        InputTextModule,
+        BreadcrumbModule,
+        ButtonModule,
+        DropdownModule,
+        ReactiveFormsModule,
+        SkeletonModule,
+        StorybookTranslateModule,
+        StorybookBreadcrumbModule.init([
+          { label: 'Level 1', routerLink: ['/something'] },
+          { label: 'Level 2', url: '/' },
+        ]),
+      ],
+    }),
+  ],
+} as Meta<SearchHeaderComponent>
+
+const Template: StoryFn<SearchHeaderComponent> = (args) => ({
+  props: args,
+})
+
+export const Basic = {
+  render: Template,
+
+  args: {
+    header: 'My title',
+  },
+}
+
+const BasicSearchHeader: StoryFn<SearchHeaderComponent> = (args) => ({
+  props: args,
+  template: `
+    <ocx-search-header [header]="header" (resetted)="resetted">
+        <form>
+          <div class="flex flex-wrap gap-4 row-gap-3 md:px-2">
+            <span class="p-float-label">
+                <input
+                    id="name"
+                    pInputText
+                    type="text"
+                    class="w-18rem"
+                    [pTooltip]="'Name'"
+                    tooltipPosition="top"
+                    tooltipEvent="hover"
+                />
+                <label for="name" style="white-space: nowrap">
+                    Name
+                </label>
+            </span>
+            <span class="p-float-label">
+                <input
+                    id="name"
+                    pInputText
+                    type="text"
+                    class="w-18rem"
+                    [pTooltip]="'Name'"
+                    tooltipPosition="top"
+                    tooltipEvent="hover"
+                />
+                <label for="name" style="white-space: nowrap">
+                    Name
+                </label>
+            </span>
+          </div>
+        </form>
+    </ocx-search-header>
+    `,
+})
+
+export const WithCustomTemplates = {
+    render: BasicSearchHeader,
+    argTypes: {
+        resetted: { action: 'resetted' },
+      },
+    args: {
+        header: 'My title',
+        resetted: ($event: any) => console.log($event),
+      },
+  }
\ No newline at end of file

From 30d092b64d09dca5fa32b7017958d237a23bf2a7 Mon Sep 17 00:00:00 2001
From: Bastian Jakobi <bastian.jakobi2000@gmail.com>
Date: Mon, 19 Aug 2024 13:43:27 +0200
Subject: [PATCH 2/2] fix: improve search header layout

---
 .../page-header/page-header.component.html    |  2 +-
 .../page-header/page-header.component.scss    |  7 ---
 .../search-header.component.html              | 54 ++++++++++---------
 .../search-header.component.scss              | 12 -----
 .../search-header/search-header.component.ts  |  1 -
 .../search-header/search-header.stories.ts    | 30 +++++++----
 6 files changed, 49 insertions(+), 57 deletions(-)
 delete mode 100644 libs/angular-accelerator/src/lib/components/search-header/search-header.component.scss

diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html
index d51e9c4f..c8e67246 100644
--- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html
+++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html
@@ -8,7 +8,7 @@
       [attr.manual]="manualBreadcrumbs"
     ></p-breadcrumb>
   </ng-container>
-  <div class="title-bar flex flex-row md:justify-content-between p-2 md:p-3">
+  <div class="title-bar flex flex-row md:justify-content-between p-3">
     <div class="title-wrap">
       <div class="figure flex h-2rem w-2rem md:h-3rem md:w-3rem" *ngIf="showFigure">
         <div #previewImage class="figure-image absolute top-0 left-0 right-0 bottom-0">
diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.scss b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.scss
index 8d849ef2..700b9e6c 100644
--- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.scss
+++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.scss
@@ -1,10 +1,6 @@
 :host(.p-button-label) {
   font-weight: 400;
 }
-:host ::ng-deep .action-button {
-  padding: 0.5rem 0.5rem;
-  font-weight: 400;
-}
 .onecx-page-header {
   display: flex;
   flex-flow: column;
@@ -76,9 +72,6 @@
       gap: 0.5rem;
       align-items: center;
       justify-content: space-between;
-      button {
-        padding: 0.5rem;
-      }
     }
   }
   .object-panel {
diff --git a/libs/angular-accelerator/src/lib/components/search-header/search-header.component.html b/libs/angular-accelerator/src/lib/components/search-header/search-header.component.html
index 43ebf8a2..b91d7aab 100644
--- a/libs/angular-accelerator/src/lib/components/search-header/search-header.component.html
+++ b/libs/angular-accelerator/src/lib/components/search-header/search-header.component.html
@@ -15,33 +15,35 @@
   <ng-template #additionalToolbarContent>
     <ng-container *ngIf="_additionalToolbarContent" [ngTemplateOutlet]="_additionalToolbarContent"></ng-container>
   </ng-template>
-  <div class="search-criteria-container">
-    <div #searchParameterFields>
-      <ng-content></ng-content>
-      <div class="search-criteria-buttons">
-        <p-button
-          id="resetButton"
-          *ngIf="resetted.observed"
-          (onClick)="onResetClicked()"
-          label="{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}"
-          icon="pi pi-eraser"
-          [attr.aria-label]="'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate"
-          title="{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}"
-          [disabled]="resetButtonDisabled"
-        >
-        </p-button>
-
-        <p-button
-          id="searchButton"
-          (onClick)="onSearchClicked()"
-          label="{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate }}"
-          icon="pi pi-search"
-          [attr.aria-label]="'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate"
-          title="{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}"
-          [disabled]="searchButtonDisabled"
-        >
-        </p-button>
+  <div class="flex row-gap-3 column-gap-6 flex-wrap align-items-center">
+    <div>
+      <div #searchParameterFields>
+        <ng-content></ng-content>
       </div>
     </div>
+    <div class="flex flex-wrap gap-2">
+      <p-button
+        id="resetButton"
+        *ngIf="resetted.observed"
+        (onClick)="onResetClicked()"
+        label="{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}"
+        icon="pi pi-eraser"
+        [attr.aria-label]="'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate"
+        title="{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}"
+        [disabled]="resetButtonDisabled"
+      >
+      </p-button>
+
+      <p-button
+        id="searchButton"
+        (onClick)="onSearchClicked()"
+        label="{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate }}"
+        icon="pi pi-search"
+        [attr.aria-label]="'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate"
+        title="{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}"
+        [disabled]="searchButtonDisabled"
+      >
+      </p-button>
+    </div>
   </div>
 </ocx-page-header>
diff --git a/libs/angular-accelerator/src/lib/components/search-header/search-header.component.scss b/libs/angular-accelerator/src/lib/components/search-header/search-header.component.scss
deleted file mode 100644
index 114f4ef4..00000000
--- a/libs/angular-accelerator/src/lib/components/search-header/search-header.component.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.search-criteria-buttons {
-  display: flex;
-  flex-flow: row;
-  align-items: flex-start;
-  gap: 0.5rem;
-  margin-top: 0.5rem;
-}
-
-.search-criteria-container {
-  width: 100%;
-  display: flex;
-}
diff --git a/libs/angular-accelerator/src/lib/components/search-header/search-header.component.ts b/libs/angular-accelerator/src/lib/components/search-header/search-header.component.ts
index 5dba8099..9ed1ca80 100644
--- a/libs/angular-accelerator/src/lib/components/search-header/search-header.component.ts
+++ b/libs/angular-accelerator/src/lib/components/search-header/search-header.component.ts
@@ -21,7 +21,6 @@ import { SearchConfigInfo } from '../../model/search-config-info'
 @Component({
   selector: 'ocx-search-header',
   templateUrl: './search-header.component.html',
-  styleUrls: ['./search-header.component.scss'],
 })
 export class SearchHeaderComponent implements AfterViewInit {
   @Input() searchConfigs: SearchConfigInfo[] | undefined
diff --git a/libs/angular-accelerator/src/lib/components/search-header/search-header.stories.ts b/libs/angular-accelerator/src/lib/components/search-header/search-header.stories.ts
index e36a8a7b..ac68dd38 100644
--- a/libs/angular-accelerator/src/lib/components/search-header/search-header.stories.ts
+++ b/libs/angular-accelerator/src/lib/components/search-header/search-header.stories.ts
@@ -1,25 +1,21 @@
-import { DatePipe } from '@angular/common'
 import { importProvidersFrom } from '@angular/core'
+import { ReactiveFormsModule } from '@angular/forms'
 import { BrowserModule } from '@angular/platform-browser'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { RouterModule } from '@angular/router'
-import { action } from '@storybook/addon-actions'
 import { Meta, StoryFn, applicationConfig, moduleMetadata } from '@storybook/angular'
-import { PrimeIcons } from 'primeng/api'
 import { BreadcrumbModule } from 'primeng/breadcrumb'
 import { ButtonModule } from 'primeng/button'
+import { DropdownModule } from 'primeng/dropdown'
+import { InputTextModule } from 'primeng/inputtext'
 import { MenuModule } from 'primeng/menu'
 import { SkeletonModule } from 'primeng/skeleton'
 import { DynamicPipe } from '../../pipes/dynamic.pipe'
 import { StorybookTranslateModule } from '../../storybook-translate.module'
-import { StorybookBreadcrumbModule } from './../../storybook-breadcrumb.module'
-import { AngularAcceleratorModule } from './../../angular-accelerator.module'
-import { SearchHeaderComponent } from './search-header.component'
 import { PageHeaderComponent } from '../page-header/page-header.component'
 import { SearchConfigComponent } from '../search-config/search-config.component'
-import { DropdownModule } from 'primeng/dropdown'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { InputTextModule } from 'primeng/inputtext'
+import { StorybookBreadcrumbModule } from './../../storybook-breadcrumb.module'
+import { SearchHeaderComponent } from './search-header.component'
 
 export default {
   title: 'SearchHeaderComponent',
@@ -69,7 +65,7 @@ const BasicSearchHeader: StoryFn<SearchHeaderComponent> = (args) => ({
   template: `
     <ocx-search-header [header]="header" (resetted)="resetted">
         <form>
-          <div class="flex flex-wrap gap-4 row-gap-3 md:px-2">
+          <div class="flex flex-wrap gap-3">
             <span class="p-float-label">
                 <input
                     id="name"
@@ -98,6 +94,20 @@ const BasicSearchHeader: StoryFn<SearchHeaderComponent> = (args) => ({
                     Name
                 </label>
             </span>
+            <span class="p-float-label">
+            <input
+                id="name"
+                pInputText
+                type="text"
+                class="w-18rem"
+                [pTooltip]="'Name'"
+                tooltipPosition="top"
+                tooltipEvent="hover"
+            />
+            <label for="name" style="white-space: nowrap">
+                Name
+            </label>
+        </span>
           </div>
         </form>
     </ocx-search-header>