Compare commits

...

3 Commits

Author SHA1 Message Date
dependabot[bot]
ea6f196456 Bump the major-updates group across 1 directory with 19 updates
Bumps the major-updates group with 19 updates in the / directory:

| Package | From | To |
| --- | --- | --- |
| [@floating-ui/vue](https://github.com/floating-ui/floating-ui/tree/HEAD/packages/vue) | `1.1.11` | `2.0.1` |
| [@tanstack/vue-query-devtools](https://github.com/TanStack/query/tree/HEAD/packages/vue-query-devtools) | `5.91.0` | `6.3.2` |
| [@tanstack/vue-table](https://github.com/TanStack/table/tree/HEAD/packages/vue-table) | `8.21.3` | `9.2.8` |
| [@vueuse/core](https://github.com/vueuse/vueuse/tree/HEAD/packages/core) | `14.4.0` | `15.0.0` |
| [@vueuse/integrations](https://github.com/vueuse/vueuse/tree/HEAD/packages/integrations) | `14.4.0` | `15.0.0` |
| [pinia](https://github.com/vuejs/pinia) | `3.0.4` | `4.0.3` |
| [tailwind-merge](https://github.com/dcastil/tailwind-merge/tree/HEAD/packages/tailwind-merge) | `2.6.1` | `3.7.0` |
| [@eslint/js](https://github.com/eslint/eslint/tree/HEAD/packages/js) | `9.39.5` | `10.0.1` |
| [@inertiajs/vue3](https://github.com/inertiajs/inertia/tree/HEAD/packages/vue3) | `2.3.27` | `3.9.1` |
| [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) | `22.20.1` | `26.6.5` |
| [happy-dom](https://github.com/capricorn86/happy-dom) | `20.11.2` | `21.0.1` |
| [laravel-vite-plugin](https://github.com/laravel/vite-plugin) | `2.1.0` | `3.2.0` |
| [postcss-import](https://github.com/postcss/postcss-import) | `15.1.0` | `17.0.0` |
| [postcss-nesting](https://github.com/csstools/postcss-plugins/tree/HEAD/plugins/postcss-nesting) | `12.1.5` | `14.0.3` |
| [tailwindcss](https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/tailwindcss) | `3.4.19` | `4.3.3` |
| [typescript](https://github.com/microsoft/TypeScript) | `5.9.3` | `7.0.2` |
| [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) | `7.3.6` | `8.3.4` |
| [vitest](https://github.com/vitest-dev/vitest/tree/HEAD/packages/vitest) | `4.1.10` | `5.0.3` |
| [vite-plugin-dts](https://github.com/qmhc/unplugin-dts/tree/HEAD/packages/vite-plugin-dts) | `4.5.4` | `5.1.2` |



Updates `@floating-ui/vue` from 1.1.11 to 2.0.1
- [Release notes](https://github.com/floating-ui/floating-ui/releases)
- [Changelog](https://github.com/floating-ui/floating-ui/blob/master/packages/vue/CHANGELOG.md)
- [Commits](https://github.com/floating-ui/floating-ui/commits/@floating-ui/vue@2.0.1/packages/vue)

Updates `@tanstack/vue-query-devtools` from 5.91.0 to 6.3.2
- [Release notes](https://github.com/TanStack/query/releases)
- [Changelog](https://github.com/TanStack/query/blob/main/packages/vue-query-devtools/CHANGELOG.md)
- [Commits](https://github.com/TanStack/query/commits/@tanstack/vue-query-devtools@6.3.2/packages/vue-query-devtools)

Updates `@tanstack/vue-table` from 8.21.3 to 9.2.8
- [Release notes](https://github.com/TanStack/table/releases)
- [Changelog](https://github.com/TanStack/table/blob/main/packages/vue-table/CHANGELOG.md)
- [Commits](https://github.com/TanStack/table/commits/@tanstack/vue-table@9.2.8/packages/vue-table)

Updates `@vueuse/core` from 14.4.0 to 15.0.0
- [Release notes](https://github.com/vueuse/vueuse/releases)
- [Commits](https://github.com/vueuse/vueuse/commits/v15.0.0/packages/core)

Updates `@vueuse/integrations` from 14.4.0 to 15.0.0
- [Release notes](https://github.com/vueuse/vueuse/releases)
- [Commits](https://github.com/vueuse/vueuse/commits/v15.0.0/packages/integrations)

Updates `pinia` from 3.0.4 to 4.0.3
- [Release notes](https://github.com/vuejs/pinia/releases)
- [Commits](https://github.com/vuejs/pinia/compare/v3.0.4...v4.0.3)

Updates `tailwind-merge` from 2.6.1 to 3.7.0
- [Release notes](https://github.com/dcastil/tailwind-merge/releases)
- [Commits](https://github.com/dcastil/tailwind-merge/commits/tailwind-merge@3.7.0/packages/tailwind-merge)

Updates `@eslint/js` from 9.39.5 to 10.0.1
- [Release notes](https://github.com/eslint/eslint/releases)
- [Commits](https://github.com/eslint/eslint/commits/v10.0.1/packages/js)

Updates `@inertiajs/vue3` from 2.3.27 to 3.9.1
- [Release notes](https://github.com/inertiajs/inertia/releases)
- [Changelog](https://github.com/inertiajs/inertia/blob/3.x/CHANGELOG.md)
- [Commits](https://github.com/inertiajs/inertia/commits/v3.9.1/packages/vue3)

Updates `@types/node` from 22.20.1 to 26.6.5
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node)

Updates `happy-dom` from 20.11.2 to 21.0.1
- [Release notes](https://github.com/capricorn86/happy-dom/releases)
- [Commits](https://github.com/capricorn86/happy-dom/compare/v20.11.2...v21.0.1)

Updates `laravel-vite-plugin` from 2.1.0 to 3.2.0
- [Release notes](https://github.com/laravel/vite-plugin/releases)
- [Changelog](https://github.com/laravel/vite-plugin/blob/3.x/CHANGELOG.md)
- [Upgrade guide](https://github.com/laravel/vite-plugin/blob/3.x/UPGRADE.md)
- [Commits](https://github.com/laravel/vite-plugin/compare/v2.1.0...v3.2.0)

Updates `postcss-import` from 15.1.0 to 17.0.0
- [Release notes](https://github.com/postcss/postcss-import/releases)
- [Changelog](https://github.com/postcss/postcss-import/blob/master/CHANGELOG.md)
- [Commits](https://github.com/postcss/postcss-import/compare/15.1.0...17.0.0)

Updates `postcss-nesting` from 12.1.5 to 14.0.3
- [Changelog](https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-nesting/CHANGELOG.md)
- [Commits](https://github.com/csstools/postcss-plugins/commits/HEAD/plugins/postcss-nesting)

Updates `tailwindcss` from 3.4.19 to 4.3.3
- [Release notes](https://github.com/tailwindlabs/tailwindcss/releases)
- [Changelog](https://github.com/tailwindlabs/tailwindcss/blob/main/CHANGELOG.md)
- [Commits](https://github.com/tailwindlabs/tailwindcss/commits/v4.3.3/packages/tailwindcss)

Updates `typescript` from 5.9.3 to 7.0.2
- [Release notes](https://github.com/microsoft/TypeScript/releases)
- [Commits](https://github.com/microsoft/TypeScript/compare/v5.9.3...v7.0.2)

Updates `vite` from 7.3.6 to 8.3.4
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v8.3.4/packages/vite)

Updates `vitest` from 4.1.10 to 5.0.3
- [Release notes](https://github.com/vitest-dev/vitest/releases)
- [Changelog](https://github.com/vitest-dev/vitest/blob/main/docs/releases.md)
- [Commits](https://github.com/vitest-dev/vitest/commits/v5.0.3/packages/vitest)

Updates `vite-plugin-dts` from 4.5.4 to 5.1.2
- [Release notes](https://github.com/qmhc/unplugin-dts/releases)
- [Changelog](https://github.com/qmhc/unplugin-dts/blob/main/packages/vite-plugin-dts/CHANGELOG.md)
- [Commits](https://github.com/qmhc/unplugin-dts/commits/vite-plugin-dts@5.1.2/packages/vite-plugin-dts)

---
updated-dependencies:
- dependency-name: "@floating-ui/vue"
  dependency-version: 2.0.1
  dependency-type: direct:production
  update-type: version-update:semver-major
  dependency-group: major-updates
- dependency-name: "@tanstack/vue-query-devtools"
  dependency-version: 6.3.2
  dependency-type: direct:production
  update-type: version-update:semver-major
  dependency-group: major-updates
- dependency-name: "@tanstack/vue-table"
  dependency-version: 9.2.8
  dependency-type: direct:production
  update-type: version-update:semver-major
  dependency-group: major-updates
- dependency-name: "@vueuse/core"
  dependency-version: 15.0.0
  dependency-type: direct:production
  update-type: version-update:semver-major
  dependency-group: major-updates
- dependency-name: "@vueuse/integrations"
  dependency-version: 15.0.0
  dependency-type: direct:production
  update-type: version-update:semver-major
  dependency-group: major-updates
- dependency-name: pinia
  dependency-version: 4.0.3
  dependency-type: direct:production
  update-type: version-update:semver-major
  dependency-group: major-updates
- dependency-name: tailwind-merge
  dependency-version: 3.7.0
  dependency-type: direct:production
  update-type: version-update:semver-major
  dependency-group: major-updates
- dependency-name: "@eslint/js"
  dependency-version: 10.0.1
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: major-updates
- dependency-name: "@inertiajs/vue3"
  dependency-version: 3.9.1
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: major-updates
- dependency-name: "@types/node"
  dependency-version: 26.6.5
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: major-updates
- dependency-name: happy-dom
  dependency-version: 21.0.1
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: major-updates
- dependency-name: laravel-vite-plugin
  dependency-version: 3.2.0
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: major-updates
- dependency-name: postcss-import
  dependency-version: 17.0.0
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: major-updates
- dependency-name: postcss-nesting
  dependency-version: 14.0.3
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: major-updates
- dependency-name: tailwindcss
  dependency-version: 4.3.3
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: major-updates
- dependency-name: typescript
  dependency-version: 7.0.2
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: major-updates
- dependency-name: vite
  dependency-version: 8.3.4
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: major-updates
- dependency-name: vitest
  dependency-version: 5.0.3
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: major-updates
- dependency-name: vite-plugin-dts
  dependency-version: 5.1.2
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: major-updates
...

Signed-off-by: dependabot[bot] <support@github.com>
2026-10-19 08:24:26 +00:00
Gregor Vostrak
b46f015754 Always show the create goal button and open the upgrade modal when the goal limit is reached 2026-10-14 16:59:51 +02:00
Gregor Vostrak
fc8985f513 Invalidate goals after time entry and member changes 2026-10-14 16:59:51 +02:00
19 changed files with 2309 additions and 2759 deletions

View File

@@ -342,6 +342,89 @@ test('test that a running time entry counts towards the goal progress', async ({
);
});
// Close to midnight UTC an entry that started a few minutes ago could fall on the previous day, so
// the day of the goal is moved to a timezone (without daylight saving time) where it is late morning
function timezoneAwayFromMidnight() {
const utcHour = new Date().getUTCHours();
return utcHour >= 2 && utcHour < 22 ? 'UTC' : 'Asia/Tokyo';
}
// Navigates via the sidebar, a full page load would start with an empty query cache and hide
// a missing goals invalidation
async function navigateViaSidebar(page: Page, name: 'Time' | 'Goals') {
await page.getByRole('link', { name, exact: true }).first().click();
await expect(page).toHaveURL(new RegExp('/' + name.toLowerCase() + '$'));
}
test('test that goal progress updates after creating a time entry without a page reload', async ({
page,
ctx,
}) => {
const goal = await createGoalViaApi(ctx, {
name: 'Cache goal',
target_seconds: 3600,
period: 'day',
timezone: timezoneAwayFromMidnight(),
});
await goToGoalsOverview(page);
await expect(goalRow(page, goal.id).getByTestId('goal_tracked_time')).toHaveText('0h 00min');
await navigateViaSidebar(page, 'Time');
await page.getByRole('button', { name: 'Time entry actions' }).click();
await page.getByRole('menuitem', { name: 'Manual time entry' }).click();
const durationInput = page.locator('[role="dialog"] input[name="Duration"]');
await durationInput.fill('15min');
await durationInput.press('Tab');
await Promise.all([
page.waitForResponse(
(response) => response.url().includes('/time-entries') && response.status() === 201
),
page.getByRole('button', { name: 'Create Time Entry' }).click(),
]);
await navigateViaSidebar(page, 'Goals');
await expect(goalRow(page, goal.id).getByTestId('goal_tracked_time')).toHaveText('0h 15min');
});
test('test that goal progress updates after changing the project of the running time entry without a page reload', async ({
page,
ctx,
}) => {
const project = await createProjectViaApi(ctx, { name: 'Running Project', is_public: true });
const start = new Date(Date.now() - 30 * 60 * 1000).toISOString().replace(/\.\d{3}Z$/, 'Z');
await createRunningTimeEntryWithStartViaApi(ctx, 'Running work', start);
const goal = await createGoalViaApi(ctx, {
name: 'Running project goal',
target_seconds: 3600,
period: 'day',
timezone: timezoneAwayFromMidnight(),
filters: { project_ids: [project.id], time_entry_type: 'work' },
});
await goToGoalsOverview(page);
await expect(goalRow(page, goal.id).getByTestId('goal_tracked_time')).toHaveText('0h 00min');
await navigateViaSidebar(page, 'Time');
await page.getByRole('button', { name: 'No Project' }).click();
await Promise.all([
page.waitForResponse(
async (response) =>
response.url().includes('/time-entries') &&
response.request().method() === 'PUT' &&
response.status() === 200 &&
(await response.json()).data.project_id === project.id
),
page.getByRole('option').filter({ hasText: project.name }).click(),
]);
await navigateViaSidebar(page, 'Goals');
// The entry keeps running while the test runs
await expect(goalRow(page, goal.id).getByTestId('goal_tracked_time')).toHaveText(
/^0h 3[0-2]min$/
);
});
test('test that editing a goal via the modal works', async ({ page, ctx }) => {
const goal = await createGoalViaApi(ctx, {
name: 'Old goal name',

4773
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -26,49 +26,49 @@
},
"devDependencies": {
"@eslint/eslintrc": "^3.3.5",
"@eslint/js": "^9.39.4",
"@inertiajs/vue3": "^2.3.23",
"@eslint/js": "^10.0.1",
"@inertiajs/vue3": "^3.9.1",
"@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.6.5",
"@vitejs/plugin-vue": "^6.0.6",
"@vue/test-utils": "^2.4.6",
"@vue/tsconfig": "^0.8.1",
"autoprefixer": "^10.5.0",
"axios": "^1.16.0",
"eslint-plugin-unused-imports": "^4.4.1",
"happy-dom": "^20.8.9",
"laravel-vite-plugin": "^2.1.0",
"happy-dom": "^21.0.1",
"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.3",
"tailwindcss": "^4.3.3",
"typescript": "^7.0.2",
"vite": "^8.3.4",
"vite-plugin-checker": "^0.12.0",
"vitest": "^4.1.4",
"vitest": "^5.0.3",
"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.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.3.2",
"@tanstack/vue-table": "^9.2.8",
"@tanstack/vue-virtual": "^3.13.24",
"@vue/eslint-config-prettier": "^10.2.0",
"@vue/eslint-config-typescript": "^14.7.0",
"@vueuse/core": "^14.4.0",
"@vueuse/integrations": "^14.3.0",
"@vueuse/core": "^15.0.0",
"@vueuse/integrations": "^15.0.0",
"@zodios/core": "^10.9.6",
"chroma-js": "^3.2.0",
"class-variance-authority": "^0.7.1",
@@ -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.10.1",
"tailwind-merge": "^2.6.1",
"tailwind-merge": "^3.7.0",
"tailwindcss-animate": "^1.0.7",
"vue-draggable-plus": "^0.6.1",
"vue-echarts": "^8.0.1",

View File

@@ -29,6 +29,7 @@ import ClientCreateModal from '@/Components/Common/Client/ClientCreateModal.vue'
import TaskCreateModal from '@/Components/Common/Task/TaskCreateModal.vue';
import TagCreateModal from '@/packages/ui/src/Tag/TagCreateModal.vue';
import GoalCreateModal from '@/Components/Common/Goal/GoalCreateModal.vue';
import UpgradeModal from '@/packages/ui/src/UpgradeModal.vue';
import MemberInviteModal from '@/Components/Common/Member/MemberInviteModal.vue';
import TimeEntryCreateModal from '@/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue';
@@ -53,6 +54,7 @@ const {
showCreateTaskModal,
showCreateTagModal,
showCreateGoalModal,
showGoalUpgradeModal,
showInviteMemberModal,
showCreateTimeEntryModal,
showProjectSelector,
@@ -185,6 +187,7 @@ const firstProjectId = computed(() => projects.value[0]?.id ?? '');
<!-- Goal Create Modal -->
<GoalCreateModal v-model:show="showCreateGoalModal" />
<UpgradeModal v-model:show="showGoalUpgradeModal" feature="goals" />
<!-- Member Invite Modal -->
<MemberInviteModal v-model:show="showInviteMemberModal" :available-roles="availableRoles" />

View File

@@ -0,0 +1,43 @@
import { describe, it, expect } from 'vitest';
import { mount } from '@vue/test-utils';
import GoalCreateButton from './GoalCreateButton.vue';
function mountGoalCreateButton(canCreateMoreGoals: boolean) {
return mount(GoalCreateButton, {
props: { canCreateMoreGoals },
slots: { default: 'Create your first goal' },
global: {
stubs: {
GoalCreateModal: { name: 'GoalCreateModal', props: ['show'], template: '<div />' },
UpgradeModal: {
name: 'UpgradeModal',
props: ['show', 'feature'],
template: '<div />',
},
},
},
});
}
describe('GoalCreateButton', () => {
it('opens the create modal while more goals can be created', async () => {
const wrapper = mountGoalCreateButton(true);
await wrapper.get('button').trigger('click');
expect(wrapper.getComponent({ name: 'GoalCreateModal' }).props('show')).toBe(true);
expect(wrapper.getComponent({ name: 'UpgradeModal' }).props('show')).toBe(false);
});
it('opens the upgrade modal once the goal limit is reached', async () => {
const wrapper = mountGoalCreateButton(false);
expect(wrapper.get('button').text()).toBe('Create your first goal');
await wrapper.get('button').trigger('click');
const upgradeModal = wrapper.getComponent({ name: 'UpgradeModal' });
expect(upgradeModal.props('show')).toBe(true);
expect(upgradeModal.props('feature')).toBe('goals');
expect(wrapper.getComponent({ name: 'GoalCreateModal' }).props('show')).toBe(false);
});
});

View File

@@ -0,0 +1,31 @@
<script setup lang="ts">
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
import UpgradeModal from '@/packages/ui/src/UpgradeModal.vue';
import GoalCreateModal from '@/Components/Common/Goal/GoalCreateModal.vue';
import { PlusIcon } from '@heroicons/vue/16/solid';
import { ref } from 'vue';
const props = defineProps<{
canCreateMoreGoals: boolean;
}>();
const showCreateGoalModal = ref(false);
const showUpgradeModal = ref(false);
// The button stays visible when the goal limit is reached and explains the limit instead
function onClick() {
if (props.canCreateMoreGoals) {
showCreateGoalModal.value = true;
} else {
showUpgradeModal.value = true;
}
}
</script>
<template>
<GoalCreateModal v-model:show="showCreateGoalModal"></GoalCreateModal>
<UpgradeModal v-model:show="showUpgradeModal" feature="goals" />
<SecondaryButton :icon="PlusIcon" @click="onClick">
<slot>Create Goal</slot>
</SecondaryButton>
</template>

View File

@@ -1,12 +1,9 @@
<script setup lang="ts">
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
import { Target } from '@lucide/vue';
import { PlusIcon } from '@heroicons/vue/16/solid';
import { ref } from 'vue';
import type { Goal } from '@/packages/api/src';
import GoalTableRow from '@/Components/Common/Goal/GoalTableRow.vue';
import GoalTableHeading from '@/Components/Common/Goal/GoalTableHeading.vue';
import GoalCreateModal from '@/Components/Common/Goal/GoalCreateModal.vue';
import GoalCreateButton from '@/Components/Common/Goal/GoalCreateButton.vue';
import { canCreateGoals } from '@/utils/permissions';
import { LoadingSpinner } from '@/packages/ui/src';
import { isGoalsExtensionActivated } from '@/utils/billing';
@@ -18,7 +15,6 @@ const props = defineProps<{
showingArchived: boolean;
}>();
const showCreateGoalModal = ref(false);
const showTargetColumn = isGoalsExtensionActivated();
// Every column gets a share of the free space so the columns are spread evenly over the table
const gridTemplateColumns = [
@@ -33,7 +29,6 @@ const gridTemplateColumns = [
</script>
<template>
<GoalCreateModal v-model:show="showCreateGoalModal"></GoalCreateModal>
<div class="flow-root max-w-[100vw] overflow-x-auto">
<div class="inline-block min-w-full align-middle">
<div data-testid="goal_table" class="grid min-w-full" :style="{ gridTemplateColumns }">
@@ -51,14 +46,11 @@ const gridTemplateColumns = [
<p v-if="canCreateGoals() && !props.showingArchived" class="pb-5">
Set yourself a target and track your progress every day, week or month.
</p>
<SecondaryButton
v-if="
canCreateGoals() && !props.showingArchived && props.canCreateMoreGoals
"
:icon="PlusIcon"
@click="showCreateGoalModal = true"
<GoalCreateButton
v-if="canCreateGoals() && !props.showingArchived"
:can-create-more-goals="props.canCreateMoreGoals"
>Create your first goal
</SecondaryButton>
</GoalCreateButton>
</div>
<template v-for="goal in props.goals" :key="goal.id">
<GoalTableRow

View File

@@ -43,6 +43,7 @@ const deleteMutation = useMutation({
onSuccess: () => {
close();
queryClient.invalidateQueries({ queryKey: ['members'] });
queryClient.invalidateQueries({ queryKey: ['goals'] });
},
});

View File

@@ -52,6 +52,7 @@ async function submit() {
'There was an error merging the members.',
() => {
queryClient.invalidateQueries({ queryKey: ['members'] });
queryClient.invalidateQueries({ queryKey: ['goals'] });
show.value = false;
}
);

View File

@@ -2,19 +2,15 @@
import MainContainer from '@/packages/ui/src/MainContainer.vue';
import AppLayout from '@/Layouts/AppLayout.vue';
import { Target } from '@lucide/vue';
import { PlusIcon } from '@heroicons/vue/16/solid';
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
import { computed, ref } from 'vue';
import GoalTable from '@/Components/Common/Goal/GoalTable.vue';
import GoalCreateModal from '@/Components/Common/Goal/GoalCreateModal.vue';
import GoalCreateButton from '@/Components/Common/Goal/GoalCreateButton.vue';
import PageTitle from '@/Components/Common/PageTitle.vue';
import UpgradeBadge from '@/packages/ui/src/UpgradeBadge.vue';
import { canCreateGoals } from '@/utils/permissions';
import { canCreateMoreGoals } from '@/utils/billing';
import { useGoalsQuery } from '@/utils/useGoalsQuery';
import { TabBar, TabBarItem } from '@/packages/ui/src';
const showCreateGoalModal = ref(false);
const activeTab = ref('active');
const showArchived = computed(() => activeTab.value === 'archived');
@@ -41,16 +37,9 @@ const canCreateMore = computed(() => canCreateMoreGoals(goals.value.length));
</TabBarItem>
</TabBar>
</div>
<div class="flex items-center space-x-3">
<UpgradeBadge v-if="canCreateGoals() && !canCreateMore" feature="goals" />
<SecondaryButton
v-if="canCreateGoals() && canCreateMore"
:icon="PlusIcon"
@click="showCreateGoalModal = true"
>Create Goal
</SecondaryButton>
</div>
<GoalCreateModal v-model:show="showCreateGoalModal"></GoalCreateModal>
<GoalCreateButton
v-if="canCreateGoals()"
:can-create-more-goals="canCreateMore"></GoalCreateButton>
</MainContainer>
<GoalTable
:goals="visibleGoals"

View File

@@ -29,7 +29,7 @@
"author": "solidtime",
"license": "AGPL-3.0",
"devDependencies": {
"vite-plugin-dts": "^4.5.4"
"vite-plugin-dts": "^5.1.2"
},
"peerDependencies": {
"@zodios/core": "^10.9.6",

View File

@@ -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.2",
"zod": "^3.25.76"
},
"peerDependencies": {

View File

@@ -422,6 +422,7 @@ export function useBreakPlacement(deps: BreakPlacementDeps) {
},
onSettled: () => {
queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
queryClient.invalidateQueries({ queryKey: ['goals'] });
},
});

View File

@@ -217,6 +217,7 @@ export function useCopyLastWeek(
}
queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
queryClient.invalidateQueries({ queryKey: ['goals'] });
if (attempted === 0) return;

View File

@@ -174,6 +174,7 @@ export function useTimesheetCellMutations(
);
} finally {
queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
queryClient.invalidateQueries({ queryKey: ['goals'] });
}
}

View File

@@ -22,6 +22,8 @@ import {
canCreateInvitations,
} from '@/utils/permissions';
import { isBillingActivated, isInvoicingActivated } from '@/utils/billing';
import { useQueryClient } from '@tanstack/vue-query';
import { fetchCanCreateMoreGoals } from '@/utils/useGoalsQuery';
import { useTimeEntriesInfiniteQuery } from '@/utils/useTimeEntriesInfiniteQuery';
import { useProjectsQuery } from '@/utils/useProjectsQuery';
import { useClientsQuery } from '@/utils/useClientsQuery';
@@ -66,6 +68,7 @@ const showCreateClientModal = ref(false);
const showCreateTaskModal = ref(false);
const showCreateTagModal = ref(false);
const showCreateGoalModal = ref(false);
const showGoalUpgradeModal = ref(false);
const showInviteMemberModal = ref(false);
const showCreateTimeEntryModal = ref(false);
@@ -103,6 +106,7 @@ const ENTITY_ICONS: Record<string, typeof FolderIcon> = {
};
export function useCommandPalette() {
const queryClient = useQueryClient();
const currentTimeEntryStore = useCurrentTimeEntryStore();
const { currentTimeEntry, isActive } = storeToRefs(currentTimeEntryStore);
const { setActiveState, updateTimer } = currentTimeEntryStore;
@@ -240,9 +244,13 @@ export function useCommandPalette() {
showCreateTagModal.value = true;
}
function openCreateGoalModal() {
async function openCreateGoalModal() {
closePaletteAfterAction();
showCreateGoalModal.value = true;
if (await fetchCanCreateMoreGoals(queryClient)) {
showCreateGoalModal.value = true;
} else {
showGoalUpgradeModal.value = true;
}
}
function openInviteMemberModal() {
@@ -525,6 +533,7 @@ export function useCommandPalette() {
showCreateTaskModal,
showCreateTagModal,
showCreateGoalModal,
showGoalUpgradeModal,
showInviteMemberModal,
showCreateTimeEntryModal,
showProjectSelector,

View File

@@ -261,6 +261,7 @@ export const useCurrentTimeEntryStore = defineStore('currentTimeEntry', () => {
stopLiveTimer();
}
}
queryClient.invalidateQueries({ queryKey: ['goals'] });
} else {
throw new Error(
'Failed to fetch current time entry because organization ID is missing.'

View File

@@ -1,9 +1,10 @@
import { useQuery, useQueryClient } from '@tanstack/vue-query';
import { useQuery, useQueryClient, type QueryClient } from '@tanstack/vue-query';
import { api } from '@/packages/api/src';
import { getCurrentOrganizationId } from '@/utils/useUser';
import type { Goal } from '@/packages/api/src';
import { computed } from 'vue';
import { fetchAllPages } from '@/utils/fetchAllPages';
import { canCreateMoreGoals, goalLimit } from '@/utils/billing';
export type GoalArchivedFilter = 'true' | 'false' | 'all';
@@ -19,19 +20,38 @@ export async function fetchAllGoals(
);
}
export function useGoalsQuery(archived: GoalArchivedFilter = 'false') {
const queryClient = useQueryClient();
const query = useQuery({
queryKey: computed(() => ['goals', getCurrentOrganizationId(), archived]),
export function goalsQueryOptions(archived: GoalArchivedFilter = 'false') {
return {
queryKey: ['goals', getCurrentOrganizationId(), archived],
queryFn: async () => {
const organizationId = getCurrentOrganizationId();
if (!organizationId) throw new Error('No organization');
const data = await fetchAllGoals(organizationId, archived);
return { data };
},
enabled: () => !!getCurrentOrganizationId(),
staleTime: 1000 * 30, // 30 seconds
};
}
/**
* Checks the goal limit outside of the goals page, where the goals are not loaded yet.
* Archived goals count towards the limit, so all goals are counted.
*/
export async function fetchCanCreateMoreGoals(queryClient: QueryClient): Promise<boolean> {
if (goalLimit() === null) {
return true;
}
const { data } = await queryClient.fetchQuery(goalsQueryOptions('all'));
return canCreateMoreGoals(data.length);
}
export function useGoalsQuery(archived: GoalArchivedFilter = 'false') {
const queryClient = useQueryClient();
const query = useQuery({
...goalsQueryOptions(archived),
queryKey: computed(() => goalsQueryOptions(archived).queryKey),
enabled: () => !!getCurrentOrganizationId(),
// Progress is computed server side, keep it fresh while the page is open
refetchInterval: 1000 * 60,
});

View File

@@ -36,6 +36,7 @@ export function useTimeEntriesMutations() {
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
queryClient.invalidateQueries({ queryKey: ['goals'] });
},
});
@@ -58,6 +59,7 @@ export function useTimeEntriesMutations() {
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
queryClient.invalidateQueries({ queryKey: ['goals'] });
},
});
@@ -105,6 +107,7 @@ export function useTimeEntriesMutations() {
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
queryClient.invalidateQueries({ queryKey: ['goals'] });
},
});
@@ -127,6 +130,7 @@ export function useTimeEntriesMutations() {
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
queryClient.invalidateQueries({ queryKey: ['goals'] });
},
});
@@ -152,6 +156,7 @@ export function useTimeEntriesMutations() {
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
queryClient.invalidateQueries({ queryKey: ['goals'] });
},
});