From 46ecf287a4453604cb87ab4d63eebb5107e99e5e Mon Sep 17 00:00:00 2001
From: Michael Spalti <mspalti@gmail.com>
Date: Thu, 15 Sep 2022 11:40:00 -0700
Subject: [PATCH] Thumbnails fixed for relationships and added styling.

---
 .../core/data/relationship.service.spec.ts    |  7 ++++--
 src/app/core/data/relationship.service.ts     | 15 +++++++++++--
 .../org-unit/org-unit.component.html          |  2 +-
 .../item-pages/person/person.component.html   |  2 +-
 .../item-pages/project/project.component.html |  2 +-
 .../publication/publication.component.html    |  2 +-
 src/app/shared/utils/object-list-utils.ts     |  4 +++-
 src/styles/_global-styles.scss                | 22 +++++++++++++++++--
 8 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/src/app/core/data/relationship.service.spec.ts b/src/app/core/data/relationship.service.spec.ts
index 387593d609..38a3183cac 100644
--- a/src/app/core/data/relationship.service.spec.ts
+++ b/src/app/core/data/relationship.service.spec.ts
@@ -121,6 +121,8 @@ describe('RelationshipService', () => {
     findByHref: createSuccessfulRemoteDataObject$(relatedItems[0])
   });
 
+  const appConfig = Object.assign({browseBy: {showThumbnails: true}})
+
   function initTestService() {
     return new RelationshipService(
       itemService,
@@ -133,6 +135,7 @@ describe('RelationshipService', () => {
       null,
       null,
       null,
+      appConfig,
       jasmine.createSpy('paginatedRelationsToItems').and.returnValue((v) => v),
     );
   }
@@ -210,8 +213,8 @@ describe('RelationshipService', () => {
           mockOptions,
           true,
           true,
-          followLink('leftItem'),
-          followLink('rightItem'),
+          followLink('leftItem',{}, followLink('thumbnail')),
+          followLink('rightItem',{}, followLink('thumbnail')),
           followLink('relationshipType')
         );
         done();
diff --git a/src/app/core/data/relationship.service.ts b/src/app/core/data/relationship.service.ts
index 4594e17a11..7d339352d9 100644
--- a/src/app/core/data/relationship.service.ts
+++ b/src/app/core/data/relationship.service.ts
@@ -46,6 +46,7 @@ import { sendRequest } from '../shared/request.operators';
 import { RestRequest } from './rest-request.model';
 import { CoreState } from '../core-state.model';
 import { FindListOptions } from './find-list-options.model';
+import { APP_CONFIG, AppConfig } from '../../../config/app-config.interface';
 
 const relationshipListsStateSelector = (state: AppState) => state.relationshipLists;
 
@@ -89,6 +90,7 @@ export class RelationshipService extends DataService<Relationship> {
               protected http: HttpClient,
               protected comparator: DefaultChangeAnalyzer<Relationship>,
               protected appStore: Store<AppState>,
+              @Inject(APP_CONFIG) private appConfig: AppConfig,
               @Inject(PAGINATED_RELATIONS_TO_ITEMS_OPERATOR) private paginatedRelationsToItems: (thisId: string) => (source: Observable<RemoteData<PaginatedList<Relationship>>>) => Observable<RemoteData<PaginatedList<Item>>>) {
     super();
   }
@@ -183,7 +185,7 @@ export class RelationshipService extends DataService<Relationship> {
     ]).pipe(
       filter(([existsInOC, existsInRC]) => !existsInOC && !existsInRC),
       take(1),
-    ).subscribe(() => this.itemService.findByHref(item._links.self.href, false));
+    ).subscribe(() => this.itemService.findByHref(item._links.self.href, false, true, followLink('thumbnail')));
   }
 
   /**
@@ -256,7 +258,16 @@ export class RelationshipService extends DataService<Relationship> {
    * @param options
    */
   getRelatedItemsByLabel(item: Item, label: string, options?: FindListOptions): Observable<RemoteData<PaginatedList<Item>>> {
-    return this.getItemRelationshipsByLabel(item, label, options, true, true, followLink('leftItem'), followLink('rightItem'), followLink('relationshipType')).pipe(this.paginatedRelationsToItems(item.uuid));
+    let linksToFollow: FollowLinkConfig<Relationship>[];
+    if (this.appConfig.browseBy.showThumbnails) {
+      linksToFollow = [
+        followLink('leftItem',{}, followLink('thumbnail')),
+        followLink('rightItem',{}, followLink('thumbnail')),
+        followLink('relationshipType') ];
+    } else {
+      linksToFollow = [followLink('leftItem'), followLink('rightItem'), followLink('relationshipType')];
+    }
+    return this.getItemRelationshipsByLabel(item, label, options, true, true, ...linksToFollow).pipe(this.paginatedRelationsToItems(item.uuid));
   }
 
   /**
diff --git a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
index ff4bc4d226..0ce9823ce6 100644
--- a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
@@ -36,7 +36,7 @@
       [label]="'orgunit.page.id'">
     </ds-generic-item-page-field>
   </div>
-  <div class="col-xs-12 col-md-6">
+  <div class="col-xs-12 col-md-7">
     <ds-related-items
       [parentItem]="object"
       [relationType]="'isPublicationOfOrgUnit'"
diff --git a/src/app/entity-groups/research-entities/item-pages/person/person.component.html b/src/app/entity-groups/research-entities/item-pages/person/person.component.html
index ace42f844e..d5babd0faf 100644
--- a/src/app/entity-groups/research-entities/item-pages/person/person.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/person/person.component.html
@@ -29,7 +29,7 @@
       [label]="'person.page.birthdate'">
     </ds-generic-item-page-field>
   </div>
-  <div class="col-xs-12 col-md-6">
+  <div class="col-xs-12 col-md-7">
     <ds-related-items
       [parentItem]="object"
       [relationType]="'isProjectOfPerson'"
diff --git a/src/app/entity-groups/research-entities/item-pages/project/project.component.html b/src/app/entity-groups/research-entities/item-pages/project/project.component.html
index a068878fb4..d73a8786cf 100644
--- a/src/app/entity-groups/research-entities/item-pages/project/project.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/project/project.component.html
@@ -42,7 +42,7 @@
       <!--[label]="'project.page.expectedcompletion'">-->
     <!--</ds-generic-item-page-field>-->
   </div>
-  <div class="col-xs-12 col-md-6">
+  <div class="col-xs-12 col-md-7">
     <ds-related-items
       [parentItem]="object"
       [relationType]="'isPersonOfProject'"
diff --git a/src/app/item-page/simple/item-types/publication/publication.component.html b/src/app/item-page/simple/item-types/publication/publication.component.html
index d83202ce12..6d1ce9a1ad 100644
--- a/src/app/item-page/simple/item-types/publication/publication.component.html
+++ b/src/app/item-page/simple/item-types/publication/publication.component.html
@@ -53,7 +53,7 @@
       [label]="'publication.page.publisher'">
     </ds-generic-item-page-field>
   </div>
-  <div class="col-xs-12 col-md-6">
+  <div class="col-xs-12 col-md-7">
     <ds-related-items
       [parentItem]="object"
       [relationType]="'isProjectOfPublication'"
diff --git a/src/app/shared/utils/object-list-utils.ts b/src/app/shared/utils/object-list-utils.ts
index 3837ada1fd..6c438c4600 100644
--- a/src/app/shared/utils/object-list-utils.ts
+++ b/src/app/shared/utils/object-list-utils.ts
@@ -3,7 +3,9 @@
  * placeholder font size in lists.
  */
 export function  setPlaceHolderFontSize(width: number): string {
-  if (width < 750) {
+  if (width < 400) {
+    return 'thumb-font-0'
+  } else if (width < 750) {
     return 'thumb-font-1';
   } else if (width < 1000) {
     return 'thumb-font-2';
diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
index df6652a02d..9bfe804c42 100644
--- a/src/styles/_global-styles.scss
+++ b/src/styles/_global-styles.scss
@@ -139,14 +139,32 @@ ds-dynamic-form-control-container.d-none {
   background-color: var(--ds-admin-sidebar-bg);
 }
 /* The font sizes used in "no thumbnail" placeholder */
+.thumb-font-0 {
+  .thumbnail-placeholder {
+    @media screen and (max-width: map-get($grid-breakpoints, lg)) {
+      font-size: 0.7rem !important;
+      padding: 0.2rem;
+    }
+    @media screen and (max-width: map-get($grid-breakpoints, sm)) {
+      font-size: 0.6rem !important;
+      padding: 0.1rem;
+    }
+    font-size: 0.4rem !important;
+    padding: 0.1rem;
+  }
+}
 .thumb-font-1 {
   .thumbnail-placeholder {
-    font-size: 0.7rem !important;
-    padding: 0.125rem;
     @media screen and (max-width: map-get($grid-breakpoints, sm)) {
+      font-size: 0.9rem !important;
+      padding: 0.1rem;
+    }
+    @media screen and (max-width: 950px) {
       font-size: 0.5rem !important;
       padding: 0.1rem;
     }
+    font-size: 0.7rem !important;
+    padding: 0.125rem;
     visibility: inherit;
   }
 }