108 lines
4.1 KiB
Text
108 lines
4.1 KiB
Text
@page "/editProfile"
|
||
@inject NavigationManager Nav
|
||
@inject RestService api
|
||
@inject State State
|
||
@inject IJSRuntime JS
|
||
|
||
|
||
<div class="max markdown-editor">
|
||
<MarkdownEditor @ref="Editor"
|
||
@bind-Value="@markdownValue"
|
||
Theme="material-darker"
|
||
MaxHeight="100%"
|
||
CustomButtonClicked="@OnCustomButtonClicked">
|
||
<Toolbar>
|
||
<MarkdownToolbarButton Action="MarkdownAction.Bold" Icon="fa-solid fa-bold" Title="Bold" />
|
||
<MarkdownToolbarButton Action="MarkdownAction.Italic" Icon="fa-solid fa-italic" Title="Italic" />
|
||
<MarkdownToolbarButton Action="MarkdownAction.Heading" Icon="fa-solid fa-heading" Title="Heading" />
|
||
<MarkdownToolbarButton Action="MarkdownAction.Code" Icon="fa-solid fa-code" Title="Code" Separator="true" />
|
||
<MarkdownToolbarButton Action="MarkdownAction.Quote" Icon="fa-solid fa-quote-left" Title="Quote" />
|
||
<MarkdownToolbarButton Action="MarkdownAction.UnorderedList" Icon="fa-solid fa-list-ul" Title="Unordered List" />
|
||
<MarkdownToolbarButton Action="MarkdownAction.OrderedList" Icon="fa-solid fa-list-ol" Title="Ordered List" />
|
||
<MarkdownToolbarButton Action="MarkdownAction.Link" Icon="fa-solid fa-link" Title="Link" Separator="true" />
|
||
<MarkdownToolbarButton Action="MarkdownAction.Image" Icon="fa-solid fa-image" Title="Image" />
|
||
<MarkdownToolbarButton Action="MarkdownAction.HorizontalRule" Icon="fa-solid fa-horizontal-rule" Title="Horizontal Rule" />
|
||
<MarkdownToolbarButton Action="MarkdownAction.Guide" Icon="fa-solid fa-circle-question" Title="Guide" Separator="true" />
|
||
<MarkdownToolbarButton Name="Help" Action="MarkdownAction.Custom"
|
||
Icon="omg-icon omg-prami"
|
||
Title="Editor Information" />
|
||
</Toolbar>
|
||
</MarkdownEditor>
|
||
</div>
|
||
|
||
<details id="advanced">
|
||
<summary> Advanced </summary>
|
||
<small>Style you include here will be places in a <style> element in your page’s <head>.</small>
|
||
<div class="field textarea label border max">
|
||
<InputTextArea @bind-Value="css"></InputTextArea>
|
||
<label>Custom CSS</label>
|
||
</div>
|
||
<small>Anything you put here will be included in your page’s <head> element.</small>
|
||
<div class="field textarea label border max">
|
||
<InputTextArea @bind-Value="head"></InputTextArea>
|
||
<label>Additional <head> Content</label>
|
||
</div>
|
||
</details>
|
||
|
||
<nav>
|
||
<div class="max"></div>
|
||
<button class="transparent link" onclick="history.back();" disabled="@loading">Cancel</button>
|
||
<button @onclick="Save" disabled="@loading">
|
||
@if (loading) {
|
||
<span>Saving...</span>
|
||
}
|
||
else {
|
||
<i class="fa-solid fa-floppy-disk"></i> <span>Save & Publish</span>
|
||
}
|
||
</button>
|
||
</nav>
|
||
|
||
@code {
|
||
private MarkdownEditor? Editor;
|
||
private string? markdownValue;
|
||
private string? css;
|
||
private string? head;
|
||
|
||
private bool loading = false;
|
||
|
||
protected override async Task OnInitializedAsync() {
|
||
await base.OnInitializedAsync();
|
||
ProfileResponseData? data = await api.GetProfile(State.SelectedAddressName!);
|
||
if (data != null) {
|
||
markdownValue = data.Content;
|
||
css = data.Css;
|
||
head = data.Head;
|
||
|
||
await Editor!.SetValueAsync(markdownValue);
|
||
}
|
||
await InvokeAsync(StateHasChanged);
|
||
}
|
||
|
||
Task OnMarkdownValueChanged(string value) {
|
||
return Task.CompletedTask;
|
||
}
|
||
|
||
public async Task Save() {
|
||
loading = true;
|
||
await InvokeAsync(StateHasChanged);
|
||
var result = await api.PostProfile(State.SelectedAddressName!,
|
||
new PostProfile() {
|
||
Content = markdownValue ?? string.Empty,
|
||
Css = string.IsNullOrEmpty(css) ? null : css,
|
||
Head = string.IsNullOrEmpty(head) ? null : head
|
||
});
|
||
if (result != null) {
|
||
await State.RefreshNow();
|
||
await InvokeAsync(StateHasChanged);
|
||
Nav.NavigateTo($"/person/{State.SelectedAddressName}#profile");
|
||
}
|
||
|
||
loading = false;
|
||
}
|
||
|
||
public async Task OnCustomButtonClicked(MarkdownButtonEventArgs eventArgs) {
|
||
if (eventArgs.Name == "Help") {
|
||
await JS.InvokeVoidAsync("open", "https://home.omg.lol/info/editor", "_blank");
|
||
}
|
||
}
|
||
}
|