fix(demo): upd demo to use correct layout and components

Refs: BLOCKLY-T-2
sitkoru · Jan 18, 2022 · 18a02a0 · 18a02a0
1 parent 98371fb
commit 18a02a0
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 95 deletions.
diff --git a/apps/Sitko.Blockly.Demo/Pages/Add.razor b/apps/Sitko.Blockly.Demo/Pages/Add.razor
@@ -1,15 +1,5 @@
 @page "/Posts/Add"
-<PageContainer Title="Add post">
-    <Breadcrumb>
-        <Breadcrumb>
-            <BreadcrumbItem>Home</BreadcrumbItem>
-            <BreadcrumbItem>Posts</BreadcrumbItem>
-            <BreadcrumbItem>Add</BreadcrumbItem>
-        </Breadcrumb>
-    </Breadcrumb>
-    <Content>
-    </Content>
-    <ChildContent>
-        <PostFormComponent></PostFormComponent>
-    </ChildContent>
-</PageContainer>
+@inherits BaseComponent
+<MudPageLayout Title="@LocalizationProvider["Add Post"]">
+    <PostFormComponent></PostFormComponent>
+</MudPageLayout>
diff --git a/apps/Sitko.Blockly.Demo/Pages/Edit.razor b/apps/Sitko.Blockly.Demo/Pages/Edit.razor
@@ -1,26 +1,11 @@
 @page "/Posts/{PostId:guid}/Edit"
+@inherits BaseComponent
 @{
     var title = $"Edit post {PostId}";
 }
-<PageContainer Title="@title">
-    <Breadcrumb>
-        <Breadcrumb>
-            <BreadcrumbItem>Home</BreadcrumbItem>
-            <BreadcrumbItem>Posts</BreadcrumbItem>
-            <BreadcrumbItem>Edit</BreadcrumbItem>
-        </Breadcrumb>
-    </Breadcrumb>
-    <Content>
-    </Content>
-    <ExtraContent>
-        <Button>
-            <a href="/Posts/@PostId">View</a>
-        </Button>
-    </ExtraContent>
-    <ChildContent>
-        <PostFormComponent PostId="PostId"></PostFormComponent>
-    </ChildContent>
-</PageContainer>
+<MudPageLayout Title="@title">
+    <PostFormComponent PostId="PostId"></PostFormComponent>
+</MudPageLayout>
 
 @code {
 

diff --git a/apps/Sitko.Blockly.Demo/Pages/Index.razor b/apps/Sitko.Blockly.Demo/Pages/Index.razor
@@ -4,40 +4,29 @@
 @using Sitko.Blockly.Display
 @using Sitko.Core.Storage
 @inherits BaseComponent
-<PageContainer Title="Posts">
-    <Breadcrumb>
-        <Breadcrumb>
-            <BreadcrumbItem>Home</BreadcrumbItem>
-            <BreadcrumbItem>Posts</BreadcrumbItem>
-        </Breadcrumb>
-    </Breadcrumb>
-    <Content>
-    </Content>
-    <ExtraContent>
-        <Button>
-            <a href="/Posts/Add">Add</a>
-        </Button>
-    </ExtraContent>
+<MudPageLayout Title="@LocalizationProvider["Posts"]">
+    <Extra>
+        <MudButton Color="Color.Primary" Variant="Variant.Filled" Link="/Posts/Add">Add</MudButton>
+    </Extra>
     <ChildContent>
-        @foreach (Post post in Posts)
-        {
-            <Card Title="@post.Title">
-                <Extra>
-                    <a href="/Posts/@post.Id/Edit">
-                        <Button>Edit</Button>
-                    </a>
-                </Extra>
-                <ChildContent>
-                    <MudBlocksList
-                        EntityBlocks="post.Blocks" Options="@(new MudBlazorBlocklyListOptions(BlocksListMode.Preview, GetService<IStorage<BlocklyStorageOptions>>(), $"Posts/{post.Id}"))">
-                    </MudBlocksList>
-                </ChildContent>
-            </Card>
-        }
-
+        @foreach (var post in Posts)
+                {
+                    <MudCard>
+                        <MudCardHeader>
+                            <MudText Typo="Typo.h6">@post.Title</MudText>
+                        </MudCardHeader>
+                        <MudCardActions>
+                            <MudButton Link="@($"/Posts/{post.Id}/Edit")" Variant="Variant.Text" Color="Color.Primary">Edit</MudButton>
+                        </MudCardActions>
+                        <MudCardContent>
+                            <MudBlocksList
+                                                            EntityBlocks="post.Blocks" Options="@(new MudBlazorBlocklyListOptions(BlocksListMode.Preview, GetService<IStorage<BlocklyStorageOptions>>(), $"Posts/{post.Id}"))">
+                                                        </MudBlocksList>
+                        </MudCardContent>
+                    </MudCard>
+                }
     </ChildContent>
-</PageContainer>
-
+</MudPageLayout>
 
 @code{
 
@@ -48,6 +37,6 @@
         Posts = posts.items;
     }
 
-    private Post[] Posts { get; set; } = new Post[0];
+    private Post[] Posts { get; set; } = Array.Empty<Post>();
 
 }
diff --git a/apps/Sitko.Blockly.Demo/Pages/PostFormComponent.razor b/apps/Sitko.Blockly.Demo/Pages/PostFormComponent.razor
@@ -8,7 +8,7 @@
 @inherits BaseComponent
 <PostForm EntityId="PostId" OnAfterCreate="post => GoToPost(post)">
     <MudItem>
-        <MudTextField Label="Title" @bind-Value="context.Entity.Title"/>
+        <MudTextField Label="Title" @bind-Value="context.Entity.Title" For="() => context.Entity.Title"/>
     </MudItem>
     <MudBlocklyForm Label="Blocks" @bind-Value="context.Entity.Blocks" Options="blocksOptions"></MudBlocklyForm>
     <MudBlocklyForm Label="Secondary blocks" @bind-Value="context.Entity.SecondaryBlocks" Options="secondaryBlocksOptions"></MudBlocklyForm>

diff --git a/apps/Sitko.Blockly.Demo/Pages/Show.razor b/apps/Sitko.Blockly.Demo/Pages/Show.razor
@@ -2,25 +2,11 @@
 @using Sitko.Core.Storage
 @using Sitko.Blockly.Display
 @inherits BaseComponent
-@if (Post is not null)
-{
-    var title = Post.Title;
-    <PageContainer Title="@title">
-        <Breadcrumb>
-            <Breadcrumb>
-                <BreadcrumbItem>Home</BreadcrumbItem>
-                <BreadcrumbItem>Posts</BreadcrumbItem>
-            </Breadcrumb>
-        </Breadcrumb>
-        <ExtraContent>
-            <Button>
-                <a href="/Posts/@Post.Id/Edit/">Edit</a>
-            </Button>
-        </ExtraContent>
-        <Content>
-        </Content>
-        <ChildContent>
-            <MudBlocksList EntityBlocks="Post.Blocks" Options="@(new MudBlazorBlocklyListOptions(BlocksListMode.Full, GetService<IStorage<BlocklyStorageOptions>>()))"></MudBlocksList>
-        </ChildContent>
-    </PageContainer>
-}
+<MudPageLayout Title="@Post.Title">
+    <Extra>
+        <MudButton Color="Color.Primary" Variant="Variant.Filled" Link="@($"/Posts/{Post.Id}/Edit/")">Edit</MudButton>
+    </Extra>
+    <ChildContent>
+        <MudBlocksList EntityBlocks="Post.Blocks" Options="@(new MudBlazorBlocklyListOptions(BlocksListMode.Full, GetService<IStorage<BlocklyStorageOptions>>()))"></MudBlocksList>
+    </ChildContent>
+</MudPageLayout>
diff --git a/apps/Sitko.Blockly.Demo/Shared/MainLayout.razor b/apps/Sitko.Blockly.Demo/Shared/MainLayout.razor
@@ -1,14 +1,9 @@
 @inherits LayoutComponentBase
-
 <BasicMudLayout>
     <Menu>
-        <MudNavMenu>
-            <MudNavLink Href="/" Match="NavLinkMatch.All" Icon="@Icons.Material.Outlined.Dashboard">Posts</MudNavLink>
-        </MudNavMenu>
+        <NavMenu/>
     </Menu>
     <ChildContent>
         @Body
     </ChildContent>
-      Sitko.ru <MudIcon Icon="@Icons.Filled.Copyright"/> @DateTimeOffset.UtcNow.Year
 </BasicMudLayout>
-
diff --git a/apps/Sitko.Blockly.Demo/Shared/NavMenu.razor b/apps/Sitko.Blockly.Demo/Shared/NavMenu.razor
@@ -0,0 +1,6 @@
+<MudDivider Class="mb-4" />
+<MudNavMenu>
+    <MudNavLink Href="/" Match="NavLinkMatch.All" Icon="@Icons.Material.Outlined.Dashboard">Posts</MudNavLink>
+</MudNavMenu>
+<MudSpacer></MudSpacer>
+<MudText Class="px-5 py-4" Color="Color.Default" Typo="Typo.subtitle2">&copy; @DateTimeOffset.Now.Year Sitko.ru</MudText>
diff --git a/apps/Sitko.Blockly.Demo/_Imports.razor b/apps/Sitko.Blockly.Demo/_Imports.razor
@@ -11,5 +11,6 @@
 @using Sitko.Blockly.MudBlazorComponents.Forms
 @using Sitko.Blockly.MudBlazorComponents.Display
 @using Sitko.Core.Blazor.Components
+@using Sitko.Core.Blazor.MudBlazorComponents
 @using MudBlazor