move content field into separate component

CentreForDigitalHumanities · Nov 20, 2024 · 51daf2f · 51daf2f
1 parent 8258a2b
commit 51daf2f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 19 deletions.
diff --git a/frontend/src/app/document/content-field/content-field.component.html b/frontend/src/app/document/content-field/content-field.component.html
@@ -1 +1,17 @@
-<p>content-field works!</p>
+<div *ngIf="showEntities && document.entityAnnotations$ | async as annotations ; else showHighlights"
+    class="content"
+    [attr.lang]="document.language(field)">
+    <div *ngIf="annotations[field.name]; else plainText"
+        [innerHtml]="annotations[field.name] | entity | paragraph">
+    </div>
+    <ng-template #plainText>
+        <div [innerHtml]="document.fieldValues[field.name] | paragraph"></div>
+    </ng-template>
+    <ia-entity-legend *ngIf="showEntities" [entityAnnotations]="annotations[field.name]"></ia-entity-legend>
+</div>
+<ng-template #showHighlights>
+    <div class="content"
+        [attr.lang]="document.language(field)"
+        [innerHtml]="field | elasticsearchHighlight:document | paragraph">
+    </div>
+</ng-template>
diff --git a/frontend/src/app/document/content-field/content-field.component.ts b/frontend/src/app/document/content-field/content-field.component.ts
@@ -1,10 +1,13 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { CorpusField, FoundDocument } from '@models';
 
 @Component({
     selector: 'ia-content-field',
     templateUrl: './content-field.component.html',
     styleUrl: './content-field.component.scss'
 })
 export class ContentFieldComponent {
-
+    @Input() field: CorpusField;
+    @Input() document: FoundDocument;
+    @Input() showEntities: boolean;
 }
diff --git a/frontend/src/app/document/document-view/document-view.component.html b/frontend/src/app/document/document-view/document-view.component.html
@@ -38,22 +38,10 @@
         <div class="box">
             <ia-tabs [activeTab]="activeTab">
                 <ng-template iaTabPanel *ngFor="let field of contentFields" [id]="field.name" [title]="field.displayName" [icon]="documentIcons.text">
-                    <div *ngIf="showEntities && document.entityAnnotations$ | async as annotations ; else showHighlights" class="content"
-                        [attr.lang]="document.language(field)">
-                        <div *ngIf="annotations[field.name]; else plainText"
-                            [innerHtml]="annotations[field.name] | entity | paragraph">
-                        </div>
-                        <ng-template #plainText>
-                            <div [innerHtml]="document.fieldValues[field.name] | paragraph"></div>
-                        </ng-template>
-                        <ia-entity-legend *ngIf="showEntities" [entityAnnotations]="annotations[field.name]"></ia-entity-legend>
-                    </div>
-                    <ng-template #showHighlights>
-                        <div class="content"
-                            [attr.lang]="document.language(field)"
-                            [innerHtml]="field | elasticsearchHighlight:document | paragraph">
-                        </div>
-                    </ng-template>
+                    <ia-content-field
+                        [field]="field"
+                        [document]="document"
+                        [showEntities]="showEntities" />
                 </ng-template>
                 <ng-template iaTabPanel id="scan" *ngIf="showScanTab" title="Image" [icon]="documentIcons.scan">
                     <ia-image-view [corpus]="corpus" [document]="document"></ia-image-view>