Merge pull request #11 from KimFFVII/fix/docs-fixes

feat: added result diagram cookbook, fixes

docs/modules/angular/pages/cookbook/components/group-by-count-diagram/index.adoc

@@ -1,10 +1,98 @@
 = OneCX GroupByCountDiagram
 
+:group_by_count_diagram_storybook: https://main--65f7f64d4506c9f2dfe59383.chromatic.com/?path=/docs/components-groupbycountdiagramcomponent--docs
+
+:idprefix:
+:idseparator: -
+
+[#overview]
 == Overview
-This document aims to showcase how to manage GroupByCountDiagram Component.
+This document aims to showcase how to manage GroupByCountDiagram component.
+
+This component displays the search result data as a diagram. Please, visit the storybook page for the {group_by_count_diagram_storybook}[GroupByCountDiagram component] and interact with the examples to find out if the component is suitable for the desired use-case.
+
+[#customization]
+== Customization
+
+The GroupByCountDiagram component allows for content customization:
+
+* render different types of diagrams
+* enable switching between diagram types
+* set custom colors
+
+To find out how to work with the GroupByCountDiagram component, please visit the {group_by_count_diagram_storybook}[storybook page] and interact with the examples to find out the required features. For more in-depth information on the GroupByCountDiagram component interface, please read the further documentation.
+
+[#inputs]
+== Inputs
+
+[cols="1,1,1,2", options="header"]
+.GroupByCountDiagram inputs
+|===
+| Property name | Type | Default | Description
+
+| `sumKey` | `string` | `FEATURE_SEARCH.DIAGRAM.SUM` | Translation key for label below the chart.
+| `diagramType` | `<<diagram-type, DiagramType>>` | `DiagramType.PIE` | Type of the chart to be displayed as.
+| `supportedDiagramTypes` | `<<diagram-type, DiagramType[]>>` | `[]` | Add multiple Diagram types to be able to switch between them.
+| `data` | `unknown[]` | - | Data to be displayed as a diagram.
+| `columnType` | `<<column-type, ColumnType>>` | `ColumnType.STRING` | Defines the type of the column.
+| `columnField` | `string` | `''` | Defines which column data field to be displayed.
+| `column` | `<<diagram-column, DiagramColumn>>` | - | Defines which columns and its type to be displayed.
+| `fillMissingColors` | `boolean` | `true` | Determines if diagram should generate the colors for the data that does not have any set. Set to false will result in using the provided colors only if every data item has one. When at least one item does not have a color set, diagram will generate all colors.
+| `colors` | `Record<string, string>` | `{}` | Defines custom color for data items.
+|===
+
+[#outputs]
+== Outputs
+
+.GroupByCountDiagram outputs
+|===
+| Property name | Type | Description
+
+| `dataSelected` | `EventEmitter<any>` | Emits data object upon clicking a diagram element.
+| `diagramTypeChanged` | `EventEmitter<<<diagram-type, DiagramType>>>` | Emits the `<<diagram-type, DiagramType>>` when one of the supported diagram types is selected to switch the type.
+| `componentStateChanged` | `EventEmitter<<<group-by-count-diagram-component-state, GroupByCountDiagramComponentState>>>` | Emits the selected `<<diagram-type, DiagramType>>` to ensure consistent component state.
+|===
+
+[#types]
+== Types
+
+[#diagram-type]
+=== DiagramType
+
+.DiagramType enum
+
+[source, javascript]
+----
+    export const enum DiagramType {
+        PIE = 'PIE',
+        VERTICAL_BAR = 'VERTICAL_BAR',
+        HORIZONTAL_BAR = 'HORIZONTAL_BAR',
+    }
+----
+
+[#column-type]
+=== ColumnType
+
+include::partial$column-type.adoc[]
+
+[#diagram-column]
+=== DiagramColumn
+
+.DiagramColumn type
+
+[source, javascript]
+----
+    export type DiagramColumn = { columnType: ColumnType; id: string }
+----
+
+[#group-by-count-diagram-component-state]
+=== GroupByCountDiagramComponentState
 
-// TODO: How to import
-// TODO: How to use - storybook
+.GroupByCountDiagramComponentState interface
 
-// TODO: Overview of properties
-// TODO: Overview of interfaces related
+[source, javascript]
+----
+    export interface GroupByCountDiagramComponentState {
+        activeDiagramType?: DiagramType
+    }
+----

docs/modules/angular/pages/cookbook/components/interactive-data-view/data-table-column.adoc

@@ -0,0 +1,41 @@
+= DataTableColumn
+
+:idprefix:
+:idseparator: -
+
+[#data-table-column-properties-overview]
+== DataTableColumn properties overview
+
+.DataTableColumn interface
+[cols="3,2,9"]
+|===
+| Property name | Type | Description
+
+| `columnType` | `ColumnType` | Defines the type of the column.
+| `id` | `string` | The id of the column.
+| `nameKey` | `string` | Translation key for the column header name.
+| `sortable?` | `boolean` | Indicates if the column is sortable.
+| `filterable?` | `boolean` | Indicates if the column is filterable.
+| `filterType?` | `FilterType` | Defines which type of filter is used.
+| `predefinedGroupKeys?` | `string[]` | Defines the group set in which the following column is available. Additionally, the `predefinedGroups` can be selected from a dropdown menu at the top of the search results table. If you want your search column to belong only to the default column group, then only add `+FEATURE_SEARCH.PREDEFINED_GROUP.DEFAULT+`.
+| `dateFormat?` | `string` | Configuration object allowing for customization of the dialog behavior and visual aspects.
+|===
+
+include::partial$column-type.adoc[]
+
+.FilterType enum
+[source, javascript]
+----
+  export declare enum FilterType {
+      EQUAL = "EQUAL",
+      TRUTHY = "TRUTHY"
+  }
+----
+
+[cols="2,2,3"]
+|===
+| Type | Description
+
+| `EQUAL` | Will create a set of unique values for filtering.
+| `TRUTHY` | Will always have two filter options which result in empty and not empty.
+|===

docs/modules/angular/pages/cookbook/components/interactive-data-view/index.adoc

@@ -1,5 +1,9 @@
 = OneCX InteractiveDataView
 
+:idprefix:
+:idseparator: -
+
+[#overview]
 == Overview
 This document aims to showcase how to manage InteractiveDataView Component.
 

docs/modules/angular/pages/cookbook/components/search-header/index.adoc

@@ -0,0 +1,106 @@
+= OneCX SearchHeader
+
+:search_header_storybook: https://main--65f7f64d4506c9f2dfe59383.chromatic.com/?path=/docs/components-searchheadercomponent--docs
+:page_header_url: xref:angular/cookbook/components/page-header/index.adoc
+
+:idprefix:
+:idseparator: -
+
+[#overview]
+== Overview
+This document aims to showcase how to manage SearchHeader component.
+
+This component displays the search result data as a diagram. Please, visit the storybook page for the {search_header_storybook}[SearchHeader component] and interact with the examples to find out if the component is suitable for the desired use-case.
+
+[#customization]
+== Customization
+
+The SearchHeader component allows for content customization:
+
+* define header title
+* add input fields
+* add header actions buttons
+* `*ocxAdvanced` directive
+** The `*ocxAdvanced` directive specifies whether a field is part of the `basic` or `advanced` mode. This mode can be toggled using the Basic\|Advanced button in the search header which is only displayed when this directive is used for defining advanced input fields. The directive will be added to the div element:
++
+[source, html]
+----
+ <form [formGroup]="criteriaGroup">
+      <div class="grid mt-0 p-fluid">
+        <div *ocxAdvanced class="col-12 md:col-3">
+          <span class="p-float-label">
+           // PLACE YOUR INPUT FIELD HERE
+          </span>
+        </div>
+        ...
+----
+
+To find out how to work with the SearchHeader component, please visit the {search_header_storybook}[storybook page] and interact with the examples to find out the required features. For more in-depth information on the SearchHeader component interface, please read the further documentation.
+
+[#inputs]
+== Inputs
+
+[cols="1,1,1,2", options="header"]
+.SearchHeader inputs
+|===
+|Property name | Type | Default | Description
+
+| `header` | `string` | `''` | Translation key for header title.
+| `subheader` | `string \| undefined` | - | Translation key for sub-header title.
+| `viewMode` | `'basic' \| 'advanced'` | `'basic'` | Determines if `'basic'` or `'advanced'` search criterias are displayed.
+| `manualBreadcrumbs` |`boolean` | `false` | Determines to use custom or default rendered breadcrumbs.
+| `actions` | `<<column-type, ColumnType>>` | `[]` | Array of actions available in the header in form of a button or a menu item. Please refer to {page_header_url}[PageHeader component] for detailed information.
+| `searchButtonDisabled` | `boolean` | `false` | Determines if the search button should be rendered.
+| `resetButtonDisabled` | `boolean` | `false` | Determines if the reset button should be rendered.
+// TODO: Add reference to search config docs?
+| `searchConfigPermission` | `string \| string[] \| undefined` | - | Defines the permission key(s) for displaying the searchConfig.
+| `pageName` | `string \| undefined` | - | Defines page name for searchConfig.
+|===
+
+[#outputs]
+== Outputs
+
+.SearchHeader outputs
+|===
+| Property name | Type | Description
+
+| `searched` | `EventEmitter<any>` | Emits event when search button is clicked.
+| `resetted` | `EventEmitter<any>` | Emits event when reset button is clicked.
+// TODO: Add reference to search config docs?
+| `selectedSearchConfigChanged` | `EventEmitter<<<search-config-data, SearchConfigData>> \| undefined>` | Emits the  `<<search-config-data, SearchConfigData>>` upon change of selected searchConfig.
+| `viewModeChanged` | `EventEmitter<'basic' \| 'advanced'>` | Emits the viewMode `'basic'` or `'advanced'` when the Basic\|Advanced button is clicked.
+| `componentStateChanged` | `EventEmitter <<<search-header-component-state, SearchHeaderComponentState>>>` | Emits the `<<search-header-component-state, SearchHeaderComponentState>>` with updated `viewMode` or `searchConfig` if changed, to ensure consistent component state.
+|===
+
+[#types]
+== Types
+
+[#search-header-component-state]
+=== SearchHeaderComponentState
+
+SearchHeaderComponentState is used to maintain consistent ComponentState.
+
+.SearchHeaderComponentState interface
+|===
+| Property name | Type | Description
+
+| `activeViewMode` | `EventEmitter<any>` | Current active viewMode.
+// TODO: Add reference to search config docs?
+| `selectedSearchConfig` | `EventEmitter<any>` | Current selected searchConfig.
+|===
+
+[#search-config-data]
+=== SearchConfigData
+
+// TODO: Move this to search config docs and add reference to it
+SearchConfigData is used for the SearchConfig component.
+
+.SearchConfigData interface
+|===
+| Property name | Type | Description
+
+| `name` | `string \| undefined` | Name of the searchConfig.
+| `fieldValues` | `{ [key: string]: string }` | Data values to display.
+| `displayedColumnsIds` | `string[]` | List of columns to display.
+| `viewMode` | `'basic' \| 'advanced'` | The viewMode for displaying input fields as `'basic'` or `'advanced'`.
+|===

docs/modules/angular/pages/ngrx/cookbook/adding-search-criteria/autocomplete/autocomplete-number.adoc

@@ -5,15 +5,17 @@
 :!sectids:
 
 [#goal]
-== Goal: Add an AutoComplete for suggestions with array of type number as a search criteria input field for your search page. 
+== Goal: Add AutoComplete Number
 :sectids:
 :sectnums:
 
-NOTE: Please replace all occurences of `+exampleNumberArray+` with the actual name in the following code snippets
+Add an AutoComplete for suggestions with array of type number as a search criteria input field for your search page. 
+
+NOTE: Please replace all occurences of *exampleNumberArray* with the actual name in the following code snippets
 
 [#parameters]
 == Parameters
-Please define the member for your `+<%= featurePropertyName %>SearchCriteriasSchema+` here.
+Please define the member for your *<%= featurePropertyName %>SearchCriteriasSchema* here.
 
 
 _Adapt in File:_ `+<feature>-search.parameters.ts+`
@@ -249,4 +251,4 @@ _Adapt in File:_ `+<feature>-search.effects.ts+`
 ...
 ----
 
-NOTE: Don't forget to add the translations to your de.json and en.json.
+NOTE: Don't forget to add the translations to your *de.json* and *en.json*.

docs/modules/angular/pages/ngrx/cookbook/adding-search-criteria/autocomplete/autocomplete-object.adoc

@@ -1,14 +1,16 @@
-= AutoComplete with array of type object
+= AutoComplete for suggestions with array of type object
 
 :idprefix:
 :idseparator: -
 :!sectids:
 [#goal]
-== Goal: Add an AutoComplete for suggestions with array of type object as a search criteria input field for your search page. 
+== Goal: Add Autocmplete Object
 :sectids:
 :sectnums:
 
-NOTE: Please replace all occurences of `+exampleStringObject+`, `+property1+`, `+property2+` and `+exampleStringObjectProperty1+`, `+exampleStringObjectProperty2+` respectively with the actual names in the following code snippets.
+Add an AutoComplete for suggestions with array of type object as a search criteria input field for your search page. 
+
+NOTE: Please replace all occurences of *exampleStringObject*, *property1*, *property2* and *exampleStringObjectProperty1*, *exampleStringObjectProperty2* respectively with the actual names in the following code snippets.
 
 In this section, we aim to add an AutoComplete input field. The suggestions will be an array of type string. For this use case, we want to display `property1` (a string type property of the object) in the input field and the suggestions and perform a search with `property2` for the search criteria. The object has the following interface:
 
@@ -323,4 +325,4 @@ _Adapt in File:_ `+<feature>-search.effects.ts+`
 ...
 ----
 
-NOTE: Don't forget to add the translations to your de.json and en.json.
+NOTE: Don't forget to add the translations to your *de.json* and *en.json*.

docs/modules/angular/pages/ngrx/cookbook/adding-search-criteria/autocomplete/autocomplete-string.adoc

@@ -1,18 +1,20 @@
-= AutoComplete with array of type string
+= AutoComplete for suggestions with array of type string
 
 :idprefix:
 :idseparator: -
 :!sectids:
 [#goal]
-== Goal: Add an AutoComplete for suggestions with array of type string as a search criteria input field for your search page. 
+== Goal: Add AutoComplet String 
 :sectids:
 :sectnums:
 
+Add an AutoComplete for suggestions with array of type string as a search criteria input field for your search page. 
+
 [#parameters]
 == Parameters
-Please define the member for your `+<%= featurePropertyName %>SearchCriteriasSchema+` here
+Please define the member for your *<%= featurePropertyName %>SearchCriteriasSchema* here
 
-NOTE: Please replace all occurences of `+exampleStringArray+` with the actual name in the following code snippets.
+NOTE: Please replace all occurences of *exampleStringArray* with the actual name in the following code snippets.
 
 _Adapt in File:_ `+<feature>-search.parameters.ts+`
 
@@ -242,4 +244,4 @@ _Adapt in File:_ `+<feature>-search.effects.ts+`
 ...
 ----
 
-NOTE: Don't forget to add the translations to your de.json and en.json.
+NOTE: Don't forget to add the translations to your *de.json* and *en.json*.

docs/modules/angular/pages/ngrx/cookbook/adding-search-criteria/calendar.adoc

@@ -4,11 +4,13 @@
 :idseparator: -
 :!sectids:
 [#goal]
-== Goal: Add a Calendar as a search criteria input field for your search page. 
+== Goal: Add Calendar Input
 :sectids:
 :sectnums:
 
-NOTE: Please replace all occurences of `+exampleDate+` with the actual name in the following code snippets
+Add a Calendar as a search criteria input field for your search page. 
+
+NOTE: Please replace all occurences of *exampleDate* with the actual name in the following code snippets
 
 [#parameters]
 == Parameters
@@ -123,4 +125,4 @@ _Adapt in File:_ `+<feature>-search.effects.ts+`
   );
 ----
 
-NOTE: Don't forget to add the translations to your de.json and en.json.
+NOTE: Don't forget to add the translations to your *de.json* and *en.json*.

docs/modules/angular/pages/ngrx/cookbook/adding-search-criteria/dropdown.adoc

@@ -4,11 +4,13 @@
 :idseparator: -
 :!sectids:
 [#goal]
-== Goal: Add a Dropdown as a search criteria input field for your search page. 
+== Goal: Add Dropdown Input
 :sectids:
 :sectnums:
 
-NOTE: Please replace all occurences of `+exampleEnum+` with the actual name in the following code snippets
+Add a Dropdown as a search criteria input field for your search page.
+
+NOTE: Please replace all occurences of *exampleEnum* with the actual name in the following code snippets
 
 [#parameters]
 == Parameters
@@ -75,5 +77,5 @@ _Adapt in File:_ `+<feature>-search.component.ts+`
     );
 ----
 
-NOTE: Don't forget to add the translations to your de.json and en.json.
+NOTE: Don't forget to add the translations to your *de.json* and *en.json*.