Merge pull request #890 from gisaia/feat/listDetail

feat: improve list detail render
gisaia · Dec 3, 2024 · 77e5f7c · 77e5f7c
2 parents 9270d9d + 277f7f2
commit 77e5f7c
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 37 deletions.
diff --git a/projects/arlas-components/src/lib/components/results/model/item.ts b/projects/arlas-components/src/lib/components/results/model/item.ts
@@ -20,6 +20,11 @@
 import { Action, Attachment, ItemDataType } from '../utils/results.utils';
 import { Column } from './column';
 
+export interface ItemDetailGroup {
+  group: string;
+  details: Array<{ key: string; value: string; }>;
+};
+
 export class Item {
 
   /**
@@ -66,13 +71,7 @@ export class Item {
   /**
    * @description More data organized in groups.
    */
-  public itemDetailedData: Array<{
-    group: string;
-    details: Array<{ key: string; value: string; }>;
-  }> = new Array<{
-    group: string;
-    details: Array<{ key: string; value: string; }>;
-  }>();
+  public itemDetailedData = new Array<ItemDetailGroup>();
   /**
      * @description Links attached to the item.
      */

diff --git a/...nents/src/lib/components/results/result-detailed-item/result-detailed-item.component.html b/...nents/src/lib/components/results/result-detailed-item/result-detailed-item.component.html
@@ -3,29 +3,25 @@
 <td [class.grid-container]="containerType === 'grid'" [colSpan]="detailColspan - 1">
   <div class="details-title" *ngIf="rowItem?.detailsTitleEnabled">{{rowItem?.detailsTitle}}</div>
   <div class="resultdetaileditem">
-    <span *ngFor="let group of getGroups()">
-      <span class="resultdetaileditem--group-title {{group.group | replace:' ':'-' | lowercase}}-item-detail">
-        {{group.group | translate}}
-      </span>
-      <br>
-      <span *ngFor="let detail of group.details" class="resultdetaileditem--item {{detail.key}}-item-detail">
-        <span class="resultdetaileditem--item--key">{{detail.key | translate}}</span> :
-        <span class="resultdetaileditem--item--value">{{detail.value | formatNumber:NUMBER_FORMAT_CHAR}}</span>
-      </span>
-      <br>
-      <br />
-    </span>
-    <arlas-result-actions 
-          [activatedActionsPerItem]="activatedActionsPerItem" 
+    <ng-container *ngFor="let group of rowItem?.itemDetailedData">
+      <div class="resultdetaileditem--group" *ngIf="showEmptyGroup || group.details.length > 0">
+        <span class="resultdetaileditem--group-title {{group.group | replace:' ':'-' | lowercase}}-item-detail">
+          {{group.group | translate}}
+        </span>
+        <span *ngFor="let detail of group.details" class="resultdetaileditem--item {{detail.key}}-item-detail">
+          <span class="resultdetaileditem--item--key">{{detail.key | translate}}</span>
+          <span class="resultdetaileditem--item--value">{{detail.value | formatNumber:NUMBER_FORMAT_CHAR}}</span>
+        </span>
+      </div>
+    </ng-container>
+    <arlas-result-actions
+          [activatedActionsPerItem]="activatedActionsPerItem"
           [detailedDataRetriever]="detailedDataRetriever"
           [item]="rowItem"
           [mode]="'text'"
           (actionOnItemEvent)="triggerActionOnItem($event)" ></arlas-result-actions>
-    <br>
-    <br />
     <span class="result-attachments" *ngIf="rowItem?.attachments && rowItem?.attachments.length > 0">
-      <span class="result-attachments--title">{{'Attachments' | translate}}</span>
-      <br>
+      <div class="result-attachments--title">{{'Attachments' | translate}}</div>
       <span class="result-attachments--item" *ngFor="let att of rowItem?.attachments; index as i">
         <a class="result-attachments--item--link" href="{{att.url | getAttachmentUrl}}"
           matTooltip="{{getAttachmentDescription(att)}}" [matTooltipPosition]="'after'" target="_blank">

diff --git a/...nents/src/lib/components/results/result-detailed-item/result-detailed-item.component.scss b/...nents/src/lib/components/results/result-detailed-item/result-detailed-item.component.scss
@@ -36,30 +36,41 @@
 }
 
 .resultdetaileditem /* @doc Sets all texts style.*/ {
-  font-family:
-    Roboto,
-    Helvetica Neue,
-    sans-serif;
+  font-family: Roboto, Helvetica Neue, sans-serif;
   font-size: 0.7em;
   text-align: left;
   padding: 0 5px;
 
-  &--group-title {
-    font-weight: bold;
-    color: #322d90;
-    font-size: 1.1em;
+  &--group {
+    padding-bottom: 10px;
+
+    &-title {
+      font-weight: bold;
+      font-size: 12px;
+      border-bottom: 1px solid #f0eeeecf;
+      display: block;
+    }
   }
 
   &--item {
-    font-weight: bold;
-    color: #444;
+    display: block;
+    color: black;
+    padding: 3px;
+    border-bottom: 1px solid #f0eeeecf;
 
     &--key /* @doc Sets key style. (key: value part)*/ {
-      font-weight: 520;
+      font-size: 11px;
+      font-weight: 500;
+      width: 120px;
+      display: inline-block;
+      white-space: pre-wrap;
     }
 
     &--value /* @doc Sets value style (key: value part)*/ {
       margin-right: 10px;
+      font-weight: 500;
+      font-size: 11px;
+      overflow-wrap: anywhere;
     }
   }
 
@@ -81,6 +92,7 @@
 .result-attachments {
   display: block;
   max-width: 95%;
+  padding-top: 10px;
 
   &--title /* @doc Sets the style of attachments section's title*/ {
     font-weight: bold;

diff --git a/...ponents/src/lib/components/results/result-detailed-item/result-detailed-item.component.ts b/...ponents/src/lib/components/results/result-detailed-item/result-detailed-item.component.ts
@@ -78,6 +78,7 @@ export class ResultDetailedItemComponent implements OnInit {
 
   public NUMBER_FORMAT_CHAR = NUMBER_FORMAT_CHAR;
 
+
   public constructor(public translate: TranslateService) { }
 
   public ngOnInit() {}

diff --git a/projects/arlas-components/src/public-api.ts b/projects/arlas-components/src/public-api.ts
@@ -53,7 +53,7 @@ export {
   Action, ElementIdentifier, FieldsConfiguration, DescribedUrl, ResultListOptions,
   Attachment, AdditionalInfo, Field, PageQuery, PROTECTED_IMAGE_HEADER, ActionHandler
 } from './lib/components/results/utils/results.utils';
-export { Item } from './lib/components/results/model/item';
+export { Item, ItemDetailGroup } from './lib/components/results/model/item';
 export { Column } from './lib/components/results/model/column';
 export { MapglComponent, VisualisationSetConfig, IconConfig, OnMoveResult, CROSS_LAYER_PREFIX } from './lib/components/mapgl/mapgl.component';
 export { MapglModule } from './lib/components/mapgl/mapgl.module';
Original file line number	Diff line number	Diff line change
Expand Up		@@ -78,6 +78,7 @@ export class ResultDetailedItemComponent implements OnInit {

		public NUMBER_FORMAT_CHAR = NUMBER_FORMAT_CHAR;


		public constructor(public translate: TranslateService) { }

		public ngOnInit() {}
Expand Down