Text Extraction Done, UI Fixes Done, Extracted Template Layout Saved in DB
This commit is contained in:
107
frontend/src/app/templates/templates.component.html
Normal file
107
frontend/src/app/templates/templates.component.html
Normal file
@@ -0,0 +1,107 @@
|
||||
<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"
|
||||
id="document-layout-list"
|
||||
cdkDropList
|
||||
[cdkDropListData]="layoutNodes"
|
||||
[cdkDropListConnectedTo]="getConnectedDropLists()"
|
||||
(cdkDropListDropped)="drop($event)">
|
||||
|
||||
<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 node of layoutNodes" cdkDrag class="layout-node" [ngClass]="node.block_type.toLowerCase()">
|
||||
<div class="node-type">{{ node.block_type }}</div>
|
||||
<div class="node-text">{{ node.text_value }}</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]="['document-layout-list']"
|
||||
(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>
|
||||
154
frontend/src/app/templates/templates.component.scss
Normal file
154
frontend/src/app/templates/templates.component.scss
Normal file
@@ -0,0 +1,154 @@
|
||||
.template-mapping-container {
|
||||
height: calc(100vh - 100px);
|
||||
padding: 1rem;
|
||||
background-color: var(--surface-ground);
|
||||
}
|
||||
|
||||
.panel-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 1rem);
|
||||
width: calc(100% - 1rem);
|
||||
margin: 0.5rem;
|
||||
background: var(--surface-card);
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.header-section {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-area, .mapping-area {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
background-color: var(--surface-ground);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: var(--text-color-secondary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Draggable Nodes */
|
||||
.layout-node {
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: white;
|
||||
border: 1px solid var(--surface-border);
|
||||
border-left: 4px solid var(--primary-color);
|
||||
border-radius: 4px;
|
||||
cursor: grab;
|
||||
transition: box-shadow 0.2s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.node-type {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-color-secondary);
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.node-text {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-color);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Color coding by block type */
|
||||
&.header { border-left-color: #3B82F6; }
|
||||
&.vendor { border-left-color: #8B5CF6; }
|
||||
&.table_header { border-left-color: #F59E0B; }
|
||||
&.total { border-left-color: #10B981; }
|
||||
&.tax { border-left-color: #EF4444; }
|
||||
}
|
||||
|
||||
/* Template Mapping Side */
|
||||
.template-field-container {
|
||||
background: white;
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
overflow: hidden;
|
||||
|
||||
.field-header {
|
||||
background: var(--surface-ground);
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.badge {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
background: var(--primary-color);
|
||||
color: var(--primary-color-text);
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.drop-zone {
|
||||
padding: 1rem;
|
||||
min-height: 60px;
|
||||
|
||||
.placeholder {
|
||||
color: var(--text-color-secondary);
|
||||
font-style: italic;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mapped-node {
|
||||
background: var(--primary-50);
|
||||
color: var(--primary-900);
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
border: 1px solid var(--primary-200);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* CDK Drag Drop */
|
||||
.cdk-drag-preview {
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
|
||||
0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||
0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.cdk-drag-placeholder {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.cdk-drag-animating {
|
||||
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
162
frontend/src/app/templates/templates.component.ts
Normal file
162
frontend/src/app/templates/templates.component.ts
Normal file
@@ -0,0 +1,162 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { DragDropModule, CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
|
||||
import { SplitterModule } from 'primeng/splitter';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { DialogModule } from 'primeng/dialog';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { DropdownModule } from 'primeng/dropdown';
|
||||
import { TableModule } from 'primeng/table';
|
||||
import { ToastModule } from 'primeng/toast';
|
||||
import { MessageService } from 'primeng/api';
|
||||
|
||||
import { TemplateService, DocumentLayout, TemplateField } from '../services/template.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-templates',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
DragDropModule,
|
||||
SplitterModule,
|
||||
ButtonModule,
|
||||
DialogModule,
|
||||
InputTextModule,
|
||||
DropdownModule,
|
||||
TableModule,
|
||||
ToastModule
|
||||
],
|
||||
providers: [MessageService],
|
||||
templateUrl: './templates.component.html',
|
||||
styleUrls: ['./templates.component.scss']
|
||||
})
|
||||
export class TemplatesComponent implements OnInit {
|
||||
// Document State
|
||||
documentId: string | null = null;
|
||||
layoutNodes: DocumentLayout[] = [];
|
||||
|
||||
// Template State
|
||||
templateName: string = '';
|
||||
templateFields: TemplateField[] = [];
|
||||
mappings: { [fieldId: number]: DocumentLayout[] } = {};
|
||||
|
||||
// UI State
|
||||
displayAddField: boolean = false;
|
||||
newField: TemplateField = { field_label: '', field_type: 'TEXT', display_order: 0, required_flag: false };
|
||||
fieldTypes = [
|
||||
{ label: 'TEXT', value: 'TEXT' },
|
||||
{ label: 'NUMBER', value: 'NUMBER' },
|
||||
{ label: 'DATE', value: 'DATE' },
|
||||
{ label: 'AMOUNT', value: 'AMOUNT' },
|
||||
{ label: 'ADDRESS', value: 'ADDRESS' },
|
||||
{ label: 'TABLE_COLUMN', value: 'TABLE_COLUMN' }
|
||||
];
|
||||
|
||||
constructor(
|
||||
private templateService: TemplateService,
|
||||
private messageService: MessageService
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {}
|
||||
|
||||
onFileUpload(event: any) {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
this.templateService.uploadDocument(file).subscribe({
|
||||
next: (res) => {
|
||||
this.documentId = res.id || res.pk_document_id;
|
||||
this.messageService.add({ severity: 'success', summary: 'Uploaded', detail: 'Document uploaded successfully.' });
|
||||
this.fetchLayout();
|
||||
},
|
||||
error: (err) => {
|
||||
this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Upload failed.' });
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
fetchLayout() {
|
||||
if (!this.documentId) return;
|
||||
this.templateService.getDocumentLayout(this.documentId).subscribe({
|
||||
next: (layouts) => {
|
||||
if (layouts.length === 0) {
|
||||
// Document might still be processing in the background Celery worker
|
||||
// Poll again after 2 seconds
|
||||
setTimeout(() => this.fetchLayout(), 2000);
|
||||
return;
|
||||
}
|
||||
this.layoutNodes = layouts;
|
||||
// Trigger auto-recognition
|
||||
this.autoRecognize();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
autoRecognize() {
|
||||
if (!this.documentId) return;
|
||||
this.templateService.recognizeTemplate(this.documentId).subscribe({
|
||||
next: (res) => {
|
||||
if (res.templateMatched) {
|
||||
this.messageService.add({ severity: 'info', summary: 'Template Recognized', detail: `Confidence: ${res.confidence}%` });
|
||||
// In a full implementation, we'd load the template fields and populate the mappings.
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
showAddFieldDialog() {
|
||||
this.newField = { field_label: '', field_type: 'TEXT', display_order: this.templateFields.length, required_flag: false };
|
||||
this.displayAddField = true;
|
||||
}
|
||||
|
||||
addField() {
|
||||
if (!this.newField.field_label) return;
|
||||
this.newField.pk_template_field_id = new Date().getTime(); // mock ID until saved
|
||||
this.templateFields.push({ ...this.newField });
|
||||
this.mappings[this.newField.pk_template_field_id] = [];
|
||||
this.displayAddField = false;
|
||||
}
|
||||
|
||||
saveTemplateAndMappings() {
|
||||
if (!this.templateName || this.templateName.trim() === '') {
|
||||
this.messageService.add({ severity: 'warn', summary: 'Warning', detail: 'Please provide a template name.' });
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.templateFields.length === 0) {
|
||||
this.messageService.add({ severity: 'warn', summary: 'Warning', detail: 'Please add at least one template field.' });
|
||||
return;
|
||||
}
|
||||
|
||||
this.templateService.createTemplate({
|
||||
template_name: this.templateName,
|
||||
fields: this.templateFields
|
||||
}).subscribe({
|
||||
next: (res) => {
|
||||
// In a real scenario, we pass res.templateId and map the layoutNodes
|
||||
this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Template & Mappings saved successfully.' });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Drag and Drop Logic
|
||||
drop(event: CdkDragDrop<DocumentLayout[]>, fieldId?: number) {
|
||||
if (event.previousContainer === event.container) {
|
||||
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
|
||||
} else {
|
||||
transferArrayItem(
|
||||
event.previousContainer.data,
|
||||
event.container.data,
|
||||
event.previousIndex,
|
||||
event.currentIndex,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
getConnectedDropLists() {
|
||||
// Return all field ID strings as drop lists
|
||||
return this.templateFields.map(f => 'field-' + f.pk_template_field_id);
|
||||
}
|
||||
}
|
||||
1
frontend/src/app/templates/templates.html
Normal file
1
frontend/src/app/templates/templates.html
Normal file
@@ -0,0 +1 @@
|
||||
<p>templates works!</p>
|
||||
0
frontend/src/app/templates/templates.scss
Normal file
0
frontend/src/app/templates/templates.scss
Normal file
11
frontend/src/app/templates/templates.ts
Normal file
11
frontend/src/app/templates/templates.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-templates',
|
||||
imports: [],
|
||||
templateUrl: './templates.html',
|
||||
styleUrl: './templates.scss',
|
||||
})
|
||||
export class Templates {
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user