Compare commits

..

28 Commits

Author SHA1 Message Date
Gregor Vostrak
192c8c3b88 fix IDOR private projects 2026-03-19 13:52:28 +01:00
Gregor Vostrak
6218ffceb5 update composer dependencies 2026-03-03 12:27:42 +01:00
Gregor Vostrak
ba32be0543 update npm dependencies 2026-03-02 18:19:11 +01:00
Gregor Vostrak
bd817db06f only use xsrf token for organization requests 2026-03-02 17:18:21 +01:00
Gregor Vostrak
97f4bce676 bump retries and wait for networkidle in retry 2026-03-02 17:18:21 +01:00
Gregor Vostrak
6962b668fb add retries to api data token setup and xsrf token fallback 2026-03-02 17:18:21 +01:00
Gregor Vostrak
be8091296c use api tokens to create e2e test data 2026-03-02 17:18:21 +01:00
Gregor Vostrak
84c4750c9b Add warning for AI slop pull requests
Added a warning about AI slop pull requests and potential bans.
2026-02-27 20:18:44 +01:00
Gregor Vostrak
f582adab0d fix time entries incorrectly not updating in calendar
the synced snapDuration cause incorrect noops on updates f.e. 15:55-16:00 on a 15 minute snap
2026-02-24 19:38:55 +01:00
Gregor Vostrak
c60cff04ce fix calendar flickering on move for non-aligned entries
this is a trade-off where for non grid aligned entries, the cursor position is a bit off, but data and visual are stil in sync. otherwise fc overrides height on drag, causing flickers.
2026-02-24 15:30:18 +01:00
Gregor Vostrak
cae41e4b4f improve visual snapping boundaries 2026-02-24 14:02:18 +01:00
Gregor Vostrak
8973be9dab filament minor version update 2026-02-24 13:43:21 +01:00
Gregor Vostrak
2a0b8d31e6 add calendar settings + custom visual snapping 2026-02-24 12:41:15 +01:00
Gregor Vostrak
d2f3fe411a add missing query invalidation after report create 2026-02-18 23:58:39 +01:00
Gregor Vostrak
f880f9f730 fix firefox flaky input in e2e test 2026-02-18 23:22:04 +01:00
Gregor Vostrak
556bbedeca add dynamic loading of paginated endpoints above page_limit
add request classes and fix collection typing for clients, tasks and tags
2026-02-18 22:32:56 +01:00
Gregor Vostrak
eed638d0aa add default sorting to task, project, member, invitation, api token endpoints 2026-02-18 19:16:14 +01:00
Gregor Vostrak
864f41bda6 fix project member query invalidations after update, query key change regression 2026-02-18 18:51:21 +01:00
Gregor Vostrak
26524c5f40 fix member edit modal ui regression from field component migration 2026-02-18 17:57:11 +01:00
Gregor Vostrak
cf98fabe0a add table sorting to members, clients and tags table 2026-02-18 17:41:36 +01:00
Gregor Vostrak
88c0c334e9 add project progress sorting and fix direction ui for number based
columns in the project table
2026-02-18 16:45:17 +01:00
Gregor Vostrak
0fc325363d update query keys to include org id, preventing stale data after organization switch 2026-02-18 12:53:22 +01:00
Gregor Vostrak
1afc16573a cleanup postcss config dependency in ui package 2026-02-17 18:06:35 +01:00
Gregor Vostrak
147514a606 convert billable query string to boolean for shared report + e2e tests #876 2026-02-17 17:08:38 +01:00
Gregor Vostrak
435522b502 make OrganizationPolicy use “organizations:update” to remove jetstream inconsistencies
The frontend did not show organization settings for admin users because of the team ownership check
2026-02-17 14:35:52 +01:00
Gregor Vostrak
f1d001e03e add lazy loading to modals and dropdowns to improve time page render performance 2026-02-17 13:54:26 +01:00
Gregor Vostrak
7f145cf1c2 make sure cost column shows in shared report view, #1019 2026-02-17 13:42:22 +01:00
Gregor Vostrak
b579ed1075 bump ui package version to 0.0.16 2026-02-16 18:31:11 +01:00
83 changed files with 4607 additions and 1600 deletions

View File

@@ -37,6 +37,8 @@ If you have a **feature request**, please [**create a discussion**](https://gith
Please open an issue or start a discussion and wait for approval before submitting a pull request. This does not apply to tiny fixes or changes however, please keep in mind that we might not merge PRs for various reasons.
**If you submit an AI slop pull request (especially without following the proper procedure), you will be banned from future contributions to solidtime.**
Please read the [CONTRIBUTING.md](./CONTRIBUTING.md) before sumbitting a Pull Request.
We do accept contributions in the [documentation repository](https://github.com/solidtime-io/docs) f.e. to add new self-hosting guides.

View File

@@ -35,6 +35,7 @@ class ApiTokenController extends Controller
/** @var Builder<Client> $query */
$query->whereJsonContains('grant_types', 'personal_access');
})
->orderBy('created_at', 'desc')
->get();
return new ApiTokenCollection($tokens);

View File

@@ -41,6 +41,7 @@ class InvitationController extends Controller
$this->checkPermission($organization, 'invitations:view');
$invitations = $organization->teamInvitations()
->orderBy('created_at', 'desc')
->paginate(config('app.pagination_per_page_default'));
return InvitationCollection::make($invitations);

View File

@@ -60,6 +60,7 @@ class MemberController extends Controller
$members = Member::query()
->whereBelongsTo($organization, 'organization')
->with(['user'])
->orderBy('created_at', 'desc')
->paginate(config('app.pagination_per_page_default'));
return MemberCollection::make($members);

View File

@@ -60,7 +60,9 @@ class ProjectController extends Controller
$projectsQuery->whereNull('archived_at');
}
$projects = $projectsQuery->paginate(config('app.pagination_per_page_default'));
$projects = $projectsQuery
->orderBy('created_at', 'desc')
->paginate(config('app.pagination_per_page_default'));
$showBillableRate = $this->member($organization)->role !== Role::Employee->value || $organization->employees_can_see_billable_rates;
@@ -76,7 +78,7 @@ class ProjectController extends Controller
*/
public function show(Organization $organization, Project $project): JsonResource
{
$this->checkPermission($organization, 'projects:view', $project);
$this->checkPermission($organization, 'projects:view:all', $project);
// Note: There is currently no need to check if a user is a member of the project,
// since this is only relevant for users with the role "employee" and they can not access this endpoint.

View File

@@ -6,6 +6,7 @@ namespace App\Http\Controllers\Api\V1;
use App\Exceptions\Api\InactiveUserCanNotBeUsedApiException;
use App\Exceptions\Api\UserIsAlreadyMemberOfProjectApiException;
use App\Http\Requests\V1\ProjectMember\ProjectMemberIndexRequest;
use App\Http\Requests\V1\ProjectMember\ProjectMemberStoreRequest;
use App\Http\Requests\V1\ProjectMember\ProjectMemberUpdateRequest;
use App\Http\Resources\V1\ProjectMember\ProjectMemberCollection;
@@ -41,12 +42,13 @@ class ProjectMemberController extends Controller
*
* @operationId getProjectMembers
*/
public function index(Organization $organization, Project $project): ProjectMemberCollection
public function index(Organization $organization, Project $project, ProjectMemberIndexRequest $request): ProjectMemberCollection
{
$this->checkPermission($organization, 'project-members:view', $project);
$projectMembers = ProjectMember::query()
->whereBelongsTo($project, 'project')
->orderBy('created_at', 'desc')
->paginate(config('app.pagination_per_page_default'));
return new ProjectMemberCollection($projectMembers);

View File

@@ -5,6 +5,7 @@ declare(strict_types=1);
namespace App\Http\Controllers\Api\V1;
use App\Enums\Weekday;
use App\Http\Requests\V1\Report\ReportIndexRequest;
use App\Http\Requests\V1\Report\ReportStoreRequest;
use App\Http\Requests\V1\Report\ReportUpdateRequest;
use App\Http\Resources\V1\Report\DetailedReportResource;
@@ -40,7 +41,7 @@ class ReportController extends Controller
*
* @operationId getReports
*/
public function index(Organization $organization): ReportCollection
public function index(Organization $organization, ReportIndexRequest $request): ReportCollection
{
$this->checkPermission($organization, 'reports:view');

View File

@@ -5,6 +5,7 @@ declare(strict_types=1);
namespace App\Http\Controllers\Api\V1;
use App\Exceptions\Api\EntityStillInUseApiException;
use App\Http\Requests\V1\Tag\TagIndexRequest;
use App\Http\Requests\V1\Tag\TagStoreRequest;
use App\Http\Requests\V1\Tag\TagUpdateRequest;
use App\Http\Resources\V1\Tag\TagCollection;
@@ -34,7 +35,7 @@ class TagController extends Controller
*
* @throws AuthorizationException
*/
public function index(Organization $organization): TagCollection
public function index(Organization $organization, TagIndexRequest $request): TagCollection
{
$this->checkPermission($organization, 'tags:view');

View File

@@ -82,7 +82,9 @@ class TaskController extends Controller
$query->whereNull('done_at');
}
$tasks = $query->paginate(config('app.pagination_per_page_default'));
$tasks = $query
->orderBy('created_at', 'desc')
->paginate(config('app.pagination_per_page_default'));
return new TaskCollection($tasks);
}

View File

@@ -21,6 +21,11 @@ class InvitationIndexRequest extends BaseFormRequest
public function rules(): array
{
return [
'page' => [
'integer',
'min:1',
'max:2147483647',
],
];
}
}

View File

@@ -21,6 +21,11 @@ class MemberIndexRequest extends BaseFormRequest
public function rules(): array
{
return [
'page' => [
'integer',
'min:1',
'max:2147483647',
],
];
}
}

View File

@@ -0,0 +1,27 @@
<?php
declare(strict_types=1);
namespace App\Http\Requests\V1\ProjectMember;
use App\Http\Requests\V1\BaseFormRequest;
use Illuminate\Contracts\Validation\ValidationRule;
class ProjectMemberIndexRequest extends BaseFormRequest
{
/**
* Get the validation rules that apply to the request.
*
* @return array<string, array<string|ValidationRule>>
*/
public function rules(): array
{
return [
'page' => [
'integer',
'min:1',
'max:2147483647',
],
];
}
}

View File

@@ -0,0 +1,27 @@
<?php
declare(strict_types=1);
namespace App\Http\Requests\V1\Report;
use App\Http\Requests\V1\BaseFormRequest;
use Illuminate\Contracts\Validation\ValidationRule;
class ReportIndexRequest extends BaseFormRequest
{
/**
* Get the validation rules that apply to the request.
*
* @return array<string, array<string|ValidationRule>>
*/
public function rules(): array
{
return [
'page' => [
'integer',
'min:1',
'max:2147483647',
],
];
}
}

View File

@@ -0,0 +1,27 @@
<?php
declare(strict_types=1);
namespace App\Http\Requests\V1\Tag;
use App\Http\Requests\V1\BaseFormRequest;
use Illuminate\Contracts\Validation\ValidationRule;
class TagIndexRequest extends BaseFormRequest
{
/**
* Get the validation rules that apply to the request.
*
* @return array<string, array<string|ValidationRule>>
*/
public function rules(): array
{
return [
'page' => [
'integer',
'min:1',
'max:2147483647',
],
];
}
}

View File

@@ -26,6 +26,11 @@ class TaskIndexRequest extends BaseFormRequest
public function rules(): array
{
return [
'page' => [
'integer',
'min:1',
'max:2147483647',
],
'project_id' => [
ExistsEloquent::make(Project::class, null, function (Builder $builder): Builder {
/** @var Builder<Project> $builder */

View File

@@ -4,9 +4,10 @@ declare(strict_types=1);
namespace App\Http\Resources\V1\Client;
use App\Http\Resources\PaginatedResourceCollection;
use Illuminate\Http\Resources\Json\ResourceCollection;
class ClientCollection extends ResourceCollection
class ClientCollection extends ResourceCollection implements PaginatedResourceCollection
{
/**
* The resource that this resource collects.

View File

@@ -4,9 +4,10 @@ declare(strict_types=1);
namespace App\Http\Resources\V1\Tag;
use App\Http\Resources\PaginatedResourceCollection;
use Illuminate\Http\Resources\Json\ResourceCollection;
class TagCollection extends ResourceCollection
class TagCollection extends ResourceCollection implements PaginatedResourceCollection
{
/**
* The resource that this resource collects.

View File

@@ -6,6 +6,7 @@ namespace App\Policies;
use App\Models\Organization;
use App\Models\User;
use App\Service\PermissionStore;
use Filament\Facades\Filament;
use Illuminate\Auth\Access\HandlesAuthorization;
@@ -58,7 +59,7 @@ class OrganizationPolicy
return true;
}
return $user->ownsTeam($organization);
return app(PermissionStore::class)->userHas($organization, $user, 'organizations:update');
}
/**

2066
composer.lock generated

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,172 @@
import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
import { test } from '../playwright/fixtures';
import { expect } from '@playwright/test';
import type { Page } from '@playwright/test';
async function goToCalendar(page: Page) {
await page.goto(PLAYWRIGHT_BASE_URL + '/calendar');
await expect(page.locator('.fc')).toBeVisible();
}
async function openSettingsPopover(page: Page) {
await page.getByRole('button', { name: 'Calendar settings' }).click();
await expect(page.getByText('Calendar Settings')).toBeVisible();
}
async function clearCalendarSettings(page: Page) {
await page.evaluate(() => localStorage.removeItem('solidtime:calendar-settings'));
}
test.describe('Calendar Settings', () => {
test.beforeEach(async ({ page }) => {
await clearCalendarSettings(page);
});
test('settings popover shows all fields with correct defaults', async ({ page }) => {
await goToCalendar(page);
await openSettingsPopover(page);
await expect(page.getByLabel('Snap Interval')).toContainText('15 min');
await expect(page.getByLabel('Start Time')).toContainText('12:00 AM');
await expect(page.getByLabel('End Time')).toContainText('12:00 AM (next)');
await expect(page.getByLabel('Grid Scale')).toContainText('15 min');
});
test('snap interval can be changed and persists across reload', async ({ page }) => {
await goToCalendar(page);
await openSettingsPopover(page);
// Change snap interval to 30 min
await page.getByLabel('Snap Interval').click();
await page.getByRole('option', { name: '30 min' }).click();
await page.locator('.fc-toolbar-title').click();
// Verify localStorage was updated
const stored = await page.evaluate(() =>
JSON.parse(localStorage.getItem('solidtime:calendar-settings') || '{}')
);
expect(stored.snapMinutes).toBe(30);
// Reload and verify persistence
await page.reload();
await expect(page.locator('.fc')).toBeVisible();
await openSettingsPopover(page);
await expect(page.getByLabel('Snap Interval')).toContainText('30 min');
});
test('start time change is applied to calendar and rejects values >= end time', async ({
page,
}) => {
await goToCalendar(page);
// Verify 7 AM slot exists with default start (00:00)
await expect(page.locator('.fc-timegrid-slot[data-time="07:00:00"]')).not.toHaveCount(0);
await openSettingsPopover(page);
// Set end time to 6 PM first
await page.getByLabel('End Time').click();
await page.getByRole('option', { name: '6:00 PM' }).click();
// Change start time to 8 AM (valid)
await page.getByLabel('Start Time').click();
await page.getByRole('option', { name: '8:00 AM' }).click();
await page.locator('.fc-toolbar-title').click();
// Calendar should no longer show hours before 8 AM
await expect(page.locator('.fc-timegrid-slot[data-time="07:00:00"]')).toHaveCount(0);
await expect(page.locator('.fc-timegrid-slot[data-time="08:00:00"]')).not.toHaveCount(0);
// Try to set start time to 6 PM (invalid: equals end time)
await openSettingsPopover(page);
await page.getByLabel('Start Time').click();
await page.getByRole('option', { name: '6:00 PM' }).click();
// Should be rejected — start time stays at 8 AM
await expect(page.getByLabel('Start Time')).toContainText('8:00 AM');
});
test('end time change is applied to calendar and rejects values <= start time', async ({
page,
}) => {
await goToCalendar(page);
// Verify 19:00 slot exists with default end (24:00)
await expect(page.locator('.fc-timegrid-slot[data-time="19:00:00"]')).not.toHaveCount(0);
await openSettingsPopover(page);
// Set start time to 8 AM first
await page.getByLabel('Start Time').click();
await page.getByRole('option', { name: '8:00 AM' }).click();
// Change end time to 6 PM (valid)
await page.getByLabel('End Time').click();
await page.getByRole('option', { name: '6:00 PM' }).click();
await page.locator('.fc-toolbar-title').click();
// Calendar should no longer show hours at or after 6 PM
await expect(page.locator('.fc-timegrid-slot[data-time="18:00:00"]')).toHaveCount(0);
await expect(page.locator('.fc-timegrid-slot[data-time="17:00:00"]')).not.toHaveCount(0);
// Try to set end time to 8 AM (invalid: equals start time)
await openSettingsPopover(page);
await page.getByLabel('End Time').click();
await page.getByRole('option', { name: '8:00 AM' }).click();
// Should be rejected — end time stays at 6 PM
await expect(page.getByLabel('End Time')).toContainText('6:00 PM');
});
test('grid scale affects number of calendar slots', async ({ page }) => {
await goToCalendar(page);
// Count slots with default 15-min scale
const defaultSlotCount = await page.locator('.fc-timegrid-slot').count();
// Change to 30 min scale (should halve the slots)
await openSettingsPopover(page);
await page.getByLabel('Grid Scale').click();
await page.getByRole('option', { name: '30 min' }).click();
await page.locator('.fc-toolbar-title').click();
const largerSlotCount = await page.locator('.fc-timegrid-slot').count();
expect(largerSlotCount).toBeLessThan(defaultSlotCount);
// Change to 5 min scale (should have many more slots)
await openSettingsPopover(page);
await page.getByLabel('Grid Scale').click();
await page.getByRole('option', { name: '5 min', exact: true }).click();
await page.locator('.fc-toolbar-title').click();
const smallerSlotCount = await page.locator('.fc-timegrid-slot').count();
expect(smallerSlotCount).toBeGreaterThan(defaultSlotCount);
});
test('all settings persist across navigation', async ({ page }) => {
await goToCalendar(page);
await openSettingsPopover(page);
// Change every setting
await page.getByLabel('Snap Interval').click();
await page.getByRole('option', { name: '5 min', exact: true }).click();
await page.getByLabel('Start Time').click();
await page.getByRole('option', { name: '6:00 AM' }).click();
await page.getByLabel('End Time').click();
await page.getByRole('option', { name: '10:00 PM' }).click();
await page.getByLabel('Grid Scale').click();
await page.getByRole('option', { name: '30 min' }).click();
await page.locator('.fc-toolbar-title').click();
// Navigate away and back
await page.goto(PLAYWRIGHT_BASE_URL + '/time');
await goToCalendar(page);
// Verify all settings persisted
await openSettingsPopover(page);
await expect(page.getByLabel('Snap Interval')).toContainText('5 min');
await expect(page.getByLabel('Start Time')).toContainText('6:00 AM');
await expect(page.getByLabel('End Time')).toContainText('10:00 PM');
await expect(page.getByLabel('Grid Scale')).toContainText('30 min');
});
});

View File

@@ -8,6 +8,7 @@ import {
createProjectViaApi,
createPublicProjectViaApi,
} from './utils/api';
import { getTableRowNames } from './utils/table';
async function goToClientsOverview(page: Page) {
await page.goto(PLAYWRIGHT_BASE_URL + '/clients');
@@ -131,6 +132,92 @@ test('test that deleting a client via actions menu works', async ({ page, ctx })
await expect(page.getByTestId('client_table')).not.toContainText(clientName);
});
// =============================================
// Sorting Tests
// =============================================
async function clearClientTableState(page: Page) {
await page.evaluate(() => {
localStorage.removeItem('client-table-state');
});
}
test('test that sorting clients by name and status works', async ({ page, ctx }) => {
await createClientViaApi(ctx, { name: 'AAA SortClient' });
await createClientViaApi(ctx, { name: 'ZZZ SortClient' });
await goToClientsOverview(page);
await clearClientTableState(page);
await page.reload();
const table = page.getByTestId('client_table');
await expect(table).toBeVisible();
// -- Name sorting (default is name asc) --
let names = await getTableRowNames(table);
expect(names.indexOf('AAA SortClient')).toBeLessThan(names.indexOf('ZZZ SortClient'));
const nameHeader = table.getByText('Name').first();
await nameHeader.click(); // toggle to desc
names = await getTableRowNames(table);
expect(names.indexOf('ZZZ SortClient')).toBeLessThan(names.indexOf('AAA SortClient'));
// -- Status sorting --
const statusHeader = table.getByText('Status').first();
await statusHeader.click(); // asc
await expect(statusHeader.locator('svg')).toBeVisible();
await statusHeader.click(); // desc
await expect(statusHeader.locator('svg')).toBeVisible();
});
test('test that sorting clients by project count works', async ({ page, ctx }) => {
const clientWithMany = await createClientViaApi(ctx, { name: 'ManyProjects Client' });
const clientWithNone = await createClientViaApi(ctx, { name: 'NoProjects Client' });
// Create projects for the first client
await createProjectViaApi(ctx, { name: 'Proj1', client_id: clientWithMany.id });
await createProjectViaApi(ctx, { name: 'Proj2', client_id: clientWithMany.id });
await goToClientsOverview(page);
await clearClientTableState(page);
await page.reload();
const table = page.getByTestId('client_table');
await expect(table).toBeVisible();
// Click Projects header - first click should sort desc (most projects first)
const projectsHeader = table.getByText('Projects').first();
await projectsHeader.click();
await expect(projectsHeader.locator('svg')).toBeVisible();
let names = await getTableRowNames(table);
expect(names.indexOf('ManyProjects Client')).toBeLessThan(names.indexOf('NoProjects Client'));
// Second click toggles to asc (least projects first)
await projectsHeader.click();
names = await getTableRowNames(table);
expect(names.indexOf('NoProjects Client')).toBeLessThan(names.indexOf('ManyProjects Client'));
});
test('test that client sort state persists after page reload', async ({ page }) => {
await goToClientsOverview(page);
await clearClientTableState(page);
await page.reload();
const table = page.getByTestId('client_table');
await expect(table).toBeVisible();
const nameHeader = table.getByText('Name').first();
await nameHeader.click(); // toggle to desc
await expect(nameHeader.locator('svg')).toBeVisible();
await page.reload();
await expect(page.getByTestId('client_table')).toBeVisible();
await expect(
page.getByTestId('client_table').getByText('Name').first().locator('svg')
).toBeVisible();
});
// =============================================
// Employee Permission Tests
// =============================================

View File

@@ -5,7 +5,13 @@ import { expect, test } from '../playwright/fixtures';
import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
import type { Page } from '@playwright/test';
import { inviteAndAcceptMember } from './utils/members';
import { createPlaceholderMemberViaImportApi } from './utils/api';
import {
createPlaceholderMemberViaImportApi,
getMembersViaApi,
updateMemberBillableRateViaApi,
updateOrganizationSettingViaApi,
} from './utils/api';
import { getTableRowNames } from './utils/table';
// Tests that invite + accept members need more time
test.describe.configure({ timeout: 45000 });
@@ -79,8 +85,8 @@ test('test that organization billable rate can be updated with all existing time
const newBillableRate = Math.round(Math.random() * 10000);
await page.getByRole('row').first().getByRole('button').click();
await page.getByRole('menuitem').getByText('Edit').click();
await page.getByText('Organization Default Rate').click();
await page.getByText('Custom Rate').click();
await page.getByRole('combobox').last().click();
await page.getByRole('option', { name: 'Custom Rate' }).click();
await page.getByPlaceholder('Billable Rate').fill(newBillableRate.toString());
await page.getByRole('button', { name: 'Update Member' }).click();
@@ -102,6 +108,136 @@ test('test that organization billable rate can be updated with all existing time
]);
});
test('test that switching member billable rate from custom back to default rate works', async ({
page,
ctx,
}) => {
// Set a known org billable rate
await updateOrganizationSettingViaApi(ctx, { billable_rate: 12000 });
// Create a placeholder member with a custom billable rate
await createPlaceholderMemberViaImportApi(ctx, 'CustomToDefault Member');
const members = await getMembersViaApi(ctx);
const member = members.find((m) => m.name === 'CustomToDefault Member');
expect(member).toBeDefined();
await updateMemberBillableRateViaApi(ctx, member!.id, 25000);
await goToMembersPage(page);
const memberRow = page.getByRole('row').filter({ hasText: 'CustomToDefault Member' });
await expect(memberRow).toBeVisible();
// Open edit modal
await memberRow.getByRole('button').click();
await page.getByRole('menuitem').getByText('Edit').click();
await expect(page.getByRole('heading', { name: 'Update Member' })).toBeVisible();
// Verify it starts on Custom Rate
const billableCombobox = page.getByRole('dialog').getByRole('combobox').last();
await expect(billableCombobox).toContainText('Custom Rate');
// Switch to Default Rate
await billableCombobox.click();
await page.getByRole('option', { name: 'Default Rate' }).click();
await expect(billableCombobox).toContainText('Default Rate');
// Verify the billable rate input is disabled
await expect(page.getByPlaceholder('Billable Rate')).toBeDisabled();
// Submit — billable_rate changes from 25000 to null, so confirmation dialog appears
await page.getByRole('button', { name: 'Update Member' }).click();
await expect(page.getByRole('heading', { name: 'Update Member Billable Rate' })).toBeVisible();
await expect(page.getByText('the default rate of the organization')).toBeVisible();
// Confirm the update
await Promise.all([
page.getByRole('button', { name: 'Yes, update existing time' }).click(),
page.waitForRequest(
(request) =>
request.url().includes('/members/') &&
request.method() === 'PUT' &&
request.postDataJSON().billable_rate === null
),
]);
// Verify both dialogs are closed
await expect(page.getByRole('dialog')).not.toBeVisible();
});
test('test that default rate shows disabled input with organization billable rate', async ({
page,
ctx,
}) => {
// Set a known org billable rate (150.00)
await updateOrganizationSettingViaApi(ctx, { billable_rate: 15000 });
await goToMembersPage(page);
// Open edit modal for the owner (who uses default rate by default)
await page.getByRole('row').first().getByRole('button').click();
await page.getByRole('menuitem').getByText('Edit').click();
await expect(page.getByRole('heading', { name: 'Update Member' })).toBeVisible();
// Verify it's on Default Rate
const billableCombobox = page.getByRole('dialog').getByRole('combobox').last();
await expect(billableCombobox).toContainText('Default Rate');
// Verify the input is disabled and shows the org rate (formatted with currency)
const billableInput = page.getByPlaceholder('Billable Rate');
await expect(billableInput).toBeDisabled();
await expect(billableInput).toHaveAttribute('aria-valuenow', '150');
// Close the dialog
await page.getByRole('button', { name: 'Cancel' }).click();
await expect(page.getByRole('dialog')).not.toBeVisible();
});
test('test that cancelling the billable rate confirmation dialog does not update the member', async ({
page,
ctx,
}) => {
// Create a placeholder member with a custom billable rate
await createPlaceholderMemberViaImportApi(ctx, 'CancelConfirm Member');
const members = await getMembersViaApi(ctx);
const member = members.find((m) => m.name === 'CancelConfirm Member');
expect(member).toBeDefined();
await updateMemberBillableRateViaApi(ctx, member!.id, 10000);
await goToMembersPage(page);
const memberRow = page.getByRole('row').filter({ hasText: 'CancelConfirm Member' });
await expect(memberRow).toBeVisible();
// Open edit modal
await memberRow.getByRole('button').click();
await page.getByRole('menuitem').getByText('Edit').click();
await expect(page.getByRole('heading', { name: 'Update Member' })).toBeVisible();
// Change the billable rate
await page.getByPlaceholder('Billable Rate').fill('200');
// Click Update Member — confirmation dialog should appear
await page.getByRole('button', { name: 'Update Member' }).click();
await expect(page.getByRole('heading', { name: 'Update Member Billable Rate' })).toBeVisible();
// Set up listener to verify no PUT request is sent after cancel
let putRequestSent = false;
page.on('request', (request) => {
if (request.url().includes('/members/') && request.method() === 'PUT') {
putRequestSent = true;
}
});
// Click Cancel on the confirmation dialog
await page.getByRole('button', { name: 'Cancel' }).click();
// Verify confirmation dialog is closed
await expect(
page.getByRole('heading', { name: 'Update Member Billable Rate' })
).not.toBeVisible();
// Verify no API call was made
expect(putRequestSent).toBe(false);
});
test('test that changing role of placeholder member is rejected', async ({ page, ctx }) => {
const placeholderName = 'RoleChange ' + Math.floor(Math.random() * 10000);
@@ -487,6 +623,125 @@ test('test that accepted invitation disappears from invitations tab', async ({ p
await expect(page.getByText(memberEmail)).not.toBeVisible();
});
// =============================================
// Sorting Tests
// =============================================
// Helper to clear localStorage before tests that check sorting
async function clearMemberTableState(page: Page) {
await page.evaluate(() => {
localStorage.removeItem('member-table-state');
});
}
test('test that sorting members by name, role, and status works', async ({ page, ctx }) => {
// Create two placeholder members with names that sort predictably around "John Doe"
await createPlaceholderMemberViaImportApi(ctx, 'AAA SortFirst');
await createPlaceholderMemberViaImportApi(ctx, 'ZZZ SortLast');
await goToMembersPage(page);
await clearMemberTableState(page);
await page.reload();
const table = page.getByTestId('member_table');
await expect(table).toBeVisible();
// -- Name sorting (default is already name asc after clearing state) --
const nameHeader = table.getByText('Name').first();
let names = await getTableRowNames(table);
expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('ZZZ SortLast'));
await nameHeader.click(); // toggle to desc
names = await getTableRowNames(table);
expect(names.indexOf('ZZZ SortLast')).toBeLessThan(names.indexOf('AAA SortFirst'));
// -- Role sorting --
const roleHeader = table.getByText('Role').first();
await roleHeader.click(); // asc: Owner(0) < Placeholder(4)
names = await getTableRowNames(table);
const ownerIdx = names.indexOf('John Doe');
const placeholderIdx = names.indexOf('AAA SortFirst');
expect(ownerIdx).toBeLessThan(placeholderIdx);
await roleHeader.click(); // desc: Placeholder first
names = await getTableRowNames(table);
expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('John Doe'));
// -- Status sorting --
const statusHeader = table.getByText('Status').first();
await statusHeader.click(); // asc: Active(0) < Inactive(1)
names = await getTableRowNames(table);
expect(names.indexOf('John Doe')).toBeLessThan(names.indexOf('AAA SortFirst'));
await statusHeader.click(); // desc: Inactive first
names = await getTableRowNames(table);
expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('John Doe'));
// -- Email: just verify sort indicator appears --
const emailHeader = table.getByText('Email').first();
await emailHeader.click();
await expect(emailHeader.locator('svg')).toBeVisible();
});
test('test that member sort state persists after page reload', async ({ page }) => {
await goToMembersPage(page);
await clearMemberTableState(page);
await page.reload();
const table = page.getByTestId('member_table');
await expect(table).toBeVisible();
// Click Role header twice to set descending sort
const roleHeader = table.getByText('Role').first();
await roleHeader.click();
await expect(roleHeader.locator('svg')).toBeVisible();
await roleHeader.click();
await expect(roleHeader.locator('svg')).toBeVisible();
// Reload the page
await page.reload();
// Verify the sort indicator is still visible on Role column
await expect(page.getByTestId('member_table')).toBeVisible();
await expect(
page.getByTestId('member_table').getByText('Role').first().locator('svg')
).toBeVisible();
});
test('test that sorting members by billable rate works', async ({ page, ctx }) => {
// Create two placeholder members and set different billable rates
await createPlaceholderMemberViaImportApi(ctx, 'HighRate Member');
await createPlaceholderMemberViaImportApi(ctx, 'LowRate Member');
const members = await getMembersViaApi(ctx);
const highRateMember = members.find((m) => m.name === 'HighRate Member');
const lowRateMember = members.find((m) => m.name === 'LowRate Member');
expect(highRateMember).toBeDefined();
expect(lowRateMember).toBeDefined();
await updateMemberBillableRateViaApi(ctx, highRateMember!.id, 20000);
await updateMemberBillableRateViaApi(ctx, lowRateMember!.id, 5000);
await goToMembersPage(page);
await clearMemberTableState(page);
await page.reload();
const table = page.getByTestId('member_table');
await expect(table).toBeVisible();
// First click = desc (highest first), null rates last
const billableHeader = table.getByText('Billable Rate').first();
await billableHeader.click();
await expect(billableHeader.locator('svg')).toBeVisible();
let names = await getTableRowNames(table);
expect(names.indexOf('HighRate Member')).toBeLessThan(names.indexOf('LowRate Member'));
// Second click = asc (lowest first), null rates still last
await billableHeader.click();
names = await getTableRowNames(table);
expect(names.indexOf('LowRate Member')).toBeLessThan(names.indexOf('HighRate Member'));
});
// =============================================
// Employee Permission Tests
// =============================================
@@ -522,7 +777,7 @@ test.describe('Employee Sidebar Navigation', () => {
});
// Member table is empty — no rows rendered (only headers)
await expect(employee.page.getByTestId('client_table').locator('[role="row"]')).toHaveCount(
await expect(employee.page.getByTestId('member_table').locator('[role="row"]')).toHaveCount(
0
);

View File

@@ -369,6 +369,40 @@ test('test that format settings persist after page reload', async ({ page }) =>
await expect(page.getByLabel('Date Format')).toContainText('DD/MM/YYYY');
});
// =============================================
// Admin Permission Tests
// =============================================
test.describe('Admin Organization Settings Access', () => {
test('admin can see and edit organization settings', async ({ ctx, admin }) => {
await admin.page.goto(PLAYWRIGHT_BASE_URL + '/teams/' + ctx.orgId);
// Organization Name section is visible
await expect(
admin.page.getByRole('heading', { name: 'Organization Name', level: 3 })
).toBeVisible({ timeout: 10000 });
// Editable settings sections should be visible
await expect(
admin.page.getByRole('heading', { name: 'Billable Rate', level: 3 })
).toBeVisible();
await expect(
admin.page.getByRole('heading', { name: 'Format Settings', level: 3 })
).toBeVisible();
await expect(
admin.page.getByRole('heading', { name: 'Organization Settings', level: 3 })
).toBeVisible();
// Save buttons should be visible (admin can update)
await expect(admin.page.getByRole('button', { name: 'Save' }).first()).toBeVisible();
// Delete organization should NOT be visible (owner only)
await expect(
admin.page.getByRole('heading', { name: 'Delete Organization' })
).not.toBeVisible();
});
});
// =============================================
// Employee Permission Tests
// =============================================

View File

@@ -3,11 +3,13 @@ import type { Page } from '@playwright/test';
import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
import { test } from '../playwright/fixtures';
import { formatCentsWithOrganizationDefaults } from './utils/money';
import type { CurrencyFormat } from '../resources/js/packages/ui/src/utils/money';
import {
createProjectViaApi,
createPublicProjectViaApi,
createTaskViaApi,
createClientViaApi,
createTimeEntryViaApi,
archiveProjectViaApi,
updateOrganizationSettingViaApi,
} from './utils/api';
@@ -335,61 +337,179 @@ test('test that editing an existing billable project with default rate loads cor
});
// Sorting tests
test('test that sorting projects by name works', async ({ page }) => {
test('test that sorting projects by all columns works', async ({ page, ctx }) => {
// Seed projects with distinct values for each sortable column
const clientAlpha = await createClientViaApi(ctx, { name: 'Alpha Client' });
const clientBeta = await createClientViaApi(ctx, { name: 'Beta Client' });
// Project A: client Alpha, low billable rate, has estimated time, active
const projectA = await createProjectViaApi(ctx, {
name: 'AAA Project',
client_id: clientAlpha.id,
is_billable: true,
billable_rate: 5000,
estimated_time: 36000, // 10h
});
// Add 1h of time entries (10% progress)
await createTimeEntryViaApi(ctx, {
duration: '1h',
projectId: projectA.id,
});
// Project B: client Beta, high billable rate, has estimated time, archived
const projectB = await createProjectViaApi(ctx, {
name: 'BBB Project',
client_id: clientBeta.id,
is_billable: true,
billable_rate: 15000,
estimated_time: 7200, // 2h
});
// Add 1h of time entries (50% progress)
await createTimeEntryViaApi(ctx, {
duration: '1h',
projectId: projectB.id,
});
await archiveProjectViaApi(ctx, {
...projectB,
client_id: clientBeta.id,
billable_rate: 15000,
estimated_time: 7200,
});
// Project C: no client, medium billable rate, no estimated time, active
const projectC = await createProjectViaApi(ctx, {
name: 'CCC Project',
is_billable: true,
billable_rate: 10000,
});
// Add 3h of time entries
await createTimeEntryViaApi(ctx, {
duration: '3h',
projectId: projectC.id,
});
await goToProjectsOverview(page);
await clearProjectTableState(page);
await page.reload();
// Wait for the table to load
await expect(page.getByTestId('project_table')).toBeVisible();
await expect(page.getByText('AAA Project')).toBeVisible();
await expect(page.getByText('BBB Project')).toBeVisible();
await expect(page.getByText('CCC Project')).toBeVisible();
// Get initial project names
const getProjectNames = async () => {
const rows = page
.getByTestId('project_table')
.locator('[data-testid="project_table"] > div')
.filter({ hasNot: page.locator('.border-t') });
const names: string[] = [];
const count = await page.getByTestId('project_table').getByRole('row').count();
for (let i = 0; i < count; i++) {
const row = page.getByTestId('project_table').getByRole('row').nth(i);
const nameCell = row.locator('div').first();
const text = await nameCell.textContent();
if (text) {
names.push(text.trim());
}
// Helper to get the visual order of our seeded projects by reading
// all row text in a single evaluate call (avoids locator timing issues)
const seededNames = ['AAA Project', 'BBB Project', 'CCC Project'];
const getOrder = async (): Promise<string[]> => {
const allRowTexts = await page.evaluate(() => {
const table = document.querySelector('[data-testid="project_table"]');
if (!table) return [];
const rows = table.querySelectorAll('[role="row"]');
return Array.from(rows).map((row) => row.textContent ?? '');
});
const order: string[] = [];
for (const text of allRowTexts) {
const match = seededNames.find((name) => text.includes(name));
if (match) order.push(match);
}
return names;
return order;
};
// Click on Name header to sort ascending (default should already be ascending)
const nameHeader = page.getByText('Name').first();
await nameHeader.click();
// Helper: click a column header and wait for sort to apply.
// expectedFirstAmongSeeded = which of our 3 seeded projects should appear first
const clickSortHeader = async (headerText: string, expectedFirstAmongSeeded: string) => {
const header = page
.locator('[data-testid="project_table"] .select-none', {
hasText: headerText,
})
.first();
await header.click();
// Wait until the expected project appears before the others among our seeded set
await page.waitForFunction(
({ expected, names }) => {
const table = document.querySelector('[data-testid="project_table"]');
if (!table) return false;
const rows = table.querySelectorAll('[role="row"]');
let firstSeededIdx = -1;
for (let i = 0; i < rows.length; i++) {
const text = rows[i].textContent ?? '';
if (names.some((n: string) => text.includes(n))) {
firstSeededIdx = i;
break;
}
}
if (firstSeededIdx === -1) return false;
return (rows[firstSeededIdx].textContent ?? '').includes(expected);
},
{ expected: expectedFirstAmongSeeded, names: seededNames },
{ timeout: 5000 }
);
};
// Wait for sort indicator to appear
await expect(nameHeader.locator('svg')).toBeVisible();
// --- Sort by Name ---
// Default is name asc (A-Z)
let order = await getOrder();
expect(order).toEqual(['AAA Project', 'BBB Project', 'CCC Project']);
// Click again to sort descending
await nameHeader.click();
// Click to toggle to Z-A
await clickSortHeader('Name', 'CCC Project');
order = await getOrder();
expect(order).toEqual(['CCC Project', 'BBB Project', 'AAA Project']);
// Verify the sort indicator is still visible (showing descending)
await expect(nameHeader.locator('svg')).toBeVisible();
});
// --- Sort by Client (text: first click = A-Z, no-client last) ---
await clickSortHeader('Client', 'AAA Project');
order = await getOrder();
expect(order).toEqual(['AAA Project', 'BBB Project', 'CCC Project']); // Alpha, Beta, No client
test('test that sorting projects by status works', async ({ page }) => {
await goToProjectsOverview(page);
await clearProjectTableState(page);
await page.reload();
// Reverse: Z-A, no-client still last
await clickSortHeader('Client', 'BBB Project');
order = await getOrder();
expect(order).toEqual(['BBB Project', 'AAA Project', 'CCC Project']); // Beta, Alpha, No client
// Default is "all" so no filter needed - Wait for the table to load
await expect(page.getByTestId('project_table')).toBeVisible();
// --- Sort by Total Time (numeric: first click = highest first) ---
await clickSortHeader('Total Time', 'CCC Project');
order = await getOrder();
expect(order[0]).toBe('CCC Project'); // C=3h first, A and B tied at 1h
// Click on Status header to sort
const statusHeader = page.getByText('Status').first();
await statusHeader.click();
// Reverse: lowest first
await clickSortHeader('Total Time', 'AAA Project');
order = await getOrder();
expect(order[2]).toBe('CCC Project'); // C=3h last
// Sort indicator should be visible
await expect(statusHeader.locator('svg')).toBeVisible();
// --- Sort by Billable Rate (numeric: first click = highest first) ---
await clickSortHeader('Billable Rate', 'BBB Project');
order = await getOrder();
expect(order).toEqual(['BBB Project', 'CCC Project', 'AAA Project']); // 15000, 10000, 5000
// Reverse: lowest first
await clickSortHeader('Billable Rate', 'AAA Project');
order = await getOrder();
expect(order).toEqual(['AAA Project', 'CCC Project', 'BBB Project']); // 5000, 10000, 15000
// --- Sort by Progress (numeric: first click = highest first, no-estimate last) ---
await clickSortHeader('Progress', 'BBB Project');
order = await getOrder();
expect(order).toEqual(['BBB Project', 'AAA Project', 'CCC Project']); // 50%, 10%, no estimate
// Reverse: lowest first, no-estimate still last
await clickSortHeader('Progress', 'AAA Project');
order = await getOrder();
expect(order).toEqual(['AAA Project', 'BBB Project', 'CCC Project']); // 10%, 50%, no estimate
// --- Sort by Status (first click = active first, archived last) ---
await expect(async () => {
await clickSortHeader('Status', 'AAA Project');
order = await getOrder();
expect(order.indexOf('BBB Project')).toBeGreaterThan(order.indexOf('AAA Project'));
expect(order.indexOf('BBB Project')).toBeGreaterThan(order.indexOf('CCC Project'));
}).toPass({ timeout: 5000 });
// Reverse: archived first
await expect(async () => {
await clickSortHeader('Status', 'BBB Project');
order = await getOrder();
expect(order.indexOf('BBB Project')).toBeLessThan(order.indexOf('AAA Project'));
expect(order.indexOf('BBB Project')).toBeLessThan(order.indexOf('CCC Project'));
}).toPass({ timeout: 5000 });
});
// Filter tests
@@ -642,22 +762,6 @@ test('test that estimated time input displays formatted value after blur', async
await expect(estimatedTimeInput).toHaveValue(/1h.*30/);
});
// Create new project with new Client
// Create new project with existing Client
// Delete project via More Options
// Test that project task count is displayed correctly
// Edit Project Modal Test
// Add Project with billable rate
// Edit Project with billable rate
// Edit Project Member Billable Rate
test('test that editing a task name on the project detail page works', async ({ page, ctx }) => {
const projectName = 'Task Edit Project ' + Math.floor(1 + Math.random() * 10000);
const originalTaskName = 'Original Task ' + Math.floor(1 + Math.random() * 10000);

View File

@@ -8,6 +8,9 @@ import {
createTimeEntryViaApi,
createTimeEntryWithTagViaApi,
createBareTimeEntryViaApi,
createBillableProjectViaApi,
createTimeEntryWithBillableStatusViaApi,
createTagViaApi,
} from './utils/api';
import {
goToReporting,
@@ -246,6 +249,191 @@ test('test that shared report with No Task filter shows entries without a task',
await expect(page.getByText('Total')).toBeVisible();
});
test('test that shared report respects task filter', async ({ page, ctx }) => {
const projectName = 'TaskFilterProj ' + Math.floor(Math.random() * 10000);
const taskA = 'TaskA ' + Math.floor(Math.random() * 10000);
const taskB = 'TaskB ' + Math.floor(Math.random() * 10000);
const reportName = 'TaskFilterReport ' + Math.floor(Math.random() * 10000);
const project = await createProjectViaApi(ctx, { name: projectName });
const task = await createTaskViaApi(ctx, { name: taskA, project_id: project.id });
await createTaskViaApi(ctx, { name: taskB, project_id: project.id });
await createTimeEntryViaApi(ctx, {
description: `Entry for ${taskA}`,
duration: '1h',
projectId: project.id,
taskId: task.id,
});
await createTimeEntryViaApi(ctx, {
description: `Entry for ${projectName} no task`,
duration: '2h',
projectId: project.id,
});
await goToReporting(page);
await expect(page.getByTestId('reporting_view').getByText(projectName)).toBeVisible();
// Filter by task A
await page.getByRole('button', { name: 'Tasks' }).first().click();
await Promise.all([
page.getByRole('option').filter({ hasText: taskA }).click(),
waitForReportingUpdate(page),
]);
await page.keyboard.press('Escape');
const { shareableLink } = await saveAsSharedReport(page, reportName);
// View the shared report
await page.goto(shareableLink);
await expect(page.getByText('Reporting')).toBeVisible();
await expect(page.getByText('Total')).toBeVisible();
await expect(page.getByText('1h 00min').first()).toBeVisible();
await expect(page.getByText('3h 00min')).not.toBeVisible();
});
test('test that shared report respects client filter', async ({ page, ctx }) => {
const clientA = 'ClientA ' + Math.floor(Math.random() * 10000);
const clientB = 'ClientB ' + Math.floor(Math.random() * 10000);
const projectA = 'ClientFilterProjA ' + Math.floor(Math.random() * 10000);
const projectB = 'ClientFilterProjB ' + Math.floor(Math.random() * 10000);
const reportName = 'ClientFilterReport ' + Math.floor(Math.random() * 10000);
const cliA = await createClientViaApi(ctx, { name: clientA });
const cliB = await createClientViaApi(ctx, { name: clientB });
const projA = await createProjectViaApi(ctx, { name: projectA, client_id: cliA.id });
const projB = await createProjectViaApi(ctx, { name: projectB, client_id: cliB.id });
await createTimeEntryViaApi(ctx, {
description: `Entry for ${clientA}`,
duration: '1h',
projectId: projA.id,
});
await createTimeEntryViaApi(ctx, {
description: `Entry for ${clientB}`,
duration: '2h',
projectId: projB.id,
});
await goToReporting(page);
await expect(page.getByTestId('reporting_view').getByText(projectA)).toBeVisible();
// Filter by client A
await page.getByRole('button', { name: 'Clients' }).first().click();
await Promise.all([
page.getByRole('option').filter({ hasText: clientA }).click(),
waitForReportingUpdate(page),
]);
await page.keyboard.press('Escape');
const { shareableLink } = await saveAsSharedReport(page, reportName);
// View the shared report
await page.goto(shareableLink);
await expect(page.getByText('Reporting')).toBeVisible();
await expect(page.getByText(projectA)).toBeVisible();
await expect(page.getByText(projectB)).not.toBeVisible();
});
test('test that shared report respects tag filter', async ({ page, ctx }) => {
const tagA = 'TagA ' + Math.floor(Math.random() * 10000);
const tagB = 'TagB ' + Math.floor(Math.random() * 10000);
const reportName = 'TagFilterReport ' + Math.floor(Math.random() * 10000);
const tagObjA = await createTagViaApi(ctx, { name: tagA });
await createTagViaApi(ctx, { name: tagB });
await createTimeEntryViaApi(ctx, {
description: `Entry with ${tagA}`,
duration: '1h',
tags: [tagObjA.id],
});
await createBareTimeEntryViaApi(ctx, 'Entry no tags', '2h');
await goToReporting(page);
await expect(page.getByTestId('reporting_view').getByText('Total')).toBeVisible();
// Filter by tag A
await page.getByRole('button', { name: 'Tags' }).first().click();
await Promise.all([
page.getByRole('option').filter({ hasText: tagA }).click(),
waitForReportingUpdate(page),
]);
await page.keyboard.press('Escape');
const { shareableLink } = await saveAsSharedReport(page, reportName);
// View the shared report
await page.goto(shareableLink);
await expect(page.getByText('Reporting')).toBeVisible();
await expect(page.getByText('Total')).toBeVisible();
await expect(page.getByText('1h 00min').first()).toBeVisible();
await expect(page.getByText('3h 00min')).not.toBeVisible();
});
test('test that shared report respects member filter', async ({ page, ctx }) => {
const projectName = 'MemberFilterProj ' + Math.floor(Math.random() * 10000);
const reportName = 'MemberFilterReport ' + Math.floor(Math.random() * 10000);
const project = await createProjectViaApi(ctx, { name: projectName });
await createTimeEntryViaApi(ctx, {
description: `Entry for ${projectName}`,
duration: '1h',
projectId: project.id,
});
await goToReporting(page);
await expect(page.getByTestId('reporting_view').getByText(projectName)).toBeVisible();
// Filter by current member (John Doe)
await page.getByRole('button', { name: 'Members' }).first().click();
await Promise.all([
page.getByRole('option').filter({ hasText: 'John Doe' }).click(),
waitForReportingUpdate(page),
]);
await page.keyboard.press('Escape');
const { shareableLink } = await saveAsSharedReport(page, reportName);
// View the shared report — should still show data since all entries belong to this member
await page.goto(shareableLink);
await expect(page.getByText('Reporting')).toBeVisible();
await expect(page.getByText(projectName)).toBeVisible();
await expect(page.getByText('Total')).toBeVisible();
});
test('test that shared report with billable filter only shows billable entries', async ({
page,
ctx,
}) => {
const reportName = 'BillableFilterReport ' + Math.floor(Math.random() * 10000);
// Create one billable (1h) and one non-billable (2h) entry
await createTimeEntryWithBillableStatusViaApi(ctx, true, '1h');
await createTimeEntryWithBillableStatusViaApi(ctx, false, '2h');
await goToReporting(page);
await expect(page.getByTestId('reporting_view').getByText('Total')).toBeVisible();
// Filter by billable only
await page.getByRole('combobox').filter({ hasText: 'Billable' }).click();
await Promise.all([
page.getByRole('option', { name: 'Billable', exact: true }).click(),
waitForReportingUpdate(page),
]);
// Verify only 1h shows before saving
await expect(page.getByTestId('reporting_view').getByText('1h 00min').first()).toBeVisible();
const { shareableLink } = await saveAsSharedReport(page, reportName);
// Navigate to the shared report
await page.goto(shareableLink);
await expect(page.getByText('Reporting')).toBeVisible();
await expect(page.getByText('Total')).toBeVisible();
// Shared report should only show the 1h billable entry, not the 2h non-billable
await expect(page.getByText('1h 00min').first()).toBeVisible();
await expect(page.getByText('3h 00min')).not.toBeVisible();
});
// ──────────────────────────────────────────────────
// Report Date Picker Tests
// ──────────────────────────────────────────────────
@@ -577,3 +765,58 @@ test('test that updating expiration date on already-public report works', async
const now = new Date();
expect(returnedDate.getTime()).toBeGreaterThan(now.getTime());
});
// ──────────────────────────────────────────────────
// Shared Report Cost Column Tests
// ──────────────────────────────────────────────────
test('test that shared report displays cost column correctly aligned with data rows', async ({
page,
ctx,
}) => {
const projectName = 'BillableProj ' + Math.floor(Math.random() * 10000);
const reportName = 'BillableReport ' + Math.floor(Math.random() * 10000);
const project = await createBillableProjectViaApi(ctx, {
name: projectName,
billable_rate: 10000, // 100.00 per hour
});
await createTimeEntryViaApi(ctx, {
description: `Entry for ${projectName}`,
duration: '1h',
projectId: project.id,
billable: true,
});
await goToReporting(page);
await expect(page.getByTestId('reporting_view').getByText(projectName)).toBeVisible();
const { shareableLink } = await saveAsSharedReport(page, reportName);
// Navigate to the shared report
await page.goto(shareableLink);
await expect(page.getByText('Reporting')).toBeVisible();
await expect(page.getByText(projectName)).toBeVisible();
// Verify the table header has all three columns
await expect(page.getByText('Name', { exact: true })).toBeVisible();
await expect(page.getByText('Duration', { exact: true })).toBeVisible();
await expect(page.getByText('Cost', { exact: true })).toBeVisible();
// Verify the Total row displays both duration and cost
await expect(page.getByText('Total')).toBeVisible();
// The data rows should render cost values (not just header + duration)
// With 1h at 100/h the cost should be displayed somewhere in the table
// If showCost is not passed to ReportingRow, only the header "Cost" and
// the Total row cost will render, but individual row costs will be missing
const table = page.locator('[style*="grid-template-columns"]');
// Count elements containing the cost value - header "Cost" + project row cost + total row cost = 3
// If broken (showCost not passed), the project row won't render its cost cell
await expect(table.getByText(/100/).first()).toBeVisible();
// Verify the cost value appears at least twice in the table
// (once for the data row, once for the total) beyond just the header
const costValues = table.getByText(/100/);
await expect(costValues).toHaveCount(2);
});

View File

@@ -3,6 +3,7 @@ import type { Page } from '@playwright/test';
import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
import { test } from '../playwright/fixtures';
import { createTagViaApi } from './utils/api';
import { getTableRowNames } from './utils/table';
async function goToTagsOverview(page: Page) {
await page.goto(PLAYWRIGHT_BASE_URL + '/tags');
@@ -89,6 +90,57 @@ test('test that multiple tags can be created via API and displayed in the table'
await expect(page.getByTestId('tag_table')).toContainText(tagName2);
});
// =============================================
// Sorting Tests
// =============================================
async function clearTagTableState(page: Page) {
await page.evaluate(() => {
localStorage.removeItem('tag-table-state');
});
}
test('test that sorting tags by name works', async ({ page, ctx }) => {
await createTagViaApi(ctx, { name: 'AAA SortTag' });
await createTagViaApi(ctx, { name: 'ZZZ SortTag' });
await goToTagsOverview(page);
await clearTagTableState(page);
await page.reload();
const table = page.getByTestId('tag_table');
await expect(table).toBeVisible();
// Default is name asc
let names = await getTableRowNames(table);
expect(names.indexOf('AAA SortTag')).toBeLessThan(names.indexOf('ZZZ SortTag'));
const nameHeader = table.getByText('Name').first();
await nameHeader.click(); // toggle to desc
names = await getTableRowNames(table);
expect(names.indexOf('ZZZ SortTag')).toBeLessThan(names.indexOf('AAA SortTag'));
});
test('test that tag sort state persists after page reload', async ({ page }) => {
await goToTagsOverview(page);
await clearTagTableState(page);
await page.reload();
const table = page.getByTestId('tag_table');
await expect(table).toBeVisible();
const nameHeader = table.getByText('Name').first();
await nameHeader.click(); // toggle to desc
await expect(nameHeader.locator('svg')).toBeVisible();
await page.reload();
await expect(page.getByTestId('tag_table')).toBeVisible();
await expect(
page.getByTestId('tag_table').getByText('Name').first().locator('svg')
).toBeVisible();
});
// =============================================
// Employee Permission Tests
// =============================================

View File

@@ -608,7 +608,7 @@ test('test that billable icon shows dollar sign for USD currency on time entry r
page,
ctx,
}) => {
await updateOrganizationCurrencyViaWeb(ctx, 'USD');
await updateOrganizationCurrencyViaWeb(page, ctx, 'USD');
await goToTimeOverview(page);
await createEmptyTimeEntry(page);
const timeEntryRow = page.locator('[data-testid="time_entry_row"]').first();
@@ -621,7 +621,7 @@ test('test that billable icon shows euro sign for EUR currency on time entry row
page,
ctx,
}) => {
await updateOrganizationCurrencyViaWeb(ctx, 'EUR');
await updateOrganizationCurrencyViaWeb(page, ctx, 'EUR');
await goToTimeOverview(page);
await createEmptyTimeEntry(page);
const timeEntryRow = page.locator('[data-testid="time_entry_row"]').first();
@@ -1159,6 +1159,8 @@ test('test that end time picker works in create modal', async ({ page }) => {
await endTimeInput.press('Tab');
// Set duration (this will adjust based on the times)
// clear() before fill() needed because fill() appends on Firefox instead of replacing
await page.locator('[role="dialog"] input[name="Duration"]').clear();
await page.locator('[role="dialog"] input[name="Duration"]').fill('1h');
await page.locator('[role="dialog"] input[name="Duration"]').press('Tab');

View File

@@ -30,7 +30,7 @@ test('test that starting and stopping a timer without description and project wo
});
test('test that billable icon shows dollar sign for USD currency', async ({ page, ctx }) => {
await updateOrganizationCurrencyViaWeb(ctx, 'USD');
await updateOrganizationCurrencyViaWeb(page, ctx, 'USD');
await goToDashboard(page);
await page.waitForLoadState('networkidle');
const billableButton = page.getByRole('button', { name: 'Non Billable' }).first();
@@ -39,7 +39,7 @@ test('test that billable icon shows dollar sign for USD currency', async ({ page
});
test('test that billable icon shows euro sign for EUR currency', async ({ page, ctx }) => {
await updateOrganizationCurrencyViaWeb(ctx, 'EUR');
await updateOrganizationCurrencyViaWeb(page, ctx, 'EUR');
await goToDashboard(page);
await page.waitForLoadState('networkidle');
const billableButton = page.getByRole('button', { name: 'Non Billable' }).first();

View File

@@ -16,12 +16,59 @@ export interface TestContext {
// Auth helpers
// ──────────────────────────────────────────────────
async function getApiHeaders(page: Page): Promise<Record<string, string>> {
const cookies = await page.context().cookies();
const xsrfCookie = cookies.find((c) => c.name === 'XSRF-TOKEN');
/**
* Create a Passport API token by calling the token endpoint from the browser.
*
* The browser's native fetch includes the laravel_token cookie (set by
* CreateFreshApiToken during the dashboard page load), so authentication
* is handled by the browser's own cookie jar. The returned Bearer token is
* then used for all subsequent API calls, making them independent of cookie state.
*
* If the first attempt returns 401 (Octane hasn't fully committed the session yet),
* we reload the page to trigger a fresh CreateFreshApiToken and retry.
*/
async function createApiToken(page: Page): Promise<string> {
for (let attempt = 0; attempt < 3; attempt++) {
const result = await page.evaluate(async (baseUrl) => {
const xsrfCookie = document.cookie.split('; ').find((c) => c.startsWith('XSRF-TOKEN='));
const xsrfToken = xsrfCookie
? decodeURIComponent(xsrfCookie.split('=').slice(1).join('='))
: '';
const res = await fetch(`${baseUrl}/api/v1/users/me/api-tokens`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
'X-XSRF-TOKEN': xsrfToken,
},
body: JSON.stringify({ name: 'playwright-test' }),
});
if (!res.ok) {
return null;
}
const body = await res.json();
return body.data.access_token as string;
}, PLAYWRIGHT_BASE_URL);
if (result) {
return result;
}
// Reload to get a fresh laravel_token cookie and retry.
// networkidle gives Octane time to fully commit the session.
await page.reload({ waitUntil: 'networkidle' });
}
throw new Error('Failed to create API token after retries');
}
function bearerHeaders(token: string): Record<string, string> {
return {
Accept: 'application/json',
...(xsrfCookie ? { 'X-XSRF-TOKEN': decodeURIComponent(xsrfCookie.value) } : {}),
Authorization: `Bearer ${token}`,
};
}
@@ -30,8 +77,10 @@ async function getApiHeaders(page: Page): Promise<Record<string, string>> {
// ──────────────────────────────────────────────────
export async function setupTestContext(page: Page): Promise<TestContext> {
const token = await createApiToken(page);
const request = page.request;
const headers = await getApiHeaders(page);
const headers = bearerHeaders(token);
const orgId = await getOrganizationId(request, headers);
const memberId = await getCurrentMemberId(request, orgId, headers);
return { request: createAuthenticatedRequest(request, headers), orgId, memberId };
@@ -201,6 +250,37 @@ export async function createProjectViaApi(
return body.data as { id: string; name: string; color: string; is_billable: boolean };
}
export async function archiveProjectViaApi(
ctx: TestContext,
project: {
id: string;
name: string;
color: string;
is_billable: boolean;
client_id?: string | null;
billable_rate?: number | null;
estimated_time?: number | null;
}
) {
const response = await ctx.request.put(
`${PLAYWRIGHT_BASE_URL}/api/v1/organizations/${ctx.orgId}/projects/${project.id}`,
{
data: {
name: project.name,
color: project.color,
is_billable: project.is_billable,
is_archived: true,
client_id: project.client_id ?? null,
billable_rate: project.billable_rate ?? null,
estimated_time: project.estimated_time ?? null,
},
}
);
expect(response.status()).toBe(200);
const body = await response.json();
return body.data;
}
export async function createBillableProjectViaApi(
ctx: TestContext,
data: { name: string; billable_rate?: number | null }
@@ -314,6 +394,36 @@ export async function createProjectMemberViaApi(
return body.data as { id: string; billable_rate: number | null };
}
export async function getMembersViaApi(ctx: TestContext) {
const response = await ctx.request.get(
`${PLAYWRIGHT_BASE_URL}/api/v1/organizations/${ctx.orgId}/members`
);
expect(response.status()).toBe(200);
const body = await response.json();
return body.data as Array<{
id: string;
name: string;
email: string;
role: string;
billable_rate: number | null;
is_placeholder: boolean;
}>;
}
export async function updateMemberBillableRateViaApi(
ctx: TestContext,
memberId: string,
billableRate: number | null
) {
const response = await ctx.request.put(
`${PLAYWRIGHT_BASE_URL}/api/v1/organizations/${ctx.orgId}/members/${memberId}`,
{ data: { billable_rate: billableRate } }
);
expect(response.status()).toBe(200);
const body = await response.json();
return body.data;
}
// ──────────────────────────────────────────────────
// Composite helpers (matching existing UI helper signatures)
// ──────────────────────────────────────────────────
@@ -430,11 +540,17 @@ export async function updateOrganizationSettingViaApi(
}
export async function updateOrganizationCurrencyViaWeb(
page: Page,
ctx: TestContext,
currency: string,
name: string = 'Test Organization'
) {
const response = await ctx.request.put(`${PLAYWRIGHT_BASE_URL}/teams/${ctx.orgId}`, {
const cookies = await page.context().cookies();
const xsrfCookie = cookies.find((c) => c.name === 'XSRF-TOKEN');
const xsrfToken = xsrfCookie ? decodeURIComponent(xsrfCookie.value) : '';
const response = await page.request.put(`${PLAYWRIGHT_BASE_URL}/teams/${ctx.orgId}`, {
headers: { 'X-XSRF-TOKEN': xsrfToken },
data: { name, currency },
});
expect(response.status()).toBe(200);

View File

@@ -68,6 +68,85 @@ export async function inviteAndAcceptMember(
await secondUser.close();
}
/**
* Set up an admin member in the owner's organization.
* Returns the admin's page, their member ID, and a cleanup function.
*/
export async function setupAdminUser(
ownerPage: Page,
ownerCtx: TestContext,
browser: Browser
): Promise<{
adminPage: Page;
adminMemberId: string;
closeAdmin: () => Promise<void>;
}> {
const memberId = Math.floor(Math.random() * 100000);
const memberEmail = `admin+${memberId}@admin-perms.test`;
const memberName = 'Admin ' + memberId;
const admin = await registerUser(browser, memberName, memberEmail);
await ownerPage.goto(PLAYWRIGHT_BASE_URL + '/members');
await ownerPage.getByRole('button', { name: 'Invite Member' }).click();
await expect(ownerPage.getByPlaceholder('Member Email')).toBeVisible();
await ownerPage.getByPlaceholder('Member Email').fill(memberEmail);
await ownerPage.getByRole('button', { name: 'Administrator' }).click();
await Promise.all([
ownerPage.waitForResponse(
(response) =>
response.url().includes('/invitations') &&
response.request().method() === 'POST' &&
response.status() === 204
),
ownerPage.getByRole('button', { name: 'Invite Member', exact: true }).click(),
]);
const acceptUrl = await getInvitationAcceptUrl(admin.page.request, memberEmail);
await admin.page.goto(acceptUrl);
await admin.page.waitForURL(/dashboard/);
await admin.page.goto(PLAYWRIGHT_BASE_URL + '/dashboard');
await expect(admin.page.getByTestId('dashboard_view')).toBeVisible({ timeout: 15000 });
const orgSwitcherText = await admin.page
.getByTestId('organization_switcher')
.first()
.textContent();
if (!orgSwitcherText?.includes("John's Organization")) {
const cookies = await admin.page.context().cookies();
const xsrfCookie = cookies.find((c) => c.name === 'XSRF-TOKEN');
const xsrfToken = xsrfCookie ? decodeURIComponent(xsrfCookie.value) : '';
await admin.page.request.put(`${PLAYWRIGHT_BASE_URL}/current-team`, {
headers: {
'X-XSRF-TOKEN': xsrfToken,
Accept: 'text/html',
},
data: { team_id: ownerCtx.orgId },
});
await admin.page.goto(PLAYWRIGHT_BASE_URL + '/dashboard');
await expect(admin.page.getByTestId('dashboard_view')).toBeVisible({ timeout: 15000 });
}
const membersResponse = await ownerCtx.request.get(
`${PLAYWRIGHT_BASE_URL}/api/v1/organizations/${ownerCtx.orgId}/members`
);
expect(membersResponse.status()).toBe(200);
const membersBody = await membersResponse.json();
const adminMember = membersBody.data.find(
(m: { role: string; name: string }) => m.role === 'admin' && m.name === memberName
);
expect(adminMember).toBeTruthy();
return {
adminPage: admin.page,
adminMemberId: adminMember.id,
closeAdmin: admin.close,
};
}
/**
* Set up an employee member in the owner's organization.
* Returns the employee's page, their member ID, and a cleanup function.

16
e2e/utils/table.ts Normal file
View File

@@ -0,0 +1,16 @@
import type { Locator } from '@playwright/test';
/**
* Extract the first cell's text content from each row in a table.
* Useful for reading the ordered names/labels from a sorted table.
*/
export async function getTableRowNames(table: Locator): Promise<string[]> {
const rows = table.getByRole('row');
const count = await rows.count();
const names: string[] = [];
for (let i = 0; i < count; i++) {
const text = await rows.nth(i).locator('div').first().textContent();
if (text) names.push(text.trim());
}
return names;
}

420
package-lock.json generated
View File

@@ -138,9 +138,9 @@
}
},
"node_modules/@apidevtools/swagger-parser/node_modules/ajv": {
"version": "8.17.1",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
"version": "8.18.0",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
"integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -1195,29 +1195,6 @@
"@swc/helpers": "^0.5.0"
}
},
"node_modules/@isaacs/balanced-match": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz",
"integrity": "sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": "20 || >=22"
}
},
"node_modules/@isaacs/brace-expansion": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/@isaacs/brace-expansion/-/brace-expansion-5.0.0.tgz",
"integrity": "sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@isaacs/balanced-match": "^4.0.1"
},
"engines": {
"node": "20 || >=22"
}
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.13",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -1283,22 +1260,22 @@
}
},
"node_modules/@microsoft/api-extractor": {
"version": "7.56.0",
"resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.56.0.tgz",
"integrity": "sha512-H0V69QG5jIb9Ayx35NVBv2lOgFSS3q+Eab2oyGEy0POL3ovYPST+rCNPbwYoczOZXNG8IKjWUmmAMxmDTsXlQA==",
"version": "7.57.6",
"resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.57.6.tgz",
"integrity": "sha512-0rFv/D8Grzw1Mjs2+8NGUR+o4h9LVm5zKRtMeWnpdB5IMJF4TeHCL1zR5LMCIudkOvyvjbhMG5Wjs0B5nqsrRQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@microsoft/api-extractor-model": "7.32.2",
"@microsoft/api-extractor-model": "7.33.4",
"@microsoft/tsdoc": "~0.16.0",
"@microsoft/tsdoc-config": "~0.18.0",
"@rushstack/node-core-library": "5.19.1",
"@rushstack/rig-package": "0.6.0",
"@rushstack/terminal": "0.21.0",
"@rushstack/ts-command-line": "5.1.7",
"@microsoft/tsdoc-config": "~0.18.1",
"@rushstack/node-core-library": "5.20.3",
"@rushstack/rig-package": "0.7.2",
"@rushstack/terminal": "0.22.3",
"@rushstack/ts-command-line": "5.3.3",
"diff": "~8.0.2",
"lodash": "~4.17.15",
"minimatch": "10.0.3",
"lodash": "~4.17.23",
"minimatch": "10.2.1",
"resolve": "~1.22.1",
"semver": "~7.5.4",
"source-map": "~0.6.1",
@@ -1309,15 +1286,38 @@
}
},
"node_modules/@microsoft/api-extractor-model": {
"version": "7.32.2",
"resolved": "https://registry.npmjs.org/@microsoft/api-extractor-model/-/api-extractor-model-7.32.2.tgz",
"integrity": "sha512-Ussc25rAalc+4JJs9HNQE7TuO9y6jpYQX9nWD1DhqUzYPBr3Lr7O9intf+ZY8kD5HnIqeIRJX7ccCT0QyBy2Ww==",
"version": "7.33.4",
"resolved": "https://registry.npmjs.org/@microsoft/api-extractor-model/-/api-extractor-model-7.33.4.tgz",
"integrity": "sha512-u1LTaNTikZAQ9uK6KG1Ms7nvNedsnODnspq/gH2dcyETWvH4hVNGNDvRAEutH66kAmxA4/necElqGNs1FggC8w==",
"dev": true,
"license": "MIT",
"dependencies": {
"@microsoft/tsdoc": "~0.16.0",
"@microsoft/tsdoc-config": "~0.18.0",
"@rushstack/node-core-library": "5.19.1"
"@microsoft/tsdoc-config": "~0.18.1",
"@rushstack/node-core-library": "5.20.3"
}
},
"node_modules/@microsoft/api-extractor/node_modules/balanced-match": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
"integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
"dev": true,
"license": "MIT",
"engines": {
"node": "18 || 20 || >=22"
}
},
"node_modules/@microsoft/api-extractor/node_modules/brace-expansion": {
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.4.tgz",
"integrity": "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==",
"dev": true,
"license": "MIT",
"dependencies": {
"balanced-match": "^4.0.2"
},
"engines": {
"node": "18 || 20 || >=22"
}
},
"node_modules/@microsoft/api-extractor/node_modules/lru-cache": {
@@ -1334,13 +1334,13 @@
}
},
"node_modules/@microsoft/api-extractor/node_modules/minimatch": {
"version": "10.0.3",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.0.3.tgz",
"integrity": "sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==",
"version": "10.2.1",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.1.tgz",
"integrity": "sha512-MClCe8IL5nRRmawL6ib/eT4oLyeKMGCghibcDWK+J0hh0Q8kqSdia6BvbRMVk6mPa6WqUa5uR2oxt6C5jd533A==",
"dev": true,
"license": "ISC",
"license": "BlueOak-1.0.0",
"dependencies": {
"@isaacs/brace-expansion": "^5.0.0"
"brace-expansion": "^5.0.2"
},
"engines": {
"node": "20 || >=22"
@@ -1394,29 +1394,29 @@
"license": "MIT"
},
"node_modules/@microsoft/tsdoc-config": {
"version": "0.18.0",
"resolved": "https://registry.npmjs.org/@microsoft/tsdoc-config/-/tsdoc-config-0.18.0.tgz",
"integrity": "sha512-8N/vClYyfOH+l4fLkkr9+myAoR6M7akc8ntBJ4DJdWH2b09uVfr71+LTMpNyG19fNqWDg8KEDZhx5wxuqHyGjw==",
"version": "0.18.1",
"resolved": "https://registry.npmjs.org/@microsoft/tsdoc-config/-/tsdoc-config-0.18.1.tgz",
"integrity": "sha512-9brPoVdfN9k9g0dcWkFeA7IH9bbcttzDJlXvkf8b2OBzd5MueR1V2wkKBL0abn0otvmkHJC6aapBOTJDDeMCZg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@microsoft/tsdoc": "0.16.0",
"ajv": "~8.12.0",
"ajv": "~8.18.0",
"jju": "~1.4.0",
"resolve": "~1.22.2"
}
},
"node_modules/@microsoft/tsdoc-config/node_modules/ajv": {
"version": "8.12.0",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
"integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
"version": "8.18.0",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
"integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
"dev": true,
"license": "MIT",
"dependencies": {
"fast-deep-equal": "^3.1.1",
"fast-deep-equal": "^3.1.3",
"fast-uri": "^3.0.1",
"json-schema-traverse": "^1.0.0",
"require-from-string": "^2.0.2",
"uri-js": "^4.2.2"
"require-from-string": "^2.0.2"
},
"funding": {
"type": "github",
@@ -1536,9 +1536,9 @@
}
},
"node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.57.1.tgz",
"integrity": "sha512-A6ehUVSiSaaliTxai040ZpZ2zTevHYbvu/lDoeAteHI8QnaosIzm4qwtezfRg1jOYaUmnzLX1AOD6Z+UJjtifg==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.59.0.tgz",
"integrity": "sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==",
"cpu": [
"arm"
],
@@ -1549,9 +1549,9 @@
]
},
"node_modules/@rollup/rollup-android-arm64": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.57.1.tgz",
"integrity": "sha512-dQaAddCY9YgkFHZcFNS/606Exo8vcLHwArFZ7vxXq4rigo2bb494/xKMMwRRQW6ug7Js6yXmBZhSBRuBvCCQ3w==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.59.0.tgz",
"integrity": "sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==",
"cpu": [
"arm64"
],
@@ -1562,9 +1562,9 @@
]
},
"node_modules/@rollup/rollup-darwin-arm64": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.57.1.tgz",
"integrity": "sha512-crNPrwJOrRxagUYeMn/DZwqN88SDmwaJ8Cvi/TN1HnWBU7GwknckyosC2gd0IqYRsHDEnXf328o9/HC6OkPgOg==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.59.0.tgz",
"integrity": "sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==",
"cpu": [
"arm64"
],
@@ -1575,9 +1575,9 @@
]
},
"node_modules/@rollup/rollup-darwin-x64": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.57.1.tgz",
"integrity": "sha512-Ji8g8ChVbKrhFtig5QBV7iMaJrGtpHelkB3lsaKzadFBe58gmjfGXAOfI5FV0lYMH8wiqsxKQ1C9B0YTRXVy4w==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.59.0.tgz",
"integrity": "sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==",
"cpu": [
"x64"
],
@@ -1588,9 +1588,9 @@
]
},
"node_modules/@rollup/rollup-freebsd-arm64": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.57.1.tgz",
"integrity": "sha512-R+/WwhsjmwodAcz65guCGFRkMb4gKWTcIeLy60JJQbXrJ97BOXHxnkPFrP+YwFlaS0m+uWJTstrUA9o+UchFug==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.59.0.tgz",
"integrity": "sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==",
"cpu": [
"arm64"
],
@@ -1601,9 +1601,9 @@
]
},
"node_modules/@rollup/rollup-freebsd-x64": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.57.1.tgz",
"integrity": "sha512-IEQTCHeiTOnAUC3IDQdzRAGj3jOAYNr9kBguI7MQAAZK3caezRrg0GxAb6Hchg4lxdZEI5Oq3iov/w/hnFWY9Q==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.59.0.tgz",
"integrity": "sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==",
"cpu": [
"x64"
],
@@ -1614,9 +1614,9 @@
]
},
"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.57.1.tgz",
"integrity": "sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.59.0.tgz",
"integrity": "sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==",
"cpu": [
"arm"
],
@@ -1627,9 +1627,9 @@
]
},
"node_modules/@rollup/rollup-linux-arm-musleabihf": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.57.1.tgz",
"integrity": "sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.59.0.tgz",
"integrity": "sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==",
"cpu": [
"arm"
],
@@ -1640,9 +1640,9 @@
]
},
"node_modules/@rollup/rollup-linux-arm64-gnu": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.57.1.tgz",
"integrity": "sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.59.0.tgz",
"integrity": "sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==",
"cpu": [
"arm64"
],
@@ -1653,9 +1653,9 @@
]
},
"node_modules/@rollup/rollup-linux-arm64-musl": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.57.1.tgz",
"integrity": "sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.59.0.tgz",
"integrity": "sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==",
"cpu": [
"arm64"
],
@@ -1666,9 +1666,9 @@
]
},
"node_modules/@rollup/rollup-linux-loong64-gnu": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.57.1.tgz",
"integrity": "sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.59.0.tgz",
"integrity": "sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==",
"cpu": [
"loong64"
],
@@ -1679,9 +1679,9 @@
]
},
"node_modules/@rollup/rollup-linux-loong64-musl": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.57.1.tgz",
"integrity": "sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.59.0.tgz",
"integrity": "sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==",
"cpu": [
"loong64"
],
@@ -1692,9 +1692,9 @@
]
},
"node_modules/@rollup/rollup-linux-ppc64-gnu": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.57.1.tgz",
"integrity": "sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.59.0.tgz",
"integrity": "sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==",
"cpu": [
"ppc64"
],
@@ -1705,9 +1705,9 @@
]
},
"node_modules/@rollup/rollup-linux-ppc64-musl": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.57.1.tgz",
"integrity": "sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.59.0.tgz",
"integrity": "sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==",
"cpu": [
"ppc64"
],
@@ -1718,9 +1718,9 @@
]
},
"node_modules/@rollup/rollup-linux-riscv64-gnu": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.57.1.tgz",
"integrity": "sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.59.0.tgz",
"integrity": "sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==",
"cpu": [
"riscv64"
],
@@ -1731,9 +1731,9 @@
]
},
"node_modules/@rollup/rollup-linux-riscv64-musl": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.57.1.tgz",
"integrity": "sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.59.0.tgz",
"integrity": "sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==",
"cpu": [
"riscv64"
],
@@ -1744,9 +1744,9 @@
]
},
"node_modules/@rollup/rollup-linux-s390x-gnu": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.57.1.tgz",
"integrity": "sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.59.0.tgz",
"integrity": "sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==",
"cpu": [
"s390x"
],
@@ -1757,9 +1757,9 @@
]
},
"node_modules/@rollup/rollup-linux-x64-gnu": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.57.1.tgz",
"integrity": "sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.59.0.tgz",
"integrity": "sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==",
"cpu": [
"x64"
],
@@ -1770,9 +1770,9 @@
]
},
"node_modules/@rollup/rollup-linux-x64-musl": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.57.1.tgz",
"integrity": "sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.59.0.tgz",
"integrity": "sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==",
"cpu": [
"x64"
],
@@ -1783,9 +1783,9 @@
]
},
"node_modules/@rollup/rollup-openbsd-x64": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.57.1.tgz",
"integrity": "sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.59.0.tgz",
"integrity": "sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==",
"cpu": [
"x64"
],
@@ -1796,9 +1796,9 @@
]
},
"node_modules/@rollup/rollup-openharmony-arm64": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.57.1.tgz",
"integrity": "sha512-4wYoDpNg6o/oPximyc/NG+mYUejZrCU2q+2w6YZqrAs2UcNUChIZXjtafAiiZSUc7On8v5NyNj34Kzj/Ltk6dQ==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.59.0.tgz",
"integrity": "sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==",
"cpu": [
"arm64"
],
@@ -1809,9 +1809,9 @@
]
},
"node_modules/@rollup/rollup-win32-arm64-msvc": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.57.1.tgz",
"integrity": "sha512-O54mtsV/6LW3P8qdTcamQmuC990HDfR71lo44oZMZlXU4tzLrbvTii87Ni9opq60ds0YzuAlEr/GNwuNluZyMQ==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.59.0.tgz",
"integrity": "sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==",
"cpu": [
"arm64"
],
@@ -1822,9 +1822,9 @@
]
},
"node_modules/@rollup/rollup-win32-ia32-msvc": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.57.1.tgz",
"integrity": "sha512-P3dLS+IerxCT/7D2q2FYcRdWRl22dNbrbBEtxdWhXrfIMPP9lQhb5h4Du04mdl5Woq05jVCDPCMF7Ub0NAjIew==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.59.0.tgz",
"integrity": "sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==",
"cpu": [
"ia32"
],
@@ -1835,9 +1835,9 @@
]
},
"node_modules/@rollup/rollup-win32-x64-gnu": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.57.1.tgz",
"integrity": "sha512-VMBH2eOOaKGtIJYleXsi2B8CPVADrh+TyNxJ4mWPnKfLB/DBUmzW+5m1xUrcwWoMfSLagIRpjUFeW5CO5hyciQ==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.59.0.tgz",
"integrity": "sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==",
"cpu": [
"x64"
],
@@ -1848,9 +1848,9 @@
]
},
"node_modules/@rollup/rollup-win32-x64-msvc": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.57.1.tgz",
"integrity": "sha512-mxRFDdHIWRxg3UfIIAwCm6NzvxG0jDX/wBN6KsQFTvKFqqg9vTrWUE68qEjHt19A5wwx5X5aUi2zuZT7YR0jrA==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.59.0.tgz",
"integrity": "sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==",
"cpu": [
"x64"
],
@@ -1867,13 +1867,13 @@
"license": "MIT"
},
"node_modules/@rushstack/node-core-library": {
"version": "5.19.1",
"resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-5.19.1.tgz",
"integrity": "sha512-ESpb2Tajlatgbmzzukg6zyAhH+sICqJR2CNXNhXcEbz6UGCQfrKCtkxOpJTftWc8RGouroHG0Nud1SJAszvpmA==",
"version": "5.20.3",
"resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-5.20.3.tgz",
"integrity": "sha512-95JgEPq2k7tHxhF9/OJnnyHDXfC9cLhhta0An/6MlkDsX2A6dTzDrTUG18vx4vjc280V0fi0xDH9iQczpSuWsw==",
"dev": true,
"license": "MIT",
"dependencies": {
"ajv": "~8.13.0",
"ajv": "~8.18.0",
"ajv-draft-04": "~1.0.0",
"ajv-formats": "~3.0.1",
"fs-extra": "~11.3.0",
@@ -1892,16 +1892,16 @@
}
},
"node_modules/@rushstack/node-core-library/node_modules/ajv": {
"version": "8.13.0",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.13.0.tgz",
"integrity": "sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==",
"version": "8.18.0",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
"integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
"dev": true,
"license": "MIT",
"dependencies": {
"fast-deep-equal": "^3.1.3",
"fast-uri": "^3.0.1",
"json-schema-traverse": "^1.0.0",
"require-from-string": "^2.0.2",
"uri-js": "^4.4.1"
"require-from-string": "^2.0.2"
},
"funding": {
"type": "github",
@@ -1982,9 +1982,9 @@
"license": "ISC"
},
"node_modules/@rushstack/problem-matcher": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/@rushstack/problem-matcher/-/problem-matcher-0.1.1.tgz",
"integrity": "sha512-Fm5XtS7+G8HLcJHCWpES5VmeMyjAKaWeyZU5qPzZC+22mPlJzAsOxymHiWIfuirtPckX3aptWws+K2d0BzniJA==",
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@rushstack/problem-matcher/-/problem-matcher-0.2.1.tgz",
"integrity": "sha512-gulfhBs6n+I5b7DvjKRfhMGyUejtSgOHTclF/eONr8hcgF1APEDjhxIsfdUYYMzC3rvLwGluqLjbwCFZ8nxrog==",
"dev": true,
"license": "MIT",
"peerDependencies": {
@@ -1997,9 +1997,9 @@
}
},
"node_modules/@rushstack/rig-package": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/@rushstack/rig-package/-/rig-package-0.6.0.tgz",
"integrity": "sha512-ZQmfzsLE2+Y91GF15c65L/slMRVhF6Hycq04D4TwtdGaUAbIXXg9c5pKA5KFU7M4QMaihoobp9JJYpYcaY3zOw==",
"version": "0.7.2",
"resolved": "https://registry.npmjs.org/@rushstack/rig-package/-/rig-package-0.7.2.tgz",
"integrity": "sha512-9XbFWuqMYcHUso4mnETfhGVUSaADBRj6HUAAEYk50nMPn8WRICmBuCphycQGNB3duIR6EEZX3Xj3SYc2XiP+9A==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -2008,14 +2008,14 @@
}
},
"node_modules/@rushstack/terminal": {
"version": "0.21.0",
"resolved": "https://registry.npmjs.org/@rushstack/terminal/-/terminal-0.21.0.tgz",
"integrity": "sha512-cLaI4HwCNYmknM5ns4G+drqdEB6q3dCPV423+d3TZeBusYSSm09+nR7CnhzJMjJqeRcdMAaLnrA4M/3xDz4R3w==",
"version": "0.22.3",
"resolved": "https://registry.npmjs.org/@rushstack/terminal/-/terminal-0.22.3.tgz",
"integrity": "sha512-gHC9pIMrUPzAbBiI4VZMU7Q+rsCzb8hJl36lFIulIzoceKotyKL3Rd76AZ2CryCTKEg+0bnTj406HE5YY5OQvw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@rushstack/node-core-library": "5.19.1",
"@rushstack/problem-matcher": "0.1.1",
"@rushstack/node-core-library": "5.20.3",
"@rushstack/problem-matcher": "0.2.1",
"supports-color": "~8.1.1"
},
"peerDependencies": {
@@ -2044,13 +2044,13 @@
}
},
"node_modules/@rushstack/ts-command-line": {
"version": "5.1.7",
"resolved": "https://registry.npmjs.org/@rushstack/ts-command-line/-/ts-command-line-5.1.7.tgz",
"integrity": "sha512-Ugwl6flarZcL2nqH5IXFYk3UR3mBVDsVFlCQW/Oaqidvdb/5Ota6b/Z3JXWIdqV3rOR2/JrYoAHanWF5rgenXA==",
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/@rushstack/ts-command-line/-/ts-command-line-5.3.3.tgz",
"integrity": "sha512-c+ltdcvC7ym+10lhwR/vWiOhsrm/bP3By2VsFcs5qTKv+6tTmxgbVrtJ5NdNjANiV5TcmOZgUN+5KYQ4llsvEw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@rushstack/terminal": "0.21.0",
"@rushstack/terminal": "0.22.3",
"@types/argparse": "1.0.38",
"argparse": "~1.0.9",
"string-argv": "~0.3.1"
@@ -2661,12 +2661,12 @@
}
},
"node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
"version": "9.0.5",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
"version": "9.0.9",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
"integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
"license": "ISC",
"dependencies": {
"brace-expansion": "^2.0.1"
"brace-expansion": "^2.0.2"
},
"engines": {
"node": ">=16 || 14 >=14.17"
@@ -3131,9 +3131,9 @@
}
},
"node_modules/ajv": {
"version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
"version": "6.14.0",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
"integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
"license": "MIT",
"dependencies": {
"fast-deep-equal": "^3.1.1",
@@ -3165,9 +3165,9 @@
}
},
"node_modules/ajv-formats/node_modules/ajv": {
"version": "8.17.1",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
"version": "8.18.0",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
"integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -3297,13 +3297,13 @@
}
},
"node_modules/axios": {
"version": "1.13.4",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.13.4.tgz",
"integrity": "sha512-1wVkUaAO6WyaYtCkcYCOx12ZgpGf9Zif+qXa4n+oYzK558YryKqiL6UWwd5DqiH3VRW0GYhTZQ/vlgJrCoNQlg==",
"version": "1.13.6",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.13.6.tgz",
"integrity": "sha512-ChTCHMouEe2kn713WHbQGcuYrr6fXTBiu460OTwWrWob16g1bXn4vtz07Ope7ewMozJAnEquLk5lWQWtBig9DQ==",
"license": "MIT",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.4",
"follow-redirects": "^1.15.11",
"form-data": "^4.0.5",
"proxy-from-env": "^1.1.0"
}
},
@@ -5071,9 +5071,9 @@
}
},
"node_modules/minimatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
"integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
"license": "ISC",
"dependencies": {
"brace-expansion": "^1.1.7"
@@ -5910,9 +5910,9 @@
}
},
"node_modules/qs": {
"version": "6.14.1",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.14.1.tgz",
"integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
"version": "6.15.0",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz",
"integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==",
"dev": true,
"license": "BSD-3-Clause",
"dependencies": {
@@ -6200,9 +6200,9 @@
"license": "MIT"
},
"node_modules/rollup": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
"integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
"version": "4.59.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
"integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==",
"license": "MIT",
"dependencies": {
"@types/estree": "1.0.8"
@@ -6215,31 +6215,31 @@
"npm": ">=8.0.0"
},
"optionalDependencies": {
"@rollup/rollup-android-arm-eabi": "4.57.1",
"@rollup/rollup-android-arm64": "4.57.1",
"@rollup/rollup-darwin-arm64": "4.57.1",
"@rollup/rollup-darwin-x64": "4.57.1",
"@rollup/rollup-freebsd-arm64": "4.57.1",
"@rollup/rollup-freebsd-x64": "4.57.1",
"@rollup/rollup-linux-arm-gnueabihf": "4.57.1",
"@rollup/rollup-linux-arm-musleabihf": "4.57.1",
"@rollup/rollup-linux-arm64-gnu": "4.57.1",
"@rollup/rollup-linux-arm64-musl": "4.57.1",
"@rollup/rollup-linux-loong64-gnu": "4.57.1",
"@rollup/rollup-linux-loong64-musl": "4.57.1",
"@rollup/rollup-linux-ppc64-gnu": "4.57.1",
"@rollup/rollup-linux-ppc64-musl": "4.57.1",
"@rollup/rollup-linux-riscv64-gnu": "4.57.1",
"@rollup/rollup-linux-riscv64-musl": "4.57.1",
"@rollup/rollup-linux-s390x-gnu": "4.57.1",
"@rollup/rollup-linux-x64-gnu": "4.57.1",
"@rollup/rollup-linux-x64-musl": "4.57.1",
"@rollup/rollup-openbsd-x64": "4.57.1",
"@rollup/rollup-openharmony-arm64": "4.57.1",
"@rollup/rollup-win32-arm64-msvc": "4.57.1",
"@rollup/rollup-win32-ia32-msvc": "4.57.1",
"@rollup/rollup-win32-x64-gnu": "4.57.1",
"@rollup/rollup-win32-x64-msvc": "4.57.1",
"@rollup/rollup-android-arm-eabi": "4.59.0",
"@rollup/rollup-android-arm64": "4.59.0",
"@rollup/rollup-darwin-arm64": "4.59.0",
"@rollup/rollup-darwin-x64": "4.59.0",
"@rollup/rollup-freebsd-arm64": "4.59.0",
"@rollup/rollup-freebsd-x64": "4.59.0",
"@rollup/rollup-linux-arm-gnueabihf": "4.59.0",
"@rollup/rollup-linux-arm-musleabihf": "4.59.0",
"@rollup/rollup-linux-arm64-gnu": "4.59.0",
"@rollup/rollup-linux-arm64-musl": "4.59.0",
"@rollup/rollup-linux-loong64-gnu": "4.59.0",
"@rollup/rollup-linux-loong64-musl": "4.59.0",
"@rollup/rollup-linux-ppc64-gnu": "4.59.0",
"@rollup/rollup-linux-ppc64-musl": "4.59.0",
"@rollup/rollup-linux-riscv64-gnu": "4.59.0",
"@rollup/rollup-linux-riscv64-musl": "4.59.0",
"@rollup/rollup-linux-s390x-gnu": "4.59.0",
"@rollup/rollup-linux-x64-gnu": "4.59.0",
"@rollup/rollup-linux-x64-musl": "4.59.0",
"@rollup/rollup-openbsd-x64": "4.59.0",
"@rollup/rollup-openharmony-arm64": "4.59.0",
"@rollup/rollup-win32-arm64-msvc": "4.59.0",
"@rollup/rollup-win32-ia32-msvc": "4.59.0",
"@rollup/rollup-win32-x64-gnu": "4.59.0",
"@rollup/rollup-win32-x64-msvc": "4.59.0",
"fsevents": "~2.3.2"
}
},
@@ -7149,13 +7149,13 @@
}
},
"node_modules/vite-plugin-dts/node_modules/minimatch": {
"version": "9.0.5",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
"version": "9.0.9",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
"integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
"dev": true,
"license": "ISC",
"dependencies": {
"brace-expansion": "^2.0.1"
"brace-expansion": "^2.0.2"
},
"engines": {
"node": ">=16 || 14 >=14.17"
@@ -7434,7 +7434,7 @@
},
"resources/js/packages/ui": {
"name": "@solidtime/ui",
"version": "0.0.15",
"version": "0.0.16",
"license": "AGPL-3.0",
"devDependencies": {
"vite-plugin-dts": "^4.0.3"

View File

@@ -2,7 +2,7 @@ import { test as baseTest } from '@playwright/test';
import type { Page } from '@playwright/test';
import { PLAYWRIGHT_BASE_URL, TEST_USER_PASSWORD } from './config';
import { type TestContext, setupTestContext } from '../e2e/utils/api';
import { setupEmployeeUser } from '../e2e/utils/members';
import { setupAdminUser, setupEmployeeUser } from '../e2e/utils/members';
export * from '@playwright/test';
export type { TestContext };
@@ -12,6 +12,11 @@ export interface EmployeeFixture {
memberId: string;
}
export interface AdminFixture {
page: Page;
memberId: string;
}
/**
* API-based authentication fixture - creates a new user via HTTP requests instead of UI interactions.
* This is ~10-25x faster than UI-based authentication (~100-200ms vs ~3-5s).
@@ -19,7 +24,7 @@ export interface EmployeeFixture {
* Uses page.context().request() to ensure cookies are shared between the API request and page.
*/
export const test = baseTest.extend<
{ ctx: TestContext; employee: EmployeeFixture },
{ ctx: TestContext; employee: EmployeeFixture; admin: AdminFixture },
{ workerStorageState: string }
>({
page: async ({ page }, use) => {
@@ -100,4 +105,10 @@ export const test = baseTest.extend<
await use({ page: employeePage, memberId: employeeMemberId });
await closeEmployee();
},
admin: async ({ page, ctx, browser }, use) => {
const { adminPage, adminMemberId, closeAdmin } = await setupAdminUser(page, ctx, browser);
await use({ page: adminPage, memberId: adminMemberId });
await closeAdmin();
},
});

View File

@@ -2,17 +2,104 @@
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
import { UserCircleIcon } from '@heroicons/vue/24/solid';
import { PlusIcon } from '@heroicons/vue/16/solid';
import { type Component, ref } from 'vue';
import { type Component, computed, ref } from 'vue';
import { type Client } from '@/packages/api/src';
import ClientTableRow from '@/Components/Common/Client/ClientTableRow.vue';
import ClientCreateModal from '@/Components/Common/Client/ClientCreateModal.vue';
import ClientTableHeading from '@/Components/Common/Client/ClientTableHeading.vue';
import { canCreateClients } from '@/utils/permissions';
import { useProjectsQuery } from '@/utils/useProjectsQuery';
import {
useVueTable,
getCoreRowModel,
getSortedRowModel,
type SortingState,
} from '@tanstack/vue-table';
defineProps<{
export type SortColumn = 'name' | 'projects_count' | 'status';
export type SortDirection = 'asc' | 'desc';
const props = defineProps<{
clients: Client[];
sortColumn: SortColumn;
sortDirection: SortDirection;
}>();
const emit = defineEmits<{
sort: [column: SortColumn, direction: SortDirection];
}>();
const createClient = ref(false);
const { projects } = useProjectsQuery();
const projectCountMap = computed(() => {
const map = new Map<string, number>();
projects.value.forEach((project) => {
if (project.client_id) {
map.set(project.client_id, (map.get(project.client_id) ?? 0) + 1);
}
});
return map;
});
const sorting = computed<SortingState>(() => [
{
id: props.sortColumn,
desc: props.sortDirection === 'desc',
},
]);
const columns = computed(() => [
{
id: 'name',
accessorFn: (row: Client) => row.name.toLowerCase(),
},
{
id: 'projects_count',
sortDescFirst: true,
accessorFn: (row: Client) => projectCountMap.value.get(row.id) ?? 0,
},
{
id: 'status',
accessorFn: (row: Client) => (row.is_archived ? 1 : 0),
},
]);
const descFirstColumns = new Set<SortColumn>(
columns.value
.filter((c) => 'sortDescFirst' in c && c.sortDescFirst)
.map((c) => c.id as SortColumn)
);
function handleSort(column: SortColumn) {
if (props.sortColumn === column) {
emit('sort', column, props.sortDirection === 'asc' ? 'desc' : 'asc');
} else {
emit('sort', column, descFirstColumns.has(column) ? 'desc' : 'asc');
}
}
const table = useVueTable({
get data() {
return props.clients;
},
get columns() {
return columns.value;
},
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
state: {
get sorting() {
return sorting.value;
},
},
manualSorting: false,
});
const sortedClients = computed(() => {
return table.getRowModel().rows.map((row) => row.original);
});
</script>
<template>
@@ -23,8 +110,12 @@ const createClient = ref(false);
data-testid="client_table"
class="grid min-w-full"
style="grid-template-columns: 1fr 150px 200px 80px">
<ClientTableHeading></ClientTableHeading>
<div v-if="clients.length === 0" class="col-span-3 py-24 text-center">
<ClientTableHeading
:sort-column="props.sortColumn"
:sort-direction="props.sortDirection"
:desc-first-columns="descFirstColumns"
@sort="handleSort"></ClientTableHeading>
<div v-if="sortedClients.length === 0" class="col-span-3 py-24 text-center">
<UserCircleIcon class="w-8 text-icon-default inline pb-2"></UserCircleIcon>
<h3 class="text-text-primary font-semibold">No clients found</h3>
<p v-if="canCreateClients()" class="pb-5">Create your first client now!</p>
@@ -35,7 +126,7 @@ const createClient = ref(false);
>Create your First Client
</SecondaryButton>
</div>
<template v-for="client in clients" :key="client.id">
<template v-for="client in sortedClients" :key="client.id">
<ClientTableRow :client="client"></ClientTableRow>
</template>
</div>

View File

@@ -1,18 +1,67 @@
<script setup lang="ts">
import TableHeading from '@/Components/Common/TableHeading.vue';
import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
import type { SortColumn, SortDirection } from '@/Components/Common/Client/ClientTable.vue';
const props = defineProps<{
sortColumn: SortColumn;
sortDirection: SortDirection;
descFirstColumns: ReadonlySet<SortColumn>;
}>();
const emit = defineEmits<{
sort: [column: SortColumn];
}>();
function handleSort(column: SortColumn) {
emit('sort', column);
}
function isSorted(column: SortColumn): boolean {
return props.sortColumn === column;
}
function isChevronDown(column: SortColumn): boolean {
if (!isSorted(column)) return false;
return props.descFirstColumns.has(column)
? props.sortDirection === 'desc'
: props.sortDirection === 'asc';
}
function isChevronUp(column: SortColumn): boolean {
if (!isSorted(column)) return false;
return !isChevronDown(column);
}
</script>
<template>
<TableHeading>
<div class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
<div
class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('name')">
Name
<ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('name')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('projects_count')">
Projects
<ChevronDownIcon v-if="isChevronDown('projects_count')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('projects_count')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('status')">
Status
<ChevronDownIcon v-if="isChevronDown('status')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('status')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div class="px-3 py-1.5 text-left text-text-tertiary"></div>
<div class="px-3 py-1.5 text-left text-text-tertiary">Status</div>
<div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
<span class="sr-only">Edit</span>
</div>
</TableHeading>
</template>
<style scoped></style>

View File

@@ -36,13 +36,13 @@ const showEditModal = ref(false);
<TableRow>
<ClientEditModal v-model:show="showEditModal" :client="client"></ClientEditModal>
<div
class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
class="whitespace-nowrap flex items-center space-x-5 py-4 pr-3 text-sm font-medium text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
<span>
{{ client.name }}
</span>
</div>
<div
class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
class="whitespace-nowrap flex items-center px-3 py-4 text-sm font-medium text-text-primary">
<span class="text-text-secondary"> {{ projectCount }} Projects </span>
</div>
<div

View File

@@ -1,20 +1,35 @@
<script setup lang="ts">
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
import DialogModal from '@/packages/ui/src/DialogModal.vue';
import { computed, ref } from 'vue';
import { computed, onMounted, ref, watch } from 'vue';
import type { Member, UpdateMemberBody } from '@/packages/api/src';
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
import { type MemberBillableKey, useMembersStore } from '@/utils/useMembers';
import BillableRateInput from '@/packages/ui/src/Input/BillableRateInput.vue';
import { Field, FieldLabel } from '@/packages/ui/src/field';
import { Field, FieldLabel, FieldDescription } from '@/packages/ui/src/field';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/Components/ui/select';
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@/packages/ui/src/tooltip';
import MemberBillableRateModal from '@/Components/Common/Member/MemberBillableRateModal.vue';
import MemberBillableSelect from '@/Components/Common/Member/MemberBillableSelect.vue';
import { onMounted, watch } from 'vue';
import MemberRoleSelect from '@/Components/Common/Member/MemberRoleSelect.vue';
import MemberOwnershipTransferConfirmModal from '@/Components/Common/Member/MemberOwnershipTransferConfirmModal.vue';
import { getOrganizationCurrencyString } from '@/utils/money';
import BillableIcon from '@/packages/ui/src/Icons/BillableIcon.vue';
import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
import { getCurrentOrganizationId } from '@/utils/useUser';
const { updateMember } = useMembersStore();
const { organization } = useOrganizationQuery(getCurrentOrganizationId()!);
const show = defineModel('show', { default: false });
const saving = ref(false);
@@ -75,10 +90,26 @@ watch(billableRateSelect, () => {
if (billableRateSelect.value === 'default-rate') {
memberBody.value.billable_rate = null;
} else if (billableRateSelect.value === 'custom-rate') {
memberBody.value.billable_rate = props.member.billable_rate ?? 0;
if (!memberBody.value.billable_rate) {
memberBody.value.billable_rate = organization.value?.billable_rate ?? 0;
}
}
});
const displayedRate = computed({
get() {
if (billableRateSelect.value === 'default-rate') {
return organization.value?.billable_rate ?? null;
}
return memberBody.value.billable_rate;
},
set(value: number | null) {
if (billableRateSelect.value === 'custom-rate') {
memberBody.value.billable_rate = value;
}
},
});
const roleDescriptionTexts = {
'owner':
'The owner has full access of the organization. The owner is the only role that can: delete the organization, transfer the ownership to another user and access to the billing settings',
@@ -120,34 +151,55 @@ const roleDescription = computed(() => {
<template #content>
<div class="pb-5 pt-2 divide-y divide-border-secondary">
<div class="pb-5 flex space-x-6">
<div class="pb-5">
<Field>
<FieldLabel for="role">Role</FieldLabel>
<MemberRoleSelect v-model="memberBody.role" name="role"></MemberRoleSelect>
<FieldDescription v-if="roleDescription">{{
roleDescription
}}</FieldDescription>
</Field>
<div class="flex-1 text-xs flex items-center pt-6">
<p>{{ roleDescription }}</p>
</div>
</div>
<div class="flex items-center space-x-4 pt-5">
<div class="col-span-6 sm:col-span-4 flex-1 flex space-x-5">
<Field>
<FieldLabel for="billableType">Billable</FieldLabel>
<MemberBillableSelect
v-model="billableRateSelect"
name="billableType"></MemberBillableSelect>
</Field>
<Field v-if="billableRateSelect === 'custom-rate'" class="flex-1">
<FieldLabel for="memberBillableRate">Billable Rate</FieldLabel>
<div class="pt-5">
<Field>
<FieldLabel :icon="BillableIcon" for="billableRateType"
>Billable Rate</FieldLabel
>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
<Select v-model="billableRateSelect">
<SelectTrigger id="billableRateType">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="default-rate">Default Rate</SelectItem>
<SelectItem value="custom-rate">Custom Rate</SelectItem>
</SelectContent>
</Select>
<TooltipProvider v-if="billableRateSelect === 'default-rate'">
<Tooltip>
<TooltipTrigger as-child>
<div>
<BillableRateInput
v-model="displayedRate"
:currency="getOrganizationCurrencyString()"
disabled
name="memberBillableRate" />
</div>
</TooltipTrigger>
<TooltipContent
>Uses the default rate of the organization</TooltipContent
>
</Tooltip>
</TooltipProvider>
<BillableRateInput
v-model="memberBody.billable_rate"
v-else
v-model="displayedRate"
focus
class="w-full"
:currency="getOrganizationCurrencyString()"
name="memberBillableRate"
@keydown.enter="saveWithChecks()"></BillableRateInput>
</Field>
</div>
@keydown.enter="saveWithChecks()" />
</div>
</Field>
</div>
</div>
</template>

View File

@@ -2,19 +2,117 @@
import MemberTableHeading from '@/Components/Common/Member/MemberTableHeading.vue';
import MemberTableRow from '@/Components/Common/Member/MemberTableRow.vue';
import { useMembersQuery } from '@/utils/useMembersQuery';
import type { Member } from '@/packages/api/src';
import { computed } from 'vue';
import {
useVueTable,
getCoreRowModel,
getSortedRowModel,
type SortingState,
} from '@tanstack/vue-table';
export type SortColumn = 'name' | 'email' | 'role' | 'billable_rate' | 'status';
export type SortDirection = 'asc' | 'desc';
const props = defineProps<{
sortColumn: SortColumn;
sortDirection: SortDirection;
}>();
const emit = defineEmits<{
sort: [column: SortColumn, direction: SortDirection];
}>();
const { members } = useMembersQuery();
const roleOrder: Record<string, number> = {
owner: 0,
admin: 1,
manager: 2,
employee: 3,
placeholder: 4,
};
const sorting = computed<SortingState>(() => [
{
id: props.sortColumn,
desc: props.sortDirection === 'desc',
},
]);
const columns = [
{
id: 'name',
accessorFn: (row: Member) => row.name.toLowerCase(),
},
{
id: 'email',
accessorFn: (row: Member) => row.email.toLowerCase(),
},
{
id: 'role',
accessorFn: (row: Member) => roleOrder[row.role] ?? 99,
},
{
id: 'billable_rate',
sortDescFirst: true,
sortUndefined: 'last' as const,
accessorFn: (row: Member) => {
if (row.billable_rate === null) return undefined;
return row.billable_rate;
},
},
{
id: 'status',
accessorFn: (row: Member) => (row.is_placeholder ? 1 : 0),
},
];
const descFirstColumns = new Set<SortColumn>(
columns.filter((c) => c.sortDescFirst).map((c) => c.id as SortColumn)
);
function handleSort(column: SortColumn) {
if (props.sortColumn === column) {
emit('sort', column, props.sortDirection === 'asc' ? 'desc' : 'asc');
} else {
emit('sort', column, descFirstColumns.has(column) ? 'desc' : 'asc');
}
}
const table = useVueTable({
get data() {
return members.value;
},
columns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
state: {
get sorting() {
return sorting.value;
},
},
manualSorting: false,
});
const sortedMembers = computed(() => {
return table.getRowModel().rows.map((row) => row.original);
});
</script>
<template>
<div class="flow-root max-w-[100vw] overflow-x-auto">
<div class="inline-block min-w-full align-middle">
<div
data-testid="client_table"
data-testid="member_table"
class="grid min-w-full"
style="grid-template-columns: 1fr 1fr 180px 180px 150px 130px">
<MemberTableHeading></MemberTableHeading>
<template v-for="member in members" :key="member.id">
<MemberTableHeading
:sort-column="props.sortColumn"
:sort-direction="props.sortDirection"
:desc-first-columns="descFirstColumns"
@sort="handleSort"></MemberTableHeading>
<template v-for="member in sortedMembers" :key="member.id">
<MemberTableRow :member="member"></MemberTableRow>
</template>
</div>

View File

@@ -1,20 +1,83 @@
<script setup lang="ts">
import TableHeading from '@/Components/Common/TableHeading.vue';
import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
import type { SortColumn, SortDirection } from '@/Components/Common/Member/MemberTable.vue';
const props = defineProps<{
sortColumn: SortColumn;
sortDirection: SortDirection;
descFirstColumns: ReadonlySet<SortColumn>;
}>();
const emit = defineEmits<{
sort: [column: SortColumn];
}>();
function handleSort(column: SortColumn) {
emit('sort', column);
}
function isSorted(column: SortColumn): boolean {
return props.sortColumn === column;
}
function isChevronDown(column: SortColumn): boolean {
if (!isSorted(column)) return false;
return props.descFirstColumns.has(column)
? props.sortDirection === 'desc'
: props.sortDirection === 'asc';
}
function isChevronUp(column: SortColumn): boolean {
if (!isSorted(column)) return false;
return !isChevronDown(column);
}
</script>
<template>
<TableHeading>
<div class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
<div
class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('name')">
Name
<ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('name')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('email')">
Email
<ChevronDownIcon v-if="isChevronDown('email')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('email')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('role')">
Role
<ChevronDownIcon v-if="isChevronDown('role')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('role')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('billable_rate')">
Billable Rate
<ChevronDownIcon v-if="isChevronDown('billable_rate')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('billable_rate')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('status')">
Status
<ChevronDownIcon v-if="isChevronDown('status')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('status')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div class="px-3 py-1.5 text-left text-text-tertiary">Email</div>
<div class="px-3 py-1.5 text-left text-text-tertiary">Role</div>
<div class="px-3 py-1.5 text-left text-text-tertiary">Billable Rate</div>
<div class="px-3 py-1.5 text-left text-text-tertiary">Status</div>
<div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">
<span class="sr-only">Edit</span>
</div>
</TableHeading>
</template>
<style scoped></style>

View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import type { Member, Organization } from '@/packages/api/src';
import { api } from '@/packages/api/src';
import { CheckCircleIcon, UserCircleIcon } from '@heroicons/vue/20/solid';
import { CheckCircleIcon, UserCircleIcon } from '@heroicons/vue/24/outline';
import MemberMoreOptionsDropdown from '@/Components/Common/Member/MemberMoreOptionsDropdown.vue';
import TableRow from '@/Components/TableRow.vue';
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
@@ -82,11 +82,15 @@ const userHasValidMailAddress = computed(() => {
}}
</div>
<div
class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary flex space-x-1 items-center font-medium">
<CheckCircleIcon v-if="member.is_placeholder === false" class="w-5"></CheckCircleIcon>
<span v-if="member.is_placeholder === false">Active</span>
<UserCircleIcon v-if="member.is_placeholder === true" class="w-5"></UserCircleIcon>
<span v-if="member.is_placeholder === true">Inactive</span>
class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary flex space-x-1.5 items-center font-medium">
<template v-if="member.is_placeholder === false">
<CheckCircleIcon class="w-4 text-icon-default"></CheckCircleIcon>
<span>Active</span>
</template>
<template v-else>
<UserCircleIcon class="w-4 text-icon-default"></UserCircleIcon>
<span>Inactive</span>
</template>
</div>
<div
class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium sm:pr-0 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">

View File

@@ -4,11 +4,17 @@ import { FolderPlusIcon } from '@heroicons/vue/24/solid';
import { PlusIcon } from '@heroicons/vue/16/solid';
import { computed, ref } from 'vue';
import ProjectCreateModal from '@/packages/ui/src/Project/ProjectCreateModal.vue';
import ProjectTableHeading, {
type SortColumn,
type SortDirection,
} from '@/Components/Common/Project/ProjectTableHeading.vue';
import ProjectTableHeading from '@/Components/Common/Project/ProjectTableHeading.vue';
import ProjectTableRow from '@/Components/Common/Project/ProjectTableRow.vue';
export type SortColumn =
| 'name'
| 'client_name'
| 'spent_time'
| 'progress'
| 'billable_rate'
| 'status';
export type SortDirection = 'asc' | 'desc';
import { canCreateProjects } from '@/utils/permissions';
import type { CreateProjectBody, Project, Client, CreateClientBody } from '@/packages/api/src';
import { useProjectsStore } from '@/utils/useProjects';
@@ -31,7 +37,7 @@ const props = defineProps<{
}>();
const emit = defineEmits<{
sort: [column: SortColumn];
sort: [column: SortColumn, direction: SortDirection];
}>();
const { clients } = useClientsQuery();
@@ -45,7 +51,7 @@ const clientNameMap = computed(() => {
return map;
});
// Convert our sort state to TanStack Table format
// Convert sort props to TanStack Table format
const sorting = computed<SortingState>(() => [
{
id: props.sortColumn,
@@ -53,38 +59,67 @@ const sorting = computed<SortingState>(() => [
},
]);
// Define column accessors for sorting
const columns = [
// Define column accessors for sorting.
// Numeric columns use sortDescFirst so that the first click (chevron down) sorts highest-first,
// while text columns default to ascending (A-Z) on first click (chevron down).
const columns = computed(() => [
{
id: 'name',
accessorFn: (row: Project) => row.name.toLowerCase(),
},
{
id: 'client_name',
sortUndefined: 'last' as const,
accessorFn: (row: Project) => {
if (!row.client_id) return '';
if (!row.client_id) return undefined;
return (clientNameMap.value.get(row.client_id) ?? '').toLowerCase();
},
},
{
id: 'spent_time',
sortDescFirst: true,
accessorFn: (row: Project) => row.spent_time ?? 0,
},
{
id: 'progress',
sortDescFirst: true,
sortUndefined: 'last' as const,
accessorFn: (row: Project) => {
if (!row.estimated_time) return undefined;
return (row.spent_time / row.estimated_time) * 100;
},
},
{
id: 'billable_rate',
sortDescFirst: true,
accessorFn: (row: Project) => row.billable_rate ?? 0,
},
{
id: 'status',
accessorFn: (row: Project) => (row.is_archived ? 1 : 0),
},
];
]);
// Columns with sortDescFirst get desc as default direction on first click.
const descFirstColumns = new Set<SortColumn>(
columns.value.filter((c) => c.sortDescFirst).map((c) => c.id as SortColumn)
);
function handleSort(column: SortColumn) {
if (props.sortColumn === column) {
emit('sort', column, props.sortDirection === 'asc' ? 'desc' : 'asc');
} else {
emit('sort', column, descFirstColumns.has(column) ? 'desc' : 'asc');
}
}
const table = useVueTable({
get data() {
return props.projects;
},
columns,
get columns() {
return columns.value;
},
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
state: {
@@ -99,10 +134,6 @@ const sortedProjects = computed(() => {
return table.getRowModel().rows.map((row) => row.original);
});
function handleSort(column: SortColumn) {
emit('sort', column);
}
const showCreateProjectModal = ref(false);
async function createProject(project: CreateProjectBody): Promise<Project | undefined> {
@@ -133,6 +164,7 @@ const gridTemplate = computed(() => {
:show-billable-rate="props.showBillableRate"
:sort-column="props.sortColumn"
:sort-direction="props.sortDirection"
:desc-first-columns="descFirstColumns"
@sort="handleSort"></ProjectTableHeading>
<div v-if="sortedProjects.length === 0" class="col-span-5 py-24 text-center">
<FolderPlusIcon class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>

View File

@@ -1,14 +1,13 @@
<script setup lang="ts">
import TableHeading from '@/Components/Common/TableHeading.vue';
import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
export type SortColumn = 'name' | 'client_name' | 'spent_time' | 'billable_rate' | 'status';
export type SortDirection = 'asc' | 'desc';
import type { SortColumn, SortDirection } from '@/Components/Common/Project/ProjectTable.vue';
const props = defineProps<{
showBillableRate: boolean;
sortColumn: SortColumn;
sortDirection: SortDirection;
descFirstColumns: ReadonlySet<SortColumn>;
}>();
const emit = defineEmits<{
@@ -22,6 +21,18 @@ function handleSort(column: SortColumn) {
function isSorted(column: SortColumn): boolean {
return props.sortColumn === column;
}
function isChevronDown(column: SortColumn): boolean {
if (!isSorted(column)) return false;
return props.descFirstColumns.has(column)
? props.sortDirection === 'desc'
: props.sortDirection === 'asc';
}
function isChevronUp(column: SortColumn): boolean {
if (!isSorted(column)) return false;
return !isChevronDown(column);
}
</script>
<template>
@@ -30,58 +41,49 @@ function isSorted(column: SortColumn): boolean {
class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('name')">
Name
<ChevronDownIcon v-if="isSorted('name') && sortDirection === 'asc'" class="w-4 h-4" />
<ChevronUpIcon
v-else-if="isSorted('name') && sortDirection === 'desc'"
class="w-4 h-4" />
<ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('name')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('client_name')">
Client
<ChevronDownIcon
v-if="isSorted('client_name') && sortDirection === 'asc'"
class="w-4 h-4" />
<ChevronUpIcon
v-else-if="isSorted('client_name') && sortDirection === 'desc'"
class="w-4 h-4" />
<ChevronDownIcon v-if="isChevronDown('client_name')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('client_name')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('spent_time')">
Total Time
<ChevronDownIcon
v-if="isSorted('spent_time') && sortDirection === 'asc'"
class="w-4 h-4" />
<ChevronUpIcon
v-else-if="isSorted('spent_time') && sortDirection === 'desc'"
class="w-4 h-4" />
<ChevronDownIcon v-if="isChevronDown('spent_time')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('spent_time')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('progress')">
Progress
<ChevronDownIcon v-if="isChevronDown('progress')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('progress')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div class="px-3 py-1.5 text-left text-text-tertiary">Progress</div>
<div
v-if="showBillableRate"
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('billable_rate')">
Billable Rate
<ChevronDownIcon
v-if="isSorted('billable_rate') && sortDirection === 'asc'"
class="w-4 h-4" />
<ChevronUpIcon
v-else-if="isSorted('billable_rate') && sortDirection === 'desc'"
class="w-4 h-4" />
<ChevronDownIcon v-if="isChevronDown('billable_rate')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('billable_rate')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('status')">
Status
<ChevronDownIcon v-if="isSorted('status') && sortDirection === 'asc'" class="w-4 h-4" />
<ChevronUpIcon
v-else-if="isSorted('status') && sortDirection === 'desc'"
class="w-4 h-4" />
<ChevronDownIcon v-if="isChevronDown('status')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('status')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">

View File

@@ -6,7 +6,7 @@ import { ref } from 'vue';
import PrimaryButton from '../../../packages/ui/src/Buttons/PrimaryButton.vue';
import { Field, FieldLabel } from '@/packages/ui/src/field';
import type { CreateReportBody, CreateReportBodyProperties } from '@/packages/api/src';
import { useMutation } from '@tanstack/vue-query';
import { useMutation, useQueryClient } from '@tanstack/vue-query';
import { getCurrentOrganizationId } from '@/utils/useUser';
import { api } from '@/packages/api/src';
import { Checkbox } from '@/packages/ui/src';
@@ -17,6 +17,7 @@ import { router } from '@inertiajs/vue3';
const show = defineModel('show', { default: false });
const saving = ref(false);
const queryClient = useQueryClient();
const createReportMutation = useMutation({
mutationFn: async (report: CreateReportBody) => {
@@ -30,6 +31,11 @@ const createReportMutation = useMutation({
},
});
},
onSuccess: () => {
queryClient.invalidateQueries({
queryKey: ['reports'],
});
},
});
const props = defineProps<{

View File

@@ -157,8 +157,18 @@ const aggregatedTableTimeEntries = computed<AggregatedTimeEntries | undefined>((
});
const reportProperties = computed(() => {
const { billable: billableFilter, ...rest } = filterParams.value;
let billableValue: boolean | null = null;
if (billableFilter === 'true') {
billableValue = true;
} else if (billableFilter === 'false') {
billableValue = false;
}
return {
...filterParams.value,
...rest,
billable: billableValue,
group: group.value,
sub_group: subGroup.value,
history_group: getOptimalGroupingOption(startDate.value, endDate.value),
@@ -427,8 +437,7 @@ const tableData = computed(() => {
v-if="showBillableRate"
class="justify-end pr-6 flex items-center font-medium">
{{
aggregatedTableTimeEntries.cost !== null &&
aggregatedTableTimeEntries.cost !== undefined
aggregatedTableTimeEntries.cost
? formatCents(
aggregatedTableTimeEntries.cost,
getOrganizationCurrencyString(),

View File

@@ -2,18 +2,80 @@
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
import { FolderPlusIcon } from '@heroicons/vue/24/solid';
import { PlusIcon } from '@heroicons/vue/16/solid';
import { ref } from 'vue';
import { computed, ref } from 'vue';
import { useTagsQuery } from '@/utils/useTagsQuery';
import TagTableRow from '@/Components/Common/Tag/TagTableRow.vue';
import TagCreateModal from '@/packages/ui/src/Tag/TagCreateModal.vue';
import TagTableHeading from '@/Components/Common/Tag/TagTableHeading.vue';
import { canCreateTags } from '@/utils/permissions';
import type { Tag } from '@/packages/api/src';
defineProps<{
import {
useVueTable,
getCoreRowModel,
getSortedRowModel,
type SortingState,
} from '@tanstack/vue-table';
export type SortColumn = 'name';
export type SortDirection = 'asc' | 'desc';
const props = defineProps<{
createTag: (name: string) => Promise<Tag | undefined>;
sortColumn: SortColumn;
sortDirection: SortDirection;
}>();
const emit = defineEmits<{
sort: [column: SortColumn, direction: SortDirection];
}>();
const { tags } = useTagsQuery();
const showCreateTagModal = ref(false);
const sorting = computed<SortingState>(() => [
{
id: props.sortColumn,
desc: props.sortDirection === 'desc',
},
]);
const columns = [
{
id: 'name',
accessorFn: (row: Tag) => row.name.toLowerCase(),
},
];
const descFirstColumns = new Set<SortColumn>(
columns.filter((c) => 'sortDescFirst' in c && c.sortDescFirst).map((c) => c.id as SortColumn)
);
function handleSort(column: SortColumn) {
if (props.sortColumn === column) {
emit('sort', column, props.sortDirection === 'asc' ? 'desc' : 'asc');
} else {
emit('sort', column, descFirstColumns.has(column) ? 'desc' : 'asc');
}
}
const table = useVueTable({
get data() {
return tags.value;
},
columns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
state: {
get sorting() {
return sorting.value;
},
},
manualSorting: false,
});
const sortedTags = computed(() => {
return table.getRowModel().rows.map((row) => row.original);
});
</script>
<template>
@@ -24,8 +86,12 @@ const showCreateTagModal = ref(false);
data-testid="tag_table"
class="grid min-w-full"
style="grid-template-columns: 1fr 80px">
<TagTableHeading></TagTableHeading>
<div v-if="tags.length === 0" class="col-span-5 py-24 text-center">
<TagTableHeading
:sort-column="props.sortColumn"
:sort-direction="props.sortDirection"
:desc-first-columns="descFirstColumns"
@sort="handleSort"></TagTableHeading>
<div v-if="sortedTags.length === 0" class="col-span-5 py-24 text-center">
<FolderPlusIcon class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>
<h3 class="text-text-primary font-semibold">No tags found</h3>
<p v-if="canCreateTags()" class="pb-5">Create your first tag now!</p>
@@ -36,7 +102,7 @@ const showCreateTagModal = ref(false);
>Create your First Tag</SecondaryButton
>
</div>
<template v-for="tag in tags" :key="tag.id">
<template v-for="tag in sortedTags" :key="tag.id">
<TagTableRow :tag="tag"></TagTableRow>
</template>
</div>

View File

@@ -1,16 +1,51 @@
<script setup lang="ts">
import TableHeading from '@/Components/Common/TableHeading.vue';
import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
import type { SortColumn, SortDirection } from '@/Components/Common/Tag/TagTable.vue';
const props = defineProps<{
sortColumn: SortColumn;
sortDirection: SortDirection;
descFirstColumns: ReadonlySet<SortColumn>;
}>();
const emit = defineEmits<{
sort: [column: SortColumn];
}>();
function handleSort(column: SortColumn) {
emit('sort', column);
}
function isSorted(column: SortColumn): boolean {
return props.sortColumn === column;
}
function isChevronDown(column: SortColumn): boolean {
if (!isSorted(column)) return false;
return props.descFirstColumns.has(column)
? props.sortDirection === 'desc'
: props.sortDirection === 'asc';
}
function isChevronUp(column: SortColumn): boolean {
if (!isSorted(column)) return false;
return !isChevronDown(column);
}
</script>
<template>
<TableHeading>
<div class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
<div
class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('name')">
Name
<ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('name')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
<span class="sr-only">Edit</span>
</div>
</TableHeading>
</template>
<style scoped></style>

View File

@@ -12,6 +12,8 @@ import PageTitle from '@/Components/Common/PageTitle.vue';
import { canCreateClients } from '@/utils/permissions';
import TabBarItem from '@/Components/Common/TabBar/TabBarItem.vue';
import TabBar from '@/Components/Common/TabBar/TabBar.vue';
import { useStorage } from '@vueuse/core';
import type { SortColumn, SortDirection } from '@/Components/Common/Client/ClientTable.vue';
const { clients } = useClientsQuery();
@@ -19,6 +21,26 @@ const activeTab = ref<'active' | 'archived'>('active');
const createClient = ref(false);
interface ClientTableState {
sortColumn: SortColumn;
sortDirection: SortDirection;
}
const tableState = useStorage<ClientTableState>(
'client-table-state',
{
sortColumn: 'name',
sortDirection: 'asc',
},
undefined,
{ mergeDefaults: true }
);
function handleSort(column: SortColumn, direction: SortDirection) {
tableState.value.sortColumn = column;
tableState.value.sortDirection = direction;
}
const shownClients = computed(() => {
return clients.value.filter((client) => {
if (activeTab.value === 'active') {
@@ -45,6 +67,10 @@ const shownClients = computed(() => {
>
<ClientCreateModal v-model:show="createClient"></ClientCreateModal>
</MainContainer>
<ClientTable :clients="shownClients"></ClientTable>
<ClientTable
:clients="shownClients"
:sort-column="tableState.sortColumn"
:sort-direction="tableState.sortDirection"
@sort="handleSort"></ClientTable>
</AppLayout>
</template>

View File

@@ -13,6 +13,8 @@ import type { Role } from '@/types/jetstream';
import PageTitle from '@/Components/Common/PageTitle.vue';
import InvitationTable from '@/Components/Common/Invitation/InvitationTable.vue';
import { canCreateInvitations } from '@/utils/permissions';
import { useStorage } from '@vueuse/core';
import type { SortColumn, SortDirection } from '@/Components/Common/Member/MemberTable.vue';
const inviteMember = ref(false);
@@ -21,6 +23,26 @@ defineProps<{
}>();
const activeTab = ref<'all' | 'invitations'>('all');
interface MemberTableState {
sortColumn: SortColumn;
sortDirection: SortDirection;
}
const tableState = useStorage<MemberTableState>(
'member-table-state',
{
sortColumn: 'name',
sortDirection: 'asc',
},
undefined,
{ mergeDefaults: true }
);
function handleSort(column: SortColumn, direction: SortDirection) {
tableState.value.sortColumn = column;
tableState.value.sortDirection = direction;
}
</script>
<template>
@@ -45,7 +67,11 @@ const activeTab = ref<'all' | 'invitations'>('all');
:available-roles="availableRoles"
@close="activeTab = 'invitations'"></MemberInviteModal>
</MainContainer>
<MemberTable v-if="activeTab === 'all'"></MemberTable>
<MemberTable
v-if="activeTab === 'all'"
:sort-column="tableState.sortColumn"
:sort-direction="tableState.sortDirection"
@sort="handleSort"></MemberTable>
<InvitationTable v-if="activeTab === 'invitations'"></InvitationTable>
</AppLayout>
</template>

View File

@@ -4,10 +4,6 @@ import AppLayout from '@/Layouts/AppLayout.vue';
import { FolderIcon, PlusIcon } from '@heroicons/vue/20/solid';
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
import ProjectTable from '@/Components/Common/Project/ProjectTable.vue';
import type {
SortColumn,
SortDirection,
} from '@/Components/Common/Project/ProjectTableHeading.vue';
import { computed } from 'vue';
import { useProjectsQuery } from '@/utils/useProjectsQuery';
import { useProjectsStore } from '@/utils/useProjects';
@@ -26,6 +22,7 @@ import ProjectsFilterDropdown from '@/Components/Common/Project/ProjectsFilterDr
import ProjectStatusFilterBadge from '@/Components/Common/Project/ProjectStatusFilterBadge.vue';
import ProjectClientFilterBadge from '@/Components/Common/Project/ProjectClientFilterBadge.vue';
import { NO_CLIENT_ID } from '@/Components/Common/Project/constants';
import type { SortColumn, SortDirection } from '@/Components/Common/Project/ProjectTable.vue';
// Fetch data using TanStack Query
const { projects } = useProjectsQuery();
@@ -56,14 +53,9 @@ const tableState = useStorage<ProjectTableState>(
{ mergeDefaults: true }
);
// Handle sorting - toggle direction if same column, otherwise set new column with asc
function handleSort(column: SortColumn) {
if (tableState.value.sortColumn === column) {
tableState.value.sortDirection = tableState.value.sortDirection === 'asc' ? 'desc' : 'asc';
} else {
tableState.value.sortColumn = column;
tableState.value.sortDirection = 'asc';
}
function handleSort(column: SortColumn, direction: SortDirection) {
tableState.value.sortColumn = column;
tableState.value.sortDirection = direction;
}
// Filter projects based on current filters

View File

@@ -2,29 +2,10 @@
import MainContainer from '@/packages/ui/src/MainContainer.vue';
import AppLayout from '@/Layouts/AppLayout.vue';
import PageTitle from '@/Components/Common/PageTitle.vue';
import {
ChartBarIcon,
ChevronLeftIcon,
ChevronDoubleLeftIcon,
ChevronRightIcon,
ChevronDoubleRightIcon,
CreditCardIcon,
UserGroupIcon,
} from '@heroicons/vue/20/solid';
import { computed, ref, watch } from 'vue';
import { ChartBarIcon, CreditCardIcon, UserGroupIcon } from '@heroicons/vue/20/solid';
import { computed } from 'vue';
import { api, type ReportIndexResponse } from '@/packages/api/src';
import {
PaginationEllipsis,
PaginationFirst,
PaginationLast,
PaginationList,
PaginationListItem,
PaginationNext,
PaginationPrev,
PaginationRoot,
} from 'radix-vue';
import { useQuery, useQueryClient } from '@tanstack/vue-query';
import { useQuery } from '@tanstack/vue-query';
import { getCurrentOrganizationId } from '@/utils/useUser';
import ReportingTabNavbar from '@/Components/Common/Reporting/ReportingTabNavbar.vue';
import ReportTable from '@/Components/Common/Report/ReportTable.vue';
@@ -32,37 +13,22 @@ import { isAllowedToPerformPremiumAction, isBillingActivated } from '@/utils/bil
import { canManageBilling, canUpdateOrganization } from '@/utils/permissions';
import PrimaryButton from '../packages/ui/src/Buttons/PrimaryButton.vue';
import { Link } from '@inertiajs/vue3';
import { fetchAllReports } from '@/utils/useReportsQuery';
const pageLimit = 15;
const currentPage = ref(1);
const { data: reportsResponse } = useQuery<ReportIndexResponse>({
queryKey: ['reports', currentPage],
const { data: reportsData } = useQuery({
queryKey: computed(() => ['reports', getCurrentOrganizationId()]),
enabled: !!getCurrentOrganizationId(),
queryFn: () =>
api.getReports({
params: {
organization: getCurrentOrganizationId() || '',
},
}),
queryFn: async () => {
const organizationId = getCurrentOrganizationId();
if (!organizationId) throw new Error('No organization');
const data = await fetchAllReports(organizationId);
return { data };
},
staleTime: 1000 * 30,
});
const reports = computed(() => {
return reportsResponse.value?.data ?? [];
});
const totalPages = computed(() => {
return 1;
});
const queryClient = useQueryClient();
async function updateFilteredTimeEntries() {
await queryClient.invalidateQueries({
queryKey: ['reports'],
});
}
watch(currentPage, () => {
updateFilteredTimeEntries();
return reportsData.value?.data ?? [];
});
</script>
@@ -110,64 +76,5 @@ watch(currentPage, () => {
<ReportTable
v-if="reports.length > 0 || isAllowedToPerformPremiumAction()"
:reports="reports"></ReportTable>
<PaginationRoot
v-if="reports.length > 0 || isAllowedToPerformPremiumAction()"
v-model:page="currentPage"
:total="totalPages"
:items-per-page="pageLimit"
class="flex justify-center items-center py-8"
:sibling-count="1"
show-edges>
<PaginationList v-slot="{ items }" class="flex items-center space-x-1 relative">
<div class="pr-2 flex items-center space-x-1 border-r border-border-primary mr-1">
<PaginationFirst class="navigation-item">
<ChevronDoubleLeftIcon class="w-4"> </ChevronDoubleLeftIcon>
</PaginationFirst>
<PaginationPrev class="mr-4 navigation-item">
<ChevronLeftIcon class="w-4 text-text-tertiary hover:text-text-primary">
</ChevronLeftIcon>
</PaginationPrev>
</div>
<template v-for="(page, index) in items">
<PaginationListItem
v-if="page.type === 'page'"
:key="index"
class="pagination-item"
:value="page.value">
{{ page.value }}
</PaginationListItem>
<PaginationEllipsis
v-else
:key="page.type"
:index="index"
class="PaginationEllipsis">
<div class="px-2">&#8230;</div>
</PaginationEllipsis>
</template>
<div class="!ml-2 pl-2 flex items-center space-x-1 border-l border-border-primary">
<PaginationNext class="navigation-item">
<ChevronRightIcon
class="w-4 text-text-tertiary hover:text-text-primary"></ChevronRightIcon>
</PaginationNext>
<PaginationLast class="navigation-item">
<ChevronDoubleRightIcon
class="w-4 text-text-tertiary hover:text-text-primary"></ChevronDoubleRightIcon>
</PaginationLast>
</div>
</PaginationList>
</PaginationRoot>
</AppLayout>
</template>
<style lang="postcss">
.navigation-item {
@apply bg-quaternary h-8 w-8 flex items-center justify-center rounded border border-border-primary text-text-tertiary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-ring;
}
.pagination-item {
@apply bg-secondary h-8 w-8 flex items-center justify-center rounded border border-border-tertiary text-text-secondary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-ring;
}
.pagination-item[data-selected] {
@apply text-text-primary bg-accent-300/10 border border-accent-300/20 rounded-md font-medium hover:bg-accent-300/20 active:bg-accent-300/20 outline-0 focus-visible:ring-2 focus:ring-ring transition ease-in-out duration-150;
}
</style>

View File

@@ -222,6 +222,7 @@ onMounted(async () => {
:key="entry.description ?? 'none'"
:currency="reportCurrency"
:currency-format="reportCurrencyFormat"
:show-cost="true"
:entry="entry"></ReportingRow>
<div
class="contents [&>*]:transition text-text-tertiary [&>*]:h-[50px]">
@@ -239,12 +240,15 @@ onMounted(async () => {
</div>
<div class="justify-end pr-6 flex items-center font-medium">
{{
formatCents(
aggregatedTableTimeEntries.cost,
reportCurrency,
reportCurrencyFormat,
reportCurrencySymbol
)
aggregatedTableTimeEntries.cost
? formatCents(
aggregatedTableTimeEntries.cost,
reportCurrency,
reportCurrencyFormat,
reportCurrencySymbol,
reportNumberFormat
)
: '--'
}}
</div>
</div>

View File

@@ -9,9 +9,31 @@ import TagCreateModal from '@/packages/ui/src/Tag/TagCreateModal.vue';
import PageTitle from '@/Components/Common/PageTitle.vue';
import { canCreateTags } from '@/utils/permissions';
import { useTagsStore } from '@/utils/useTags';
import { useStorage } from '@vueuse/core';
import type { SortColumn, SortDirection } from '@/Components/Common/Tag/TagTable.vue';
const showCreateTagModal = ref(false);
interface TagTableState {
sortColumn: SortColumn;
sortDirection: SortDirection;
}
const tableState = useStorage<TagTableState>(
'tag-table-state',
{
sortColumn: 'name',
sortDirection: 'asc',
},
undefined,
{ mergeDefaults: true }
);
function handleSort(column: SortColumn, direction: SortDirection) {
tableState.value.sortColumn = column;
tableState.value.sortDirection = direction;
}
async function createTag(tag: string) {
return await useTagsStore().createTag(tag);
}
@@ -34,6 +56,10 @@ async function createTag(tag: string) {
v-model:show="showCreateTagModal"
:create-tag="createTag"></TagCreateModal>
</MainContainer>
<TagTable :create-tag="createTag"></TagTable>
<TagTable
:create-tag="createTag"
:sort-column="tableState.sortColumn"
:sort-direction="tableState.sortDirection"
@sort="handleSort"></TagTable>
</AppLayout>
</template>

View File

@@ -33,7 +33,6 @@ const ClientResource = z
updated_at: z.string(),
})
.passthrough();
const ClientCollection = z.array(ClientResource);
const ClientStoreRequest = z.object({ name: z.string().min(1).max(255) }).passthrough();
const ClientUpdateRequest = z
.object({ name: z.string().min(1).max(255), is_archived: z.boolean().optional() })
@@ -598,7 +597,6 @@ const DetailedWithDataReportResource = z
const TagResource = z
.object({ id: z.string(), name: z.string(), created_at: z.string(), updated_at: z.string() })
.passthrough();
const TagCollection = z.array(TagResource);
const TagStoreRequest = z.object({ name: z.string().min(1).max(255) }).passthrough();
const TagUpdateRequest = z.object({ name: z.string().min(1).max(255) }).passthrough();
const TaskResource = z
@@ -711,7 +709,6 @@ export const schemas = {
ApiTokenStoreRequest,
ApiTokenWithAccessTokenResource,
ClientResource,
ClientCollection,
ClientStoreRequest,
ClientUpdateRequest,
ImportRequest,
@@ -755,7 +752,6 @@ export const schemas = {
ReportUpdateRequest,
DetailedWithDataReportResource,
TagResource,
TagCollection,
TagStoreRequest,
TagUpdateRequest,
TaskResource,
@@ -1201,7 +1197,39 @@ const endpoints = makeApi([
schema: z.enum(['true', 'false', 'all']).optional(),
},
],
response: z.object({ data: ClientCollection }).passthrough(),
response: z
.object({
data: z.array(ClientResource),
links: z
.object({
first: z.union([z.string(), z.null()]),
last: z.union([z.string(), z.null()]),
prev: z.union([z.string(), z.null()]),
next: z.union([z.string(), z.null()]),
})
.passthrough(),
meta: z
.object({
current_page: z.number().int(),
from: z.union([z.number(), z.null()]),
last_page: z.number().int(),
links: z.array(
z
.object({
url: z.union([z.string(), z.null()]),
label: z.string(),
active: z.boolean(),
})
.passthrough()
),
path: z.union([z.string(), z.null()]),
per_page: z.number().int(),
to: z.union([z.number(), z.null()]),
total: z.number().int(),
})
.passthrough(),
})
.passthrough(),
errors: [
{
status: 401,
@@ -1512,6 +1540,11 @@ const endpoints = makeApi([
type: 'Path',
schema: z.string(),
},
{
name: 'page',
type: 'Query',
schema: z.number().int().gte(1).lte(2147483647).optional(),
},
],
response: z
.object({
@@ -2137,6 +2170,11 @@ const endpoints = makeApi([
type: 'Path',
schema: z.string(),
},
{
name: 'page',
type: 'Query',
schema: z.number().int().gte(1).lte(2147483647).optional(),
},
],
response: z
.object({
@@ -2742,6 +2780,11 @@ const endpoints = makeApi([
type: 'Path',
schema: z.string(),
},
{
name: 'page',
type: 'Query',
schema: z.number().int().gte(1).lte(2147483647).optional(),
},
],
response: z
.object({
@@ -2792,6 +2835,13 @@ const endpoints = makeApi([
description: `Not found`,
schema: z.object({ message: z.string() }).passthrough(),
},
{
status: 422,
description: `Validation error`,
schema: z
.object({ message: z.string(), errors: z.record(z.array(z.string())) })
.passthrough(),
},
],
},
{
@@ -2860,6 +2910,11 @@ const endpoints = makeApi([
type: 'Path',
schema: z.string(),
},
{
name: 'page',
type: 'Query',
schema: z.number().int().gte(1).lte(2147483647).optional(),
},
],
response: z
.object({
@@ -2910,6 +2965,13 @@ const endpoints = makeApi([
description: `Not found`,
schema: z.object({ message: z.string() }).passthrough(),
},
{
status: 422,
description: `Validation error`,
schema: z
.object({ message: z.string(), errors: z.record(z.array(z.string())) })
.passthrough(),
},
],
},
{
@@ -3086,8 +3148,45 @@ const endpoints = makeApi([
type: 'Path',
schema: z.string(),
},
{
name: 'page',
type: 'Query',
schema: z.number().int().gte(1).lte(2147483647).optional(),
},
],
response: z.object({ data: TagCollection }).passthrough(),
response: z
.object({
data: z.array(TagResource),
links: z
.object({
first: z.union([z.string(), z.null()]),
last: z.union([z.string(), z.null()]),
prev: z.union([z.string(), z.null()]),
next: z.union([z.string(), z.null()]),
})
.passthrough(),
meta: z
.object({
current_page: z.number().int(),
from: z.union([z.number(), z.null()]),
last_page: z.number().int(),
links: z.array(
z
.object({
url: z.union([z.string(), z.null()]),
label: z.string(),
active: z.boolean(),
})
.passthrough()
),
path: z.union([z.string(), z.null()]),
per_page: z.number().int(),
to: z.union([z.number(), z.null()]),
total: z.number().int(),
})
.passthrough(),
})
.passthrough(),
errors: [
{
status: 401,
@@ -3104,6 +3203,13 @@ const endpoints = makeApi([
description: `Not found`,
schema: z.object({ message: z.string() }).passthrough(),
},
{
status: 422,
description: `Validation error`,
schema: z
.object({ message: z.string(), errors: z.record(z.array(z.string())) })
.passthrough(),
},
],
},
{
@@ -3251,6 +3357,11 @@ const endpoints = makeApi([
type: 'Path',
schema: z.string(),
},
{
name: 'page',
type: 'Query',
schema: z.number().int().gte(1).lte(2147483647).optional(),
},
{
name: 'project_id',
type: 'Query',
@@ -4230,6 +4341,11 @@ If the group parameters are all set to &#x60;null&#x60; or are all missing, the
type: 'Query',
schema: z.array(z.string().uuid()).min(1).optional(),
},
{
name: 'client_ids',
type: 'Query',
schema: z.array(z.string()).min(1).optional(),
},
{
name: 'project_ids',
type: 'Query',

View File

@@ -1,6 +1,6 @@
{
"name": "@solidtime/ui",
"version": "0.0.15",
"version": "0.0.16",
"description": "Package containing the solidtime ui components",
"main": "./dist/solidtime-ui-lib.umd.cjs",
"module": "./dist/solidtime-ui-lib.js",

View File

@@ -1,8 +0,0 @@
export default {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
},
};

View File

@@ -0,0 +1,198 @@
<script setup lang="ts">
import { Popover, PopoverContent, PopoverTrigger, Button } from '..';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/Components/ui/select';
import { Field, FieldLabel } from '../field';
import { Settings } from 'lucide-vue-next';
import { ref, watch } from 'vue';
import type { CalendarSettings } from './calendarSettings';
export type { CalendarSettings };
const props = defineProps<{
settings: CalendarSettings;
}>();
const emit = defineEmits<{
'update:settings': [value: CalendarSettings];
}>();
const snapMinutes = ref(String(props.settings.snapMinutes));
const startHour = ref(String(props.settings.startHour));
const endHour = ref(String(props.settings.endHour));
const slotMinutes = ref(String(props.settings.slotMinutes));
watch(
() => props.settings,
(s) => {
snapMinutes.value = String(s.snapMinutes);
startHour.value = String(s.startHour);
endHour.value = String(s.endHour);
slotMinutes.value = String(s.slotMinutes);
}
);
function emitUpdate(partial: Partial<CalendarSettings>) {
emit('update:settings', { ...props.settings, ...partial });
}
function onSnapChange(value: string) {
snapMinutes.value = value;
emitUpdate({ snapMinutes: parseInt(value) });
}
function onStartHourChange(value: string) {
const newStart = parseInt(value);
// Ensure start < end
if (newStart >= parseInt(endHour.value)) {
startHour.value = String(props.settings.startHour);
return;
}
startHour.value = value;
emitUpdate({ startHour: newStart });
}
function onEndHourChange(value: string) {
const newEnd = parseInt(value);
// Ensure end > start
if (newEnd <= parseInt(startHour.value)) {
endHour.value = String(props.settings.endHour);
return;
}
endHour.value = value;
emitUpdate({ endHour: newEnd });
}
function onSlotChange(value: string) {
slotMinutes.value = value;
emitUpdate({ slotMinutes: parseInt(value) });
}
const snapOptions = [
{ value: '1', label: '1 min' },
{ value: '5', label: '5 min' },
{ value: '10', label: '10 min' },
{ value: '15', label: '15 min' },
{ value: '30', label: '30 min' },
{ value: '60', label: '1 hour' },
];
const slotOptions = [
{ value: '5', label: '5 min' },
{ value: '10', label: '10 min' },
{ value: '15', label: '15 min' },
{ value: '30', label: '30 min' },
{ value: '60', label: '1 hour' },
];
// Generate hour options 0-24
const hourOptions = Array.from({ length: 25 }, (_, i) => ({
value: String(i),
label:
i === 0
? '12:00 AM'
: i === 12
? '12:00 PM'
: i === 24
? '12:00 AM (next)'
: i < 12
? `${i}:00 AM`
: `${i - 12}:00 PM`,
}));
</script>
<template>
<Popover>
<PopoverTrigger as-child>
<Button variant="outline" size="sm" aria-label="Calendar settings" class="h-8 w-8 p-0">
<Settings class="h-4 w-4 text-muted-foreground" />
</Button>
</PopoverTrigger>
<PopoverContent align="end" class="w-72 p-4">
<div class="space-y-4">
<div class="text-sm font-semibold">Calendar Settings</div>
<Field>
<FieldLabel for="calendar-snap">Snap Interval</FieldLabel>
<Select
:model-value="snapMinutes"
@update:model-value="(v) => onSnapChange(v as string)">
<SelectTrigger id="calendar-snap" size="sm" class="w-full">
<SelectValue placeholder="Snap interval" />
</SelectTrigger>
<SelectContent>
<SelectItem
v-for="opt in snapOptions"
:key="opt.value"
:value="opt.value">
{{ opt.label }}
</SelectItem>
</SelectContent>
</Select>
</Field>
<Field>
<FieldLabel for="calendar-start-hour">Start Time</FieldLabel>
<Select
:model-value="startHour"
@update:model-value="(v) => onStartHourChange(v as string)">
<SelectTrigger id="calendar-start-hour" size="sm" class="w-full">
<SelectValue placeholder="Start time" />
</SelectTrigger>
<SelectContent>
<SelectItem
v-for="opt in hourOptions.slice(0, -1)"
:key="opt.value"
:value="opt.value">
{{ opt.label }}
</SelectItem>
</SelectContent>
</Select>
</Field>
<Field>
<FieldLabel for="calendar-end-hour">End Time</FieldLabel>
<Select
:model-value="endHour"
@update:model-value="(v) => onEndHourChange(v as string)">
<SelectTrigger id="calendar-end-hour" size="sm" class="w-full">
<SelectValue placeholder="End time" />
</SelectTrigger>
<SelectContent>
<SelectItem
v-for="opt in hourOptions.slice(1)"
:key="opt.value"
:value="opt.value">
{{ opt.label }}
</SelectItem>
</SelectContent>
</Select>
</Field>
<Field>
<FieldLabel for="calendar-scale">Grid Scale</FieldLabel>
<Select
:model-value="slotMinutes"
@update:model-value="(v) => onSlotChange(v as string)">
<SelectTrigger id="calendar-scale" size="sm" class="w-full">
<SelectValue placeholder="Grid scale" />
</SelectTrigger>
<SelectContent>
<SelectItem
v-for="opt in slotOptions"
:key="opt.value"
:value="opt.value">
{{ opt.label }}
</SelectItem>
</SelectContent>
</Select>
</Field>
</div>
</PopoverContent>
</Popover>
</template>

View File

@@ -15,13 +15,22 @@ import {
onActivated,
onUnmounted,
} from 'vue';
import { useLocalStorage } from '@vueuse/core';
import chroma from 'chroma-js';
import { useCssVariable } from '@/utils/useCssVariable';
import { getDayJsInstance, getLocalizedDayJs } from '../utils/time';
import {
getDayJsInstance,
getLocalizedDayJs,
formatHumanReadableDuration,
formatDuration,
} from '../utils/time';
import { getUserTimezone, getWeekStart } from '../utils/settings';
import { LoadingSpinner, TimeEntryCreateModal, TimeEntryEditModal } from '..';
import FullCalendarEventContent from './FullCalendarEventContent.vue';
import FullCalendarDayHeader from './FullCalendarDayHeader.vue';
import CalendarSettingsPopover from './CalendarSettingsPopover.vue';
import type { CalendarSettings } from './calendarSettings';
import { useVisualSnap } from './useVisualSnap';
import activityStatusPlugin, {
type ActivityPeriod,
renderActivityStatusBoxes,
@@ -81,6 +90,22 @@ const selectedTimeEntry = ref<TimeEntry | null>(null);
const calendarRef = ref<InstanceType<typeof FullCalendar> | null>(null);
// Calendar settings with localStorage persistence via VueUse
const calendarSettings = useLocalStorage<CalendarSettings>(
'solidtime:calendar-settings',
{
snapMinutes: 15,
startHour: 0,
endHour: 24,
slotMinutes: 15,
},
{ mergeDefaults: true }
);
function onSettingsUpdate(newSettings: CalendarSettings) {
calendarSettings.value = newSettings;
}
// Reactive "now" for running time entry - updates every minute
const currentTime = ref(getDayJsInstance()());
let currentTimeInterval: ReturnType<typeof setInterval> | null = null;
@@ -204,16 +229,19 @@ function emitDatesChange(arg: DatesSetArg) {
}
function handleDateSelect(arg: { start: Date; end: Date }) {
const startTime = getDayJsInstance()(arg.start.toISOString())
stopVisualSnap();
const snap = calendarSettings.value.snapMinutes;
const startLocal = getDayJsInstance()(arg.start.toISOString())
.utc()
.tz(getUserTimezone(), true)
.utc();
const endTime = getDayJsInstance()(arg.end.toISOString())
.utc()
.tz(getUserTimezone(), true)
.utc();
newEventStart.value = startTime;
newEventEnd.value = endTime;
.tz(getUserTimezone(), true);
const endLocal = getDayJsInstance()(arg.end.toISOString()).utc().tz(getUserTimezone(), true);
const snappedStart = snapStartToGrid(startLocal, snap);
let snappedEnd = snapEndToGrid(endLocal, snap);
if (!snappedEnd.isAfter(snappedStart)) {
snappedEnd = snappedStart.add(snap, 'minute');
}
newEventStart.value = snappedStart.utc();
newEventEnd.value = snappedEnd.utc();
showCreateTimeEntryModal.value = true;
}
@@ -227,90 +255,143 @@ function handleEventClick(arg: EventClickArg) {
showEditTimeEntryModal.value = true;
}
// Snap a dayjs time down to the previous snap boundary (for start times)
function snapStartToGrid(time: Dayjs, snapMinutes: number): Dayjs {
const minutes = time.hour() * 60 + time.minute();
const snapped = Math.floor(minutes / snapMinutes) * snapMinutes;
return time.startOf('day').add(snapped, 'minute');
}
// Snap a dayjs time up to the next snap boundary (for end times)
function snapEndToGrid(time: Dayjs, snapMinutes: number): Dayjs {
const minutes = time.hour() * 60 + time.minute();
const snapped = Math.ceil(minutes / snapMinutes) * snapMinutes;
return time.startOf('day').add(snapped, 'minute');
}
// --- Visual snap (composable) ---
const {
startDragSnap: startVisualDragSnap,
startResizeSnap: startVisualResizeSnap,
stop: stopVisualSnap,
} = useVisualSnap({
calendarRef,
snapMinutes: () => calendarSettings.value.snapMinutes,
slotMinutes: () => calendarSettings.value.slotMinutes,
formatDuration: (seconds) =>
formatHumanReadableDuration(
seconds,
organization?.value?.interval_format,
organization?.value?.number_format
),
});
async function handleEventDrop(arg: EventDropArg) {
stopVisualSnap();
const ext = arg.event.extendedProps as CalendarExtendedProps;
const timeEntry = ext.timeEntry;
if (!arg.event.start || !arg.event.end) return;
// Running entries have no end time — can't compute duration for drop
if (!timeEntry.end) return;
const snap = calendarSettings.value.snapMinutes;
const startLocal = getDayJsInstance()(arg.event.start.toISOString())
.utc()
.tz(getUserTimezone(), true)
.second(0);
const snappedStart = snapStartToGrid(startLocal, snap);
const durationMs = getLocalizedDayJs(timeEntry.end).diff(getLocalizedDayJs(timeEntry.start));
const snappedEnd = snappedStart.add(durationMs, 'millisecond');
// Set FC event to snapped position immediately to avoid flash
arg.event.setDates(snappedStart.utc(true).toDate(), snappedEnd.utc(true).toDate());
const updatedTimeEntry = {
...timeEntry,
start: getDayJsInstance()(arg.event.start.toISOString())
.utc()
.tz(getUserTimezone(), true)
.second(0)
.utc()
.format(),
end: getDayJsInstance()(arg.event.end.toISOString())
.utc()
.tz(getUserTimezone(), true)
.second(0)
.utc()
.format(),
start: snappedStart.utc().format(),
end: snappedEnd.utc().format(),
} as TimeEntry;
await props.updateTimeEntry(updatedTimeEntry);
emit('refresh');
}
async function handleEventResize(arg: EventChangeArg) {
stopVisualSnap();
const ext = arg.event.extendedProps as CalendarExtendedProps;
const timeEntry = ext.timeEntry;
if (!arg.event.start || !arg.event.end) return;
const snap = calendarSettings.value.snapMinutes;
const newStartLocal = getDayJsInstance()(arg.event.start.toISOString())
.utc()
.tz(getUserTimezone(), true)
.second(0);
const newEndLocal = getDayJsInstance()(arg.event.end.toISOString())
.utc()
.tz(getUserTimezone(), true)
.second(0);
const origStartLocal = getLocalizedDayJs(timeEntry.start).second(0);
const startChanged = !newStartLocal.isSame(origStartLocal, 'minute');
// Snap only the changed edge once, reuse for both setDates and API update
const snappedStart = startChanged ? snapStartToGrid(newStartLocal, snap) : null;
const snappedEnd = !startChanged && !ext.isRunning ? snapEndToGrid(newEndLocal, snap) : null;
// Set FC event to snapped position immediately to avoid flash.
// Use the original event date for the edge that wasn't resized.
if (snappedStart) {
arg.event.setDates(snappedStart.utc(true).toDate(), arg.oldEvent.end!);
} else if (snappedEnd) {
arg.event.setDates(arg.oldEvent.start!, snappedEnd.utc(true).toDate());
}
const updatedTimeEntry = {
...timeEntry,
start: getDayJsInstance()(arg.event.start.toISOString())
.utc()
.tz(getUserTimezone(), true)
.second(0)
.utc()
.format(),
// Preserve null end for running entries
end: ext.isRunning
? null
: getDayJsInstance()(arg.event.end.toISOString())
.utc()
.tz(getUserTimezone(), true)
.second(0)
.utc()
.format(),
start: snappedStart ? snappedStart.utc().format() : timeEntry.start,
end: ext.isRunning ? null : snappedEnd ? snappedEnd.utc().format() : timeEntry.end,
} as TimeEntry;
await props.updateTimeEntry(updatedTimeEntry);
emit('refresh');
}
const calendarOptions = computed(() => ({
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, activityStatusPlugin],
initialView: 'timeGridWeek',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'timeGridWeek,timeGridDay',
},
height: 'parent',
slotMinTime: '00:00:00',
slotMaxTime: '24:00:00',
slotDuration: '00:15:00',
slotLabelInterval: '01:00:00',
slotLabelFormat: getSlotLabelFormat(),
snapDuration: '00:01:00',
firstDay: getFirstDay(),
allDaySlot: false,
nowIndicator: true,
eventMinHeight: 1,
selectable: true,
selectMirror: true,
editable: true,
eventResizableFromStart: true,
eventDurationEditable: true,
timeZone: getUserTimezone(),
eventStartEditable: true,
select: handleDateSelect,
eventClick: handleEventClick,
eventDrop: handleEventDrop,
eventResize: handleEventResize,
datesSet: emitDatesChange,
const calendarOptions = computed(() => {
const s = calendarSettings.value;
events: events.value,
activityPeriods: props.activityPeriods || [],
}));
return {
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, activityStatusPlugin],
initialView: 'timeGridWeek',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'timeGridWeek,timeGridDay',
},
height: 'parent',
slotMinTime: formatDuration(s.startHour * 3600),
slotMaxTime: formatDuration(s.endHour * 3600),
slotDuration: formatDuration(s.slotMinutes * 60),
slotLabelInterval: '01:00:00',
slotLabelFormat: getSlotLabelFormat(),
snapDuration: '00:01:00',
firstDay: getFirstDay(),
allDaySlot: false,
nowIndicator: true,
eventMinHeight: 1,
selectable: true,
selectMirror: true,
editable: true,
eventResizableFromStart: true,
eventDurationEditable: true,
timeZone: getUserTimezone(),
eventStartEditable: true,
select: handleDateSelect,
eventClick: handleEventClick,
eventDragStart: startVisualDragSnap,
eventDrop: handleEventDrop,
eventResizeStart: startVisualResizeSnap,
eventResize: handleEventResize,
datesSet: emitDatesChange,
events: events.value,
activityPeriods: props.activityPeriods || [],
};
});
watch(showCreateTimeEntryModal, (value) => {
if (!value) {
@@ -376,7 +457,6 @@ onActivated(() => {
});
onUnmounted(() => {
// Clean up interval
if (currentTimeInterval) {
clearInterval(currentTimeInterval);
currentTimeInterval = null;
@@ -424,6 +504,11 @@ onUnmounted(() => {
:clients="clients"
:currency="currency"
:can-create-project="canCreateProject" />
<div class="calendar-settings-trigger">
<CalendarSettingsPopover
:settings="calendarSettings"
@update:settings="onSettingsUpdate" />
</div>
<FullCalendar ref="calendarRef" class="fullcalendar" :options="calendarOptions">
<template #eventContent="arg">
<FullCalendarEventContent
@@ -458,6 +543,13 @@ onUnmounted(() => {
</template>
<style scoped>
.calendar-settings-trigger {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 20;
}
.fullcalendar {
height: 100%;
--fc-border-color: var(--border);
@@ -482,6 +574,7 @@ onUnmounted(() => {
.fullcalendar :deep(.fc-toolbar) {
background-color: var(--background);
padding: 0.5rem;
padding-right: 2.75rem;
margin-bottom: 0;
}
@@ -580,36 +673,65 @@ onUnmounted(() => {
line-height: 1.2;
}
/* Enhanced FullCalendar resize handles */
/* Resize handle hit areas */
.fullcalendar :deep(.fc-event-resizer) {
position: absolute;
z-index: 99;
background: '#FFF';
border-radius: 2px;
width: 100%;
height: 4px;
height: 12px;
left: 0;
transition: all 0.2s ease;
cursor: row-resize;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.15s ease;
}
.fullcalendar :deep(.fc-event-resizer-start) {
top: -2px;
cursor: n-resize;
}
.fullcalendar :deep(.fc-event-resizer-end) {
bottom: -2px;
cursor: s-resize;
}
/* Visual grip indicator */
.fullcalendar :deep(.fc-event-resizer::after) {
content: '';
width: 24px;
height: 3px;
border-radius: 1.5px;
background: rgba(255, 255, 255, 0.6);
transition: background 0.15s ease;
}
.fullcalendar :deep(.fc-event:hover .fc-event-resizer) {
opacity: 1;
}
.fullcalendar :deep(.fc-event-resizer:hover) {
background: '#FFF';
height: 6px;
.fullcalendar :deep(.fc-event-resizer:hover::after) {
background: rgba(255, 255, 255, 0.9);
}
/* Keep resize cursor during active resize */
.fullcalendar :deep(.fc-event-resizing),
.fullcalendar :deep(.fc-event-resizing .fc-event-resizer) {
cursor: row-resize !important;
}
/* Keep event in hover state while resizing */
.fullcalendar :deep(.fc-event-resizing) {
opacity: 1;
box-shadow: var(--theme-shadow-dropdown);
}
.fullcalendar :deep(.fc-event-resizing .fc-event-resizer) {
opacity: 1;
}
.fullcalendar :deep(.fc-event-resizing .fc-event-resizer::after) {
background: rgba(255, 255, 255, 0.9);
}
/* Update the earlier hover rule to include the shadow */
@@ -632,6 +754,10 @@ onUnmounted(() => {
border: 1px solid var(--primary);
}
.fullcalendar :deep(.fc-event-mirror) {
pointer-events: none;
}
.fullcalendar :deep(.fc-scrollgrid) {
border: 1px solid var(--border);
border-left: 1px solid transparent;
@@ -763,3 +889,11 @@ onUnmounted(() => {
border-bottom-right-radius: 0px;
}
</style>
<style>
/* Global cursor override during resize — must be unscoped to affect body */
body.fc-resizing-active,
body.fc-resizing-active * {
cursor: row-resize !important;
}
</style>

View File

@@ -0,0 +1,6 @@
export interface CalendarSettings {
snapMinutes: number;
startHour: number;
endHour: number;
slotMinutes: number;
}

View File

@@ -0,0 +1,189 @@
import { onActivated, onDeactivated, onMounted, onUnmounted, type Ref } from 'vue';
import type FullCalendar from '@fullcalendar/vue3';
interface VisualSnapOptions {
calendarRef: Ref<InstanceType<typeof FullCalendar> | null>;
snapMinutes: () => number;
slotMinutes: () => number;
formatDuration: (durationSeconds: number) => string;
}
export function useVisualSnap({
calendarRef,
snapMinutes,
slotMinutes,
formatDuration,
}: VisualSnapOptions) {
let rafId: number | null = null;
function getCalendarEl(): HTMLElement | null {
return (calendarRef.value?.$el as HTMLElement) ?? null;
}
function getSnapPixels(): number {
const calendarEl = getCalendarEl();
if (!calendarEl) return 25;
const slot = calendarEl.querySelector('.fc-timegrid-slot-lane') as HTMLElement;
if (!slot) return 25;
const slotHeightPx = slot.getBoundingClientRect().height;
return (snapMinutes() / slotMinutes()) * slotHeightPx;
}
function findMirrorHarness(calendarEl: HTMLElement) {
const mirror = calendarEl.querySelector('.fc-event-mirror') as HTMLElement | null;
const harness = mirror?.closest('.fc-timegrid-event-harness') as HTMLElement | null;
if (harness) {
harness.style.pointerEvents = 'none';
}
return { mirror, harness };
}
function updateMirrorDurationLabel(
mirror: HTMLElement,
snappedTop: number,
snappedEnd: number,
snapPx: number
) {
const snappedDurationMin = Math.round((snappedEnd - snappedTop) / snapPx) * snapMinutes();
const durationText = formatDuration(snappedDurationMin * 60);
const durationEl = mirror.querySelector('.fc-event-main')?.querySelector('div:last-child');
if (durationEl) {
durationEl.textContent = durationText;
}
}
function startLoop(onFrame: (calendarEl: HTMLElement, snapPx: number) => void) {
const calendarEl = getCalendarEl();
if (!calendarEl) return;
const snapPx = getSnapPixels();
if (snapPx <= 0) return;
const loop = () => {
onFrame(calendarEl, snapPx);
rafId = requestAnimationFrame(loop);
};
rafId = requestAnimationFrame(loop);
}
function stop() {
document.body.classList.remove('fc-resizing-active');
if (rafId !== null) {
cancelAnimationFrame(rafId);
rafId = null;
}
}
// --- Public snap starters ---
function startSelectSnap() {
// Don't start if another snap loop is already running
if (rafId !== null) return;
startLoop((calendarEl, snapPx) => {
const { mirror, harness } = findMirrorHarness(calendarEl);
if (!harness || !mirror) return;
const top = parseFloat(harness.style.top) || 0;
const endPos = -(parseFloat(harness.style.bottom) || 0);
const snappedTop = Math.floor(top / snapPx) * snapPx;
const snappedEnd = Math.ceil(endPos / snapPx) * snapPx;
const clampedEnd = Math.max(snappedTop + snapPx, snappedEnd);
harness.style.top = snappedTop + 'px';
harness.style.bottom = -clampedEnd + 'px';
updateMirrorDurationLabel(mirror, snappedTop, clampedEnd, snapPx);
});
}
function startDragSnap() {
stop();
startLoop((calendarEl, snapPx) => {
const { harness } = findMirrorHarness(calendarEl);
if (!harness) return;
const top = parseFloat(harness.style.top) || 0;
const endPos = -(parseFloat(harness.style.bottom) || 0);
const height = endPos - top;
const snappedTop = Math.floor(top / snapPx) * snapPx;
harness.style.top = snappedTop + 'px';
harness.style.bottom = -(snappedTop + height) + 'px';
});
}
function startResizeSnap() {
stop();
document.body.classList.add('fc-resizing-active');
let initialTop: number | null = null;
let initialEnd: number | null = null;
let resizeEdge: 'top' | 'bottom' | null = null;
startLoop((calendarEl, snapPx) => {
const { mirror, harness } = findMirrorHarness(calendarEl);
if (!harness) return;
const top = parseFloat(harness.style.top) || 0;
const endPos = -(parseFloat(harness.style.bottom) || 0);
// Detect which edge is being resized
if (initialTop === null) {
initialTop = top;
initialEnd = endPos;
} else if (resizeEdge === null) {
const topDelta = Math.abs(top - initialTop);
const endDelta = Math.abs(endPos - initialEnd!);
if (topDelta > 0.5) {
resizeEdge = 'top';
} else if (endDelta > 0.5) {
resizeEdge = 'bottom';
}
}
if (resizeEdge === 'bottom') {
const snappedEnd = Math.ceil(endPos / snapPx) * snapPx;
const clampedEnd = Math.max(top + snapPx, snappedEnd);
harness.style.bottom = -clampedEnd + 'px';
if (mirror) updateMirrorDurationLabel(mirror, top, clampedEnd, snapPx);
} else if (resizeEdge === 'top') {
const snappedTop = Math.floor(top / snapPx) * snapPx;
const clampedTop = Math.min(endPos - snapPx, snappedTop);
harness.style.top = clampedTop + 'px';
if (mirror) updateMirrorDurationLabel(mirror, clampedTop, endPos, snapPx);
}
});
}
// Pointerdown handler for starting select snap on timegrid background
function handleTimegridPointerDown(e: PointerEvent) {
const target = e.target as HTMLElement;
if (target.closest('.fc-event')) return;
startSelectSnap();
}
// Lifecycle: attach/detach pointerdown listener
function attachListener() {
const calendarEl = getCalendarEl();
calendarEl?.addEventListener('pointerdown', handleTimegridPointerDown);
}
function detachListener() {
const calendarEl = getCalendarEl();
calendarEl?.removeEventListener('pointerdown', handleTimegridPointerDown);
}
onMounted(attachListener);
onActivated(attachListener);
onDeactivated(() => {
stop();
detachListener();
});
onUnmounted(() => {
stop();
detachListener();
});
return {
startSelectSnap,
startDragSnap,
startResizeSnap,
stop,
};
}

View File

@@ -1,12 +1,11 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
import { getCurrentOrganizationId } from '@/utils/useUser';
import { computed, inject, type ComputedRef } from 'vue';
import type { Organization } from '@/packages/api/src';
import DollarIcon from './DollarIcon.vue';
import EuroIcon from './EuroIcon.vue';
const { organization } = useOrganizationQuery(getCurrentOrganizationId()!);
const icon = computed(() => (organization.value?.currency === 'EUR' ? EuroIcon : DollarIcon));
const organization = inject<ComputedRef<Organization>>('organization');
const icon = computed(() => (organization?.value?.currency === 'EUR' ? EuroIcon : DollarIcon));
</script>
<template>

View File

@@ -91,6 +91,7 @@ const showCreateTagModal = ref(false);
<template>
<TagCreateModal
v-if="showCreateTagModal"
v-model:show="showCreateTagModal"
:create-tag="createAndAddTag"></TagCreateModal>
<Dropdown

View File

@@ -228,6 +228,7 @@ async function handleDeleteTimeEntry() {
</div>
<TimeEntryEditModal
v-if="showEditModal"
v-model:show="showEditModal"
:time-entry="timeEntry"
:enable-estimated-time="enableEstimatedTime"

View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { ChevronRightIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
import { computed, nextTick, ref, watch, watchEffect } from 'vue';
import { computed, nextTick, ref, watch } from 'vue';
import ProjectDropdownItem from '@/packages/ui/src/Project/ProjectDropdownItem.vue';
import type {
CreateClientBody,
@@ -33,6 +33,7 @@ const searchValue = ref('');
watch(open, (isOpen) => {
if (isOpen) {
updateFilteredResults();
nextTick(() => {
initializeHighlightedItem();
searchInput.value?.focus({ preventScroll: true });
@@ -148,7 +149,7 @@ function addProjectToFilterObject(
}
}
watchEffect(() => {
function updateFilteredResults() {
const tempFilteredClients: ClientsWithProjectsWithTasks = [];
if (searchValue.value.length === 0) {
@@ -243,6 +244,13 @@ watchEffect(() => {
});
filteredResults.value = tempFilteredClients;
}
// Recompute filtered results when search value changes while open
watch(searchValue, () => {
if (open.value) {
updateFilteredResults();
}
});
async function addClientIfNoneExists() {
@@ -648,6 +656,7 @@ const showCreateProject = ref(false);
</template>
</Dropdown>
<ProjectCreateModal
v-if="showCreateProject"
v-model:show="showCreateProject"
:create-client
:enable-estimated-time="enableEstimatedTime"

View File

@@ -36,6 +36,7 @@ import TimeEntryEditModal from './TimeEntry/TimeEntryEditModal.vue';
import FullCalendarEventContent from './FullCalendar/FullCalendarEventContent.vue';
import FullCalendarDayHeader from './FullCalendar/FullCalendarDayHeader.vue';
import TimeEntryCalendar from './FullCalendar/TimeEntryCalendar.vue';
import CalendarSettingsPopover from './FullCalendar/CalendarSettingsPopover.vue';
import DateRangePicker from './Input/DateRangePicker.vue';
import TimezoneMismatchModal from './TimezoneMismatchModal.vue';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip/index';
@@ -59,6 +60,7 @@ import {
} from './field/index';
export type { FieldVariants } from './field/index';
export type { ActivityPeriod } from './FullCalendar/idleStatusPlugin';
export type { CalendarSettings } from './FullCalendar/calendarSettings';
export type {
CommandPaletteCommand,
CommandPaletteGroup,
@@ -92,6 +94,7 @@ export {
FullCalendarEventContent,
FullCalendarDayHeader,
TimeEntryCalendar,
CalendarSettingsPopover,
DateRangePicker,
TimezoneMismatchModal,
Tooltip,

View File

@@ -0,0 +1,22 @@
/**
* Fetches all pages from a paginated Laravel API endpoint.
* Uses `meta.last_page` to determine the total number of pages,
* so only a single request is made when all data fits on one page.
*/
export async function fetchAllPages<T>(
fetchPage: (page: number) => Promise<{
data: T[];
meta: { per_page: number; last_page: number };
}>
): Promise<T[]> {
const firstResponse = await fetchPage(1);
const allItems: T[] = [...firstResponse.data];
const { last_page } = firstResponse.meta;
for (let page = 2; page <= last_page; page++) {
const response = await fetchPage(page);
allItems.push(...response.data);
}
return allItems;
}

View File

@@ -8,6 +8,13 @@ import {
createCalendarQueryKey,
fetchAllCalendarEntries,
} from '@/utils/useTimeEntriesCalendarQuery';
import { fetchAllProjects } from '@/utils/useProjectsQuery';
import { fetchAllTasks } from '@/utils/useTasksQuery';
import { fetchAllTags } from '@/utils/useTagsQuery';
import { fetchAllClients } from '@/utils/useClientsQuery';
import { fetchAllMembers } from '@/utils/useMembersQuery';
import { fetchAllReports } from '@/utils/useReportsQuery';
import { fetchAllProjectMembers } from '@/utils/useProjectMembersQuery';
/**
* Route patterns mapped to their prefetch functions.
@@ -151,13 +158,9 @@ function prefetchProjects(queryClient: QueryClient) {
if (!organizationId) return;
queryClient.prefetchQuery({
queryKey: ['projects'],
queryFn: () =>
api.getProjects({
params: { organization: organizationId },
queries: { archived: 'all' },
}),
staleTime: 30000, // Consider fresh for 30 seconds
queryKey: ['projects', organizationId],
queryFn: async () => ({ data: await fetchAllProjects(organizationId) }),
staleTime: 30000,
});
}
@@ -166,12 +169,8 @@ function prefetchTasks(queryClient: QueryClient) {
if (!organizationId) return;
queryClient.prefetchQuery({
queryKey: ['tasks'],
queryFn: () =>
api.getTasks({
params: { organization: organizationId },
queries: { done: 'all' },
}),
queryKey: ['tasks', organizationId],
queryFn: async () => ({ data: await fetchAllTasks(organizationId) }),
staleTime: 30000,
});
}
@@ -181,11 +180,8 @@ function prefetchTags(queryClient: QueryClient) {
if (!organizationId) return;
queryClient.prefetchQuery({
queryKey: ['tags'],
queryFn: () =>
api.getTags({
params: { organization: organizationId },
}),
queryKey: ['tags', organizationId],
queryFn: async () => ({ data: await fetchAllTags(organizationId) }),
staleTime: 30000,
});
}
@@ -195,12 +191,8 @@ function prefetchClients(queryClient: QueryClient) {
if (!organizationId || !canViewClients()) return;
queryClient.prefetchQuery({
queryKey: ['clients'],
queryFn: () =>
api.getClients({
params: { organization: organizationId },
queries: { archived: 'all' },
}),
queryKey: ['clients', organizationId],
queryFn: async () => ({ data: await fetchAllClients(organizationId) }),
staleTime: 30000,
});
}
@@ -210,11 +202,8 @@ function prefetchMembers(queryClient: QueryClient) {
if (!organizationId || !canViewMembers()) return;
queryClient.prefetchQuery({
queryKey: ['members'],
queryFn: () =>
api.getMembers({
params: { organization: organizationId },
}),
queryKey: ['members', organizationId],
queryFn: async () => ({ data: await fetchAllMembers(organizationId) }),
staleTime: 30000,
});
}
@@ -224,11 +213,8 @@ function prefetchReports(queryClient: QueryClient) {
if (!organizationId) return;
queryClient.prefetchQuery({
queryKey: ['reports', 1],
queryFn: () =>
api.getReports({
params: { organization: organizationId },
}),
queryKey: ['reports', organizationId],
queryFn: async () => ({ data: await fetchAllReports(organizationId) }),
staleTime: 30000,
});
}
@@ -276,11 +262,10 @@ function prefetchProjectMembers(queryClient: QueryClient, projectId: string) {
if (!organizationId || !canViewMembers()) return;
queryClient.prefetchQuery({
queryKey: ['projectMembers', projectId],
queryFn: () =>
api.getProjectMembers({
params: { organization: organizationId, project: projectId },
}),
queryKey: ['projectMembers', organizationId, projectId],
queryFn: async () => ({
data: await fetchAllProjectMembers(organizationId, projectId),
}),
staleTime: 30000,
});
}

View File

@@ -3,19 +3,27 @@ import { api } from '@/packages/api/src';
import { getCurrentOrganizationId } from '@/utils/useUser';
import type { Client } from '@/packages/api/src';
import { computed } from 'vue';
import { fetchAllPages } from '@/utils/fetchAllPages';
export async function fetchAllClients(organizationId: string): Promise<Client[]> {
return fetchAllPages((page) =>
api.getClients({
params: { organization: organizationId },
queries: { archived: 'all', page },
})
);
}
export function useClientsQuery() {
const queryClient = useQueryClient();
const query = useQuery({
queryKey: ['clients'],
queryKey: computed(() => ['clients', getCurrentOrganizationId()]),
queryFn: async () => {
const organizationId = getCurrentOrganizationId();
if (!organizationId) throw new Error('No organization');
return api.getClients({
params: { organization: organizationId },
queries: { archived: 'all' },
});
const data = await fetchAllClients(organizationId);
return { data };
},
enabled: () => !!getCurrentOrganizationId(),
staleTime: 1000 * 30, // 30 seconds

View File

@@ -1,31 +1,35 @@
import { defineStore } from 'pinia';
import { api } from '@/packages/api/src';
import { computed, ref } from 'vue';
import type {
InvitationsIndexResponse,
CreateInvitationBody,
Invitation,
} from '@/packages/api/src';
import type { CreateInvitationBody, Invitation } from '@/packages/api/src';
import { getCurrentOrganizationId } from '@/utils/useUser';
import { useNotificationsStore } from '@/utils/notification';
import { fetchAllPages } from '@/utils/fetchAllPages';
export async function fetchAllInvitations(organizationId: string): Promise<Invitation[]> {
return fetchAllPages((page) =>
api.getInvitations({
params: { organization: organizationId },
queries: { page },
})
);
}
export const useInvitationsStore = defineStore('invitations', () => {
const invitationsResponse = ref<InvitationsIndexResponse | null>(null);
const invitationsData = ref<Invitation[]>([]);
const { handleApiRequestNotifications } = useNotificationsStore();
async function fetchInvitations() {
const organization = getCurrentOrganizationId();
if (organization) {
invitationsResponse.value = await handleApiRequestNotifications(
() =>
api.getInvitations({
params: {
organization: organization,
},
}),
const data = await handleApiRequestNotifications(
() => fetchAllInvitations(organization),
undefined,
'Failed to fetch invitations'
);
if (data) {
invitationsData.value = data;
}
}
}
@@ -47,7 +51,7 @@ export const useInvitationsStore = defineStore('invitations', () => {
}
const invitations = computed<Invitation[]>(() => {
return invitationsResponse.value?.data || [];
return invitationsData.value;
});
return { invitations, fetchInvitations, createInvitation };

View File

@@ -3,18 +3,27 @@ import { api } from '@/packages/api/src';
import { getCurrentOrganizationId } from '@/utils/useUser';
import type { Member } from '@/packages/api/src';
import { computed } from 'vue';
import { fetchAllPages } from '@/utils/fetchAllPages';
export async function fetchAllMembers(organizationId: string): Promise<Member[]> {
return fetchAllPages((page) =>
api.getMembers({
params: { organization: organizationId },
queries: { page },
})
);
}
export function useMembersQuery() {
const queryClient = useQueryClient();
const query = useQuery({
queryKey: ['members'],
queryKey: computed(() => ['members', getCurrentOrganizationId()]),
queryFn: async () => {
const organizationId = getCurrentOrganizationId();
if (!organizationId) throw new Error('No organization');
return api.getMembers({
params: { organization: organizationId },
});
const data = await fetchAllMembers(organizationId);
return { data };
},
enabled: () => !!getCurrentOrganizationId(),
staleTime: 1000 * 30, // 30 seconds

View File

@@ -26,7 +26,9 @@ export const useProjectMembersStore = defineStore('project-members', () => {
'Project member added successfully',
'Failed to add project member'
);
queryClient.invalidateQueries({ queryKey: ['projectMembers', projectId] });
queryClient.invalidateQueries({
queryKey: ['projectMembers', organization, projectId],
});
}
}
@@ -49,7 +51,7 @@ export const useProjectMembersStore = defineStore('project-members', () => {
);
if (response?.data?.project_id) {
queryClient.invalidateQueries({
queryKey: ['projectMembers', response.data.project_id],
queryKey: ['projectMembers', organization, response.data.project_id],
});
}
}
@@ -69,7 +71,9 @@ export const useProjectMembersStore = defineStore('project-members', () => {
'Project member removed successfully',
'Failed to remove project member'
);
queryClient.invalidateQueries({ queryKey: ['projectMembers', projectId] });
queryClient.invalidateQueries({
queryKey: ['projectMembers', organizationId, projectId],
});
}
}

View File

@@ -3,6 +3,19 @@ import { api } from '@/packages/api/src';
import { getCurrentOrganizationId } from '@/utils/useUser';
import type { ProjectMember } from '@/packages/api/src';
import { computed, type Ref } from 'vue';
import { fetchAllPages } from '@/utils/fetchAllPages';
export async function fetchAllProjectMembers(
organizationId: string,
projectId: string
): Promise<ProjectMember[]> {
return fetchAllPages((page) =>
api.getProjectMembers({
params: { organization: organizationId, project: projectId },
queries: { page },
})
);
}
export function useProjectMembersQuery(projectId: Ref<string | null> | string) {
const queryClient = useQueryClient();
@@ -12,14 +25,17 @@ export function useProjectMembersQuery(projectId: Ref<string | null> | string) {
});
const query = useQuery({
queryKey: ['projectMembers', projectIdValue],
queryKey: computed(() => [
'projectMembers',
getCurrentOrganizationId(),
projectIdValue.value,
]),
queryFn: async () => {
const organizationId = getCurrentOrganizationId();
const pid = projectIdValue.value;
if (!organizationId || !pid) throw new Error('No organization or project');
return api.getProjectMembers({
params: { organization: organizationId, project: pid },
});
const data = await fetchAllProjectMembers(organizationId, pid);
return { data };
},
enabled: () => !!getCurrentOrganizationId() && !!projectIdValue.value,
staleTime: 1000 * 30, // 30 seconds
@@ -28,7 +44,9 @@ export function useProjectMembersQuery(projectId: Ref<string | null> | string) {
const projectMembers = computed<ProjectMember[]>(() => query.data.value?.data ?? []);
const invalidateProjectMembers = () => {
queryClient.invalidateQueries({ queryKey: ['projectMembers', projectIdValue.value] });
queryClient.invalidateQueries({
queryKey: ['projectMembers', getCurrentOrganizationId(), projectIdValue.value],
});
};
return {

View File

@@ -3,19 +3,27 @@ import { api } from '@/packages/api/src';
import { getCurrentOrganizationId } from '@/utils/useUser';
import type { Project } from '@/packages/api/src';
import { computed } from 'vue';
import { fetchAllPages } from '@/utils/fetchAllPages';
export async function fetchAllProjects(organizationId: string): Promise<Project[]> {
return fetchAllPages((page) =>
api.getProjects({
params: { organization: organizationId },
queries: { archived: 'all', page },
})
);
}
export function useProjectsQuery() {
const queryClient = useQueryClient();
const query = useQuery({
queryKey: ['projects'],
queryKey: computed(() => ['projects', getCurrentOrganizationId()]),
queryFn: async () => {
const organizationId = getCurrentOrganizationId();
if (!organizationId) throw new Error('No organization');
return api.getProjects({
params: { organization: organizationId },
queries: { archived: 'all' },
});
const data = await fetchAllProjects(organizationId);
return { data };
},
enabled: () => !!getCurrentOrganizationId(),
staleTime: 1000 * 30, // 30 seconds

View File

@@ -0,0 +1,12 @@
import { api } from '@/packages/api/src';
import type { Report } from '@/packages/api/src';
import { fetchAllPages } from '@/utils/fetchAllPages';
export async function fetchAllReports(organizationId: string): Promise<Report[]> {
return fetchAllPages((page) =>
api.getReports({
params: { organization: organizationId },
queries: { page },
})
);
}

View File

@@ -3,18 +3,27 @@ import { api } from '@/packages/api/src';
import { getCurrentOrganizationId } from '@/utils/useUser';
import type { Tag } from '@/packages/api/src';
import { computed } from 'vue';
import { fetchAllPages } from '@/utils/fetchAllPages';
export async function fetchAllTags(organizationId: string): Promise<Tag[]> {
return fetchAllPages((page) =>
api.getTags({
params: { organization: organizationId },
queries: { page },
})
);
}
export function useTagsQuery() {
const queryClient = useQueryClient();
const query = useQuery({
queryKey: ['tags'],
queryKey: computed(() => ['tags', getCurrentOrganizationId()]),
queryFn: async () => {
const organizationId = getCurrentOrganizationId();
if (!organizationId) throw new Error('No organization');
return api.getTags({
params: { organization: organizationId },
});
const data = await fetchAllTags(organizationId);
return { data };
},
enabled: () => !!getCurrentOrganizationId(),
staleTime: 1000 * 30, // 30 seconds

View File

@@ -3,19 +3,27 @@ import { api } from '@/packages/api/src';
import { getCurrentOrganizationId } from '@/utils/useUser';
import type { Task } from '@/packages/api/src';
import { computed } from 'vue';
import { fetchAllPages } from '@/utils/fetchAllPages';
export async function fetchAllTasks(organizationId: string): Promise<Task[]> {
return fetchAllPages((page) =>
api.getTasks({
params: { organization: organizationId },
queries: { done: 'all', page },
})
);
}
export function useTasksQuery() {
const queryClient = useQueryClient();
const query = useQuery({
queryKey: ['tasks'],
queryKey: computed(() => ['tasks', getCurrentOrganizationId()]),
queryFn: async () => {
const organizationId = getCurrentOrganizationId();
if (!organizationId) throw new Error('No organization');
return api.getTasks({
params: { organization: organizationId },
queries: { done: 'all' },
});
const data = await fetchAllTasks(organizationId);
return { data };
},
enabled: () => !!getCurrentOrganizationId(),
staleTime: 1000 * 30, // 30 seconds

View File

@@ -7,7 +7,12 @@ export function useTimeEntriesReportQuery(
filterParams: Ref<Record<string, unknown>> | ComputedRef<Record<string, unknown>>
) {
return useQuery<TimeEntryResponse>({
queryKey: computed(() => ['timeEntries', 'detailed-report', unref(filterParams)]),
queryKey: computed(() => [
'timeEntries',
'detailed-report',
getCurrentOrganizationId(),
unref(filterParams),
]),
enabled: computed(() => !!getCurrentOrganizationId()),
queryFn: () =>
api.getTimeEntries({

View File

@@ -40,6 +40,10 @@ Route::middleware([
return Inertia::render('Calendar');
})->name('calendar');
Route::get('/timesheet', function () {
return Inertia::render('Timesheet');
})->name('timesheet');
Route::get('/reporting', function () {
return Inertia::render('Reporting');
})->name('reporting');

View File

@@ -46,6 +46,31 @@ class ApiTokenEndpointTest extends ApiEndpointTestAbstract
]);
}
public function test_index_endpoint_returns_api_tokens_ordered_by_created_at_descending(): void
{
// Arrange
$data = $this->createUserWithPermission([]);
$personalAccessClient = $this->createPersonalAccessClient();
$tokenOldest = Token::factory()->forUser($data->user)->forClient($personalAccessClient)->create([
'created_at' => now()->subDays(3),
]);
$tokenNewest = Token::factory()->forUser($data->user)->forClient($personalAccessClient)->create([
'created_at' => now()->subDay(),
]);
$tokenMiddle = Token::factory()->forUser($data->user)->forClient($personalAccessClient)->create([
'created_at' => now()->subDays(2),
]);
Passport::actingAs($data->user);
// Act
$response = $this->getJson(route('api.v1.api-tokens.index'));
// Assert
$this->assertResponseCode($response, 200);
$ids = collect($response->json('data'))->pluck('id')->values()->toArray();
$this->assertSame([$tokenNewest->id, $tokenMiddle->id, $tokenOldest->id], $ids);
}
public function test_store_endpoint_creates_new_api_token(): void
{
// Arrange

View File

@@ -55,6 +55,32 @@ class InvitationEndpointTest extends ApiEndpointTestAbstract
]);
}
public function test_index_returns_invitations_ordered_by_created_at_descending(): void
{
// Arrange
$data = $this->createUserWithPermission([
'invitations:view',
]);
$invitationOldest = OrganizationInvitation::factory()->forOrganization($data->organization)->create([
'created_at' => now()->subDays(3),
]);
$invitationNewest = OrganizationInvitation::factory()->forOrganization($data->organization)->create([
'created_at' => now()->subDay(),
]);
$invitationMiddle = OrganizationInvitation::factory()->forOrganization($data->organization)->create([
'created_at' => now()->subDays(2),
]);
Passport::actingAs($data->user);
// Act
$response = $this->getJson(route('api.v1.invitations.index', $data->organization->getKey()));
// Assert
$response->assertStatus(200);
$ids = collect($response->json('data'))->pluck('id')->values()->toArray();
$this->assertSame([$invitationNewest->getKey(), $invitationMiddle->getKey(), $invitationOldest->getKey()], $ids);
}
public function test_store_fails_if_user_has_no_permission_to_create_invitations(): void
{
// Arrange

View File

@@ -52,6 +52,38 @@ class MemberEndpointTest extends ApiEndpointTestAbstract
$response->assertStatus(200);
}
public function test_index_returns_members_ordered_by_created_at_descending(): void
{
// Arrange
$data = $this->createUserWithPermission([
'members:view',
]);
$memberOldest = Member::factory()->forOrganization($data->organization)->create([
'created_at' => now()->subDays(3),
]);
$memberNewest = Member::factory()->forOrganization($data->organization)->create([
'created_at' => now()->subDay(),
]);
$memberMiddle = Member::factory()->forOrganization($data->organization)->create([
'created_at' => now()->subDays(2),
]);
Passport::actingAs($data->user);
// Act
$response = $this->getJson(route('api.v1.members.index', $data->organization->getKey()));
// Assert
$response->assertStatus(200);
$ids = collect($response->json('data'))->pluck('id')->values()->toArray();
// Verify that the three explicitly created members appear in newest-first order
$createdMemberIds = array_values(array_filter($ids, fn ($id) => in_array($id, [
$memberOldest->getKey(),
$memberNewest->getKey(),
$memberMiddle->getKey(),
], true)));
$this->assertSame([$memberNewest->getKey(), $memberMiddle->getKey(), $memberOldest->getKey()], $createdMemberIds);
}
public function test_update_member_fails_if_user_has_no_permission_to_update_members(): void
{
// Arrange

View File

@@ -54,6 +54,33 @@ class ProjectEndpointTest extends ApiEndpointTestAbstract
$response->assertJsonCount(4, 'data');
}
public function test_index_endpoint_returns_projects_ordered_by_created_at_descending(): void
{
// Arrange
$data = $this->createUserWithPermission([
'projects:view',
'projects:view:all',
]);
$projectOldest = Project::factory()->forOrganization($data->organization)->create([
'created_at' => now()->subDays(3),
]);
$projectNewest = Project::factory()->forOrganization($data->organization)->create([
'created_at' => now()->subDay(),
]);
$projectMiddle = Project::factory()->forOrganization($data->organization)->create([
'created_at' => now()->subDays(2),
]);
Passport::actingAs($data->user);
// Act
$response = $this->getJson(route('api.v1.projects.index', [$data->organization->getKey()]));
// Assert
$response->assertStatus(200);
$ids = collect($response->json('data'))->pluck('id')->values()->toArray();
$this->assertSame([$projectNewest->getKey(), $projectMiddle->getKey(), $projectOldest->getKey()], $ids);
}
public function test_index_endpoint_without_filter_archived_returns_only_non_archived_projects(): void
{
// Arrange
@@ -211,10 +238,10 @@ class ProjectEndpointTest extends ApiEndpointTestAbstract
->has('data')
->has('links')
->has('meta')
->where('data.0.billable_rate', 112)
->where('data.1.billable_rate', 112)
->where('data.2.billable_rate', 113)
->where('data.3.billable_rate', 113)
->where('data.0.billable_rate', 113)
->where('data.1.billable_rate', 113)
->where('data.2.billable_rate', 112)
->where('data.3.billable_rate', 112)
);
}
@@ -254,6 +281,7 @@ class ProjectEndpointTest extends ApiEndpointTestAbstract
// Arrange
$data = $this->createUserWithPermission([
'projects:view',
'projects:view:all',
]);
$project = Project::factory()->forOrganization($data->organization)->create();
Passport::actingAs($data->user);
@@ -266,6 +294,20 @@ class ProjectEndpointTest extends ApiEndpointTestAbstract
$response->assertJsonPath('data.id', $project->getKey());
}
public function test_show_endpoint_fails_if_employee_tries_to_access_private_project_that_they_are_not_a_member_of(): void
{
// Arrange
$data = $this->createUserWithRole(Role::Employee);
$privateProject = Project::factory()->forOrganization($data->organization)->isPrivate()->create();
Passport::actingAs($data->user);
// Act
$response = $this->getJson(route('api.v1.projects.show', [$data->organization->getKey(), $privateProject->getKey()]));
// Assert
$response->assertForbidden();
}
public function test_store_endpoint_fails_if_user_has_no_permission_to_create_projects(): void
{
// Arrange

View File

@@ -80,6 +80,36 @@ class ProjectMemberEndpointTest extends ApiEndpointTestAbstract
$response->assertJsonCount(4, 'data');
}
public function test_index_endpoint_returns_project_members_ordered_by_created_at_descending(): void
{
// Arrange
$data = $this->createUserWithPermission([
'project-members:view',
]);
$project = Project::factory()->forOrganization($data->organization)->create();
$pmOldest = ProjectMember::factory()->forProject($project)->create([
'created_at' => now()->subDays(3),
]);
$pmNewest = ProjectMember::factory()->forProject($project)->create([
'created_at' => now()->subDay(),
]);
$pmMiddle = ProjectMember::factory()->forProject($project)->create([
'created_at' => now()->subDays(2),
]);
Passport::actingAs($data->user);
// Act
$response = $this->getJson(route('api.v1.project-members.index', [
$data->organization->getKey(),
$project->getKey(),
]));
// Assert
$response->assertStatus(200);
$ids = collect($response->json('data'))->pluck('id')->values()->toArray();
$this->assertSame([$pmNewest->getKey(), $pmMiddle->getKey(), $pmOldest->getKey()], $ids);
}
public function test_store_endpoint_fails_if_user_has_no_permission_to_add_members_to_project(): void
{
// Arrange

View File

@@ -78,6 +78,33 @@ class TaskEndpointTest extends ApiEndpointTestAbstract
$response->assertJsonCount(4, 'data');
}
public function test_index_endpoint_returns_tasks_ordered_by_created_at_descending(): void
{
// Arrange
$data = $this->createUserWithPermission([
'tasks:view',
'tasks:view:all',
]);
$taskOldest = Task::factory()->forOrganization($data->organization)->create([
'created_at' => now()->subDays(3),
]);
$taskNewest = Task::factory()->forOrganization($data->organization)->create([
'created_at' => now()->subDay(),
]);
$taskMiddle = Task::factory()->forOrganization($data->organization)->create([
'created_at' => now()->subDays(2),
]);
Passport::actingAs($data->user);
// Act
$response = $this->getJson(route('api.v1.tasks.index', [$data->organization->getKey(), 'done' => 'all']));
// Assert
$response->assertStatus(200);
$ids = collect($response->json('data'))->pluck('id')->values()->toArray();
$this->assertSame([$taskNewest->getKey(), $taskMiddle->getKey(), $taskOldest->getKey()], $ids);
}
public function test_index_endpoint_without_filter_done_returns_list_of_all_tasks_of_organization(): void
{
// Arrange