feat(calendar): a task's length is drawn, resizable, and editable
A timed task was drawn at a fixed half hour whatever its `duration_min` said, so a length the data model already carried was invisible and uneditable. Three parts: - The calendar draws a task at its real length — a quarter-hour floor so a zero-minute task is still grabbable, the day's end as the ceiling — instead of a flat thirty minutes. A ninety-minute task now looks like ninety minutes. - A grip along the foot of a timed task drags its length. Pointer events, not the HTML5 drag the body uses, and stopPropagation between them — otherwise making a task longer would pick it up and move it instead. It snaps to the quarter hour, follows the handle live, and writes once on release through a new store `resize`. Moving a task (the existing day/time drag) leaves the length alone. - The task drawer gains a length field beside the time — minutes, shown only with a time to hang it on, since a duration without a start is a length of nothing and the calendar has nowhere to draw it. So a length can be set off the calendar too. e2e: dragging the foot of a task makes it longer both on screen and in what the server stores, and the time does not move. Full Chromium suite green. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
e3eeb3037c
commit
4f25905d81
@@ -1225,6 +1225,69 @@ test('kalenderen viser Googles begivenheder over egne opgaver, og kun opgaven ka
|
||||
* thing this view was before anything was laid over it — and a Google account that
|
||||
* is not there must not take it down with it.
|
||||
*/
|
||||
test('en opgaves længde kan trækkes længere på kalenderen', async ({ page }) => {
|
||||
const trouble = watchForTrouble(page);
|
||||
await page.goto('/');
|
||||
|
||||
// A timed task today at ten, half an hour long. Today, so the week opens on it
|
||||
// without paging, and ten is inside the hours the grid draws by default.
|
||||
const today = await page.evaluate(() => {
|
||||
const d = new Date();
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||||
});
|
||||
const id = await page.evaluate(async (day) => {
|
||||
const r = await fetch('/api/v1/tasks', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: { 'Content-Type': 'application/json', 'Sec-Fetch-Site': 'same-origin' },
|
||||
body: JSON.stringify({
|
||||
content: 'Møde med Anders',
|
||||
due_date: day,
|
||||
due_time: '10:00',
|
||||
duration_min: 30
|
||||
})
|
||||
});
|
||||
return (await r.json()).id;
|
||||
}, today);
|
||||
|
||||
await page.goto('/kalender');
|
||||
await page.getByRole('button', { name: 'Uge', exact: true }).click();
|
||||
|
||||
const chip = page
|
||||
.locator(`[data-date="${today}"] .tevent.task`)
|
||||
.filter({ hasText: 'Møde med Anders' });
|
||||
await expect(chip).toBeVisible();
|
||||
const before = await chip.evaluate((el) => el.getBoundingClientRect().height);
|
||||
|
||||
// Drag the foot of the task down a good stretch. It should grow, both on screen
|
||||
// and in what the server stores — a resize is a change of length, not of time.
|
||||
const box = await chip.boundingBox();
|
||||
await page.mouse.move(box.x + box.width / 2, box.y + box.height - 2);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(box.x + box.width / 2, box.y + box.height + 130, { steps: 6 });
|
||||
await page.mouse.up();
|
||||
|
||||
await expect
|
||||
.poll(async () =>
|
||||
page.evaluate(async (tid) => {
|
||||
const r = await fetch('/api/v1/tasks/' + tid, {
|
||||
credentials: 'include',
|
||||
headers: { 'Sec-Fetch-Site': 'same-origin' }
|
||||
});
|
||||
return (await r.json()).duration_min;
|
||||
}, id)
|
||||
)
|
||||
.toBeGreaterThan(30);
|
||||
|
||||
// And the chip is taller than it was, so the length is something you can see.
|
||||
await expect.poll(async () => chip.evaluate((el) => el.getBoundingClientRect().height)).toBeGreaterThan(before);
|
||||
|
||||
// The time did not move: it is still a ten o'clock task.
|
||||
await expect(chip.locator('.at')).toHaveText('10:00');
|
||||
|
||||
expect(trouble).toEqual([]);
|
||||
});
|
||||
|
||||
test('kalenderen virker uden en forbundet Google-konto', async ({ page }) => {
|
||||
const trouble = watchForTrouble(page);
|
||||
await page.goto('/kalender');
|
||||
|
||||
Reference in New Issue
Block a user