Add main page sortable

Author: Maypher

frontend/admin/src/lib/components/layout/imageGridMainPage.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import Sortable, { type Options } from 'sortablejs';
+	import SortableList from '../input/SortableList.svelte';
+	import { isEqual } from 'lodash-es';
+	import getArrayDifference from '$lib/utilities/arrayOrder';
+	import graphql from '$lib/utilities/api';
+	import { success } from '$lib/utilities/toasts';
+
+	interface Props {
+		images: any[];
+	}
+
+	const { images }: Props = $props();
+
+	let originalOrder = $state(images.map((x: any) => `${x.mainImageConfig.id}`));
+	// svelte-ignore state_referenced_locally
+	let updatedElements = $state($state.snapshot(originalOrder));
+
+	let sortable: Sortable | undefined = $state();
+	const sortableOptions: Options = {
+		draggable: '.image-item',
+		chosenClass: 'item-chosen',
+		ghostClass: 'item-ghost',
+		animation: 150,
+		dataIdAttr: 'data-imageId',
+		onEnd: () => (updatedElements = sortable!.toArray())
+	};
+
+	let saveEnabled: boolean = $derived(!isEqual(originalOrder, updatedElements));
+
+	async function updateImagesOrder() {
+		const query = `
+			mutation updateMainPageConfig($id: Int!, $index: Int!) {
+				updateMainPageConfig(id: $id, index: $index) {
+					id
+				}
+			}
+		`;
+
+		const updates = getArrayDifference(originalOrder, updatedElements);
+
+		updates.forEach(async ({ id, newPos }) => {
+			await graphql(query, { id: parseInt(id), index: newPos });
+		});
+
+		originalOrder = updatedElements;
+
+		success('Orden actualizado con éxito.');
+	}
+</script>
+
+<SortableList bind:sortable sortableId="sortable-main-page" {sortableOptions}>
+	<div
+		id="sortable-main-page"
+		class="grid grid-cols-3 lg:grid-cols-5 gap-5 items-center w-full overflow-y-scroll overflow-x-hidden images-container"
+	>
+		{#each images as image (image.filename)}
+			<a
+				href={`/proyectos/${image.space.project.id}/ambientes/${image.space.id}/imagenes/${image.filename}`}
+				class="image-item transition-all border-vector-orange hover:border-4 relative"
+				data-imageId={image.mainImageConfig.id}
+			>
+				<img src={image.imageUrl} alt={image.altTextEs} />
+				<div
+					class="absolute top-0 left-0 text-yellow-500 bg-vector-black/70 text-2xl px-1 pb-0.5 flex gap-x-2 items-start"
+				>
+					{#if image.space.project.thumbnail?.filename === image.filename}
+						<div title="Imagen principal">⭐</div>
+					{/if}
+					{#if image.mainPage}
+						<div title="Imagen en página principal">🏠</div>
+					{/if}
+					{#if image.sculpture}
+						<div title="Imagen es una escultura">🖼️</div>
+					{/if}
+				</div>
+			</a>
+		{/each}
+		<div
+			id="cancel-images-main-page"
+			class={`${saveEnabled ? 'opacity-100' : 'opacity-0'} transition-all flex flex-col items-center gap-1`}
+		>
+			<button
+				class="w-fit text-xl p-1 rounded-md text-green-500 hover:bg-green-500 hover:text-black"
+				onclick={updateImagesOrder}
+			>
+				✓
+			</button>
+			<button
+				type="button"
+				onclick={() => {
+					sortable?.sort(originalOrder!);
+					updatedElements = originalOrder;
+
+					let buttons = document.getElementById('cancel-images-main-page')!;
+
+					sortable?.el.appendChild(buttons);
+				}}
+				class="w-fit text-xl text-red-500 p-1 rounded-md hover:text-black hover:bg-red-500 transition-colors cursor-pointer"
+			>
+				X
+			</button>
+		</div>
+	</div>
+</SortableList>

frontend/admin/src/routes/proyectos/paginaPrincipal/+page.svelte

@@ -1,13 +1,18 @@
 <script lang="ts">
 	import EditorLinks from '$lib/components/layout/editorLinks.svelte';
+	import ImageGridMainPage from '$lib/components/layout/imageGridMainPage.svelte';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
 </script>
 
-<div
-	class="size-full bg-black text-white h-[calc(100svh-5rem)] p-20 flex items-center flex-col gap-10"
->
-	<h1 class="text-2xl text-center">Editor de Página Principal</h1>
-	<EditorLinks
-		mobileUrl="/proyectos/paginaPrincipal/movil"
-		desktopUrl="/proyectos/paginaPrincipal/escritorio"
-	/>
+<div class="size-full bg-black text-white p-20 flex items-center flex-col gap-10">
+	<ImageGridMainPage images={data.mainPageData} />
+	<div>
+		<h1 class="text-2xl text-center">Editor de Página Principal</h1>
+		<EditorLinks
+			mobileUrl="/proyectos/paginaPrincipal/movil"
+			desktopUrl="/proyectos/paginaPrincipal/escritorio"
+		/>
+	</div>
 </div>

frontend/admin/src/routes/proyectos/paginaPrincipal/+page.ts

@@ -6,31 +6,11 @@ export const load = async ({ fetch }) => {
             mainPageImages {
                 id
                 filename
+                imageUrl
                 mainPage
                 mainImageConfig  {
                     id
-                    descriptionEs
-                    descriptionEn
-                    descriptionAlignment
-                    descriptionFont
-                    descriptionFontSize
-                    phoneConfig {
-                        descriptionPosition
-                        logoPosition
-                        overflow
-                        imageBorders {
-                            n
-                            s
-                            e
-                            w
-                        }
-                        logoBorders {
-                            n
-                            s
-                            e
-                            w
-                        }
-                    }
+                    index
                 }
                 space {
                     id