archtika/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte

<script lang="ts">
  import WebsiteEditor from "$lib/components/WebsiteEditor.svelte";
  import { sortOptions } from "$lib/utils.js";
  import { page } from "$app/stores";
  import { enhance } from "$app/forms";
  import Modal from "$lib/components/Modal.svelte";
  import SuccessOrError from "$lib/components/SuccessOrError.svelte";
  import type { ActionData, PageServerData } from "./$types";

  const { data, form }: { data: PageServerData; form: ActionData } = $props();
</script>

<SuccessOrError success={form?.success} message={form?.message} />

<WebsiteEditor
  id={data.website.id}
  title={data.website.title}
  previewContent={data.home.main_content}
>
  <section id="create-article">
    <h2>
      <a href="#create-article">Create article</a>
    </h2>

    <Modal id="create-article" text="Create article">
      <h3>Create article</h3>

      <form
        method="POST"
        action="?/createArticle"
        use:enhance={() => {
          return async ({ update }) => {
            await update();
            window.location.hash = "!";
          };
        }}
      >
        <label>
          Title:
          <input type="text" name="title" pattern="\S(.*\S)?" maxlength="100" required />
        </label>

        <button type="submit">Submit</button>
      </form>
    </Modal>
  </section>

  {#if data.totalArticleCount > 0}
    <section id="all-articles">
      <h2>
        <a href="#all-articles">All articles</a>
      </h2>

      <details>
        <summary>Search & Sort & Filter</summary>
        <form method="GET">
          <label>
            Search:
            <input
              type="text"
              name="article_search_query"
              value={$page.url.searchParams.get("article_search_query")}
            />
          </label>
          <label>
            Sort:
            <select name="article_sort">
              {#each sortOptions as { value, text }}
                <option {value} selected={value === $page.url.searchParams.get("article_sort")}
                  >{text}</option
                >
              {/each}
            </select>
          </label>
          <label>
            Filter:
            <select name="article_filter">
              <option value="all">Show all</option>
              <option value="creations">Created by you</option>
              <option value="shared">Created by others</option>
            </select>
          </label>
          <button type="submit">Submit</button>
        </form>
      </details>

      <ul class="unpadded">
        {#each data.articles as { id, title } (id)}
          <li class="article-card">
            <p>
              <strong>{title}</strong>
            </p>

            <div class="article-card__actions">
              <a href="/website/{data.website.id}/articles/{id}">Edit</a>
              <Modal id="delete-article-{id}" text="Delete">
                <h4>Delete article</h4>

                <p>
                  <strong>Caution!</strong>
                  Deleting this article will irretrievably erase all data.
                </p>

                <form
                  method="POST"
                  action="?/deleteArticle"
                  use:enhance={() => {
                    return async ({ update }) => {
                      await update();
                      window.location.hash = "!";
                    };
                  }}
                >
                  <input type="hidden" name="id" value={id} />

                  <button type="submit">Delete article</button>
                </form>
              </Modal>
            </div>
          </li>
        {/each}
      </ul>
    </section>
  {/if}
</WebsiteEditor>

<style>
  .article-card {
    display: flex;
    align-items: center;
    column-gap: var(--space-s);
    row-gap: var(--space-2xs);
    flex-wrap: wrap;
    justify-content: space-between;
    margin-block-start: var(--space-xs);
  }

  .article-card + .article-card {
    padding-block-start: var(--space-xs);
    border-block-start: var(--border-primary);
  }

  .article-card__actions {
    display: flex;
    gap: var(--space-s);
    align-items: center;
  }
</style>