refactor tag components and tagCreate events, change global week_start and timezone settings, fix pie charts

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import MainContainer from '@/Pages/MainContainer.vue';
 import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
-import type { Project, Task, TimeEntry } from '@/utils/api';
+import type { Project, Tag, Task, TimeEntry } from '@/utils/api';
 import TimeEntryDescriptionInput from '@/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue';
 import { type TimeEntriesGroupedByType } from '@/utils/useTimeEntries';
 import TimeEntryRowTagDropdown from '@/Components/Common/TimeEntry/TimeEntryRowTagDropdown.vue';
@@ -20,45 +20,42 @@ const props = defineProps<{
     timeEntry: TimeEntriesGroupedByType;
     projects: Project[];
     tasks: Task[];
+    tags: Tag[];
 }>();
 
 const emit = defineEmits<{
     onStartStopClick: [timeEntry: TimeEntry];
     updateTimeEntries: [timeEntries: TimeEntry[]];
     deleteTimeEntries: [timeEntries: TimeEntry[]];
+    createTag: [name: string, callback: (tag: Tag) => void];
 }>();
 
 function updateTimeEntryDescription(description: string) {
-    const timeEntries = props.timeEntry.timeEntries;
-    timeEntries.forEach((entry) => {
-        entry.description = description;
+    const updatedTimeEntries = props.timeEntry.timeEntries.map((entry) => {
+        return { ...entry, description };
     });
-    emit('updateTimeEntries', timeEntries);
+    emit('updateTimeEntries', updatedTimeEntries);
 }
 
 function updateTimeEntryTags(tags: string[]) {
-    const timeEntries = props.timeEntry.timeEntries as TimeEntry[];
-    timeEntries.forEach((entry) => {
-        entry.tags = tags;
+    const updatedTimeEntries = props.timeEntry.timeEntries.map((entry) => {
+        return { ...entry, tags };
     });
-    emit('updateTimeEntries', timeEntries);
+    emit('updateTimeEntries', updatedTimeEntries);
 }
 
 function updateTimeEntryBillable(billable: boolean) {
-    const timeEntries = props.timeEntry.timeEntries as TimeEntry[];
-    timeEntries.forEach((entry) => {
-        entry.billable = billable;
+    const updatedTimeEntries = props.timeEntry.timeEntries.map((entry) => {
+        return { ...entry, billable };
     });
-    emit('updateTimeEntries', timeEntries);
+    emit('updateTimeEntries', updatedTimeEntries);
 }
 
 function updateProjectAndTask(projectId: string, taskId: string) {
-    const timeEntries = props.timeEntry.timeEntries as TimeEntry[];
-    timeEntries.forEach((entry) => {
-        entry.project_id = projectId;
-        entry.task_id = taskId;
+    const updatedTimeEntries = props.timeEntry.timeEntries.map((entry) => {
+        return { ...entry, project_id: projectId, task_id: taskId };
     });
-    emit('updateTimeEntries', timeEntries);
+    emit('updateTimeEntries', updatedTimeEntries);
 }
 
 const expanded = ref(false);
@@ -96,8 +93,10 @@ const expanded = ref(false);
                             timeEntry.task_id
                         "></TimeTrackerProjectTaskDropdown>
                 </div>
-                <div class="flex items-center font-medium space-x-2">
+                <div class="flex items-center font-medium lg:space-x-2">
                     <TimeEntryRowTagDropdown
+                        @createTag="(...args) => emit('createTag', ...args)"
+                        :tags="tags"
                         @changed="updateTimeEntryTags"
                         :modelValue="timeEntry.tags"></TimeEntryRowTagDropdown>
                     <BillableToggleButton
@@ -109,7 +108,7 @@ const expanded = ref(false);
                     <div class="flex-1">
                         <button
                             @click="expanded = !expanded"
-                            class="text-muted w-[110px] px-2 py-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium">
+                            class="hidden lg:block text-muted w-[110px] px-2 py-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium">
                             {{ formatStartEnd(timeEntry.start, timeEntry.end) }}
                         </button>
                     </div>
@@ -138,12 +137,12 @@ const expanded = ref(false);
             <TimeEntryRow
                 :projects="projects"
                 :tasks="tasks"
+                :tags="tags"
                 indent
-                @updateTimeEntry="
-                    (timeEntry) => emit('updateTimeEntries', [timeEntry])
-                "
+                @updateTimeEntry="(arg) => emit('updateTimeEntries', [arg])"
                 @onStartStopClick="emit('onStartStopClick', subEntry)"
                 @deleteTimeEntry="emit('deleteTimeEntries', [subEntry])"
+                @createTag="(...args) => emit('createTag', ...args)"
                 :key="subEntry.id"
                 v-for="subEntry in timeEntry.timeEntries"
                 :time-entry="subEntry"></TimeEntryRow>

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

@@ -16,6 +16,8 @@ import { getDayJsInstance, getLocalizedDayJs } from '@/utils/time';
 import { storeToRefs } from 'pinia';
 import { useTasksStore } from '@/utils/useTasks';
 import { useProjectsStore } from '@/utils/useProjects';
+import { useTagsStore } from '@/utils/useTags';
+import type { Tag } from '@/utils/api';
 const projectStore = useProjectsStore();
 const { projects } = storeToRefs(projectStore);
 const taskStore = useTasksStore();
@@ -72,6 +74,13 @@ async function submit() {
     localEnd.value = getLocalizedDayJs(timeEntryDefaultValues.end).format();
     show.value = false;
 }
+const { tags } = storeToRefs(useTagsStore());
+async function createTag(tag: string, callback: (tag: Tag) => void) {
+    const newTag = await useTagsStore().createTag(tag);
+    if (newTag !== undefined) {
+        callback(newTag);
+    }
+}
 </script>
 
 <template>
@@ -108,6 +117,8 @@ async function submit() {
                     </div>
                     <div class="flex items-center space-x-2 px-4">
                         <TimeTrackerTagDropdown
+                            :tags="tags"
+                            @createTag="createTag"
                             v-model="timeEntry.tags"></TimeTrackerTagDropdown>
                         <BillableToggleButton
                             v-model="timeEntry.billable"></BillableToggleButton>

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

@@ -25,7 +25,7 @@ const displaysPlaceholder = computed(() => {
 
 <template>
     <div>
-        <div class="relative text-sm font-medium p">
+        <div class="relative text-sm font-medium">
             <div
                 :class="[
                     'opacity-0 py-2 text-base whitespace-pre pl-3 pr-1',
@@ -40,7 +40,7 @@ const displaysPlaceholder = computed(() => {
                 @input="onInput"
                 @keydown.enter="onChange"
                 placeholder="Add a description"
-                class="absolute px-0 h-full pl-3 pr-1 left-0 top-0 w-full text-white font-medium bg-transparent focus-visible:ring-0 rounded-lg border-0" />
+                class="absolute px-0 h-full pl-3 pr-1 left-0 top-0 w-full text-sm lg:text-base text-white font-medium bg-transparent focus-visible:ring-0 rounded-lg border-0" />
         </div>
     </div>
 </template>

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

@@ -1,23 +1,32 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import type { Project, Task, TimeEntry } from '@/utils/api';
+import type {
+    CreateTimeEntryBody,
+    Project,
+    Tag,
+    Task,
+    TimeEntry,
+} from '@/utils/api';
 import { getDayJsInstance, getLocalizedDateFromTimestamp } from '@/utils/time';
 import type { TimeEntriesGroupedByType } from '@/utils/useTimeEntries';
 import TimeEntryAggregateRow from '@/Components/Common/TimeEntry/TimeEntryAggregateRow.vue';
 import TimeEntryRowHeading from '@/Components/Common/TimeEntry/TimeEntryRowHeading.vue';
 import TimeEntryRow from '@/Components/Common/TimeEntry/TimeEntryRow.vue';
+import dayjs from 'dayjs';
 
 const props = defineProps<{
     timeEntries: TimeEntry[];
     projects: Project[];
     tasks: Task[];
+    tags: Tag[];
 }>();
 
 const emit = defineEmits<{
     updateTimeEntry: [entry: TimeEntry];
     updateTimeEntries: [entries: TimeEntry[]];
     deleteTimeEntries: [entries: TimeEntry[]];
-    onStartStopClick: [entry: TimeEntry];
+    createTimeEntry: [entry: Omit<CreateTimeEntryBody, 'member_id'>];
+    createTag: [name: string, callback: (tag: Tag) => void];
 }>();
 
 const groupedTimeEntries = computed(() => {
@@ -85,6 +94,17 @@ const groupedTimeEntries = computed(() => {
     }
     return groupedEntriesByDayAndType;
 });
+
+function startTimeEntryFromExisting(entry: TimeEntry) {
+    emit('createTimeEntry', {
+        project_id: entry.project_id,
+        task_id: entry.task_id,
+        start: dayjs().utc().format(),
+        end: null,
+        billable: entry.billable,
+        description: entry.description,
+    });
+}
 </script>
 
 <template>
@@ -94,16 +114,20 @@ const groupedTimeEntries = computed(() => {
             <TimeEntryAggregateRow
                 :projects="projects"
                 :tasks="tasks"
-                @onStartStopClick="(arg) => emit('onStartStopClick', arg)"
+                :tags="tags"
+                @onStartStopClick="startTimeEntryFromExisting(entry)"
                 @updateTimeEntries="(arg) => emit('updateTimeEntries', arg)"
                 @deleteTimeEntries="(arg) => emit('deleteTimeEntries', arg)"
+                @createTag="(...args) => emit('createTag', ...args)"
                 v-if="'timeEntries' in entry && entry.timeEntries.length > 1"
                 :time-entry="entry"></TimeEntryAggregateRow>
             <TimeEntryRow
                 :projects="projects"
                 :tasks="tasks"
+                :tags="tags"
+                @createTag="(...args) => emit('createTag', ...args)"
                 @updateTimeEntry="(arg) => emit('updateTimeEntry', arg)"
-                @onStartStopClick="() => emit('onStartStopClick', entry)"
+                @onStartStopClick="startTimeEntryFromExisting(entry)"
                 @deleteTimeEntry="() => emit('deleteTimeEntries', [entry])"
                 v-else
                 :time-entry="entry"></TimeEntryRow>

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

@@ -2,7 +2,7 @@
 import MainContainer from '@/Pages/MainContainer.vue';
 import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
 import TimeEntryRangeSelector from '@/Components/Common/TimeEntry/TimeEntryRangeSelector.vue';
-import type { Project, Task, TimeEntry } from '@/utils/api';
+import type { Project, Tag, Task, TimeEntry } from '@/utils/api';
 import TimeEntryDescriptionInput from '@/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue';
 import TimeEntryRowTagDropdown from '@/Components/Common/TimeEntry/TimeEntryRowTagDropdown.vue';
 import TimeEntryRowDurationInput from '@/Components/Common/TimeEntry/TimeEntryRowDurationInput.vue';
@@ -15,12 +15,14 @@ const props = defineProps<{
     indent?: boolean;
     projects: Project[];
     tasks: Task[];
+    tags: Tag[];
 }>();
 
 const emit = defineEmits<{
     onStartStopClick: [];
     deleteTimeEntry: [];
     updateTimeEntry: [timeEntry: TimeEntry];
+    createTag: [name: string, callback: (tag: Tag) => void];
 }>();
 
 function updateTimeEntryDescription(description: string) {
@@ -53,13 +55,15 @@ function updateProjectAndTask(projectId: string, taskId: string) {
         class="border-b border-default-background-separator transition"
         data-testid="time_entry_row">
         <MainContainer>
-            <div class="sm:flex py-1.5 items-center justify-between group">
+            <div
+                class="sm:flex py-1 lg:py-1.5 items-center justify-between group">
                 <div class="flex space-x-1 items-center">
                     <input
                         type="checkbox"
                         class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
                     <div class="w-7 h-7" v-if="indent === true"></div>
                     <TimeEntryDescriptionInput
+                        class="flex-1 max-w-[220px] md:max-w-[400px] text-ellipsis overflow-ellipsis"
                         @changed="updateTimeEntryDescription"
                         :modelValue="
                             timeEntry.description
@@ -74,9 +78,11 @@ function updateProjectAndTask(projectId: string, taskId: string) {
                             timeEntry.task_id
                         "></TimeTrackerProjectTaskDropdown>
                 </div>
-                <div class="flex items-center font-medium space-x-2">
+                <div class="flex items-center font-medium lg:space-x-2">
                     <TimeEntryRowTagDropdown
                         @changed="updateTimeEntryTags"
+                        @createTag="(...args) => emit('createTag', ...args)"
+                        :tags="tags"
                         :modelValue="timeEntry.tags"></TimeEntryRowTagDropdown>
                     <BillableToggleButton
                         :modelValue="timeEntry.billable"
@@ -86,6 +92,7 @@ function updateProjectAndTask(projectId: string, taskId: string) {
                         "></BillableToggleButton>
                     <div class="flex-1">
                         <TimeEntryRangeSelector
+                            class="hidden lg:block"
                             :start="timeEntry.start"
                             :end="timeEntry.end"
                             @changed="

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

@@ -8,7 +8,7 @@ defineProps<{
 
 <template>
     <div
-        class="bg-card-background border-t border-b border-card-border py-1.5 text-xs sm:text-sm">
+        class="bg-card-background border-t border-b border-card-border py-1 lg:py-1.5 text-xs sm:text-sm">
         <MainContainer>
             <DaySectionHeader :date></DaySectionHeader>
         </MainContainer>

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

@@ -3,23 +3,30 @@ import TagDropdown from '@/Components/Common/Tag/TagDropdown.vue';
 import { computed } from 'vue';
 import TagBadge from '@/Components/Common/Tag/TagBadge.vue';
 import type { Tag } from '@/utils/api';
-import { useTagsStore } from '@/utils/useTags';
-import { storeToRefs } from 'pinia';
 
-const tagsStore = useTagsStore();
-const { tags } = storeToRefs(tagsStore);
-const emit = defineEmits(['changed']);
+const props = defineProps<{
+    tags: Tag[];
+}>();
+
+const emit = defineEmits<{
+    createTag: [name: string, callback: (tag: Tag) => void];
+    changed: [model: string[]];
+}>();
+
 const model = defineModel<string[]>({
     default: [],
 });
 
 const timeEntryTags = computed<Tag[]>(() => {
-    return tags.value.filter((tag) => model.value.includes(tag.id));
+    return props.tags.filter((tag) => model.value.includes(tag.id));
 });
 </script>
-
 <template>
-    <TagDropdown @changed="emit('changed', model)" v-model="model">
+    <TagDropdown
+        :tags="tags"
+        @createTag="(...args) => emit('createTag', ...args)"
+        @changed="emit('changed', model)"
+        v-model="model">
         <template #trigger>
             <button
                 data-testid="time_entry_tag_dropdown"