add: ability to manage uploads

This commit is contained in:
trisua 2025-05-11 15:20:15 -04:00
parent 6fabb38c10
commit eb95be0f38
11 changed files with 234 additions and 48 deletions

View file

@ -49,6 +49,11 @@
<span>{{ text "settings:tab.blocks" }}</span>
</a>
<a data-tab-button="account/uploads" href="#/account/uploads">
{{ icon "image-up" }}
<span>{{ text "settings:tab.uploads" }}</span>
</a>
{% if config.stripe %}
<a data-tab-button="account/billing" href="#/account/billing">
{{ icon "credit-card" }}
@ -391,6 +396,86 @@
</div>
</div>
<div class="w-full flex flex-col gap-2 hidden" data-tab="account/uploads">
<div class="card tertiary flex flex-col gap-2">
<a href="#/account" class="button secondary">
{{ icon "arrow-left" }}
<span>{{ text "general:action.back" }}</span>
</a>
<div class="card-nest">
<div class="card flex items-center gap-2 small">
{{ icon "image-up" }}
<span>{{ text "settings:tab.uploads" }}</span>
</div>
<div class="card flex flex-col gap-2 secondary">
{{ components::supporter_ad(body="Become a supporter to
upload images directly to posts!") }} {% for upload in
uploads %}
<div
class="card flex flex-wrap gap-2 items-center justify-between"
>
<div
class="flex gap-2 items-center"
onclick="trigger('ui::lightbox_open', ['/api/v1/uploads/{{ upload.id }}'])"
style="cursor: pointer"
>
{{ icon "file-image" }}
<b
><span class="date">{{ upload.created }}</span>
({{ upload.what }})</b
>
</div>
<div class="flex gap-2">
<button
class="quaternary small"
onclick="trigger('ui::lightbox_open', ['/api/v1/uploads/{{ upload.id }}'])"
>
{{ icon "view" }}
<span>{{ text "general:action.view" }}</span>
</button>
<button
class="quaternary small red"
onclick="remove_upload('{{ upload.id }}')"
>
{{ icon "x" }}
<span>{{ text "stacks:label.remove" }}</span>
</button>
</div>
</div>
{% endfor %} {{ components::pagination(page=page,
items=uploads|length, key="#/account/uploads") }}
<script>
globalThis.remove_upload = async (id) => {
if (
!(await trigger("atto::confirm", [
"Are you sure you would like to do this? This action is permanent.",
]))
) {
return;
}
fetch(`/api/v1/uploads/${id}`, {
method: "DELETE",
})
.then((res) => res.json())
.then((res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
});
};
</script>
</div>
</div>
</div>
</div>
<div class="w-full flex flex-col gap-2 hidden" data-tab="account/billing">
<div class="card tertiary flex flex-col gap-2">
<a href="#/account" class="button secondary">