winter-software/Wave
winter-software/Wave
1
0
Fork 0
Code Issues Wiki Activity

Implemented Categories in Article Editor and View

Browse source
This commit is contained in:
Mia Rose Winter 2024-01-26 14:15:28 +01:00
parent df7c7c7534
commit 7636585023
Signed by: miawinter
GPG key ID: 4B6F6A83178F595E
6 changed files with 217 additions and 158 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
Wave/Components/ArticleComponent.razor
View file

@ -1,5 +1,6 @@
@using Wave.Data
@using Humanizer
@using Wave.Utilities
@inject IStringLocalizer<Pages.ArticleView> Localizer
@ -9,24 +10,33 @@
@Article.Title
</h1>
<p>
<small class="text-sm">
<time datetime="@Article.PublishDate.ToString("u")"
title="@Article.PublishDate.ToString("g")">
@Article.PublishDate.Humanize()
</time>
@if (Article.LastModified is not null && Article.LastModified > Article.PublishDate) {
<time datetime="@Article.LastModified.Value.ToString("u")"
title="@Article.LastModified.Value.ToString("g")">
&ensp;(@Localizer["ModifiedOn"] @Article.LastModified.Humanize())
</time>
}
@if (Article.Status < ArticleStatus.Published) {
<span class="badge badge-sm badge-outline badge-warning ml-2">
@Article.Status.Humanize()
</span>
}
</small>
<small class="text-sm">
<time datetime="@Article.PublishDate.ToString("u")"
title="@Article.PublishDate.ToString("g")">
@Article.PublishDate.Humanize()
</time>
@if (Article.LastModified is not null && Article.LastModified > Article.PublishDate) {
<time datetime="@Article.LastModified.Value.ToString("u")"
title="@Article.LastModified.Value.ToString("g")">
&ensp;(@Localizer["ModifiedOn"] @Article.LastModified.Humanize())
</time>
}
@if (Article.Status < ArticleStatus.Published) {
<span class="badge badge-sm badge-outline badge-warning ml-2">
@Article.Status.Humanize()
</span>
}
</small>
</p>
@if (Article.Categories.Count > 0) {
<p class="flex flex-wrap gap-2 my-3">
@foreach (var category in Article.Categories) {
<span class="badge badge-@CategoryUtilities.GetCssClassPostfixForColor(category.Color)">
@category.Name
</span>
}
</p>
}
</header>
<div class="prose prose-neutral max-w-none hyphens-auto text-justify">
@Content

323
Wave/Components/Pages/ArticleEditor.razor
View file

@ -36,120 +36,129 @@
</div>
<EditForm method="post" FormName="article-editor" Model="@Model" OnValidSubmit="OnValidSubmit">
<DataAnnotationsValidator />
<input type="hidden" @bind-value="@Model.Id" />
<DataAnnotationsValidator />
<input type="hidden" @bind-value="@Model.Id" />
<InputLabelComponent LabelText="@Localizer["Title_Label"]" For="() => Model.Title">
<InputText class="input input-bordered w-full" maxlength="256" required aria-required
@bind-Value="@Model.Title" placeholder="@Localizer["Title_Placeholder"]" autocomplete="off" />
</InputLabelComponent>
<InputLabelComponent LabelText="@Localizer["PublishDate_Label"]" For="() => Model.PublishDate">
@if (Article?.Status is null or not ArticleStatus.Published || Article.PublishDate >= DateTimeOffset.UtcNow) {
<InputDate class="input input-bordered w-full" Type="InputDateType.DateTimeLocal"
@bind-Value="@Model.PublishDate" placeholder="@Localizer["PublishDate_Placeholder"]" autocomplete="off" />
} else {
<input class="input input-bordered w-full"
type="datetime-local" readonly value="@Article?.PublishDate.ToString("yyyy-MM-dd\\THH:mm:ss")" />
}
</InputLabelComponent>
<InputLabelComponent LabelText="@Localizer["Title_Label"]" For="() => Model.Title">
<InputText class="input input-bordered w-full" maxlength="256" required aria-required
@bind-Value="@Model.Title" placeholder="@Localizer["Title_Placeholder"]" autocomplete="off" />
</InputLabelComponent>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-8">
<InputLabelComponent LabelText="@Localizer["PublishDate_Label"]" For="() => Model.PublishDate">
@if (Article?.Status is null or not ArticleStatus.Published || Article.PublishDate >= DateTimeOffset.UtcNow) {
<InputDate class="input input-bordered w-full" Type="InputDateType.DateTimeLocal"
@bind-Value="@Model.PublishDate" placeholder="@Localizer["PublishDate_Placeholder"]" autocomplete="off" />
} else {
<input class="input input-bordered w-full"
type="datetime-local" readonly value="@Article?.PublishDate.ToString("yyyy-MM-dd\\THH:mm:ss")" />
}
</InputLabelComponent>
<InputLabelComponent LabelText="@Localizer["Categories_Label"]" For="() => Model.Categories">
<select class="select select-bordered w-full h-32" @onchange="CategorySelectionChanged" multiple>
@foreach (var category in Categories) {
<option value="@category.Id" selected="@Model.Categories?.Contains(category.Id)">@category.Name</option>
}
</select>
</InputLabelComponent>
</div>
<AdvancedMarkdownEditor Title="@Model.Title" MarkdownCallback="() => Model.Body">
<div class="join join-vertical min-h-96 h-full w-full" aria-role="toolbar">
<Toolbar>
<ToolbarSection>
<ToolbarButton onclick="window.insertBeforeSelection('# ', true);"
title="@Localizer["Tools_H1_Tooltip"]">
<strong>@Localizer["Tools_H1_Label"]</strong>
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeSelection('## ', true);"
title="@Localizer["Tools_H2_Tooltip"]">
<strong>@Localizer["Tools_H2_Label"]</strong>
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeSelection('### ', true);"
title="@Localizer["Tools_H3_Tooltip"]">
<strong>@Localizer["Tools_H3_Label"]</strong>
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeSelection('#### ', true);"
title="@Localizer["Tools_H4_Tooltip"]">
@Localizer["Tools_H4_Label"]
</ToolbarButton>
</ToolbarSection>
<ToolbarSection>
<ToolbarButton onclick="window.insertBeforeAndAfterSelection('**');"
title="@Localizer["Tools_Bold_Tooltip"]">
<strong>B</strong>
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeAndAfterSelection('*')"
title="@Localizer["Tools_Italic_Tooltip"]">
<em>I</em>
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeAndAfterSelection('++')"
title="@Localizer["Tools_Underline_Tooltip"]">
<u>U</u>
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeAndAfterSelection('~~')"
title="@Localizer["Tools_StrikeThrough_Tooltip"]">
<del>@Localizer["Tools_StrikeThrough_Label"]</del>
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeAndAfterSelection('==')"
title="@Localizer["Tools_Mark_Tooltip"]">
<mark>@Localizer["Tools_Mark_Label"]</mark>
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeSelection('> ', true)"
title="@Localizer["Tools_Cite_Tooltip"]">
| <em>@Localizer["Tools_Cite_Label"]</em>
</ToolbarButton>
</ToolbarSection>
<ToolbarSection>
<ToolbarButton onclick="window.insertBeforeSelection('1. ', true)">
1.
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeSelection('a. ', true)">
a.
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeSelection('A. ', true)">
A.
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeSelection('i. ', true)">
i.
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeSelection('I. ', true)">
I.
</ToolbarButton>
</ToolbarSection>
<ToolbarSection>
<ToolbarButton onclick="window.insertBeforeAndAfterSelection('`')"
title="@Localizer["Tools_CodeLine_Tooltip"]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
<path fill-rule="evenodd" d="M14.447 3.026a.75.75 0 0 1 .527.921l-4.5 16.5a.75.75 0 0 1-1.448-.394l4.5-16.5a.75.75 0 0 1 .921-.527ZM16.72 6.22a.75.75 0 0 1 1.06 0l5.25 5.25a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 1 1-1.06-1.06L21.44 12l-4.72-4.72a.75.75 0 0 1 0-1.06Zm-9.44 0a.75.75 0 0 1 0 1.06L2.56 12l4.72 4.72a.75.75 0 0 1-1.06 1.06L.97 12.53a.75.75 0 0 1 0-1.06l5.25-5.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
</svg>
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeAndAfterSelection('\n```\n')"
title="@Localizer["Tools_CodeBlock_Tooltip"]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
<path fill-rule="evenodd" d="M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Zm14.25 6a.75.75 0 0 1-.22.53l-2.25 2.25a.75.75 0 1 1-1.06-1.06L15.44 12l-1.72-1.72a.75.75 0 1 1 1.06-1.06l2.25 2.25c.141.14.22.331.22.53Zm-10.28-.53a.75.75 0 0 0 0 1.06l2.25 2.25a.75.75 0 1 0 1.06-1.06L8.56 12l1.72-1.72a.75.75 0 1 0-1.06-1.06l-2.25 2.25Z" clip-rule="evenodd" />
</svg>
</ToolbarButton>
</ToolbarSection>
</Toolbar>
<textarea id="tool-target" class="textarea textarea-bordered outline-none w-full flex-1 join-item"
<AdvancedMarkdownEditor Title="@Model.Title" MarkdownCallback="() => Model.Body">
<div class="join join-vertical min-h-96 h-full w-full" aria-role="toolbar">
<Toolbar>
<ToolbarSection>
<ToolbarButton onclick="window.insertBeforeSelection('# ', true);"
title="@Localizer["Tools_H1_Tooltip"]">
<strong>@Localizer["Tools_H1_Label"]</strong>
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeSelection('## ', true);"
title="@Localizer["Tools_H2_Tooltip"]">
<strong>@Localizer["Tools_H2_Label"]</strong>
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeSelection('### ', true);"
title="@Localizer["Tools_H3_Tooltip"]">
<strong>@Localizer["Tools_H3_Label"]</strong>
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeSelection('#### ', true);"
title="@Localizer["Tools_H4_Tooltip"]">
@Localizer["Tools_H4_Label"]
</ToolbarButton>
</ToolbarSection>
<ToolbarSection>
<ToolbarButton onclick="window.insertBeforeAndAfterSelection('**');"
title="@Localizer["Tools_Bold_Tooltip"]">
<strong>B</strong>
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeAndAfterSelection('*')"
title="@Localizer["Tools_Italic_Tooltip"]">
<em>I</em>
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeAndAfterSelection('++')"
title="@Localizer["Tools_Underline_Tooltip"]">
<u>U</u>
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeAndAfterSelection('~~')"
title="@Localizer["Tools_StrikeThrough_Tooltip"]">
<del>@Localizer["Tools_StrikeThrough_Label"]</del>
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeAndAfterSelection('==')"
title="@Localizer["Tools_Mark_Tooltip"]">
<mark>@Localizer["Tools_Mark_Label"]</mark>
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeSelection('> ', true)"
title="@Localizer["Tools_Cite_Tooltip"]">
| <em>@Localizer["Tools_Cite_Label"]</em>
</ToolbarButton>
</ToolbarSection>
<ToolbarSection>
<ToolbarButton onclick="window.insertBeforeSelection('1. ', true)">
1.
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeSelection('a. ', true)">
a.
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeSelection('A. ', true)">
A.
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeSelection('i. ', true)">
i.
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeSelection('I. ', true)">
I.
</ToolbarButton>
</ToolbarSection>
<ToolbarSection>
<ToolbarButton onclick="window.insertBeforeAndAfterSelection('`')"
title="@Localizer["Tools_CodeLine_Tooltip"]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
<path fill-rule="evenodd" d="M14.447 3.026a.75.75 0 0 1 .527.921l-4.5 16.5a.75.75 0 0 1-1.448-.394l4.5-16.5a.75.75 0 0 1 .921-.527ZM16.72 6.22a.75.75 0 0 1 1.06 0l5.25 5.25a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 1 1-1.06-1.06L21.44 12l-4.72-4.72a.75.75 0 0 1 0-1.06Zm-9.44 0a.75.75 0 0 1 0 1.06L2.56 12l4.72 4.72a.75.75 0 0 1-1.06 1.06L.97 12.53a.75.75 0 0 1 0-1.06l5.25-5.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
</svg>
</ToolbarButton>
<ToolbarButton onclick="window.insertBeforeAndAfterSelection('\n```\n')"
title="@Localizer["Tools_CodeBlock_Tooltip"]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
<path fill-rule="evenodd" d="M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Zm14.25 6a.75.75 0 0 1-.22.53l-2.25 2.25a.75.75 0 1 1-1.06-1.06L15.44 12l-1.72-1.72a.75.75 0 1 1 1.06-1.06l2.25 2.25c.141.14.22.331.22.53Zm-10.28-.53a.75.75 0 0 0 0 1.06l2.25 2.25a.75.75 0 1 0 1.06-1.06L8.56 12l1.72-1.72a.75.75 0 1 0-1.06-1.06l-2.25 2.25Z" clip-rule="evenodd" />
</svg>
</ToolbarButton>
</ToolbarSection>
</Toolbar>
<textarea id="tool-target" class="textarea textarea-bordered outline-none w-full flex-1 join-item"
required aria-required placeholder="@Localizer["Body_Placeholder"]"
@bind="@Model.Body" @bind:event="oninput" autocomplete="off"></textarea>
</div>
</AdvancedMarkdownEditor>
</div>
</AdvancedMarkdownEditor>
<div class="flex gap-2 flex-wrap mt-3">
<button type="submit" class="btn btn-primary w-full sm:btn-wide">
@Localizer["EditorSubmit"]
</button>
@if (Article is not null)
{
<a class="btn w-full sm:btn-wide" href="/article/@(Article.Id)">
@Localizer["ViewArticle_Label"]
</a>
}
</div>
<div class="flex gap-2 flex-wrap mt-3">
<button type="submit" class="btn btn-primary w-full sm:btn-wide">
@Localizer["EditorSubmit"]
</button>
@if (Article is not null) {
<a class="btn w-full sm:btn-wide" href="/article/@(Article.Id)">
@Localizer["ViewArticle_Label"]
</a>
}
</div>
</EditForm>
<CategoryPicker />
</ChildContent>
<ErrorContent>
<h1 class="text-3xl lg:text-5xl font-light mb-6">Not found</h1>
@ -210,6 +219,7 @@
[SupplyParameterFromForm]
private InputModel Model { get; set; } = new();
private List<Category> Categories { get; set; } = new();
private ApplicationUser? User { get; set; }
private Article? Article { get; set; }
private bool Busy { get; set; } = true;
@ -220,11 +230,12 @@
var user = await UserManager.GetUserAsync(state.User);
User = user ?? throw new ApplicationException("???2");
await using var context = await ContextFactory.CreateDbContextAsync();
if (Id is not null) {
await using var context = await ContextFactory.CreateDbContextAsync();
Article = await context.Set<Article>()
.Include(a => a.Author)
.Include(a => a.Reviewer)
.Include(a => a.Categories)
.FirstAsync(a => a.Id == Id);
if (Article is null) throw new ApplicationException("Article not found.");
@ -241,10 +252,16 @@
throw new ApplicationException("You do not have permissions to edit this article");
}
}
Model.Id ??= Article?.Id;
Model.Title ??= Article?.Title;
Model.Body ??= Article?.Body;
Model.PublishDate ??= Article?.PublishDate.LocalDateTime;
Categories = await context.Set<Category>().OrderBy(c => c.Color).ToListAsync();
if (Article is not null) {
Model.Id ??= Article.Id;
Model.Title ??= Article.Title;
Model.Body ??= Article.Body;
Model.PublishDate ??= Article.PublishDate.LocalDateTime;
Model.Categories ??= Article.Categories.Select(c => c.Id).ToArray();
}
Busy = false;
}
@ -252,33 +269,56 @@
if (User is null) return;
Busy = true;
await using var context = await ContextFactory.CreateDbContextAsync();
context.Entry(User).State = EntityState.Unchanged;
try {
await using var context = await ContextFactory.CreateDbContextAsync();
context.Entry(User).State = EntityState.Unchanged;
foreach (var category in Categories) {
context.Entry(category).State = EntityState.Unchanged;
}
Article article;
if (Model.Id is not null) {
article = await context.Set<Article>()
.Include(a => a.Author)
.Include(a => a.Reviewer)
.FirstAsync(a => a.Id == Model.Id);
article.Title = Model.Title!;
article.Body = Model.Body!;
} else {
article = new Article {
Title = Model.Title!,
Body = Model.Body!,
Author = User
};
await context.AddAsync(article);
Article article;
if (Model.Id is not null) {
article = await context.Set<Article>()
.Include(a => a.Author)
.Include(a => a.Reviewer)
.Include(a => a.Categories)
.FirstAsync(a => a.Id == Model.Id);
article.Title = Model.Title!;
article.Body = Model.Body!;
} else {
article = new Article {
Title = Model.Title!,
Body = Model.Body!,
Author = User
};
await context.AddAsync(article);
}
if (Model.PublishDate is not null) article.PublishDate = Model.PublishDate.Value;
await HandleRoles(article, User);
article.LastModified = DateTimeOffset.UtcNow;
article.BodyHtml = MarkdownUtilities.Parse(article.Body);
foreach (var category in article.Categories.ToList()) {
if (Model.Categories?.Contains(category.Id) is not true) {
article.Categories.Remove(category);
}
}
foreach (var categoryId in Model.Categories ?? Array.Empty<Guid>()) {
if (article.Categories.Any(c => c.Id == categoryId) is not true) {
article.Categories.Add(Categories.First(c => c.Id == categoryId));
}
}
await context.SaveChangesAsync();
Navigation.NavigateTo($"/article/{article.Id}");
} catch (Exception ex) {
// TODO toast
} finally {
Busy = false;
await InvokeAsync(StateHasChanged);
}
if (Model.PublishDate is not null) article.PublishDate = Model.PublishDate.Value;
await HandleRoles(article, User);
article.LastModified = DateTimeOffset.UtcNow;
article.BodyHtml = MarkdownUtilities.Parse(article.Body);
await context.SaveChangesAsync();
Navigation.NavigateTo($"/article/{article.Id}");
}
private async Task HandleRoles(Article article, ApplicationUser me) {
@ -302,6 +342,10 @@
throw new ApplicationException("You do not have permissions to edit this article");
}
private void CategorySelectionChanged(ChangeEventArgs args) {
Model.Categories = ((string[]?)args.Value)?.Select(Guid.Parse).ToArray();
}
private sealed class InputModel {
public Guid? Id { get; set; }
[Required(AllowEmptyStrings = false), MaxLength(256)]
@ -309,6 +353,7 @@
[Required(AllowEmptyStrings = false)]
public string? Body { get; set; }
public DateTimeOffset? PublishDate { get; set; }
public Guid[]? Categories { get; set; }
public DateTimeOffset? PublishDate { get; set; }
}
}

2
Wave/Components/Pages/ArticleView.razor
View file

@ -140,12 +140,14 @@
Article = context.Set<Article>()
.Include(a => a.Author)
.Include(a => a.Reviewer)
.Include(a => a.Categories)
.FirstOrDefault(a => a.Id == Id);
} else if (Date is { } date && Title is { } title) {
using var context = ContextFactory.CreateDbContext();
Article = context.Set<Article>()
.Include(a => a.Author)
.Include(a => a.Reviewer)
.Include(a => a.Categories)
.FirstOrDefault(a => a.PublishDate.Date == date.Date && a.Title.ToLower() == title);
}
}

2
Wave/Data/ApplicationDbContext.cs
View file

@ -59,7 +59,7 @@ public class ApplicationDbContext(DbContextOptions<ApplicationDbContext> options
category.Property(c => c.Name).IsRequired().HasMaxLength(128);
category.Property(c => c.Color).IsRequired().HasDefaultValue(CategoryColors.Default);
category.HasMany<Article>().WithMany()
category.HasMany<Article>().WithMany(a => a.Categories)
.UsingEntity<ArticleCategory>(
ac => ac.HasOne(a => a.Article).WithMany().OnDelete(DeleteBehavior.NoAction),
ac => ac.HasOne(a => a.Category).WithMany().OnDelete(DeleteBehavior.NoAction),

2
Wave/Data/Article.cs
View file

@ -29,4 +29,6 @@ public class Article : ISoftDelete {
public DateTimeOffset CreationDate { get; set; } = DateTimeOffset.Now;
public DateTimeOffset PublishDate { get; set; } = DateTimeOffset.MaxValue;
public DateTimeOffset? LastModified { get; set; }
public IList<Category> Categories { get; } = [];
}

2
Wave/wwwroot/css/main.min.css vendored
View file

File diff suppressed because one or more lines are too long