Merge pull request #41 from manuelsanchezweb/feature/addFormDB

Make several improvements to the calendar

src/components/add-appointment-modal/add-appointment-modal.tsx

@@ -10,6 +10,13 @@ export const AddAppointmentModal = component$(
     isAddAppointmentModalOpen: Signal<boolean>
   }) => {
     const action = useAddAppointment()
+    // Default date for the date input comes form ?day on the url or today
+    const url = new URL(window.location.href)
+    const day = url.searchParams.get('day')
+
+    const defaultOptionForDate = day
+      ? day
+      : new Date().toISOString().split('T')[0]
 
     useOn(
       'click',
@@ -24,6 +31,14 @@ export const AddAppointmentModal = component$(
       })
     )
 
+    useOn(
+      'submit',
+      $(() => {
+        isAddAppointmentModalOpen.value = false
+        document.body.style.overflow = 'auto'
+      })
+    )
+
     return (
       <div>
         <div class="z-10 fixed bg-white inset-0 opacity-70"></div>
@@ -69,12 +84,13 @@ export const AddAppointmentModal = component$(
               id="date"
               type="date"
               class="w-full border border-grayBrandMedium rounded-md px-4 py-2"
+              defaultValue={defaultOptionForDate}
             />
           </div>
 
           {/* time_start and time_end  */}
           <div class="flex flex-col md:flex-row gap-4">
-            <div class="flex flex-col gap-2 mt-2 md:mt-8">
+            <div class="flex flex-col gap-2 mt-2 md:mt-8 flex-1">
               <label
                 for="time_start"
                 class=" text-text text-md md:text-lg font-semibold"
@@ -89,7 +105,7 @@ export const AddAppointmentModal = component$(
                 class="w-full border border-grayBrandMedium rounded-md px-4 py-2"
               />
             </div>
-            <div class="flex flex-col gap-2 mt-2 md:mt-8">
+            <div class="flex flex-col gap-2 mt-2 md:mt-8 flex-1">
               <label
                 for="time_end"
                 class=" text-text text-md md:text-lg font-semibold"
@@ -153,7 +169,7 @@ export const AddAppointmentModal = component$(
                 Cancel
               </button>
               <button
-                class="btn bg-primary text-white mt-2 md:mt-8"
+                class="btn bg-primaryLight text-black mt-2 md:mt-8"
                 type="submit"
               >
                 Save Event

src/components/views/calendar-components/calendar.tsx

@@ -27,6 +27,13 @@ export const Calendar = component$(
 
     const setSelectedDay = $((day: CalendarDay) => {
       selectedDay.value = new Date(day.year, day.month + 1, day.day)
+      // add the ?day=2022-01-01 to the URL without removing the view from the user
+      const url = new URL(window.location.href)
+      url.searchParams.set(
+        'day',
+        `${day.year}-${(day.month + 1).toString().padStart(2, '0')}-${day.day.toString().padStart(2, '0')}`
+      )
+      window.history.pushState({}, '', url.toString())
     })
 
     return (

src/config/index.ts

@@ -1,4 +1,5 @@
 export const IS_LOADING_FROM_BEGINNING = false
+export const IS_ADD_APPOINTMENT_MODAL_OPENED = false
 
 /**
  * List of users

src/global/index.tsx

@@ -4,8 +4,11 @@ import { APP_USERS } from '~/config'
 import { db } from '~/db/db'
 import * as schema from '~/db/schema'
 import { type IUser } from '~/types/types'
-import { getListAvailablePasswords } from '~/utils/functions'
+import { getIdByAuthorName, getListAvailablePasswords } from '~/utils/functions'
 
+/**
+ * Action to submit the password and check if it is correct
+ */
 export const useSubmitPassword = globalAction$(async (data, { cookie }) => {
   const password = data['password'] as string
   const availablePasswords = getListAvailablePasswords(APP_USERS)
@@ -40,17 +43,24 @@ export const useSubmitPassword = globalAction$(async (data, { cookie }) => {
   }
 })
 
-export const useAddAppointment = globalAction$(async () => {
-  const tomorrow = new Date()
-  tomorrow.setDate(tomorrow.getDate() + 1)
+/**
+ * Action to add an appointment
+ */
+export const useAddAppointment = globalAction$(async (data, { cookie }) => {
+  const isFullDay = data['full_day'] === 'on' ? 1 : 0
+
+  const authorName = cookie.get('collabender-user')?.value
+  const authorId = getIdByAuthorName(authorName as string, APP_USERS)
+
+  // TODO: Add validation for the date and time with zod
   const appointment = {
-    title: 'Random appointment',
-    date: tomorrow.toISOString().split('T')[0],
-    time_start: '09:00',
-    time_end: '10:00',
-    full_day: 0,
-    category: 'random',
-    created_by: 1,
+    title: data['title'] as string,
+    date: data['date'] as string,
+    time_start: data['time_start'] as string,
+    time_end: data['time_end'] as string,
+    full_day: isFullDay,
+    category: data['category'] as string,
+    created_by: authorId,
   }
 
   await db.insert(schema.appointmentsTable).values(appointment)

src/routes/index.tsx

@@ -22,6 +22,7 @@ import { getAppointments, getUsers } from '~/db/queries'
 import { LoginForm } from '~/components/login-form/login-form'
 import { Footer } from '~/components/footer/footer'
 import { AddAppointmentModal } from '~/components/add-appointment-modal/add-appointment-modal'
+import { IS_ADD_APPOINTMENT_MODAL_OPENED } from '~/config'
 
 export const useUsersAndAppointments = routeLoader$(
   async (requestEvent: RequestEventBase) => {
@@ -56,7 +57,7 @@ export default component$(() => {
     items.value
 
   const selectedView = useSignal<ViewKeys>(initialView)
-  const isAddAppointmentModalOpen = useSignal(false)
+  const isAddAppointmentModalOpen = useSignal(IS_ADD_APPOINTMENT_MODAL_OPENED)
 
   const openAddAppointmentModal = $(() => {
     isAddAppointmentModalOpen.value = true

src/utils/functions.ts

@@ -70,6 +70,11 @@ export const getAuthorByTaskId = (id: number, userList: IUser[]) => {
   return author ? author.name : 'Unknown'
 }
 
+export const getIdByAuthorName = (name: string, userList: IUser[]) => {
+  const author = userList.find((user) => user.name === name)
+  return author ? author.id : 0
+}
+
 export const getUserByPassword = (password: string, userList: IUser[]) => {
   const user = userList.find((user) => user.password === password)
   return user