Add disable attribute for no permission buttons and shorten query param names

2025-11-22 10:51:36 +01:00 · 2024-10-19 17:55:02 +02:00
parent 185aeea4e5
commit b1a59e38c1
22 changed files with 292 additions and 147 deletions
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/+layout.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/+layout.server.ts
@@ -3,7 +3,7 @@ import { API_BASE_PREFIX, apiRequest } from "$lib/server/utils";
 import { error } from "@sveltejs/kit";
 import type { Website, Home, User } from "$lib/db-schema";

-export const load: LayoutServerLoad = async ({ params, fetch }) => {
+export const load: LayoutServerLoad = async ({ locals, params, fetch }) => {
  const websiteData = await apiRequest(
    fetch,
    `${API_BASE_PREFIX}/website?id=eq.${params.websiteId}&select=*,user!user_id(username)`,
@@ -31,8 +31,27 @@ export const load: LayoutServerLoad = async ({ params, fetch }) => {
    })
  ).data;

+  let permissionLevel = 40;
+
+  if (website.user_id !== locals.user.id) {
+    permissionLevel = (
+      await apiRequest(
+        fetch,
+        `${API_BASE_PREFIX}/collab?select=permission_level&website_id=eq.${params.websiteId}&user_id=eq.${locals.user.id}`,
+        "GET",
+        {
+          headers: {
+            Accept: "application/vnd.pgrst.object+json"
+          },
+          returnData: true
+        }
+      )
+    ).data.permission_level;
+  }
+
  return {
    website,
-    home
+    home,
+    permissionLevel
  };
 };
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
@@ -10,7 +10,6 @@
  import { sending } from "$lib/runes.svelte";
  import MarkdownEditor from "$lib/components/MarkdownEditor.svelte";
  import { previewContent } from "$lib/runes.svelte";
-
  const { data, form }: { data: PageServerData & LayoutServerData; form: ActionData } = $props();

  previewContent.value = data.home.main_content;
@@ -96,7 +95,7 @@
        {/if}
      </div>

-      <button type="submit">Submit</button>
+      <button type="submit" disabled={data.permissionLevel === 10}>Submit</button>
    </form>
  </section>

@@ -143,7 +142,7 @@
        {/if}
      </div>

-      <button type="submit">Submit</button>
+      <button type="submit" disabled={data.permissionLevel === 10}>Submit</button>
    </form>
  </section>

@@ -166,7 +165,7 @@
        content={data.home.main_content}
      />

-      <button type="submit">Submit</button>
+      <button type="submit" disabled={data.permissionLevel === 10}>Submit</button>
    </form>
  </section>

@@ -183,7 +182,7 @@
        >
      </label>

-      <button type="submit">Submit</button>
+      <button type="submit" disabled={data.permissionLevel === 10}>Submit</button>
    </form>
  </section>
 </WebsiteEditor>
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.server.ts
@@ -4,12 +4,12 @@ import { apiRequest } from "$lib/server/utils";
 import type { Article, DocsCategory } from "$lib/db-schema";

 export const load: PageServerLoad = async ({ params, fetch, url, parent, locals }) => {
-  const searchQuery = url.searchParams.get("article_search_query");
-  const filterBy = url.searchParams.get("article_filter");
+  const searchQuery = url.searchParams.get("query");
+  const filterBy = url.searchParams.get("filter");

-  const { website, home } = await parent();
+  const { website, home, permissionLevel } = await parent();

-  let baseFetchUrl = `${API_BASE_PREFIX}/article?website_id=eq.${params.websiteId}&select=id,title`;
+  let baseFetchUrl = `${API_BASE_PREFIX}/article?website_id=eq.${params.websiteId}&select=id,user_id,title`;
  if (website.content_type === "Docs") {
    baseFetchUrl +=
      ",article_weight,docs_category(category_name,category_weight)&order=docs_category(category_weight).desc.nullslast,article_weight.desc.nullslast";
@@ -56,7 +56,9 @@ export const load: PageServerLoad = async ({ params, fetch, url, parent, locals
    totalArticleCount,
    articles,
    website,
-    home
+    home,
+    permissionLevel,
+    user: locals.user
  };
 };

--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
@@ -40,7 +40,7 @@
          <input type="text" name="title" pattern="\S(.*\S)?" maxlength="100" required />
        </label>

-        <button type="submit">Submit</button>
+        <button type="submit" disabled={data.permissionLevel === 10}>Submit</button>
      </form>
    </Modal>
  </section>
@@ -56,26 +56,20 @@
        <form method="GET">
          <label>
            Search:
-            <input
-              type="text"
-              name="article_search_query"
-              value={$page.url.searchParams.get("article_search_query")}
-            />
+            <input type="text" name="query" value={$page.url.searchParams.get("query")} />
          </label>
          <label>
            Filter:
-            <select name="article_filter">
-              <option value="all" selected={"all" === $page.url.searchParams.get("article_filter")}
+            <select name="filter">
+              <option value="all" selected={"all" === $page.url.searchParams.get("filter")}
                >Show all</option
              >
              <option
                value="creations"
-                selected={"creations" === $page.url.searchParams.get("article_filter")}
+                selected={"creations" === $page.url.searchParams.get("filter")}
                >Created by you</option
              >
-              <option
-                value="shared"
-                selected={"shared" === $page.url.searchParams.get("article_filter")}
+              <option value="shared" selected={"shared" === $page.url.searchParams.get("filter")}
                >Created by others</option
              >
            </select>
@@ -85,7 +79,7 @@
      </details>

      <ul class="unpadded">
-        {#each data.articles as { id, title, article_weight, docs_category } (id)}
+        {#each data.articles as { id, user_id, title, article_weight, docs_category } (id)}
          <li class="article-card">
            <p>
              <strong>{title} {article_weight ? `(${article_weight})` : ""}</strong>
@@ -129,7 +123,12 @@
                >
                  <input type="hidden" name="id" value={id} />

-                  <button type="submit">Delete article</button>
+                  <button
+                    type="submit"
+                    disabled={data.permissionLevel === 10 ||
+                      (data.permissionLevel === 20 && user_id !== data.user.id)}
+                    >Delete article</button
+                  >
                </form>
              </Modal>
            </div>
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.server.ts
@@ -23,9 +23,9 @@ export const load: PageServerLoad = async ({ parent, params, fetch }) => {
    )
  ).data;

-  const { website } = await parent();
+  const { website, permissionLevel } = await parent();

-  return { website, article, categories, API_BASE_PREFIX };
+  return { website, article, categories, API_BASE_PREFIX, permissionLevel };
 };

 export const actions: Actions = {
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte
@@ -119,7 +119,7 @@
        content={data.article.main_content ?? ""}
      />

-      <button type="submit">Submit</button>
+      <button type="submit" disabled={data.permissionLevel === 10}>Submit</button>
    </form>
  </section>
 </WebsiteEditor>
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/categories/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/categories/+page.server.ts
@@ -2,7 +2,7 @@ import type { Actions, PageServerLoad } from "./$types";
 import { API_BASE_PREFIX, apiRequest } from "$lib/server/utils";
 import type { DocsCategory } from "$lib/db-schema";

-export const load: PageServerLoad = async ({ parent, params, fetch }) => {
+export const load: PageServerLoad = async ({ parent, params, fetch, locals }) => {
  const categories: DocsCategory[] = (
    await apiRequest(
      fetch,
@@ -14,12 +14,14 @@ export const load: PageServerLoad = async ({ parent, params, fetch }) => {
    )
  ).data;

-  const { website, home } = await parent();
+  const { website, home, permissionLevel } = await parent();

  return {
    categories,
    website,
-    home
+    home,
+    permissionLevel,
+    user: locals.user
  };
 };

--- a/web-app/src/routes/(authenticated)/website/[websiteId]/categories/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/categories/+page.svelte
@@ -44,7 +44,7 @@
          <input name="category-weight" type="number" min="0" required />
        </label>

-        <button type="submit">Submit</button>
+        <button type="submit" disabled={data.permissionLevel === 10}>Submit</button>
      </form>
    </Modal>
  </section>
@@ -56,7 +56,7 @@
      </h2>

      <ul class="unpadded">
-        {#each data.categories as { id, website_id, category_name, category_weight } (`${website_id}-${id}`)}
+        {#each data.categories as { id, website_id, user_id, category_name, category_weight } (`${website_id}-${id}`)}
          <li class="category-card">
            <p>
              <strong>{category_name} ({category_weight})</strong>
@@ -89,7 +89,9 @@
                    <input type="number" name="category-weight" value={category_weight} min="0" />
                  </label>

-                  <button type="submit">Update category</button>
+                  <button type="submit" disabled={data.permissionLevel === 10}
+                    >Update category</button
+                  >
                </form>
              </Modal>
              <Modal id="delete-category-{id}" text="Delete">
@@ -104,7 +106,12 @@
                >
                  <input type="hidden" name="category-id" value={id} />

-                  <button type="submit">Delete category</button>
+                  <button
+                    type="submit"
+                    disabled={data.permissionLevel === 10 ||
+                      (data.permissionLevel === 20 && user_id !== data.user.id)}
+                    >Delete category</button
+                  >
                </form>
              </Modal>
            </div>
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.server.ts
@@ -2,7 +2,7 @@ import type { Actions, PageServerLoad } from "./$types";
 import { API_BASE_PREFIX, apiRequest } from "$lib/server/utils";
 import type { Collab, User } from "$lib/db-schema";

-export const load: PageServerLoad = async ({ parent, params, fetch }) => {
+export const load: PageServerLoad = async ({ parent, params, fetch, locals }) => {
  const collaborators: (Collab & { user: User })[] = (
    await apiRequest(
      fetch,
@@ -14,12 +14,14 @@ export const load: PageServerLoad = async ({ parent, params, fetch }) => {
    )
  ).data;

-  const { website, home } = await parent();
+  const { website, home, permissionLevel } = await parent();

  return {
    website,
    home,
-    collaborators
+    collaborators,
+    permissionLevel,
+    user: locals.user
  };
 };

--- a/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte
@@ -51,7 +51,7 @@
          </select>
        </label>

-        <button type="submit">Submit</button>
+        <button type="submit" disabled={[10, 20].includes(data.permissionLevel)}>Submit</button>
      </form>
    </Modal>
  </section>
@@ -89,7 +89,11 @@
                    </select>
                  </label>

-                  <button type="submit">Update collaborator</button>
+                  <button
+                    type="submit"
+                    disabled={[10, 20].includes(data.permissionLevel) || user_id === data.user.id}
+                    >Update collaborator</button
+                  >
                </form>
              </Modal>
              <Modal id="remove-collaborator-{user_id}" text="Remove">
@@ -104,7 +108,11 @@
                >
                  <input type="hidden" name="user-id" value={user_id} />

-                  <button type="submit">Remove collaborator</button>
+                  <button
+                    type="submit"
+                    disabled={[10, 20].includes(data.permissionLevel) || user_id === data.user.id}
+                    >Remove collaborator</button
+                  >
                </form>
              </Modal>
            </div>
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/legal-information/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/legal-information/+page.server.ts
@@ -17,12 +17,13 @@ export const load: PageServerLoad = async ({ parent, fetch, params }) => {
    )
  ).data;

-  const { website } = await parent();
+  const { website, permissionLevel } = await parent();

  return {
    legalInformation,
    website,
-    API_BASE_PREFIX
+    API_BASE_PREFIX,
+    permissionLevel
  };
 };

@@ -57,5 +58,22 @@ export const actions: Actions = {
    }

    return deleteLegalInformation;
+  },
+  pasteImage: async ({ request, fetch, params }) => {
+    const data = await request.formData();
+    const file = data.get("file") as File;
+
+    return await apiRequest(fetch, `${API_BASE_PREFIX}/rpc/upload_file`, "POST", {
+      headers: {
+        "Content-Type": "application/octet-stream",
+        Accept: "application/vnd.pgrst.object+json",
+        "X-Website-Id": params.websiteId,
+        "X-Mimetype": file.type,
+        "X-Original-Filename": file.name
+      },
+      body: await file.arrayBuffer(),
+      successMessage: "Successfully uploaded image",
+      returnData: true
+    });
  }
 };
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/legal-information/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/legal-information/+page.svelte
@@ -61,7 +61,7 @@
        content={data.legalInformation?.main_content ?? ""}
      />

-      <button type="submit">Submit</button>
+      <button type="submit" disabled={[10, 20].includes(data.permissionLevel)}>Submit</button>
    </form>

    {#if data.legalInformation?.main_content}
@@ -76,7 +76,9 @@
            <strong>Caution!</strong>
            This action will remove the legal information page from the website and delete all data.
          </p>
-          <button type="submit">Delete legal information</button>
+          <button type="submit" disabled={[10, 20].includes(data.permissionLevel)}
+            >Delete legal information</button
+          >
        </form>
      </Modal>
    {/if}
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/logs/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/logs/+page.server.ts
@@ -4,10 +4,10 @@ import type { ChangeLog, User, Collab } from "$lib/db-schema";
 import DiffMatchPatch from "diff-match-patch";

 export const load: PageServerLoad = async ({ parent, fetch, params, url }) => {
-  const userFilter = url.searchParams.get("logs_filter_user");
-  const resourceFilter = url.searchParams.get("logs_filter_resource");
-  const operationFilter = url.searchParams.get("logs_filter_operation");
-  const currentPage = Number.parseInt(url.searchParams.get("logs_results_page") ?? "1");
+  const userFilter = url.searchParams.get("user");
+  const resourceFilter = url.searchParams.get("resource");
+  const operationFilter = url.searchParams.get("operation");
+  const currentPage = Number.parseInt(url.searchParams.get("page") ?? "1");
  const resultOffset = (currentPage - 1) * 20;

  const searchParams = new URLSearchParams();
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/logs/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/logs/+page.svelte
@@ -57,8 +57,8 @@
          Username:
          <input
            list="users-{data.website.id}"
-            name="logs_filter_user"
-            value={$page.url.searchParams.get("logs_filter_user")}
+            name="user"
+            value={$page.url.searchParams.get("user")}
          />
          <datalist id="users-{data.website.id}">
            <option value={data.website.user.username}></option>
@@ -69,39 +69,32 @@
        </label>
        <label>
          Resource:
-          <select name="logs_filter_resource">
+          <select name="resource">
            <option value="all">Show all</option>
            {#each Object.keys(resources) as resource}
              <option
                value={resource}
-                selected={resource === $page.url.searchParams.get("logs_filter_resource")}
-                >{resource}</option
+                selected={resource === $page.url.searchParams.get("resource")}>{resource}</option
              >
            {/each}
          </select>
        </label>
        <label>
          Operation:
-          <select name="logs_filter_operation">
+          <select name="operation">
            <option value="all">Show all</option>
-            <option
-              value="insert"
-              selected={"insert" === $page.url.searchParams.get("logs_filter_operation")}
+            <option value="insert" selected={"insert" === $page.url.searchParams.get("operation")}
              >Insert</option
            >
-            <option
-              value="update"
-              selected={"update" === $page.url.searchParams.get("logs_filter_operation")}
+            <option value="update" selected={"update" === $page.url.searchParams.get("operation")}
              >Update</option
            >
-            <option
-              value="delete"
-              selected={"delete" === $page.url.searchParams.get("logs_filter_operation")}
+            <option value="delete" selected={"delete" === $page.url.searchParams.get("operation")}
              >Delete</option
            >
          </select>
        </label>
-        <input type="hidden" name="logs_results_page" value={1} />
+        <input type="hidden" name="page" value={1} />
        <button type="submit">Submit</button>
      </form>
    </details>
@@ -112,7 +105,7 @@
            <th>User</th>
            <th>Resource</th>
            <th>Operation</th>
-            <th>Date and time</th>
+            <th>Date & Time</th>
            <th>Changes</th>
          </tr>
        </thead>
@@ -171,78 +164,60 @@
    </div>
    <div class="pagination">
      {#snippet commonFilterInputs()}
-        <input
-          type="hidden"
-          name="logs_filter_user"
-          value={$page.url.searchParams.get("logs_filter_user")}
-        />
-        <input
-          type="hidden"
-          name="logs_filter_resource"
-          value={$page.url.searchParams.get("logs_filter_resource")}
-        />
-        <input
-          type="hidden"
-          name="logs_filter_operation"
-          value={$page.url.searchParams.get("logs_filter_operation")}
-        />
+        <input type="hidden" name="user" value={$page.url.searchParams.get("user")} />
+        <input type="hidden" name="resource" value={$page.url.searchParams.get("resource")} />
+        <input type="hidden" name="operation" value={$page.url.searchParams.get("operation")} />
      {/snippet}
      <p>
-        {$page.url.searchParams.get("logs_results_page") ?? 1} / {Math.max(
+        {$page.url.searchParams.get("page") ?? 1} / {Math.max(
          Math.ceil(data.resultChangeLogCount / 20),
          1
        )}
      </p>
      <form method="GET">
-        <input type="hidden" name="logs_results_page" value={1} />
+        <input type="hidden" name="page" value={1} />
        {@render commonFilterInputs()}
-        <button
-          type="submit"
-          disabled={($page.url.searchParams.get("logs_results_page") ?? "1") === "1"}>First</button
+        <button type="submit" disabled={($page.url.searchParams.get("page") ?? "1") === "1"}
+          >First</button
        >
      </form>
      <form method="GET">
        <input
          type="hidden"
-          name="logs_results_page"
-          value={Math.max(
-            1,
-            Number.parseInt($page.url.searchParams.get("logs_results_page") ?? "1") - 1
-          )}
+          name="page"
+          value={Math.max(1, Number.parseInt($page.url.searchParams.get("page") ?? "1") - 1)}
        />
        {@render commonFilterInputs()}
-        <button
-          type="submit"
-          disabled={($page.url.searchParams.get("logs_results_page") ?? "1") === "1"}
+        <button type="submit" disabled={($page.url.searchParams.get("page") ?? "1") === "1"}
          >Previous</button
        >
      </form>
      <form method="GET">
        <input
          type="hidden"
-          name="logs_results_page"
+          name="page"
          value={Math.min(
            Math.max(Math.ceil(data.resultChangeLogCount / 20), 1),
-            Number.parseInt($page.url.searchParams.get("logs_results_page") ?? "1") + 1
+            Number.parseInt($page.url.searchParams.get("page") ?? "1") + 1
          )}
        />
        {@render commonFilterInputs()}
        <button
          type="submit"
-          disabled={($page.url.searchParams.get("logs_results_page") ?? "1") ===
+          disabled={($page.url.searchParams.get("page") ?? "1") ===
            Math.max(Math.ceil(data.resultChangeLogCount / 20), 1).toString()}>Next</button
        >
      </form>
      <form method="GET">
        <input
          type="hidden"
-          name="logs_results_page"
+          name="page"
          value={Math.max(Math.ceil(data.resultChangeLogCount / 20), 1)}
        />
        {@render commonFilterInputs()}
        <button
          type="submit"
-          disabled={($page.url.searchParams.get("logs_results_page") ?? "1") ===
+          disabled={($page.url.searchParams.get("page") ?? "1") ===
            Math.max(Math.ceil(data.resultChangeLogCount / 20), 1).toString()}>Last</button
        >
      </form>
@@ -262,9 +237,4 @@
  .pagination > form:first-of-type {
    margin-inline-start: auto;
  }
-
-  button:disabled {
-    pointer-events: none;
-    color: hsl(0 0% 50%);
-  }
 </style>
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.server.ts
@@ -10,7 +10,7 @@ import { join } from "node:path";
 import { render } from "svelte/server";
 import type { Actions, PageServerLoad } from "./$types";

-export const load: PageServerLoad = async ({ params, fetch }) => {
+export const load: PageServerLoad = async ({ params, fetch, parent }) => {
  const websiteOverview: WebsiteOverview = (
    await apiRequest(
      fetch,
@@ -27,10 +27,13 @@ export const load: PageServerLoad = async ({ params, fetch }) => {

  const { websitePreviewUrl, websiteProdUrl } = await generateStaticFiles(websiteOverview);

+  const { permissionLevel } = await parent();
+
  return {
    websiteOverview,
    websitePreviewUrl,
-    websiteProdUrl
+    websiteProdUrl,
+    permissionLevel
  };
 };

--- a/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte
@@ -36,7 +36,7 @@
      be published on the Internet.
    </p>
    <form method="POST" action="?/publishWebsite" use:enhance={enhanceForm()}>
-      <button type="submit">Publish</button>
+      <button type="submit" disabled={[10, 20].includes(data.permissionLevel)}>Publish</button>
    </form>
  </section>

@@ -73,7 +73,7 @@
            required
          />
        </label>
-        <button type="submit">Submit</button>
+        <button type="submit" disabled={[10, 20].includes(data.permissionLevel)}>Submit</button>
      </form>
      {#if data.websiteOverview.domain_prefix?.prefix}
        <Modal id="delete-domain-prefix" text="Delete">
@@ -87,7 +87,9 @@
              <strong>Caution!</strong>
              This action will remove the domain prefix and reset it to its initial value.
            </p>
-            <button type="submit">Delete domain prefix</button>
+            <button type="submit" disabled={[10, 20].includes(data.permissionLevel)}
+              >Delete domain prefix</button
+            >
          </form>
        </Modal>
      {/if}