Automatically create subjects when fetching time entries.

manud99 · Sep 2, 2023 · 3dd1cf7 · 3dd1cf7
1 parent 5fd7a40
commit 3dd1cf7
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 18 deletions.
diff --git a/src/google/query.ts b/src/google/query.ts
@@ -18,14 +18,19 @@ export async function fetchUserInfo(): Promise<any> {
     const response = await makeRequest(
         "https://people.googleapis.com/v1/people/me",
         "GET",
-        { personFields: "names,emailAddresses" },
+        { personFields: "names,emailAddresses", fields: "names(displayName),emailAddresses(value)" },
         null
     );
     return response?.result || null;
 }
 
 export async function fetchCalendars(): Promise<gapi.client.calendar.Calendar[]> {
-    const response = await makeRequest("https://www.googleapis.com/calendar/v3/users/me/calendarList", "GET", {}, null);
+    const response = await makeRequest(
+        "https://www.googleapis.com/calendar/v3/users/me/calendarList",
+        "GET",
+        { fields: "items(id,summary)" },
+        null
+    );
     return response ? response.result.items : [];
 }
 
@@ -39,6 +44,8 @@ export async function fetchEvents(calendarId: string, start: string, end: string
             timeZone: "UTC",
             singleEvents: true,
             orderBy: "startTime",
+            fields: "items(id,summary,start,end)",
+            maxResults: 2500,
         },
         null
     );

diff --git a/src/google/utils.ts b/src/google/utils.ts
@@ -22,7 +22,6 @@ export function signOut() {
     }
 
     const accessToken = window.gapi.auth.getToken().access_token;
-    console.log("accessToken", accessToken);
 
     if (!accessToken) return;
     google.accounts.oauth2.revoke(window.gapi.auth.getToken().access_token, () => {

diff --git a/src/modals/EditSubjectModal.vue b/src/modals/EditSubjectModal.vue
@@ -37,8 +37,8 @@ const emit = defineEmits<{
 
 watch(show, async (val) => {
     if (!val) return;
-    name.value = subject.value ? subject.value?.name! : "";
-    color.value = subject.value ? subject.value?.color!.toString(10) : "";
+    name.value = subject.value ? subject.value.name : "";
+    color.value = subject.value && subject.value.color ? subject.value.color.toString(10) : "";
     isActive.value = subject.value ? subject.value?.isActive! : false;
 });
 

diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Ref } from "vue";
 import { onMounted, ref, watch } from "vue";
-import { TimeEntry } from "../@types/models";
+import { Subject, TimeEntry } from "../@types/models";
 import { getCalendarId } from "../utils/settings";
 import Page from "../blocks/Page.vue";
 import Section from "../blocks/Section.vue";
@@ -32,6 +32,8 @@ import {
 } from "../utils/timeEntries";
 import { ready } from "../google/plugin";
 import { getQueryParam, updateQueryParam } from "../utils/queryParams";
+import EditSubjectModal from "../modals/EditSubjectModal.vue";
+import { updateSubject } from "../utils/subjects";
 
 const fields: Field[] = [
     {
@@ -77,7 +79,7 @@ function changeWeek(addDays: number) {
     getTimeEntries();
 }
 
-// Show various modals
+// Show time entry modal
 const showModal: Ref<boolean> = ref(false);
 const activeTimeEntry: Ref<TimeEntry | null> = ref(null);
 
@@ -91,6 +93,24 @@ function showUpdateModal(timeEntry: TimeEntry) {
     showModal.value = true;
 }
 
+// Show subject modal
+const activeSubject: Ref<Subject | null> = ref(null);
+const showSubjectModal: Ref<boolean> = ref(false);
+
+function editSubject(subject: Subject) {
+    showSubjectModal.value = true;
+    activeSubject.value = subject;
+}
+
+function onUpdateSubject(subject: Subject) {
+    showSubjectModal.value = false;
+    updateSubject(subject);
+    timeEntries.value.forEach((timeEntry) => {
+        if (timeEntry.subject?.name !== subject.name) return;
+        timeEntry.subject = subject;
+    });
+}
+
 onMounted(() => {
     activeTab.value = getQueryParam("tab") || activeTab.value;
     const weekStart = getQueryParam("weekStart");
@@ -149,7 +169,12 @@ if (ready) {
 
                 <Table :fields="fields" :values="timeEntries">
                     <template #cell(subject)="{ entry }">
-                        <SubjectTag v-if="entry.subject" :subject="entry.subject" />
+                        <SubjectTag
+                            v-if="entry.subject"
+                            class="cursor-pointer"
+                            :subject="entry.subject"
+                            @dblclick="editSubject(entry.subject)"
+                        />
                     </template>
                     <template #cell(day)="row"> {{ getDate(row.entry.start) }}</template>
                     <template #cell(time)="row">
@@ -211,4 +236,11 @@ if (ready) {
             }
         "
     />
+
+    <EditSubjectModal
+        :subject="activeSubject"
+        :show="showSubjectModal"
+        @close="showSubjectModal = false"
+        @update="onUpdateSubject"
+    />
 </template>
diff --git a/src/pages/Statistics.vue b/src/pages/Statistics.vue
@@ -115,7 +115,6 @@ const chartHoursPerWeek = computed(() => {
 
     return {
         labels: labels.map((label) => getDate(label)),
-        // datasets: [{ label: "Hours per week", data: totalData }].concat(subjectDatasets),
         datasets: subjectDatasets,
     };
 });
@@ -173,8 +172,8 @@ const lineChartOptions: ChartOptions<"line"> = {
 <template>
     <Page title="Statistik">
         <Section class="bg-white p-4">
-            <div class="flex justify-between items-center">
-                <h2 class="text-xl font-bold mb-4">Stunden pro Woche</h2>
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-bold">Stunden pro Woche</h2>
                 <div>
                     Zeitspanne von
                     <input type="date" v-model="start" :max="end" />

diff --git a/src/utils/subjects.ts b/src/utils/subjects.ts
@@ -29,6 +29,15 @@ export function getSubject(name: string): Subject {
     return { name, color: 0, isActive: true };
 }
 
+export function getOrCreateSubject(name: string): Subject {
+    loadSubjects();
+    const subject = subjects.value.find((record) => record.name === name);
+    if (subject) return subject;
+    const newSubject = { name, color: 0, isActive: true };
+    createSubject(newSubject);
+    return newSubject;
+}
+
 export function getSubjects(): Ref<Subject[]> {
     loadSubjects();
     return subjects;
@@ -39,7 +48,9 @@ export function createSubject(subject: Subject): void {
     storeSubjects();
 }
 
-export function updateSubject(subject: Subject, index: number): void {
+export function updateSubject(subject: Subject, index?: number): void {
+    loadSubjects();
+    index = index || subjects.value.findIndex((record) => record.name === subject.name);
     subjects.value.splice(index, 1, subject);
     storeSubjects();
 }
@@ -130,10 +141,11 @@ export function getSubjectColor(subject: Subject | null): SubjectColorSetting {
     return colorMap[subject.color];
 }
 
-export function parseSubject(subject: string) {
-    const matches = subject.match(/^\[([A-Za-zÀ-ž0-9-_ ]+)\] (.*)$/);
+export function parseSubject(description: string) {
+    const matches = description.match(/^\[([A-Za-zÀ-ž0-9-_ ]+)\] (.*)$/);
     if (!matches) {
-        return { subject: null, description: subject };
+        return { subject: null, description };
     }
-    return { subject: getSubject(matches[1]), description: matches[2] };
+    const subject = getOrCreateSubject(matches[1]);
+    return { subject, description: matches[2] };
 }
diff --git a/src/utils/timeEntries.ts b/src/utils/timeEntries.ts
@@ -23,8 +23,6 @@ export const weekEnd = computed(() => {
 
 export function makeSureCalendarIdExists() {
     if (!calendarId.value) {
-        console.log("Calendar ID is invalid", calendarId.value);
-
         navigate("settings");
         return false;
     }