diff --git a/src/lib/components/CardCargando.svelte b/src/lib/components/CardCargando.svelte new file mode 100644 index 0000000..aabba17 --- /dev/null +++ b/src/lib/components/CardCargando.svelte @@ -0,0 +1,15 @@ + + +
+ + + +

Cargando

+ + +
diff --git a/src/lib/components/CardError.svelte b/src/lib/components/CardError.svelte new file mode 100644 index 0000000..3c3cbe6 --- /dev/null +++ b/src/lib/components/CardError.svelte @@ -0,0 +1,19 @@ + + +
+ + + +

+ {mensajeError} +

+ + +
diff --git a/src/lib/components/CardPerfil.svelte b/src/lib/components/CardPerfil.svelte new file mode 100644 index 0000000..2a0b78a --- /dev/null +++ b/src/lib/components/CardPerfil.svelte @@ -0,0 +1,83 @@ + + + + + + {#if cargando} +
+ + + +
+ {:else} + +

+ {data.displayName} +

+

+ {data.bio} +

+ {/if} + + diff --git a/src/lib/components/TablaUsuarios.svelte b/src/lib/components/TablaUsuarios.svelte index db21f4a..9f7552f 100644 --- a/src/lib/components/TablaUsuarios.svelte +++ b/src/lib/components/TablaUsuarios.svelte @@ -34,11 +34,11 @@ let usuarioModificar: UserResponseDto | null = $state(null); - let search = $state(""); + let search = $state(''); type SortKey = 'username' | 'displayName' | 'postsCount' | 'createdAt'; - let sortBy = $state(null); - let sortDirection = $state<'asc' | 'desc'>('asc'); + let sortBy = $state(null); + let sortDirection = $state<'asc' | 'desc'>('asc'); function ordenarPor(campo: SortKey) { if (sortBy === campo) { @@ -50,52 +50,40 @@ } 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; + 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; + 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 === '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; - } + 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); - }) + 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 ""; // no ícono si no está ordenando por esa columna - return sortDirection === "asc" ? "↑" : "↓"; // ascendente / descendente + if (sortBy !== campo) return ''; + return sortDirection === 'asc' ? '↑' : '↓'; } - - //let usuariosFiltrados = $derived( - //usuarios.filter((u) => - // u.username.toLowerCase().startsWith(search.toLowerCase()) || - // u.displayName.toLowerCase().startsWith(search.toLowerCase()) - // ) - //); - - - - $effect(() => { if (!open) { usuarioCambioPass = null; @@ -114,27 +102,28 @@
-
- ordenarPor("username")} class="cursor-pointer select-none"> - Usuario {getSortIcon("username")} + ordenarPor('username')} class="cursor-pointer select-none"> + Usuario {getSortIcon('username')} - ordenarPor("displayName")} class="cursor-pointer select-none"> - Nombre {getSortIcon("displayName")} + ordenarPor('displayName')} class="cursor-pointer select-none"> + Nombre {getSortIcon('displayName')} - ordenarPor("postsCount")} class="cursor-pointer select-none"> - Cantidad de posts {getSortIcon("postsCount")} + ordenarPor('postsCount')} class="cursor-pointer select-none"> + Cantidad de posts {getSortIcon('postsCount')} - ordenarPor("createdAt")} class="cursor-pointer select-none"> - Fecha de Creacion {getSortIcon("createdAt")} + ordenarPor('createdAt')} class="cursor-pointer select-none"> + Fecha de Creacion {getSortIcon('createdAt')} Acciones diff --git a/src/lib/components/admin/ModificarUsuario.svelte b/src/lib/components/admin/ModificarUsuario.svelte index f2b77f7..567cb31 100644 --- a/src/lib/components/admin/ModificarUsuario.svelte +++ b/src/lib/components/admin/ModificarUsuario.svelte @@ -18,20 +18,22 @@ let { open = $bindable(), usuario = $bindable() }: Prop = $props(); let imagen = $state(!!usuario?.profileImageUrl); - let fallback = usuario?.displayName; let cargando = $state(false); let error = $state(''); + async function onsubmit(e: SubmitEvent) { e.preventDefault(); cargando = true; - let ret: { displayName: string } | string = await updateUsuario({ + const data = { id: usuario?.id || '', bio: usuario?.bio || '', displayName: usuario?.displayName || '', - oldImageUrl: usuario?.profileImageUrl || '', - profileImage: imagen - }); + profileImage: imagen, + profileImageUrl: imagen ? null : usuario?.profileImageUrl + }; + console.log(data); + let ret: { displayName: string } | string = await updateUsuario(data); if (typeof ret === 'string') { error = ret; } else { diff --git a/src/lib/components/ui/skeleton/index.ts b/src/lib/components/ui/skeleton/index.ts new file mode 100644 index 0000000..186db21 --- /dev/null +++ b/src/lib/components/ui/skeleton/index.ts @@ -0,0 +1,7 @@ +import Root from "./skeleton.svelte"; + +export { + Root, + // + Root as Skeleton, +}; diff --git a/src/lib/components/ui/skeleton/skeleton.svelte b/src/lib/components/ui/skeleton/skeleton.svelte new file mode 100644 index 0000000..c7e3d26 --- /dev/null +++ b/src/lib/components/ui/skeleton/skeleton.svelte @@ -0,0 +1,17 @@ + + +
diff --git a/src/lib/hooks/updateImagenDePerfil.ts b/src/lib/hooks/updateImagenDePerfil.ts new file mode 100644 index 0000000..6b28196 --- /dev/null +++ b/src/lib/hooks/updateImagenDePerfil.ts @@ -0,0 +1,7 @@ +export async function updateImagenDePerfil(){ + try{ + + }catch{ + + } +} diff --git a/src/lib/hooks/updateUsuario.ts b/src/lib/hooks/updateUsuario.ts index 2a2bfb3..aa6a820 100644 --- a/src/lib/hooks/updateUsuario.ts +++ b/src/lib/hooks/updateUsuario.ts @@ -4,19 +4,23 @@ import { get } from "svelte/store" export interface AdminUpdateUsuario { id:string, - displayName: string, - bio: string, + displayName: string | null, + bio: string | null, profileImage:boolean, - oldImageUrl:string + image:File, + profileImageUrl:string|null } -export async function updateUsuario(usuario: AdminUpdateUsuario) { +export async function updateUsuario(usuario: Partial) { const formData = new FormData(); - formData.append('displayName', usuario.displayName); - formData.append('bio', usuario.bio); - if (usuario.profileImage) { - formData.append('profileImageUrl', usuario.oldImageUrl); + if (usuario.displayName) formData.append('displayName', usuario.displayName); + if (usuario.bio) formData.append('bio', usuario.bio); + if (usuario.image) formData.append('profileImage', usuario.image); + if (usuario.profileImage){ + if (usuario.profileImageUrl) formData.append('profileImageUrl', 'null'); + }else{ + if (usuario.profileImageUrl) formData.append('profileImageUrl', usuario.profileImageUrl); } try { diff --git a/src/routes/(privado)/admin/+page.ts b/src/routes/(privado)/admin/+page.ts index 7d23379..84c37d1 100644 --- a/src/routes/(privado)/admin/+page.ts +++ b/src/routes/(privado)/admin/+page.ts @@ -14,7 +14,6 @@ export async function load({}) { Authorization: `Bearer ${get(sesionStore)?.accessToken}` } }); - if (response.status === 401) { throw redirect(302, '/'); } diff --git a/src/routes/[perfil]/+page.svelte b/src/routes/[perfil]/+page.svelte index 4ccc71e..3ebada1 100644 --- a/src/routes/[perfil]/+page.svelte +++ b/src/routes/[perfil]/+page.svelte @@ -25,6 +25,10 @@ import CardHeader from '@/components/ui/card/card-header.svelte'; import CardTitle from '@/components/ui/card/card-title.svelte'; import Badge from '@/components/ui/badge/badge.svelte'; + import Pen from '@lucide/svelte/icons/pen'; + import CardCargando from '@/components/CardCargando.svelte'; + import CardError from '@/components/CardError.svelte'; + import CardPerfil from '@/components/CardPerfil.svelte'; let { params } = $props(); @@ -79,27 +83,7 @@
- - -
- - - {page.data.displayName?.[0]?.toUpperCase() || ''} - -
-

- {page.data.displayName} -

-

- @{params.perfil} -

-

- {page.data.bio} -

- - +