Update v92 from source repository

.commit

@@ -1 +1 @@
-47d44c74207f3d773d1ffa718dc102fa887f1cab
+f1d5948d892d7b711ece214c0813f59849a9676b

.sync-history

@@ -1 +0,0 @@
-41487b63c 2024-02-29 Merged PR 65170: #446439 - Develop new request url params

README.md

@@ -3,6 +3,42 @@
 # Identity Manager HTML5 applications
 
 ## Change log
+
+### May 6, 2024
+
+We are integrating [Compodoc](https://compodoc.app/) to provide Angular documentation for our components. Please see the [Documentation](#documentation) section for more information on how to generate documentation.
+
+The package versions have been updated to 9.2.1.
+
+The `v92` branch has been updated with fixes for the following issues.
+
+**Important**: Integrating these changes will require a server-side hotfix for the issue 454356 to be installed.
+
+- 454675: Fixed an issue where sometimes a blank screen was displayed instead of the login page
+- 446439: Fixed the preselection of a child service category on the new request page
+- 440745: Fixed the preset of the search term on the new request page
+- 454356: Data Explorer identities needs to load interactive entities.
+- 453350/447417/453346: Fixed issues where the filter wizard could enter an inconsistent state
+- 453132: Fixed an issue in the attestation policy editor where the "objects matching the condition" were not displayed hierarchically
+- 438231: Added documentation of some basic components
+- 450070: Fixed an issue where switching to another page while loading a page caused an error
+- 453932: Fixed an issue where approving multiple requests in bulk could cause an error
+- 439918: Fixed some issues in the product bundles component
+- 450675: Fixed an issue where some help text was shown in an incorrect language
+- 452886: Fixed an issue in the attestation policy editor
+- 449616: Fixed an issue where reports could not be saved in format other then PDF
+- 450404: Fixed an issue in the overview of attestation case approvers.
+- 442324: Duplicate (additional) "Target system" columns in the Data Explorer
+- 448531: Fixed a scrolling issue on the organizational chart view
+- 449891: Fixed the inherited group membership pagination
+- 448406: Fixed an issue where the list of entitlements assigned to a role was incomplete
+- 418493: Fixed an issue in the overview of request approvers
+- 447713: Fixed a styling issue with the login button
+- 449124: Fixed the declaration of the metadata service
+- 447723: Fixed an issue with additional columns in a grouped table view
+- 442324: Fixed the duplicate "Target system" columns in the Data Explorer
+- 447039: Fixed an issue where the FK picker could enter an inconsistent state
+
 ### March 11, 2024
 The v92 branch has been updated with fixes for the following issues.
 

imxweb/.vscode/settings.json

@@ -1,5 +1,8 @@
 {
     "explorer.compactFolders": false,
     "editor.tabSize": 2,
-    "git.ignoreLimitWarning": true
+    "git.ignoreLimitWarning": true,
+    "cSpell.words": [
+        "requestable"
+    ]
 }

imxweb/compodoc/samples/data_table.md

@@ -0,0 +1,261 @@
+# Working with data tables
+
+A frequently recurring task is the representation of data in tables. The IMX QBM library offers components that facilitate the visualization of data and take the special IMX data structure into account.
+
+Data tables offer a lot of configuration possibilities. We will present the most important ones in this sample.
+
+The two most important modules in this context are "data-source-toolbar" (projects\qbm\src\lib\data-source-toolbar) and "data-table" (projects\qbm\src\lib\data-table).
+
+The basic structure consists of 3 elements, the data source toolbar, the actual table and a paginator.
+
+![overall Structure](../../assets/images/data_table/1-overall-structure.png)
+
+In addition to the ability to search, filter, etc, the Data Source Toolbar contains a Data Source component that is used by the Data Table and the Paginator to display data and move within the data set. Think of the DST (Data Source Toolbar) as a link between the Data Table and the Paginator.
+
+
+The "Hello World" version of the Data Table component looks like as follow.
+
+> Code
+``` html
+<h1 class="mat-headline">{{ '#LDS#Identities' | translate }}</h1>
+
+<imx-data-source-toolbar
+  #dst
+  [settings]="dstSettings"
+  (navigationStateChanged)="onNavigationStateChanged($event)"
+></imx-data-source-toolbar>
+
+<imx-data-table
+  [dst]="dst"
+  mode="auto"
+>
+</imx-data-table>
+
+<imx-data-source-paginator [dst]="dst"></imx-data-source-paginator>
+```
+
+> Code 
+``` ts
+
+@Component({
+  selector: 'imx-select-identity',
+  templateUrl: './select-identity.component.html',
+  styleUrls: ['./select-identity.component.scss'],
+})
+export class SelectIdentityComponent implements OnInit {
+  public dstSettings: DataSourceToolbarSettings;
+  public readonly schema: EntitySchema;
+  public readonly DisplayColumns = DisplayColumns;
+  public navigationState: CollectionLoadParameters = { PageSize: 20 };
+
+  private displayedColumns: IClientProperty[] = [];
+
+  constructor(private readonly qerApiClient: QerApiService) {
+    this.schema = this.qerApiClient.typedClient.PortalPersonAll.GetSchema();
+    this.displayedColumns = [
+      this.schema.Columns[DisplayColumns.DISPLAY_PROPERTYNAME],
+      this.schema.Columns.DefaultEmailAddress
+    ];
+  }
+
+  public async ngOnInit(): Promise<void> {
+    await this.navigate();
+  }
+
+  public async onNavigationStateChanged(newState?: CollectionLoadParameters): Promise<void> {
+    if (newState) {
+      this.navigationState = newState;
+    }
+    await this.navigate();
+  }
+
+  private async navigate(): Promise<void> {
+    const data = await this.qerApiClient.typedClient.PortalPersonAll.Get(this.navigationState);
+
+    this.dstSettings = {
+      displayedColumns: this.displayedColumns,
+      dataSource: data,
+      entitySchema: this.schema,
+      navigationState: this.navigationState,
+    };
+  }
+}
+
+```
+
+The minimum set of properties that must be set are "EntitySchema", "DisplayColumns" and "CollectionLoadParameters". 
+
+Three places in the .ts Datei are worth to be highlighted.
+
+> Code
+``` ts
+ this.displayedColumns = [
+      this.schema.Columns[DisplayColumns.DISPLAY_PROPERTYNAME],
+      this.schema.Columns.DefaultEmailAddress
+    ];
+```
+
+"displayedColumns" defines which columns the table should display.
+
+> Code
+``` ts
+  public async onNavigationStateChanged(newState?: CollectionLoadParameters): Promise<void> {
+    if (newState) {
+      this.navigationState = newState;
+    }
+    await this.navigate();
+  }
+```
+
+This event handler is called every time the state of the data changes, e.g. when the user navigates to the next page.
+
+> Code
+``` ts
+ private async navigate(): Promise<void> {
+    const data = await this.qerApiClient.typedClient.PortalPersonAll.Get(this.navigationState);
+
+    this.dstSettings = {
+      displayedColumns: this.displayedColumns,
+      dataSource: data,
+      entitySchema: this.schema,
+      navigationState: this.navigationState,
+    };
+  }
+```
+The "navigate()" method retrievs data from the API server. The actual request is made by calling the API client ("this.qerApiClient.typedClient.PortalPersonAll.Get(this.navigationState)"). The concept of API clients is described in a separate sample.
+
+The first version of the component looks like this.
+
+![First Version](../../assets/images/data_table/2-first-version.png)
+
+## Designing the table
+
+The table above shows two fields that are rendered automatically. It is also possible to design columns manually. Whether the table is rendered automatically or manually is controlled by the "mode" input field.
+
+> Code
+``` html
+<imx-data-table
+  [dst]="dst"
+  mode="auto"
+>
+</imx-data-table>
+```
+
+"mode" can take two values: "auto" and "manual". 
+
+To display the previous table in manual mode, we need to add the two columns to the html template.
+
+> Code
+``` html
+<imx-data-table [dst]="dst" mode="manual">
+  <imx-data-table-column [entityColumn]="schema?.Columns[DisplayColumns.DISPLAY_PROPERTYNAME]">
+    <ng-template let-item>
+      <div>{{ item.GetEntity().GetDisplay() }}</div>
+    </ng-template>
+  </imx-data-table-column>
+  <imx-data-table-column [entityColumn]="schema?.Columns.DefaultEmailAddress">
+    <ng-template let-item>
+      <div>{{ item.DefaultEmailAddress.Column.GetDisplayValue() }}</div>
+    </ng-template>
+  </imx-data-table-column>
+</imx-data-table>
+```
+In the next step we will add a new column to the table containing a button and slightly modify the first column.
+
+The first column currently shows the default display of the object. We want to add a second row that indicates whether the person is a primary identity or not.
+
+> Code
+``` html
+<imx-data-table [dst]="dst" mode="manual">
+  <imx-data-table-column [entityColumn]="schema?.Columns[DisplayColumns.DISPLAY_PROPERTYNAME]">
+    <ng-template let-item>
+      <div>{{ item.GetEntity().GetDisplay() }}</div>
+      <div>{{ item.IdentityType.Column.GetDisplayValue() }}</div>
+    </ng-template>
+  </imx-data-table-column>
+  <imx-data-table-column [entityColumn]="schema?.Columns.DefaultEmailAddress">
+    <ng-template let-item>
+      <div>{{ item.DefaultEmailAddress.Column.GetDisplayValue() }}</div>
+    </ng-template>
+  </imx-data-table-column>
+</imx-data-table>
+```
+
+Next we will add a third column that will contain a button. To display data of an object the table uses the "<imx-data-table-column>" tag. To display other types of elements, such as buttons, we use the "<imx-data-table-generic-column>" tag.
+Before we can display the button, we need to add the new synthetic column to the columns to be displayed. This is done in the *.ts file.
+
+> Code
+``` ts
+ this.displayedColumns = [
+      this.schema.Columns[DisplayColumns.DISPLAY_PROPERTYNAME],
+      this.schema.Columns.DefaultEmailAddress,
+      {
+        ColumnName: 'viewDetailsButton',
+        Type: ValType.String
+      }
+    ];
+```
+
+
+> Code
+``` html
+<imx-data-table [dst]="dst" mode="manual">
+  <imx-data-table-column [entityColumn]="schema?.Columns[DisplayColumns.DISPLAY_PROPERTYNAME]">
+    <ng-template let-item>
+      <div>{{ item.GetEntity().GetDisplay() }}</div>
+      <div>{{ item.IdentityType.Column.GetDisplayValue() }}</div>
+    </ng-template>
+  </imx-data-table-column>
+  <imx-data-table-column [entityColumn]="schema?.Columns.DefaultEmailAddress">
+    <ng-template let-item>
+      <div>{{ item.DefaultEmailAddress.Column.GetDisplayValue() }}</div>
+    </ng-template>
+  </imx-data-table-column>
+  <imx-data-table-generic-column columnName="viewDetailsButton">
+    <ng-template>
+      <button mat-button color="primary">
+        {{ '#LDS#Details' | translate }}
+      </button>
+    </ng-template>
+  </imx-data-table-generic-column>
+</imx-data-table>
+```
+
+The extended component now looks like this.
+
+![Version with search enabled](../../assets/images/data_table/4-table-with-search.png)
+
+## Adding search
+
+Enabling search is pretty straightforward. 
+To do this, you must first enable the "search" option and secondly implement a method that processes the output of the "search" output parameter. 
+
+The following code snippets shows these changes.
+
+> Code
+``` html
+<imx-data-source-toolbar
+  #dst
+  [settings]="dstSettings"
+  (navigationStateChanged)="onNavigationStateChanged($event)"
+  [options]="['search']"
+  (search)="onSearch($event)"
+></imx-data-source-toolbar>
+```
+
+> Code
+``` ts
+  public async onSearch(keywords: string): Promise<void> {
+    this.navigationState.StartIndex = 0;
+    this.navigationState.search = keywords;
+    await this.navigate();
+  }
+```
+
+
+![Version with search enabled](../../assets/images/data_table/3-table-with-search-enabled.png)
+
+
+
+
+