generator-jhipster 7.8.0 → 7.9.1

package/generators/entity-client/templates/angular/src/main/webapp/app/entities/delete/entity-management-delete-dialog.component.ts.ejs

@@ -21,6 +21,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { I<%= entityAngularName %> } from '../<%= entityFileName %>.model';
 import { <%= entityAngularName %>Service } from '../service/<%= entityFileName %>.service';
+import { ITEM_DELETED_EVENT } from 'app/config/navigation.constants';
 
 @Component({
     templateUrl: './<%= entityFileName %>-delete-dialog.component.html'
@@ -36,7 +37,7 @@ export class <%= entityAngularName %>DeleteDialogComponent {
 
     confirmDelete(id: <%= tsKeyType %>): void {
         this.<%= entityInstance %>Service.delete(id).subscribe(() => {
-            this.activeModal.close('deleted');
+            this.activeModal.close(ITEM_DELETED_EVENT);
         });
     }
 }

package/generators/entity-client/templates/angular/src/main/webapp/app/entities/detail/entity-management-detail.component.html.ejs

@@ -19,7 +19,7 @@
 <div class="d-flex justify-content-center">
     <div class="col-8">
         <div *ngIf="<%= entityInstance %>">
-            <h2 data-cy="<%= entityInstance %>DetailsHeading"><span <%= jhiPrefix %>Translate="<%= i18nKeyPrefix %>.detail.title"><%= entityClassHumanized %></span></h2>
+            <h2 data-cy="<%= entityInstance %>DetailsHeading"><span <%= jhiPrefix %>Translate="<%= i18nKeyPrefix %>.detail.title"><%- this._getEntityClientTranslation(i18nKeyPrefix + '.detail.title') %></span></h2>
 
             <hr>
 
@@ -32,9 +32,10 @@
     const fieldName = field.fieldName;
     const fieldType = field.fieldType;
 _%>
-                <dt><span <%= jhiPrefix %>Translate="<%= field.fieldTranslationKey %>"<% if (field.javadoc) { if (enableTranslation) { %> [ngbTooltip]="'<%= i18nKeyPrefix %>.help.<%= fieldName %>' | translate"<% } else { %> ngbTooltip="<%= field.javadoc %>"<% } } %>><%= field.fieldNameHumanized %></span></dt>
+                <dt><span <%= jhiPrefix %>Translate="<%= field.fieldTranslationKey %>"<% if (field.javadoc) { if (enableTranslation) { %> [ngbTooltip]="'<%= i18nKeyPrefix %>.help.<%= fieldName %>' | translate"<% } else { %> ngbTooltip="<%= field.javadoc %>"<% } } %>><%- this._getEntityClientTranslation(field.fieldTranslationKey) %></span></dt>
                 <dd>
     <%_ if (field.fieldIsEnum) { _%>
+                    <%# TODO: import enum and use its key as label _%>
                     <span <%= jhiPrefix %>Translate="{{ '<%= frontendAppName %>.<%= fieldType %>.' + <%= entityInstance %>.<%= fieldName %> }}">{{ <%= entityInstance %>.<%= fieldName %> }}</span>
     <%_ } else if (field.fieldTypeBinary && field.blobContentTypeImage) { _%>
                     <div *ngIf="<%= entityInstance %>.<%= fieldName %>">
@@ -45,7 +46,7 @@ _%>
                     </div>
     <%_ } else if (field.fieldTypeBinary && field.blobContentTypeAny) { _%>
                     <div *ngIf="<%= entityInstance %>.<%= fieldName %>">
-                        <a (click)="openFile(<%= entityInstance %>.<%= fieldName %>, <%= entityInstance %>.<%= fieldName %>ContentType)" <%= jhiPrefix %>Translate="entity.action.open">open</a>
+                        <a (click)="openFile(<%= entityInstance %>.<%= fieldName %>, <%= entityInstance %>.<%= fieldName %>ContentType)" <%= jhiPrefix %>Translate="entity.action.open"><%- this._getClientTranslation('entity.action.open') %></a>
                         {{ <%= entityInstance %>.<%= fieldName %>ContentType }}, {{ byteSize(<%= entityInstance %>.<%= fieldName %>) }}
                     </div>
     <%_ } else if (field.fieldTypeDuration) { _%>
@@ -70,24 +71,24 @@ for (const relationship of relationships.filter(rel => !rel.otherEntityIsEmbedde
     const otherEntityField = relationship.otherEntityField;
     if (ownerSide) {
 _%>
-                <dt><span <%= jhiPrefix %>Translate="<%= i18nKeyPrefix %>.<%= relationshipName %>"><%= relationshipNameHumanized %></span></dt>
+                <dt><span <%= jhiPrefix %>Translate="<%= i18nKeyPrefix %>.<%= relationshipName %>"><%- this._getEntityClientTranslation(i18nKeyPrefix + '.' + relationshipName) %></span></dt>
                 <dd>
     <%_ if (relationship.otherEntityUser) { _%>
-        <%_ if (relationship.relationshipManyToMany) { _%>
+        <%_ if (relationship.collection) { _%>
                     <span *ngFor="let <%= relationshipFieldName %> of <%= entityInstance %>.<%= relationshipFieldNamePlural %>; let last = last">
                         {{ <%= relationshipFieldName %>.<%= otherEntityField %> }}{{ last ? '' : ', ' }}
                     </span>
         <%_ } else { _%>
-                    <span>{{ <%= entityInstance + "." + relationshipFieldName + "?." + otherEntityField %> }}</span>
+                    <span>{{ <%= entityInstance %>.<%= relationshipFieldName %>?.<%= otherEntityField %> }}</span>
         <%_ } _%>
     <%_ } else { _%>
-        <%_ if (relationship.relationshipManyToMany) { _%>
+        <%_ if (relationship.collection) { _%>
                     <span *ngFor="let <%= relationshipFieldName %> of <%= entityInstance %>.<%= relationshipFieldNamePlural %>; let last = last">
-                        <a [routerLink]="['/<%= otherEntityStateName %>', <%= relationshipFieldName %>?.<%= relationship.otherEntity.primaryKey.name %>, 'view']">{{ <%= relationshipFieldName %>.<%= otherEntityField %> }}</a>{{ last ? '' : ', ' }}
+                        <a [routerLink]="['/<%= otherEntityStateName %>', <%= relationshipFieldName %>.<%= relationship.otherEntity.primaryKey.name %>, 'view']">{{ <%= relationshipFieldName %>.<%= otherEntityField %> }}</a>{{ last ? '' : ', ' }}
                     </span>
         <%_ } else { _%>
                     <div *ngIf="<%= entityInstance + '.' + relationshipFieldName %>">
-                        <a [routerLink]="['/<%= otherEntityStateName %>', <%= entityInstance + '.' + relationshipFieldName + '?.' + relationship.otherEntity.primaryKey.name %>, 'view']">{{ <%= entityInstance + "." + relationshipFieldName + "?." + otherEntityField %> }}</a>
+                        <a [routerLink]="['/<%= otherEntityStateName %>', <%= entityInstance + '.' + relationshipFieldName + '.' + relationship.otherEntity.primaryKey.name %>, 'view']">{{ <%= entityInstance %>.<%= relationshipFieldName %>?.<%= otherEntityField %> }}</a>
                     </div>
         <%_ } _%>
     <%_ } _%>
@@ -102,14 +103,14 @@ _%>
                     (click)="previousState()"
                     class="btn btn-info"
                     data-cy="entityDetailsBackButton">
-                <fa-icon icon="arrow-left"></fa-icon>&nbsp;<span <%= jhiPrefix %>Translate="entity.action.back">Back</span>
+                <fa-icon icon="arrow-left"></fa-icon>&nbsp;<span <%= jhiPrefix %>Translate="entity.action.back"><%- this._getClientTranslation('entity.action.back') %></span>
             </button>
 <%_ if (!readOnly) { _%>
 
             <button type="button"
                     [routerLink]="['/<%= entityPage %>', <%= entityInstance %>.<%= primaryKey.name %>, 'edit']"
                     class="btn btn-primary">
-                <fa-icon icon="pencil-alt"></fa-icon>&nbsp;<span <%= jhiPrefix %>Translate="entity.action.edit">Edit</span>
+                <fa-icon icon="pencil-alt"></fa-icon>&nbsp;<span <%= jhiPrefix %>Translate="entity.action.edit"><%- this._getClientTranslation('entity.action.edit') %></span>
             </button>
 <%_ } _%>
         </div>

package/generators/entity-client/templates/angular/src/main/webapp/app/entities/entity-management.module.ts.ejs

@@ -39,10 +39,5 @@ import { <%= entityAngularName %>RoutingModule } from './route/<%= entityFileNam
     <%= entityAngularName %>DeleteDialogComponent,
 <%_ } %>
   ],
-<%_ if (!readOnly) { _%>
-  entryComponents: [
-    <%= entityAngularName %>DeleteDialogComponent
-  ]
-<%_ } _%>
 })
 export class <%= locals.microserviceName ? upperFirstCamelCase(locals.microserviceName) : '' %><%= entityAngularName %>Module {}

package/generators/entity-client/templates/angular/src/main/webapp/app/entities/entity.model.ts.ejs

@@ -17,43 +17,36 @@
  limitations under the License.
 -%>
 <%
-const variablesWithTypes = generateEntityClientFields(primaryKey, fields, relationships, dto, undefined, embedded);
-const typeImports = generateEntityClientImports(relationships, dto);
-const defaultVariablesValues = generateEntityClientFieldDefaultValues(fields);
 const enumImports = generateEntityClientEnumImports(fields);
 %>
 <%_ if (fieldsContainInstant || fieldsContainZonedDateTime || fieldsContainLocalDate) { _%>
 import dayjs from 'dayjs/esm';
 <%_ } _%>
-<%_ typeImports.forEach((importedPath, importedType) => { _%>
-    <%_ if (importedType !== `I${entityAngularName}`) { _%>
-import { <%- importedType %> } from '<%- importedPath %>';
-    <%_ } _%>
-<%_ }); _%>
+<%_ for (const relationshipsByType of Object.values(differentRelationships).filter(relationshipsByType => relationshipsByType.some(relationship => (relationship.ownerSide || relationship.relationshipManyToMany) && relationship.otherEntity.entityAngularName !== entityAngularName))) {
+      const { otherEntity } = relationshipsByType[0];
+_%>
+import { I<%- otherEntity.entityAngularName %> } from 'app/entities/<%= otherEntity.entityClientRootFolder %><%= otherEntity.entityFolderName %>/<%= otherEntity.entityFileName %>.model';
+<%_ } _%>
 <%_ enumImports.forEach((importedPath, importedType) => { _%>
 import { <%- importedType %> } from '<%- importedPath %>';
 <%_ }); _%>
 
 export interface I<%= entityAngularName %> {
-<%_ variablesWithTypes.forEach(variablesWithType => { _%>
-    <%- variablesWithType %>;
-<%_ }); _%>
-}
-
-export class <%= entityAngularName %> implements I<%= entityAngularName %> {
-    constructor(
-<%_ variablesWithTypes.forEach(variablesWithType => { _%>
-        public <%- variablesWithType %>,
-<%_ }); _%>
-    ) {
-<%_ for (idx in defaultVariablesValues) { _%>
-        <%- defaultVariablesValues[idx] %>
+<%_ for (const field of fields) {
+      const { fieldName, fieldValidationRequired, tsType, id } = field;
+_%>
+  <%= fieldName %><% if (!id /* && !fieldValidationRequired */) { %>?<% } %>: <%= tsType %><% if (!id /* && !fieldValidationRequired */) { %> | null<% } %>;
+  <%_ if (field.fieldTypeBinary && !field.blobContentTypeText) { _%>
+  <%= fieldName %>ContentType<% if (!id /* && !fieldValidationRequired */) { %>?<% } %>: string<% if (!id /* && !fieldValidationRequired */) { %> | null<% } %>,
+  <%_ } _%>
+<%_ } _%>
+<%_ for (const relationship of relationships.filter(relationship => relationship.ownerSide || relationship.relationshipManyToMany)) {
+      const { propertyName, relationshipRequired, otherEntity, id, collection, otherEntityField } = relationship;
+_%>
+  <%= propertyName %>?: Pick<I<%= otherEntity.entityAngularName %>, '<%= otherEntity.primaryKey.name %>'<% if (otherEntity.primaryKey.name !== otherEntityField) { %> | '<%= otherEntityField %>'<% } %>><% if (collection) { %>[]<% } %> | null;
 <%_ } _%>
-    }
 }
 <%_ if (primaryKey) { _%>
 
-export function get<%= entityAngularName %>Identifier(<%= entityInstance %>: I<%= entityAngularName %>): <%= primaryKey.tsType %> | undefined {
-  return <%= entityInstance %>.<%= primaryKey.name %>;
-}
+export type New<%= entityAngularName %> = Omit<I<%= entityAngularName %>, '<%= primaryKey.name %>'> & { <%= primaryKey.name %>: null };
 <%_ } _%>

package/generators/entity-client/templates/angular/src/main/webapp/app/entities/entity.test-samples.ts.ejs

@@ -0,0 +1,45 @@
+<%#
+ Copyright 2013-2022 the original author or authors from the JHipster project.
+
+ This file is part of the JHipster project, see https://www.jhipster.tech/
+ for more information.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-%>
+<%_
+  const enumImports = generateEntityClientEnumImports(fields);
+_%>
+<%_ if (fieldsContainDate) { _%>
+import dayjs from 'dayjs/esm';
+<%_ } _%>
+
+<%_ enumImports.forEach( (importedPath, importedType) => { _%>
+import { <%- importedType %> } from '<%- importedPath %>';
+<%_ }); _%>
+
+import { I<%= entityAngularName %><% if (primaryKey) { %>, New<%= entityAngularName %><% } %> } from './<%= entityFileName %>.model';
+
+export const sampleWithRequiredData: I<%= entityAngularName %> = <%- generateTypescriptTestEntity(fields.filter(field => field.id || field.fieldValidationRequired).map(field => field.reference)) %>;
+
+export const sampleWithPartialData: I<%= entityAngularName %> = <%- generateTypescriptTestEntity(fields.filter(field => field.id || field.fieldValidationRequired || (!field.transient && faker.datatype.boolean())).map(field => field.reference)) %>;
+
+export const sampleWithFullData: I<%= entityAngularName %> = <%- generateTypescriptTestEntity(fields.filter(field => !field.transient).map(field => field.reference)) %>;
+<%_ if (primaryKey) { _%>
+
+export const sampleWithNewData: New<%= entityAngularName %> = <%- generateTypescriptTestEntity(fields.filter(field => !field.id && field.fieldValidationRequired).map(field => field.reference), { [primaryKey.name]: null }) %>;
+
+Object.freeze(sampleWithNewData);
+<%_ } _%>
+Object.freeze(sampleWithRequiredData);
+Object.freeze(sampleWithPartialData);
+Object.freeze(sampleWithFullData);

package/generators/entity-client/templates/angular/src/main/webapp/app/entities/list/entity-management.component.html.ejs

@@ -16,31 +16,21 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-<%_
-  let refreshMethod;
-  if (paginationPagination) {
-    refreshMethod = 'loadPage()';
-  } else if (paginationInfiniteScroll) {
-    refreshMethod = 'reset()';
-  } else if (paginationNo) {
-    refreshMethod = 'loadAll()';
-  }
-_%>
 <div>
     <h2 id="page-heading" data-cy="<%= entityClass %>Heading">
-        <span <%= jhiPrefix %>Translate="<%= i18nKeyPrefix %>.home.title"><%= entityClassPluralHumanized %></span>
+        <span <%= jhiPrefix %>Translate="<%= i18nKeyPrefix %>.home.title"><%- this._getEntityClientTranslation(i18nKeyPrefix + '.home.title') %></span>
 
         <div class="d-flex justify-content-end">
-            <button class="btn btn-info me-2" (click)="<%= refreshMethod %>" [disabled]="isLoading">
+            <button class="btn btn-info me-2" (click)="load()" [disabled]="isLoading">
                 <fa-icon icon="sync" [spin]="isLoading"></fa-icon>
-                <span <%= jhiPrefix %>Translate="<%= i18nKeyPrefix %>.home.refreshListLabel">Refresh List</span>
+                <span <%= jhiPrefix %>Translate="<%= i18nKeyPrefix %>.home.refreshListLabel"><%- this._getEntityClientTranslation(i18nKeyPrefix + '.home.refreshListLabel') %></span>
             </button>
             <%_ if (!readOnly) { _%>
 
             <button id="jh-create-entity" data-cy="entityCreateButton" class="btn btn-primary jh-create-entity create-<%= entityUrl %>" [routerLink]="['/<%= entityPage %>/new']">
                 <fa-icon icon="plus"></fa-icon>
-                <span <% if (searchEngine !== false) { %>class="hidden-sm-down" <% } %> <%= jhiPrefix %>Translate="<%= i18nKeyPrefix %>.home.createLabel">
-                Create a new <%= entityClassHumanized %>
+                <span <% if (searchEngine) { %>class="hidden-sm-down" <% } %> <%= jhiPrefix %>Translate="<%= i18nKeyPrefix %>.home.createLabel">
+                <%- this._getEntityClientTranslation(i18nKeyPrefix + '.home.createLabel') %>
                 </span>
             </button>
             <%_ } _%>
@@ -55,7 +45,7 @@ _%>
     <form name="searchForm" class="row row-cols-sm-auto align-items-center">
         <div class="col-sm-12">
             <div class="input-group w-100 mt-3">
-                <label class="visually-hidden" for="currentSearch" <%= jhiPrefix %>Translate="<%= i18nKeyPrefix %>.home.search">Query</label>
+                <label class="visually-hidden" for="currentSearch" <%= jhiPrefix %>Translate="<%= i18nKeyPrefix %>.home.search"><%- this._getEntityClientTranslation(i18nKeyPrefix + '.home.search') %></label>
                 <input type="text" class="form-control" [(ngModel)]="currentSearch" id="currentSearch" name="currentSearch" placeholder="<% if (enableTranslation) { %>{{ '<%= i18nKeyPrefix %>.home.search' | translate }}<% } else { %>Query<% } %>">
 
                 <button class="btn btn-info" (click)="search(currentSearch)">
@@ -70,25 +60,29 @@ _%>
     </form>
 <%_ } _%>
 
+<%_ if (jpaMetamodelFiltering && paginationPagination) { _%>
+    <<%= jhiPrefixDashed %>-filter [filters]="filters" (filterChange)="navigateToWithComponentValues()"></<%= jhiPrefixDashed %>-filter>
+<%_ } _%>
+
     <div class="alert alert-warning" id="no-result" *ngIf="<%= entityInstancePlural %>?.length === 0">
-        <span <%= jhiPrefix %>Translate="<%= i18nKeyPrefix %>.home.notFound">No <%= entityInstancePlural %> found</span>
+        <span <%= jhiPrefix %>Translate="<%= i18nKeyPrefix %>.home.notFound"><%- this._getEntityClientTranslation(i18nKeyPrefix + '.home.notFound') %></span>
     </div>
 
     <div class="table-responsive" id="entities" *ngIf="<%= entityInstancePlural %> && <%= entityInstancePlural %>.length > 0">
         <table class="table table-striped" aria-describedby="page-heading">
             <thead>
-                <tr<% if (!paginationNo) { %> <%= jhiPrefix %>Sort [(predicate)]="predicate" [(ascending)]="ascending" (sortChange)="<%= !paginationInfiniteScroll ? 'loadPage()' : 'reset()'%>"<% } %>>
+                <tr <%= jhiPrefix %>Sort [(predicate)]="predicate" [(ascending)]="ascending" (sortChange)="navigateToWithComponentValues()">
 <%_ for (const field of fields.filter(field => !field.hidden)) { _%>
-                    <th scope="col"<% if (!paginationNo) { %> <%= jhiPrefix %>SortBy="<%= field.fieldName %>"<% } %>><span <%= jhiPrefix %>Translate="<%= field.fieldTranslationKey %>"><%= field.fieldNameHumanized %></span><% if (!paginationNo) { %> <fa-icon <% if (searchEngine && !field.fieldTypeBoolean && !field.fieldTypeNumeric && !field.fieldTypeTemporal) { %>*ngIf="!currentSearch" <% } %>icon="sort"></fa-icon><% } %></th>
+                    <th scope="col" <%= jhiPrefix %>SortBy="<%= field.fieldName %>"><span <%= jhiPrefix %>Translate="<%= field.fieldTranslationKey %>"><%- this._getEntityClientTranslation(field.fieldTranslationKey) %></span> <fa-icon <% if (searchEngine && !field.fieldTypeBoolean && !field.fieldTypeNumeric && !field.fieldTypeTemporal) { %>*ngIf="!currentSearch" <% } %>icon="sort"></fa-icon></th>
 <%_ } _%>
 <%_ for (const relationship of relationships.filter(rel => !rel.otherEntityIsEmbedded)) { _%>
-    <%_ if (relationship.relationshipManyToOne
-            || (relationship.relationshipOneToOne && relationship.ownerSide)
-            || (relationship.relationshipManyToMany && relationship.ownerSide && paginationNo)) {
-        const fieldName = "." + relationship.otherEntityField;
-    _%>
-                    <th scope="col" <% if (!paginationNo) { %> <%= jhiPrefix %>SortBy="<%= relationship.relationshipName + (fieldName) %>"<% } %>><span <%= jhiPrefix %>Translate="<%= `${i18nKeyPrefix}.${relationship.relationshipName}` %>"><%= relationship.relationshipNameHumanized %></span><% if (!paginationNo) { %> <fa-icon icon="sort"></fa-icon><% } %></th>
-    <%_ } _%>
+  <%_ if (relationship.relationshipManyToOne
+    || (relationship.relationshipOneToOne && relationship.ownerSide)
+    || (relationship.relationshipManyToMany && relationship.ownerSide && paginationNo)) {
+    const fieldName = "." + relationship.otherEntityField;
+  _%>
+                    <th scope="col" <%= jhiPrefix %>SortBy="<%= relationship.relationshipName + (fieldName) %>"><span <%= jhiPrefix %>Translate="<%= `${i18nKeyPrefix}.${relationship.relationshipName}` %>"><%- this._getEntityClientTranslation(i18nKeyPrefix + '.' + relationship.relationshipName) %></span> <fa-icon icon="sort"></fa-icon></th>
+  <%_ } _%>
 <%_ } _%>
                     <th scope="col"></th>
                 </tr>
@@ -110,10 +104,11 @@ _%>
                     </td>
     <%_ } else if (field.fieldTypeBinary && field.blobContentTypeAny) { _%>
                     <td>
-                        <a *ngIf="<%= entityInstance %>.<%= fieldName %>" (click)="openFile(<%= entityInstance %>.<%= fieldName %>, <%= entityInstance %>.<%= fieldName %>ContentType)" <%= jhiPrefix %>Translate="entity.action.open">open</a>
+                        <a *ngIf="<%= entityInstance %>.<%= fieldName %>" (click)="openFile(<%= entityInstance %>.<%= fieldName %>, <%= entityInstance %>.<%= fieldName %>ContentType)" <%= jhiPrefix %>Translate="entity.action.open"><%- this._getClientTranslation('entity.action.open') %></a>
                         <span *ngIf="<%= entityInstance %>.<%= fieldName %>">{{ <%= entityInstance %>.<%= fieldName %>ContentType }}, {{ byteSize(<%= entityInstance %>.<%= fieldName %>) }}</span>
                     </td>
     <%_ } else if (field.fieldIsEnum) { _%>
+                    <%# TODO: import enum and use its key as label _%>
                     <td<% if (field.id) { %>><a<%- routerLink %><% } %> <%= jhiPrefix %>Translate="{{ '<%= frontendAppName %>.<%= fieldType %>.' + <%= entityInstance %>.<%= fieldName %> }}">{{ <%= entityInstance %>.<%= fieldName %> }}<% if (field.id) { %></a><% } %></td>
     <%_ } else if (field.fieldTypeTimed) { _%>
                     <td>{{ <%= entityInstance %>.<%= fieldName %> | formatMediumDatetime }}</td>
@@ -129,7 +124,6 @@ _%>
     const ownerSide = relationship.ownerSide;
     const relationshipFieldName = relationship.relationshipFieldName;
     const relationshipFieldNamePlural = relationship.relationshipFieldNamePlural;
-    const otherEntityStateName = relationship.otherEntityStateName;
     const otherEntityField = relationship.otherEntityField;
 _%>
     <%_ if (relationship.relationshipManyToOne
@@ -138,21 +132,21 @@ _%>
     _%>
                     <td>
         <%_ if (relationship.otherEntityUser) { _%>
-            <%_ if (relationship.relationshipManyToMany) { _%>
+            <%_ if (relationship.collection) { _%>
                         <span *ngFor="let <%= relationshipFieldName %> of <%= entityInstance %>.<%= relationshipFieldNamePlural %>; let last = last">
                             {{ <%= relationshipFieldName %>.<%= otherEntityField %> }}{{ last ? '' : ', ' }}
                         </span>
             <%_ } else { _%>
-                        {{ <%= entityInstance + "." + relationshipFieldName + "?." + otherEntityField %> }}
+                        {{ <%= entityInstance %>.<%= relationshipFieldName %>?.<%= otherEntityField %> }}
             <%_ } _%>
         <%_ } else { _%>
-            <%_ if (relationship.relationshipManyToMany) { _%>
+            <%_ if (relationship.collection) { _%>
                         <span *ngFor="let <%= relationshipFieldName %> of <%= entityInstance %>.<%= relationshipFieldNamePlural %>; let last = last">
-                            <a class="form-control-static" [routerLink]="['/<%= otherEntityStateName %>', <%= relationshipFieldName %>.<%= relationship.otherEntity.primaryKey.name %>, 'view']">{{ <%= relationshipFieldName %>.<%= otherEntityField %> }}</a>{{ last ? '' : ', ' }}
+                            <a class="form-control-static" [routerLink]="['/<%= relationship.otherEntity.entityPage %>', <%= relationshipFieldName %>.<%= relationship.otherEntity.primaryKey.name %>, 'view']">{{ <%= relationshipFieldName %>.<%= otherEntityField %> }}</a>{{ last ? '' : ', ' }}
                         </span>
             <%_ } else { _%>
                         <div *ngIf="<%= entityInstance + "." + relationshipFieldName %>">
-                            <a [routerLink]="['/<%= otherEntityStateName %>', <%= entityInstance %>.<%= relationshipFieldName %>?.<%= relationship.otherEntity.primaryKey.name %>, 'view']">{{ <%= entityInstance + "." + relationshipFieldName + "?." + otherEntityField %> }}</a>
+                            <a [routerLink]="['/<%= relationship.otherEntity.entityPage %>', <%= entityInstance %>.<%= relationshipFieldName %>.<%= relationship.otherEntity.primaryKey.name %>, 'view']">{{ <%= entityInstance %>.<%= relationshipFieldName %>?.<%= otherEntityField %> }}</a>
                         </div>
             <%_ } _%>
         <%_ } _%>
@@ -161,12 +155,26 @@ _%>
 <%_ } _%>
                     <td class="text-end">
                         <div class="btn-group">
+<%_ for (const relationship of relationships.filter(rel => !rel.otherEntityIsEmbedded)) { _%>
+    <%_ if (relationship.otherEntity.jpaMetamodelFiltering && relationship.otherEntity.paginationPagination && (relationship.relationshipOneToMany || relationship.relationshipManyToMany) && !relationship.ownerSide) {
+        const otherEntityTranslationKey = i18nKeyPrefix + '.' + relationship.relationshipName;
+    _%>
+                            <button type="submit"
+                                    [routerLink]="['/<%= relationship.otherEntity.entityPage %>']"
+                                    [queryParams]="{ 'filter[<%= relationship.otherEntityRelationshipName %>Id.in]': <%= entityInstance %>.<%= primaryKey.name %> }"
+                                    class="btn btn-info btn-sm"
+                                    data-cy="filterOtherEntityButton">
+                                <fa-icon icon="eye"></fa-icon>
+                                <span class="d-none d-md-inline" <%= jhiPrefix %>Translate="entity.action.show"  [translateValues]="{ otherEntity: ('<%= otherEntityTranslationKey %>' | translate) }"><%- this._getClientTranslation('entity.action.show', {'otherEntity' : relationship.otherEntity.entityClassHumanized }) %></span>
+                            </button>
+    <%_ } _%>
+<%_ } _%>
                             <button type="submit"
                                     [routerLink]="['/<%= entityPage %>', <%= entityInstance %>.<%= primaryKey.name %>, 'view']"
                                     class="btn btn-info btn-sm"
                                     data-cy="entityDetailsButton">
                                 <fa-icon icon="eye"></fa-icon>
-                                <span class="d-none d-md-inline" <%= jhiPrefix %>Translate="entity.action.view">View</span>
+                                <span class="d-none d-md-inline" <%= jhiPrefix %>Translate="entity.action.view"><%- this._getClientTranslation('entity.action.view') %></span>
                             </button>
 <%_ if (!readOnly) { _%>
 
@@ -175,14 +183,14 @@ _%>
                                     class="btn btn-primary btn-sm"
                                     data-cy="entityEditButton">
                                 <fa-icon icon="pencil-alt"></fa-icon>
-                                <span class="d-none d-md-inline" <%= jhiPrefix %>Translate="entity.action.edit">Edit</span>
+                                <span class="d-none d-md-inline" <%= jhiPrefix %>Translate="entity.action.edit"><%- this._getClientTranslation('entity.action.edit') %></span>
                             </button>
 
                             <button type="submit" (click)="delete(<%= entityInstance %>)"
                                     class="btn btn-danger btn-sm"
                                     data-cy="entityDeleteButton">
                                 <fa-icon icon="times"></fa-icon>
-                                <span class="d-none d-md-inline" <%= jhiPrefix %>Translate="entity.action.delete">Delete</span>
+                                <span class="d-none d-md-inline" <%= jhiPrefix %>Translate="entity.action.delete"><%- this._getClientTranslation('entity.action.delete') %></span>
                             </button>
 <%_ } _%>
                         </div>
@@ -199,7 +207,7 @@ _%>
         </div>
 
         <div class="d-flex justify-content-center">
-            <ngb-pagination [collectionSize]="totalItems" [(page)]="ngbPaginationPage" [pageSize]="itemsPerPage" [maxSize]="5" [rotate]="true" [boundaryLinks]="true" (pageChange)="loadPage($event)"></ngb-pagination>
+            <ngb-pagination [collectionSize]="totalItems" [page]="page" [pageSize]="itemsPerPage" [maxSize]="5" [rotate]="true" [boundaryLinks]="true" (pageChange)="navigateToPage($event)"></ngb-pagination>
         </div>
     </div>
 <%_ } _%>

package/generators/entity-client/templates/angular/src/main/webapp/app/entities/list/entity-management.component.spec.ts.ejs

@@ -17,39 +17,40 @@
  limitations under the License.
 -%>
 <%_
-const entityArrayOptionalChainSymbol = paginationInfiniteScroll ? '' : '?.';
-const order = paginationInfiniteScroll ? 'asc' : 'desc';
+const entityArrayOptionalChainSymbol = '?.';
+const order = 'desc';
 const testEntityPrimaryKey = generateTestEntityPrimaryKey(primaryKey, 0);
 _%>
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HttpHeaders, HttpResponse } from '@angular/common/http';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
-<%_ if (paginationPagination || searchEngine) { _%>
 import { ActivatedRoute } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-<%_ } _%>
 import { of } from 'rxjs';
 
 import { <%= entityAngularName %>Service } from '../service/<%= entityFileName %>.service';
 
 import { <%= entityAngularName %>Component } from './<%= entityFileName %>.component';
+<%_ if (!paginationNo) { _%>
+import SpyInstance = jest.SpyInstance;
+<%_ } _%>
 
 describe('<%= entityAngularName %> Management Component', () => {
     let comp: <%= entityAngularName %>Component;
     let fixture: ComponentFixture<<%= entityAngularName %>Component>;
     let service: <%= entityAngularName %>Service;
+<%_ if (!paginationNo) { _%>
+    let routerNavigateSpy: SpyInstance<Promise<boolean>>;
+<%_ } _%>
 
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [
-<%_ if (paginationPagination || searchEngine) { _%>
               RouterTestingModule.withRoutes([{ path: '<%= entityPage %>', component: <%= entityAngularName %>Component }]),
-<%_ } _%>
               HttpClientTestingModule
             ],
             declarations: [<%= entityAngularName %>Component],
-<%_ if (paginationPagination) { _%>
             providers: [
                 {
                     provide: ActivatedRoute,
@@ -62,22 +63,15 @@ describe('<%= entityAngularName %> Management Component', () => {
                                 page: '1',
                                 size: '1',
                                 sort: '<%- primaryKey.name %>,desc',
+<%_ if (jpaMetamodelFiltering) { _%>
+                                'filter[someId.in]': 'dc4279ea-cfb9-11ec-9d64-0242ac120002',
+<%_ } _%>
                             })
                         ),
-  <%_ if (searchEngine) { _%>
                         snapshot: { queryParams: {} },
-  <%_ } _%>
                     }
                 }
             ]
-<%_ } else if (searchEngine) { _%>
-            providers: [
-                {
-                    provide: ActivatedRoute,
-                    useValue: { snapshot: { queryParams: {} } }
-                }
-            ]
-<%_ } _%>
         })
         .overrideTemplate(<%= entityAngularName %>Component, '')
         .compileComponents();
@@ -85,6 +79,9 @@ describe('<%= entityAngularName %> Management Component', () => {
         fixture = TestBed.createComponent(<%= entityAngularName %>Component);
         comp = fixture.componentInstance;
         service = TestBed.inject(<%= entityAngularName %>Service);
+<%_ if (!paginationNo) { _%>
+        routerNavigateSpy = jest.spyOn(comp.router, 'navigate');
+<%_ } _%>
 
         const headers = new HttpHeaders();
         jest.spyOn(service, 'query').mockReturnValue(
@@ -106,14 +103,23 @@ describe('<%= entityAngularName %> Management Component', () => {
         expect(comp.<%= entityInstancePlural %><%= entityArrayOptionalChainSymbol %>[0]).toEqual(expect.objectContaining(<%- testEntityPrimaryKey %>));
     });
 
+    describe('track<%= primaryKey.nameCapitalized %>', () => {
+        it('Should forward to <%= entityInstance %>Service', () => {
+            const entity = <%- this.generateTestEntityPrimaryKey(primaryKey, 0) %>;
+            jest.spyOn(service, 'get<%= entityAngularName %>Identifier');
+            const <%= primaryKey.name %> = comp.track<%= primaryKey.nameCapitalized %>(0, entity);
+            expect(service.get<%= entityAngularName %>Identifier).toHaveBeenCalledWith(entity);
+            expect(<%= primaryKey.name %>).toBe(entity.<%= primaryKey.name %>);
+        });
+    });
 <%_ if (!paginationNo) { _%>
+
     it('should load a page', () => {
         // WHEN
-        comp.loadPage(1);
+        comp.navigateToPage(1);
 
         // THEN
-        expect(service.query).toHaveBeenCalled();
-        expect(comp.<%= entityInstancePlural %><%= entityArrayOptionalChainSymbol %>[0]).toEqual(expect.objectContaining(<%- testEntityPrimaryKey %>));
+        expect(routerNavigateSpy).toHaveBeenCalled();
     });
 
     it('should calculate the sort attribute for an id', () => {
@@ -121,33 +127,46 @@ describe('<%= entityAngularName %> Management Component', () => {
         comp.ngOnInit();
 
         // THEN
-        expect(service.query).toHaveBeenCalledWith(expect.objectContaining({ sort: ['<%- primaryKey.fields.map(field => field.fieldName).join(',') %>,<%= order %>'] }));
+        expect(service.query).toHaveBeenLastCalledWith(expect.objectContaining({ sort: ['<%- primaryKey.fields.map(field => field.fieldName).join(',') %>,<%= order %>'] }));
     });
 
     it('should calculate the sort attribute for a non-id attribute', () => {
-        // INIT
-        comp.ngOnInit();
 
         // GIVEN
         comp.predicate = 'name';
 
         // WHEN
-        comp.loadPage(1);
+        comp.navigateToWithComponentValues();
 
         // THEN
-        expect(service.query).toHaveBeenLastCalledWith(expect.objectContaining({ sort: ['name,<%= order %>', '<%- primaryKey.fields.map(field => field.fieldName).join(',') %>'] }));
+        expect(routerNavigateSpy).toHaveBeenLastCalledWith(expect.anything(),
+          expect.objectContaining({
+            queryParams: expect.objectContaining({
+                sort: ['name,asc']
+              })
+          }));
     });
-
   <%_ if (paginationInfiniteScroll) { _%>
+
     it('should re-initialize the page', () => {
         // WHEN
         comp.loadPage(1);
         comp.reset();
 
         // THEN
-        expect(comp.page).toEqual(0);
+        expect(comp.page).toEqual(1);
         expect(service.query).toHaveBeenCalledTimes(2);
-        expect(comp.<%= entityInstancePlural %>[0]).toEqual(expect.objectContaining(<%- testEntityPrimaryKey %>));
+        expect(comp.<%= entityInstancePlural %><%= entityArrayOptionalChainSymbol %>[0]).toEqual(expect.objectContaining(<%- testEntityPrimaryKey %>));
+    });
+  <%_ } _%>
+  <%_ if (jpaMetamodelFiltering && paginationPagination) { _%>
+
+    it('should calculate the filter attribute', () => {
+        // WHEN
+        comp.ngOnInit();
+
+        // THEN
+        expect(service.query).toHaveBeenLastCalledWith(expect.objectContaining({ 'someId.in': 'dc4279ea-cfb9-11ec-9d64-0242ac120002' }));
     });
   <%_ } _%>
 <%_ } _%>