SeemGen/Components/Pages/EditTemplate.razor

@page "/edit-template/{TemplateId:int}"
@using BLAIzor.Components.Layout
@using BLAIzor.Models
@using BLAIzor.Services
@using Newtonsoft.Json
@using BLAIzor.Components.Partials
@attribute [Authorize]
@layout AdminLayout
@inject DesignTemplateService DesignTemplateService
@inject CssTemplateService CssTemplateService
@inject NavigationManager NavigationManager
@inject QDrantService QDrantService
@inject HtmlSnippetProcessor HtmlSnippetProcessor
@inject IJSRuntime JSRuntime

<h3>Edit Design Template</h3>



@if (isLoading)
{
    <p>Loading...</p>
}
else
{
    <EditForm Model="currentTemplate" OnValidSubmit="SaveTemplate">
        <DataAnnotationsValidator />
        <ValidationSummary />
        <div class="row">
            <div class="form-group col-md-4">
                <label>Template Name</label>
                <InputText class="form-control" @bind-Value="currentTemplate.TemplateName" />
            </div>

            <div class="form-group col-md-4">
                <label>Template photo url</label>
                <InputText class="form-control" @bind-Value="currentTemplate.TemplatePhotoUrl" />
            </div>

            <div class="form-group col-md-4">
                <label>Tags (comma-separated)</label>
                <InputText class="form-control" @bind-Value="currentTemplate.Tags" />
            </div>
        </div>

        <div class="form-group">
            <label>Description</label>
            <InputTextArea class="form-control" @bind-Value="currentTemplate.Description" />
        </div>

        <div class="form-group">
            <label>CSS Content</label>
            <RadzenHtmlEditor @bind-Value=@currentCssTemplate.CssContent
                              style="height: 450px; color:#000; background-color: rgba(255,255,255,0.4)"
                              Input=@OnInput
                              Change=@OnChange
                              Paste=@OnPaste
                              UploadComplete=@OnUploadComplete
                              Execute=@OnExecute
                              UploadUrl="upload/image">
                <RadzenHtmlEditorUndo />
                <RadzenHtmlEditorRedo />
                <RadzenHtmlEditorSource />
            </RadzenHtmlEditor>
            @* <InputTextArea class="form-control" @bind-Value="currentCssTemplate.CssContent" /> *@
        </div>

        <button class="btn btn-success" type="submit">Save Changes</button>
    </EditForm>

    <hr />

    <button class="btn btn-danger" @onclick="DeleteTemplate">Delete Template</button>

    <div class="rz-p-sm-12">
        <RadzenAccordion>
            <Items>

                @{
                    foreach (var snippet in SnippetList)
                    {
                        <RadzenAccordionItem Text="@snippet.Name" Icon="account_balance_wallet" CollapseTitle="Collapse snippet."
                                             ExpandTitle="Expand snippet." CollapseAriaLabel="Collapse the snippet details."
                                             ExpandAriaLabel="Expand the snippet details.">
                            <TemplateSnippetEditor TemplateId="@TemplateId" Snippet="@snippet" OnContentUpdated="UpdateSnippet"></TemplateSnippetEditor>
                        </RadzenAccordionItem>
                    }
                }

            </Items>
        </RadzenAccordion>
    </div>





    <button class="btn btn-primary mt-3" @onclick="AddSnippet">Add new html snippets</button>
    <button class="btn btn-success mt-3" @onclick="SaveSnippets">Save html snippets</button>




}

<script>
    var sessionId = null;

    function setSessionId(id) {
    sessionId = id;
    console.log("Session ID set:", sessionId);
    }
</script>

@code {
    [Parameter]
    public int TemplateId { get; set; }

    private bool isLoading = true;
    private DesignTemplate currentTemplate = new();
    private CssTemplate currentCssTemplate = new();
    private bool hasCss = false;
    private bool hasCollection = false;
    private List<HtmlSnippet> SnippetList = [];
    private string SessionId;
    private static readonly Dictionary<string, EditTemplate> _instances = new();

    protected override async Task OnInitializedAsync()
    {
        SessionId = Guid.NewGuid().ToString();
        _instances[SessionId] = this;


    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("setSessionId", SessionId);
            await JSRuntime.InvokeVoidAsync("setHtmlEditorSourceMode");
            await LoadTemplate();
            //var cssPath = await CssTemplateService.SaveTempCssFileAsync(currentCssTemplate.CssContent, SessionId);
            //await JSRuntime.InvokeVoidAsync("seemgen.injectCssFile", cssPath);

        }
    }

    private async Task LoadTemplate()
    {
        isLoading = true;

        // Load the design template and its associated CSS template from the database
        currentTemplate = await DesignTemplateService.GetByIdAsync(TemplateId);
        currentCssTemplate = await CssTemplateService.GetByDesignTemplateIdAsync(TemplateId);
        var currentCollection = await QDrantService.GetCollectionByNameAsync(currentTemplate.QDrandCollectionName);
        Console.Write(currentCollection);
        if (currentCssTemplate == null)
        {
            hasCss = false;
            currentCssTemplate = new();
            currentCssTemplate.DesignTemplateId = TemplateId;
        }
        else
        {
            hasCss = true;
        }
        if (!string.IsNullOrEmpty(currentCollection))
        {
            hasCollection = true;
            var collectionCount = await QDrantService.GetCollectionCount(currentTemplate.QDrandCollectionName);
            for (int i = 1; i <= collectionCount; i++)
            {
                var snippet = await QDrantService.GetSnippetAsync(i, currentTemplate.QDrandCollectionName);
                var selectedPoint = JsonConvert.DeserializeObject<QDrantGetPointResult>(snippet)!;


                Console.Write($"Id: {selectedPoint.result.id}, html: {selectedPoint.result.payload.Html}");
                SnippetList.Add(selectedPoint.result.payload);
            }
        }
        else
        {
            //let's create a collection
            var result = QDrantService.CreateQdrantCollectionAsync(currentTemplate.QDrandCollectionName);
        }

        isLoading = false;
        await InvokeAsync(StateHasChanged);
    }

    private async Task SaveTemplate()
    {
        isLoading = true;
        currentCssTemplate.CssContent = currentCssTemplate.CssContent.Trim();

        if (hasCss)
        {
            // Update the CSS template content
            currentCssTemplate.LastUpdated = DateTime.UtcNow;
            await CssTemplateService.UpdateAsync(currentCssTemplate);

        }
        else
        {
            // Create the CSS template content
            currentCssTemplate.LastUpdated = DateTime.UtcNow;
            await CssTemplateService.CreateAsync(currentCssTemplate);
        }

        // Save the CSS template

        // Save the design template
        currentTemplate.UpdatedAt = DateTime.Now;
        await DesignTemplateService.UpdateAsync(currentTemplate);

        isLoading = false;

        // Redirect to the template manager page after saving
        NavigationManager.NavigateTo("/design-templates");
    }

    private async Task DeleteTemplate()
    {
        isLoading = true;

        // Delete the CSS template first
        await CssTemplateService.DeleteAsync(currentCssTemplate.Id);

        // Delete the design template
        await DesignTemplateService.DeleteAsync(currentTemplate.Id);

        isLoading = false;

        // Redirect to the template manager page after deletion
        NavigationManager.NavigateTo("/design-templates");
    }
    private void UpdateSnippet(HtmlSnippet updatedItem)
    {
        var item = SnippetList.FirstOrDefault(i => i.Name == updatedItem.Name);
        if (item != null)
        {
            item.Html = updatedItem.Html;
        }
    }

    private async Task SaveSnippets()
    {
        //I want to update all items without gaps in the ids always 1 to x
        for (int i = 1; i <= SnippetList.Count(); i++)
        {
            SnippetList[i - 1].Id = i;

        }
        await HtmlSnippetProcessor.ProcessAndStoreTemplateSnippetAsync(currentTemplate.QDrandCollectionName, SnippetList);
    }

    async Task OnPaste(HtmlEditorPasteEventArgs args)
    {

        // await OnContentUpdated.InvokeAsync(MenuItem);
    }

    async Task OnChange(string html)
    {


    }

    async Task OnInput(string html)
    {


    }

    void OnExecute(HtmlEditorExecuteEventArgs args)
    {

    }

    void OnUploadComplete(UploadCompleteEventArgs args)
    {

    }

    public async Task AddSnippet()
    {
        SnippetList.Add(new HtmlSnippet());
    }
}