mirror of
https://github.com/thiloho/archtika.git
synced 2025-11-22 10:51:36 +01:00
Add collaborator page
This commit is contained in:
Thilo Hohlt
@@ -0,0 +1,95 @@
|
||||
import type { Actions, PageServerLoad } from "./$types";
|
||||
|
||||
export const load: PageServerLoad = async ({ parent, params, fetch, cookies }) => {
|
||||
const { website, home } = await parent();
|
||||
|
||||
const collabData = await fetch(
|
||||
`http://localhost:3000/collab?website_id=eq.${params.websiteId}&select=*,user!user_id(*)`,
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${cookies.get("session_token")}`
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const collaborators = await collabData.json();
|
||||
|
||||
return {
|
||||
website,
|
||||
home,
|
||||
collaborators
|
||||
};
|
||||
};
|
||||
|
||||
export const actions: Actions = {
|
||||
addCollaborator: async ({ request, fetch, cookies, params }) => {
|
||||
const data = await request.formData();
|
||||
|
||||
const res = await fetch("http://localhost:3000/collab", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${cookies.get("session_token")}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
website_id: params.websiteId,
|
||||
user_id: data.get("user-id"),
|
||||
permission_level: data.get("permission-level")
|
||||
})
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const response = await res.json();
|
||||
return { success: false, message: response.message };
|
||||
}
|
||||
|
||||
return { success: true, message: "Successfully added collaborator" };
|
||||
},
|
||||
updateCollaborator: async ({ request, fetch, cookies, params }) => {
|
||||
const data = await request.formData();
|
||||
|
||||
const res = await fetch(
|
||||
`http://localhost:3000/collab?website_id=eq.${params.websiteId}&user_id=eq.${data.get("user-id")}`,
|
||||
{
|
||||
method: "PATCH",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${cookies.get("session_token")}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
permission_level: data.get("permission-level")
|
||||
})
|
||||
}
|
||||
);
|
||||
|
||||
if (!res.ok) {
|
||||
const response = await res.json();
|
||||
return { success: false, message: response.message };
|
||||
}
|
||||
|
||||
return { success: true, message: "Successfully updated collaborator" };
|
||||
},
|
||||
removeCollaborator: async ({ request, fetch, cookies, params }) => {
|
||||
const data = await request.formData();
|
||||
|
||||
const res = await fetch(
|
||||
`http://localhost:3000/collab?website_id=eq.${params.websiteId}&user_id=eq.${data.get("user-id")}`,
|
||||
{
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${cookies.get("session_token")}`
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (!res.ok) {
|
||||
const response = await res.json();
|
||||
return { success: false, message: response.message };
|
||||
}
|
||||
|
||||
return { success: true, message: "Successfully removed collaborator" };
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,135 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from "$app/forms";
|
||||
import WebsiteEditor from "$lib/components/WebsiteEditor.svelte";
|
||||
import SuccessOrError from "$lib/components/SuccessOrError.svelte";
|
||||
import Modal from "$lib/components/Modal.svelte";
|
||||
import type { ActionData, PageServerData } from "./$types";
|
||||
|
||||
const { data, form } = $props<{ data: PageServerData; form: ActionData }>();
|
||||
</script>
|
||||
|
||||
<SuccessOrError success={form?.success} message={form?.message} />
|
||||
|
||||
<WebsiteEditor
|
||||
id={data.website.id}
|
||||
title={data.website.title}
|
||||
previewContent={data.home.main_content}
|
||||
>
|
||||
<section>
|
||||
<h2>Add collaborator</h2>
|
||||
|
||||
<Modal id="add-collaborator" text="Add collaborator">
|
||||
<h3>Add collaborator</h3>
|
||||
|
||||
<form
|
||||
method="POST"
|
||||
action="?/addCollaborator"
|
||||
use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update();
|
||||
window.location.hash = "!";
|
||||
};
|
||||
}}
|
||||
>
|
||||
<label>
|
||||
User id:
|
||||
<input type="text" name="user-id" minlength="36" maxlength="36" required />
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Permission level:
|
||||
<select name="permission-level">
|
||||
<option value="10">10 - View</option>
|
||||
<option value="20">20 - Edit</option>
|
||||
<option value="30">30 - Manage</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</Modal>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>All collaborators</h2>
|
||||
|
||||
{#if data.collaborators.length > 0}
|
||||
{#each data.collaborators as { website_id, user_id, permission_level, user: { username } } (`${website_id}-${user_id}`)}
|
||||
<article class="collaborator-card">
|
||||
<h3>{username} ({permission_level})</h3>
|
||||
|
||||
<div class="collaborator-card__actions">
|
||||
<Modal id="update-collaborator-{user_id}" text="Update">
|
||||
<h4>Update collaborator</h4>
|
||||
|
||||
<form
|
||||
method="POST"
|
||||
action="?/updateCollaborator"
|
||||
use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
window.location.hash = "!";
|
||||
};
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="user-id" value={user_id} />
|
||||
|
||||
<label>
|
||||
Permission level:
|
||||
<select name="permission-level">
|
||||
<option value="10" selected={10 === permission_level}>10 - View</option>
|
||||
<option value="20" selected={20 === permission_level}>20 - Edit</option>
|
||||
<option value="30" selected={30 === permission_level}>30 - Manage</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<button type="submit">Update collaborator</button>
|
||||
</form>
|
||||
</Modal>
|
||||
<Modal id="remove-collaborator-{user_id}" text="Remove">
|
||||
<h4>Remove collaborator</h4>
|
||||
|
||||
<p>Do you really want to remove the collaborator?</p>
|
||||
|
||||
<form
|
||||
method="POST"
|
||||
action="?/removeCollaborator"
|
||||
use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update();
|
||||
window.location.hash = "!";
|
||||
};
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="user-id" value={user_id} />
|
||||
|
||||
<button type="submit">Remove collaborator</button>
|
||||
</form>
|
||||
</Modal>
|
||||
</div>
|
||||
</article>
|
||||
{/each}
|
||||
{/if}
|
||||
</section>
|
||||
</WebsiteEditor>
|
||||
|
||||
<style>
|
||||
.collaborator-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 2rem;
|
||||
row-gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.collaborator-card:nth-of-type(1) {
|
||||
margin-block-start: 1rem;
|
||||
}
|
||||
|
||||
.collaborator-card__actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -26,7 +26,7 @@ export const load: PageServerLoad = async ({ params, fetch, cookies, locals }) =
|
||||
};
|
||||
|
||||
export const actions: Actions = {
|
||||
publishWebsite: async ({ request, fetch, cookies, params, locals }) => {
|
||||
publishWebsite: async ({ request, params, locals }) => {
|
||||
const data = await request.formData();
|
||||
const websiteOverview = JSON.parse(data.get("website-overview") as string);
|
||||
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from "$app/forms";
|
||||
import WebsiteEditor from "$lib/components/WebsiteEditor.svelte";
|
||||
import SuccessOrError from "$lib/components/SuccessOrError.svelte";
|
||||
import type { ActionData, PageServerData } from "./$types";
|
||||
|
||||
const { data, form } = $props<{ data: PageServerData; form: ActionData }>();
|
||||
</script>
|
||||
|
||||
<SuccessOrError success={form?.success} message={form?.message} />
|
||||
|
||||
<WebsiteEditor
|
||||
id={data.website.id}
|
||||
title={data.website.title}
|
||||
|
||||
Reference in New Issue
Block a user