word-salad/resources/views/writer/dashboard.blade.php

@extends('layouts.writer')

@section('title', 'Writer Dashboard')

@section('content')
<div>
    <h1>Writer's Dashboard</h1>

    <hr />

    <h3>All Articles</h3>

    <table id="article-list-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Slug</th>
                <th>Title</th>
                <th>Subhead</th>
                <th>Author</th>
                <th>Published At</th>
                <th>Notifs Sent At</th>
                <th>Last Updated</th>
                <th>First Created</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        @forelse($articles as $article)
            <tr>
                <td>{{ $article->id }}</td>
                <td>{{ $article?->slug ?? '-' }}</td>
                <td data-article-title-id="{{ $article->id }}">{{ $article?->title ?? '-' }}</td>
                <td>{{ $article?->subtitle ?? '-' }}</td>
                <td>{{ $article?->author?->display_name ?? '-' }}</td>
                <td>{{ $article?->published_at ?? '-' }}</td>
                <td>{{ $article?->subscribers_notified_at ?? '-' }}</td>
                <td>{{ $article?->updated_at ?? '-' }}</td>
                <td>{{ $article?->created_at ?? '-' }}</td>
                <td>
                    {{--
                    <a href="{{ }}">
                        <form action="" method="POST">
                            <button type="submit">Edit</button>
                        </form>
                    </a>
                        --}}
                    
                    @if($article['published_at'])
                        <form action="{{ route('unpublish-article', ['article' => $article->id]) }}" method="POST">
                            @csrf
                            <input type="hidden" value="{{ $article->id }}">
                            <button type="submit">Unpublish</button>
                        </form>
                    @endif

                    <form action="{{ route('delete-article', ['article' => $article->id]) }}" method="POST" id="delete-article-form-{{ $article->id }}">
                        @csrf
                        <button type="submit" class="delete-article-button" data-delete-article-id="{{ $article->id }}">Delete</button>
                    </form>

                    <form action="{{ route('edit-article', ['article' => $article->id]) }}" method="GET">
                        <button type="submit">Edit</button>
                    </form>
                </td>
            </tr>
        @empty
            <tr><td>No Articles</td></tr>
        @endforelse
        </tbody>
    </table>

    <script>
        const buttons = document.getElementsByClassName('delete-article-button');

        for(let i = 0; i < buttons.length; i++) {
            const buttonElement = buttons[i];

            buttonElement.addEventListener('click', (event) => {
                event.preventDefault();
                const articleId = event.target.dataset.deleteArticleId;
                const articleTitle = document.querySelector(`td[data-article-title-id="${articleId}"]`)?.innerText;
                const proceed = confirm(`You are about to delete the article titled: ${articleTitle}. Proceed? (It can technically be restored later if you ask the database admin nicely.)`);
                if (proceed) {
                    document.getElementById(`delete-article-form-${articleId}`)?.requestSubmit();
                }
            });
        }
    </script>

</div>
@endsection