106 lines
4.8 KiB
Svelte
106 lines
4.8 KiB
Svelte
|
<script>
|
||
|
|
let { pages = [], adminPath = 'loom' } = $props();
|
||
|
|
|
||
|
|
function deletePage(id) {
|
||
|
|
if (confirm('Are you sure you want to delete this page?')) {
|
||
|
|
const form = document.createElement('form');
|
||
|
|
form.method = 'POST';
|
||
|
|
const baseUrl = window.location.origin.endsWith('/') ? window.location.origin : `${window.location.origin}/`;
|
||
|
|
const path = adminPath.startsWith('/') ? adminPath.substring(1) : adminPath;
|
||
|
|
const url = `${baseUrl}${path}/pages/${id}`;
|
||
|
|
form.action = url;
|
||
|
|
|
||
|
|
const methodInput = document.createElement('input');
|
||
|
|
methodInput.type = 'hidden';
|
||
|
|
methodInput.name = '_method';
|
||
|
|
methodInput.value = 'DELETE';
|
||
|
|
|
||
|
|
const tokenInput = document.createElement('input');
|
||
|
|
tokenInput.type = 'hidden';
|
||
|
|
tokenInput.name = '_token';
|
||
|
|
tokenInput.value = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
|
||
|
|
|
||
|
|
form.appendChild(methodInput);
|
||
|
|
form.appendChild(tokenInput);
|
||
|
|
document.body.appendChild(form);
|
||
|
|
form.submit();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="ui container">
|
||
|
|
<div class="ui grid">
|
||
|
|
<div class="sixteen wide column">
|
||
|
|
<h1 class="ui header">
|
||
|
|
<i class="file icon"></i>
|
||
|
|
<div class="content">
|
||
|
|
Pages
|
||
|
|
<div class="sub header">Manage your site's static and dynamic pages</div>
|
||
|
|
</div>
|
||
|
|
</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="sixteen wide column">
|
||
|
|
<div class="ui secondary menu">
|
||
|
|
<div class="right menu">
|
||
|
|
<a href="{window.location.origin.endsWith('/') ? window.location.origin : window.location.origin + '/'}{adminPath.startsWith('/') ? adminPath.substring(1) : adminPath}/pages/create" class="ui primary button">
|
||
|
|
<i class="plus icon"></i> New Page
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{#if pages.length === 0}
|
||
|
|
<div class="ui placeholder segment">
|
||
|
|
<div class="ui icon header">
|
||
|
|
<i class="file outline icon"></i>
|
||
|
|
No pages have been created yet.
|
||
|
|
</div>
|
||
|
|
<a href="{window.location.origin.endsWith('/') ? window.location.origin : window.location.origin + '/'}{adminPath.startsWith('/') ? adminPath.substring(1) : adminPath}/pages/create" class="ui primary button">Create your first page</a>
|
||
|
|
</div>
|
||
|
|
{:else}
|
||
|
|
<table class="ui celled table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Title</th>
|
||
|
|
<th>Slug</th>
|
||
|
|
<th>Author</th>
|
||
|
|
<th>Status</th>
|
||
|
|
<th>Last Updated</th>
|
||
|
|
<th class="collapsing">Actions</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{#each pages as page}
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<strong>{page.title}</strong>
|
||
|
|
</td>
|
||
|
|
<td><code>/{page.slug}</code></td>
|
||
|
|
<td>{page.author || 'Unknown'}</td>
|
||
|
|
<td>
|
||
|
|
{#if page.is_published}
|
||
|
|
<div class="ui green label">Published</div>
|
||
|
|
{:else}
|
||
|
|
<div class="ui yellow label">Draft</div>
|
||
|
|
{/if}
|
||
|
|
</td>
|
||
|
|
<td>{page.updated_at}</td>
|
||
|
|
<td>
|
||
|
|
<div class="ui small basic icon buttons">
|
||
|
|
<a href="{window.location.origin.endsWith('/') ? window.location.origin : window.location.origin + '/'}{adminPath.startsWith('/') ? adminPath.substring(1) : adminPath}/pages/{page.id}/edit" class="ui button" title="Edit">
|
||
|
|
<i class="edit icon"></i>
|
||
|
|
</a>
|
||
|
|
<button class="ui button" title="Delete" onclick={() => deletePage(page.id)}>
|
||
|
|
<i class="trash icon"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
{/each}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
{/if}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|