128 lines
3.9 KiB
Text
128 lines
3.9 KiB
Text
@inject IJSRuntime JS
|
|
@inject State State
|
|
@inject RestService api
|
|
|
|
<div class="overlay" data-ui="#@id"></div>
|
|
<dialog id="@id">
|
|
<div class="row">
|
|
<div class="min square extra">
|
|
<button class="transparent square extra no-margin">
|
|
<object id="status-emoji" class="large emoji @(Emoji == null ? "animated" : string.Empty)" data-emoji="@(Emoji ?? "🫥")">@(Emoji ?? "🫥")</object>
|
|
<menu class="no-wrap">
|
|
<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@@^1/index.js"></script>
|
|
<emoji-picker emoji-version="15.1"></emoji-picker>
|
|
<script>
|
|
document.querySelector('emoji-picker')
|
|
.addEventListener('emoji-click', event => {
|
|
document.getElementById('status-emoji').setAttribute('data-emoji', event.detail.unicode)
|
|
const input = document.getElementById('status-emoji-input')
|
|
input.value = event.detail.unicode
|
|
var event = new Event('change');
|
|
input.dispatchEvent(event);
|
|
})
|
|
</script>
|
|
</menu>
|
|
</button>
|
|
</div>
|
|
<div class="field textarea label border max">
|
|
<InputTextArea @bind-Value="Content"></InputTextArea>
|
|
<label>Status</label>
|
|
</div>
|
|
</div>
|
|
<nav class="no-space">
|
|
@if (confirmDelete) {
|
|
<button @onclick="ConfirmDeleteStatus" disabled="@loading" class="red-7-bg white-fg">
|
|
<i class="fa-solid fa-exclamation-triangle"></i> <span>Are you sure?</span>
|
|
</button>
|
|
}
|
|
else {
|
|
<button @onclick="DeleteStatus" disabled="@loading" class="red-7-bg white-fg">
|
|
<i class="fa-solid fa-trash"></i> <span>Delete</span>
|
|
</button>
|
|
}
|
|
<div class="max"></div>
|
|
<InputText id="status-emoji-input" class="invisible" @bind-Value="Emoji"></InputText>
|
|
<button class="transparent link" data-ui="#@id" disabled="@loading">Cancel</button>
|
|
<button @onclick="PatchStatus" disabled="@loading">
|
|
@if (loading) {
|
|
<span>Saving...</span>
|
|
}
|
|
else {
|
|
<i class="fa-solid fa-floppy-disk"></i> <span>Save</span>
|
|
}
|
|
</button>
|
|
</nav>
|
|
</dialog>
|
|
|
|
@code {
|
|
private Status? _status;
|
|
|
|
public Status? Status {
|
|
get => _status;
|
|
set {
|
|
_status = value;
|
|
Content = _status?.Content;
|
|
Emoji = _status?.Emoji;
|
|
InvokeAsync(StateHasChanged);
|
|
}
|
|
}
|
|
public string? Content { get; set; }
|
|
public string? Emoji { get; set; }
|
|
private bool loading = false;
|
|
[Parameter]
|
|
public string id { get; set; }
|
|
private bool confirmDelete { get; set; }
|
|
|
|
protected override async Task OnInitializedAsync() {
|
|
Content = Status?.Content;
|
|
Emoji = Status?.Emoji;
|
|
}
|
|
|
|
public async Task DeleteStatus() {
|
|
if (!confirmDelete) confirmDelete = true;
|
|
await InvokeAsync(StateHasChanged);
|
|
}
|
|
|
|
public async Task ConfirmDeleteStatus() {
|
|
if(confirmDelete) {
|
|
loading = true;
|
|
await InvokeAsync(StateHasChanged);
|
|
|
|
if (!string.IsNullOrEmpty(Status?.Id)) {
|
|
await api.DeleteStatus(State.SelectedAddressName, Status.Id);
|
|
await State.RefreshStatuses();
|
|
await InvokeAsync(StateHasChanged);
|
|
}
|
|
|
|
await JS.InvokeVoidAsync("ui", "#" + id);
|
|
// clear input
|
|
Content = string.Empty;
|
|
Emoji = string.Empty;
|
|
Status = null;
|
|
loading = false;
|
|
confirmDelete = false;
|
|
await InvokeAsync(StateHasChanged);
|
|
}
|
|
}
|
|
|
|
public async Task PatchStatus() {
|
|
loading = true;
|
|
await InvokeAsync(StateHasChanged);
|
|
|
|
if (!string.IsNullOrEmpty(Status?.Id)) {
|
|
await api.PatchStatus(State.SelectedAddressName, Status.Id, Content, Emoji);
|
|
await State.RefreshStatuses();
|
|
await InvokeAsync(StateHasChanged);
|
|
}
|
|
|
|
await JS.InvokeVoidAsync("ui", "#" + id);
|
|
// clear input
|
|
Content = string.Empty;
|
|
Emoji = string.Empty;
|
|
Status = null;
|
|
loading = false;
|
|
confirmDelete = false;
|
|
await InvokeAsync(StateHasChanged);
|
|
|
|
}
|
|
}
|