move time entry mass updates to ui package and remove its dependencies

resources/js/Components/Common/Project/ProjectTable.vue

@@ -39,6 +39,7 @@ const { clients } = storeToRefs(useClientsStore());
 const gridTemplate = computed(() => {
     return `grid-template-columns: minmax(300px, 1fr) minmax(150px, auto) minmax(140px, auto) minmax(130px, auto) ${props.showBillableRate ? 'minmax(130px, auto)' : ''} minmax(120px, auto) 80px;`;
 });
+import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 </script>
 
 <template>
@@ -47,6 +48,7 @@ const gridTemplate = computed(() => {
         :createClient
         :currency="getOrganizationCurrencyString()"
         :clients="clients"
+        :enableEstimatedTime="isAllowedToPerformPremiumAction"
         v-model:show="showCreateProjectModal"></ProjectCreateModal>
     <div class="flow-root max-w-[100vw] overflow-x-auto">
         <div class="inline-block min-w-full align-middle">

resources/js/Components/Common/TimeEntry/TimeEntryCreateModal.vue

@@ -28,6 +28,7 @@ import type {
 import { useClientsStore } from '@/utils/useClients';
 import TimePicker from '@/packages/ui/src/Input/TimePicker.vue';
 import { getOrganizationCurrencyString } from '@/utils/money';
+import { canCreateProjects } from '@/utils/permissions';
 const projectStore = useProjectsStore();
 const { projects } = storeToRefs(projectStore);
 const taskStore = useTasksStore();
@@ -39,6 +40,10 @@ const { createTimeEntry } = useTimeEntriesStore();
 const show = defineModel('show', { default: false });
 const saving = ref(false);
 
+defineProps<{
+    enableEstimatedTime: boolean;
+}>();
+
 async function createProject(
     project: CreateProjectBody
 ): Promise<Project | undefined> {
@@ -130,11 +135,13 @@ async function createTag(tag: string) {
                             :clients
                             :createProject
                             :createClient
+                            :canCreateProject="canCreateProjects()"
                             :currency="getOrganizationCurrencyString()"
                             class="mt-1"
                             size="xlarge"
                             :projects="projects"
                             :tasks="tasks"
+                            :enableEstimatedTime="enableEstimatedTime"
                             v-model:project="timeEntry.project_id"
                             v-model:task="
                                 timeEntry.task_id

resources/js/Components/TimeTracker.vue

@@ -24,6 +24,8 @@ import type {
 import TimeTrackerRunningInDifferentOrganizationOverlay from '@/packages/ui/src/TimeTracker/TimeTrackerRunningInDifferentOrganizationOverlay.vue';
 import { useClientsStore } from '@/utils/useClients';
 import { getOrganizationCurrencyString } from '@/utils/money';
+import { isAllowedToPerformPremiumAction } from '@/utils/billing';
+import { canCreateProjects } from '@/utils/permissions';
 
 const page = usePage<{
     auth: {
@@ -111,6 +113,8 @@ const { tags } = storeToRefs(useTagsStore());
 
         <TimeTrackerControls
             :createProject
+            :enableEstimatedTime="isAllowedToPerformPremiumAction()"
+            :canCreateProject="canCreateProjects()"
             :createClient
             :clients
             :tags

resources/js/Pages/Projects.vue

@@ -22,6 +22,7 @@ import type {
 import { getOrganizationCurrencyString } from '@/utils/money';
 import { getCurrentRole } from '@/utils/useUser';
 import { useOrganizationStore } from '@/utils/useOrganization';
+import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 
 onMounted(() => {
     useProjectsStore().fetchProjects();
@@ -94,6 +95,7 @@ const showBillableRate = computed(() => {
             </SecondaryButton>
             <ProjectCreateModal
                 :createProject
+                :enableEstimatedTime="isAllowedToPerformPremiumAction"
                 :createClient
                 :currency="getOrganizationCurrencyString()"
                 :clients="clients"

resources/js/Pages/ReportingDetailed.vue

@@ -64,7 +64,9 @@ import {
 import { useQuery, useQueryClient } from '@tanstack/vue-query';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { useTimeEntriesStore } from '@/utils/useTimeEntries';
-import TimeEntryMassActionRow from '@/Components/Common/TimeEntry/TimeEntryMassActionRow.vue';
+import TimeEntryMassActionRow from '@/packages/ui/src/TimeEntry/TimeEntryMassActionRow.vue';
+import { isAllowedToPerformPremiumAction } from '@/utils/billing';
+import { canCreateProjects } from '@/utils/permissions';
 
 const startDate = useSessionStorage<string>(
     'reporting-start-date',
@@ -118,7 +120,8 @@ function getFilterAttributes() {
 const currentTimeEntryStore = useCurrentTimeEntryStore();
 const { currentTimeEntry } = storeToRefs(currentTimeEntryStore);
 const { setActiveState, startLiveTimer } = currentTimeEntryStore;
-const { createTimeEntry, updateTimeEntry } = useTimeEntriesStore();
+const { createTimeEntry, updateTimeEntry, updateTimeEntries } =
+    useTimeEntriesStore();
 
 const { tags } = storeToRefs(useTagsStore());
 
@@ -338,25 +341,42 @@ async function clearSelectionAndState() {
         </div>
         <TimeEntryMassActionRow
             :selected-time-entries="selectedTimeEntries"
+            :canCreateProject="canCreateProjects()"
+            :enableEstimatedTime="isAllowedToPerformPremiumAction()"
             @submit="clearSelectionAndState"
             :delete-selected="deleteSelected"
             @select-all="selectedTimeEntries = [...timeEntries]"
             @unselect-all="selectedTimeEntries = []"
-            :all-selected="
-                selectedTimeEntries.length === timeEntries.length
-            "></TimeEntryMassActionRow>
+            :all-selected="selectedTimeEntries.length === timeEntries.length"
+            :projects="projects"
+            :tasks="tasks"
+            :tags="tags"
+            :currency="getOrganizationCurrencyString()"
+            :clients="clients"
+            :update-time-entries="
+                (args) =>
+                    updateTimeEntries(
+                        selectedTimeEntries.map((timeEntry) => timeEntry.id),
+                        args
+                    )
+            "
+            :create-project="createProject"
+            :create-client="createClient"
+            :createTag="createTag"></TimeEntryMassActionRow>
         <div class="w-full relative">
             <div v-for="entry in timeEntries" :key="entry.id">
                 <TimeEntryRow
                     :selected="selectedTimeEntries.includes(entry)"
                     @selected="selectedTimeEntries.push(entry)"
+                    :canCreateProject="canCreateProjects()"
                     @unselected="
                         selectedTimeEntries = selectedTimeEntries.filter(
                             (item) => item.id !== entry.id
                         )
                     "
                     :createClient
                     :createProject
+                    :enableEstimatedTime="isAllowedToPerformPremiumAction()"
                     :projects="projects"
                     :tasks="tasks"
                     :tags="tags"

resources/js/Pages/Time.vue

@@ -26,14 +26,20 @@ import { useTagsStore } from '@/utils/useTags';
 import { useClientsStore } from '@/utils/useClients';
 import TimeEntryCreateModal from '@/Components/Common/TimeEntry/TimeEntryCreateModal.vue';
 import { getOrganizationCurrencyString } from '@/utils/money';
-import TimeEntryMassActionRow from '@/Components/Common/TimeEntry/TimeEntryMassActionRow.vue';
+import TimeEntryMassActionRow from '@/packages/ui/src/TimeEntry/TimeEntryMassActionRow.vue';
+import type { UpdateMultipleTimeEntriesChangeset } from '@/packages/api/src';
+import { isAllowedToPerformPremiumAction } from '@/utils/billing';
+import { canCreateProjects } from '@/utils/permissions';
 
 const timeEntriesStore = useTimeEntriesStore();
 const { timeEntries, allTimeEntriesLoaded } = storeToRefs(timeEntriesStore);
 const { updateTimeEntry, fetchTimeEntries, createTimeEntry } =
     useTimeEntriesStore();
 
-async function updateTimeEntries(ids: string[], changes: Partial<TimeEntry>) {
+async function updateTimeEntries(
+    ids: string[],
+    changes: UpdateMultipleTimeEntriesChangeset
+) {
     await useTimeEntriesStore().updateTimeEntries(ids, changes);
     fetchTimeEntries();
 }
@@ -114,6 +120,7 @@ function deleteSelected() {
 
 <template>
     <TimeEntryCreateModal
+        :enableEstimatedTime="isAllowedToPerformPremiumAction()"
         v-model:show="showManualTimeEntryModal"></TimeEntryCreateModal>
     <AppLayout title="Dashboard" data-testid="time_view">
         <MainContainer
@@ -135,14 +142,33 @@ function deleteSelected() {
         </MainContainer>
         <TimeEntryMassActionRow
             :selected-time-entries="selectedTimeEntries"
+            :enableEstimatedTime="isAllowedToPerformPremiumAction()"
+            :canCreateProject="canCreateProjects()"
             @submit="clearSelectionAndState"
             :all-selected="selectedTimeEntries.length === timeEntries.length"
             @select-all="selectedTimeEntries = [...timeEntries]"
             @unselect-all="selectedTimeEntries = []"
-            :delete-selected="deleteSelected"></TimeEntryMassActionRow>
+            :delete-selected="deleteSelected"
+            :projects="projects"
+            :tasks="tasks"
+            :tags="tags"
+            :currency="getOrganizationCurrencyString()"
+            :clients="clients"
+            :update-time-entries="
+                (args) =>
+                    updateTimeEntries(
+                        selectedTimeEntries.map((timeEntry) => timeEntry.id),
+                        args
+                    )
+            "
+            :create-project="createProject"
+            :create-client="createClient"
+            :createTag="createTag"></TimeEntryMassActionRow>
         <TimeEntryGroupedTable
             v-model:selected="selectedTimeEntries"
             :createProject
+            :enableEstimatedTime="isAllowedToPerformPremiumAction()"
+            :canCreateProject="canCreateProjects()"
             :clients
             :createClient
             :updateTimeEntry

resources/js/packages/api/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@solidtime/api",
-    "version": "0.0.3",
+    "version": "0.0.4",
     "description": "Package containing the solidtime api client and type declarations",
     "main": "./dist/solidtime-api.umd.cjs",
     "module": "./dist/solidtime-api.js",

resources/js/packages/ui/package.json

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

resources/js/packages/ui/src/Project/ProjectCreateModal.vue

@@ -19,7 +19,6 @@ import EstimatedTimeSection from '@/packages/ui/src/EstimatedTimeSection.vue';
 import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
 import ProjectEditBillableSection from '@/packages/ui/src/Project/ProjectEditBillableSection.vue';
 import type { Client } from '@/packages/api/src';
-import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 
 const show = defineModel('show', { default: false });
 const saving = ref(false);
@@ -29,6 +28,7 @@ const props = defineProps<{
     createProject: (project: CreateProjectBody) => Promise<Project | undefined>;
     createClient: (client: CreateClientBody) => Promise<Client | undefined>;
     currency: string;
+    enableEstimatedTime: boolean;
 }>();
 
 const activeClients = computed(() => {
@@ -138,7 +138,7 @@ const currentClientName = computed(() => {
                 </div>
                 <div>
                     <EstimatedTimeSection
-                        v-if="isAllowedToPerformPremiumAction()"
+                        v-if="enableEstimatedTime"
                         @submit="submit()"
                         v-model="project.estimated_time"></EstimatedTimeSection>
                 </div>

resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue

@@ -39,6 +39,8 @@ const props = defineProps<{
     deleteTimeEntries: (timeEntries: TimeEntry[]) => void;
     currency: string;
     selectedTimeEntries: TimeEntry[];
+    enableEstimatedTime: boolean;
+    canCreateProject: boolean;
 }>();
 const emit = defineEmits<{
     selected: [TimeEntry[]];
@@ -120,11 +122,13 @@ function onSelectChange(event: Event) {
                             :clients
                             :createProject
                             :createClient
+                            :canCreateProject
                             :projects="projects"
                             :tasks="tasks"
                             :showBadgeBorder="false"
                             @changed="updateProjectAndTask"
                             :project="timeEntry.project_id"
+                            :enableEstimatedTime
                             :currency="currency"
                             :task="
                                 timeEntry.task_id
@@ -174,6 +178,8 @@ function onSelectChange(event: Event) {
             class="w-full border-t border-default-background-separator bg-black/15">
             <TimeEntryRow
                 :projects="projects"
+                :enableEstimatedTime
+                :canCreateProject
                 :tasks="tasks"
                 :selected="
                     !!selectedTimeEntries.find(

resources/js/packages/ui/src/TimeEntry/TimeEntryGroupedTable.vue

@@ -37,6 +37,8 @@ const props = defineProps<{
     createProject: (project: CreateProjectBody) => Promise<Project | undefined>;
     createClient: (client: CreateClientBody) => Promise<Client | undefined>;
     currency: string;
+    enableEstimatedTime: boolean;
+    canCreateProject: boolean;
 }>();
 
 const groupedTimeEntries = computed(() => {
@@ -160,6 +162,8 @@ function unselectAllTimeEntries(value: TimeEntriesGroupedByType[]) {
         <template v-for="entry in value" :key="entry.id">
             <TimeEntryAggregateRow
                 :createProject
+                :canCreateProject
+                :enableEstimatedTime
                 :selected-time-entries="selectedTimeEntries"
                 @selected="
                     (timeEntries) => {
@@ -194,6 +198,8 @@ function unselectAllTimeEntries(value: TimeEntriesGroupedByType[]) {
                 :time-entry="entry"></TimeEntryAggregateRow>
             <TimeEntryRow
                 :createClient
+                :enableEstimatedTime
+                :canCreateProject
                 :createProject
                 :projects="projects"
                 :selected="

resources/js/Components/Common/TimeEntry/TimeEntryMassActionRow.vue → resources/js/packages/ui/src/TimeEntry/TimeEntryMassActionRow.vue

@@ -1,8 +1,17 @@
 <script setup lang="ts">
 import MainContainer from '@/packages/ui/src/MainContainer.vue';
 import { PencilSquareIcon, TrashIcon } from '@heroicons/vue/20/solid';
-import TimeEntryMassUpdateModal from '@/Components/Common/TimeEntry/TimeEntryMassUpdateModal.vue';
-import type { TimeEntry } from '@/packages/api/src';
+import TimeEntryMassUpdateModal from '@/packages/ui/src/TimeEntry/TimeEntryMassUpdateModal.vue';
+import type {
+    Client,
+    CreateClientBody,
+    CreateProjectBody,
+    Project,
+    Tag,
+    Task,
+    TimeEntry,
+    UpdateMultipleTimeEntriesChangeset,
+} from '@/packages/api/src';
 import { ref } from 'vue';
 import { twMerge } from 'tailwind-merge';
 import { Checkbox, InputLabel } from '@/packages/ui/src';
@@ -12,6 +21,19 @@ const props = defineProps<{
     deleteSelected: () => void;
     class?: string;
     allSelected: boolean;
+    projects: Project[];
+    tasks: Task[];
+    tags: Tag[];
+    clients: Client[];
+    createTag: (name: string) => Promise<Tag | undefined>;
+    createProject: (project: CreateProjectBody) => Promise<Project | undefined>;
+    createClient: (client: CreateClientBody) => Promise<Client | undefined>;
+    updateTimeEntries: (
+        changeset: UpdateMultipleTimeEntriesChangeset
+    ) => Promise<void>;
+    currency: string;
+    enableEstimatedTime: boolean;
+    canCreateProject: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -25,6 +47,17 @@ const showMassUpdateModal = ref(false);
 
 <template>
     <TimeEntryMassUpdateModal
+        :projects
+        :tasks
+        :tags
+        :clients
+        :createTag
+        :createProject
+        :createClient
+        :updateTimeEntries
+        :enableEstimatedTime
+        :canCreateProject
+        :currency
         :time-entries="selectedTimeEntries"
         @submit="emit('submit')"
         v-model:show="showMassUpdateModal"></TimeEntryMassUpdateModal>