Skip to content

Commit 0c3cf05

Browse files
SaintAngeLsSaintAngeLs
committed
(#424) wasm: markwodn editor and post preview
1 parent 10cd720 commit 0c3cf05

File tree

4 files changed

+95
-65
lines changed

4 files changed

+95
-65
lines changed

‎MiniSpace.Web/src/Astravent.Web.Wasm/Pages/Posts/CreatePost.razor

+14-61
Original file line numberDiff line numberDiff line change
@@ -14,49 +14,12 @@
1414
<MudItem xs="12" md="6">
1515
<MudPaper Class="pa-4">
1616
<MudText Typo="Typo.h5">Post Preview</MudText>
17-
@if (postType == PostType.BlogPost)
18-
{
19-
<MudText Typo="Typo.h6" Class="mt-2">Title: @title</MudText>
20-
<MudMarkdown MarkupContent="@textContent" />
21-
}
22-
else if (postType == PostType.SocialPost)
23-
{
24-
<MudMarkdown MarkupContent="@textContent" />
25-
@if (mediaFilesPreviews.Any())
26-
{
27-
<MudText Typo="Typo.h6" Class="mt-4">Uploaded Files</MudText>
28-
<MudGrid>
29-
@foreach (var filePreview in mediaFilesPreviews)
30-
{
31-
<MudItem xs="12" sm="6">
32-
<MudCard>
33-
@if (filePreview.IsImage)
34-
{
35-
<MudCardMedia Image="@filePreview.Url" Title="Media Preview" AspectRatio="16:9" />
36-
}
37-
else if (filePreview.IsVideo)
38-
{
39-
<MudCardMedia AspectRatio="16:9">
40-
<video width="100%" controls>
41-
<source src="@filePreview.Url" type="@filePreview.ContentType">
42-
Your browser does not support the video tag.
43-
</video>
44-
</MudCardMedia>
45-
}
46-
else if (filePreview.IsPdf)
47-
{
48-
<MudCardContent>
49-
<MudButton Variant="Variant.Outlined" Color="Color.Secondary" StartIcon="@Icons.Material.Filled.PictureAsPdf" OnClick="@(async () => await JSRuntime.InvokeVoidAsync("window.open", filePreview.Url, "_blank"))">
50-
View PDF
51-
</MudButton>
52-
</MudCardContent>
53-
}
54-
</MudCard>
55-
</MudItem>
56-
}
57-
</MudGrid>
58-
}
59-
}
17+
<PostPreview
18+
PostType="@postType"
19+
Title="@title"
20+
TextContent="@textContent"
21+
MediaFiles="@mediaFilesPreviews"
22+
UserId="@IdentityService.GetCurrentUserId()" />
6023
</MudPaper>
6124
</MudItem>
6225

@@ -76,8 +39,6 @@
7639
{
7740
<MudText Typo="Typo.subtitle1" Class="mt-4">Blog Post Details</MudText>
7841
<MudTextField @bind-Value="title" Label="Post Title" FullWidth Immediate="true" Required="true" />
79-
80-
<!-- Custom MarkdownEditor for Blog Post Content -->
8142
<MarkdownEditor @bind-MarkdownText="textContent" />
8243

8344
<MudSelect T="PostContext" @bind-Value="postContext" Label="Post Context" Required="true" FullWidth Class="mt-4">
@@ -100,13 +61,13 @@
10061

10162
<!-- Post State and Visibility -->
10263
<MudSelect T="string" @bind-Value="state" Label="State" Required="true" FullWidth Class="mt-4">
103-
<MudSelectItem T="string" Value="@("InDraft")">Draft</MudSelectItem>
104-
<MudSelectItem T="string" Value="@("Published")">Published</MudSelectItem>
64+
<MudSelectItem T="string" Value=@("InDraft")>Draft</MudSelectItem>
65+
<MudSelectItem T="string" Value=@("Published")>Published</MudSelectItem>
10566
</MudSelect>
10667

10768
<MudSelect T="string" @bind-Value="visibility" Label="Visibility" Required="true" FullWidth Class="mt-4">
108-
<MudSelectItem T="string" Value="@("Visible")">Visible</MudSelectItem>
109-
<MudSelectItem T="string" Value="@("Invisible")">Invisible</MudSelectItem>
69+
<MudSelectItem T="string" Value=@("Visible")>Visible</MudSelectItem>
70+
<MudSelectItem T="string" Value=@("Invisible")>Invisible</MudSelectItem>
11071
</MudSelect>
11172

11273
<MudDatePicker @bind-Date="publishDate" Label="Publish Date" Class="mt-4" />
@@ -125,14 +86,14 @@
12586
private MudForm form;
12687
private string textContent = "## Markdown Content\n";
12788
private string title;
128-
private List<FilePreview> mediaFilesPreviews = new();
89+
public List<FilePreview> mediaFilesPreviews = new();
12990
private List<string> uploadedMediaUrls = new List<string>();
13091
private string state = "InDraft";
13192
private string visibility = "Visible";
13293
private DateTime? publishDate = DateTime.Now;
13394
private bool isUploading = false;
134-
private PostType postType = PostType.SocialPost; // Default to Social Post
135-
private PostContext postContext = PostContext.UserPage; // Default context
95+
private PostType postType = PostType.SocialPost;
96+
private PostContext postContext = PostContext.UserPage;
13697

13798
private async Task UploadMediaFilesClick()
13899
{
@@ -205,7 +166,7 @@
205166
State = state,
206167
Visibility = visibility,
207168
PublishDate = publishDate,
208-
Context = postContext // The context now reflects UserPage, OrganizationPage, or EventPage
169+
Context = postContext
209170
};
210171

211172
var response = await PostsService.CreatePostAsync(command);
@@ -226,12 +187,4 @@
226187
NavigationManager.NavigateTo("/posts/my");
227188
}
228189

229-
private class FilePreview
230-
{
231-
public string Url { get; set; }
232-
public string ContentType { get; set; }
233-
public bool IsImage { get; set; }
234-
public bool IsVideo { get; set; }
235-
public bool IsPdf { get; set; }
236-
}
237190
}

‎MiniSpace.Web/src/Astravent.Web.Wasm/Pages/Posts/FilePreview.cs

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
public class FilePreview
2+
{
3+
public string Url { get; set; }
4+
public string ContentType { get; set; }
5+
public bool IsImage { get; set; }
6+
public bool IsVideo { get; set; }
7+
public bool IsPdf { get; set; }
8+
}

‎MiniSpace.Web/src/Astravent.Web.Wasm/Pages/Posts/PostPreview.razor

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
@inject IStudentsService StudentsService
2+
@inject IJSRuntime JSRuntime
3+
@using MudBlazor
4+
5+
@code {
6+
[Parameter] public PostType PostType { get; set; }
7+
[Parameter] public string Title { get; set; }
8+
[Parameter] public string TextContent { get; set; }
9+
[Parameter] public List<FilePreview> MediaFiles { get; set; } = new();
10+
[Parameter] public Guid UserId { get; set; }
11+
12+
private StudentDto student;
13+
14+
protected override async Task OnInitializedAsync()
15+
{
16+
// Use StudentsService (the injected instance) instead of IStudentsService
17+
student = await StudentsService.GetStudentAsync(UserId);
18+
}
19+
}
20+
21+
<MudPaper Class="pa-4">
22+
<MudStack Direction="Row" Spacing="1">
23+
<MudAvatar Image="@(student?.ProfileImageUrl)" Size="Size.Medium" />
24+
<MudText Typo="Typo.subtitle1">@student?.FirstName @student?.LastName</MudText>
25+
</MudStack>
26+
<MudText Typo="Typo.body2" Class="mt-2">Posted at: @DateTime.Now.ToString("g")</MudText>
27+
28+
@if (PostType == PostType.BlogPost)
29+
{
30+
<MudText Typo="Typo.h6" Class="mt-2">Title: @Title</MudText>
31+
<MudMarkdown Value="@TextContent" />
32+
}
33+
else if (PostType == PostType.SocialPost)
34+
{
35+
<MudMarkdown Value="@TextContent" />
36+
}
37+
38+
@if (MediaFiles.Any())
39+
{
40+
<MudGrid Class="mt-4">
41+
@foreach (var file in MediaFiles)
42+
{
43+
<MudItem xs="12" sm="6">
44+
<MudCard>
45+
@if (file.IsImage)
46+
{
47+
<MudCardMedia Image="@file.Url" Title="Image" AspectRatio="16:9" />
48+
}
49+
else if (file.IsVideo)
50+
{
51+
<MudCardMedia AspectRatio="16:9">
52+
<video width="100%" controls>
53+
<source src="@file.Url" type="@file.ContentType" />
54+
Your browser does not support the video tag.
55+
</video>
56+
</MudCardMedia>
57+
}
58+
else if (file.IsPdf)
59+
{
60+
<MudCardContent>
61+
<MudButton Variant="Variant.Outlined" Color="Color.Secondary" StartIcon="@Icons.Material.Outlined.PictureAsPdf"
62+
OnClick="@(async () => await JSRuntime.InvokeVoidAsync("open", file.Url, "_blank"))">
63+
View PDF
64+
</MudButton>
65+
</MudCardContent>
66+
}
67+
</MudCard>
68+
</MudItem>
69+
}
70+
</MudGrid>
71+
}
72+
</MudPaper>

‎MiniSpace.Web/src/Astravent.Web.Wasm/Shared/Components/MarkdownEditor.razor

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
@using MudBlazor
22

33
<MudPaper Class="pa-4" Style="background-color:#f9f9f9; border-radius: 12px;">
4-
<!-- Markdown TextField for Input -->
54
<MudTextField @bind-Value="MarkdownText" Label="Markdown Text" Multiline="true" Lines="10" FullWidth Immediate="true" Class="mb-2" Required="true" id="markdown-editor" />
65

7-
<!-- Toolbar with Buttons in a Row -->
86
<MudGrid Class="mt-2" Gutter="2">
97
<MudItem>
108
<MudButton OnClick="@(async () => await ApplyMarkdown("bold"))" Color="Color.Primary" Variant="Variant.Text" StartIcon="@Icons.Material.Filled.FormatBold" Class="toolbar-btn">
@@ -33,10 +31,9 @@
3331
</MudItem>
3432
</MudGrid>
3533

36-
<!-- Styles for a modern toolbar -->
3734
<style>
3835
.toolbar-btn {
39-
margin: 0 6px;
36+
margin: 0 2px;
4037
min-width: 48px;
4138
height: 36px;
4239
}

0 commit comments

Comments
 (0)