Merge pull request #115 from Denis-RZ/codex/implement-visual-block-library-panel

Implement visual block library panel

Author: Denis-RZ

website/MyWebApp/Controllers/AdminBlockTemplateController.cs

@@ -124,6 +124,30 @@ public async Task<IActionResult> Import(IFormFile? file)
         return RedirectToAction(nameof(Index));
     }
 
+    [HttpGet]
+    public async Task<IActionResult> GetBlocks()
+    {
+        var items = await _db.BlockTemplates.AsNoTracking()
+            .OrderBy(t => t.Name)
+            .Select(t => new { t.Id, t.Name, Preview = t.Html.Length > 200 ? t.Html.Substring(0, 200) + "..." : t.Html })
+            .ToListAsync();
+        return Json(items);
+    }
+
+    [HttpPost]
+    [ValidateAntiForgeryToken]
+    public async Task<IActionResult> CreateFromSection(string name, string html)
+    {
+        if (string.IsNullOrWhiteSpace(name) || string.IsNullOrWhiteSpace(html))
+            return BadRequest();
+        html = _sanitizer.Sanitize(html);
+        var t = new BlockTemplate { Name = name, Html = html };
+        _db.BlockTemplates.Add(t);
+        _db.BlockTemplateVersions.Add(new BlockTemplateVersion { Template = t, Html = html });
+        await _db.SaveChangesAsync();
+        return Json(new { t.Id });
+    }
+
     public async Task<IActionResult> AddToPage(int id)
     {
         var item = await _db.BlockTemplates.FindAsync(id);

website/MyWebApp/Views/AdminContent/PageEditor.cshtml

@@ -8,7 +8,12 @@
     ViewData["Title"] = isNew ? "Create Page" : "Edit Page";
 }
 <h2>@ViewData["Title"]</h2>
-<form asp-action="@(isNew ? "Create" : "Edit")" method="post">
+<div class="page-editor">
+    <aside id="block-library" class="block-library">
+        <input type="text" id="block-search" class="search" placeholder="Search blocks..." />
+        <div class="block-list"></div>
+    </aside>
+    <form asp-action="@(isNew ? "Create" : "Edit")" method="post" class="editor-main">
     <input type="hidden" asp-for="Id" />
     <div>
         <div><label>Slug</label><input asp-for="Slug" id="slug-input" /></div>
@@ -63,14 +68,16 @@
         @await Html.PartialAsync("~/Views/Shared/_SectionEditor.cshtml", new PageSection(), new ViewDataDictionary(ViewData) { ["Index"] = "__index__" })
     </div>
     <button type="submit">Save</button>
-</form>
+    </form>
+</div>
 @section Scripts {
     <script>
         const layoutZones = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(
             ViewBag.LayoutZones as IReadOnlyDictionary<string, string[]> ??
             new Dictionary<string, string[]>()));
     </script>
     <script src="~/js/page-editor.js" asp-append-version="true"></script>
+    <script src="~/js/block-library.js" asp-append-version="true"></script>
     <script>
         const titleInput = document.getElementById('title-input');
         const slugInput = document.getElementById('slug-input');

website/MyWebApp/Views/Shared/_SectionEditor.cshtml

@@ -14,10 +14,11 @@
 <div id="code-editor" class="type-editor">
     <textarea asp-for="Html"></textarea>
 </div>
-<div id="file-editor" class="type-editor">
-    <input type="file" name="file" />
-</div>
-<script>
+    <div id="file-editor" class="type-editor">
+        <input type="file" name="file" />
+    </div>
+    <button type="button" class="add-library">Add to Library</button>
+    <script>
     const typeSelect = document.getElementById('type-select');
     const htmlDiv = document.getElementById('html-editor');
     const markdownDiv = document.getElementById('markdown-editor');

website/MyWebApp/wwwroot/css/admin.css

@@ -1315,3 +1315,43 @@ form.mb-3 {
 }
 .zone-group[data-zone="main"] { border-color: #2563eb; }
 .zone-group[data-zone="sidebar"] { border-color: #16a34a; }
+
+/* Block library panel */
+.page-editor {
+    display: flex;
+    gap: 1rem;
+}
+
+.block-library {
+    width: 220px;
+    flex-shrink: 0;
+    border-right: 1px solid #e2e8f0;
+    padding-right: 1rem;
+    margin-right: 1rem;
+}
+
+.block-library .search {
+    width: 100%;
+    margin-bottom: 0.5rem;
+}
+
+.block-card {
+    border: 1px solid #cbd5e1;
+    background: #fff;
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+    cursor: grab;
+}
+
+.block-card:hover {
+    box-shadow: 0 0 0 2px #0ea5e9 inset;
+}
+
+.block-card .block-preview {
+    font-size: 0.8rem;
+    color: #555;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin-bottom: 0.25rem;
+}

website/MyWebApp/wwwroot/js/block-library.js

@@ -0,0 +1,42 @@
+window.addEventListener('load', () => {
+    const panel = document.getElementById('block-library');
+    if (!panel) return;
+    const search = document.getElementById('block-search');
+    const list = panel.querySelector('.block-list');
+    let blocks = [];
+    fetch('/AdminBlockTemplate/GetBlocks')
+        .then(r => r.json())
+        .then(data => { blocks = data; render(blocks); });
+
+    function render(items) {
+        list.innerHTML = items.map(b => {
+            const encoded = b.preview.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+            return `<div class="block-card" draggable="true" data-id="${b.id}">
+                <div class="block-name">${b.name}</div>
+                <div class="block-preview">${encoded}</div>
+                <button type="button" class="quick-edit" data-id="${b.id}">Edit</button>
+            </div>`;
+        }).join('');
+    }
+
+    search?.addEventListener('input', () => {
+        const q = search.value.toLowerCase();
+        const filtered = blocks.filter(b => b.name.toLowerCase().includes(q));
+        render(filtered);
+    });
+
+    list.addEventListener('click', e => {
+        const btn = e.target.closest('.quick-edit');
+        if (btn) {
+            const id = btn.dataset.id;
+            window.location = `/AdminBlockTemplate/Edit/${id}`;
+        }
+    });
+
+    list.addEventListener('dragstart', e => {
+        const card = e.target.closest('.block-card');
+        if (!card) return;
+        window.draggedBlockId = card.dataset.id;
+        e.dataTransfer.effectAllowed = 'copy';
+    });
+});

website/MyWebApp/wwwroot/js/page-editor.js

@@ -133,6 +133,18 @@ window.addEventListener('load', () => {
         } else if (e.target.classList.contains('duplicate-section')) {
             const original = e.target.closest('.section-editor');
             duplicateSection(original);
+        } else if (e.target.classList.contains('add-library')) {
+            const section = e.target.closest('.section-editor');
+            const idx = section.dataset.index;
+            const name = prompt('Block name');
+            if (!name) return;
+            const html = editors[idx].root.innerHTML;
+            const token = document.querySelector('input[name="__RequestVerificationToken"]').value;
+            fetch('/AdminBlockTemplate/CreateFromSection', {
+                method: 'POST',
+                headers: { 'RequestVerificationToken': token },
+                body: new URLSearchParams({ name, html })
+            }).then(() => alert('Saved to library'));
         }
     });
 
@@ -145,7 +157,7 @@ window.addEventListener('load', () => {
         }
     });
 
-    function addSection() {
+    function addSection(htmlContent = '', zone = null) {
         const index = sectionCount++;
         const html = templateHtml.replace(/__index__/g, index);
         const temp = document.createElement('div');
@@ -155,9 +167,29 @@ window.addEventListener('load', () => {
         populateZones(section.querySelector('.zone-select'));
         placeSection(section);
         initSectionEditor(index);
+        if (htmlContent) {
+            editors[index].root.innerHTML = htmlContent;
+            const input = document.getElementById(`Html-${index}`);
+            if (input) input.value = htmlContent;
+        }
+        if (zone) {
+            const select = section.querySelector('.zone-select');
+            if (select) { select.value = zone; }
+            placeSection(section);
+        }
         updateIndexes();
         updatePreview();
         updateZoneCounts();
+        return index;
+    }
+
+    function addSectionFromBlock(id, zone) {
+        fetch(`/AdminBlockTemplate/Html/${id}`)
+            .then(r => r.text())
+            .then(html => {
+                addSection(html, zone);
+                autoSave();
+            });
     }
 
     function duplicateSection(original) {
@@ -204,11 +236,13 @@ window.addEventListener('load', () => {
     }
 
     let dragged = null;
+    let draggedBlockId = null;
     const dropIndicator = document.createElement('div');
     dropIndicator.className = 'drop-indicator';
 
     container.addEventListener('dragstart', e => {
         dragged = e.target.closest('.section-editor');
+        draggedBlockId = null;
         if (dragged) {
             dragged.classList.add('dragging');
             document.querySelectorAll('.zone-group').forEach(z => z.classList.add('drag-over'));
@@ -221,7 +255,7 @@ window.addEventListener('load', () => {
         const zone = e.target.closest('.zone-group');
         const target = e.target.closest('.section-editor');
         if (zone) zone.classList.add('drag-over');
-        if (dragged && target && target !== dragged) {
+        if (!draggedBlockId && dragged && target && target !== dragged) {
             const rect = target.getBoundingClientRect();
             const next = (e.clientY - rect.top) > (rect.height / 2);
             target.parentNode.insertBefore(dropIndicator, next ? target.nextSibling : target);
@@ -237,6 +271,13 @@ window.addEventListener('load', () => {
 
     container.addEventListener('drop', e => {
         e.preventDefault();
+        const zone = e.target.closest('.zone-group');
+        if (draggedBlockId && zone) {
+            addSectionFromBlock(draggedBlockId, zone.dataset.zone);
+            draggedBlockId = null;
+            document.querySelectorAll('.zone-group.drag-over').forEach(z => z.classList.remove('drag-over'));
+            return;
+        }
         if (dropIndicator.parentNode) {
             dropIndicator.parentNode.insertBefore(dragged, dropIndicator);
             dropIndicator.remove();
@@ -261,6 +302,12 @@ window.addEventListener('load', () => {
         });
     }
 
+    function autoSave() {
+        if (!form) return;
+        const fd = new FormData(form);
+        fetch(form.action, { method: 'POST', body: fd });
+    }
+
     function initSectionEditor(index) {
         const typeSelect = document.getElementById(`type-select-${index}`);
         const htmlDiv = document.getElementById(`html-editor-${index}`);