Add goals feature for personal goals with filters

resources/js/Pages/Goals.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+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 PageTitle from '@/Components/Common/PageTitle.vue';
+import UpgradeBadge from '@/Components/Common/UpgradeBadge.vue';
+import { canCreateGoals } from '@/utils/permissions';
+import { canCreateMoreGoals, goalLimit } 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');
+
+// Archived goals count towards the goal limit, so the whole list is loaded and split here
+const { goals, isLoading } = useGoalsQuery('all');
+const visibleGoals = computed(() =>
+    goals.value.filter((goal) => goal.is_archived === showArchived.value)
+);
+const archivedCount = computed(() => goals.value.filter((goal) => goal.is_archived).length);
+const canCreateMore = computed(() => canCreateMoreGoals(goals.value.length));
+const limit = goalLimit();
+</script>
+
+<template>
+    <AppLayout title="Goals" data-testid="goals_view">
+        <MainContainer
+            class="py-5 border-b border-default-background-separator flex justify-between items-center">
+            <div class="flex items-center space-x-6">
+                <PageTitle :icon="Target" title="Goals"></PageTitle>
+                <TabBar v-model="activeTab">
+                    <TabBarItem value="active">Active</TabBarItem>
+                    <TabBarItem value="archived">
+                        Archived
+                        <span v-if="archivedCount > 0" class="pl-1">({{ archivedCount }})</span>
+                    </TabBarItem>
+                </TabBar>
+            </div>
+            <div class="flex items-center space-x-3">
+                <UpgradeBadge v-if="canCreateGoals() && !canCreateMore">
+                    <strong>More than {{ limit }} goal{{ limit === 1 ? '' : 's' }}</strong> is only
+                    available in solidtime Professional.
+                </UpgradeBadge>
+                <SecondaryButton
+                    v-if="canCreateGoals() && canCreateMore"
+                    :icon="PlusIcon"
+                    @click="showCreateGoalModal = true"
+                    >Create Goal
+                </SecondaryButton>
+            </div>
+            <GoalCreateModal v-model:show="showCreateGoalModal"></GoalCreateModal>
+        </MainContainer>
+        <GoalTable
+            :goals="visibleGoals"
+            :is-loading="isLoading"
+            :can-create-more-goals="canCreateMore"
+            :showing-archived="showArchived"></GoalTable>
+    </AppLayout>
+</template>

resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref, watch } from 'vue';
-import { usePage } from '@inertiajs/vue3';
 import ActionMessage from '@/Components/ActionMessage.vue';
 import FormSection from '@/Components/FormSection.vue';
 import { Field, FieldError, FieldLabel } from '@/packages/ui/src/field';
@@ -14,8 +13,10 @@ import {
     useUpdateUserMutation,
     useUserQuery,
 } from '@/utils/useUserQuery';
-import type { UpdateUserBody, User } from '@/packages/api/src';
+import type { UpdateUserBody, User, Weekday } from '@/packages/api/src';
 import { getApiValidationFieldErrors } from '@/utils/apiValidation';
+import TimezoneCombobox from '@/Components/Common/TimezoneCombobox.vue';
+import WeekStartSelect from '@/Components/Common/WeekStartSelect.vue';
 
 const { user } = useUserQuery();
 const updateUser = useUpdateUserMutation();
@@ -25,7 +26,7 @@ const resetPendingEmail = useResetUserPendingEmailMutation();
 const name = ref('');
 const email = ref('');
 const timezone = ref('');
-const weekStart = ref('');
+const weekStart = ref<Weekday | ''>('');
 
 const photoBase64 = ref<string | null>(null);
 const photoPreview = ref<string | null>(null);
@@ -166,11 +167,6 @@ function flashSaved() {
 onBeforeUnmount(() => {
     if (resendCooldownTimer) clearTimeout(resendCooldownTimer);
 });
-
-const page = usePage<{
-    timezones: Record<string, string>;
-    weekdays: Record<string, string>;
-}>();
 </script>
 
 <template>
@@ -292,42 +288,14 @@ const page = usePage<{
             <!-- Timezone -->
             <Field class="col-span-6 sm:col-span-4">
                 <FieldLabel for="timezone">Timezone</FieldLabel>
-                <select
-                    id="timezone"
-                    v-model="timezone"
-                    name="timezone"
-                    required
-                    :disabled="!isUserLoaded"
-                    class="block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
-                    <option value="" disabled>Select a Timezone</option>
-                    <option
-                        v-for="(timezoneTranslated, timezoneValue) in page.props.timezones"
-                        :key="timezoneValue"
-                        :value="timezoneValue">
-                        {{ timezoneTranslated }}
-                    </option>
-                </select>
+                <TimezoneCombobox id="timezone" v-model="timezone" :disabled="!isUserLoaded" />
                 <FieldError v-if="fieldErrors.timezone">{{ fieldErrors.timezone }}</FieldError>
             </Field>
 
             <!-- Week start -->
             <Field class="col-span-6 sm:col-span-4">
                 <FieldLabel for="week_start">Start of the week</FieldLabel>
-                <select
-                    id="week_start"
-                    v-model="weekStart"
-                    name="week_start"
-                    required
-                    :disabled="!isUserLoaded"
-                    class="block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
-                    <option value="" disabled>Select a week day</option>
-                    <option
-                        v-for="(weekdayTranslated, weekdayValue) in page.props.weekdays"
-                        :key="weekdayValue"
-                        :value="weekdayValue">
-                        {{ weekdayTranslated }}
-                    </option>
-                </select>
+                <WeekStartSelect id="week_start" v-model="weekStart" :disabled="!isUserLoaded" />
                 <FieldError v-if="fieldErrors.week_start">{{ fieldErrors.week_start }}</FieldError>
             </Field>
         </template>