Merge pull request #31 from VaquitApp/feature/list-group-users

Member List Page

my-app/src/lib/server/api.ts

@@ -31,7 +31,7 @@ async function send(method: Method, { path, data, headers = {} }: Request) {
 		return text ? JSON.parse(text) : {};
 	}
 
-	throw error(res.status);
+	throw error(res.status, await res.text());
 }
 
 function get(path: string, headers?: Headers) {
@@ -92,3 +92,9 @@ export const categoryService = {
 	get: (id: Id, cookies: Cookies) => get(`category/${id}`, getAuthHeader(cookies)),
 	list: (groupId: Id, cookies: Cookies) => get(`category/${groupId}`, getAuthHeader(cookies))
 };
+export const inviteService = {
+	get: (token: string, cookies: Cookies) => get(`invite/${token}`, getAuthHeader(cookies)),
+	send: (data: SendInvite, cookies: Cookies) => post(`invite`, data, getAuthHeader(cookies)),
+	accept: (data: AcceptInvite, cookies: Cookies) =>
+		post(`invite/join/${data.token}`, undefined!, getAuthHeader(cookies))
+};

my-app/src/lib/svgs.ts

@@ -4,3 +4,6 @@ export const PENCIL_SVG =
 
 export const INFO_SVG =
 	'<svg width="24px" height="24px" focusable="false" viewBox="0 0 24 24"><path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"></path></svg>';
+
+export const ADD_USER_SVG =
+	'<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-user-plus"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" /><path d="M16 19h6" /><path d="M19 16v6" /><path d="M6 21v-2a4 4 0 0 1 4 -4h4" /></svg>';

my-app/src/routes/groups/+page.svelte

@@ -50,6 +50,7 @@
 				<a href="/groups/details/{group.id}" role="button" class="outline secondary">
 					Editar grupo
 				</a>
+				<a href="/groups/members/{group.id}" role="button" class="outline secondary"> Miembros </a>
 				<button class="outline contrast" on:click={() => confirmArchiveGroup(group)}>
 					Archivar
 				</button>

my-app/src/routes/groups/members/[[id=integer]]/+page.server.ts

@@ -0,0 +1,9 @@
+import { groupService } from '$lib/server/api';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params, cookies }) => {
+	const id = Number(params.id) || 0;
+	const group: Group = await groupService.get(id, cookies);
+	const members: User[] = id ? await groupService.listAllMembers(id, cookies) : [];
+	return { group, members };
+};

my-app/src/routes/groups/members/[[id=integer]]/+page.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { ADD_USER_SVG } from '$lib/svgs';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+	const pageTitle = `Miembros`;
+</script>
+
+<svelte:head>
+	<title>{data.group.name} - {pageTitle}</title>
+</svelte:head>
+
+<nav aria-label="breadcrumb">
+	<ul>
+		<li><a href="/groups">Grupos</a></li>
+		<li>Miembros</li>
+	</ul>
+</nav>
+
+<header class="row">
+	<h2 style="padding: 15px">Miembros de {data.group.name}</h2>
+	<a class="secondary" href="/invites/send/{data.group.id}" role="button">{@html ADD_USER_SVG}</a>
+</header>
+
+{#each data.members as user}
+	<p style="padding: 15px" class="row">{user.email}</p>
+{/each}
+
+<style>
+	.row {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+</style>

my-app/src/routes/invites/accept/[id]/+page.server.ts

@@ -0,0 +1,30 @@
+import { inviteService } from '$lib/server/api';
+import { error, redirect } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params, cookies }) => {
+	const token = params.id || '';
+	const invite: Invite = await inviteService.get(token, cookies);
+	return { invite };
+};
+
+export const actions: Actions = {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	default: async ({ cookies, request, params }) => {
+		const token = params.id || '';
+
+		// TODO: El metodo getGroup esta restringido a solo lectura de usuarios que ya forman parte del team
+		// La idea era en el formulario mostrar el nombre y descripcion del grupo, pero por ahora estamos ok
+		// con esto.
+
+		if (!token || !token.length) {
+			throw error(400, 'Token is required');
+		}
+
+		const invite: AcceptInvite = {
+			token: token
+		};
+		await inviteService.accept(invite, cookies);
+		redirect(302, `/groups`);
+	}
+};

my-app/src/routes/invites/accept/[id]/+page.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { title } from '$lib';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+	const pageTitle = `Unirse`;
+</script>
+
+<svelte:head>
+	<title>{title} - {pageTitle}</title>
+</svelte:head>
+
+<nav aria-label="breadcrumb">
+	<ul>
+		<li><a href="/groups">Grupos</a></li>
+		<li>Invitaciones</li>
+		<li>Aceptar</li>
+	</ul>
+</nav>
+
+<h2>¡Has sido Invitad@ a un grupo!</h2>
+<form method="POST">
+	<fieldset>
+		<!--TODO: TRAERNOS DATOS DEL GRUPO..-->
+		<label>
+			ID del Grupo
+			<input type="text" name="group_id" value={data.invite.group_id} disabled />
+		</label>
+		<label>
+			Token de la Invitación
+			<input type="text" name="token" value={data.invite.token} disabled />
+		</label>
+		<button>Unirse</button>
+		<button type="button" class="outline" on:click={() => history.back()}>Cancelar</button>
+	</fieldset>
+</form>

my-app/src/routes/invites/send/[[id=integer]]/+page.server.ts

@@ -0,0 +1,30 @@
+import { groupService, inviteService } from '$lib/server/api';
+import { error, redirect } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+import { getUserId } from '$lib/auth';
+
+export const load: PageServerLoad = async ({ params, cookies }) => {
+	const group_id = Number(params.id) || 0;
+	const group: Group = await groupService.get(group_id, cookies);
+	return { group };
+};
+
+export const actions: Actions = {
+	default: async ({ cookies, request, params }) => {
+		const group_id = Number(params.id) || 0;
+		const data = await request.formData();
+		const email = data.get('email')?.toString();
+
+		if (!email) {
+			throw error(400, 'Receiver Email is required');
+		}
+
+		const invite: SendInvite = {
+			sender_id: getUserId(cookies),
+			receiver_email: email,
+			group_id: group_id
+		};
+		await inviteService.send(invite, cookies);
+		redirect(302, `/groups/members/${group_id}`);
+	}
+};

my-app/src/routes/invites/send/[[id=integer]]/+page.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+	const pageTitle = `Invitar`;
+</script>
+
+<svelte:head>
+	<title>{data.group.name} - {pageTitle}</title>
+</svelte:head>
+
+<nav aria-label="breadcrumb">
+	<ul>
+		<li><a href="/groups">Grupos</a></li>
+		<li>Invitaciones</li>
+		<li>Enviar</li>
+	</ul>
+</nav>
+
+<h2>Invitar Usuario a {data.group.name}</h2>
+<form method="POST">
+	<fieldset>
+		<label>
+			Ingrese el email de la persona a ser invitada
+			<input type="text" name="email" placeholder="Email Invitado" required />
+		</label>
+		<button>Invitar</button>
+		<button type="button" class="outline" on:click={() => history.back()}>Cancelar</button>
+	</fieldset>
+</form>

my-app/src/types.d.ts

@@ -35,6 +35,23 @@ declare global {
 		amount: number;
 		date: string;
 	};
+	type Invite = {
+		id: Id;
+		sender_id: Id;
+		receiver_id: Id;
+		group_id: Id;
+		token: string;
+		status: string;
+		creation_date: string;
+	};
+	type SendInvite = {
+		sender_id: Id;
+		receiver_email: string;
+		group_id: Id;
+	};
+	type AcceptInvite = {
+		token: string;
+	};
 }
 
 export {};