Compare commits
6 commits
8b8e6622a9
...
6eb44d2531
| Author | SHA1 | Date | |
|---|---|---|---|
| 6eb44d2531 | |||
| 93d2f4ebd6 | |||
| 7bc7ad207b | |||
| 2c38b01562 | |||
| ccc78bf38f | |||
| ea74ce545e |
13 changed files with 907 additions and 268 deletions
|
|
@ -249,6 +249,8 @@ class ScheduleController extends Controller
|
|||
|
||||
return [
|
||||
'id' => $assignment->getId(),
|
||||
'scheduledDate' => $assignment->getScheduledDate()
|
||||
->format('Y-m-d'),
|
||||
'schedule' => [
|
||||
'id' => $assignmentForDate->getScheduleId(),
|
||||
'set' => [
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ class EloquentScheduleRepository implements ScheduleRepository
|
|||
return $schedules;
|
||||
}
|
||||
|
||||
public function findAssignmentsForUserOnDate(
|
||||
public function findIncompleteAssignmentsForUserDueOnOrBefore(
|
||||
User $user,
|
||||
DateTimeImmutable $date,
|
||||
): array {
|
||||
|
|
@ -76,11 +76,14 @@ class EloquentScheduleRepository implements ScheduleRepository
|
|||
'schedule_assignments.schedule_id',
|
||||
)
|
||||
->where('schedules.user_id', $user->getId())
|
||||
->where('schedule_assignments.scheduled_date', $date->format(
|
||||
'Y-m-d',
|
||||
))
|
||||
->where(
|
||||
'schedule_assignments.scheduled_date',
|
||||
'<=',
|
||||
$date->format('Y-m-d'),
|
||||
)
|
||||
->whereNull('schedule_assignments.completed_at')
|
||||
->with('schedule')
|
||||
->orderBy('schedule_assignments.scheduled_date')
|
||||
->orderByDesc('schedules.id')
|
||||
->orderBy('schedule_assignments.position')
|
||||
->orderBy('schedule_assignments.id')
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ interface ScheduleRepository
|
|||
/**
|
||||
* @return list<AssignmentForDate>
|
||||
*/
|
||||
public function findAssignmentsForUserOnDate(
|
||||
public function findIncompleteAssignmentsForUserDueOnOrBefore(
|
||||
User $user,
|
||||
DateTimeImmutable $date,
|
||||
): array;
|
||||
|
|
|
|||
|
|
@ -22,10 +22,11 @@ class ListAssignmentsForDate
|
|||
{
|
||||
$date = $this->parseDate($request->date);
|
||||
|
||||
return $this->scheduleRepository->findAssignmentsForUserOnDate(
|
||||
$request->user,
|
||||
$date,
|
||||
);
|
||||
return $this->scheduleRepository
|
||||
->findIncompleteAssignmentsForUserDueOnOrBefore(
|
||||
$request->user,
|
||||
$date,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ class FakeScheduleRepository implements ScheduleRepository
|
|||
}, array_values($schedules));
|
||||
}
|
||||
|
||||
public function findAssignmentsForUserOnDate(
|
||||
public function findIncompleteAssignmentsForUserDueOnOrBefore(
|
||||
User $user,
|
||||
DateTimeImmutable $date,
|
||||
): array {
|
||||
|
|
@ -86,8 +86,7 @@ class FakeScheduleRepository implements ScheduleRepository
|
|||
|
||||
foreach ($this->findAllForUser($user) as $schedule) {
|
||||
foreach ($schedule->getAssignments() as $assignment) {
|
||||
if ($assignment->getScheduledDate()->format('Y-m-d')
|
||||
!== $date->format('Y-m-d')
|
||||
if ($assignment->getScheduledDate() > $date
|
||||
|| $assignment->getCompletedAt() !== null
|
||||
) {
|
||||
continue;
|
||||
|
|
@ -101,6 +100,37 @@ class FakeScheduleRepository implements ScheduleRepository
|
|||
}
|
||||
}
|
||||
|
||||
usort(
|
||||
$assignments,
|
||||
function (
|
||||
AssignmentForDate $first,
|
||||
AssignmentForDate $second,
|
||||
): int {
|
||||
$firstAssignment = $first->getAssignment();
|
||||
$secondAssignment = $second->getAssignment();
|
||||
$dateComparison = $firstAssignment->getScheduledDate()
|
||||
<=> $secondAssignment->getScheduledDate();
|
||||
if ($dateComparison !== 0) {
|
||||
return $dateComparison;
|
||||
}
|
||||
|
||||
$scheduleComparison = $second->getScheduleId()
|
||||
<=> $first->getScheduleId();
|
||||
if ($scheduleComparison !== 0) {
|
||||
return $scheduleComparison;
|
||||
}
|
||||
|
||||
$positionComparison = $firstAssignment->getPosition()
|
||||
<=> $secondAssignment->getPosition();
|
||||
if ($positionComparison !== 0) {
|
||||
return $positionComparison;
|
||||
}
|
||||
|
||||
return $firstAssignment->getId()
|
||||
<=> $secondAssignment->getId();
|
||||
},
|
||||
);
|
||||
|
||||
return $assignments;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -225,7 +225,7 @@ class ScheduleEndpointTest extends TestCase
|
|||
]);
|
||||
}
|
||||
|
||||
public function test_it_lists_the_users_assignments_for_a_date(): void
|
||||
public function test_it_lists_the_users_assignments_due_through_a_date(): void
|
||||
{
|
||||
$user = $this->createUser('reader@example.com');
|
||||
$otherUser = $this->createUser('other@example.com');
|
||||
|
|
@ -255,8 +255,8 @@ class ScheduleEndpointTest extends TestCase
|
|||
$this->credentialedPost('/api/schedules', [
|
||||
'setId' => $olderSet->getId(),
|
||||
'levelId' => $olderLevel->getId(),
|
||||
'startDate' => '2026-08-15',
|
||||
'targetDate' => '2026-08-15',
|
||||
'startDate' => '2026-08-14',
|
||||
'targetDate' => '2026-08-14',
|
||||
])->assertCreated();
|
||||
$this->credentialedPost('/api/schedules', [
|
||||
'setId' => $newerSet->getId(),
|
||||
|
|
@ -286,22 +286,9 @@ class ScheduleEndpointTest extends TestCase
|
|||
->assertExactJson([
|
||||
'date' => '2026-08-15',
|
||||
'assignments' => [
|
||||
[
|
||||
'id' => 3,
|
||||
'schedule' => [
|
||||
'id' => 2,
|
||||
'set' => [
|
||||
'name' => 'Newer course',
|
||||
],
|
||||
],
|
||||
'element' => [
|
||||
'name' => 'Only chapter',
|
||||
'kind' => 'chapter',
|
||||
'path' => ['Only chapter'],
|
||||
],
|
||||
],
|
||||
[
|
||||
'id' => 1,
|
||||
'scheduledDate' => '2026-08-14',
|
||||
'schedule' => [
|
||||
'id' => 1,
|
||||
'set' => [
|
||||
|
|
@ -316,6 +303,7 @@ class ScheduleEndpointTest extends TestCase
|
|||
],
|
||||
[
|
||||
'id' => 2,
|
||||
'scheduledDate' => '2026-08-14',
|
||||
'schedule' => [
|
||||
'id' => 1,
|
||||
'set' => [
|
||||
|
|
@ -328,6 +316,21 @@ class ScheduleEndpointTest extends TestCase
|
|||
'path' => ['Second lesson'],
|
||||
],
|
||||
],
|
||||
[
|
||||
'id' => 3,
|
||||
'scheduledDate' => '2026-08-15',
|
||||
'schedule' => [
|
||||
'id' => 2,
|
||||
'set' => [
|
||||
'name' => 'Newer course',
|
||||
],
|
||||
],
|
||||
'element' => [
|
||||
'name' => 'Only chapter',
|
||||
'kind' => 'chapter',
|
||||
'path' => ['Only chapter'],
|
||||
],
|
||||
],
|
||||
],
|
||||
]);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ use Tests\Fakes\FakeScheduleRepository;
|
|||
|
||||
class ListAssignmentsForDateTest extends TestCase
|
||||
{
|
||||
public function test_it_lists_the_users_assignments_for_the_date(): void
|
||||
public function test_it_lists_the_users_assignments_due_through_the_date(): void
|
||||
{
|
||||
$user = $this->user(1, 'reader@example.com');
|
||||
$otherUser = $this->user(2, 'other@example.com');
|
||||
|
|
@ -25,7 +25,7 @@ class ListAssignmentsForDateTest extends TestCase
|
|||
$olderSchedule = $repository->create($this->schedule(
|
||||
user: $user,
|
||||
setName: 'Older plan',
|
||||
date: '2026-08-15',
|
||||
date: '2026-08-14',
|
||||
assignmentNames: ['First', 'Second'],
|
||||
));
|
||||
$repository->create($this->schedule(
|
||||
|
|
@ -37,7 +37,7 @@ class ListAssignmentsForDateTest extends TestCase
|
|||
$repository->create($this->schedule(
|
||||
user: $otherUser,
|
||||
setName: 'Private plan',
|
||||
date: '2026-08-15',
|
||||
date: '2026-08-13',
|
||||
assignmentNames: ['Hidden'],
|
||||
));
|
||||
$repository->create($this->schedule(
|
||||
|
|
@ -61,18 +61,18 @@ class ListAssignmentsForDateTest extends TestCase
|
|||
);
|
||||
|
||||
$this->assertSame(
|
||||
['Newer plan', 'Older plan'],
|
||||
['Older plan', 'Newer plan'],
|
||||
array_map(function ($assignment): string {
|
||||
return $assignment->getSetName();
|
||||
}, $assignments),
|
||||
);
|
||||
$this->assertSame(
|
||||
['Third', 'Second'],
|
||||
['Second', 'Third'],
|
||||
array_map(function ($assignment): string {
|
||||
return $assignment->getAssignment()->getName();
|
||||
}, $assignments),
|
||||
);
|
||||
$this->assertSame(2, $assignments[0]->getScheduleId());
|
||||
$this->assertSame(1, $assignments[0]->getScheduleId());
|
||||
}
|
||||
|
||||
public function test_it_rejects_a_missing_date(): void
|
||||
|
|
|
|||
|
|
@ -121,6 +121,55 @@ const completedScheduleDetail = {
|
|||
},
|
||||
}
|
||||
|
||||
const splitScheduleDetail = {
|
||||
schedule: {
|
||||
...scheduleDetail.schedule,
|
||||
targetDate: '2026-08-13',
|
||||
assignmentCount: 4,
|
||||
days: [
|
||||
scheduleDetail.schedule.days[0],
|
||||
scheduleDetail.schedule.days[1],
|
||||
{
|
||||
date: '2026-08-12',
|
||||
assignments: [
|
||||
{
|
||||
id: 2,
|
||||
completedAt: '2026-08-11T08:30:00+00:00',
|
||||
element: {
|
||||
name: 'Chapter 1',
|
||||
kind: 'Chapter_sections-v2',
|
||||
path: ['Exodus', 'Shemot', 'Chapter 1'],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
completedAt: null,
|
||||
element: {
|
||||
name: 'Chapter 1',
|
||||
kind: 'Chapter_sections-v2',
|
||||
path: ['Leviticus', 'Vayikra', 'Chapter 1'],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '2026-08-13',
|
||||
assignments: [
|
||||
{
|
||||
id: 4,
|
||||
completedAt: '2026-08-11T09:45:00+00:00',
|
||||
element: {
|
||||
name: 'Chapter 1',
|
||||
kind: 'Chapter_sections-v2',
|
||||
path: ['Numbers', 'Bamidbar', 'Chapter 1'],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
function interceptAuthenticatedUser(): void {
|
||||
cy.intercept('GET', '**/api/me', {
|
||||
statusCode: 200,
|
||||
|
|
@ -159,9 +208,12 @@ describe('set scheduling', () => {
|
|||
cy.location('pathname').should('equal', '/sets/41/schedules/new')
|
||||
cy.get('h1').should('have.text', 'Schedule Bible')
|
||||
cy.get('#schedule-level option').then(($options) => {
|
||||
expect([...$options].map((option) => option.textContent?.trim())).to.deep.equal(
|
||||
['Choose a level', 'book (2)', 'portion (2)', 'Chapter_sections-v2 (2)'],
|
||||
)
|
||||
expect([...$options].map((option) => option.textContent?.trim())).to.deep.equal([
|
||||
'Choose a level',
|
||||
'book (2)',
|
||||
'portion (2)',
|
||||
'Chapter_sections-v2 (2)',
|
||||
])
|
||||
})
|
||||
cy.get('#schedule-level').select('3')
|
||||
cy.get('#schedule-start-date').type('2026-08-10')
|
||||
|
|
@ -184,6 +236,12 @@ describe('set scheduling', () => {
|
|||
'contain.text',
|
||||
'Exodus / Shemot / Chapter 1',
|
||||
)
|
||||
cy.get('[data-assignment-section="completed"]').should('not.have.attr', 'open')
|
||||
cy.get('[data-assignment-section="completed"] summary').click()
|
||||
cy.get('[data-assignment-section="completed"]').should(
|
||||
'contain.text',
|
||||
'No assignments completed yet.',
|
||||
)
|
||||
})
|
||||
|
||||
it('validates the schedule form before submitting', () => {
|
||||
|
|
@ -248,6 +306,72 @@ describe('set scheduling', () => {
|
|||
cy.get('h1').should('have.text', 'Schedule not found')
|
||||
})
|
||||
|
||||
it('splits assignments by progress while preserving the schedule timeline', () => {
|
||||
cy.clock(new Date(2026, 7, 11, 12).getTime(), ['Date'])
|
||||
cy.intercept('GET', '**/api/schedules/73', {
|
||||
statusCode: 200,
|
||||
body: splitScheduleDetail,
|
||||
}).as('schedule')
|
||||
|
||||
cy.visit('/schedules/73')
|
||||
cy.wait('@me')
|
||||
cy.wait('@schedule')
|
||||
|
||||
cy.get('[data-assignment-section="remaining"]')
|
||||
.should('have.attr', 'data-assignment-count', '2')
|
||||
.within(() => {
|
||||
cy.get('h2').should('have.text', 'Remaining')
|
||||
cy.get('[data-schedule-day]').then(($days) => {
|
||||
expect([...$days].map((day) => day.getAttribute('data-schedule-date'))).to.deep.equal([
|
||||
'2026-08-10',
|
||||
'2026-08-11',
|
||||
'2026-08-12',
|
||||
])
|
||||
})
|
||||
cy.get('[data-schedule-date="2026-08-10"]')
|
||||
.should('contain.text', 'Overdue')
|
||||
.and('contain.text', 'Genesis / Creation / Chapter 1')
|
||||
cy.get('[data-schedule-date="2026-08-11"]')
|
||||
.should('contain.text', 'Rest day')
|
||||
.and('not.contain.text', 'Overdue')
|
||||
cy.get('[data-schedule-date="2026-08-12"]')
|
||||
.should('contain.text', 'Leviticus / Vayikra / Chapter 1')
|
||||
.and('not.contain.text', 'Exodus / Shemot / Chapter 1')
|
||||
cy.get('[data-schedule-date="2026-08-13"]').should('not.exist')
|
||||
})
|
||||
|
||||
cy.get('[data-assignment-section="completed"]').should(
|
||||
'have.attr',
|
||||
'data-assignment-count',
|
||||
'2',
|
||||
)
|
||||
cy.get('[data-assignment-section="completed"]').should('not.have.attr', 'open')
|
||||
cy.get('[data-assignment-section="completed"]').within(() => {
|
||||
cy.get('summary').should('contain.text', 'Completed').click()
|
||||
cy.get('[data-schedule-day]').then(($days) => {
|
||||
expect([...$days].map((day) => day.getAttribute('data-schedule-date'))).to.deep.equal([
|
||||
'2026-08-12',
|
||||
'2026-08-13',
|
||||
])
|
||||
})
|
||||
cy.get('[data-schedule-date="2026-08-12"]')
|
||||
.should('contain.text', 'Exodus / Shemot / Chapter 1')
|
||||
.and('not.contain.text', 'Leviticus / Vayikra / Chapter 1')
|
||||
cy.get('[data-schedule-date="2026-08-13"]').should(
|
||||
'contain.text',
|
||||
'Numbers / Bamidbar / Chapter 1',
|
||||
)
|
||||
cy.contains('Rest day').should('not.exist')
|
||||
})
|
||||
|
||||
cy.viewport(375, 667)
|
||||
cy.document().then((document) => {
|
||||
expect(document.documentElement.scrollWidth).to.be.at.most(
|
||||
document.documentElement.clientWidth,
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
it('completes and reopens assignments from the schedule', () => {
|
||||
const completedAt = '2026-08-15T12:30:00+00:00'
|
||||
cy.intercept('GET', '**/api/schedules/73', {
|
||||
|
|
@ -278,33 +402,79 @@ describe('set scheduling', () => {
|
|||
cy.wait('@me')
|
||||
cy.wait('@schedule')
|
||||
|
||||
cy.get('[data-schedule-assignment="2"]').within(() => {
|
||||
cy.get('[data-assignment-section="completed"] summary').click()
|
||||
cy.get('[data-assignment-section="completed"] [data-schedule-assignment="2"]').within(() => {
|
||||
cy.contains('Completed').should('be.visible')
|
||||
cy.get('time')
|
||||
.should('have.attr', 'datetime', '2026-08-15T09:30:00+00:00')
|
||||
.and('have.text', formatCompletionTime('2026-08-15T09:30:00+00:00'))
|
||||
})
|
||||
|
||||
cy.get('[data-assignment-section="remaining"] [data-schedule-assignment="1"]').within(() => {
|
||||
cy.contains('button', 'Mark complete').click()
|
||||
cy.contains('button', 'Saving...').should('be.disabled')
|
||||
})
|
||||
cy.wait('@completeAssignment')
|
||||
cy.get('[data-assignment-section="remaining"]')
|
||||
.should('have.attr', 'data-assignment-count', '0')
|
||||
.and('contain.text', 'All assignments are complete.')
|
||||
.and('contain.text', 'Rest day')
|
||||
cy.get('[data-assignment-section="completed"]')
|
||||
.should('have.attr', 'data-assignment-count', '2')
|
||||
.within(() => {
|
||||
cy.get('[data-schedule-assignment="1"]').within(() => {
|
||||
cy.contains('Completed').should('be.visible')
|
||||
cy.get('time')
|
||||
.should('have.attr', 'datetime', completedAt)
|
||||
.and('have.text', formatCompletionTime(completedAt))
|
||||
cy.contains('button', 'Reopen').should('be.enabled')
|
||||
})
|
||||
})
|
||||
cy.get('[data-completion-announcement]').should('have.text', 'Assignment moved to Completed.')
|
||||
|
||||
cy.get('[data-assignment-section="completed"] [data-schedule-assignment="2"]').within(() => {
|
||||
cy.contains('button', 'Reopen').click()
|
||||
})
|
||||
cy.wait('@reopenAssignment')
|
||||
cy.get('[data-schedule-assignment="2"]')
|
||||
cy.get('[data-assignment-section="remaining"]')
|
||||
.should('have.attr', 'data-assignment-count', '1')
|
||||
.find('[data-schedule-assignment="2"]')
|
||||
.should('contain.text', 'Not completed')
|
||||
.and('not.contain.text', 'Completed')
|
||||
.within(() => {
|
||||
cy.contains('button', 'Mark complete').should('be.enabled')
|
||||
})
|
||||
cy.get('[data-assignment-section="completed"]')
|
||||
.should('have.attr', 'data-assignment-count', '1')
|
||||
.find('[data-schedule-assignment="2"]')
|
||||
.should('not.exist')
|
||||
cy.get('[data-completion-announcement]').should('have.text', 'Assignment moved to Remaining.')
|
||||
})
|
||||
|
||||
cy.get('[data-schedule-assignment="1"]').within(() => {
|
||||
cy.contains('button', 'Mark complete').click()
|
||||
cy.contains('button', 'Saving...').should('be.disabled')
|
||||
})
|
||||
it('keeps an assignment in place when a completion request fails', () => {
|
||||
cy.intercept('GET', '**/api/schedules/73', {
|
||||
statusCode: 200,
|
||||
body: scheduleDetail,
|
||||
}).as('schedule')
|
||||
cy.intercept('PATCH', '**/api/assignments/1', {
|
||||
statusCode: 500,
|
||||
}).as('completeAssignment')
|
||||
|
||||
cy.visit('/schedules/73')
|
||||
cy.wait('@me')
|
||||
cy.wait('@schedule')
|
||||
|
||||
cy.get('[data-assignment-section="remaining"] [data-schedule-assignment="1"]')
|
||||
.contains('button', 'Mark complete')
|
||||
.click()
|
||||
cy.wait('@completeAssignment')
|
||||
cy.get('[data-schedule-assignment="1"]').within(() => {
|
||||
cy.contains('Completed').should('be.visible')
|
||||
cy.get('time')
|
||||
.should('have.attr', 'datetime', completedAt)
|
||||
.and('have.text', formatCompletionTime(completedAt))
|
||||
cy.contains('button', 'Reopen').should('be.enabled')
|
||||
})
|
||||
|
||||
cy.get('[data-assignment-section="remaining"] [data-schedule-assignment="1"]')
|
||||
.should('be.visible')
|
||||
.and('contain.text', "We couldn't update this assignment.")
|
||||
cy.get('[data-assignment-section="completed"]')
|
||||
.find('[data-schedule-assignment="1"]')
|
||||
.should('not.exist')
|
||||
})
|
||||
|
||||
it('lists the users schedules on the dashboard', () => {
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ describe("today's assignments", () => {
|
|||
assignments: [
|
||||
{
|
||||
id: 12,
|
||||
scheduledDate: '2026-08-13',
|
||||
schedule: {
|
||||
id: 73,
|
||||
set: { name: 'Bible' },
|
||||
|
|
@ -48,6 +49,7 @@ describe("today's assignments", () => {
|
|||
},
|
||||
{
|
||||
id: 13,
|
||||
scheduledDate: browserToday,
|
||||
schedule: {
|
||||
id: 81,
|
||||
set: { name: 'Course' },
|
||||
|
|
@ -77,6 +79,16 @@ describe("today's assignments", () => {
|
|||
'have.length',
|
||||
2,
|
||||
)
|
||||
cy.get('[data-today-assignment]')
|
||||
.first()
|
||||
.should('have.attr', 'data-today-assignment', '12')
|
||||
cy.get('[data-today-assignment="12"] .today-assignment__overdue').should(
|
||||
'have.text',
|
||||
'Overdue · Due Aug 13, 2026',
|
||||
)
|
||||
cy.get('[data-today-assignment="13"] .today-assignment__overdue').should(
|
||||
'not.exist',
|
||||
)
|
||||
cy.contains('a', 'Genesis / Creation / Chapter 1')
|
||||
.should('contain.text', 'Bible')
|
||||
.and('have.attr', 'href', '/schedules/73')
|
||||
|
|
@ -109,7 +121,7 @@ describe("today's assignments", () => {
|
|||
|
||||
cy.get('.today-assignments [role="status"]').should(
|
||||
'contain.text',
|
||||
'Nothing is assigned for today.',
|
||||
'Nothing is due today.',
|
||||
)
|
||||
})
|
||||
|
||||
|
|
@ -121,6 +133,7 @@ describe("today's assignments", () => {
|
|||
assignments: [
|
||||
{
|
||||
id: 12,
|
||||
scheduledDate: browserToday,
|
||||
schedule: {
|
||||
id: 73,
|
||||
set: { name: 'Bible' },
|
||||
|
|
@ -177,7 +190,7 @@ describe("today's assignments", () => {
|
|||
cy.get('[data-today-assignment="12"]').should('not.exist')
|
||||
cy.get('.today-assignments [role="status"]').should(
|
||||
'contain.text',
|
||||
'Nothing is assigned for today.',
|
||||
'Nothing is due today.',
|
||||
)
|
||||
})
|
||||
|
||||
|
|
@ -219,7 +232,7 @@ describe("today's assignments", () => {
|
|||
|
||||
cy.get('.today-assignments [role="status"]').should(
|
||||
'contain.text',
|
||||
'Nothing is assigned for today.',
|
||||
'Nothing is due today.',
|
||||
)
|
||||
})
|
||||
})
|
||||
|
|
|
|||
335
frontend/website/src/components/ScheduleAssignmentTimeline.vue
Normal file
335
frontend/website/src/components/ScheduleAssignmentTimeline.vue
Normal file
|
|
@ -0,0 +1,335 @@
|
|||
<script setup lang="ts">
|
||||
import type { ScheduleDetail } from '@/stores/schedules'
|
||||
|
||||
type ScheduleDay = ScheduleDetail['days'][number]
|
||||
|
||||
const props = defineProps<{
|
||||
completionErrors: Record<number, string>
|
||||
days: ScheduleDay[]
|
||||
mode: 'remaining' | 'completed'
|
||||
pendingAssignmentIds: number[]
|
||||
today: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
setCompleted: [assignmentId: number, completed: boolean]
|
||||
}>()
|
||||
|
||||
function formatDate(value: string): string {
|
||||
return new Intl.DateTimeFormat('en', {
|
||||
dateStyle: 'medium',
|
||||
timeZone: 'UTC',
|
||||
}).format(new Date(`${value}T00:00:00Z`))
|
||||
}
|
||||
|
||||
function formatCompletionTime(value: string): string {
|
||||
return new Intl.DateTimeFormat('en', {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short',
|
||||
}).format(new Date(value))
|
||||
}
|
||||
|
||||
function dayAssignmentSummary(day: ScheduleDay): string {
|
||||
if (day.assignments.length === 0) {
|
||||
return '0 assigned'
|
||||
}
|
||||
|
||||
const assignmentLabel = props.mode === 'remaining' ? 'remaining' : 'completed'
|
||||
|
||||
return `${day.assignments.length} ${assignmentLabel}`
|
||||
}
|
||||
|
||||
function isOverdue(day: ScheduleDay): boolean {
|
||||
return props.mode === 'remaining' && day.assignments.length > 0 && day.date < props.today
|
||||
}
|
||||
|
||||
function isPending(assignmentId: number): boolean {
|
||||
return props.pendingAssignmentIds.includes(assignmentId)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ol
|
||||
class="schedule-days"
|
||||
:class="{ 'schedule-days--completed': mode === 'completed' }"
|
||||
:aria-label="
|
||||
mode === 'remaining'
|
||||
? 'Remaining assignments by scheduled date'
|
||||
: 'Completed assignments by scheduled date'
|
||||
"
|
||||
>
|
||||
<li
|
||||
v-for="day in days"
|
||||
:key="day.date"
|
||||
class="schedule-day"
|
||||
data-schedule-day
|
||||
:data-schedule-date="day.date"
|
||||
>
|
||||
<header class="schedule-day__header">
|
||||
<time :datetime="day.date">{{ formatDate(day.date) }}</time>
|
||||
<span class="schedule-day__summary">
|
||||
<span v-if="isOverdue(day)" class="overdue-label">Overdue</span>
|
||||
<span>{{ dayAssignmentSummary(day) }}</span>
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<p v-if="day.assignments.length === 0" class="rest-day">Rest day</p>
|
||||
|
||||
<ul v-else class="assignment-list">
|
||||
<li
|
||||
v-for="assignment in day.assignments"
|
||||
:key="assignment.id"
|
||||
:class="{ 'is-completed': assignment.completedAt !== null }"
|
||||
:data-schedule-assignment="assignment.id"
|
||||
>
|
||||
<div class="assignment-description">
|
||||
<span class="assignment-path">
|
||||
{{ assignment.element.path.join(' / ') }}
|
||||
</span>
|
||||
<span class="assignment-kind">{{ assignment.element.kind }}</span>
|
||||
</div>
|
||||
<div class="assignment-completion">
|
||||
<p v-if="assignment.completedAt !== null" class="assignment-completion__status">
|
||||
Completed
|
||||
<time :datetime="assignment.completedAt">
|
||||
{{ formatCompletionTime(assignment.completedAt) }}
|
||||
</time>
|
||||
</p>
|
||||
<p v-else class="assignment-completion__status">Not completed</p>
|
||||
<button
|
||||
type="button"
|
||||
class="assignment-completion-button"
|
||||
:aria-label="
|
||||
assignment.completedAt === null
|
||||
? `Mark ${assignment.element.path.join(' / ')} complete`
|
||||
: `Reopen ${assignment.element.path.join(' / ')}`
|
||||
"
|
||||
:disabled="isPending(assignment.id)"
|
||||
@click="emit('setCompleted', assignment.id, assignment.completedAt === null)"
|
||||
>
|
||||
{{
|
||||
isPending(assignment.id)
|
||||
? 'Saving...'
|
||||
: assignment.completedAt === null
|
||||
? 'Mark complete'
|
||||
: 'Reopen'
|
||||
}}
|
||||
</button>
|
||||
<p
|
||||
v-if="completionErrors[assignment.id] !== undefined"
|
||||
class="assignment-completion__error"
|
||||
role="alert"
|
||||
>
|
||||
{{ completionErrors[assignment.id] }}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.schedule-days {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
margin: 1.4rem 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.schedule-day {
|
||||
overflow: hidden;
|
||||
border: 1px solid rgb(24 48 41 / 12%);
|
||||
border-radius: 1rem;
|
||||
background: rgb(255 253 247 / 82%);
|
||||
box-shadow: 0 0.75rem 2rem rgb(40 62 52 / 6%);
|
||||
}
|
||||
|
||||
.schedule-days--completed .schedule-day {
|
||||
background: rgb(248 248 241 / 78%);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.schedule-day__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 0.85rem 1rem;
|
||||
border-bottom: 1px solid rgb(24 48 41 / 10%);
|
||||
color: #5e7067;
|
||||
background: rgb(239 228 212 / 42%);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.schedule-days--completed .schedule-day__header {
|
||||
background: rgb(220 235 224 / 34%);
|
||||
}
|
||||
|
||||
.schedule-day__summary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.overdue-label {
|
||||
padding: 0.25rem 0.45rem;
|
||||
border-radius: 999px;
|
||||
color: #8f382d;
|
||||
background: #f4dcd5;
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.rest-day {
|
||||
margin: 0;
|
||||
padding: 1.2rem 1rem;
|
||||
color: #79877f;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.assignment-list {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.assignment-list li {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: start;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.assignment-list li.is-completed {
|
||||
background: rgb(220 235 224 / 24%);
|
||||
}
|
||||
|
||||
.assignment-list li + li {
|
||||
border-top: 1px solid rgb(24 48 41 / 10%);
|
||||
}
|
||||
|
||||
.assignment-path {
|
||||
min-width: 0;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-size: 1.05rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.assignment-description {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.assignment-kind {
|
||||
flex: 0 0 auto;
|
||||
padding: 0.35rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
color: #81533a;
|
||||
background: #efe4d4;
|
||||
font-size: 0.62rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.assignment-completion {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
gap: 0.55rem;
|
||||
min-width: 12rem;
|
||||
}
|
||||
|
||||
.assignment-completion__status,
|
||||
.assignment-completion__error {
|
||||
margin: 0;
|
||||
font-size: 0.74rem;
|
||||
font-weight: 700;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.assignment-completion__status {
|
||||
color: #5e7067;
|
||||
}
|
||||
|
||||
.assignment-completion__status time {
|
||||
display: block;
|
||||
margin-top: 0.2rem;
|
||||
color: #344e45;
|
||||
}
|
||||
|
||||
.assignment-completion__error {
|
||||
max-width: 14rem;
|
||||
color: #9b3f32;
|
||||
}
|
||||
|
||||
.assignment-completion-button {
|
||||
min-height: 2.4rem;
|
||||
padding: 0.55rem 0.8rem;
|
||||
border: 1px solid rgb(24 58 49 / 28%);
|
||||
border-radius: 0.65rem;
|
||||
color: #183a31;
|
||||
background: #fffdf7;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.is-completed .assignment-completion-button {
|
||||
color: #5e7067;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.assignment-completion-button:hover:not(:disabled) {
|
||||
border-color: #285c4e;
|
||||
background: #f9f5e9;
|
||||
}
|
||||
|
||||
.assignment-completion-button:focus-visible {
|
||||
outline: 3px solid rgb(86 127 112 / 34%);
|
||||
outline-offset: 0.25rem;
|
||||
}
|
||||
|
||||
.assignment-completion-button:disabled {
|
||||
cursor: wait;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
@media (max-width: 37.5rem) {
|
||||
.schedule-day__header {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.schedule-day__summary {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.assignment-list li {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.assignment-description {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.assignment-completion {
|
||||
justify-items: start;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.assignment-completion__status,
|
||||
.assignment-completion__error {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -31,6 +31,7 @@ const scheduleAssignmentSchema = assignmentIdentitySchema.extend({
|
|||
})
|
||||
|
||||
export const assignmentForDateSchema = assignmentIdentitySchema.extend({
|
||||
scheduledDate: isoDateSchema,
|
||||
schedule: z.object({
|
||||
id: z.number().int().positive(),
|
||||
set: z.object({
|
||||
|
|
|
|||
|
|
@ -36,6 +36,14 @@ function formatDate(value: string): string {
|
|||
}).format(new Date(`${value}T00:00:00Z`))
|
||||
}
|
||||
|
||||
function isOverdue(scheduledDate: string): boolean {
|
||||
return scheduledDate < todayDate.value
|
||||
}
|
||||
|
||||
function overdueLabel(scheduledDate: string): string {
|
||||
return `Overdue · Due ${formatDate(scheduledDate)}`
|
||||
}
|
||||
|
||||
async function completeAssignment(assignmentId: number): Promise<void> {
|
||||
await schedulesStore.setAssignmentCompleted(assignmentId, true)
|
||||
}
|
||||
|
|
@ -76,7 +84,7 @@ async function completeAssignment(assignmentId: number): Promise<void> {
|
|||
</div>
|
||||
|
||||
<p v-else-if="assignmentsForDate.length === 0" class="today-state" role="status">
|
||||
Nothing is assigned for today.
|
||||
Nothing is due today.
|
||||
</p>
|
||||
|
||||
<ul v-else class="today-assignment-list" aria-label="Today's assignments">
|
||||
|
|
@ -97,6 +105,12 @@ async function completeAssignment(assignmentId: number): Promise<void> {
|
|||
<p>{{ assignment.schedule.set.name }}</p>
|
||||
<span class="today-assignment__kind">{{ assignment.element.kind }}</span>
|
||||
</div>
|
||||
<time
|
||||
v-if="isOverdue(assignment.scheduledDate)"
|
||||
class="today-assignment__overdue"
|
||||
:datetime="assignment.scheduledDate"
|
||||
v-text="overdueLabel(assignment.scheduledDate)"
|
||||
></time>
|
||||
<p class="today-assignment__path">
|
||||
{{ assignment.element.path.join(' / ') }}
|
||||
</p>
|
||||
|
|
@ -390,6 +404,19 @@ async function completeAssignment(assignmentId: number): Promise<void> {
|
|||
text-transform: none;
|
||||
}
|
||||
|
||||
.today-assignment__overdue {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
margin-top: 0.85rem;
|
||||
padding: 0.3rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
color: #923f31;
|
||||
background: #f7e5dc;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
.today-assignment__path {
|
||||
margin: 1.75rem 0 0;
|
||||
color: #183029;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,55 @@
|
|||
<script setup lang="ts">
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { ref, watch } from 'vue'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
import AuthenticatedHeader from '@/components/AuthenticatedHeader.vue'
|
||||
import { useSchedulesStore } from '@/stores/schedules'
|
||||
import ScheduleAssignmentTimeline from '@/components/ScheduleAssignmentTimeline.vue'
|
||||
import { useSchedulesStore, type ScheduleDetail } from '@/stores/schedules'
|
||||
|
||||
type ScheduleDay = ScheduleDetail['days'][number]
|
||||
|
||||
const route = useRoute()
|
||||
const schedulesStore = useSchedulesStore()
|
||||
const { activeSchedule, detailLoading, detailError, detailNotFound } = storeToRefs(schedulesStore)
|
||||
const {
|
||||
activeSchedule,
|
||||
assignmentCompletionErrors,
|
||||
assignmentCompletionPendingIds,
|
||||
detailLoading,
|
||||
detailError,
|
||||
detailNotFound,
|
||||
} = storeToRefs(schedulesStore)
|
||||
const currentScheduleId = ref<number | null>(null)
|
||||
const completionAnnouncement = ref('')
|
||||
const todayDate = browserDate(new Date())
|
||||
|
||||
const remainingDays = computed<ScheduleDay[]>(() => {
|
||||
if (activeSchedule.value === null) {
|
||||
return []
|
||||
}
|
||||
|
||||
return activeSchedule.value.days.flatMap((day) => {
|
||||
const assignments = day.assignments.filter((assignment) => assignment.completedAt === null)
|
||||
const isRestDay = day.assignments.length === 0
|
||||
|
||||
return assignments.length > 0 || isRestDay ? [{ date: day.date, assignments }] : []
|
||||
})
|
||||
})
|
||||
|
||||
const completedDays = computed<ScheduleDay[]>(() => {
|
||||
if (activeSchedule.value === null) {
|
||||
return []
|
||||
}
|
||||
|
||||
return activeSchedule.value.days.flatMap((day) => {
|
||||
const assignments = day.assignments.filter((assignment) => assignment.completedAt !== null)
|
||||
|
||||
return assignments.length > 0 ? [{ date: day.date, assignments }] : []
|
||||
})
|
||||
})
|
||||
|
||||
const remainingAssignmentCount = computed(() => assignmentCount(remainingDays.value))
|
||||
const completedAssignmentCount = computed(() => assignmentCount(completedDays.value))
|
||||
|
||||
watch(
|
||||
() => route.params.scheduleId,
|
||||
|
|
@ -40,15 +80,27 @@ function formatDate(value: string): string {
|
|||
}).format(new Date(`${value}T00:00:00Z`))
|
||||
}
|
||||
|
||||
function formatCompletionTime(value: string): string {
|
||||
return new Intl.DateTimeFormat('en', {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short',
|
||||
}).format(new Date(value))
|
||||
function browserDate(date: Date): string {
|
||||
const year = String(date.getFullYear()).padStart(4, '0')
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
|
||||
return `${year}-${month}-${day}`
|
||||
}
|
||||
|
||||
function assignmentCount(days: ScheduleDay[]): number {
|
||||
return days.reduce((count, day) => count + day.assignments.length, 0)
|
||||
}
|
||||
|
||||
async function setAssignmentCompleted(assignmentId: number, completed: boolean): Promise<void> {
|
||||
await schedulesStore.setAssignmentCompleted(assignmentId, completed)
|
||||
completionAnnouncement.value = ''
|
||||
const updated = await schedulesStore.setAssignmentCompleted(assignmentId, completed)
|
||||
|
||||
if (updated) {
|
||||
completionAnnouncement.value = completed
|
||||
? 'Assignment moved to Completed.'
|
||||
: 'Assignment moved to Remaining.'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -93,73 +145,82 @@ async function setAssignmentCompleted(assignmentId: number, completed: boolean):
|
|||
</p>
|
||||
</header>
|
||||
|
||||
<ol class="schedule-days" aria-label="Scheduled days">
|
||||
<li
|
||||
v-for="day in activeSchedule.days"
|
||||
:key="day.date"
|
||||
class="schedule-day"
|
||||
data-schedule-day
|
||||
:data-schedule-date="day.date"
|
||||
>
|
||||
<header class="schedule-day__header">
|
||||
<time :datetime="day.date">{{ formatDate(day.date) }}</time>
|
||||
<span>{{ day.assignments.length }} assigned</span>
|
||||
</header>
|
||||
<p
|
||||
class="completion-announcement"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
data-completion-announcement
|
||||
>
|
||||
{{ completionAnnouncement }}
|
||||
</p>
|
||||
|
||||
<p v-if="day.assignments.length === 0" class="rest-day">Rest day</p>
|
||||
<section
|
||||
class="assignment-section assignment-section--remaining"
|
||||
aria-labelledby="remaining-assignments-heading"
|
||||
data-assignment-section="remaining"
|
||||
:data-assignment-count="remainingAssignmentCount"
|
||||
>
|
||||
<header class="assignment-section__header">
|
||||
<div>
|
||||
<p class="assignment-section__eyebrow">Your plan</p>
|
||||
<h2 id="remaining-assignments-heading">Remaining</h2>
|
||||
<p>Everything still ahead, kept in scheduled order.</p>
|
||||
</div>
|
||||
<span class="assignment-section__count">
|
||||
{{ remainingAssignmentCount }}
|
||||
{{ remainingAssignmentCount === 1 ? 'assignment' : 'assignments' }}
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<ul v-else class="assignment-list">
|
||||
<li
|
||||
v-for="assignment in day.assignments"
|
||||
:key="assignment.id"
|
||||
:class="{ 'is-completed': assignment.completedAt !== null }"
|
||||
:data-schedule-assignment="assignment.id"
|
||||
>
|
||||
<div class="assignment-description">
|
||||
<span class="assignment-path">
|
||||
{{ assignment.element.path.join(' / ') }}
|
||||
</span>
|
||||
<span class="assignment-kind">{{ assignment.element.kind }}</span>
|
||||
</div>
|
||||
<div class="assignment-completion">
|
||||
<p v-if="assignment.completedAt !== null" class="assignment-completion__status">
|
||||
Completed
|
||||
<time :datetime="assignment.completedAt">
|
||||
{{ formatCompletionTime(assignment.completedAt) }}
|
||||
</time>
|
||||
</p>
|
||||
<p v-else class="assignment-completion__status">Not completed</p>
|
||||
<button
|
||||
type="button"
|
||||
class="assignment-completion-button"
|
||||
:aria-label="
|
||||
assignment.completedAt === null
|
||||
? `Mark ${assignment.element.path.join(' / ')} complete`
|
||||
: `Reopen ${assignment.element.path.join(' / ')}`
|
||||
"
|
||||
:disabled="schedulesStore.isAssignmentCompletionPending(assignment.id)"
|
||||
@click="setAssignmentCompleted(assignment.id, assignment.completedAt === null)"
|
||||
>
|
||||
{{
|
||||
schedulesStore.isAssignmentCompletionPending(assignment.id)
|
||||
? 'Saving...'
|
||||
: assignment.completedAt === null
|
||||
? 'Mark complete'
|
||||
: 'Reopen'
|
||||
}}
|
||||
</button>
|
||||
<p
|
||||
v-if="schedulesStore.assignmentCompletionError(assignment.id) !== null"
|
||||
class="assignment-completion__error"
|
||||
role="alert"
|
||||
>
|
||||
{{ schedulesStore.assignmentCompletionError(assignment.id) }}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<p v-if="remainingAssignmentCount === 0" class="section-state" role="status">
|
||||
All assignments are complete.
|
||||
</p>
|
||||
|
||||
<ScheduleAssignmentTimeline
|
||||
v-if="remainingDays.length > 0"
|
||||
:completion-errors="assignmentCompletionErrors"
|
||||
:days="remainingDays"
|
||||
mode="remaining"
|
||||
:pending-assignment-ids="assignmentCompletionPendingIds"
|
||||
:today="todayDate"
|
||||
@set-completed="setAssignmentCompleted"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<details
|
||||
class="assignment-section completed-section"
|
||||
data-assignment-section="completed"
|
||||
:data-assignment-count="completedAssignmentCount"
|
||||
>
|
||||
<summary class="completed-section__summary">
|
||||
<span class="completed-section__introduction">
|
||||
<span class="completed-section__heading">Completed</span>
|
||||
<span>Finished work, grouped by its original schedule date.</span>
|
||||
</span>
|
||||
<span class="completed-section__controls">
|
||||
<span class="assignment-section__count">
|
||||
{{ completedAssignmentCount }}
|
||||
{{ completedAssignmentCount === 1 ? 'assignment' : 'assignments' }}
|
||||
</span>
|
||||
<span class="completed-section__chevron" aria-hidden="true">⌄</span>
|
||||
</span>
|
||||
</summary>
|
||||
|
||||
<div class="completed-section__content">
|
||||
<p v-if="completedAssignmentCount === 0" class="section-state" role="status">
|
||||
No assignments completed yet.
|
||||
</p>
|
||||
<ScheduleAssignmentTimeline
|
||||
v-else
|
||||
:completion-errors="assignmentCompletionErrors"
|
||||
:days="completedDays"
|
||||
mode="completed"
|
||||
:pending-assignment-ids="assignmentCompletionPendingIds"
|
||||
:today="todayDate"
|
||||
@set-completed="setAssignmentCompleted"
|
||||
/>
|
||||
</div>
|
||||
</details>
|
||||
</template>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -233,153 +294,142 @@ h1 {
|
|||
color: #68776f;
|
||||
}
|
||||
|
||||
.schedule-days {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
margin: 3rem 0 0;
|
||||
.completion-announcement {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.schedule-day {
|
||||
.assignment-section {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.assignment-section__header {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.assignment-section__eyebrow {
|
||||
margin: 0 0 0.45rem;
|
||||
color: #926044;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.assignment-section__header h2,
|
||||
.completed-section__heading {
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
.assignment-section__header h2 {
|
||||
margin: 0;
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.assignment-section__header p:last-child {
|
||||
margin: 0.65rem 0 0;
|
||||
color: #68776f;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.assignment-section__count {
|
||||
flex: 0 0 auto;
|
||||
padding: 0.45rem 0.7rem;
|
||||
border-radius: 999px;
|
||||
color: #4f665d;
|
||||
background: rgb(224 233 223 / 72%);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.section-state {
|
||||
display: grid;
|
||||
min-height: 6rem;
|
||||
place-items: center;
|
||||
margin: 1.4rem 0 0;
|
||||
padding: 1.25rem;
|
||||
border: 1px dashed rgb(24 48 41 / 18%);
|
||||
border-radius: 1rem;
|
||||
color: #5e7067;
|
||||
background: rgb(255 253 247 / 52%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.completed-section {
|
||||
overflow: hidden;
|
||||
border: 1px solid rgb(24 48 41 / 12%);
|
||||
border-radius: 1rem;
|
||||
background: rgb(255 253 247 / 82%);
|
||||
box-shadow: 0 0.75rem 2rem rgb(40 62 52 / 6%);
|
||||
background: rgb(246 245 237 / 78%);
|
||||
}
|
||||
|
||||
.schedule-day__header {
|
||||
.completed-section__summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 0.85rem 1rem;
|
||||
border-bottom: 1px solid rgb(24 48 41 / 10%);
|
||||
color: #5e7067;
|
||||
background: rgb(239 228 212 / 42%);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.rest-day {
|
||||
margin: 0;
|
||||
padding: 1.2rem 1rem;
|
||||
color: #79877f;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.assignment-list {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
gap: 1.5rem;
|
||||
padding: 1.15rem 1.25rem;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.assignment-list li {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: start;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
.completed-section__summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.assignment-list li.is-completed {
|
||||
background: rgb(220 235 224 / 34%);
|
||||
}
|
||||
|
||||
.assignment-list li + li {
|
||||
border-top: 1px solid rgb(24 48 41 / 10%);
|
||||
}
|
||||
|
||||
.assignment-path {
|
||||
min-width: 0;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-size: 1.05rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.assignment-description {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.assignment-kind {
|
||||
flex: 0 0 auto;
|
||||
padding: 0.35rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
color: #81533a;
|
||||
background: #efe4d4;
|
||||
font-size: 0.62rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.assignment-completion {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
gap: 0.55rem;
|
||||
min-width: 12rem;
|
||||
}
|
||||
|
||||
.assignment-completion__status,
|
||||
.assignment-completion__error {
|
||||
margin: 0;
|
||||
font-size: 0.74rem;
|
||||
font-weight: 700;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.assignment-completion__status {
|
||||
color: #5e7067;
|
||||
}
|
||||
|
||||
.assignment-completion__status time {
|
||||
display: block;
|
||||
margin-top: 0.2rem;
|
||||
color: #344e45;
|
||||
}
|
||||
|
||||
.assignment-completion__error {
|
||||
max-width: 14rem;
|
||||
color: #9b3f32;
|
||||
}
|
||||
|
||||
.assignment-completion-button {
|
||||
min-height: 2.4rem;
|
||||
padding: 0.55rem 0.8rem;
|
||||
border: 1px solid rgb(24 58 49 / 28%);
|
||||
border-radius: 0.65rem;
|
||||
color: #183a31;
|
||||
background: #fffdf7;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.is-completed .assignment-completion-button {
|
||||
color: #5e7067;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.assignment-completion-button:hover:not(:disabled) {
|
||||
border-color: #285c4e;
|
||||
background: #f9f5e9;
|
||||
}
|
||||
|
||||
.assignment-completion-button:focus-visible {
|
||||
.completed-section__summary:focus-visible {
|
||||
outline: 3px solid rgb(86 127 112 / 34%);
|
||||
outline-offset: 0.25rem;
|
||||
outline-offset: -0.25rem;
|
||||
}
|
||||
|
||||
.assignment-completion-button:disabled {
|
||||
cursor: wait;
|
||||
opacity: 0.65;
|
||||
.completed-section__introduction {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.completed-section__heading {
|
||||
color: #344e45;
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.completed-section__introduction > span:last-child {
|
||||
color: #79877f;
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.completed-section__controls {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.completed-section__chevron {
|
||||
color: #68776f;
|
||||
font-size: 1.35rem;
|
||||
line-height: 1;
|
||||
transition: transform 160ms ease;
|
||||
}
|
||||
|
||||
.completed-section[open] .completed-section__chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.completed-section__content {
|
||||
padding: 0 1rem 1rem;
|
||||
border-top: 1px solid rgb(24 48 41 / 10%);
|
||||
}
|
||||
|
||||
.page-state {
|
||||
|
|
@ -430,22 +480,26 @@ h1 {
|
|||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.assignment-list li {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.assignment-description {
|
||||
.assignment-section__header {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.assignment-completion {
|
||||
justify-items: start;
|
||||
min-width: 0;
|
||||
.completed-section__summary {
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.assignment-completion__status,
|
||||
.assignment-completion__error {
|
||||
text-align: left;
|
||||
.completed-section__controls {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.completed-section__content {
|
||||
padding: 0 0.75rem 0.75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue