|
|
|
|
@ -15,10 +15,13 @@
|
|
|
|
|
export let data: {
|
|
|
|
|
userId: string;
|
|
|
|
|
openTasks: Task[];
|
|
|
|
|
recentTasks: (Task & { completed?: boolean; completed_at?: string | null })[];
|
|
|
|
|
recentTasks: (Task & {
|
|
|
|
|
completed?: boolean;
|
|
|
|
|
completed_at?: string | null;
|
|
|
|
|
})[];
|
|
|
|
|
unassignedOpen: Task[];
|
|
|
|
|
groupNames: Record<string, string>;
|
|
|
|
|
order: 'due' | 'group';
|
|
|
|
|
order: "due" | "group";
|
|
|
|
|
page?: number | null;
|
|
|
|
|
hasMore?: boolean | null;
|
|
|
|
|
};
|
|
|
|
|
@ -26,9 +29,12 @@
|
|
|
|
|
// Estado local para permitir actualización sin recargar ni perder scroll
|
|
|
|
|
let openTasks: Task[] = [...data.openTasks];
|
|
|
|
|
let unassignedOpen: Task[] = [...data.unassignedOpen];
|
|
|
|
|
let recentTasks: (Task & { completed?: boolean; completed_at?: string | null })[] = [...data.recentTasks];
|
|
|
|
|
let recentTasks: (Task & {
|
|
|
|
|
completed?: boolean;
|
|
|
|
|
completed_at?: string | null;
|
|
|
|
|
})[] = [...data.recentTasks];
|
|
|
|
|
|
|
|
|
|
function buildQuery(params: { order?: 'due' | 'group'; page?: number }) {
|
|
|
|
|
function buildQuery(params: { order?: "due" | "group"; page?: number }) {
|
|
|
|
|
const sp = new URLSearchParams();
|
|
|
|
|
if (params.order) sp.set("order", params.order);
|
|
|
|
|
if (params.page && params.page > 1) sp.set("page", String(params.page));
|
|
|
|
|
@ -37,7 +43,8 @@
|
|
|
|
|
|
|
|
|
|
function sortByDue(items: Task[]): Task[] {
|
|
|
|
|
return [...items].sort((a, b) => {
|
|
|
|
|
const ad = a.due_date, bd = b.due_date;
|
|
|
|
|
const ad = a.due_date,
|
|
|
|
|
bd = b.due_date;
|
|
|
|
|
if (ad == null && bd == null) return a.id - b.id;
|
|
|
|
|
if (ad == null) return 1;
|
|
|
|
|
if (bd == null) return -1;
|
|
|
|
|
@ -47,7 +54,9 @@
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function groupByGroup(items: Task[]): { id: string; name: string; tasks: Task[] }[] {
|
|
|
|
|
function groupByGroup(
|
|
|
|
|
items: Task[],
|
|
|
|
|
): { id: string; name: string; tasks: Task[] }[] {
|
|
|
|
|
const map = new Map<string, Task[]>();
|
|
|
|
|
for (const it of items) {
|
|
|
|
|
const gid = it.group_id ? String(it.group_id) : "";
|
|
|
|
|
@ -56,8 +65,8 @@
|
|
|
|
|
}
|
|
|
|
|
const groups = Array.from(map.entries()).map(([gid, tasks]) => ({
|
|
|
|
|
id: gid,
|
|
|
|
|
name: gid ? (data.groupNames[gid] || gid) : "Personal",
|
|
|
|
|
tasks
|
|
|
|
|
name: gid ? data.groupNames[gid] || gid : "Personal",
|
|
|
|
|
tasks,
|
|
|
|
|
}));
|
|
|
|
|
// Mantener el orden provisto por el servidor (ya ordenado alfabéticamente con "Personal" al final)
|
|
|
|
|
return groups;
|
|
|
|
|
@ -69,7 +78,13 @@
|
|
|
|
|
queueMicrotask(() => window.scrollTo({ top: y }));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updateTaskInLists(detail: { id: number; action: string; patch: Partial<Task & { completed?: boolean; completed_at?: string | null }> }) {
|
|
|
|
|
function updateTaskInLists(detail: {
|
|
|
|
|
id: number;
|
|
|
|
|
action: string;
|
|
|
|
|
patch: Partial<
|
|
|
|
|
Task & { completed?: boolean; completed_at?: string | null }
|
|
|
|
|
>;
|
|
|
|
|
}) {
|
|
|
|
|
const { id, action, patch } = detail;
|
|
|
|
|
|
|
|
|
|
const patchIn = (arr: Task[]) => {
|
|
|
|
|
@ -81,7 +96,7 @@
|
|
|
|
|
return false;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if (action === 'complete') {
|
|
|
|
|
if (action === "complete") {
|
|
|
|
|
maintainScrollWhile(() => {
|
|
|
|
|
let moved = false;
|
|
|
|
|
let idx = unassignedOpen.findIndex((t) => t.id === id);
|
|
|
|
|
@ -106,7 +121,7 @@
|
|
|
|
|
unassignedOpen = [...unassignedOpen];
|
|
|
|
|
recentTasks = [...recentTasks];
|
|
|
|
|
});
|
|
|
|
|
} else if (action === 'uncomplete') {
|
|
|
|
|
} else if (action === "uncomplete") {
|
|
|
|
|
maintainScrollWhile(() => {
|
|
|
|
|
const idx = recentTasks.findIndex((t) => t.id === id);
|
|
|
|
|
if (idx >= 0) {
|
|
|
|
|
@ -119,7 +134,7 @@
|
|
|
|
|
openTasks = [...openTasks];
|
|
|
|
|
recentTasks = [...recentTasks];
|
|
|
|
|
});
|
|
|
|
|
} else if (action === 'claim') {
|
|
|
|
|
} else if (action === "claim") {
|
|
|
|
|
maintainScrollWhile(() => {
|
|
|
|
|
const idx = unassignedOpen.findIndex((t) => t.id === id);
|
|
|
|
|
if (idx >= 0) {
|
|
|
|
|
@ -136,7 +151,7 @@
|
|
|
|
|
openTasks = [...openTasks];
|
|
|
|
|
unassignedOpen = [...unassignedOpen];
|
|
|
|
|
});
|
|
|
|
|
} else if (action === 'unassign') {
|
|
|
|
|
} else if (action === "unassign") {
|
|
|
|
|
maintainScrollWhile(() => {
|
|
|
|
|
if (!patchIn(openTasks)) patchIn(unassignedOpen);
|
|
|
|
|
// Si quedó sin responsables, mover a "sin responsable"
|
|
|
|
|
@ -172,23 +187,32 @@
|
|
|
|
|
<div class="order-toggle">
|
|
|
|
|
<span>Orden:</span>
|
|
|
|
|
<a
|
|
|
|
|
class:active={data.order === 'due'}
|
|
|
|
|
href={`/app?${buildQuery({ order: 'due', page: data.page ?? 1 })}`}>Fecha</a
|
|
|
|
|
class:active={data.order === "due"}
|
|
|
|
|
href={`/app?${buildQuery({ order: "due", page: data.page ?? 1 })}`}>Fecha</a
|
|
|
|
|
>
|
|
|
|
|
<a
|
|
|
|
|
class:active={data.order === 'group'}
|
|
|
|
|
href={`/app?${buildQuery({ order: 'group', page: data.page ?? 1 })}`}>Grupo</a
|
|
|
|
|
class:active={data.order === "group"}
|
|
|
|
|
href={`/app?${buildQuery({ order: "group", page: data.page ?? 1 })}`}
|
|
|
|
|
>Grupo</a
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h2 class="section-title">Mis tareas (abiertas)</h2>
|
|
|
|
|
<h2 class="section-title">Mis tareas</h2>
|
|
|
|
|
{#if openTasks.length === 0}
|
|
|
|
|
<p>No tienes tareas asignadas. Crea o reclama una para empezar.</p>
|
|
|
|
|
{:else}
|
|
|
|
|
<Card>
|
|
|
|
|
<ul class="list">
|
|
|
|
|
{#each openTasks as t (t.id)}
|
|
|
|
|
<TaskItem {...t} currentUserId={data.userId} groupName={t.group_id ? (data.groupNames[t.group_id] || t.group_id) : 'Personal'} groupId={t.group_id} on:changed={(e) => updateTaskInLists(e.detail)} />
|
|
|
|
|
<TaskItem
|
|
|
|
|
{...t}
|
|
|
|
|
currentUserId={data.userId}
|
|
|
|
|
groupName={t.group_id
|
|
|
|
|
? data.groupNames[t.group_id] || t.group_id
|
|
|
|
|
: "Personal"}
|
|
|
|
|
groupId={t.group_id}
|
|
|
|
|
on:changed={(e) => updateTaskInLists(e.detail)}
|
|
|
|
|
/>
|
|
|
|
|
{/each}
|
|
|
|
|
</ul>
|
|
|
|
|
</Card>
|
|
|
|
|
@ -196,35 +220,54 @@
|
|
|
|
|
|
|
|
|
|
{#if (data.page ?? 1) > 1 || data.hasMore}
|
|
|
|
|
<Pagination
|
|
|
|
|
prevHref={(data.page ?? 1) > 1 ? `/app?${buildQuery({ order: data.order, page: (data.page ?? 1) - 1 })}` : null}
|
|
|
|
|
nextHref={data.hasMore ? `/app?${buildQuery({ order: data.order, page: (data.page ?? 1) + 1 })}` : null}
|
|
|
|
|
prevHref={(data.page ?? 1) > 1
|
|
|
|
|
? `/app?${buildQuery({ order: data.order, page: (data.page ?? 1) - 1 })}`
|
|
|
|
|
: null}
|
|
|
|
|
nextHref={data.hasMore
|
|
|
|
|
? `/app?${buildQuery({ order: data.order, page: (data.page ?? 1) + 1 })}`
|
|
|
|
|
: null}
|
|
|
|
|
/>
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
<h2 class="section-title">Sin responsable de mis grupos</h2>
|
|
|
|
|
{#if unassignedOpen.length === 0}
|
|
|
|
|
<p>No hay tareas sin responsable en tus grupos. Crea una nueva o invita a tus compañeros.</p>
|
|
|
|
|
{:else}
|
|
|
|
|
{#if data.order === 'group'}
|
|
|
|
|
<p>
|
|
|
|
|
No hay tareas sin responsable en tus grupos. Crea una nueva o invita a
|
|
|
|
|
alguien.
|
|
|
|
|
</p>
|
|
|
|
|
{:else if data.order === "group"}
|
|
|
|
|
{#each groupByGroup(unassignedOpen) as g (g.id)}
|
|
|
|
|
<h3 class="group-subtitle">{g.name}</h3>
|
|
|
|
|
<Card>
|
|
|
|
|
<ul class="list">
|
|
|
|
|
{#each g.tasks as t (t.id)}
|
|
|
|
|
<TaskItem {...t} currentUserId={data.userId} groupName={g.name} groupId={t.group_id} on:changed={(e) => updateTaskInLists(e.detail)} />
|
|
|
|
|
<TaskItem
|
|
|
|
|
{...t}
|
|
|
|
|
currentUserId={data.userId}
|
|
|
|
|
groupName={g.name}
|
|
|
|
|
groupId={t.group_id}
|
|
|
|
|
on:changed={(e) => updateTaskInLists(e.detail)}
|
|
|
|
|
/>
|
|
|
|
|
{/each}
|
|
|
|
|
</ul>
|
|
|
|
|
</Card>
|
|
|
|
|
{/each}
|
|
|
|
|
{:else}
|
|
|
|
|
{:else}
|
|
|
|
|
<Card>
|
|
|
|
|
<ul class="list">
|
|
|
|
|
{#each unassignedOpen as t (t.id)}
|
|
|
|
|
<TaskItem {...t} currentUserId={data.userId} groupName={t.group_id ? (data.groupNames[t.group_id] || t.group_id) : 'Personal'} groupId={t.group_id} on:changed={(e) => updateTaskInLists(e.detail)} />
|
|
|
|
|
<TaskItem
|
|
|
|
|
{...t}
|
|
|
|
|
currentUserId={data.userId}
|
|
|
|
|
groupName={t.group_id
|
|
|
|
|
? data.groupNames[t.group_id] || t.group_id
|
|
|
|
|
: "Personal"}
|
|
|
|
|
groupId={t.group_id}
|
|
|
|
|
on:changed={(e) => updateTaskInLists(e.detail)}
|
|
|
|
|
/>
|
|
|
|
|
{/each}
|
|
|
|
|
</ul>
|
|
|
|
|
</Card>
|
|
|
|
|
{/if}
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
<h2 class="section-title">Completadas (últimas 24 h)</h2>
|
|
|
|
|
@ -240,7 +283,9 @@
|
|
|
|
|
groupId={t.group_id}
|
|
|
|
|
completed={true}
|
|
|
|
|
completed_at={t.completed_at ?? null}
|
|
|
|
|
groupName={t.group_id ? (data.groupNames[t.group_id] || t.group_id) : 'Personal'}
|
|
|
|
|
groupName={t.group_id
|
|
|
|
|
? data.groupNames[t.group_id] || t.group_id
|
|
|
|
|
: "Personal"}
|
|
|
|
|
on:changed={(e) => updateTaskInLists(e.detail)}
|
|
|
|
|
/>
|
|
|
|
|
{/each}
|
|
|
|
|
@ -248,10 +293,6 @@
|
|
|
|
|
</Card>
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
<p class="footnote">
|
|
|
|
|
La cookie de sesión se renueva con cada visita (idle timeout).
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.subtle {
|
|
|
|
|
color: var(--color-text-muted);
|
|
|
|
|
|