122 lines
5.5 KiB
HTML
122 lines
5.5 KiB
HTML
<p-toast></p-toast>
|
|
<div class="template-mapping-container">
|
|
<p-splitter [panelSizes]="[50, 50]" [minSizes]="[30, 30]" styleClass="h-full w-full">
|
|
|
|
<!-- LEFT PANEL: DOCUMENT PREVIEW -->
|
|
<ng-template pTemplate>
|
|
<div class="panel-container">
|
|
<div class="header-section">
|
|
<h2>Document Preview</h2>
|
|
<div class="upload-section">
|
|
<input type="file" #fileInput style="display: none" (change)="onFileUpload($event)" accept=".pdf,.png,.jpg,.jpeg,.tiff">
|
|
<p-button label="Upload Document" icon="pi pi-upload" (onClick)="fileInput.click()"></p-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="preview-area p-4" style="overflow-y: auto;">
|
|
<div *ngIf="layoutNodes.length === 0" class="empty-state">
|
|
<i class="pi pi-file-pdf text-4xl mb-3"></i>
|
|
<p>Upload a document to view its extracted layout structure.</p>
|
|
</div>
|
|
|
|
<div *ngFor="let page of pages; let i = index" class="document-page-container mb-5">
|
|
<div class="page-header text-sm font-semibold text-gray-500 mb-2">Page {{ page.page_number }}</div>
|
|
|
|
<div class="document-canvas"
|
|
[id]="'document-layout-list-' + i"
|
|
cdkDropList
|
|
[cdkDropListData]="page.nodes"
|
|
[cdkDropListConnectedTo]="getConnectedDropLists()"
|
|
(cdkDropListDropped)="drop($event)"
|
|
[style.aspect-ratio]="page.width + ' / ' + page.height">
|
|
|
|
<div *ngFor="let node of page.nodes"
|
|
cdkDrag
|
|
class="layout-node"
|
|
[ngClass]="node.block_type.toLowerCase()"
|
|
[style.left.%]="(node.x_coordinate / node.page_width) * 100"
|
|
[style.top.%]="(node.y_coordinate / node.page_height) * 100"
|
|
[style.width.%]="(node.width / node.page_width) * 100"
|
|
[style.height.%]="(node.height / node.page_height) * 100">
|
|
<div class="node-type" *ngIf="node.height > 20">{{ node.block_type }}</div>
|
|
<div class="node-text">{{ node.text_value }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<!-- RIGHT PANEL: TEMPLATE MAPPING -->
|
|
<ng-template pTemplate>
|
|
<div class="panel-container">
|
|
<div class="header-section">
|
|
<div class="template-controls">
|
|
<span class="p-input-icon-left w-full">
|
|
<i class="pi pi-file"></i>
|
|
<input pInputText type="text" [(ngModel)]="templateName" placeholder="Template Name" class="w-full" style="padding-left: 2.5rem;" />
|
|
</span>
|
|
<div class="button-group mt-2 flex gap-2">
|
|
<p-button label="Add Field" icon="pi pi-plus" styleClass="p-button-outlined" (onClick)="showAddFieldDialog()"></p-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mapping-area">
|
|
<div *ngIf="templateFields.length === 0" class="empty-state">
|
|
<p>Add template fields to start mapping.</p>
|
|
</div>
|
|
|
|
<div class="field-list">
|
|
<div *ngFor="let field of templateFields" class="template-field-container">
|
|
<div class="field-header">
|
|
<strong>{{ field.field_label }}</strong>
|
|
<span class="badge">{{ field.field_type }}</span>
|
|
</div>
|
|
|
|
<div class="drop-zone"
|
|
[id]="'field-' + field.pk_template_field_id"
|
|
cdkDropList
|
|
[cdkDropListData]="mappings[field.pk_template_field_id]"
|
|
[cdkDropListConnectedTo]="getCanvasDropLists()"
|
|
(cdkDropListDropped)="drop($event, field.pk_template_field_id)">
|
|
|
|
<div class="placeholder" *ngIf="mappings[field.pk_template_field_id].length === 0">
|
|
Drop value here...
|
|
</div>
|
|
|
|
<div *ngFor="let mappedNode of mappings[field.pk_template_field_id]" cdkDrag class="mapped-node">
|
|
<i class="pi pi-arrow-left text-xs mr-2"></i> {{ mappedNode.text_value }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-section p-3 border-t">
|
|
<p-button label="Save Template & Mappings" icon="pi pi-save" styleClass="w-full p-button-success" (onClick)="saveTemplateAndMappings()" [disabled]="templateFields.length === 0"></p-button>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
|
|
</p-splitter>
|
|
</div>
|
|
|
|
<!-- Add Field Dialog -->
|
|
<p-dialog header="Add Template Field" [(visible)]="displayAddField" [modal]="true" [style]="{width: '400px'}">
|
|
<div class="flex flex-column gap-4 py-3">
|
|
<div class="field flex flex-column gap-2">
|
|
<label for="fieldLabel" class="font-semibold">Field Label</label>
|
|
<input id="fieldLabel" type="text" pInputText [(ngModel)]="newField.field_label" class="w-full" autofocus />
|
|
</div>
|
|
<div class="field flex flex-column gap-2">
|
|
<label for="fieldType" class="font-semibold">Field Type</label>
|
|
<p-dropdown id="fieldType" [options]="fieldTypes" [(ngModel)]="newField.field_type" [style]="{'width':'100%'}" appendTo="body"></p-dropdown>
|
|
</div>
|
|
</div>
|
|
<ng-template pTemplate="footer">
|
|
<p-button label="Cancel" icon="pi pi-times" (onClick)="displayAddField = false" styleClass="p-button-text"></p-button>
|
|
<p-button label="Save" icon="pi pi-check" (onClick)="addField()" [disabled]="!newField.field_label"></p-button>
|
|
</ng-template>
|
|
</p-dialog>
|