Skip to content

Commit

Permalink
#2175 Show block selector instead of edit modal when block is empty (#…
Browse files Browse the repository at this point in the history 
…2193)
  • Loading branch information
@TheHadiAhmadi
TheHadiAhmadi authored Oct 25, 2024
1 parent c58e12f commit 4e89d94
Show file tree
Hide file tree
Showing 6 changed files with 119 additions and 67 deletions.
13 changes: 10 additions & 3 deletions src/Frontend/Plugins/FluentCMS.Web.Plugins.Contents.Block/BlockEditPlugin.razor
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
@inherits BaseEditPlugin
@namespace FluentCMS.Web.Plugins.Contents.Block

<PluginModalForm Open="Open" Title="Edit Block Content" Model="@Model" OnCancel="OnCancel" OnSubmit="HandleSubmit" Name="@CONTENT_TYPE_NAME">
<FormTextarea Hint="Use data-inline-editable attribute for text elements to enable Inline edit!" Placeholder="Enter Content" Rows="20" @bind-Value="@Model!.Content" Label="Content" />
</PluginModalForm>
@if (Model is null)
{
<BlockSelectModal Open OnBlockSelected="OnBlockSelected"/>
}
else
{
<PluginModalForm Open="Open" Title="Edit Block Content" Model="@Model" OnCancel="OnCancel" OnSubmit="HandleSubmit" Name="@CONTENT_TYPE_NAME">
<FormTextarea Hint="Use data-inline-editable attribute for text elements to enable Inline edit!" Placeholder="Enter Content" Rows="20" @bind-Value="@Model!.Content" Label="Content" />
</PluginModalForm>
}
19 changes: 18 additions & 1 deletion src/Frontend/Plugins/FluentCMS.Web.Plugins.Contents.Block/BlockEditPlugin.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ protected override async Task OnInitializedAsync()
return;

if (content!.Count == 0)
throw new Exception("This plugin doesn't have any content");
return;

Model = new BlockContent
{
Expand All @@ -27,6 +27,23 @@ protected override async Task OnInitializedAsync()
}
}

private async Task OnBlockSelected(BlockDetailResponse selectedBlock)
{
var block = new BlockContent
{
Content = selectedBlock.Content ?? string.Empty
};

var createResponse = await ApiClient.PluginContent.CreateAsync(CONTENT_TYPE_NAME, Plugin.Id, block.ToDictionary());

Model = new BlockContent
{
Id = createResponse.Data.Id,
Content = block.Content
};
await OnSubmit.InvokeAsync();
}

private async Task HandleSubmit()
{
if (Model is null || Plugin is null)
Expand Down
35 changes: 1 addition & 34 deletions src/Frontend/Plugins/FluentCMS.Web.Plugins.Contents.Block/Components/BlockEmptyView.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,37 +6,4 @@
<Button @onclick="OpenBlockModal" Color="Color.Primary">Select</Button>
</div>

<Modal Size="ModalSize.Large" Visible="BlockModalOpen" OnClose="CloseBlockModal">
<CloseButton class="f-block-modal-close-button" @onclick="CloseBlockModal" />
<div class="f-block-modal-body">
<div class="f-block-modal-sidebar">
<div class="f-block-modal-sidebar-title">Choose Block</div>
<div class="f-block-modal-sidebar-item @(CurrentCategory == string.Empty ? "f-block-modal-sidebar-item-active" : "")"
@onclick="() => ChooseCategory(string.Empty)">
All
</div>

@foreach (var category in Categories)
{
<div class="f-block-modal-sidebar-item @(CurrentCategory == category ? "f-block-modal-sidebar-item-active" : "")"
@onclick="() => ChooseCategory(category)">
@category
</div>
}
</div>
<div class="f-block-modal-previews">
<div class="f-block-modal-preview">
@foreach (var block in FilteredBlocks.Where((value, index) => index % 2 == 0))
{
<BlockPreviewItem Block="block" @onclick="() => ChooseBlockType(block)" />
}
</div>
<div class="f-block-modal-preview">
@foreach (var block in FilteredBlocks.Where((value, index) => index % 2 != 0))
{
<BlockPreviewItem Block="block" @onclick="() => ChooseBlockType(block)" />
}
</div>
</div>
</div>
</Modal>
<BlockSelectModal Open="BlockModalOpen" OnClose="CloseBlockModal" OnBlockSelected="ChooseBlockType"/>
29 changes: 0 additions & 29 deletions src/Frontend/Plugins/FluentCMS.Web.Plugins.Contents.Block/Components/BlockEmptyView.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,8 @@ public partial class BlockEmptyView
[Parameter]
public EventCallback<BlockDetailResponse> OnBlockSelected { get; set; }

private List<BlockDetailResponse> Blocks { get; set; } = [];
private List<BlockDetailResponse> FilteredBlocks { get; set; } = [];
private List<string> Categories { get; set; } = [];
private string CurrentCategory { get; set; } = string.Empty;
private bool BlockModalOpen { get; set; } = false;

protected override async Task OnInitializedAsync()
{
var response = await ApiClient.Block.GetAllForSiteAsync(ViewState.Site.Id);
if (response?.Data != null)
{
Blocks = [.. response.Data];
Categories = Blocks.Select(block => block.Category ?? string.Empty).Distinct().ToList();
FilteredBlocks = Blocks;
}
}

private async Task OpenBlockModal()
{
BlockModalOpen = true;
Expand All @@ -34,20 +19,6 @@ private async Task CloseBlockModal()
await Task.CompletedTask;
}

private async Task ChooseCategory(string category)
{
CurrentCategory = category;
if (string.IsNullOrEmpty(category))
{
FilteredBlocks = Blocks;
}
else
{
FilteredBlocks = Blocks.Where(x => x.Category == category).ToList();
}
await Task.CompletedTask;
}

private async Task ChooseBlockType(BlockDetailResponse selectedBlock)
{
BlockModalOpen = false;
Expand Down
37 changes: 37 additions & 0 deletions src/Frontend/Plugins/FluentCMS.Web.Plugins.Contents.Block/Components/BlockSelectModal.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
@namespace FluentCMS.Web.Plugins.Contents.Block
@inherits BasePlugin

<Modal Size="ModalSize.Large" Visible="Open" OnClose="HandleClose">
<CloseButton class="f-block-modal-close-button" @onclick="HandleClose" />
<div class="f-block-modal-body">
<div class="f-block-modal-sidebar">
<div class="f-block-modal-sidebar-title">Choose Block</div>
<div class="f-block-modal-sidebar-item @(CurrentCategory == string.Empty ? "f-block-modal-sidebar-item-active" : "")"
@onclick="() => ChooseCategory(string.Empty)">
All
</div>

@foreach (var category in Categories)
{
<div class="f-block-modal-sidebar-item @(CurrentCategory == category ? "f-block-modal-sidebar-item-active" : "")"
@onclick="() => ChooseCategory(category)">
@category
</div>
}
</div>
<div class="f-block-modal-previews">
<div class="f-block-modal-preview">
@foreach (var block in FilteredBlocks.Where((value, index) => index % 2 == 0))
{
<BlockPreviewItem Block="block" @onclick="() => ChooseBlockType(block)" />
}
</div>
<div class="f-block-modal-preview">
@foreach (var block in FilteredBlocks.Where((value, index) => index % 2 != 0))
{
<BlockPreviewItem Block="block" @onclick="() => ChooseBlockType(block)" />
}
</div>
</div>
</div>
</Modal>
53 changes: 53 additions & 0 deletions ...rontend/Plugins/FluentCMS.Web.Plugins.Contents.Block/Components/BlockSelectModal.razor.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
namespace FluentCMS.Web.Plugins.Contents.Block;

public partial class BlockSelectModal
{
[Parameter]
public EventCallback<BlockDetailResponse> OnBlockSelected { get; set; }

[Parameter]
public EventCallback OnClose { get; set; }

[Parameter]
public bool Open { get; set; } = false;

private List<BlockDetailResponse> Blocks { get; set; } = [];
private List<BlockDetailResponse> FilteredBlocks { get; set; } = [];
private List<string> Categories { get; set; } = [];
private string CurrentCategory { get; set; } = string.Empty;

protected override async Task OnInitializedAsync()
{
var response = await ApiClient.Block.GetAllForSiteAsync(ViewState.Site.Id);
if (response?.Data != null)
{
Blocks = [.. response.Data];
Categories = Blocks.Select(block => block.Category ?? string.Empty).Distinct().ToList();
FilteredBlocks = Blocks;
}
}

private async Task ChooseCategory(string category)
{
CurrentCategory = category;
if (string.IsNullOrEmpty(category))
{
FilteredBlocks = Blocks;
}
else
{
FilteredBlocks = Blocks.Where(x => x.Category == category).ToList();
}
await Task.CompletedTask;
}

private async Task ChooseBlockType(BlockDetailResponse selectedBlock)
{
await OnBlockSelected.InvokeAsync(selectedBlock);
}

private async Task HandleClose()
{
await OnClose.InvokeAsync();
}
}

0 comments on commit 4e89d94

Please sign in to comment.