Merge pull request #56 from manuelsanchezweb/feature/generalImprovements

Feature/general improvements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "collabender",
-  "version": "0.9.10",
+  "version": "1.0.0",
   "description": "App with Routing built-in (recommended)",
   "engines": {
     "node": ">=20.0.0"

public/manifest.json

@@ -1,9 +1,23 @@
 {
   "$schema": "https://json.schemastore.org/web-manifest-combined.json",
-  "name": "qwik-project-name",
-  "short_name": "Welcome to Qwik",
+  "name": "collabender",
+  "short_name": "Collabender",
   "start_url": ".",
   "display": "standalone",
   "background_color": "#fff",
-  "description": "A Qwik project app."
+  "theme_color": "#fff",
+  "description": "A collaborative calendar app you cannot miss.",
+  "screenshots": [
+    {
+      "src": "/screenshot.png",
+      "type": "image/png",
+      "sizes": "862x568"
+    },
+    {
+      "src": "/screenshot.png",
+      "type": "image/png",
+      "sizes": "862x568",
+      "form_factor": "wide"
+    }
+  ]
 }

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

@@ -157,7 +157,7 @@ export const AddAppointmentModal = component$(
               name="title"
               id="title"
               type="text"
-              class="w-full border border-grayBrandMedium rounded-md px-4 py-2"
+              class="w-full border border-grayBrandMedium rounded-md px-4 py-2 bg-white"
             />
           </div>
 
@@ -175,7 +175,7 @@ export const AddAppointmentModal = component$(
                 name="date"
                 id="date"
                 type="date"
-                class="w-full border border-grayBrandMedium rounded-md px-4 py-2"
+                class="w-full border border-grayBrandMedium rounded-md px-4 py-2 bg-white"
                 defaultValue={defaultOptionForDate.value}
               />
               <div class="pl-4 bg-white absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">

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

@@ -33,7 +33,6 @@ export const EditAppointmentModal = component$(
       const startTimeValue =
         document.querySelector<HTMLInputElement>('#time_start')?.value
 
-
       const startTimeFromHoursToSeconds =
         Number(startTimeValue?.split(':')[0]) * 60 +
         Number(startTimeValue?.split(':')[1])
@@ -153,7 +152,7 @@ export const EditAppointmentModal = component$(
               name="title"
               id="title"
               type="text"
-              class="w-full border border-grayBrandMedium rounded-md px-4 py-2"
+              class="w-full border border-grayBrandMedium rounded-md px-4 py-2 bg-white"
             />
           </div>
 
@@ -171,7 +170,7 @@ export const EditAppointmentModal = component$(
                 name="date"
                 id="date"
                 type="date"
-                class="w-full border border-grayBrandMedium rounded-md px-4 py-2"
+                class="w-full border border-grayBrandMedium rounded-md px-4 py-2 bg-white"
                 value={editModalData.date}
               />
               <div class="pl-4 bg-white absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">

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

@@ -12,10 +12,9 @@ export const Calendar = component$(
     selectedDay: Signal<Date>
     isAddAppointmentModalOpen: Signal<boolean>
   }) => {
-    const date = useSignal(new Date())
+    const date = useSignal(selectedDay.value)
     const weeks = buildCalendar(date.value)
 
-
     const incrementMonth = $(() => {
       const previousYear = date.value.getFullYear()
       const previousMonth = date.value.getMonth()
@@ -28,7 +27,6 @@ export const Calendar = component$(
       date.value = new Date(previousYear, previousMonth - 1)
     })
 
-
     const setSelectedDay = $((day: CalendarDay) => {
       selectedDay.value = new Date(day.year, day.month, day.day)
       // add the ?day=2022-01-01 to the URL without removing the view from the user
@@ -39,18 +37,17 @@ export const Calendar = component$(
       )
       window.history.pushState({}, '', url.toString())
     })
-
-
 
     const openOnDoubleClick = $((day: any) => {
-
-        if (day.day === Number(selectedDay.value.getDate()) && 
-            day.month === Number(selectedDay.value.getMonth()) && 
-            day.year === Number(selectedDay.value.getFullYear())) {
-          isAddAppointmentModalOpen.value = true
-        } else {
-          setSelectedDay(day);
-        }  
+      if (
+        day.day === Number(selectedDay.value.getDate()) &&
+        day.month === Number(selectedDay.value.getMonth()) &&
+        day.year === Number(selectedDay.value.getFullYear())
+      ) {
+        isAddAppointmentModalOpen.value = true
+      } else {
+        setSelectedDay(day)
+      }
     })
 
     return (
@@ -108,25 +105,37 @@ export const Calendar = component$(
 
           <div class="grid grid-cols-7 h-fit mt-4 border">
             {weeks.flat().map((day, index) => {
-              const id = `${day.year}-${(day.month).toString().padStart(2, '0')}-${day.day.toString().padStart(2, '0')}`
-              const hasTask = appointments.some((event) => event.date === `${day.year}-${(day.month + 1).toString().padStart(2, '0')}-${day.day.toString().padStart(2, '0')}`)
-              const selected = selectedDay.value.getFullYear() + '-' + (selectedDay.value.getMonth()).toString().padStart(2,'0') + '-' + selectedDay.value.getDate().toString().padStart(2,'0')
-              console.log(selected)
-              console.log(id)
-
+              const id = `${day.year}-${day.month.toString().padStart(2, '0')}-${day.day.toString().padStart(2, '0')}`
+              const hasTask = appointments.some(
+                (event) =>
+                  event.date ===
+                  `${day.year}-${(day.month + 1).toString().padStart(2, '0')}-${day.day.toString().padStart(2, '0')}`
+              )
+
+              const selected =
+                selectedDay.value.getFullYear() +
+                '-' +
+                selectedDay.value.getMonth().toString().padStart(2, '0') +
+                '-' +
+                selectedDay.value.getDate().toString().padStart(2, '0')
+              // console.log(selected)
+              // console.log(id)
 
               return (
                 <button
                   key={index}
                   id={id}
                   data-id={id}
-                  onClick$={() => {openOnDoubleClick(day); console.log('id', id)}}
+                  onClick$={() => {
+                    openOnDoubleClick(day)
+                    // console.log('id', id)
+                  }}
                   class={`calendar-day flex relative justify-center hover:border-primary ease-in-out duration-100 transition aspect-square items-center cursor-pointer border
                     ${day.disabled ? 'bg-gray-100 pointer-events-none text-gray-400' : ''}
                     ${id === selected ? 'bg-primaryLight text-primary border-primary' : ''}`}
                 >
                   {day.day}
-                  
+
                   {hasTask ? (
                     <p class="absolute w-2 h-2 top-0 right-0 sm:top-2 sm:right-2">
                       <svg

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

@@ -12,6 +12,7 @@ export const TaskShow = component$(
     editModalData,
     isAddAppointmentModalOpen,
     userName,
+    hasMaxHeight,
   }: {
     appointments: IAppointment[]
     selectedDay: Date
@@ -20,10 +21,8 @@ export const TaskShow = component$(
     editModalData: IAppointment
     isAddAppointmentModalOpen: Signal<boolean>
     userName: string
+    hasMaxHeight?: boolean
   }) => {
-    // TODO: why when I click, the day I get is the previous one?
-    // console.log({ selectedDay })
-    console.log(selectedDay.getMonth())
     const formatDay = (day: Date) => {
       return `${day.getFullYear() + '-' + (day.getMonth() + 1).toString().padStart(2, '0') + '-' + day.getDate().toString().padStart(2, '0')}`
     }
@@ -33,16 +32,17 @@ export const TaskShow = component$(
 
     return (
       <section aria-live="polite" aria-label="Tasks from the selected day">
-        <h1 class="text-text sticky top-0 text-3xl py-4 font-semibold">
+        <h2 class="text-text text-3xl py-4 font-semibold">
           {selectedDay.getDate().toString().padStart(2, '0') +
             '.' +
             (selectedDay.getMonth() + 1).toString().padStart(2, '0') +
             '.' +
             selectedDay.getFullYear()}
-        </h1>
-
+        </h2>
         {isThereAnyTaskThisDay ? (
-          <ul class="flex flex-col pt-8 gap-8">
+          <ul
+            class={`flex flex-col pt-8 gap-8 overflow-y-scroll ${hasMaxHeight ? 'max-h-[400px]' : 'overflow-hidden'}`}
+          >
             {appointments.map((task, idx) => {
               const author = getAuthorByTaskId(task.created_by!, users)
 
@@ -69,7 +69,9 @@ export const TaskShow = component$(
           </ul>
         ) : (
           <>
-            <p class='font-light opacity-55'>You do not have any task yet for this day.</p>
+            <p class="font-light opacity-55">
+              You do not have any task yet for this day.
+            </p>
             <button
               onClick$={() => {
                 isAddAppointmentModalOpen.value = true

src/components/views/calendar-view.tsx

@@ -11,33 +11,36 @@ export const CalendarView = component$(
     isEditAppointmentModalOpen,
     editModalData,
     userName,
+    lastDayVisitedDate,
   }: {
     appointments: IAppointment[]
     users: Array<IUser>
     isAddAppointmentModalOpen: Signal<boolean>
     isEditAppointmentModalOpen: Signal<boolean>
     editModalData: IAppointment
     userName: string
+    lastDayVisitedDate: Date
   }) => {
-    const selectedDay = useSignal(new Date())
+    const selectedDay = useSignal(lastDayVisitedDate)
     const hasAppointments = appointments.length > 0
 
     return (
       <section
         aria-label="calendar view"
         class="flex flex-col lg:flex-row justify-between gap-6"
       >
-        <div class="bg-grayBrandLight h-[600px] p-6 md:p-12 md:pt-2 rounded-xl w-full lg:w-1/2">
+        <div class="bg-grayBrandLight md:h-[600px] p-6 md:p-12 md:pt-2 rounded-xl w-full lg:w-1/2">
           <Calendar
             appointments={appointments}
             selectedDay={selectedDay}
             isAddAppointmentModalOpen={isAddAppointmentModalOpen}
           />
         </div>
         <div
-          class={`bg-grayBrandLight h-fit max-h-[450px] p-6 md:p-12 pt-2 rounded-xl w-full lg:w-1/2  ${hasAppointments ? 'overflow-y-scroll' : 'overflow-hidden'}`}
+          class={`bg-grayBrandLight h-fit p-6 md:p-12 pt-2 rounded-xl w-full lg:w-1/2  `}
         >
           <TaskShow
+            hasMaxHeight={hasAppointments}
             userName={userName}
             appointments={appointments}
             selectedDay={selectedDay.value}

src/components/views/task-card.tsx

@@ -42,12 +42,12 @@ export default component$((props: IProps) => {
         </div>
       )}
 
-      <div class="flex rounded-2xl gap-6 justify-between items-start w-full bg-primaryLight px-8 py-4">
-        <div class="gap-2 flex flex-col ">
+      <div class="flex rounded-2xl gap-6 justify-between items-start w-full bg-primaryLight px-8 py-4 relative">
+        <div class="gap-2 flex flex-col w-full">
           <div class="flex flex-col gap-1">
             <h3
               title={props.title}
-              class="font-bold tracking-tight pb-2 text-text md:line-clamp-1 text-sm md:text-xl"
+              class="font-bold tracking-tight pb-2 text-text md:line-clamp-1 text-sm md:text-lg max-w-[95%]"
             >
               {props.title}
             </h3>
@@ -69,7 +69,7 @@ export default component$((props: IProps) => {
 
         {props.showEdit ? (
           <button
-            class="flex justify-end border-[3px] transition-transform hover:scale-105 focus:scale-105 rounded-full  mt-7 border-primary p-1"
+            class="flex absolute right-4 top-4 border-[3px] transition-transform hover:scale-105 focus:scale-105 rounded-full border-primary p-1"
             onClick$={$(() => updateLocalAppointment())}
           >
             <IconManager icon="edit" classCustom="h-8 w-8" />

src/global.css

@@ -2,7 +2,7 @@
  * Tailwind CSS imports
  * View the full documentation at https://tailwindcss.com
  */
-@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 @tailwind base;
 @tailwind components;
@@ -14,7 +14,7 @@
     font-style: normal;
     font-weight: 400;
     font-display: swap;
-    src: url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+    src: url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
   }
 }
 
@@ -65,3 +65,10 @@ input::-webkit-calendar-picker-indicator {
 input[type='date']::-webkit-input-placeholder {
   visibility: hidden !important;
 }
+
+h1,
+h2,
+h3,
+h4 {
+  hyphens: auto;
+}