Merge pull request #75 from VaquitApp/74-eliminar-categoría-1

Eliminar Categoría [1]

my-app/src/lib/balance-utils.ts

@@ -71,3 +71,9 @@ function computeTotal(objects: { category_id: Id; amount: number }[], categoryId
 function formatCategoryList(categoryList: { categoryName: string }[]): string {
 	return categoryList.map(({ categoryName }) => `"${categoryName}"`).join(', ');
 }
+
+export function archivedCategoriesLast(categories: Category[]) {
+	const archived = categories.filter(({ is_archived }) => is_archived);
+	const active = categories.filter(({ is_archived }) => !is_archived);
+	return [...active, ...archived];
+}

my-app/src/lib/components/CategoryFilter.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { routes } from '$lib';
+	import { archivedCategoriesLast } from '$lib/balance-utils';
 	import CssIcon from './CssIcon.svelte';
 	import OwnerOnly from './OwnerOnly.svelte';
 
@@ -10,24 +11,28 @@
 	function toggleCategoryFilter(categoryId: Id, shouldFilter: boolean) {
 		filter = shouldFilter ? [...filter, categoryId] : filter.filter((id) => id !== categoryId);
 	}
+
+	$: sortedCategories = archivedCategoriesLast(categories);
 </script>
 
 <div>
 	<CssIcon name="tag" />
 	Categorías:
-	{#each categories as category}
+	{#each sortedCategories as category}
 		{@const active = filter.includes(category.id)}
+		{@const activeClass = !active ? 'outline' : ''}
+		{@const archivedClass = category.is_archived ? 'contrast' : ''}
 		<div style="width: auto; vertical-align: baseline; margin:5px;" role="group">
 			<button
 				on:click={() => toggleCategoryFilter(category.id, !active)}
-				class="btn-sm {!active ? 'outline' : ''}"
+				class="btn-sm {activeClass} {archivedClass}"
 			>
 				{category.name}
 			</button>
 			<OwnerOnly {ownerId}>
 				<a
-					class="btn-sm {!active ? 'outline' : ''}"
-					href="{routes.categoryDetails}/{category.id}"
+					class="btn-sm {activeClass} {archivedClass}"
+					href={routes.categoryDetails(category.id)}
 					role="button"
 				>
 					<CssIcon name="pen" size={0.7} />

my-app/src/lib/index.ts

@@ -50,7 +50,7 @@ export const routes = {
 	groupMembers: (groupId: Id) => `/groups/${groupId}/members`,
 	groupMovements: (groupId: Id) => `/groups/${groupId}/movements`,
 	// categories
-	categoryDetails: '/categories/details',
+	categoryDetails: (categoryId?: Id) => `/categories/details${categoryId ? `/${categoryId}` : ''}`,
 	// budgets
 	budgetDetails: '/budgets/details',
 	// spendings

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

@@ -134,7 +134,9 @@ export const categoryService = {
 			? put(`category/${data.id}`, data, getAuthHeader(cookies))
 			: post('category', data, getAuthHeader(cookies)),
 	get: (id: Id, cookies: Cookies) => get(`category/${id}`, getAuthHeader(cookies)),
-	list: (groupId: Id, cookies: Cookies) => get(`group/${groupId}/category`, getAuthHeader(cookies))
+	list: (groupId: Id, cookies: Cookies) => get(`group/${groupId}/category`, getAuthHeader(cookies)),
+	archive: (id: Id, cookies: Cookies) => put(`category/${id}/is_archived`, { is_archived: true }, getAuthHeader(cookies)),
+	unarchive: (id: Id, cookies: Cookies) => put(`category/${id}/is_archived`, { is_archived: false }, getAuthHeader(cookies))
 };
 export const inviteService = {
 	get: (token: string, cookies: Cookies) => get(`invite/${token}`, getAuthHeader(cookies)),

my-app/src/routes/budgets/details/[[id=integer]]/+page.svelte

@@ -33,6 +33,7 @@
 			try {
 				const response = await fetch(`/api/categories?groupId=${groupId}`);
 				categories = await response.json();
+				categories = categories.filter((category) => !category.is_archived);
 				return;
 			} catch {}
 		}

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

@@ -15,7 +15,7 @@ export const load: PageServerLoad = async ({ params, url, cookies }) => {
 };
 
 export const actions: Actions = {
-	default: async ({ cookies, request, params }) => {
+	update: async ({ cookies, request, params }) => {
 		const id = Number(params.id) || 0;
 		const data = await request.formData();
 		const name = data.get('name')?.toString();
@@ -37,5 +37,13 @@ export const actions: Actions = {
 		await categoryService.save(category, cookies);
 
 		redirect(302, routes.groupMovements(group_id));
+	},
+	archive: async ({ cookies, params }) => {
+		const id = Number(params.id) || 0;
+		await categoryService.archive(id, cookies);
+	},
+	unarchive: async ({ cookies, params }) => {
+		const id = Number(params.id) || 0;
+		await categoryService.unarchive(id, cookies);
 	}
 };

my-app/src/routes/categories/details/[[id=integer]]/+page.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
-	import { title } from '$lib';
+	import { goto } from '$app/navigation';
+	import { routes, title } from '$lib';
+	import CssIcon from '$lib/components/CssIcon.svelte';
 	import type { PageData } from './$types';
 
 	export let data: PageData;
 
 	const edit = data.category.id !== 0;
+	const isArchived = data.category.is_archived;
 </script>
 
 <svelte:head>
@@ -18,11 +21,11 @@
 <h2>
 	{#if edit}Editando{:else}Creando{/if} Categoría
 </h2>
-<form method="POST">
+<form method="POST" action="?/update">
 	<fieldset>
 		<label>
 			Ingrese un grupo para la categoría
-			<select name="groupId" required value={data.category.group_id}>
+			<select name="groupId" required disabled={isArchived} value={data.category.group_id}>
 				{#each data.groups as group}
 					<option disabled={edit && group.id !== data.category.group_id} value={group.id}
 						>{group.name}</option
@@ -32,7 +35,14 @@
 		</label>
 		<label>
 			Ingrese un nombre para la categoría
-			<input type="text" name="name" placeholder="Nombre" required value={data.category.name} />
+			<input
+				type="text"
+				name="name"
+				placeholder="Nombre"
+				required
+				disabled={isArchived}
+				value={data.category.name}
+			/>
 		</label>
 		<label>
 			Ingrese una descripción para la categoría
@@ -41,14 +51,30 @@
 				name="description"
 				placeholder="Description"
 				required
+				disabled={isArchived}
 				value={data.category.description}
 			/>
 		</label>
 		{#if edit}
-			<button>Editar</button>
+			{#if isArchived}
+				<button class="contrast" formaction="?/unarchive">
+					<CssIcon name="lock-unlock" />
+					Desarchivar
+				</button>
+			{:else}
+				<button>Editar</button>
+				<button class="outline contrast" formaction="?/archive">
+					<CssIcon name="lock" />
+					Archivar
+				</button>
+			{/if}
 		{:else}
 			<button>Crear</button>
 		{/if}
-		<button type="button" class="outline" on:click={() => history.back()}>Cancelar</button>
+		<button
+			type="button"
+			class="outline"
+			on:click={() => goto(routes.groupMovements(data.category.group_id))}>Volver</button
+		>
 	</fieldset>
 </form>

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

@@ -30,7 +30,7 @@
 				<li><a href={routes.groupDetails}>Añadir grupo</a></li>
 				<li><a href={routes.spendingDetails}>Añadir gasto</a></li>
 				<li><a href={routes.budgetDetails}>Añadir presupuesto</a></li>
-				<li><a href={routes.categoryDetails}>Añadir categoría</a></li>
+				<li><a href={routes.categoryDetails()}>Añadir categoría</a></li>
 			</ul>
 		</details>
 	</div>

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

@@ -94,9 +94,3 @@
 		</p>
 	</article>
 {/each}
-
-<style>
-	.no-underline {
-		border-bottom: 0px;
-	}
-</style>

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { getCategoryNameById, routes, title } from '$lib';
 	import CategoryFilter from '$lib/components/CategoryFilter.svelte';
 	import CssIcon from '$lib/components/CssIcon.svelte';
@@ -39,25 +40,33 @@
 </article>
 
 {#each filteredBudgets as budget}
+	{@const isReadOnly = data.categories.find((c) => c.id === budget.category_id).is_archived}
 	<article>
 		<header class="row jc-space-between">
 			<b>{budget.description}</b>
-			<p>{getCategoryNameById(data.categories, budget.category_id)}</p>
+			<p>
+				{#if isReadOnly}
+					<span class="no-underline" data-tooltip="Archivada">
+						<CssIcon name="lock" />
+					</span>
+				{/if}
+				{getCategoryNameById(data.categories, budget.category_id)}
+			</p>
 		</header>
 		<div class="grid">
 			{formatDateString(budget.start_date)} — {formatDateString(budget.end_date)}
 			<div class="row">
 				<p class="t-right" style="margin-left: auto; padding-right:5%">
 					{formatMoney(budget.amount)}
 				</p>
-				<a
+				<button
 					class="secondary outline btn-sm"
-					href="{routes.budgetDetails}/{budget.id}"
-					role="button"
+					on:click={() => goto(`${routes.budgetDetails}/${budget.id}`)}
+					disabled={isReadOnly}
 					data-tooltip="Editar"
 				>
 					<CssIcon name="pen" />
-				</a>
+				</button>
 			</div>
 		</div>
 	</article>

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

@@ -1,9 +1,12 @@
 <script lang="ts">
 	import { title } from '$lib';
+	import { archivedCategoriesLast } from '$lib/balance-utils';
 	import BalanceDisplay from '$lib/components/BalanceDisplay.svelte';
+	import CssIcon from '$lib/components/CssIcon.svelte';
 	import type { PageData } from './$types';
 
 	export let data: PageData;
+	let sortedCategories = archivedCategoriesLast(data.categories);
 </script>
 
 <svelte:head>
@@ -16,12 +19,17 @@
 	</hgroup>
 </header>
 
-{#each data.categories as category}
+{#each sortedCategories as category}
 	{@const spendings = data.spendings.filter((s) => s.category_id === category.id)}
 	{@const budgets = data.budgets.filter((b) => b.category_id === category.id)}
 	<article>
 		<header class="row jc-space-between">
 			<p>
+				{#if category.is_archived}
+					<span class="no-underline" data-tooltip="Archivada">
+						<CssIcon name="lock" />
+					</span>
+				{/if}
 				<b>{category.name}</b> -
 				{category.description}
 			</p>

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

@@ -3,6 +3,7 @@
 	import { confirmKickFromGroup, confirmLeaveGroup } from '$lib/client/alerts';
 	import Avatar from '$lib/components/Avatar.svelte';
 	import CssIcon from '$lib/components/CssIcon.svelte';
+	import OwnerOnly from '$lib/components/OwnerOnly.svelte';
 	import type { PageData } from './$types';
 
 	export let data: PageData;
@@ -20,10 +21,12 @@
 		<h2>Miembros de {data.group.name}</h2>
 	</hgroup>
 	<div>
-		<a href="{routes.sendInvite}/{data.group.id}" role="button">
-			<CssIcon name="user-add" />
-			Invitar
-		</a>
+		<OwnerOnly ownerId={data.group.owner_id}>
+			<a href="{routes.sendInvite}/{data.group.id}" role="button">
+				<CssIcon name="user-add" />
+				Invitar
+			</a>
+		</OwnerOnly>
 	</div>
 </header>
 

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

@@ -62,7 +62,7 @@
 			<ul dir="rtl">
 				<li><a href="{routes.spendingDetails}?groupId={data.group.id}">Añadir gasto</a></li>
 				<li><a href="{routes.budgetDetails}?groupId={data.group.id}">Añadir presupuesto</a></li>
-				<li><a href="{routes.categoryDetails}?groupId={data.group.id}">Añadir categoría</a></li>
+				<li><a href="{routes.categoryDetails()}?groupId={data.group.id}">Añadir categoría</a></li>
 				<li><a href="{routes.paymentDetails}?groupId={data.group.id}">Añadir pago</a></li>
 			</ul>
 		</details>

my-app/src/routes/spendings/details/[[id=integer]]/+page.svelte

@@ -36,6 +36,7 @@
 			try {
 				const response = await fetch(`${routes.apiCategories}?groupId=${groupId}`);
 				categories = await response.json();
+				categories = categories.filter((category) => !category.is_archived);
 				return;
 			} catch {}
 		}

my-app/src/types.d.ts

@@ -27,6 +27,7 @@ declare global {
 		group_id: Id;
 		description: string;
 		strategy: string;
+		is_archived: boolean;
 	};
 
 	type Budget = {
@@ -49,13 +50,13 @@ declare global {
 		date: string;
 	};
 
-	interface UniqueSpending extends Spending {}
+	interface UniqueSpending extends Spending { }
 
 	interface InstallmentSpending extends Spending {
 		amount_of_installments: number;
 	}
 
-	interface RecurringSpending extends Spending {}
+	interface RecurringSpending extends Spending { }
 
 	type Payment = {
 		id: Id;
@@ -108,4 +109,4 @@ declare global {
 	};
 }
 
-export {};
+export { };

my-app/static/styles.css

@@ -1,6 +1,7 @@
 .mb {
 	margin-bottom: 1em;
 }
+
 .ml {
 	margin-left: 1em;
 }
@@ -29,6 +30,7 @@
 .t-center {
 	text-align: center;
 }
+
 .t-right {
 	text-align: right;
 }
@@ -37,3 +39,7 @@
 	font-size: small;
 	padding: 0.5em;
 }
+
+.no-underline {
+	border-bottom: 0px;
+}