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

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
   };
 };
 

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>

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 = {

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>