mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-10-08 05:43:18 +01:00
Compare commits
36 Commits
feature/fi
...
79f88f48cd
| Author | SHA1 | Date | |
|---|---|---|---|
|
79f88f48cd | ||
|
|
5b12c09747 | ||
|
|
24023353f2 | ||
|
|
720d20c10e | ||
|
|
82ea9af8b5 | ||
|
|
169d522da0 | ||
|
|
45c7377802 | ||
|
|
8e57275cef | ||
|
|
efc6b55628 | ||
|
|
c12789376d | ||
|
|
4795812b60 | ||
|
|
0e00979ab8 | ||
|
|
f1426fcb5e | ||
|
|
23f512d4a4 | ||
|
|
637475e669 | ||
|
|
3ec2abb309 | ||
|
|
3e36b1cc01 | ||
|
|
7831bc697e | ||
|
|
602a8daa1f | ||
|
|
38b448a729 | ||
|
|
e6f071f87f | ||
|
|
693a1fa7e0 | ||
|
|
77f14b696e | ||
|
|
593372bae5 | ||
|
|
db9ca51fc4 | ||
|
|
28aba7b27a | ||
|
|
453d5ed066 | ||
|
|
ed3ba0135b | ||
|
|
fb7d945c50 | ||
|
|
9958e1c09c | ||
|
|
f00d48f1c3 | ||
|
|
7edbfd5d76 | ||
|
|
1edb940557 | ||
|
|
c9330e6cb8 | ||
|
|
0e9f652d84 | ||
|
|
d29f5706ce |
@@ -5,7 +5,8 @@ APP_KEY=base64:UNQNf1SXeASNkWux01Rj8EnHYx8FO0kAxWNDwktclkk=
|
||||
APP_DEBUG=true
|
||||
APP_URL=https://solidtime.test
|
||||
APP_FORCE_HTTPS=false
|
||||
APP_ENABLE_REGISTRATION=true
|
||||
# Supported values: on, off, invite-only (true/false are supported for backwards compatibility)
|
||||
APP_ENABLE_REGISTRATION=on
|
||||
SUPER_ADMINS=admin@example.com
|
||||
PAGINATION_PER_PAGE_DEFAULT=500
|
||||
|
||||
|
||||
1
.github/VOUCHED.td
vendored
1
.github/VOUCHED.td
vendored
@@ -14,6 +14,7 @@
|
||||
# Seeded 2026-07-25 from the authors of every merged pull request.
|
||||
|
||||
agross
|
||||
akolenda
|
||||
bufferhead-code
|
||||
candideu
|
||||
kasparrosin
|
||||
|
||||
4
.github/workflows/build-onpremise.yml
vendored
4
.github/workflows/build-onpremise.yml
vendored
@@ -141,7 +141,7 @@ jobs:
|
||||
${{ env.DOCKER_REPO }}
|
||||
|
||||
- name: "Login to solidtime OnPremise Registry"
|
||||
uses: docker/login-action@v4
|
||||
uses: docker/login-action@v4.5.2
|
||||
with:
|
||||
registry: registry.on-premise.solidtime.io
|
||||
username: ${{ secrets.ONPREMISE_USERNAME }}
|
||||
@@ -195,7 +195,7 @@ jobs:
|
||||
merge-multiple: true
|
||||
|
||||
- name: "Login to solidtime OnPremise Registry"
|
||||
uses: docker/login-action@v4
|
||||
uses: docker/login-action@v4.5.2
|
||||
with:
|
||||
registry: registry.on-premise.solidtime.io
|
||||
username: ${{ secrets.ONPREMISE_USERNAME }}
|
||||
|
||||
2
.github/workflows/build-private.yml
vendored
2
.github/workflows/build-private.yml
vendored
@@ -177,7 +177,7 @@ jobs:
|
||||
SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
|
||||
|
||||
- name: "Login to GitHub Container Registry"
|
||||
uses: docker/login-action@v4
|
||||
uses: docker/login-action@v4.5.2
|
||||
with:
|
||||
registry: rg.fr-par.scw.cloud/solidtime
|
||||
username: nologin
|
||||
|
||||
8
.github/workflows/build-public.yml
vendored
8
.github/workflows/build-public.yml
vendored
@@ -117,13 +117,13 @@ jobs:
|
||||
${{ env.GHCR_REPO }}
|
||||
|
||||
- name: "Login to Docker Hub Container Registry"
|
||||
uses: docker/login-action@v4
|
||||
uses: docker/login-action@v4.5.2
|
||||
with:
|
||||
username: ${{ secrets.DOCKERHUB_USERNAME }}
|
||||
password: ${{ secrets.DOCKERHUB_TOKEN }}
|
||||
|
||||
- name: "Login to GitHub Container Registry"
|
||||
uses: docker/login-action@v4
|
||||
uses: docker/login-action@v4.5.2
|
||||
with:
|
||||
registry: ghcr.io
|
||||
username: ${{ github.actor }}
|
||||
@@ -177,13 +177,13 @@ jobs:
|
||||
merge-multiple: true
|
||||
|
||||
- name: "Login to Docker Hub"
|
||||
uses: docker/login-action@v4
|
||||
uses: docker/login-action@v4.5.2
|
||||
with:
|
||||
username: ${{ secrets.DOCKERHUB_USERNAME }}
|
||||
password: ${{ secrets.DOCKERHUB_TOKEN }}
|
||||
|
||||
- name: "Login to GHCR"
|
||||
uses: docker/login-action@v4
|
||||
uses: docker/login-action@v4.5.2
|
||||
with:
|
||||
registry: ghcr.io
|
||||
username: ${{ github.actor }}
|
||||
|
||||
@@ -4,9 +4,11 @@ declare(strict_types=1);
|
||||
|
||||
namespace App\Actions\Fortify;
|
||||
|
||||
use App\Enums\RegistrationMode;
|
||||
use App\Enums\Weekday;
|
||||
use App\Events\NewsletterRegistered;
|
||||
use App\Models\User;
|
||||
use App\Service\InvitationService;
|
||||
use App\Service\IpLookup\IpLookupServiceContract;
|
||||
use App\Service\TimezoneService;
|
||||
use App\Service\UserService;
|
||||
@@ -31,13 +33,14 @@ class CreateNewUser implements CreatesNewUsers
|
||||
*/
|
||||
public function create(array $input): User
|
||||
{
|
||||
if (! config('app.enable_registration')) {
|
||||
$registrationMode = RegistrationMode::fromConfig(config('app.enable_registration'));
|
||||
if ($registrationMode === RegistrationMode::Off) {
|
||||
throw ValidationException::withMessages([
|
||||
'email' => [__('Registration is disabled.')],
|
||||
]);
|
||||
}
|
||||
|
||||
Validator::make($input, [
|
||||
$validated = Validator::make($input, [
|
||||
'name' => [
|
||||
'required',
|
||||
'string',
|
||||
@@ -60,6 +63,20 @@ class CreateNewUser implements CreatesNewUsers
|
||||
],
|
||||
])->validate();
|
||||
|
||||
if ($registrationMode === RegistrationMode::InviteOnly) {
|
||||
$invitationService = app(InvitationService::class);
|
||||
$email = (string) $validated['email'];
|
||||
if (! $invitationService->hasAcceptedInvitationForEmail($email)) {
|
||||
$message = $invitationService->hasPendingInvitationForEmail($email)
|
||||
? __('Please accept the organization invitation sent to your email address before registering.')
|
||||
: __('Registration is only available to invited users.');
|
||||
|
||||
throw ValidationException::withMessages([
|
||||
'email' => [$message],
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
$timezone = null;
|
||||
if (array_key_exists('timezone', $input) && is_string($input['timezone'])) {
|
||||
if (app(TimezoneService::class)->isValid($input['timezone'])) {
|
||||
|
||||
@@ -51,7 +51,8 @@ class TimeEntrySendStillRunningMailsCommand extends Command
|
||||
])
|
||||
->whereHas('user', function (Builder $query): void {
|
||||
/** @var Builder<User> $query */
|
||||
$query->where('is_placeholder', '=', false);
|
||||
$query->where('is_placeholder', '=', false)
|
||||
->where('send_time_entry_still_running_email', '=', true);
|
||||
})
|
||||
->orderBy('created_at', 'asc')
|
||||
->chunk(500, function (Collection $timeEntries) use ($dryRun, &$sentMails): void {
|
||||
|
||||
29
app/Enums/RegistrationMode.php
Normal file
29
app/Enums/RegistrationMode.php
Normal file
@@ -0,0 +1,29 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Enums;
|
||||
|
||||
enum RegistrationMode: string
|
||||
{
|
||||
case On = 'on';
|
||||
case InviteOnly = 'invite-only';
|
||||
case Off = 'off';
|
||||
|
||||
public static function fromConfig(mixed $value): self
|
||||
{
|
||||
if ($value === true) {
|
||||
return self::On;
|
||||
}
|
||||
|
||||
if ($value === false || $value === null) {
|
||||
return self::Off;
|
||||
}
|
||||
|
||||
return match (strtolower(trim((string) $value))) {
|
||||
'1', 'on', 'true' => self::On,
|
||||
'invite-only' => self::InviteOnly,
|
||||
default => self::Off,
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -60,7 +60,6 @@ abstract class ApiException extends Exception
|
||||
*/
|
||||
public function report(): bool
|
||||
{
|
||||
// TODO: temporary activated
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,4 +7,9 @@ namespace App\Exceptions\Api;
|
||||
class CanNotDeleteUserWhoIsOwnerOfOrganizationWithMultipleMembers extends ApiException
|
||||
{
|
||||
public const string KEY = 'can_not_delete_user_who_is_owner_of_organization_with_multiple_members';
|
||||
|
||||
public function report(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,4 +7,9 @@ namespace App\Exceptions\Api;
|
||||
class CanNotRemoveOwnerFromOrganization extends ApiException
|
||||
{
|
||||
public const string KEY = 'can_not_remove_owner_from_organization';
|
||||
|
||||
public function report(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,4 +7,9 @@ namespace App\Exceptions\Api;
|
||||
class ChangingRoleOfPlaceholderIsNotAllowed extends ApiException
|
||||
{
|
||||
public const string KEY = 'changing_role_of_placeholder_is_not_allowed';
|
||||
|
||||
public function report(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,4 +7,9 @@ namespace App\Exceptions\Api;
|
||||
class ChangingRoleToPlaceholderIsNotAllowed extends ApiException
|
||||
{
|
||||
public const string KEY = 'changing_role_to_placeholder_is_not_allowed';
|
||||
|
||||
public function report(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,6 +19,16 @@ class EntityStillInUseApiException extends ApiException
|
||||
|
||||
public const string KEY = 'entity_still_in_use';
|
||||
|
||||
/**
|
||||
* Report the exception.
|
||||
*
|
||||
* @return bool true means the exception handler will not report it again
|
||||
*/
|
||||
public function report(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the translated message for the exception.
|
||||
*/
|
||||
|
||||
@@ -7,4 +7,9 @@ namespace App\Exceptions\Api;
|
||||
class FeatureIsNotAvailableInFreePlanApiException extends ApiException
|
||||
{
|
||||
public const string KEY = 'feature_is_not_available_in_free_plan';
|
||||
|
||||
public function report(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,4 +7,9 @@ namespace App\Exceptions\Api;
|
||||
class InactiveUserCanNotBeUsedApiException extends ApiException
|
||||
{
|
||||
public const string KEY = 'inactive_user_can_not_be_used';
|
||||
|
||||
public function report(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,4 +7,9 @@ namespace App\Exceptions\Api;
|
||||
class InvitationForTheEmailAlreadyExistsApiException extends ApiException
|
||||
{
|
||||
public const string KEY = 'invitation_for_the_email_already_exists';
|
||||
|
||||
public function report(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,4 +7,9 @@ namespace App\Exceptions\Api;
|
||||
class OnlyOwnerCanChangeOwnership extends ApiException
|
||||
{
|
||||
public const string KEY = 'only_owner_can_change_ownership';
|
||||
|
||||
public function report(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,4 +7,9 @@ namespace App\Exceptions\Api;
|
||||
class OnlyPlaceholdersCanBeMergedIntoAnotherMember extends ApiException
|
||||
{
|
||||
public const string KEY = 'only_placeholders_can_be_merged_into_another_member';
|
||||
|
||||
public function report(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,4 +7,9 @@ namespace App\Exceptions\Api;
|
||||
class OrganizationHasNoSubscriptionButMultipleMembersException extends ApiException
|
||||
{
|
||||
public const string KEY = 'organization_has_no_subscription_but_multiple_members';
|
||||
|
||||
public function report(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,4 +7,9 @@ namespace App\Exceptions\Api;
|
||||
class OrganizationNeedsAtLeastOneOwner extends ApiException
|
||||
{
|
||||
public const string KEY = 'organization_needs_at_least_one_owner';
|
||||
|
||||
public function report(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,4 +7,9 @@ namespace App\Exceptions\Api;
|
||||
class OverlappingTimeEntryApiException extends ApiException
|
||||
{
|
||||
public const string KEY = 'overlapping_time_entry';
|
||||
|
||||
public function report(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,4 +7,9 @@ namespace App\Exceptions\Api;
|
||||
class ThisPlaceholderCanNotBeInvitedUseTheMergeToolInsteadException extends ApiException
|
||||
{
|
||||
public const string KEY = 'this_placeholder_can_not_be_invited_use_the_merge_tool_instead_api_exception';
|
||||
|
||||
public function report(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,4 +7,9 @@ namespace App\Exceptions\Api;
|
||||
class TimeEntryCanNotBeRestartedApiException extends ApiException
|
||||
{
|
||||
public const string KEY = 'time_entry_can_not_be_restarted';
|
||||
|
||||
public function report(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,4 +7,14 @@ namespace App\Exceptions\Api;
|
||||
class TimeEntryStillRunningApiException extends ApiException
|
||||
{
|
||||
public const string KEY = 'time_entry_still_running';
|
||||
|
||||
/**
|
||||
* Report the exception.
|
||||
*
|
||||
* @return bool true means the exception handler will not report it again
|
||||
*/
|
||||
public function report(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,4 +7,9 @@ namespace App\Exceptions\Api;
|
||||
class UserIsAlreadyMemberOfOrganizationApiException extends ApiException
|
||||
{
|
||||
public const string KEY = 'user_is_already_member_of_organization';
|
||||
|
||||
public function report(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,4 +7,9 @@ namespace App\Exceptions\Api;
|
||||
class UserIsAlreadyMemberOfProjectApiException extends ApiException
|
||||
{
|
||||
public const string KEY = 'user_is_already_member_of_project';
|
||||
|
||||
public function report(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,4 +7,9 @@ namespace App\Exceptions\Api;
|
||||
class UserNotPlaceholderApiException extends ApiException
|
||||
{
|
||||
public const string KEY = 'user_not_placeholder';
|
||||
|
||||
public function report(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,4 +7,9 @@ namespace App\Exceptions\Api;
|
||||
class UserResendEmailVerificationNoPendingEmailApiException extends ApiException
|
||||
{
|
||||
public const string KEY = 'user_resend_email_verification_no_pending_email';
|
||||
|
||||
public function report(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@ namespace App\Exceptions;
|
||||
use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
|
||||
use Illuminate\Http\RedirectResponse;
|
||||
use Illuminate\Http\Request;
|
||||
use League\OAuth2\Server\Exception\OAuthServerException;
|
||||
use Symfony\Component\HttpFoundation\Exception\SuspiciousOperationException;
|
||||
use Symfony\Component\HttpFoundation\Response;
|
||||
use Symfony\Component\HttpKernel\Exception\BadRequestHttpException;
|
||||
@@ -34,6 +35,10 @@ class Handler extends ExceptionHandler
|
||||
//
|
||||
});
|
||||
|
||||
$this->dontReportWhen(fn (Throwable $e): bool => $e instanceof OAuthServerException
|
||||
&& $e->getErrorType() === 'access_denied'
|
||||
&& $e->getHttpStatusCode() === 401);
|
||||
|
||||
// A request on an untrusted host (see App\Http\Middleware\TrustHosts)
|
||||
// otherwise renders as a bare "Bad request." 400. Show a message that
|
||||
// says how to fix it instead. The framework has already converted the
|
||||
|
||||
@@ -28,7 +28,9 @@ class ExportController extends Controller
|
||||
|
||||
$filepath = $exportService->export($organization);
|
||||
$downloadUrl = Storage::disk(config('filesystems.private'))
|
||||
->temporaryUrl($filepath, Carbon::now()->addMinutes(10));
|
||||
->temporaryUrl($filepath, Carbon::now()->addMinutes(10), [
|
||||
'ResponseContentDisposition' => 'attachment; filename="'.basename($filepath).'"',
|
||||
]);
|
||||
|
||||
return new JsonResponse([
|
||||
'success' => true,
|
||||
|
||||
@@ -336,7 +336,9 @@ class TimeEntryController extends Controller
|
||||
|
||||
return response()->json([
|
||||
'download_url' => Storage::disk(config('filesystems.private'))
|
||||
->temporaryUrl($path, now()->addMinutes(5)),
|
||||
->temporaryUrl($path, now()->addMinutes(5), [
|
||||
'ResponseContentDisposition' => 'attachment; filename="'.$filename.'"',
|
||||
]),
|
||||
]);
|
||||
}
|
||||
|
||||
@@ -547,7 +549,9 @@ class TimeEntryController extends Controller
|
||||
|
||||
return response()->json([
|
||||
'download_url' => Storage::disk(config('filesystems.private'))
|
||||
->temporaryUrl($path, now()->addMinutes(5)),
|
||||
->temporaryUrl($path, now()->addMinutes(5), [
|
||||
'ResponseContentDisposition' => 'attachment; filename="'.$filename.'"',
|
||||
]),
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
@@ -124,6 +124,10 @@ class UserController extends Controller
|
||||
$user->week_start = $request->getWeekStart();
|
||||
}
|
||||
|
||||
if ($request->getSendTimeEntryStillRunningEmail() !== null) {
|
||||
$user->send_time_entry_still_running_email = $request->getSendTimeEntryStillRunningEmail();
|
||||
}
|
||||
|
||||
$user->save();
|
||||
|
||||
if ($emailToVerify !== null) {
|
||||
|
||||
@@ -36,6 +36,7 @@ class OrganizationInvitationController extends Controller
|
||||
}
|
||||
|
||||
return redirect(route('register'))
|
||||
->with('registration_email', $email)
|
||||
->with('bannerText', __('Please create an account to finish joining the :organization organization.', [
|
||||
'organization' => $organization->name,
|
||||
]))
|
||||
|
||||
@@ -58,6 +58,9 @@ class UserUpdateRequest extends BaseFormRequest
|
||||
'week_start' => [
|
||||
Rule::enum(Weekday::class),
|
||||
],
|
||||
'send_time_entry_still_running_email' => [
|
||||
'boolean',
|
||||
],
|
||||
];
|
||||
}
|
||||
|
||||
@@ -81,6 +84,13 @@ class UserUpdateRequest extends BaseFormRequest
|
||||
return $this->has('week_start') ? Weekday::from($this->input('week_start')) : null;
|
||||
}
|
||||
|
||||
public function getSendTimeEntryStillRunningEmail(): ?bool
|
||||
{
|
||||
return $this->has('send_time_entry_still_running_email')
|
||||
? $this->boolean('send_time_entry_still_running_email')
|
||||
: null;
|
||||
}
|
||||
|
||||
public function hasPhotoKey(): bool
|
||||
{
|
||||
return $this->has('photo');
|
||||
|
||||
@@ -36,6 +36,8 @@ class UserResource extends BaseResource
|
||||
'timezone' => $this->resource->timezone,
|
||||
/** @var Weekday $week_start Starting day of the week */
|
||||
'week_start' => $this->resource->week_start->value,
|
||||
/** @var bool $send_time_entry_still_running_email Whether to email the user when a time entry has been running for more than 8 hours */
|
||||
'send_time_entry_still_running_email' => $this->resource->send_time_entry_still_running_email,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,6 +42,7 @@ use OwenIt\Auditing\Contracts\Auditable as AuditableContract;
|
||||
* @property string $timezone
|
||||
* @property bool $is_placeholder
|
||||
* @property Weekday $week_start
|
||||
* @property bool $send_time_entry_still_running_email
|
||||
* @property string|null $profile_photo_path
|
||||
* @property-read Organization|null $currentOrganization
|
||||
* @property-read string $profile_photo_url
|
||||
@@ -108,6 +109,7 @@ class User extends Authenticatable implements AuditableContract, FilamentUser, M
|
||||
'is_admin' => 'boolean',
|
||||
'is_placeholder' => 'boolean',
|
||||
'week_start' => Weekday::class,
|
||||
'send_time_entry_still_running_email' => 'boolean',
|
||||
];
|
||||
|
||||
/**
|
||||
@@ -117,6 +119,7 @@ class User extends Authenticatable implements AuditableContract, FilamentUser, M
|
||||
*/
|
||||
protected $attributes = [
|
||||
'week_start' => Weekday::Monday,
|
||||
'send_time_entry_still_running_email' => true,
|
||||
];
|
||||
|
||||
/**
|
||||
|
||||
@@ -20,6 +20,7 @@ use App\Service\BillingContract;
|
||||
use App\Service\IpLookup\IpLookupServiceContract;
|
||||
use App\Service\IpLookup\NoIpLookupService;
|
||||
use App\Service\PermissionStore;
|
||||
use DateTimeInterface;
|
||||
use Dedoc\Scramble\Scramble;
|
||||
use Dedoc\Scramble\Support\Generator\OpenApi;
|
||||
use Dedoc\Scramble\Support\Generator\SecurityScheme;
|
||||
@@ -29,8 +30,13 @@ use Filament\Tables\Table;
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
use Illuminate\Database\Eloquent\Relations\Relation;
|
||||
use Illuminate\Foundation\Application;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
use Illuminate\Support\Facades\Storage;
|
||||
use Illuminate\Support\Facades\URL;
|
||||
use Illuminate\Support\ServiceProvider;
|
||||
use Illuminate\Support\Str;
|
||||
use Symfony\Component\HttpFoundation\StreamedResponse;
|
||||
|
||||
class AppServiceProvider extends ServiceProvider
|
||||
{
|
||||
@@ -98,6 +104,27 @@ class AppServiceProvider extends ServiceProvider
|
||||
$this->app->bind(IpLookupServiceContract::class, NoIpLookupService::class);
|
||||
$this->app->bind(BillingContract::class);
|
||||
|
||||
// Storage
|
||||
// The local driver ignores the ResponseContentDisposition option of temporaryUrl,
|
||||
// so mirror it through the signed query parameters of the storage route.
|
||||
$privateDisk = config('filesystems.private');
|
||||
if (config('filesystems.disks.'.$privateDisk.'.driver') === 'local') {
|
||||
$disk = Storage::disk($privateDisk);
|
||||
$disk->serveUsing(function (Request $request, string $path, array $headers) use ($disk): StreamedResponse {
|
||||
return $disk->response($path, null, $headers, $request->query('disposition', 'inline'));
|
||||
});
|
||||
$disk->buildTemporaryUrlsUsing(function (string $path, DateTimeInterface $expiration, array $options) use ($privateDisk): string {
|
||||
$parameters = array_filter([
|
||||
'path' => $path,
|
||||
'disposition' => isset($options['ResponseContentDisposition'])
|
||||
? Str::before($options['ResponseContentDisposition'], ';')
|
||||
: null,
|
||||
]);
|
||||
|
||||
return url(URL::temporarySignedRoute('storage.'.$privateDisk, $expiration, $parameters, absolute: false));
|
||||
});
|
||||
}
|
||||
|
||||
// Routing
|
||||
Route::model('member', Member::class);
|
||||
Route::model('invitation', OrganizationInvitation::class);
|
||||
|
||||
@@ -45,6 +45,7 @@ class FortifyServiceProvider extends ServiceProvider
|
||||
|
||||
Fortify::registerView(function () {
|
||||
return Inertia::render('Auth/Register', [
|
||||
'email' => session('registration_email', ''),
|
||||
'terms_url' => config('auth.terms_url'),
|
||||
'privacy_policy_url' => config('auth.privacy_policy_url'),
|
||||
'newsletter_consent' => config('auth.newsletter_consent'),
|
||||
|
||||
@@ -18,6 +18,22 @@ use Illuminate\Support\Facades\Mail;
|
||||
|
||||
class InvitationService
|
||||
{
|
||||
public function hasAcceptedInvitationForEmail(string $email): bool
|
||||
{
|
||||
return OrganizationInvitation::query()
|
||||
->whereRaw('lower(email) = ?', [strtolower($email)])
|
||||
->whereNotNull('accepted_at')
|
||||
->exists();
|
||||
}
|
||||
|
||||
public function hasPendingInvitationForEmail(string $email): bool
|
||||
{
|
||||
return OrganizationInvitation::query()
|
||||
->whereRaw('lower(email) = ?', [strtolower($email)])
|
||||
->whereNull('accepted_at')
|
||||
->exists();
|
||||
}
|
||||
|
||||
/**
|
||||
* @throws UserIsAlreadyMemberOfOrganizationApiException|InvitationForTheEmailAlreadyExistsApiException
|
||||
*/
|
||||
|
||||
@@ -80,6 +80,10 @@ class PermissionStore
|
||||
'invoices:update',
|
||||
'invoices:download',
|
||||
'invoices:delete',
|
||||
'invoice-recipients:view',
|
||||
'invoice-recipients:create',
|
||||
'invoice-recipients:update',
|
||||
'invoice-recipients:delete',
|
||||
'invoice-settings:view',
|
||||
'invoice-settings:update',
|
||||
],
|
||||
@@ -147,6 +151,10 @@ class PermissionStore
|
||||
'invoices:update',
|
||||
'invoices:download',
|
||||
'invoices:delete',
|
||||
'invoice-recipients:view',
|
||||
'invoice-recipients:create',
|
||||
'invoice-recipients:update',
|
||||
'invoice-recipients:delete',
|
||||
'invoice-settings:view',
|
||||
'invoice-settings:update',
|
||||
],
|
||||
@@ -203,6 +211,10 @@ class PermissionStore
|
||||
'invoices:update',
|
||||
'invoices:download',
|
||||
'invoices:delete',
|
||||
'invoice-recipients:view',
|
||||
'invoice-recipients:create',
|
||||
'invoice-recipients:update',
|
||||
'invoice-recipients:delete',
|
||||
'invoice-settings:view',
|
||||
'invoice-settings:update',
|
||||
],
|
||||
|
||||
@@ -100,7 +100,7 @@ return [
|
||||
|
||||
'force_https' => (bool) env('APP_FORCE_HTTPS', false),
|
||||
|
||||
'enable_registration' => (bool) env('APP_ENABLE_REGISTRATION', false),
|
||||
'enable_registration' => env('APP_ENABLE_REGISTRATION', 'off'),
|
||||
|
||||
'local_email_verification' => (bool) env('APP_LOCAL_EMAIL_VERIFICATION', false),
|
||||
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
return new class extends Migration
|
||||
{
|
||||
public function up(): void
|
||||
{
|
||||
Schema::table('users', function (Blueprint $table): void {
|
||||
$table->boolean('send_time_entry_still_running_email')->default(true)->after('week_start');
|
||||
});
|
||||
}
|
||||
|
||||
public function down(): void
|
||||
{
|
||||
Schema::table('users', function (Blueprint $table): void {
|
||||
$table->dropColumn('send_time_entry_still_running_email');
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
createProjectViaApi,
|
||||
createPublicProjectViaApi,
|
||||
} from './utils/api';
|
||||
import { getTableRowNames } from './utils/table';
|
||||
import { clearTableState, getTableRowNames } from './utils/table';
|
||||
|
||||
async function goToClientsOverview(page: Page) {
|
||||
await page.goto(PLAYWRIGHT_BASE_URL + '/clients');
|
||||
@@ -210,18 +210,12 @@ test('test that client context menu delete deletes the client', async ({ page, c
|
||||
// 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 clearTableState(page, 'client-table-state');
|
||||
await page.reload();
|
||||
|
||||
const table = page.getByTestId('client_table');
|
||||
@@ -253,7 +247,7 @@ test('test that sorting clients by project count works', async ({ page, ctx }) =
|
||||
await createProjectViaApi(ctx, { name: 'Proj2', client_id: clientWithMany.id });
|
||||
|
||||
await goToClientsOverview(page);
|
||||
await clearClientTableState(page);
|
||||
await clearTableState(page, 'client-table-state');
|
||||
await page.reload();
|
||||
|
||||
const table = page.getByTestId('client_table');
|
||||
@@ -274,7 +268,7 @@ test('test that sorting clients by project count works', async ({ page, ctx }) =
|
||||
|
||||
test('test that client sort state persists after page reload', async ({ page }) => {
|
||||
await goToClientsOverview(page);
|
||||
await clearClientTableState(page);
|
||||
await clearTableState(page, 'client-table-state');
|
||||
await page.reload();
|
||||
|
||||
const table = page.getByTestId('client_table');
|
||||
@@ -397,7 +391,7 @@ test.describe('Clients Pagination', () => {
|
||||
);
|
||||
|
||||
await goToClientsOverview(page);
|
||||
await clearClientTableState(page);
|
||||
await clearTableState(page, 'client-table-state');
|
||||
await page.reload();
|
||||
|
||||
// Default sort is name asc; first 15 clients (00–14) on page 1.
|
||||
@@ -450,7 +444,7 @@ test.describe('Clients Pagination', () => {
|
||||
);
|
||||
|
||||
await goToClientsOverview(page);
|
||||
await clearClientTableState(page);
|
||||
await clearTableState(page, 'client-table-state');
|
||||
await page.reload();
|
||||
|
||||
await expect(page.getByTestId('client_table')).toBeVisible();
|
||||
@@ -470,7 +464,7 @@ test.describe('Clients Pagination', () => {
|
||||
);
|
||||
|
||||
await goToClientsOverview(page);
|
||||
await clearClientTableState(page);
|
||||
await clearTableState(page, 'client-table-state');
|
||||
await page.reload();
|
||||
|
||||
await expect(page.getByText(prefix + '00')).toBeVisible({ timeout: 10000 });
|
||||
|
||||
32
e2e/invitation-registration-prefill.spec.ts
Normal file
32
e2e/invitation-registration-prefill.spec.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { expect, test } from '../playwright/fixtures';
|
||||
import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
|
||||
import { getInvitationAcceptUrl } from './utils/mailpit';
|
||||
|
||||
test('prefills the registration email after accepting an invitation', async ({ page, browser }) => {
|
||||
const memberId = `${Date.now()}-${Math.floor(Math.random() * 100000)}`;
|
||||
const memberEmail = `prefill-${memberId}@invitation.test`;
|
||||
|
||||
await page.goto(PLAYWRIGHT_BASE_URL + '/members');
|
||||
await page.getByRole('button', { name: 'Invite Member' }).click();
|
||||
await page.getByPlaceholder('Member Email').fill(memberEmail);
|
||||
await page.getByRole('button', { name: 'Employee' }).click();
|
||||
await Promise.all([
|
||||
page.waitForResponse(
|
||||
(response) =>
|
||||
response.url().includes('/invitations') &&
|
||||
response.request().method() === 'POST' &&
|
||||
response.status() === 204
|
||||
),
|
||||
page.getByRole('button', { name: 'Invite Member', exact: true }).click(),
|
||||
]);
|
||||
|
||||
const inviteeContext = await browser.newContext();
|
||||
const inviteePage = await inviteeContext.newPage();
|
||||
const acceptUrl = await getInvitationAcceptUrl(inviteePage.request, memberEmail);
|
||||
await inviteePage.goto(acceptUrl);
|
||||
await inviteePage.waitForURL(/\/register$/);
|
||||
|
||||
await expect(inviteePage.getByLabel('Email')).toHaveValue(memberEmail);
|
||||
|
||||
await inviteeContext.close();
|
||||
});
|
||||
@@ -11,7 +11,7 @@ import {
|
||||
updateMemberBillableRateViaApi,
|
||||
updateOrganizationSettingViaApi,
|
||||
} from './utils/api';
|
||||
import { getTableRowNames } from './utils/table';
|
||||
import { clearTableState, getTableRowNames } from './utils/table';
|
||||
|
||||
// Tests that invite + accept members need more time
|
||||
test.describe.configure({ timeout: 45000 });
|
||||
@@ -779,20 +779,18 @@ test('test that accepted invitation disappears from invitations tab', async ({ p
|
||||
// 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"
|
||||
// Create two placeholder members with names that sort predictably around "John Doe".
|
||||
// Seeded alphabetically a second apart: created_at only has second precision and
|
||||
// same-second rows fall back to a random UUID order. The spacing is what makes the
|
||||
// API order (created_at desc: ZZZ, AAA, John) deterministic, so the tie-break
|
||||
// assertions below are testing the tie-break rather than a coin flip.
|
||||
await createPlaceholderMemberViaImportApi(ctx, 'AAA SortFirst');
|
||||
await page.waitForTimeout(1100);
|
||||
await createPlaceholderMemberViaImportApi(ctx, 'ZZZ SortLast');
|
||||
|
||||
await goToMembersPage(page);
|
||||
await clearMemberTableState(page);
|
||||
await clearTableState(page, 'member-table-state');
|
||||
await page.reload();
|
||||
|
||||
const table = page.getByTestId('member_table');
|
||||
@@ -814,20 +812,24 @@ test('test that sorting members by name, role, and status works', async ({ page,
|
||||
const ownerIdx = names.indexOf('John Doe');
|
||||
const placeholderIdx = names.indexOf('AAA SortFirst');
|
||||
expect(ownerIdx).toBeLessThan(placeholderIdx);
|
||||
expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('ZZZ SortLast'));
|
||||
|
||||
await roleHeader.click(); // desc: Placeholder first
|
||||
names = await getTableRowNames(table);
|
||||
expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('John Doe'));
|
||||
expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('ZZZ SortLast'));
|
||||
|
||||
// -- 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'));
|
||||
expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('ZZZ SortLast'));
|
||||
|
||||
await statusHeader.click(); // desc: Inactive first
|
||||
names = await getTableRowNames(table);
|
||||
expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('John Doe'));
|
||||
expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('ZZZ SortLast'));
|
||||
|
||||
// -- Email: just verify sort indicator appears --
|
||||
const emailHeader = table.getByText('Email').first();
|
||||
@@ -837,7 +839,7 @@ test('test that sorting members by name, role, and status works', async ({ page,
|
||||
|
||||
test('test that member sort state persists after page reload', async ({ page }) => {
|
||||
await goToMembersPage(page);
|
||||
await clearMemberTableState(page);
|
||||
await clearTableState(page, 'member-table-state');
|
||||
await page.reload();
|
||||
|
||||
const table = page.getByTestId('member_table');
|
||||
@@ -875,7 +877,7 @@ test('test that sorting members by billable rate works', async ({ page, ctx }) =
|
||||
await updateMemberBillableRateViaApi(ctx, lowRateMember!.id, 5000);
|
||||
|
||||
await goToMembersPage(page);
|
||||
await clearMemberTableState(page);
|
||||
await clearTableState(page, 'member-table-state');
|
||||
await page.reload();
|
||||
|
||||
const table = page.getByTestId('member_table');
|
||||
|
||||
@@ -20,6 +20,12 @@ function profileInformationForm(page: Page) {
|
||||
.locator('xpath=ancestor::*[descendant::form][1]');
|
||||
}
|
||||
|
||||
function notificationSettingsForm(page: Page) {
|
||||
return page
|
||||
.getByRole('heading', { name: 'Notifications', exact: true })
|
||||
.locator('xpath=ancestor::*[descendant::form][1]');
|
||||
}
|
||||
|
||||
async function saveProfileForm(page: Page): Promise<void> {
|
||||
const form = profileInformationForm(page);
|
||||
await form.getByRole('button', { name: 'Save' }).click();
|
||||
@@ -50,6 +56,22 @@ test('week-start change persists across reload', async ({ page }) => {
|
||||
await expect(page.getByLabel('Start of the week')).toHaveValue('sunday');
|
||||
});
|
||||
|
||||
test('still-running email notification setting persists across reload', async ({ page }) => {
|
||||
await goToProfilePage(page);
|
||||
const form = notificationSettingsForm(page);
|
||||
const checkbox = form.getByLabel('Still-running time entry reminders');
|
||||
|
||||
await expect(checkbox).toBeChecked();
|
||||
await checkbox.uncheck();
|
||||
await form.getByRole('button', { name: 'Save' }).click();
|
||||
await expect(form.getByText('Saved.', { exact: true })).toBeVisible();
|
||||
|
||||
await page.reload();
|
||||
await expect(
|
||||
notificationSettingsForm(page).getByLabel('Still-running time entry reminders')
|
||||
).not.toBeChecked();
|
||||
});
|
||||
|
||||
test('profile photo can be uploaded, persists across reload, and can be removed', async ({
|
||||
page,
|
||||
}) => {
|
||||
|
||||
@@ -13,18 +13,12 @@ import {
|
||||
archiveProjectViaApi,
|
||||
updateOrganizationSettingViaApi,
|
||||
} from './utils/api';
|
||||
import { clearTableState, getSeededRowOrder } from './utils/table';
|
||||
|
||||
async function goToProjectsOverview(page: Page) {
|
||||
await page.goto(PLAYWRIGHT_BASE_URL + '/projects');
|
||||
}
|
||||
|
||||
// Helper to clear localStorage before tests that check persistence
|
||||
async function clearProjectTableState(page: Page) {
|
||||
await page.evaluate(() => {
|
||||
localStorage.removeItem('project-table-state');
|
||||
});
|
||||
}
|
||||
|
||||
// Create new project via modal
|
||||
test('test that creating and deleting a new project via the modal works', async ({ page }) => {
|
||||
const newProjectName = 'New Project ' + Math.floor(1 + Math.random() * 10000);
|
||||
@@ -84,7 +78,7 @@ test('test that archiving and unarchiving projects works', async ({ page, ctx })
|
||||
await createProjectViaApi(ctx, { name: newProjectName });
|
||||
|
||||
await goToProjectsOverview(page);
|
||||
await clearProjectTableState(page);
|
||||
await clearTableState(page, 'project-table-state');
|
||||
await page.reload();
|
||||
await expect(page.getByText(newProjectName)).toBeVisible({ timeout: 10000 });
|
||||
|
||||
@@ -480,7 +474,7 @@ test('test that sorting projects by all columns works', async ({ page, ctx }) =>
|
||||
});
|
||||
|
||||
await goToProjectsOverview(page);
|
||||
await clearProjectTableState(page);
|
||||
await clearTableState(page, 'project-table-state');
|
||||
await page.reload();
|
||||
await expect(page.getByTestId('project_table')).toBeVisible();
|
||||
await expect(page.getByText('AAA Project')).toBeVisible();
|
||||
@@ -609,7 +603,7 @@ test('test that filtering projects by status works', async ({ page, ctx }) => {
|
||||
await createProjectViaApi(ctx, { name: newProjectName });
|
||||
|
||||
await goToProjectsOverview(page);
|
||||
await clearProjectTableState(page);
|
||||
await clearTableState(page, 'project-table-state');
|
||||
await page.reload();
|
||||
await expect(page.getByText(newProjectName)).toBeVisible({ timeout: 10000 });
|
||||
|
||||
@@ -640,7 +634,7 @@ test('test that filtering projects by status works', async ({ page, ctx }) => {
|
||||
|
||||
test('test that filter state persists after page reload', async ({ page }) => {
|
||||
await goToProjectsOverview(page);
|
||||
await clearProjectTableState(page);
|
||||
await clearTableState(page, 'project-table-state');
|
||||
await page.reload();
|
||||
|
||||
// Apply Active status filter
|
||||
@@ -656,9 +650,96 @@ test('test that filter state persists after page reload', async ({ page }) => {
|
||||
await expect(page.getByTestId('status-filter-badge')).toBeVisible();
|
||||
});
|
||||
|
||||
test('test that projects without a client or estimate are ordered by name at the bottom', async ({
|
||||
page,
|
||||
ctx,
|
||||
}) => {
|
||||
// Seeded a second apart: created_at only has second precision and same-second rows
|
||||
// fall back to a random UUID order. The spacing makes the API order of the clientless
|
||||
// rows (created_at desc: ZZZ, AAA) deterministic and different from the alphabetical
|
||||
// order the name tie-break should produce.
|
||||
await createProjectViaApi(ctx, { name: 'AAA Tiebreak Project' });
|
||||
await page.waitForTimeout(1100);
|
||||
await createProjectViaApi(ctx, { name: 'ZZZ Tiebreak Project' });
|
||||
|
||||
const clientAardvark = await createClientViaApi(ctx, { name: 'Aardvark Co' });
|
||||
const clientZulu = await createClientViaApi(ctx, { name: 'Zulu Co' });
|
||||
const projectM = await createProjectViaApi(ctx, {
|
||||
name: 'MMM Tiebreak Project',
|
||||
client_id: clientAardvark.id,
|
||||
estimated_time: 36000, // 10h, 1h tracked below = 10%
|
||||
});
|
||||
await createTimeEntryViaApi(ctx, { duration: '1h', projectId: projectM.id });
|
||||
const projectN = await createProjectViaApi(ctx, {
|
||||
name: 'NNN Tiebreak Project',
|
||||
client_id: clientZulu.id,
|
||||
estimated_time: 14400, // 4h, 2h tracked below = 50%
|
||||
});
|
||||
await createTimeEntryViaApi(ctx, { duration: '2h', projectId: projectN.id });
|
||||
|
||||
await goToProjectsOverview(page);
|
||||
await clearTableState(page, 'project-table-state');
|
||||
await page.reload();
|
||||
|
||||
const table = page.getByTestId('project_table');
|
||||
await expect(table).toBeVisible();
|
||||
|
||||
const seeded = [
|
||||
'AAA Tiebreak Project',
|
||||
'MMM Tiebreak Project',
|
||||
'NNN Tiebreak Project',
|
||||
'ZZZ Tiebreak Project',
|
||||
];
|
||||
const getOrder = () => getSeededRowOrder(table, seeded);
|
||||
|
||||
// -- Client: empty rows last in both directions, alphabetical among themselves --
|
||||
const clientHeader = table.locator('.select-none', { hasText: 'Client' }).first();
|
||||
await clientHeader.click();
|
||||
await expect
|
||||
.poll(getOrder)
|
||||
.toEqual([
|
||||
'MMM Tiebreak Project',
|
||||
'NNN Tiebreak Project',
|
||||
'AAA Tiebreak Project',
|
||||
'ZZZ Tiebreak Project',
|
||||
]);
|
||||
|
||||
await clientHeader.click();
|
||||
await expect
|
||||
.poll(getOrder)
|
||||
.toEqual([
|
||||
'NNN Tiebreak Project',
|
||||
'MMM Tiebreak Project',
|
||||
'AAA Tiebreak Project',
|
||||
'ZZZ Tiebreak Project',
|
||||
]);
|
||||
|
||||
// -- Progress: same, and the first click sorts highest first --
|
||||
const progressHeader = table.locator('.select-none', { hasText: 'Progress' }).first();
|
||||
await progressHeader.click();
|
||||
await expect
|
||||
.poll(getOrder)
|
||||
.toEqual([
|
||||
'NNN Tiebreak Project',
|
||||
'MMM Tiebreak Project',
|
||||
'AAA Tiebreak Project',
|
||||
'ZZZ Tiebreak Project',
|
||||
]);
|
||||
|
||||
await progressHeader.click();
|
||||
await expect
|
||||
.poll(getOrder)
|
||||
.toEqual([
|
||||
'MMM Tiebreak Project',
|
||||
'NNN Tiebreak Project',
|
||||
'AAA Tiebreak Project',
|
||||
'ZZZ Tiebreak Project',
|
||||
]);
|
||||
});
|
||||
|
||||
test('test that sort state persists after page reload', async ({ page }) => {
|
||||
await goToProjectsOverview(page);
|
||||
await clearProjectTableState(page);
|
||||
await clearTableState(page, 'project-table-state');
|
||||
await page.reload();
|
||||
|
||||
// Click on Name header twice to sort descending
|
||||
@@ -1114,7 +1195,7 @@ test.describe('Projects Pagination', () => {
|
||||
);
|
||||
|
||||
await goToProjectsOverview(page);
|
||||
await clearProjectTableState(page);
|
||||
await clearTableState(page, 'project-table-state');
|
||||
await page.reload();
|
||||
|
||||
// Default sort is name asc; first 15 projects (00–14) should be on page 1.
|
||||
@@ -1168,7 +1249,7 @@ test.describe('Projects Pagination', () => {
|
||||
);
|
||||
|
||||
await goToProjectsOverview(page);
|
||||
await clearProjectTableState(page);
|
||||
await clearTableState(page, 'project-table-state');
|
||||
await page.reload();
|
||||
|
||||
await expect(page.getByTestId('project_table')).toBeVisible();
|
||||
@@ -1185,7 +1266,7 @@ test.describe('Projects Pagination', () => {
|
||||
);
|
||||
|
||||
await goToProjectsOverview(page);
|
||||
await clearProjectTableState(page);
|
||||
await clearTableState(page, 'project-table-state');
|
||||
await page.reload();
|
||||
|
||||
await expect(page.getByText(prefix + '00')).toBeVisible({ timeout: 10000 });
|
||||
@@ -1207,3 +1288,36 @@ test.describe('Projects Pagination', () => {
|
||||
await expect(page.getByText(prefix + '00')).not.toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test('test that searching projects by name works', async ({ page, ctx }) => {
|
||||
const suffix = Math.floor(1 + Math.random() * 10000);
|
||||
const matchingProjectName = 'Searchable Project ' + suffix;
|
||||
const otherProjectName = 'Unrelated Work ' + suffix;
|
||||
await createProjectViaApi(ctx, { name: matchingProjectName });
|
||||
await createProjectViaApi(ctx, { name: otherProjectName });
|
||||
|
||||
await goToProjectsOverview(page);
|
||||
await clearTableState(page, 'project-table-state');
|
||||
await page.reload();
|
||||
await expect(page.getByText(matchingProjectName)).toBeVisible({ timeout: 10000 });
|
||||
await expect(page.getByText(otherProjectName)).toBeVisible();
|
||||
|
||||
const searchInput = page.getByRole('searchbox', { name: 'Search projects' });
|
||||
|
||||
// Searching is case insensitive and matches part of the name
|
||||
await searchInput.fill('SEARCHABLE');
|
||||
await expect(page.getByText(matchingProjectName)).toBeVisible();
|
||||
await expect(page.getByText(otherProjectName)).not.toBeVisible();
|
||||
|
||||
// A term that matches nothing empties the table
|
||||
await searchInput.fill('no project has this name');
|
||||
await expect(page.getByText(matchingProjectName)).not.toBeVisible();
|
||||
await expect(page.getByText(otherProjectName)).not.toBeVisible();
|
||||
await expect(page.getByText('No matching projects')).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: 'Create your First Project' })).not.toBeVisible();
|
||||
|
||||
// Clearing the search restores both projects
|
||||
await searchInput.fill('');
|
||||
await expect(page.getByText(matchingProjectName)).toBeVisible();
|
||||
await expect(page.getByText(otherProjectName)).toBeVisible();
|
||||
});
|
||||
|
||||
@@ -3,7 +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';
|
||||
import { clearTableState, getTableRowNames } from './utils/table';
|
||||
|
||||
async function goToTagsOverview(page: Page) {
|
||||
await page.goto(PLAYWRIGHT_BASE_URL + '/tags');
|
||||
@@ -147,18 +147,12 @@ test('test that tag context menu delete deletes the tag', async ({ page, ctx })
|
||||
// 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 clearTableState(page, 'tag-table-state');
|
||||
await page.reload();
|
||||
|
||||
const table = page.getByTestId('tag_table');
|
||||
@@ -176,7 +170,7 @@ test('test that sorting tags by name works', async ({ page, ctx }) => {
|
||||
|
||||
test('test that tag sort state persists after page reload', async ({ page }) => {
|
||||
await goToTagsOverview(page);
|
||||
await clearTagTableState(page);
|
||||
await clearTableState(page, 'tag-table-state');
|
||||
await page.reload();
|
||||
|
||||
const table = page.getByTestId('tag_table');
|
||||
|
||||
@@ -7,13 +7,56 @@ import {
|
||||
createPublicProjectViaApi,
|
||||
createTaskViaApi,
|
||||
createClientViaApi,
|
||||
createTimeEntryViaApi,
|
||||
updateOrganizationSettingViaApi,
|
||||
type TestContext,
|
||||
} from './utils/api';
|
||||
import { clearTableState, getTableRowNames } from './utils/table';
|
||||
|
||||
async function goToProjectsOverview(page: Page) {
|
||||
await page.goto(PLAYWRIGHT_BASE_URL + '/projects');
|
||||
}
|
||||
|
||||
async function createSortableTasks(ctx: TestContext) {
|
||||
const project = await createProjectViaApi(ctx, { name: 'Task Sorting Project' });
|
||||
const taskA = await createTaskViaApi(ctx, {
|
||||
name: 'AAA Sorting Task',
|
||||
project_id: project.id,
|
||||
estimated_time: 36000,
|
||||
});
|
||||
const taskB = await createTaskViaApi(ctx, {
|
||||
name: 'BBB Sorting Task',
|
||||
project_id: project.id,
|
||||
estimated_time: 14400,
|
||||
});
|
||||
const taskC = await createTaskViaApi(ctx, {
|
||||
name: 'CCC Sorting Task',
|
||||
project_id: project.id,
|
||||
});
|
||||
|
||||
expect(taskA.estimated_time).toBe(36000);
|
||||
expect(taskB.estimated_time).toBe(14400);
|
||||
expect(taskC.estimated_time).toBeNull();
|
||||
|
||||
await createTimeEntryViaApi(ctx, {
|
||||
duration: '1h',
|
||||
projectId: project.id,
|
||||
taskId: taskA.id,
|
||||
});
|
||||
await createTimeEntryViaApi(ctx, {
|
||||
duration: '2h',
|
||||
projectId: project.id,
|
||||
taskId: taskB.id,
|
||||
});
|
||||
await createTimeEntryViaApi(ctx, {
|
||||
duration: '3h',
|
||||
projectId: project.id,
|
||||
taskId: taskC.id,
|
||||
});
|
||||
|
||||
return { project, taskA, taskB, taskC };
|
||||
}
|
||||
|
||||
test('test that creating and deleting a new task in a new project works', async ({ page }) => {
|
||||
const newProjectName = 'New Project ' + Math.floor(1 + Math.random() * 10000);
|
||||
await goToProjectsOverview(page);
|
||||
@@ -301,6 +344,59 @@ test('test that creating a new project from the task create modal project dropdo
|
||||
await expect(page.getByTestId('task_table')).toContainText(newTaskName);
|
||||
});
|
||||
|
||||
// =============================================
|
||||
// Sorting Tests
|
||||
// =============================================
|
||||
|
||||
test('test that sorting tasks by name, total time and progress works', async ({ page, ctx }) => {
|
||||
const { project, taskA, taskB, taskC } = await createSortableTasks(ctx);
|
||||
await goToProjectsOverview(page);
|
||||
await clearTableState(page, 'task-table-state');
|
||||
await page.goto(PLAYWRIGHT_BASE_URL + '/projects/' + project.id);
|
||||
const table = page.getByTestId('task_table');
|
||||
await expect(table).toBeVisible();
|
||||
|
||||
// This project contains only the seeded tasks, so assert the complete order.
|
||||
const expectOrder = async (expected: string[]) => {
|
||||
await expect.poll(() => getTableRowNames(table)).toEqual(expected);
|
||||
};
|
||||
const clickHeader = async (headerText: string) => {
|
||||
await table.getByText(headerText).first().click();
|
||||
};
|
||||
|
||||
await expectOrder([taskA.name, taskB.name, taskC.name]);
|
||||
await clickHeader('Task Name');
|
||||
await expectOrder([taskC.name, taskB.name, taskA.name]);
|
||||
await clickHeader('Task Name');
|
||||
await expectOrder([taskA.name, taskB.name, taskC.name]);
|
||||
|
||||
await clickHeader('Total Time');
|
||||
await expectOrder([taskC.name, taskB.name, taskA.name]);
|
||||
await clickHeader('Total Time');
|
||||
await expectOrder([taskA.name, taskB.name, taskC.name]);
|
||||
|
||||
await clickHeader('Progress');
|
||||
await expectOrder([taskB.name, taskA.name, taskC.name]);
|
||||
await clickHeader('Progress');
|
||||
await expectOrder([taskA.name, taskB.name, taskC.name]);
|
||||
});
|
||||
|
||||
test('test that task sort state persists after page reload', async ({ page, ctx }) => {
|
||||
const { project, taskA, taskB, taskC } = await createSortableTasks(ctx);
|
||||
await goToProjectsOverview(page);
|
||||
await clearTableState(page, 'task-table-state');
|
||||
await page.goto(PLAYWRIGHT_BASE_URL + '/projects/' + project.id);
|
||||
const table = page.getByTestId('task_table');
|
||||
await expect(table).toBeVisible();
|
||||
|
||||
await table.getByText('Progress').first().click();
|
||||
await expect.poll(() => getTableRowNames(table)).toEqual([taskB.name, taskA.name, taskC.name]);
|
||||
await page.reload();
|
||||
|
||||
// Verify the persisted row order, not just the sort indicator.
|
||||
await expect.poll(() => getTableRowNames(table)).toEqual([taskB.name, taskA.name, taskC.name]);
|
||||
});
|
||||
|
||||
// =============================================
|
||||
// Employee Permission Tests
|
||||
// =============================================
|
||||
|
||||
89
e2e/timezone-mismatch.spec.ts
Normal file
89
e2e/timezone-mismatch.spec.ts
Normal file
@@ -0,0 +1,89 @@
|
||||
import { test, expect } from '../playwright/fixtures';
|
||||
import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
|
||||
import type { Page, TestContext } from '../playwright/fixtures';
|
||||
import { getCurrentUserViaApi, updateUserProfileViaApi } from './utils/api';
|
||||
|
||||
const BROWSER_TIMEZONE = 'Europe/Vienna';
|
||||
const MISMATCHED_TIMEZONE = 'America/New_York';
|
||||
|
||||
test.use({ timezoneId: BROWSER_TIMEZONE });
|
||||
|
||||
function mismatchModal(page: Page) {
|
||||
return page.getByRole('dialog').filter({ hasText: 'Timezone mismatch detected' });
|
||||
}
|
||||
|
||||
async function openPageWithTimezoneMismatch(page: Page, ctx: TestContext) {
|
||||
await updateUserProfileViaApi(ctx, { timezone: MISMATCHED_TIMEZONE });
|
||||
await page.goto(PLAYWRIGHT_BASE_URL + '/dashboard');
|
||||
await expect(mismatchModal(page)).toBeVisible();
|
||||
}
|
||||
|
||||
test('timezone mismatch modal saves the device timezone through the users API', async ({
|
||||
page,
|
||||
ctx,
|
||||
}) => {
|
||||
await openPageWithTimezoneMismatch(page, ctx);
|
||||
|
||||
await Promise.all([
|
||||
page.waitForResponse(
|
||||
(response) =>
|
||||
response.url().includes('/api/v1/users/') &&
|
||||
response.request().method() === 'PUT' &&
|
||||
response.status() === 200
|
||||
),
|
||||
mismatchModal(page).getByRole('button', { name: 'Update timezone' }).click(),
|
||||
]);
|
||||
await expect(mismatchModal(page)).toBeHidden();
|
||||
|
||||
const user = await getCurrentUserViaApi(ctx);
|
||||
expect(user.timezone).toBe(BROWSER_TIMEZONE);
|
||||
|
||||
// After the automatic reload the timezones match again, so the modal stays gone.
|
||||
await page.waitForLoadState('load');
|
||||
await page.goto(PLAYWRIGHT_BASE_URL + '/dashboard');
|
||||
await expect(mismatchModal(page)).toBeHidden();
|
||||
});
|
||||
|
||||
test('timezone mismatch modal does not open for a different timezone with the same time', async ({
|
||||
page,
|
||||
ctx,
|
||||
}) => {
|
||||
// Berlin and Vienna share the same offset and DST rules, so the times match.
|
||||
await updateUserProfileViaApi(ctx, { timezone: 'Europe/Berlin' });
|
||||
await page.goto(PLAYWRIGHT_BASE_URL + '/dashboard');
|
||||
|
||||
// Wait until the dashboard is rendered so the modal had its chance to mount.
|
||||
await expect(page.getByTestId('dashboard_view')).toBeVisible();
|
||||
await expect(mismatchModal(page)).toBeHidden();
|
||||
});
|
||||
|
||||
test('timezone mismatch modal stays open when the update fails', async ({ page, ctx }) => {
|
||||
await openPageWithTimezoneMismatch(page, ctx);
|
||||
|
||||
await page.route('**/api/v1/users/*', (route) => {
|
||||
if (route.request().method() === 'PUT') {
|
||||
return route.fulfill({
|
||||
status: 500,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ message: 'Server error' }),
|
||||
});
|
||||
}
|
||||
return route.fallback();
|
||||
});
|
||||
|
||||
await Promise.all([
|
||||
page.waitForResponse(
|
||||
(response) =>
|
||||
response.url().includes('/api/v1/users/') &&
|
||||
response.request().method() === 'PUT' &&
|
||||
response.status() === 500
|
||||
),
|
||||
mismatchModal(page).getByRole('button', { name: 'Update timezone' }).click(),
|
||||
]);
|
||||
|
||||
await expect(mismatchModal(page)).toBeVisible();
|
||||
await expect(page.getByText('Failed to update profile')).toBeVisible();
|
||||
|
||||
const user = await getCurrentUserViaApi(ctx);
|
||||
expect(user.timezone).toBe(MISMATCHED_TIMEZONE);
|
||||
});
|
||||
@@ -357,7 +357,7 @@ export async function createProjectWithClientViaApi(
|
||||
|
||||
export async function createTaskViaApi(
|
||||
ctx: TestContext,
|
||||
data: { name: string; project_id: string }
|
||||
data: { name: string; project_id: string; estimated_time?: number }
|
||||
) {
|
||||
const response = await ctx.request.post(
|
||||
`${PLAYWRIGHT_BASE_URL}/api/v1/organizations/${ctx.orgId}/tasks`,
|
||||
@@ -365,12 +365,20 @@ export async function createTaskViaApi(
|
||||
data: {
|
||||
name: data.name,
|
||||
project_id: data.project_id,
|
||||
...(data.estimated_time !== undefined
|
||||
? { estimated_time: data.estimated_time }
|
||||
: {}),
|
||||
},
|
||||
}
|
||||
);
|
||||
expect(response.status()).toBe(201);
|
||||
const body = await response.json();
|
||||
return body.data as { id: string; name: string; project_id: string };
|
||||
return body.data as {
|
||||
id: string;
|
||||
name: string;
|
||||
project_id: string;
|
||||
estimated_time: number | null;
|
||||
};
|
||||
}
|
||||
|
||||
export async function markTaskDoneViaApi(ctx: TestContext, task: { id: string; name: string }) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { Locator } from '@playwright/test';
|
||||
import type { Locator, Page } from '@playwright/test';
|
||||
|
||||
/**
|
||||
* Extract the first cell's text content from each row in a table.
|
||||
@@ -14,3 +14,22 @@ export async function getTableRowNames(table: Locator): Promise<string[]> {
|
||||
}
|
||||
return names;
|
||||
}
|
||||
|
||||
/**
|
||||
* The visual order of the given seeded names within the table, ignoring any other rows.
|
||||
*/
|
||||
export async function getSeededRowOrder(table: Locator, seeded: string[]): Promise<string[]> {
|
||||
const rowNames = await getTableRowNames(table);
|
||||
return rowNames
|
||||
.map((rowName) => seeded.find((name) => rowName.includes(name)))
|
||||
.filter((name): name is string => Boolean(name));
|
||||
}
|
||||
|
||||
/**
|
||||
* Drop a table's persisted sort/filter state so a test starts from the defaults.
|
||||
*/
|
||||
export async function clearTableState(page: Page, key: string) {
|
||||
await page.evaluate((storageKey) => {
|
||||
localStorage.removeItem(storageKey);
|
||||
}, key);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"Billing": {
|
||||
"repository": "solidtime-io/extension-billing",
|
||||
"ref": "v0.0.5"
|
||||
"ref": "v0.0.6"
|
||||
},
|
||||
"Services": {
|
||||
"repository": "solidtime-io/extension-services",
|
||||
@@ -9,6 +9,6 @@
|
||||
},
|
||||
"Invoicing": {
|
||||
"repository": "solidtime-io/extension-invoicing",
|
||||
"ref": "v0.0.2"
|
||||
"ref": "v0.0.6"
|
||||
}
|
||||
}
|
||||
|
||||
5540
package-lock.json
generated
5540
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
36
package.json
36
package.json
@@ -26,13 +26,13 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3.3.5",
|
||||
"@eslint/js": "^9.39.4",
|
||||
"@inertiajs/vue3": "^2.3.23",
|
||||
"@eslint/js": "^10.0.1",
|
||||
"@inertiajs/vue3": "^3.7.0",
|
||||
"@playwright/test": "^1.60.0",
|
||||
"@tailwindcss/forms": "^0.5.11",
|
||||
"@tailwindcss/typography": "^0.5.19",
|
||||
"@types/chroma-js": "^3.1.2",
|
||||
"@types/node": "^22.19.19",
|
||||
"@types/node": "^26.4.1",
|
||||
"@vitejs/plugin-vue": "^6.0.6",
|
||||
"@vue/test-utils": "^2.4.6",
|
||||
"@vue/tsconfig": "^0.8.1",
|
||||
@@ -40,34 +40,34 @@
|
||||
"axios": "^1.16.0",
|
||||
"eslint-plugin-unused-imports": "^4.4.1",
|
||||
"happy-dom": "^20.8.9",
|
||||
"laravel-vite-plugin": "^2.1.0",
|
||||
"laravel-vite-plugin": "^3.2.0",
|
||||
"openapi-zod-client": "^1.18.3",
|
||||
"postcss": "^8.5.14",
|
||||
"postcss-import": "^15.1.0",
|
||||
"postcss-nesting": "^12.1.5",
|
||||
"tailwindcss": "^3.4.19",
|
||||
"typescript": "^5.9.3",
|
||||
"vite": "^7.3.3",
|
||||
"postcss-import": "^17.0.0",
|
||||
"postcss-nesting": "^14.0.1",
|
||||
"tailwindcss": "^4.3.3",
|
||||
"typescript": "^7.0.2",
|
||||
"vite": "^8.2.2",
|
||||
"vite-plugin-checker": "^0.12.0",
|
||||
"vitest": "^4.1.4",
|
||||
"vitest": "^5.0.0",
|
||||
"vue": "^3.5.34",
|
||||
"vue-tsc": "^3.2.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/core": "^1.7.5",
|
||||
"@floating-ui/vue": "^1.1.11",
|
||||
"@floating-ui/vue": "^2.0.1",
|
||||
"@heroicons/vue": "^2.2.0",
|
||||
"@lucide/vue": "^1.14.0",
|
||||
"@lucide/vue": "^1.28.0",
|
||||
"@rushstack/eslint-patch": "^1.16.1",
|
||||
"@tailwindcss/container-queries": "^0.1.1",
|
||||
"@tanstack/vue-form": "^1.32.0",
|
||||
"@tanstack/vue-query": "^5.100.10",
|
||||
"@tanstack/vue-query-devtools": "^5.91.0",
|
||||
"@tanstack/vue-table": "^8.21.3",
|
||||
"@tanstack/vue-query-devtools": "^6.1.48",
|
||||
"@tanstack/vue-table": "^9.2.4",
|
||||
"@tanstack/vue-virtual": "^3.13.24",
|
||||
"@vue/eslint-config-prettier": "^10.2.0",
|
||||
"@vue/eslint-config-typescript": "^14.7.0",
|
||||
"@vueuse/core": "^14.3.0",
|
||||
"@vueuse/core": "^14.4.0",
|
||||
"@vueuse/integrations": "^14.3.0",
|
||||
"@zodios/core": "^10.9.6",
|
||||
"chroma-js": "^3.2.0",
|
||||
@@ -77,10 +77,10 @@
|
||||
"echarts": "^6.0.0",
|
||||
"focus-trap": "^8.2.0",
|
||||
"parse-duration": "^2.1.6",
|
||||
"pinia": "^3.0.4",
|
||||
"pinia": "^4.0.3",
|
||||
"radix-vue": "^1.9.17",
|
||||
"reka-ui": "^2.9.7",
|
||||
"tailwind-merge": "^2.6.1",
|
||||
"reka-ui": "^2.10.1",
|
||||
"tailwind-merge": "^3.6.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"vue-draggable-plus": "^0.6.1",
|
||||
"vue-echarts": "^8.0.1",
|
||||
|
||||
@@ -7,18 +7,17 @@ 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 Pagination from '@/Components/Common/Pagination.vue';
|
||||
import Pagination from '@/packages/ui/src/Pagination.vue';
|
||||
import { canCreateClients } from '@/utils/permissions';
|
||||
import { useProjectsQuery } from '@/utils/useProjectsQuery';
|
||||
import {
|
||||
useVueTable,
|
||||
getCoreRowModel,
|
||||
getSortedRowModel,
|
||||
type SortingState,
|
||||
} from '@tanstack/vue-table';
|
||||
useSortableTable,
|
||||
type SortableColumnDef,
|
||||
type SortDirection,
|
||||
} from '@/utils/useSortableTable';
|
||||
|
||||
export type SortColumn = 'name' | 'projects_count' | 'status';
|
||||
export type SortDirection = 'asc' | 'desc';
|
||||
export type { SortDirection } from '@/utils/useSortableTable';
|
||||
|
||||
const props = defineProps<{
|
||||
clients: Client[];
|
||||
@@ -44,17 +43,7 @@ const projectCountMap = computed(() => {
|
||||
return map;
|
||||
});
|
||||
|
||||
// Name is always the secondary sort so rows with equal values render
|
||||
// alphabetically instead of in API (created_at) order.
|
||||
const sorting = computed<SortingState>(() => [
|
||||
{
|
||||
id: props.sortColumn,
|
||||
desc: props.sortDirection === 'desc',
|
||||
},
|
||||
...(props.sortColumn !== 'name' ? [{ id: 'name', desc: false }] : []),
|
||||
]);
|
||||
|
||||
const columns = computed(() => [
|
||||
const columns = computed<SortableColumnDef<Client, SortColumn>[]>(() => [
|
||||
{
|
||||
id: 'name',
|
||||
accessorFn: (row: Client) => row.name.toLowerCase(),
|
||||
@@ -70,41 +59,22 @@ const columns = computed(() => [
|
||||
},
|
||||
]);
|
||||
|
||||
const descFirstColumns = new Set<SortColumn>(
|
||||
columns.value
|
||||
.filter((c) => 'sortDescFirst' in c && c.sortDescFirst)
|
||||
.map((c) => c.id as SortColumn)
|
||||
);
|
||||
const {
|
||||
sortedRows: sortedClients,
|
||||
descFirstColumns,
|
||||
nextDirection,
|
||||
} = useSortableTable({
|
||||
data: () => props.clients,
|
||||
columns: () => columns.value,
|
||||
sortColumn: () => props.sortColumn,
|
||||
sortDirection: () => props.sortDirection,
|
||||
tieBreakColumn: 'name',
|
||||
});
|
||||
|
||||
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');
|
||||
}
|
||||
emit('sort', column, nextDirection(column));
|
||||
}
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
// Client-side pagination: the full list is in memory, only one page is mounted at a time.
|
||||
const PAGE_SIZE = 15;
|
||||
const currentPage = ref(1);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import TableHeading from '@/Components/Common/TableHeading.vue';
|
||||
import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
|
||||
import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
|
||||
import type { SortColumn, SortDirection } from '@/Components/Common/Client/ClientTable.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -9,57 +9,29 @@ const props = defineProps<{
|
||||
descFirstColumns: ReadonlySet<SortColumn>;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
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 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
|
||||
@click="handleSort('name')">
|
||||
<SortableTableHeaderCell
|
||||
class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
|
||||
column="name"
|
||||
v-bind="props"
|
||||
@sort="$emit('sort', $event)">
|
||||
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')">
|
||||
</SortableTableHeaderCell>
|
||||
<SortableTableHeaderCell
|
||||
column="projects_count"
|
||||
v-bind="props"
|
||||
@sort="$emit('sort', $event)">
|
||||
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')">
|
||||
</SortableTableHeaderCell>
|
||||
<SortableTableHeaderCell column="status" v-bind="props" @sort="$emit('sort', $event)">
|
||||
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>
|
||||
</SortableTableHeaderCell>
|
||||
<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>
|
||||
|
||||
@@ -3,16 +3,14 @@ import MemberTableHeading from '@/Components/Common/Member/MemberTableHeading.vu
|
||||
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';
|
||||
useSortableTable,
|
||||
type SortableColumnDef,
|
||||
type SortDirection,
|
||||
} from '@/utils/useSortableTable';
|
||||
|
||||
export type SortColumn = 'name' | 'email' | 'role' | 'billable_rate' | 'status';
|
||||
export type SortDirection = 'asc' | 'desc';
|
||||
export type { SortDirection } from '@/utils/useSortableTable';
|
||||
|
||||
const props = defineProps<{
|
||||
sortColumn: SortColumn;
|
||||
@@ -33,14 +31,7 @@ const roleOrder: Record<string, number> = {
|
||||
placeholder: 4,
|
||||
};
|
||||
|
||||
const sorting = computed<SortingState>(() => [
|
||||
{
|
||||
id: props.sortColumn,
|
||||
desc: props.sortDirection === 'desc',
|
||||
},
|
||||
]);
|
||||
|
||||
const columns = [
|
||||
const columns: SortableColumnDef<Member, SortColumn>[] = [
|
||||
{
|
||||
id: 'name',
|
||||
accessorFn: (row: Member) => row.name.toLowerCase(),
|
||||
@@ -56,7 +47,6 @@ const columns = [
|
||||
{
|
||||
id: 'billable_rate',
|
||||
sortDescFirst: true,
|
||||
sortUndefined: 'last' as const,
|
||||
accessorFn: (row: Member) => {
|
||||
if (row.billable_rate === null) return undefined;
|
||||
return row.billable_rate;
|
||||
@@ -68,36 +58,21 @@ const columns = [
|
||||
},
|
||||
];
|
||||
|
||||
const descFirstColumns = new Set<SortColumn>(
|
||||
columns.filter((c) => c.sortDescFirst).map((c) => c.id as SortColumn)
|
||||
);
|
||||
const {
|
||||
sortedRows: sortedMembers,
|
||||
descFirstColumns,
|
||||
nextDirection,
|
||||
} = useSortableTable({
|
||||
data: () => members.value,
|
||||
columns: () => columns,
|
||||
sortColumn: () => props.sortColumn,
|
||||
sortDirection: () => props.sortDirection,
|
||||
tieBreakColumn: 'name',
|
||||
});
|
||||
|
||||
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');
|
||||
}
|
||||
emit('sort', column, nextDirection(column));
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import TableHeading from '@/Components/Common/TableHeading.vue';
|
||||
import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
|
||||
import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
|
||||
import type { SortColumn, SortDirection } from '@/Components/Common/Member/MemberTable.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -9,73 +9,35 @@ const props = defineProps<{
|
||||
descFirstColumns: ReadonlySet<SortColumn>;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
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 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
|
||||
@click="handleSort('name')">
|
||||
<SortableTableHeaderCell
|
||||
class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
|
||||
column="name"
|
||||
v-bind="props"
|
||||
@sort="$emit('sort', $event)">
|
||||
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')">
|
||||
</SortableTableHeaderCell>
|
||||
<SortableTableHeaderCell column="email" v-bind="props" @sort="$emit('sort', $event)">
|
||||
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')">
|
||||
</SortableTableHeaderCell>
|
||||
<SortableTableHeaderCell column="role" v-bind="props" @sort="$emit('sort', $event)">
|
||||
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')">
|
||||
</SortableTableHeaderCell>
|
||||
<SortableTableHeaderCell
|
||||
column="billable_rate"
|
||||
v-bind="props"
|
||||
@sort="$emit('sort', $event)">
|
||||
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')">
|
||||
</SortableTableHeaderCell>
|
||||
<SortableTableHeaderCell column="status" v-bind="props" @sort="$emit('sort', $event)">
|
||||
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>
|
||||
</SortableTableHeaderCell>
|
||||
<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>
|
||||
|
||||
@@ -6,17 +6,12 @@ import { computed, ref, watch } from 'vue';
|
||||
import ProjectCreateModal from '@/packages/ui/src/Project/ProjectCreateModal.vue';
|
||||
import ProjectTableHeading from '@/Components/Common/Project/ProjectTableHeading.vue';
|
||||
import ProjectTableRow from '@/Components/Common/Project/ProjectTableRow.vue';
|
||||
import Pagination from '@/Components/Common/Pagination.vue';
|
||||
import Pagination from '@/packages/ui/src/Pagination.vue';
|
||||
import LoadingSpinner from '@/packages/ui/src/LoadingSpinner.vue';
|
||||
|
||||
export type SortColumn =
|
||||
| 'name'
|
||||
| 'client_name'
|
||||
| 'spent_time'
|
||||
| 'progress'
|
||||
| 'billable_rate'
|
||||
| 'status'
|
||||
| 'visibility';
|
||||
export type SortDirection = 'asc' | 'desc';
|
||||
'name' | 'client_name' | 'spent_time' | 'progress' | 'billable_rate' | 'status' | 'visibility';
|
||||
export type { SortDirection } from '@/utils/useSortableTable';
|
||||
import { canCreateProjects } from '@/utils/permissions';
|
||||
import type { CreateProjectBody, Project, Client, CreateClientBody } from '@/packages/api/src';
|
||||
import { useProjectsStore } from '@/utils/useProjects';
|
||||
@@ -27,20 +22,24 @@ import { isAllowedToPerformPremiumAction } from '@/utils/billing';
|
||||
import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
|
||||
import { getCurrentOrganizationId } from '@/utils/useUser';
|
||||
import {
|
||||
useVueTable,
|
||||
getCoreRowModel,
|
||||
getSortedRowModel,
|
||||
type SortingState,
|
||||
} from '@tanstack/vue-table';
|
||||
useSortableTable,
|
||||
type SortableColumnDef,
|
||||
type SortDirection,
|
||||
} from '@/utils/useSortableTable';
|
||||
|
||||
const { organization } = useOrganizationQuery(getCurrentOrganizationId()!);
|
||||
|
||||
const props = defineProps<{
|
||||
projects: Project[];
|
||||
showBillableRate: boolean;
|
||||
sortColumn: SortColumn;
|
||||
sortDirection: SortDirection;
|
||||
}>();
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
projects: Project[];
|
||||
showBillableRate: boolean;
|
||||
sortColumn: SortColumn;
|
||||
sortDirection: SortDirection;
|
||||
isFiltered?: boolean;
|
||||
isLoading?: boolean;
|
||||
}>(),
|
||||
{ isFiltered: false, isLoading: false }
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
sort: [column: SortColumn, direction: SortDirection];
|
||||
@@ -57,28 +56,16 @@ const clientNameMap = computed(() => {
|
||||
return map;
|
||||
});
|
||||
|
||||
// Convert sort props to TanStack Table format.
|
||||
// Name is always the secondary sort so rows with equal values render
|
||||
// alphabetically instead of in API (created_at) order.
|
||||
const sorting = computed<SortingState>(() => [
|
||||
{
|
||||
id: props.sortColumn,
|
||||
desc: props.sortDirection === 'desc',
|
||||
},
|
||||
...(props.sortColumn !== 'name' ? [{ id: 'name', desc: false }] : []),
|
||||
]);
|
||||
|
||||
// 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(() => [
|
||||
const columns = computed<SortableColumnDef<Project, SortColumn>[]>(() => [
|
||||
{
|
||||
id: 'name',
|
||||
accessorFn: (row: Project) => row.name.toLowerCase(),
|
||||
},
|
||||
{
|
||||
id: 'client_name',
|
||||
sortUndefined: 'last' as const,
|
||||
accessorFn: (row: Project) => {
|
||||
if (!row.client_id) return undefined;
|
||||
return (clientNameMap.value.get(row.client_id) ?? '').toLowerCase();
|
||||
@@ -87,12 +74,11 @@ const columns = computed(() => [
|
||||
{
|
||||
id: 'spent_time',
|
||||
sortDescFirst: true,
|
||||
accessorFn: (row: Project) => row.spent_time ?? 0,
|
||||
accessorFn: (row: Project) => row.spent_time,
|
||||
},
|
||||
{
|
||||
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;
|
||||
@@ -101,7 +87,7 @@ const columns = computed(() => [
|
||||
{
|
||||
id: 'billable_rate',
|
||||
sortDescFirst: true,
|
||||
accessorFn: (row: Project) => row.billable_rate ?? 0,
|
||||
accessorFn: (row: Project) => row.billable_rate,
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
@@ -113,40 +99,22 @@ const columns = computed(() => [
|
||||
},
|
||||
]);
|
||||
|
||||
// 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)
|
||||
);
|
||||
const {
|
||||
sortedRows: sortedProjects,
|
||||
descFirstColumns,
|
||||
nextDirection,
|
||||
} = useSortableTable({
|
||||
data: () => props.projects,
|
||||
columns: () => columns.value,
|
||||
sortColumn: () => props.sortColumn,
|
||||
sortDirection: () => props.sortDirection,
|
||||
tieBreakColumn: 'name',
|
||||
});
|
||||
|
||||
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');
|
||||
}
|
||||
emit('sort', column, nextDirection(column));
|
||||
}
|
||||
|
||||
const table = useVueTable({
|
||||
get data() {
|
||||
return props.projects;
|
||||
},
|
||||
get columns() {
|
||||
return columns.value;
|
||||
},
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
state: {
|
||||
get sorting() {
|
||||
return sorting.value;
|
||||
},
|
||||
},
|
||||
manualSorting: false,
|
||||
});
|
||||
|
||||
const sortedProjects = computed(() => {
|
||||
return table.getRowModel().rows.map((row) => row.original);
|
||||
});
|
||||
|
||||
// Client-side pagination: the full list is in memory, only one page is mounted at a time.
|
||||
const PAGE_SIZE = 15;
|
||||
const currentPage = ref(1);
|
||||
@@ -160,6 +128,28 @@ const paginatedProjects = computed(() => {
|
||||
return sortedProjects.value.slice(start, start + PAGE_SIZE);
|
||||
});
|
||||
|
||||
const emptyState = computed(() => {
|
||||
if (props.isFiltered) {
|
||||
return {
|
||||
title: 'No matching projects',
|
||||
description: 'Try a different search term or adjust your filters.',
|
||||
showCreateButton: false,
|
||||
};
|
||||
}
|
||||
if (!canCreateProjects()) {
|
||||
return {
|
||||
title: 'You are not a member of any projects',
|
||||
description: 'Ask your manager to add you to a project as a team member.',
|
||||
showCreateButton: false,
|
||||
};
|
||||
}
|
||||
return {
|
||||
title: 'No projects found',
|
||||
description: 'Create your first project now!',
|
||||
showCreateButton: true,
|
||||
};
|
||||
});
|
||||
|
||||
const showCreateProjectModal = ref(false);
|
||||
|
||||
async function createProject(project: CreateProjectBody): Promise<Project | undefined> {
|
||||
@@ -193,24 +183,21 @@ const gridTemplate = computed(() => {
|
||||
:sort-direction="props.sortDirection"
|
||||
:desc-first-columns="descFirstColumns"
|
||||
@sort="handleSort"></ProjectTableHeading>
|
||||
<div v-if="sortedProjects.length === 0" class="col-span-full py-24 text-center">
|
||||
<div
|
||||
v-if="props.isLoading"
|
||||
class="col-span-full flex justify-center items-center py-24">
|
||||
<LoadingSpinner></LoadingSpinner>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="sortedProjects.length === 0"
|
||||
class="col-span-full py-24 text-center">
|
||||
<FolderPlusIcon class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>
|
||||
<h3 class="text-text-primary font-semibold">
|
||||
{{
|
||||
canCreateProjects()
|
||||
? 'No projects found'
|
||||
: 'You are not a member of any projects'
|
||||
}}
|
||||
</h3>
|
||||
<h3 class="text-text-primary font-semibold">{{ emptyState.title }}</h3>
|
||||
<p class="pb-5 max-w-md mx-auto text-sm pt-1">
|
||||
{{
|
||||
canCreateProjects()
|
||||
? 'Create your first project now!'
|
||||
: 'Ask your manager to add you to a project as a team member.'
|
||||
}}
|
||||
{{ emptyState.description }}
|
||||
</p>
|
||||
<SecondaryButton
|
||||
v-if="canCreateProjects()"
|
||||
v-if="emptyState.showCreateButton"
|
||||
:icon="PlusIcon"
|
||||
@click="showCreateProjectModal = true"
|
||||
>Create your First Project
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import TableHeading from '@/Components/Common/TableHeading.vue';
|
||||
import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
|
||||
import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
|
||||
import type { SortColumn, SortDirection } from '@/Components/Common/Project/ProjectTable.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -14,90 +15,51 @@ const emit = defineEmits<{
|
||||
sort: [column: SortColumn];
|
||||
}>();
|
||||
|
||||
// Bound once per cell instead of repeating the three sort props on every column.
|
||||
const sortState = computed(() => ({
|
||||
sortColumn: props.sortColumn,
|
||||
sortDirection: props.sortDirection,
|
||||
descFirstColumns: props.descFirstColumns,
|
||||
}));
|
||||
|
||||
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 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
|
||||
@click="handleSort('name')">
|
||||
<SortableTableHeaderCell
|
||||
class="pr-3 pl-2 sm:pl-4 lg:pl-6"
|
||||
column="name"
|
||||
v-bind="sortState"
|
||||
@sort="handleSort">
|
||||
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('client_name')">
|
||||
</SortableTableHeaderCell>
|
||||
<SortableTableHeaderCell column="client_name" v-bind="sortState" @sort="handleSort">
|
||||
Client
|
||||
<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')">
|
||||
</SortableTableHeaderCell>
|
||||
<SortableTableHeaderCell column="spent_time" v-bind="sortState" @sort="handleSort">
|
||||
Total Time
|
||||
<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')">
|
||||
</SortableTableHeaderCell>
|
||||
<SortableTableHeaderCell column="progress" v-bind="sortState" @sort="handleSort">
|
||||
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
|
||||
</SortableTableHeaderCell>
|
||||
<SortableTableHeaderCell
|
||||
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')">
|
||||
column="billable_rate"
|
||||
v-bind="sortState"
|
||||
@sort="handleSort">
|
||||
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')">
|
||||
</SortableTableHeaderCell>
|
||||
<SortableTableHeaderCell column="status" v-bind="sortState" @sort="handleSort">
|
||||
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 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
|
||||
@click="handleSort('visibility')">
|
||||
</SortableTableHeaderCell>
|
||||
<SortableTableHeaderCell column="visibility" v-bind="sortState" @sort="handleSort">
|
||||
Visibility
|
||||
<ChevronDownIcon v-if="isChevronDown('visibility')" class="w-4 h-4" />
|
||||
<ChevronUpIcon v-else-if="isChevronUp('visibility')" 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">
|
||||
</SortableTableHeaderCell>
|
||||
<div class="relative py-1.5 pl-3 pr-2 sm:pr-4 lg:pr-6">
|
||||
<span class="sr-only">Edit</span>
|
||||
</div>
|
||||
</TableHeading>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@@ -88,13 +88,13 @@ const showEditProjectModal = ref(false);
|
||||
<ContextMenuTrigger as-child>
|
||||
<TableRow :href="route('projects.show', { project: project.id })">
|
||||
<div
|
||||
class="whitespace-nowrap min-w-0 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 min-w-0 flex items-center space-x-5 py-4 pr-3 text-sm font-medium text-text-primary pl-2 sm:pl-4 lg:pl-6">
|
||||
<div
|
||||
:style="{
|
||||
backgroundColor: project.color,
|
||||
boxShadow: `var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) ${project.color}30`,
|
||||
}"
|
||||
class="w-3 h-3 rounded-full"></div>
|
||||
class="w-3 h-3 ml-1 rounded-full"></div>
|
||||
<span class="overflow-ellipsis overflow-hidden">
|
||||
{{ project.name }}
|
||||
</span>
|
||||
@@ -155,7 +155,7 @@ const showEditProjectModal = ref(false);
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
|
||||
class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium pr-2 sm:pr-4 lg:pr-6">
|
||||
<ProjectMoreOptionsDropdown
|
||||
:project="project"
|
||||
@edit="showEditProjectModal = true"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import { UserGroupIcon, CheckCircleIcon, GlobeAltIcon } from '@heroicons/vue/16/solid';
|
||||
import ListFilterIcon from '@/packages/ui/src/Icons/ListFilterIcon.vue';
|
||||
import {
|
||||
@@ -81,23 +81,18 @@ function toggleNoClient() {
|
||||
clientIds,
|
||||
});
|
||||
}
|
||||
|
||||
const hasActiveFilters = computed(() => {
|
||||
return (
|
||||
props.filters.status !== 'all' ||
|
||||
props.filters.visibility !== 'all' ||
|
||||
props.filters.clientIds.length > 0
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DropdownMenu v-model:open="open">
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="ghost" size="xs" aria-label="Filter projects">
|
||||
<ListFilterIcon
|
||||
:class="[hasActiveFilters ? '' : '-ml-0.5', 'h-4 w-4 text-icon-default']" />
|
||||
<span v-if="!hasActiveFilters" class="text-nowrap">Filter</span>
|
||||
<!-- -ml-1.5 cancels the icon's inset inside the button so it sits flush with the toolbar's left padding -->
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="-ml-1.5 h-7 w-7 flex-shrink-0"
|
||||
aria-label="Filter projects">
|
||||
<ListFilterIcon class="h-4 w-4 text-icon-default" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" class="w-56">
|
||||
|
||||
@@ -9,7 +9,7 @@ const showExportModal = defineModel('show', { default: false });
|
||||
|
||||
function downloadCurrentExport() {
|
||||
if (props.exportUrl) {
|
||||
window.open(props.exportUrl, '_blank')?.focus();
|
||||
window.open(props.exportUrl, '_self');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
54
resources/js/Components/Common/SortableTableHeaderCell.vue
Normal file
54
resources/js/Components/Common/SortableTableHeaderCell.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<script setup lang="ts" generic="TColumn extends string">
|
||||
import { computed, useAttrs } from 'vue';
|
||||
import type { ClassValue } from 'clsx';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
|
||||
import type { SortDirection } from '@/utils/useSortableTable';
|
||||
|
||||
defineOptions({ inheritAttrs: false });
|
||||
|
||||
const props = defineProps<{
|
||||
column: TColumn;
|
||||
sortColumn: TColumn;
|
||||
sortDirection: SortDirection;
|
||||
descFirstColumns: ReadonlySet<TColumn>;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
sort: [column: TColumn];
|
||||
}>();
|
||||
|
||||
const attrs = useAttrs();
|
||||
|
||||
const isSorted = computed(() => props.sortColumn === props.column);
|
||||
|
||||
const isChevronDown = computed(() => {
|
||||
if (!isSorted.value) return false;
|
||||
return props.descFirstColumns.has(props.column)
|
||||
? props.sortDirection === 'desc'
|
||||
: props.sortDirection === 'asc';
|
||||
});
|
||||
|
||||
const cellClass = computed(() =>
|
||||
cn(
|
||||
'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',
|
||||
attrs.class as ClassValue
|
||||
)
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button type="button" :class="cellClass" @click="emit('sort', column)">
|
||||
<slot></slot>
|
||||
<span class="sr-only">
|
||||
{{
|
||||
isSorted
|
||||
? `sorted ${sortDirection === 'asc' ? 'ascending' : 'descending'}`
|
||||
: 'not sorted'
|
||||
}}
|
||||
</span>
|
||||
<ChevronDownIcon v-if="isChevronDown" aria-hidden="true" class="w-4 h-4" />
|
||||
<ChevronUpIcon v-else-if="isSorted" aria-hidden="true" class="w-4 h-4" />
|
||||
<span v-else aria-hidden="true" class="w-4 h-4"></span>
|
||||
</button>
|
||||
</template>
|
||||
@@ -2,7 +2,7 @@
|
||||
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
|
||||
import { FolderPlusIcon } from '@heroicons/vue/24/solid';
|
||||
import { PlusIcon } from '@heroicons/vue/16/solid';
|
||||
import { computed, ref } from 'vue';
|
||||
import { 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';
|
||||
@@ -10,14 +10,13 @@ import TagTableHeading from '@/Components/Common/Tag/TagTableHeading.vue';
|
||||
import { canCreateTags } from '@/utils/permissions';
|
||||
import type { Tag } from '@/packages/api/src';
|
||||
import {
|
||||
useVueTable,
|
||||
getCoreRowModel,
|
||||
getSortedRowModel,
|
||||
type SortingState,
|
||||
} from '@tanstack/vue-table';
|
||||
useSortableTable,
|
||||
type SortableColumnDef,
|
||||
type SortDirection,
|
||||
} from '@/utils/useSortableTable';
|
||||
|
||||
export type SortColumn = 'name';
|
||||
export type SortDirection = 'asc' | 'desc';
|
||||
export type { SortDirection } from '@/utils/useSortableTable';
|
||||
|
||||
const props = defineProps<{
|
||||
createTag: (name: string) => Promise<Tag | undefined>;
|
||||
@@ -32,50 +31,27 @@ const emit = defineEmits<{
|
||||
const { tags } = useTagsQuery();
|
||||
const showCreateTagModal = ref(false);
|
||||
|
||||
const sorting = computed<SortingState>(() => [
|
||||
{
|
||||
id: props.sortColumn,
|
||||
desc: props.sortDirection === 'desc',
|
||||
},
|
||||
]);
|
||||
|
||||
const columns = [
|
||||
const columns: SortableColumnDef<Tag, SortColumn>[] = [
|
||||
{
|
||||
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)
|
||||
);
|
||||
const {
|
||||
sortedRows: sortedTags,
|
||||
descFirstColumns,
|
||||
nextDirection,
|
||||
} = useSortableTable({
|
||||
data: () => tags.value,
|
||||
columns: () => columns,
|
||||
sortColumn: () => props.sortColumn,
|
||||
sortDirection: () => props.sortDirection,
|
||||
});
|
||||
|
||||
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');
|
||||
}
|
||||
emit('sort', column, nextDirection(column));
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import TableHeading from '@/Components/Common/TableHeading.vue';
|
||||
import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
|
||||
import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
|
||||
import type { SortColumn, SortDirection } from '@/Components/Common/Tag/TagTable.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -9,41 +9,20 @@ const props = defineProps<{
|
||||
descFirstColumns: ReadonlySet<SortColumn>;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
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 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
|
||||
@click="handleSort('name')">
|
||||
<SortableTableHeaderCell
|
||||
class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
|
||||
column="name"
|
||||
v-bind="props"
|
||||
@sort="$emit('sort', $event)">
|
||||
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>
|
||||
</SortableTableHeaderCell>
|
||||
<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>
|
||||
|
||||
@@ -8,12 +8,62 @@ import TaskTableHeading from '@/Components/Common/Task/TaskTableHeading.vue';
|
||||
import TaskCreateModal from '@/Components/Common/Task/TaskCreateModal.vue';
|
||||
import { canCreateTasks } from '@/utils/permissions';
|
||||
import type { Task } from '@/packages/api/src';
|
||||
import {
|
||||
useSortableTable,
|
||||
type SortableColumnDef,
|
||||
type SortDirection,
|
||||
} from '@/utils/useSortableTable';
|
||||
|
||||
export type SortColumn = 'name' | 'spent_time' | 'progress';
|
||||
export type { SortDirection } from '@/utils/useSortableTable';
|
||||
|
||||
const props = defineProps<{
|
||||
projectId: string;
|
||||
tasks: Task[];
|
||||
sortColumn: SortColumn;
|
||||
sortDirection: SortDirection;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
sort: [column: SortColumn, direction: SortDirection];
|
||||
}>();
|
||||
|
||||
const columns: SortableColumnDef<Task, SortColumn>[] = [
|
||||
{
|
||||
id: 'name',
|
||||
accessorFn: (row: Task) => row.name.toLowerCase(),
|
||||
},
|
||||
{
|
||||
id: 'spent_time',
|
||||
sortDescFirst: true,
|
||||
accessorFn: (row: Task) => row.spent_time,
|
||||
},
|
||||
{
|
||||
id: 'progress',
|
||||
sortDescFirst: true,
|
||||
accessorFn: (row: Task) => {
|
||||
if (!row.estimated_time) return undefined;
|
||||
return (row.spent_time / row.estimated_time) * 100;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const {
|
||||
sortedRows: sortedTasks,
|
||||
descFirstColumns,
|
||||
nextDirection,
|
||||
} = useSortableTable({
|
||||
data: () => props.tasks,
|
||||
columns: () => columns,
|
||||
sortColumn: () => props.sortColumn,
|
||||
sortDirection: () => props.sortDirection,
|
||||
tieBreakColumn: 'name',
|
||||
});
|
||||
|
||||
function handleSort(column: SortColumn) {
|
||||
emit('sort', column, nextDirection(column));
|
||||
}
|
||||
|
||||
const createTask = ref(false);
|
||||
</script>
|
||||
|
||||
@@ -30,8 +80,12 @@ const createTask = ref(false);
|
||||
1fr minmax(80px, auto) minmax(120px, auto) minmax(50px, auto)
|
||||
80px;
|
||||
">
|
||||
<TaskTableHeading></TaskTableHeading>
|
||||
<div v-if="tasks.length === 0" class="col-span-5 py-24 text-center">
|
||||
<TaskTableHeading
|
||||
:sort-column="sortColumn"
|
||||
:sort-direction="sortDirection"
|
||||
:desc-first-columns="descFirstColumns"
|
||||
@sort="handleSort"></TaskTableHeading>
|
||||
<div v-if="sortedTasks.length === 0" class="col-span-5 py-24 text-center">
|
||||
<PlusCircleIcon class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
|
||||
<h3 class="text-text-primary font-semibold">No tasks found</h3>
|
||||
<p v-if="canCreateTasks()" class="pb-5">Create your first task now!</p>
|
||||
@@ -42,7 +96,7 @@ const createTask = ref(false);
|
||||
>Create your First Task
|
||||
</SecondaryButton>
|
||||
</div>
|
||||
<template v-for="task in tasks" :key="task.id">
|
||||
<template v-for="task in sortedTasks" :key="task.id">
|
||||
<TaskTableRow :task="task"></TaskTableRow>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@@ -1,19 +1,37 @@
|
||||
<script setup lang="ts">
|
||||
import TableHeading from '@/Components/Common/TableHeading.vue';
|
||||
import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
|
||||
import type { SortColumn, SortDirection } from '@/Components/Common/Task/TaskTable.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
sortColumn: SortColumn;
|
||||
sortDirection: SortDirection;
|
||||
descFirstColumns: ReadonlySet<SortColumn>;
|
||||
}>();
|
||||
|
||||
defineEmits<{
|
||||
sort: [column: SortColumn];
|
||||
}>();
|
||||
</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">
|
||||
<SortableTableHeaderCell
|
||||
class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
|
||||
column="name"
|
||||
v-bind="props"
|
||||
@sort="$emit('sort', $event)">
|
||||
Task Name
|
||||
</div>
|
||||
<div class="px-3 py-1.5 text-left text-text-tertiary">Total Time</div>
|
||||
<div class="px-3 py-1.5 text-left text-text-tertiary">Progress</div>
|
||||
</SortableTableHeaderCell>
|
||||
<SortableTableHeaderCell column="spent_time" v-bind="props" @sort="$emit('sort', $event)">
|
||||
Total Time
|
||||
</SortableTableHeaderCell>
|
||||
<SortableTableHeaderCell column="progress" v-bind="props" @sort="$emit('sort', $event)">
|
||||
Progress
|
||||
</SortableTableHeaderCell>
|
||||
<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>
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useForm, usePage } from '@inertiajs/vue3';
|
||||
import { usePage } from '@inertiajs/vue3';
|
||||
import type { User } from '@/types/models';
|
||||
import TimezoneMismatchModal from '@/packages/ui/src/TimezoneMismatchModal.vue';
|
||||
import { useUpdateUserMutation } from '@/utils/useUserQuery';
|
||||
|
||||
const show = defineModel('show', { default: false });
|
||||
const saving = ref(false);
|
||||
|
||||
const page = usePage<{
|
||||
auth: {
|
||||
@@ -13,33 +12,28 @@ const page = usePage<{
|
||||
};
|
||||
}>();
|
||||
|
||||
function handleUpdate(timezone: string) {
|
||||
saving.value = true;
|
||||
const form = useForm({
|
||||
_method: 'PUT',
|
||||
timezone: timezone,
|
||||
name: page.props.auth.user.name,
|
||||
email: page.props.auth.user.email,
|
||||
week_start: page.props.auth.user.week_start,
|
||||
});
|
||||
const updateUser = useUpdateUserMutation();
|
||||
|
||||
form.post(route('user-profile-information.update'), {
|
||||
errorBag: 'updateProfileInformation',
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
saving.value = false;
|
||||
show.value = false;
|
||||
location.reload();
|
||||
},
|
||||
onError: () => {
|
||||
saving.value = false;
|
||||
},
|
||||
});
|
||||
async function handleUpdate(timezone: string) {
|
||||
try {
|
||||
await updateUser.mutateAsync({
|
||||
userId: page.props.auth.user.id,
|
||||
body: { timezone },
|
||||
});
|
||||
show.value = false;
|
||||
// reload the whole page to re-read the timezone update
|
||||
location.reload();
|
||||
} catch {
|
||||
// notification handled by mutation
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TimezoneMismatchModal v-model:show="show" :saving="saving" @update="handleUpdate" />
|
||||
<TimezoneMismatchModal
|
||||
v-model:show="show"
|
||||
:saving="updateUser.isPending.value"
|
||||
@update="handleUpdate" />
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@@ -63,7 +63,7 @@ const max = computed(() => {
|
||||
});
|
||||
|
||||
const backgroundColor = useCssVariable('--theme-color-card-background');
|
||||
const borderColor = useCssVariable('--color-border');
|
||||
const borderColor = useCssVariable('--color-border-secondary');
|
||||
const labelColor = useCssVariable('--color-text-secondary');
|
||||
const chartColorRaw = useCssVariable('--theme-color-chart');
|
||||
|
||||
|
||||
@@ -146,7 +146,10 @@ const changeSummary = computed<PlanLine[]>(() => {
|
||||
{ times: range(plan.breakSlot), label: 'Break' },
|
||||
{ times: range(plan.secondHalf), label: workLabel },
|
||||
...plan.shifted.map((shift) => ({
|
||||
times: moved(req.otherEntries.find((e) => e.id === shift.id)!, shift),
|
||||
times: moved(
|
||||
req.otherEntries.find((e) => e.id === shift.id)!,
|
||||
shift
|
||||
),
|
||||
label: props.entryLabel(shift.id),
|
||||
})),
|
||||
];
|
||||
|
||||
@@ -161,7 +161,7 @@ const emit = defineEmits<{
|
||||
:organization-billable-rate="organization?.billable_rate ?? null"
|
||||
:no-project-value="null"
|
||||
align="start"
|
||||
@changed="(p, t) => emit('add-row', p, t)">
|
||||
@changed="(p: string | null, t: string | null) => emit('add-row', p, t)">
|
||||
<template #trigger>
|
||||
<Button variant="ghost" size="sm" class="text-text-secondary">
|
||||
<PlusIcon class="h-4 w-4 mr-1 text-icon-default" />
|
||||
|
||||
@@ -25,16 +25,21 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
||||
<template>
|
||||
<AlertDialogPortal>
|
||||
<AlertDialogOverlay
|
||||
class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
|
||||
<AlertDialogContent
|
||||
v-bind="forwarded"
|
||||
:class="
|
||||
cn(
|
||||
'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
|
||||
props.class
|
||||
)
|
||||
">
|
||||
<slot />
|
||||
</AlertDialogContent>
|
||||
class="fixed inset-0 z-50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
|
||||
<div class="absolute inset-0 bg-default-background opacity-30" />
|
||||
</AlertDialogOverlay>
|
||||
<div
|
||||
class="fixed top-0 left-0 z-50 pointer-events-none w-screen h-screen flex items-start px-2 pt-3 md:pt-14 xl:pt-24 justify-center overflow-auto">
|
||||
<AlertDialogContent
|
||||
v-bind="forwarded"
|
||||
:class="
|
||||
cn(
|
||||
'pointer-events-auto bg-default-background grid w-full max-w-lg gap-4 border border-border-tertiary p-6 shadow-lg duration-200 rounded-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
|
||||
props.class
|
||||
)
|
||||
">
|
||||
<slot />
|
||||
</AlertDialogContent>
|
||||
</div>
|
||||
</AlertDialogPortal>
|
||||
</template>
|
||||
|
||||
@@ -253,7 +253,9 @@ const page = usePage<{
|
||||
v-if="isInvoicingActivated() && canViewInvoices()"
|
||||
title="Invoices"
|
||||
:icon="DocumentTextIcon"
|
||||
:current="route().current('invoices')"
|
||||
:current="
|
||||
route().current('invoices') || route().current('invoices.*')
|
||||
"
|
||||
href="/invoices"></NavigationSidebarItem>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@@ -8,9 +8,13 @@ import { Field, FieldLabel, FieldError } from '@/packages/ui/src/field';
|
||||
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
|
||||
import TextInput from '@/packages/ui/src/Input/TextInput.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
email: string;
|
||||
}>();
|
||||
|
||||
const form = useForm({
|
||||
name: '',
|
||||
email: '',
|
||||
email: props.email,
|
||||
password: '',
|
||||
password_confirmation: '',
|
||||
terms: false,
|
||||
|
||||
@@ -11,8 +11,8 @@ import ClientCreateModal from '@/Components/Common/Client/ClientCreateModal.vue'
|
||||
import PageTitle from '@/Components/Common/PageTitle.vue';
|
||||
import { canCreateClients } from '@/utils/permissions';
|
||||
import { TabBar, TabBarItem } from '@/packages/ui/src';
|
||||
import { useStorage } from '@vueuse/core';
|
||||
import type { SortColumn, SortDirection } from '@/Components/Common/Client/ClientTable.vue';
|
||||
import { useTableSortState } from '@/utils/useTableSortState';
|
||||
import type { SortColumn } from '@/Components/Common/Client/ClientTable.vue';
|
||||
|
||||
const { clients } = useClientsQuery();
|
||||
|
||||
@@ -20,25 +20,10 @@ 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 { tableState, handleSort } = useTableSortState<SortColumn>('client-table-state', {
|
||||
sortColumn: 'name',
|
||||
sortDirection: 'asc',
|
||||
});
|
||||
|
||||
const shownClients = computed(() => {
|
||||
return clients.value.filter((client) => {
|
||||
|
||||
@@ -12,8 +12,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';
|
||||
import { useTableSortState } from '@/utils/useTableSortState';
|
||||
import type { SortColumn } from '@/Components/Common/Member/MemberTable.vue';
|
||||
|
||||
const inviteMember = ref(false);
|
||||
|
||||
@@ -23,25 +23,10 @@ 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;
|
||||
}
|
||||
const { tableState, handleSort } = useTableSortState<SortColumn>('member-table-state', {
|
||||
sortColumn: 'name',
|
||||
sortDirection: 'asc',
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -35,8 +35,7 @@ async function deleteUser() {
|
||||
} catch (error) {
|
||||
if (error && typeof error === 'object' && 'response' in error) {
|
||||
const response = error.response as
|
||||
| { status?: number; data?: { errors?: { password?: string[] } } }
|
||||
| undefined;
|
||||
{ status?: number; data?: { errors?: { password?: string[] } } } | undefined;
|
||||
if (response?.status === 422) {
|
||||
passwordError.value = response.data?.errors?.password?.[0] ?? 'Invalid password.';
|
||||
}
|
||||
|
||||
103
resources/js/Pages/Profile/Partials/NotificationSettingsForm.vue
Normal file
103
resources/js/Pages/Profile/Partials/NotificationSettingsForm.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import ActionMessage from '@/Components/ActionMessage.vue';
|
||||
import FormSection from '@/Components/FormSection.vue';
|
||||
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
|
||||
import { Checkbox } from '@/packages/ui/src';
|
||||
import {
|
||||
Field,
|
||||
FieldContent,
|
||||
FieldDescription,
|
||||
FieldError,
|
||||
FieldLabel,
|
||||
} from '@/packages/ui/src/field';
|
||||
import { getApiValidationFieldErrors } from '@/utils/apiValidation';
|
||||
import { useUpdateUserMutation, useUserQuery } from '@/utils/useUserQuery';
|
||||
|
||||
const { user } = useUserQuery();
|
||||
const updateUser = useUpdateUserMutation();
|
||||
|
||||
const sendTimeEntryStillRunningEmail = ref(true);
|
||||
const recentlySaved = ref(false);
|
||||
|
||||
watch(
|
||||
user,
|
||||
(currentUser, previousUser) => {
|
||||
if (currentUser && previousUser === undefined) {
|
||||
sendTimeEntryStillRunningEmail.value = currentUser.send_time_entry_still_running_email;
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
const isUserLoaded = computed(() => user.value !== undefined);
|
||||
const isSaveDisabled = computed(() => !isUserLoaded.value || updateUser.isPending.value);
|
||||
const fieldErrors = computed<Record<string, string>>(() =>
|
||||
getApiValidationFieldErrors(updateUser.error.value)
|
||||
);
|
||||
|
||||
async function save() {
|
||||
if (isSaveDisabled.value || !user.value) return;
|
||||
|
||||
if (sendTimeEntryStillRunningEmail.value === user.value.send_time_entry_still_running_email) {
|
||||
flashSaved();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const updatedUser = await updateUser.mutateAsync({
|
||||
userId: user.value.id,
|
||||
body: {
|
||||
send_time_entry_still_running_email: sendTimeEntryStillRunningEmail.value,
|
||||
},
|
||||
});
|
||||
sendTimeEntryStillRunningEmail.value = updatedUser.send_time_entry_still_running_email;
|
||||
flashSaved();
|
||||
} catch {
|
||||
// 422: field errors render below. Other errors: toast handled in the mutation.
|
||||
}
|
||||
}
|
||||
|
||||
function flashSaved() {
|
||||
recentlySaved.value = true;
|
||||
setTimeout(() => (recentlySaved.value = false), 2000);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormSection @submitted="save">
|
||||
<template #title>Notifications</template>
|
||||
|
||||
<template #description>Choose which email notifications you want to receive.</template>
|
||||
|
||||
<template #form>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<Field orientation="horizontal">
|
||||
<Checkbox
|
||||
id="send_time_entry_still_running_email"
|
||||
v-model:checked="sendTimeEntryStillRunningEmail"
|
||||
:disabled="!isUserLoaded" />
|
||||
<FieldContent>
|
||||
<FieldLabel for="send_time_entry_still_running_email">
|
||||
Still-running time entry reminders
|
||||
</FieldLabel>
|
||||
<FieldDescription>
|
||||
Email me when a time entry has been running for more than 8 hours.
|
||||
</FieldDescription>
|
||||
</FieldContent>
|
||||
</Field>
|
||||
<FieldError v-if="fieldErrors.send_time_entry_still_running_email">
|
||||
{{ fieldErrors.send_time_entry_still_running_email }}
|
||||
</FieldError>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #actions>
|
||||
<ActionMessage :on="recentlySaved" class="me-3">Saved.</ActionMessage>
|
||||
|
||||
<PrimaryButton :class="{ 'opacity-25': isSaveDisabled }" :disabled="isSaveDisabled">
|
||||
Save
|
||||
</PrimaryButton>
|
||||
</template>
|
||||
</FormSection>
|
||||
</template>
|
||||
@@ -9,6 +9,7 @@ import UpdateProfileInformationForm from '@/Pages/Profile/Partials/UpdateProfile
|
||||
import type { Session } from '@/types/jetstream';
|
||||
import ApiTokensForm from '@/Pages/Profile/Partials/ApiTokensForm.vue';
|
||||
import ThemeForm from '@/Pages/Profile/Partials/ThemeForm.vue';
|
||||
import NotificationSettingsForm from '@/Pages/Profile/Partials/NotificationSettingsForm.vue';
|
||||
|
||||
defineProps<{
|
||||
confirmsTwoFactorAuthentication: boolean;
|
||||
@@ -36,6 +37,12 @@ defineProps<{
|
||||
<SectionBorder />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<NotificationSettingsForm />
|
||||
|
||||
<SectionBorder />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<UpdatePasswordForm class="mt-10 sm:mt-0" />
|
||||
|
||||
|
||||
@@ -15,6 +15,7 @@ import {
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
import TaskCreateModal from '@/Components/Common/Task/TaskCreateModal.vue';
|
||||
import TaskTable from '@/Components/Common/Task/TaskTable.vue';
|
||||
import type { SortColumn } from '@/Components/Common/Task/TaskTable.vue';
|
||||
import CardTitle from '@/packages/ui/src/CardTitle.vue';
|
||||
import Card from '@/Components/Common/Card.vue';
|
||||
import ProjectMemberTable from '@/Components/Common/ProjectMember/ProjectMemberTable.vue';
|
||||
@@ -29,6 +30,7 @@ import { formatCents } from '../packages/ui/src/utils/money';
|
||||
import { getOrganizationCurrencyString } from '../utils/money';
|
||||
import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
|
||||
import { getCurrentOrganizationId } from '@/utils/useUser';
|
||||
import { useTableSortState } from '@/utils/useTableSortState';
|
||||
|
||||
const { projects } = useProjectsQuery();
|
||||
|
||||
@@ -65,6 +67,11 @@ const activeTab = ref<'active' | 'done'>('active');
|
||||
|
||||
const { tasks } = useTasksQuery();
|
||||
|
||||
const { tableState, handleSort } = useTableSortState<SortColumn>('task-table-state', {
|
||||
sortColumn: 'name',
|
||||
sortDirection: 'asc',
|
||||
});
|
||||
|
||||
const shownTasks = computed(() => {
|
||||
return tasks.value.filter((task) => {
|
||||
if (activeTab.value === 'active') {
|
||||
@@ -159,7 +166,12 @@ const shownTasks = computed(() => {
|
||||
</template>
|
||||
</CardTitle>
|
||||
<Card>
|
||||
<TaskTable :tasks="shownTasks" :project-id="projectId"></TaskTable>
|
||||
<TaskTable
|
||||
:tasks="shownTasks"
|
||||
:project-id="projectId"
|
||||
:sort-column="tableState.sortColumn"
|
||||
:sort-direction="tableState.sortDirection"
|
||||
@sort="handleSort"></TaskTable>
|
||||
</Card>
|
||||
</div>
|
||||
<div v-if="canViewProjectMembers()">
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import MainContainer from '@/packages/ui/src/MainContainer.vue';
|
||||
import AppLayout from '@/Layouts/AppLayout.vue';
|
||||
import MainContainer from '@/packages/ui/src/MainContainer.vue';
|
||||
import { FolderIcon, PlusIcon } from '@heroicons/vue/20/solid';
|
||||
import { Search } from '@lucide/vue';
|
||||
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
|
||||
import ProjectTable from '@/Components/Common/Project/ProjectTable.vue';
|
||||
import { computed } from 'vue';
|
||||
import TextInput from '@/packages/ui/src/Input/TextInput.vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import { useProjectsQuery } from '@/utils/useProjectsQuery';
|
||||
import { useProjectsStore } from '@/utils/useProjects';
|
||||
import ProjectCreateModal from '@/packages/ui/src/Project/ProjectCreateModal.vue';
|
||||
@@ -18,6 +20,7 @@ import { getCurrentOrganizationId, getCurrentRole } from '@/utils/useUser';
|
||||
import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
|
||||
import { isAllowedToPerformPremiumAction } from '@/utils/billing';
|
||||
import { useStorage } from '@vueuse/core';
|
||||
import { useTableSortState } from '@/utils/useTableSortState';
|
||||
import ProjectsFilterDropdown from '@/Components/Common/Project/ProjectsFilterDropdown.vue';
|
||||
import ProjectStatusFilterBadge from '@/Components/Common/Project/ProjectStatusFilterBadge.vue';
|
||||
import ProjectVisibilityFilterBadge from '@/Components/Common/Project/ProjectVisibilityFilterBadge.vue';
|
||||
@@ -26,7 +29,7 @@ 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();
|
||||
const { projects, isLoading: projectsLoading } = useProjectsQuery();
|
||||
const { clients } = useClientsQuery();
|
||||
const { organization } = useOrganizationQuery(getCurrentOrganizationId()!);
|
||||
|
||||
@@ -41,7 +44,7 @@ interface ProjectTableState {
|
||||
};
|
||||
}
|
||||
|
||||
const tableState = useStorage<ProjectTableState>(
|
||||
const { tableState, handleSort } = useTableSortState<SortColumn, ProjectTableState>(
|
||||
'project-table-state',
|
||||
{
|
||||
sortColumn: 'name',
|
||||
@@ -52,24 +55,28 @@ const tableState = useStorage<ProjectTableState>(
|
||||
visibility: 'all',
|
||||
},
|
||||
},
|
||||
undefined,
|
||||
{
|
||||
mergeDefaults: (storage, defaults) => ({
|
||||
...defaults,
|
||||
...storage,
|
||||
filters: { ...defaults.filters, ...storage.filters },
|
||||
}),
|
||||
}
|
||||
// The filters are merged key by key so a stored value missing a newer filter still
|
||||
// picks up its default instead of the whole object falling back.
|
||||
(storage, defaults) => ({
|
||||
...defaults,
|
||||
...storage,
|
||||
filters: { ...defaults.filters, ...storage.filters },
|
||||
})
|
||||
);
|
||||
|
||||
function handleSort(column: SortColumn, direction: SortDirection) {
|
||||
tableState.value.sortColumn = column;
|
||||
tableState.value.sortDirection = direction;
|
||||
}
|
||||
// Not persisted, so a reload never starts silently filtered
|
||||
const search = ref('');
|
||||
|
||||
// Filter projects based on current filters
|
||||
const filteredProjects = computed(() => {
|
||||
const searchTerm = search.value.trim().toLowerCase();
|
||||
|
||||
return projects.value.filter((project) => {
|
||||
// Name search
|
||||
if (searchTerm && !project.name.toLowerCase().includes(searchTerm)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Status filter
|
||||
if (tableState.value.filters.status === 'active' && project.is_archived) {
|
||||
return false;
|
||||
@@ -103,6 +110,15 @@ const filteredProjects = computed(() => {
|
||||
});
|
||||
});
|
||||
|
||||
const hasActiveFilters = computed(() => {
|
||||
return (
|
||||
search.value.trim() !== '' ||
|
||||
tableState.value.filters.status !== 'all' ||
|
||||
tableState.value.filters.visibility !== 'all' ||
|
||||
tableState.value.filters.clientIds.length > 0
|
||||
);
|
||||
});
|
||||
|
||||
// Helper functions for active filters
|
||||
function removeStatusFilter() {
|
||||
tableState.value.filters.status = 'all';
|
||||
@@ -135,8 +151,7 @@ const showBillableRate = computed(() => {
|
||||
|
||||
<template>
|
||||
<AppLayout title="Projects" data-testid="projects_view">
|
||||
<MainContainer
|
||||
class="py-3 sm:pt-5 border-b border-default-background-separator flex justify-between items-center">
|
||||
<MainContainer class="py-3 sm:pt-5 flex justify-between items-center">
|
||||
<div class="flex items-center space-x-3 sm:space-x-6">
|
||||
<PageTitle :icon="FolderIcon" title="Projects"></PageTitle>
|
||||
</div>
|
||||
@@ -189,11 +204,25 @@ const showBillableRate = computed(() => {
|
||||
:clients="clients"
|
||||
@remove="removeClientFilter"
|
||||
@update:value="tableState.filters.clientIds = $event as string[]" />
|
||||
|
||||
<div class="relative">
|
||||
<Search
|
||||
class="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-icon-default" />
|
||||
<TextInput
|
||||
v-model="search"
|
||||
size="sm"
|
||||
type="search"
|
||||
aria-label="Search projects"
|
||||
placeholder="Search projects..."
|
||||
class="w-60 border-transparent bg-transparent pl-7 shadow-none placeholder:text-text-tertiary hover:bg-black/5 focus-visible:bg-input-background dark:hover:bg-white/5 [&::-webkit-search-cancel-button]:hidden" />
|
||||
</div>
|
||||
</div>
|
||||
</MainContainer>
|
||||
|
||||
<ProjectTable
|
||||
:show-billable-rate="showBillableRate"
|
||||
:is-filtered="hasActiveFilters"
|
||||
:is-loading="projectsLoading"
|
||||
:projects="filteredProjects"
|
||||
:sort-column="tableState.sortColumn"
|
||||
:sort-direction="tableState.sortDirection"
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
ArrowDownTrayIcon,
|
||||
LockClosedIcon,
|
||||
} from '@heroicons/vue/20/solid';
|
||||
import Pagination from '@/Components/Common/Pagination.vue';
|
||||
import Pagination from '@/packages/ui/src/Pagination.vue';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
|
||||
@@ -9,30 +9,15 @@ 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';
|
||||
import { useTableSortState } from '@/utils/useTableSortState';
|
||||
import type { SortColumn } 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;
|
||||
}
|
||||
const { tableState, handleSort } = useTableSortState<SortColumn>('tag-table-state', {
|
||||
sortColumn: 'name',
|
||||
sortDirection: 'asc',
|
||||
});
|
||||
|
||||
async function createTag(tag: string) {
|
||||
return await useTagsStore().createTag(tag);
|
||||
|
||||
@@ -38,8 +38,7 @@ const deleteTeam = async () => {
|
||||
} catch (error) {
|
||||
if (error && typeof error === 'object' && 'response' in error) {
|
||||
const response = error.response as
|
||||
| { status?: number; data?: { errors?: { password?: string[] } } }
|
||||
| undefined;
|
||||
{ status?: number; data?: { errors?: { password?: string[] } } } | undefined;
|
||||
if (response?.status === 422) {
|
||||
passwordError.value = response.data?.errors?.password?.[0] ?? 'Invalid password.';
|
||||
}
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
"author": "solidtime",
|
||||
"license": "AGPL-3.0",
|
||||
"devDependencies": {
|
||||
"vite-plugin-dts": "^4.5.4"
|
||||
"vite-plugin-dts": "^5.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@zodios/core": "^10.9.6",
|
||||
|
||||
@@ -118,6 +118,11 @@ export type DetailedInvoiceResponse = ZodiosResponseByAlias<SolidTimeApi, 'getIn
|
||||
export type DetailedInvoice = DetailedInvoiceResponse['data'];
|
||||
|
||||
export type InvoiceIndexEntry = ZodiosResponseByAlias<SolidTimeApi, 'getInvoices'>['data'][0];
|
||||
export type InvoiceRecipient = ZodiosResponseByAlias<
|
||||
SolidTimeApi,
|
||||
'getInvoiceRecipients'
|
||||
>['data'][0];
|
||||
export type InvoiceRecipientBody = ZodiosBodyByAlias<SolidTimeApi, 'createInvoiceRecipient'>;
|
||||
|
||||
export type UpdateInvoiceSettings = ZodiosBodyByAlias<SolidTimeApi, 'updateInvoiceSettings'>;
|
||||
|
||||
|
||||
@@ -45,14 +45,54 @@ const InvitationResource = z
|
||||
const InvitationStoreRequest = z
|
||||
.object({ email: z.string().email(), role: z.enum(['admin', 'manager', 'employee']) })
|
||||
.passthrough();
|
||||
const InvoiceRecipientResource = z
|
||||
.object({
|
||||
id: z.string(),
|
||||
organization_id: z.string(),
|
||||
name: z.string(),
|
||||
vatin: z.union([z.string(), z.null()]),
|
||||
address_line_1: z.union([z.string(), z.null()]),
|
||||
address_line_2: z.union([z.string(), z.null()]),
|
||||
address_line_3: z.union([z.string(), z.null()]),
|
||||
address_post_code: z.union([z.string(), z.null()]),
|
||||
address_city: z.union([z.string(), z.null()]),
|
||||
address_country: z.union([z.string(), z.null()]),
|
||||
phone: z.union([z.string(), z.null()]),
|
||||
email: z.union([z.string(), z.null()]),
|
||||
is_archived: z.boolean(),
|
||||
archived_at: z.union([z.string(), z.null()]),
|
||||
invoices_count: z.number().int(),
|
||||
has_non_draft_invoices: z.boolean(),
|
||||
created_at: z.union([z.string(), z.null()]),
|
||||
updated_at: z.union([z.string(), z.null()]),
|
||||
})
|
||||
.passthrough();
|
||||
const InvoiceRecipientCollection = z.array(InvoiceRecipientResource);
|
||||
const InvoiceRecipientRequest = z
|
||||
.object({
|
||||
name: z.string(),
|
||||
vatin: z.union([z.string(), z.null()]).optional(),
|
||||
address_line_1: z.union([z.string(), z.null()]).optional(),
|
||||
address_line_2: z.union([z.string(), z.null()]).optional(),
|
||||
address_line_3: z.union([z.string(), z.null()]).optional(),
|
||||
address_post_code: z.union([z.string(), z.null()]).optional(),
|
||||
address_city: z.union([z.string(), z.null()]).optional(),
|
||||
address_country: z.union([z.string(), z.null()]).optional(),
|
||||
phone: z.union([z.string(), z.null()]).optional(),
|
||||
email: z.union([z.string(), z.null()]).optional(),
|
||||
is_archived: z.boolean().optional(),
|
||||
})
|
||||
.passthrough();
|
||||
const InvoiceResource = z
|
||||
.object({
|
||||
id: z.string(),
|
||||
organization_id: z.string(),
|
||||
invoice_recipient_id: z.string(),
|
||||
reference: z.string(),
|
||||
seller_name: z.string(),
|
||||
buyer_name: z.string(),
|
||||
recipient: z.string(),
|
||||
status: z.string(),
|
||||
status_label: z.string(),
|
||||
date: z.string(),
|
||||
due_at: z.string(),
|
||||
paid_date: z.string(),
|
||||
@@ -76,16 +116,7 @@ const InvoiceStoreRequest = z
|
||||
seller_address_country: z.union([z.string(), z.null()]).optional(),
|
||||
seller_phone: z.union([z.string(), z.null()]).optional(),
|
||||
seller_email: z.union([z.string(), z.null()]).optional(),
|
||||
buyer_name: z.string(),
|
||||
buyer_vatin: z.union([z.string(), z.null()]).optional(),
|
||||
buyer_address_line_1: z.union([z.string(), z.null()]).optional(),
|
||||
buyer_address_line_2: z.union([z.string(), z.null()]).optional(),
|
||||
buyer_address_line_3: z.union([z.string(), z.null()]).optional(),
|
||||
buyer_address_post_code: z.union([z.string(), z.null()]).optional(),
|
||||
buyer_address_city: z.union([z.string(), z.null()]).optional(),
|
||||
buyer_address_country: z.union([z.string(), z.null()]).optional(),
|
||||
buyer_phone: z.union([z.string(), z.null()]).optional(),
|
||||
buyer_email: z.union([z.string(), z.null()]).optional(),
|
||||
invoice_recipient_id: z.string(),
|
||||
date: z.string(),
|
||||
billing_period_start: z.union([z.string(), z.null()]).optional(),
|
||||
billing_period_end: z.union([z.string(), z.null()]).optional(),
|
||||
@@ -130,6 +161,7 @@ const DetailedInvoiceResource = z
|
||||
.object({
|
||||
id: z.string(),
|
||||
organization_id: z.string(),
|
||||
invoice_recipient_id: z.string(),
|
||||
reference: z.string(),
|
||||
seller_name: z.string(),
|
||||
seller_vatin: z.string(),
|
||||
@@ -141,16 +173,7 @@ const DetailedInvoiceResource = z
|
||||
seller_address_country: z.string(),
|
||||
seller_phone: z.string(),
|
||||
seller_email: z.string(),
|
||||
buyer_name: z.string(),
|
||||
buyer_vatin: z.string(),
|
||||
buyer_address_line_1: z.string(),
|
||||
buyer_address_line_2: z.string(),
|
||||
buyer_address_line_3: z.string(),
|
||||
buyer_address_post_code: z.string(),
|
||||
buyer_address_city: z.string(),
|
||||
buyer_address_country: z.string(),
|
||||
buyer_phone: z.string(),
|
||||
buyer_email: z.string(),
|
||||
recipient: InvoiceRecipientResource,
|
||||
paid_date: z.string(),
|
||||
due_at: z.string(),
|
||||
discount_type: z.string(),
|
||||
@@ -171,7 +194,7 @@ const DetailedInvoiceResource = z
|
||||
entries: z.array(InvoiceEntryResource),
|
||||
})
|
||||
.passthrough();
|
||||
const InvoiceStatus = z.enum(['draft', 'sent', 'cancelled']);
|
||||
const InvoiceStatus = z.enum(['draft', 'sent', 'paid', 'cancelled']);
|
||||
const InvoiceUpdateRequest = z
|
||||
.object({
|
||||
status: InvoiceStatus,
|
||||
@@ -187,16 +210,7 @@ const InvoiceUpdateRequest = z
|
||||
seller_address_country: z.union([z.string(), z.null()]),
|
||||
seller_phone: z.union([z.string(), z.null()]),
|
||||
seller_email: z.union([z.string(), z.null()]),
|
||||
buyer_name: z.string(),
|
||||
buyer_vatin: z.union([z.string(), z.null()]),
|
||||
buyer_address_line_1: z.union([z.string(), z.null()]),
|
||||
buyer_address_line_2: z.union([z.string(), z.null()]),
|
||||
buyer_address_line_3: z.union([z.string(), z.null()]),
|
||||
buyer_address_post_code: z.union([z.string(), z.null()]),
|
||||
buyer_address_city: z.union([z.string(), z.null()]),
|
||||
buyer_address_country: z.union([z.string(), z.null()]),
|
||||
buyer_phone: z.union([z.string(), z.null()]),
|
||||
buyer_email: z.union([z.string(), z.null()]),
|
||||
invoice_recipient_id: z.string(),
|
||||
date: z.string(),
|
||||
billing_period_start: z.union([z.string(), z.null()]),
|
||||
billing_period_end: z.union([z.string(), z.null()]),
|
||||
@@ -705,6 +719,7 @@ const UserResource = z
|
||||
profile_photo_url: z.string(),
|
||||
timezone: z.string(),
|
||||
week_start: Weekday,
|
||||
send_time_entry_still_running_email: z.boolean(),
|
||||
})
|
||||
.passthrough();
|
||||
const UserUpdateRequest = z
|
||||
@@ -714,6 +729,7 @@ const UserUpdateRequest = z
|
||||
photo: z.union([z.string(), z.null()]),
|
||||
timezone: z.string(),
|
||||
week_start: Weekday,
|
||||
send_time_entry_still_running_email: z.boolean(),
|
||||
})
|
||||
.partial()
|
||||
.passthrough();
|
||||
@@ -1895,6 +1911,125 @@ const endpoints = makeApi([
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
method: 'get',
|
||||
path: '/v1/organizations/:organization/invoice-recipients',
|
||||
alias: 'getInvoiceRecipients',
|
||||
requestFormat: 'json',
|
||||
parameters: [
|
||||
{
|
||||
name: 'organization',
|
||||
type: 'Path',
|
||||
schema: z.string(),
|
||||
},
|
||||
],
|
||||
response: z.object({ data: InvoiceRecipientCollection }).passthrough(),
|
||||
},
|
||||
{
|
||||
method: 'post',
|
||||
path: '/v1/organizations/:organization/invoice-recipients',
|
||||
alias: 'createInvoiceRecipient',
|
||||
requestFormat: 'json',
|
||||
parameters: [
|
||||
{
|
||||
name: 'body',
|
||||
type: 'Body',
|
||||
schema: InvoiceRecipientRequest,
|
||||
},
|
||||
{
|
||||
name: 'organization',
|
||||
type: 'Path',
|
||||
schema: z.string(),
|
||||
},
|
||||
],
|
||||
response: z.object({ data: InvoiceRecipientResource }).passthrough(),
|
||||
},
|
||||
{
|
||||
method: 'get',
|
||||
path: '/v1/organizations/:organization/invoice-recipients/:invoiceRecipient',
|
||||
alias: 'getInvoiceRecipient',
|
||||
requestFormat: 'json',
|
||||
parameters: [
|
||||
{
|
||||
name: 'organization',
|
||||
type: 'Path',
|
||||
schema: z.string(),
|
||||
},
|
||||
{
|
||||
name: 'invoiceRecipient',
|
||||
type: 'Path',
|
||||
schema: z.string(),
|
||||
},
|
||||
],
|
||||
response: z.object({ data: InvoiceRecipientResource }).passthrough(),
|
||||
},
|
||||
{
|
||||
method: 'put',
|
||||
path: '/v1/organizations/:organization/invoice-recipients/:invoiceRecipient',
|
||||
alias: 'updateInvoiceRecipient',
|
||||
requestFormat: 'json',
|
||||
parameters: [
|
||||
{
|
||||
name: 'body',
|
||||
type: 'Body',
|
||||
schema: InvoiceRecipientRequest,
|
||||
},
|
||||
{
|
||||
name: 'organization',
|
||||
type: 'Path',
|
||||
schema: z.string(),
|
||||
},
|
||||
{
|
||||
name: 'invoiceRecipient',
|
||||
type: 'Path',
|
||||
schema: z.string(),
|
||||
},
|
||||
],
|
||||
response: z.object({ data: InvoiceRecipientResource }).passthrough(),
|
||||
},
|
||||
{
|
||||
method: 'post',
|
||||
path: '/v1/organizations/:organization/invoice-recipients/:invoiceRecipient/duplicate',
|
||||
alias: 'duplicateInvoiceRecipient',
|
||||
requestFormat: 'json',
|
||||
parameters: [
|
||||
{
|
||||
name: 'body',
|
||||
type: 'Body',
|
||||
schema: InvoiceRecipientRequest,
|
||||
},
|
||||
{
|
||||
name: 'organization',
|
||||
type: 'Path',
|
||||
schema: z.string(),
|
||||
},
|
||||
{
|
||||
name: 'invoiceRecipient',
|
||||
type: 'Path',
|
||||
schema: z.string(),
|
||||
},
|
||||
],
|
||||
response: z.object({ data: InvoiceRecipientResource }).passthrough(),
|
||||
},
|
||||
{
|
||||
method: 'delete',
|
||||
path: '/v1/organizations/:organization/invoice-recipients/:invoiceRecipient',
|
||||
alias: 'deleteInvoiceRecipient',
|
||||
requestFormat: 'json',
|
||||
parameters: [
|
||||
{
|
||||
name: 'organization',
|
||||
type: 'Path',
|
||||
schema: z.string(),
|
||||
},
|
||||
{
|
||||
name: 'invoiceRecipient',
|
||||
type: 'Path',
|
||||
schema: z.string(),
|
||||
},
|
||||
],
|
||||
response: z.void(),
|
||||
},
|
||||
{
|
||||
method: 'get',
|
||||
path: '/v1/organizations/:organization/invoices',
|
||||
@@ -1911,6 +2046,11 @@ const endpoints = makeApi([
|
||||
type: 'Query',
|
||||
schema: z.number().int().gte(1).lte(2147483647).optional(),
|
||||
},
|
||||
{
|
||||
name: 'status',
|
||||
type: 'Query',
|
||||
schema: InvoiceStatus.optional(),
|
||||
},
|
||||
],
|
||||
response: z.object({ data: InvoiceCollection }).passthrough(),
|
||||
errors: [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@solidtime/ui",
|
||||
"version": "0.0.22",
|
||||
"version": "0.0.23",
|
||||
"description": "Package containing the solidtime ui components",
|
||||
"main": "./dist/solidtime-ui-lib.umd.cjs",
|
||||
"module": "./dist/solidtime-ui-lib.js",
|
||||
@@ -50,7 +50,7 @@
|
||||
"devDependencies": {
|
||||
"@types/chroma-js": "^3.1.2",
|
||||
"@zodios/core": "^10.9.6",
|
||||
"vite-plugin-dts": "^4.5.4",
|
||||
"vite-plugin-dts": "^5.1.0",
|
||||
"zod": "^3.25.76"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
CommandShortcut,
|
||||
} from '../command';
|
||||
import { cn } from '../utils/cn';
|
||||
import { useDialogFocusRestore } from '../utils/useDialogFocusRestore';
|
||||
import type {
|
||||
CommandPaletteCommand,
|
||||
CommandPaletteGroup,
|
||||
@@ -36,6 +37,8 @@ const emit = defineEmits<{
|
||||
select: [command: CommandPaletteCommand | EntitySearchResult];
|
||||
}>();
|
||||
|
||||
const { onOpenAutoFocus, onCloseAutoFocus } = useDialogFocusRestore();
|
||||
|
||||
// Non-empty groups for rendering
|
||||
const nonEmptyGroups = computed(() => props.groups.filter((g) => g.commands.length > 0));
|
||||
|
||||
@@ -71,7 +74,9 @@ watch(open, (isOpen) => {
|
||||
)
|
||||
">
|
||||
<DialogContent
|
||||
class="pointer-events-auto bg-default-background w-full max-w-lg border border-border-tertiary shadow-lg sm:rounded-lg outline-none overflow-hidden p-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95">
|
||||
class="pointer-events-auto bg-default-background w-full max-w-lg border border-border-tertiary shadow-lg sm:rounded-lg outline-none overflow-hidden p-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
|
||||
@open-auto-focus="onOpenAutoFocus"
|
||||
@close-auto-focus="onCloseAutoFocus">
|
||||
<CommandRoot
|
||||
v-model:search-term="searchTerm"
|
||||
class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from '@/packages/ui/src/tooltip';
|
||||
const active = defineModel({ default: false });
|
||||
const active = defineModel<boolean>({ default: false });
|
||||
const emit = defineEmits(['changed']);
|
||||
function toggleBillable() {
|
||||
active.value = !active.value;
|
||||
|
||||
@@ -16,7 +16,7 @@ const props = withDefaults(
|
||||
);
|
||||
|
||||
const emit = defineEmits(['open', 'submit']);
|
||||
const open = defineModel({ default: false });
|
||||
const open = defineModel<boolean>({ default: false });
|
||||
|
||||
function handleAutofocus(event: Event) {
|
||||
if (props.autoFocus === false) {
|
||||
|
||||
@@ -13,11 +13,11 @@ import { type ComputedRef } from 'vue';
|
||||
|
||||
const temporaryCustomTimerEntry = ref<string>('');
|
||||
|
||||
const start = defineModel('start', {
|
||||
const start = defineModel<string>('start', {
|
||||
default: '',
|
||||
});
|
||||
|
||||
const end = defineModel('end', {
|
||||
const end = defineModel<string>('end', {
|
||||
default: '',
|
||||
});
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ const NONE_ID = 'none';
|
||||
const ROW_HEIGHT = 32;
|
||||
|
||||
const model = defineModel<string[]>({
|
||||
default: [],
|
||||
default: () => [],
|
||||
});
|
||||
|
||||
const props = defineProps<{
|
||||
|
||||
@@ -16,8 +16,8 @@ import {
|
||||
ChevronRightIcon,
|
||||
EllipsisHorizontalIcon,
|
||||
} from '@heroicons/vue/20/solid';
|
||||
import { buttonVariants } from '@/packages/ui/src';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { buttonVariants } from './Buttons/index';
|
||||
import { cn } from './utils/cn';
|
||||
import { computed, watch } from 'vue';
|
||||
|
||||
const page = defineModel<number>('page', { default: 1 });
|
||||
@@ -32,7 +32,7 @@ const props = withDefaults(
|
||||
);
|
||||
|
||||
const model = defineModel<string[]>({
|
||||
default: [],
|
||||
default: () => [],
|
||||
});
|
||||
|
||||
const open = ref(false);
|
||||
|
||||
@@ -21,7 +21,7 @@ import TimeEntryRow from '@/packages/ui/src/TimeEntry/TimeEntryRow.vue';
|
||||
import type { TimeEntriesGroupedByType } from '@/types/time-entries';
|
||||
|
||||
const selectedTimeEntries = defineModel<TimeEntry[]>('selected', {
|
||||
default: [],
|
||||
default: () => [],
|
||||
});
|
||||
|
||||
const props = withDefaults(
|
||||
|
||||
@@ -20,7 +20,7 @@ const emit = defineEmits<{
|
||||
}>();
|
||||
|
||||
const model = defineModel<string[]>({
|
||||
default: [],
|
||||
default: () => [],
|
||||
});
|
||||
|
||||
const timeEntryTags = computed<Tag[]>(() => {
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user