Modernize UI with DevExpress icons and improved layout
Updated `Index.cshtml`: - Added icons and a more descriptive project title. - Introduced a new introductory paragraph explaining the app's purpose. - Replaced the old alert section with a detailed workflow explanation. - Added cards for invoice upload and summary navigation. - Included a technology stack section with badges for key tools. Updated `Details.cshtml`: - Replaced text-based icons with DevExpress icons for titles, buttons, and attachments. - Improved attachment handling with `<i>` tags and consistent icon usage. - Updated "No attachments" message to include an icon. These changes enhance the UI's visual consistency, usability, and professionalism.
This commit is contained in:
OlgunR
@@ -5,33 +5,81 @@
|
||||
}
|
||||
|
||||
<div class="content-block">
|
||||
<h2>Willkommen bei DXApp.TemplateKitProject</h2>
|
||||
<h2><i class="dx-icon-product"></i> DevExpress TemplateKit – Evaluierungsprojekt</h2>
|
||||
<p class="lead text-muted">Validierung von DevExpress als Ablösung für GdPicture im Rahmen der E-Rechnungsverarbeitung</p>
|
||||
|
||||
<div class="alert alert-info mt-4">
|
||||
<h4>?? ZUGFeRD-Rechnungsverarbeitung</h4>
|
||||
<p>Diese Anwendung ermöglicht die Verarbeitung von ZUGFeRD/Factur-X Rechnungen:</p>
|
||||
<ul>
|
||||
<li>? Upload von PDF/A-Rechnungen</li>
|
||||
<li>? Automatische Extraktion von ZUGFeRD-XML</li>
|
||||
<li>? Parsing und Speicherung in der Datenbank</li>
|
||||
<li>? Erstellung von Result-PDFs mit Verarbeitungsstempel</li>
|
||||
<li>? Anzeige von Anhängen (XML, PDF, Bilder)</li>
|
||||
</ul>
|
||||
<div class="alert alert-primary mt-4">
|
||||
<h4><i class="dx-icon-todo"></i> Projektziel: ZUGFeRD/Factur-X Rechnungsverarbeitung</h4>
|
||||
<p>Diese Anwendung demonstriert die vollständige Verarbeitungskette für elektronische Rechnungen:</p>
|
||||
|
||||
<ol class="mt-3">
|
||||
<li class="mb-2">
|
||||
<strong>Upload & Validierung</strong>
|
||||
<br/>
|
||||
<small class="text-muted">E-Rechnungen im PDF/A-Format hochladen und auf Konformität prüfen</small>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<strong>Extraktion</strong>
|
||||
<br/>
|
||||
<small class="text-muted">Automatische Erkennung und Extraktion eingebetteter Anhänge (ZUGFeRD-XML, Bilder, Dokumente)</small>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<strong>Datenverarbeitung</strong>
|
||||
<br/>
|
||||
<small class="text-muted">Parsing der Rechnungsdaten aus dem ZUGFeRD-XML und persistente Speicherung in der Datenbank</small>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<strong>Workflow-Integration</strong>
|
||||
<br/>
|
||||
<small class="text-muted">Durchlauf definierter Verarbeitungsschritte mit Status-Tracking</small>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<strong>Ausgabe-Generierung</strong>
|
||||
<br/>
|
||||
<small class="text-muted">Erstellung einer Result-PDF mit Verarbeitungsstempel und angehängtem Ergebnisbericht</small>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<strong>Visualisierung</strong>
|
||||
<br/>
|
||||
<small class="text-muted">Interaktive Anzeige aller Anhänge (XML mit Syntax-Highlighting, PDF-Viewer, Bilder)</small>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<h4>Navigation</h4>
|
||||
<div class="list-group">
|
||||
<a href="/Invoices/Upload" class="list-group-item list-group-item-action">
|
||||
<strong>?? PDF hochladen</strong>
|
||||
<br/>
|
||||
<small class="text-muted">Laden Sie eine ZUGFeRD-Rechnung hoch und verarbeiten Sie diese.</small>
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title"><i class="dx-icon-upload"></i> Rechnungen hochladen</h5>
|
||||
<p class="card-text">Laden Sie ZUGFeRD-konforme E-Rechnungen hoch und starten Sie die automatische Verarbeitung.</p>
|
||||
<a href="/Invoices/Upload" class="btn btn-primary">
|
||||
<i class="dx-icon-upload"></i> Zum Upload
|
||||
</a>
|
||||
<a href="/Invoices" class="list-group-item list-group-item-action">
|
||||
<strong>?? Rechnungen</strong>
|
||||
<br/>
|
||||
<small class="text-muted">Zeigen Sie alle importierten Rechnungen an.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title"><i class="dx-icon-chart"></i> Rechnungsübersicht</h5>
|
||||
<p class="card-text">Zeigen Sie alle importierten Rechnungen an und greifen Sie auf Details und Anhänge zu.</p>
|
||||
<a href="/Invoices" class="btn btn-secondary">
|
||||
<i class="dx-icon-doc"></i> Zur Übersicht
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-light mt-4">
|
||||
<h6 class="mb-2"><i class="dx-icon-preferences"></i> Technologie-Stack</h6>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<span class="badge bg-secondary">ASP.NET Core 8.0</span>
|
||||
<span class="badge bg-secondary">DevExpress v25.2</span>
|
||||
<span class="badge bg-secondary">Entity Framework Core</span>
|
||||
<span class="badge bg-secondary">PDF.js</span>
|
||||
<span class="badge bg-secondary">CodeMirror</span>
|
||||
<span class="badge bg-secondary">SQL Server</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -11,14 +11,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
<h2>📄 Rechnungsdetails</h2>
|
||||
<a href="/Invoices" class="btn btn-secondary mb-3">← Zurück zur Liste</a>
|
||||
<h2><i class="dx-icon-doc"></i> Rechnungsdetails</h2>
|
||||
<a href="/Invoices" class="btn btn-secondary mb-3"><i class="dx-icon-back"></i> Zurück zur Liste</a>
|
||||
|
||||
@if (!string.IsNullOrEmpty(Model.Invoice?.ResultFilePath))
|
||||
{
|
||||
<button class="btn btn-primary mb-3 ms-2"
|
||||
onclick="openPdfViewer(@Model.Invoice.Id)">
|
||||
📄 Ergebnis anzeigen
|
||||
<i class="dx-icon-pdffile"></i> Ergebnis anzeigen
|
||||
</button>
|
||||
}
|
||||
|
||||
@@ -60,26 +60,26 @@ else
|
||||
@* Anhänge-Sektion *@
|
||||
@if (Model.Invoice.Attachments.Any())
|
||||
{
|
||||
<h4 class="mt-4">📎 Anhänge (@Model.Invoice.Attachments.Count)</h4>
|
||||
<h4 class="mt-4"><i class="dx-icon-attach"></i> Anhänge (@Model.Invoice.Attachments.Count)</h4>
|
||||
<div class="list-group">
|
||||
@foreach (var attachment in Model.Invoice.Attachments)
|
||||
{
|
||||
var icon = attachment.IsZugferdXml ? "📋" : "📄";
|
||||
var icon = "dx-icon-file";
|
||||
var extension = System.IO.Path.GetExtension(attachment.OriginalFileName).ToLowerInvariant();
|
||||
icon = extension switch
|
||||
{
|
||||
".xml" => "📋",
|
||||
".pdf" => "📄",
|
||||
".jpg" or ".jpeg" or ".png" or ".gif" => "🖼️",
|
||||
".txt" => "📝",
|
||||
_ => "📎"
|
||||
".xml" => "dx-icon-exportxlsx",
|
||||
".pdf" => "dx-icon-pdffile",
|
||||
".jpg" or ".jpeg" or ".png" or ".gif" => "dx-icon-image",
|
||||
".txt" => "dx-icon-txtfile",
|
||||
_ => "dx-icon-file"
|
||||
};
|
||||
|
||||
<a href="javascript:void(0);"
|
||||
class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
|
||||
onclick="openAttachmentViewer('@attachment.OriginalFileName', '@Uri.EscapeDataString(attachment.SavedFilePath)', '@extension')">
|
||||
<div>
|
||||
<span class="me-2">@icon</span>
|
||||
<i class="@icon me-2"></i>
|
||||
<strong>@attachment.OriginalFileName</strong>
|
||||
@if (attachment.IsZugferdXml)
|
||||
{
|
||||
@@ -98,7 +98,7 @@ else
|
||||
}
|
||||
else
|
||||
{
|
||||
<h4 class="mt-4">📎 Anhänge</h4>
|
||||
<h4 class="mt-4"><i class="dx-icon-attach"></i> Anhänge</h4>
|
||||
<div class="alert alert-info">Keine Anhänge extrahiert.</div>
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user