Merge pull request #57 from manuelsanchezweb/feature/addVisibility

Add visibility possibility in db

migrations/0001_pink_marrow.sql

@@ -0,0 +1 @@
+ALTER TABLE `appointments` ADD `visibility` text DEFAULT 'public' NOT NULL;

migrations/meta/0001_snapshot.json

@@ -0,0 +1,147 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "207a17a1-02c6-45df-a582-ea805328372a",
+  "prevId": "7ed6ffd0-8df4-4bd4-b9a9-58fc380d8655",
+  "tables": {
+    "appointments": {
+      "name": "appointments",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "date": {
+          "name": "date",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_start": {
+          "name": "time_start",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_end": {
+          "name": "time_end",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "full_day": {
+          "name": "full_day",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "category": {
+          "name": "category",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(CURRENT_TIMESTAMP)"
+        },
+        "visibility": {
+          "name": "visibility",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'public'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "appointments_user_id_users_id_fk": {
+          "name": "appointments_user_id_users_id_fk",
+          "tableFrom": "appointments",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "users": {
+      "name": "users",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "users_password_unique": {
+          "name": "users_password_unique",
+          "columns": [
+            "password"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  }
+}

migrations/meta/_journal.json

@@ -8,6 +8,13 @@
       "when": 1716974879288,
       "tag": "0000_needy_pestilence",
       "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "6",
+      "when": 1717625288474,
+      "tag": "0001_pink_marrow",
+      "breakpoints": true
     }
   ]
 }

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

@@ -282,6 +282,31 @@ export const AddAppointmentModal = component$(
             </div>
           </div>
 
+          {/* Visibility  */}
+          <div class="flex flex-col gap-2 mt-2 md:mt-8">
+            <label
+              for="visibility"
+              class=" text-text text-md md:text-lg font-semibold"
+            >
+              Visible for
+            </label>
+            <div class="relative">
+              <select
+                required
+                name="visibility"
+                id="visibility"
+                class="w-full border border-grayBrandMedium rounded-md px-4 py-2 cursor-pointer bg-white"
+              >
+                <option value="public">All</option>
+                <option value="private">Only me</option>
+              </select>
+              <IconManager
+                icon="dropdown"
+                classCustom="absolute right-2 top-1/2 -translate-y-1/2 h-8 w-8 pointer-events-none"
+              />
+            </div>
+          </div>
+
           <footer class="mt-5">
             <div class="flex justify-end gap-4 items-center">
               <button

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

@@ -279,6 +279,32 @@ export const EditAppointmentModal = component$(
             </div>
           </div>
 
+          {/* Visibility  */}
+          <div class="flex flex-col gap-2 mt-2 md:mt-8">
+            <label
+              for="visibility"
+              class=" text-text text-md md:text-lg font-semibold"
+            >
+              Visible for
+            </label>
+            <div class="relative">
+              <select
+                required
+                name="visibility"
+                id="visibility"
+                value={editModalData.visibility}
+                class="w-full border border-grayBrandMedium rounded-md px-4 py-2 cursor-pointer bg-white"
+              >
+                <option value="public">All</option>
+                <option value="private">Only me</option>
+              </select>
+              <IconManager
+                icon="dropdown"
+                classCustom="absolute right-2 top-1/2 -translate-y-1/2 h-8 w-8 pointer-events-none"
+              />
+            </div>
+          </div>
+
           <input
             hidden
             type="number"

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

@@ -26,9 +26,13 @@ export const TaskShow = component$(
     const formatDay = (day: Date) => {
       return `${day.getFullYear() + '-' + (day.getMonth() + 1).toString().padStart(2, '0') + '-' + day.getDate().toString().padStart(2, '0')}`
     }
-    const isThereAnyTaskThisDay = appointments.some(
-      (task) => formatDay(selectedDay) === task.date
-    )
+    const isThereAnyTaskThisDay = appointments.some((task) => {
+      const author = getAuthorByTaskId(task.created_by!, users)
+      return (
+        formatDay(selectedDay) === task.date &&
+        (task.visibility === 'public' || author === userName)
+      )
+    })
 
     return (
       <section aria-live="polite" aria-label="Tasks from the selected day">
@@ -46,6 +50,9 @@ export const TaskShow = component$(
             {appointments.map((task, idx) => {
               const author = getAuthorByTaskId(task.created_by!, users)
 
+              if (task.visibility === 'private' && author !== userName)
+                return null
+
               if (formatDay(selectedDay) === task.date) {
                 return (
                   <TaskCard
@@ -59,6 +66,7 @@ export const TaskShow = component$(
                     full_day={task.full_day}
                     time_start={task.time_start}
                     time_end={task.time_end}
+                    visibility={task.visibility}
                     created_by={author}
                     isEditAppointmentModalOpen={isEditAppointmentModalOpen}
                     editModalData={editModalData}

src/components/views/list-view.tsx

@@ -102,6 +102,7 @@ export const ListView = component$(
                       time_start={task.time_start}
                       time_end={task.time_end}
                       created_by={author}
+                      visibility={task.visibility}
                       category={task.category}
                       isEditAppointmentModalOpen={isEditAppointmentModalOpen}
                       editModalData={editModalData}
@@ -135,6 +136,7 @@ export const ListView = component$(
                     full_day={task.full_day}
                     time_start={task.time_start}
                     time_end={task.time_end}
+                    visibility={task.visibility}
                     created_by={author}
                     isEditAppointmentModalOpen={isEditAppointmentModalOpen}
                     editModalData={editModalData}

src/components/views/past-appointment-view.tsx

@@ -75,6 +75,7 @@ export const PastAppointmentsView = component$(
                     time_start={task.time_start}
                     time_end={task.time_end}
                     created_by={author}
+                    visibility={task.visibility}
                     isEditAppointmentModalOpen={null}
                     editModalData={null}
                   />

src/components/views/task-card.tsx

@@ -14,6 +14,7 @@ interface IProps {
   category: string
   time_end: string
   full_day: number
+  visibility: string
   isEditAppointmentModalOpen: Signal<boolean> | null
   editModalData: IAppointment | null
 }
@@ -32,6 +33,7 @@ export default component$((props: IProps) => {
     props.editModalData.time_end = props.time_end
     props.editModalData.full_day = props.full_day
     props.editModalData.category = props.category
+    props.editModalData.visibility = props.visibility
   })
 
   return (
@@ -77,6 +79,17 @@ export default component$((props: IProps) => {
         ) : (
           ''
         )}
+
+        {props.visibility == 'private' ? (
+          <span
+            title="This task is private, only you can see it"
+            class="flex absolute right-4 bottom-4 border-[3px] rounded-full border-primary p-1"
+          >
+            <IconManager icon="private" classCustom="h-8 w-8 text-primary" />
+          </span>
+        ) : (
+          ''
+        )}
       </div>
     </>
   )

src/db/schema.ts

@@ -21,6 +21,9 @@ export const appointmentsTable = sqliteTable('appointments', {
   created_at: text('created_at')
     .default(sql`(CURRENT_TIMESTAMP)`)
     .notNull(),
+  visibility: text('visibility')
+    .default(sql`'public'`)
+    .notNull(),
   //   updateAt: integer('updated_at', { mode: 'timestamp' }).$onUpdate(() => new Date()),
 })
 

src/global/index.tsx

@@ -64,6 +64,7 @@ export const useAddAppointment = globalAction$(async (data, { cookie }) => {
     full_day: isFullDay,
     category: data['category'] as string,
     created_by: authorId,
+    visibility: data['visibility'] as string,
   }
 
   await createAppointment(appointment)

src/icons/icon-manager.tsx

@@ -10,6 +10,7 @@ import {
   IconHistoryFill,
   IconList,
   IconListFill,
+  IconPrivate,
   IconRemove,
   IconTimeEnd,
   IconTimeStart,
@@ -33,6 +34,7 @@ type IconType =
   | 'dropdown'
   | 'time-start'
   | 'time-end'
+  | 'private'
 
 interface IconManagerProps {
   icon?: IconType
@@ -70,6 +72,8 @@ export const IconManager = component$<IconManagerProps>(
         return <IconTimeStart classCustom={classCustom} />
       case 'time-end':
         return <IconTimeEnd classCustom={classCustom} />
+      case 'private':
+        return <IconPrivate classCustom={classCustom} />
       default:
         return <IconAdd classCustom={classCustom} />
     }

src/icons/icons.tsx

@@ -563,3 +563,31 @@ export const IconTimeEnd = component$(
     )
   }
 )
+
+export const IconPrivate = component$(
+  ({ classCustom }: { classCustom?: string }) => {
+    return (
+      <svg
+        class={classCustom}
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M12 21a9 9 0 1 1 0 -18a9 9 0 0 1 0 18z" />
+        <path d="M9 10h-.01" />
+        <path d="M15 10h-.01" />
+        <path d="M8 15h8" />
+        <path d="M9 14v2" />
+        <path d="M12 14v2" />
+        <path d="M15 14v2" />
+      </svg>
+    )
+  }
+)