person search: include mat card content/container

tuwien-csd · Aug 13, 2024 · 8913e99 · 8913e99
1 parent 81c4002
commit 8913e99
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 27 deletions.
diff --git a/libs/damap/src/lib/widgets/person-search/person-search.component.css b/libs/damap/src/lib/widgets/person-search/person-search.component.css
@@ -9,8 +9,13 @@
 }
 
 .result-list {
-  width: 100%;
+  width: 100% !important;
   border-radius: 4px;
   max-height: 300px;
   overflow-y: auto;
 }
+
+.mat-card-container {
+  display: inline-block;
+  margin: 10px;
+}
diff --git a/libs/damap/src/lib/widgets/person-search/person-search.component.html b/libs/damap/src/lib/widgets/person-search/person-search.component.html
@@ -8,7 +8,7 @@
       (input)="search(searchBox.value)" />
     <mat-icon matSuffix>search</mat-icon>
   </mat-form-field>
-  <div class="result-list" *ngIf="result.length > 0">
+  <div class="result-list" *ngIf="currentSearchTerm && result.length > 0">
     <mat-selection-list
       hideSingleSelectionIndicator
       [multiple]="false"
@@ -19,17 +19,23 @@
         [style]="'height: auto;'"
         [selected]="false"
         [value]="person">
-        <p matListItemTitle>
-          <strong> {{ person.firstName }} {{ person.lastName }} </strong>
-        </p>
-        <span matListItemLine *ngIf="person.mbox">
-          <mat-icon inline="true">mail_outline</mat-icon>
-          {{ person.mbox }}
-        </span>
-        <span matListItemLine *ngIf="person.personId?.identifier">
-          <mat-icon inline="true">fingerprint</mat-icon>
-          {{ person.personId?.type }}: {{ person.personId.identifier }}
-        </span>
+        <mat-card-content>
+          <div class="mat-card-container">
+            <div>
+              <div matListItemTitle>
+                <strong> {{ person.firstName }} {{ person.lastName }} </strong>
+              </div>
+              <div matListItemLine *ngIf="person.mbox">
+                <mat-icon inline="true">mail_outline</mat-icon>
+                {{ person.mbox }}
+              </div>
+              <div matListItemLine *ngIf="person.personId?.identifier">
+                <mat-icon inline="true">fingerprint</mat-icon>
+                {{ person.personId?.type }}: {{ person.personId.identifier }}
+              </div>
+            </div>
+          </div>
+        </mat-card-content>
       </mat-list-option>
     </mat-selection-list>
   </div>

diff --git a/libs/damap/src/lib/widgets/person-search/person-search.component.spec.ts b/libs/damap/src/lib/widgets/person-search/person-search.component.spec.ts
@@ -9,18 +9,17 @@ import { HarnessLoader } from '@angular/cdk/testing';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatSelectionListHarness } from '@angular/material/list/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { PersonSearchComponent } from './person-search.component';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { TranslateTestingModule } from '../../testing/translate-testing/translate-testing.module';
-import { MatListModule } from '@angular/material/list';
-import { MatSelectionListHarness } from '@angular/material/list/testing';
 
 describe('PersonSearchComponent', () => {
   let component: PersonSearchComponent;
   let fixture: ComponentFixture<PersonSearchComponent>;
   let loader: HarnessLoader;
-
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
@@ -34,37 +33,32 @@ describe('PersonSearchComponent', () => {
       declarations: [PersonSearchComponent],
     }).compileComponents();
   }));
-
   beforeEach(() => {
     fixture = TestBed.createComponent(PersonSearchComponent);
     component = fixture.componentInstance;
     component.result = [mockContributor1, mockContributor2];
     fixture.detectChanges();
     loader = TestbedHarnessEnvironment.loader(fixture);
   });
-
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
   it('should emit contributor on selection', waitForAsync(async () => {
     spyOn(component.personToAdd, 'emit');
 
     const inputElement = fixture.debugElement.query(
       By.css('input'),
     ).nativeElement;
     inputElement.value = mockContributor1.firstName;
-    const itemList = await loader.getHarness(MatSelectionListHarness);
-    const options = await itemList.getItems();
+    inputElement.dispatchEvent(new Event('input'));
+    fixture.detectChanges();
+    await fixture.whenStable();
 
+    const selectionList = await loader.getHarness(MatSelectionListHarness);
+    const options = await selectionList.getItems();
     expect(options.length).toBe(2);
-    let firstItem = options[0];
 
-    expect(await firstItem.getTitle()).toBe(
-      `${mockContributor1.firstName} ${mockContributor1.lastName}`,
-    );
-
-    await firstItem.select();
+    await options[0].select();
     expect(component.personToAdd.emit).toHaveBeenCalledWith(mockContributor1);
   }));
 
@@ -75,6 +69,9 @@ describe('PersonSearchComponent', () => {
       By.css('input'),
     ).nativeElement;
     inputElement.value = 'Some text';
+    inputElement.dispatchEvent(new Event('input'));
+    fixture.detectChanges();
+    await fixture.whenStable();
 
     const itemList = await loader.getHarness(MatSelectionListHarness);
     let options = await itemList.getItems();