diff --git a/ExcelKv.Core/ExcelLoader.cs b/ExcelKv.Core/ExcelLoader.cs index baaa782..58eff38 100644 --- a/ExcelKv.Core/ExcelLoader.cs +++ b/ExcelKv.Core/ExcelLoader.cs @@ -144,7 +144,9 @@ public class ExcelLoader if (string.IsNullOrWhiteSpace(val)) val = lastLeftValues[c]; else lastLeftValues[c] = val; if(!string.IsNullOrWhiteSpace(val)) { - currentLeftParts.Add(val); + var headerLabel = (c < leftAxisHeaders.Count) ? leftAxisHeaders[c] : $"Col{c}"; + var combined = CombineHeaderAndValue(headerLabel, val); + if (!string.IsNullOrWhiteSpace(combined)) currentLeftParts.Add(combined); rowHasContent = true; } } @@ -256,15 +258,35 @@ public class ExcelLoader string val = (c < headerRows[r].Length) ? headerRows[r][c] : ""; if (!string.IsNullOrWhiteSpace(val)) parts.Add(val); } - // If empty, use "Col_Index" fallback or keep empty? - // User schema usually requires keys. If empty, it's skipped in mapping. - // Let's keep it empty, but if data exists, it won't map unless we have a key. - // If parts is empty, let's leave valid empty string so mapping can decide. - flatHeaders.Add(string.Join("__", parts)); + var combined = CombineHeaderParts(parts); + if (string.IsNullOrWhiteSpace(combined)) + { + int logicalIndex = c - startCol; + combined = $"Col_{logicalIndex}"; + } + flatHeaders.Add(combined); } return flatHeaders; } + private static string CombineHeaderParts(IEnumerable parts) + { + var clean = parts + .Where(p => !string.IsNullOrWhiteSpace(p)) + .Select(p => p.Trim()); + var joined = string.Join(".", clean); + return joined; + } + + private static string CombineHeaderAndValue(string header, string value) + { + header = header?.Trim() ?? ""; + value = value?.Trim() ?? ""; + if (string.IsNullOrWhiteSpace(value)) return ""; + if (string.IsNullOrWhiteSpace(header)) return value; + return $"{header}.{value}"; + } + private record MergeRange(int StartRow, int EndRow, int StartCol, int EndCol); private static List GetMergedRanges(string filePath, string sheetName) diff --git a/SchemaEditor/Components/Layout/MainLayout.razor b/SchemaEditor/Components/Layout/MainLayout.razor index 62e6287..96b10af 100644 --- a/SchemaEditor/Components/Layout/MainLayout.razor +++ b/SchemaEditor/Components/Layout/MainLayout.razor @@ -1,23 +1,19 @@ -@inherits LayoutComponentBase - -
-
- -
- -
-
- About -
- -
- @Body -
-
-
- -
- An unhandled error has occurred. - Reload - 🗙 -
+@inherits LayoutComponentBase + +
+
+ +
+ +
+
+ @Body +
+
+
+ +
+ An unhandled error has occurred. + Reload + 🗙 +
diff --git a/SchemaEditor/Components/Layout/MainLayout.razor.css b/SchemaEditor/Components/Layout/MainLayout.razor.css index 49baa0c..9e9e387 100644 --- a/SchemaEditor/Components/Layout/MainLayout.razor.css +++ b/SchemaEditor/Components/Layout/MainLayout.razor.css @@ -1,96 +1,53 @@ -.page { - position: relative; - display: flex; - flex-direction: column; -} - -main { - flex: 1; -} - -.sidebar { - background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); -} - -.top-row { - background-color: #f7f7f7; - border-bottom: 1px solid #d6d5d5; - justify-content: flex-end; - height: 3.5rem; - display: flex; - align-items: center; -} - - .top-row ::deep a, .top-row ::deep .btn-link { - white-space: nowrap; - margin-left: 1.5rem; - text-decoration: none; - } - - .top-row ::deep a:hover, .top-row ::deep .btn-link:hover { - text-decoration: underline; - } - - .top-row ::deep a:first-child { - overflow: hidden; - text-overflow: ellipsis; - } - -@media (max-width: 640.98px) { - .top-row { - justify-content: space-between; - } - - .top-row ::deep a, .top-row ::deep .btn-link { - margin-left: 0; - } -} - -@media (min-width: 641px) { - .page { - flex-direction: row; - } - - .sidebar { - width: 250px; - height: 100vh; - position: sticky; - top: 0; - } - - .top-row { - position: sticky; - top: 0; - z-index: 1; - } - - .top-row.auth ::deep a:first-child { - flex: 1; - text-align: right; - width: 0; - } - - .top-row, article { - padding-left: 2rem !important; - padding-right: 1.5rem !important; - } -} - -#blazor-error-ui { - background: lightyellow; - bottom: 0; - box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); - display: none; - left: 0; - padding: 0.6rem 1.25rem 0.7rem 1.25rem; - position: fixed; - width: 100%; - z-index: 1000; -} - - #blazor-error-ui .dismiss { - cursor: pointer; - position: absolute; - right: 0.75rem; - top: 0.5rem; - } +.page { + position: relative; + display: flex; + flex-direction: column; + min-height: 100vh; + background-color: #f8f9fa; +} + +.top-nav-wrapper { + position: sticky; + top: 0; + z-index: 1020; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); +} + +.main-shell { + flex: 1; + display: flex; + flex-direction: column; +} + +article.content { + padding-left: 1.5rem !important; + padding-right: 1.5rem !important; + max-width: 100%; + overflow-x: hidden; +} + +@media (min-width: 992px) { + article.content { + padding-left: 2rem !important; + padding-right: 2rem !important; + } +} + +#blazor-error-ui { + background: lightyellow; + bottom: 0; + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); + display: none; + left: 0; + padding: 0.6rem 1.25rem 0.7rem 1.25rem; + position: fixed; + width: 100%; + z-index: 1000; +} + + #blazor-error-ui .dismiss { + cursor: pointer; + position: absolute; + right: 0.75rem; + top: 0.5rem; + } diff --git a/SchemaEditor/Components/Layout/NavMenu.razor b/SchemaEditor/Components/Layout/NavMenu.razor index 7a98ad3..d156af8 100644 --- a/SchemaEditor/Components/Layout/NavMenu.razor +++ b/SchemaEditor/Components/Layout/NavMenu.razor @@ -1,39 +1,44 @@ -
-
- SchemaEditor - -
-
- -
- -
- -@code { - private bool collapseNavMenu = true; - - private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null; - - private void ToggleNavMenu() - { - collapseNavMenu = !collapseNavMenu; - } -} + + +@code { + private bool collapseNavMenu = true; + + private string NavMenuCssClass => collapseNavMenu ? "collapse navbar-collapse" : "navbar-collapse show"; + + private void ToggleNavMenu() + { + collapseNavMenu = !collapseNavMenu; + } +} diff --git a/SchemaEditor/Components/Layout/NavMenu.razor.css b/SchemaEditor/Components/Layout/NavMenu.razor.css index 2275bdb..e70b109 100644 --- a/SchemaEditor/Components/Layout/NavMenu.razor.css +++ b/SchemaEditor/Components/Layout/NavMenu.razor.css @@ -1,105 +1,63 @@ -.navbar-toggler { - appearance: none; - cursor: pointer; - width: 3.5rem; - height: 2.5rem; - color: white; - position: absolute; - top: 0.5rem; - right: 1rem; - border: 1px solid rgba(255, 255, 255, 0.1); - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1); -} - -.navbar-toggler:checked { - background-color: rgba(255, 255, 255, 0.5); -} - -.top-row { - height: 3.5rem; - background-color: rgba(0,0,0,0.4); -} - -.navbar-brand { - font-size: 1.1rem; -} - -.bi { - display: inline-block; - position: relative; - width: 1.25rem; - height: 1.25rem; - margin-right: 0.75rem; - top: -1px; - background-size: cover; -} - -.bi-house-door-fill-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); -} - -.bi-plus-square-fill-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E"); -} - -.bi-list-nested-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E"); -} - -.nav-item { - font-size: 0.9rem; - padding-bottom: 0.5rem; -} - - .nav-item:first-of-type { - padding-top: 1rem; - } - - .nav-item:last-of-type { - padding-bottom: 1rem; - } - - .nav-item ::deep .nav-link { - color: #d7d7d7; - background: none; - border: none; - border-radius: 4px; - height: 3rem; - display: flex; - align-items: center; - line-height: 3rem; - width: 100%; - } - -.nav-item ::deep a.active { - background-color: rgba(255,255,255,0.37); - color: white; -} - -.nav-item ::deep .nav-link:hover { - background-color: rgba(255,255,255,0.1); - color: white; -} - -.nav-scrollable { - display: none; -} - -.navbar-toggler:checked ~ .nav-scrollable { - display: block; -} - -@media (min-width: 641px) { - .navbar-toggler { - display: none; - } - - .nav-scrollable { - /* Never collapse the sidebar for wide screens */ - display: block; - - /* Allow sidebar to scroll for tall menus */ - height: calc(100vh - 3.5rem); - overflow-y: auto; - } -} +.top-nav { + background-image: linear-gradient(90deg, rgb(5, 39, 103) 0%, #3a0647 80%); + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.navbar-brand { + font-weight: 700; + letter-spacing: 0.5px; +} + +.navbar-toggler { + border-color: rgba(255, 255, 255, 0.25); +} + +.navbar-toggler:focus { + box-shadow: none; +} + +.top-nav .nav-link { + color: #e7e7e7; + display: inline-flex; + align-items: center; + gap: 0.35rem; +} + +.top-nav .nav-link.active, +.top-nav .nav-link:hover { + color: #fff; +} + +.top-nav .nav-link.active { + background: rgba(255, 255, 255, 0.18); + border-radius: 0.35rem; +} + +.bi { + display: inline-block; + position: relative; + width: 1.1rem; + height: 1.1rem; + margin-right: 0.35rem; + top: -1px; + background-size: cover; +} + +.bi-house-door-fill-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); +} + +.bi-plus-square-fill-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E"); +} + +.bi-list-nested-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E"); +} + +@media (max-width: 991.98px) { + .top-nav .nav-link { + padding-left: 0.35rem; + } +} diff --git a/SchemaEditor/Components/Pages/DataExplorer.razor b/SchemaEditor/Components/Pages/DataExplorer.razor index 437f2d4..61d0179 100644 --- a/SchemaEditor/Components/Pages/DataExplorer.razor +++ b/SchemaEditor/Components/Pages/DataExplorer.razor @@ -34,7 +34,7 @@ @searchResults.Count keys found
-
+
diff --git a/SchemaEditor/Components/Pages/DataExplorer.razor.css b/SchemaEditor/Components/Pages/DataExplorer.razor.css new file mode 100644 index 0000000..af5fe97 --- /dev/null +++ b/SchemaEditor/Components/Pages/DataExplorer.razor.css @@ -0,0 +1,17 @@ +.grid-container { + height: 600px; + max-height: 600px; + overflow: auto; + width: 100%; + max-width: 100%; +} + +.grid-container ::deep table { + min-width: 100%; + width: max-content; +} + +.grid-container ::deep th, +.grid-container ::deep td { + white-space: nowrap; +} diff --git a/SchemaEditor/Components/Pages/Editor.razor b/SchemaEditor/Components/Pages/Editor.razor index 8fd8cba..ae3805b 100644 --- a/SchemaEditor/Components/Pages/Editor.razor +++ b/SchemaEditor/Components/Pages/Editor.razor @@ -7,7 +7,7 @@ @inject IJSRuntime JSRuntime @rendermode InteractiveServer -
+

Standard Schema Editor

@if (ExcelService.LoadedData.Any()) @@ -147,12 +147,12 @@
RAW PREVIEW
-
+
- - @for (int c = 0; c < (rawData.FirstOrDefault()?.Length ?? 0); c++) + + @for (int c = 0; c < MaxCols; c++) { bool isSearchMatch = SearchMatch(c, -1); bool isLeftAxis = c >= config.LeftHeaderStartCol && c < config.LeftHeaderStartCol + config.LeftHeaderWidth; @@ -173,16 +173,17 @@ bool isLimit = (config.DataEndRow.HasValue && r == config.DataEndRow.Value) || (!config.DataEndRow.HasValue && r == rawData.Count - 1); - @{ int dataStartCol = config.LeftHeaderStartCol + config.LeftHeaderWidth; bool isDataRowRange = r >= (config.TopHeaderStartRow + config.TopHeaderDepth) && (!config.DataEndRow.HasValue || r <= config.DataEndRow.Value); } - @for (int c = 0; c < rawData[r].Length; c++) + @for (int c = 0; c < MaxCols; c++) { - var val = rawData[r][c]; + var val = c < rawData[r].Length ? rawData[r][c] : ""; bool isHighlighted = (r == highlightedRow && c == highlightedCol); bool isLimitCol = (config.DataEndCol.HasValue && c == config.DataEndCol.Value); bool isLeftAxisCol = c >= config.LeftHeaderStartCol && c < config.LeftHeaderStartCol + config.LeftHeaderWidth; @@ -209,12 +210,12 @@ @{ // Determine if this is the "End" cell // Rule: It is the End Row. - // And it is either the explicit End Col OR the last column in the row if End Col is null. + // And it is either the explicit End Col OR the global max column if End Col is null. bool isVisualEndCol = false; if (isLimit) { if (config.DataEndCol.HasValue) isVisualEndCol = (c == config.DataEndCol.Value); - else isVisualEndCol = (c == rawData[r].Length - 1); + else isVisualEndCol = (c == MaxCols - 1); } } @@ -251,12 +252,12 @@
-
+
##
+ + @r @if(isLimit) { END }
- - + + @@ -266,7 +267,7 @@ class="@(highlightedRow == item.Row && highlightedCol == item.Col ? "table-info border border-2 border-info" : "")" style="cursor: pointer;" @onclick="() => HighlightCell(item.Row, item.Col)"> - + } @@ -340,6 +341,8 @@ private int highlightedRow = -1; private int highlightedCol = -1; + private int MaxCols => rawData.Count == 0 ? 0 : rawData.Max(r => r.Length); + // Search State private string searchText = ""; diff --git a/SchemaEditor/Components/Pages/Editor.razor.css b/SchemaEditor/Components/Pages/Editor.razor.css new file mode 100644 index 0000000..306af28 --- /dev/null +++ b/SchemaEditor/Components/Pages/Editor.razor.css @@ -0,0 +1,62 @@ +.editor-page { + overflow-x: hidden; + max-width: 100%; +} + +:global(article.content) { + overflow-x: hidden; +} + +.table-scroll { + width: 100%; + max-width: 100%; + overflow: auto; + position: relative; +} + +.table-scroll table { + min-width: 100%; + width: max-content; +} + +.table-scroll th, +.table-scroll td { + white-space: nowrap; +} + +.preview-scroll { + max-height: 600px; + overflow-y: auto; +} + +.result-scroll { + max-height: 560px; + overflow-y: auto; +} + +.row-index-cell { + min-width: 40px; + width: 40px; +} + +.sticky-col { + position: sticky; + left: 0; + z-index: 2; + background: #fff; +} + +.sticky-header { + position: sticky; + top: 0; + z-index: 3; + background: #f8f9fa; +} + +.sticky-col-header { + position: sticky; + left: 0; + top: 0; + z-index: 4; + background: #f8f9fa; +}
KeyValueKeyValue
@item.Key@item.Key @item.Value