Merge pull request #7 from solidtime-io/feature/manual_time_entry

add manual time entry modal

Author: Onatcer

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "solidtime",
-    "version": "0.0.38",
+    "version": "0.0.39",
     "description": "Desktop App for solidtime - the modern open-source time tracker",
     "main": "./out/main/index.js",
     "author": "solidtime.io",
@@ -34,7 +34,7 @@
         "@sentry/electron": "^5.3.0",
         "@sentry/vite-plugin": "^2.22.2",
         "@solidtime/api": "^0.0.4",
-        "@solidtime/ui": "^0.0.9",
+        "@solidtime/ui": "^0.0.11",
         "electron-updater": "^6.1.7"
     },
     "devDependencies": {

package.json

@@ -6,7 +6,8 @@ export function initializeMainWindow(icon: string) {
         width: 800,
         minWidth: 400,
         trafficLightPosition: { x: 15, y: 15 },
-        height: 600,
+        minHeight: 400,
+        height: 800,
         show: false,
         backgroundColor: '#0f1011',
         titleBarStyle: process.platform === 'darwin' ? 'hidden' : 'default',

src/main/mainWindow.ts

@@ -7,6 +7,8 @@ import {
     TimeTrackerControls,
     TimeTrackerRunningInDifferentOrganizationOverlay,
     TimeEntryMassActionRow,
+    TimeEntryCreateModal,
+    MoreOptionsDropdown,
 } from '@solidtime/ui'
 import {
     emptyTimeEntry,
@@ -35,7 +37,7 @@ import { getAllTags, useTagCreateMutation } from '../utils/tags.ts'
 import { LoadingSpinner } from '@solidtime/ui'
 
 import { useLiveTimer } from '../utils/liveTimer.ts'
-import { ClockIcon } from '@heroicons/vue/20/solid'
+import { ClockIcon, PlusIcon } from '@heroicons/vue/20/solid'
 import { CardTitle } from '@solidtime/ui'
 import { useStorage } from '@vueuse/core'
 import { currentMembershipId, useMyMemberships } from '../utils/myMemberships.ts'
@@ -139,6 +141,14 @@ function createTimeEntry(timeEntry: Omit<CreateTimeEntryBody, 'member_id'>) {
     timeEntryCreate.mutate(updatedTimeEntry)
 }
 
+function createManualTimeEntry(timeEntry: Omit<CreateTimeEntryBody, 'member_id'>) {
+    const updatedTimeEntry = {
+        ...timeEntry,
+        member_id: currentMembershipId.value,
+    } as CreateTimeEntryBody
+    timeEntryCreate.mutate(updatedTimeEntry)
+}
+
 async function createTag(newTagName: string): Promise<Tag | undefined> {
     const { data, mutateAsync } = tagCreate
     await mutateAsync({ name: newTagName })
@@ -296,44 +306,70 @@ const canCreateProjects = computed(() => {
     }
     return false
 })
+
+const showManualTimeEntryModal = ref(false)
 </script>
 
 <template>
     <div class="h-[calc(100vh-40px)]">
         <div
             v-if="timeEntries && projects && tasks && tags && clients"
             class="flex flex-col h-full">
-            <div
-                class="px-4 pb-4 pt-2 border-b border-border-primary bg-primary z-10 w-full top-0 left-0">
-                <CardTitle title="Time Tracker" :icon="ClockIcon as Component"></CardTitle>
-                <div class="relative">
-                    <TimeTrackerRunningInDifferentOrganizationOverlay
-                        v-if="
-                            currentTimeEntry.organization_id &&
-                            currentTimeEntry.organization_id !== currentOrganizationId
-                        "
-                        @switch-organization="
-                            switchOrganization
-                        "></TimeTrackerRunningInDifferentOrganizationOverlay>
-                    <TimeTrackerControls
-                        v-model:currentTimeEntry="currentTimeEntry"
-                        v-model:liveTimer="liveTimer"
-                        :tags
+            <div class="flex">
+                <div
+                    class="pl-4 pb-4 pt-2 border-b border-border-primary bg-primary z-10 w-full top-0 left-0">
+                    <CardTitle title="Time Tracker" :icon="ClockIcon as Component"></CardTitle>
+                    <div class="relative">
+                        <TimeTrackerRunningInDifferentOrganizationOverlay
+                            v-if="
+                                currentTimeEntry.organization_id &&
+                                currentTimeEntry.organization_id !== currentOrganizationId
+                            "
+                            @switch-organization="
+                                switchOrganization
+                            "></TimeTrackerRunningInDifferentOrganizationOverlay>
+                        <TimeTrackerControls
+                            v-model:currentTimeEntry="currentTimeEntry"
+                            v-model:liveTimer="liveTimer"
+                            :tags
+                            :enableEstimatedTime="false"
+                            :canCreateProject="canCreateProjects"
+                            :createProject
+                            :createClient
+                            :tasks
+                            :clients
+                            :projects
+                            :createTag
+                            :isActive
+                            :currency
+                            @start-live-timer="startLiveTimer"
+                            @stop-live-timer="stopLiveTimer"
+                            @start-timer="startTimer"
+                            @stop-timer="stopTimer"
+                            @update-time-entry="updateCurrentTimeEntry"></TimeTrackerControls>
+                    </div>
+                </div>
+                <div class="flex justify-center items-center pt-8 group pr-4">
+                    <MoreOptionsDropdown label="More Time Entry Options">
+                        <button
+                            aria-label="Create Manual time entry"
+                            class="flex items-center space-x-3 rounded w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+                            @click="showManualTimeEntryModal = true">
+                            <PlusIcon class="w-5 text-icon-active"></PlusIcon>
+                            <span>Create Manual Time Entry</span>
+                        </button>
+                    </MoreOptionsDropdown>
+                    <TimeEntryCreateModal
+                        v-model:show="showManualTimeEntryModal"
                         :enableEstimatedTime="false"
-                        :canCreateProject="canCreateProjects"
-                        :createProject
-                        :createClient
-                        :tasks
-                        :clients
+                        :createProject="createProject"
+                        :createClient="createClient"
+                        :createTag="createTag"
+                        :createTimeEntry="createManualTimeEntry"
                         :projects
-                        :createTag
-                        :isActive
-                        :currency
-                        @start-live-timer="startLiveTimer"
-                        @stop-live-timer="stopLiveTimer"
-                        @start-timer="startTimer"
-                        @stop-timer="stopTimer"
-                        @update-time-entry="updateCurrentTimeEntry"></TimeTrackerControls>
+                        :tasks
+                        :tags
+                        :clients></TimeEntryCreateModal>
                 </div>
             </div>
             <div class="overflow-y-scroll w-full flex-1">