minix-front/src/lib/components/TablaUsuarios.svelte

<script lang="ts">
	import TableBody from '@/components/ui/table/table-body.svelte';
	import TableCell from '@/components/ui/table/table-cell.svelte';
	import TableHead from '@/components/ui/table/table-head.svelte';
	import TableHeader from '@/components/ui/table/table-header.svelte';
	import TableRow from '@/components/ui/table/table-row.svelte';
	import Table from '@/components/ui/table/table.svelte';
	import type { UserResponseDto } from '../../types';
	import Button from './ui/button/button.svelte';
	import KeyIcon from '@lucide/svelte/icons/key';
	import UserPen from '@lucide/svelte/icons/user-pen';
	import { Tooltip } from './ui/tooltip';
	import TooltipTrigger from './ui/tooltip/tooltip-trigger.svelte';
	import TooltipContent from './ui/tooltip/tooltip-content.svelte';
	import RecuperarContraseña from './admin/RecuperarContraseña.svelte';
	import { Dialog } from './ui/dialog';
	import DialogContent from './ui/dialog/dialog-content.svelte';
	import ModificarUsuario from './admin/ModificarUsuario.svelte';
	import { fade } from 'svelte/transition';
	import type { Unsubscriber } from 'svelte/store';
	import Input from './ui/input/input.svelte';

	interface Props {
		usuarios: UserResponseDto[];
	}

	let { usuarios = $bindable() }: Props = $props();

	let open = $state(false);
	let openModificarUsuario = $state(false);

	//si ponia contraseña en español quedaba muy largo el nombre
	let usuarioCambioPass: UserResponseDto | null = $state(null);

	let usuarioModificar: UserResponseDto | null = $state(null);

	let search = $state('');

	type SortKey = 'username' | 'displayName' | 'postsCount' | 'createdAt';
	let sortBy = $state<SortKey | null>(null);
	let sortDirection = $state<'asc' | 'desc'>('asc');

	function ordenarPor(campo: SortKey) {
		if (sortBy === campo) {
			sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
		} else {
			sortBy = campo;
			sortDirection = 'asc';
		}
	}

	let usuariosFiltrados = $derived(
		usuarios
			.filter(
				(u) =>
					u.username.toLowerCase().startsWith(search.toLowerCase()) ||
					u.displayName.toLowerCase().startsWith(search.toLowerCase())
			)
			.toSorted((a, b) => {
				if (!sortBy) return 0;

				const key: SortKey = sortBy;

				if (key === 'createdAt') {
					const ta = new Date(a.createdAt).getTime();
					const tb = new Date(b.createdAt).getTime();
					return sortDirection === 'asc' ? ta - tb : tb - ta;
				}

				if (key === 'postsCount') {
					return sortDirection === 'asc'
						? a.postsCount - b.postsCount
						: b.postsCount - a.postsCount;
				}

				const sa = a[key].toString().toLowerCase();
				const sb = b[key].toString().toLowerCase();
				return sortDirection === 'asc' ? sa.localeCompare(sb) : sb.localeCompare(sa);
			})
	);

	function getSortIcon(campo: SortKey) {
		if (sortBy !== campo) return '';
		return sortDirection === 'asc' ? '↑' : '↓';
	}

	$effect(() => {
		if (!open) {
			usuarioCambioPass = null;
		}
	});

	function handleCambiarContraseña(usuario: UserResponseDto) {
		open = true;
		usuarioCambioPass = usuario;
	}

	function handleModificar(usuario: UserResponseDto) {
		openModificarUsuario = true;
		usuarioModificar = usuario;
	}
</script>

<div class="mb-4">
	<Input
		type="text"
		placeholder="Buscar usuario..."
		bind:value={search}
		class="w-full rounded border px-3 py-2"
	/>
</div>

<Table>
	<TableHeader>
		<TableRow>
			<TableHead onclick={() => ordenarPor('username')} class="cursor-pointer select-none">
				Usuario {getSortIcon('username')}
			</TableHead>
			<TableHead onclick={() => ordenarPor('displayName')} class="cursor-pointer select-none">
				Nombre {getSortIcon('displayName')}
			</TableHead>
			<TableHead onclick={() => ordenarPor('postsCount')} class="cursor-pointer select-none">
				Cantidad de posts {getSortIcon('postsCount')}
			</TableHead>
			<TableHead onclick={() => ordenarPor('createdAt')} class="cursor-pointer select-none">
				Fecha de Creacion {getSortIcon('createdAt')}
			</TableHead>
			<TableHead>Acciones</TableHead>
		</TableRow>
	</TableHeader>
	<TableBody>
		{#each usuariosFiltrados as usuario}
			<TableRow>
				<TableCell
					>@<a href={'/' + usuario.username}>
						{usuario.username}
					</a>
				</TableCell>
				<TableCell>{usuario.displayName}</TableCell>
				<TableCell class="text-center">{usuario.postsCount}</TableCell>
				<TableCell>{usuario.createdAt.replace('Z', ' ').replace('T', ' | ')}</TableCell>
				<TableCell class="flex gap-2">
					<Tooltip>
						<TooltipTrigger>
							<Button onclick={() => handleCambiarContraseña(usuario)}><KeyIcon></KeyIcon></Button>
						</TooltipTrigger>
						<TooltipContent>
							<p>Recuperar Contraseña</p>
						</TooltipContent>
					</Tooltip>
					<Tooltip>
						<TooltipTrigger>
							<Button onclick={() => handleModificar(usuario)}><UserPen /></Button>
						</TooltipTrigger>
						<TooltipContent>
							<p>Modificar Usuario</p>
						</TooltipContent>
					</Tooltip>
					<Button></Button>
				</TableCell>
			</TableRow>
		{/each}
	</TableBody>
</Table>
<RecuperarContraseña bind:open usuario={usuarioCambioPass} />
<ModificarUsuario bind:open={openModificarUsuario} bind:usuario={usuarioModificar} />