Implement repeat task parameters card

trisDeveloper · Jul 26, 2024 · d334ffe · d334ffe
1 parent 4fdb761
commit d334ffe
Show file tree

Hide file tree

Showing 6 changed files with 507 additions and 93 deletions.
diff --git a/frontend/src/components/nav-menu.vue b/frontend/src/components/nav-menu.vue
@@ -64,6 +64,7 @@ const today = new Date().toLocaleDateString('en-US', {
 
 const toggleSidebar = (event) => {
   event.stopPropagation()
+  store.setIsOpenCard(false)
   isSidebarActive.value = !isSidebarActive.value
   if (isSidebarActive.value) {
     window.addEventListener('click', closeSidebar)
@@ -187,7 +188,7 @@ onUnmounted(() => {
         border-style: solid;
         border-image: $border-gradient;
         border-image-slice: 1;
-         svg {
+        svg {
           color: #dadada;
         }
       }

diff --git a/frontend/src/components/task-card.vue b/frontend/src/components/task-card.vue
@@ -1,76 +1,6 @@
-<template>
-  <div v-if="store.isopencard" class="task-card" ref="taskCard">
-    <div class="task-actions">
-      <!-- delete icon -->
-      <font-awesome-icon
-        icon="fa-regular fa-trash-can"
-        class="trash"
-        @click="deleteTask(store.selectedTask)"
-      />
-      <font-awesome-icon
-        icon="fa-regular fa-check-square"
-        class="checkbox"
-        @click="updateTaskDoneStatus(store.selectedTask)"
-        :class="{ done: store.selectedTask.done }"
-      />
-      <font-awesome-icon
-        icon="fa-solid fa-repeat"
-        class="repeat"
-        @click="openRepeatCard(store.selectedTask)"
-      />
-    </div>
-    <!-- title -->
-    <div class="task-title">
-      <input
-        class="task-title"
-        v-model="store.selectedTask.title"
-        @input="updateTaskTitle"
-        @keyup.enter="saveTaskAndClose"
-        placeholder="Title"
-      />
-      <font-awesome-icon icon="fa-solid fa-pencil" />
-    </div>
-    <div class="task-date">
-      <VDatePicker
-        v-model="store.selectedTask.date"
-        @update:modelValue="handleDateSelection"
-        is-dark
-        class="date-picker"
-        color="indigo"
-        :popover="false"
-      >
-        <template #default="{ togglePopover }">
-          <div>
-            <button class="date-btn" @click="() => togglePopover()">
-              <span
-                ><font-awesome-icon icon="fa-solid fa-calendar-days" />{{
-                  store.selectedTask.date
-                }}</span
-              >
-            </button>
-          </div>
-        </template>
-      </VDatePicker>
-      <VueDatePicker
-        v-model="store.timepic"
-        class="time-picker"
-        dark
-        time-picker
-        @update:modelValue="handleTimeSelection"
-      />
-    </div>
-    <input
-      class="task-desc"
-      v-model="store.selectedTask.description"
-      @input="updateTaskDescription"
-      @keyup.enter="saveTaskAndClose"
-      placeholder="Description"
-    />
-  </div>
-</template>
-
 <script setup>
 import axios from 'axios'
+import taskRepeat from './task-repeat.vue'
 import { useStore } from '@/stores'
 const props = defineProps(['fetchData', 'task'])
 const store = useStore()
@@ -91,6 +21,19 @@ const deleteTask = async (task) => {
   }
   props.fetchData()
 }
+const handleClickOutside = (event) => {
+  if (store.isRepeatOpen && !event.target.closest('.task-repeat')) {
+    store.setIsRepeatOpen(false)
+    document.removeEventListener('click', handleClickOutside)
+  }
+}
+const openRepeatCard = () => {
+  setTimeout(() => {
+    store.setIsRepeatOpen(true)
+  }, 0)
+  document.addEventListener('click', handleClickOutside)
+}
+
 const updateTaskDoneStatus = async (task) => {
   try {
     task.done = !task.done
@@ -119,6 +62,8 @@ const closeTaskCard = () => {
     title: '',
     date: null,
     time: null,
+    repeatParameters: null,
+    repeatId: null,
     description: '',
     done: false
   })
@@ -148,6 +93,7 @@ const updateTaskDescription = (event) => {
 
 const saveTaskAndClose = async () => {
   try {
+    console.log(store.selectedTask)
     if (store.selectedTask.title.trim() === '') {
       // If title is empty, do nothing
       closeTaskCard()
@@ -179,7 +125,6 @@ const saveTaskAndClose = async () => {
         localStorage.setItem('nextTaskId', nextTaskId)
       }
     }
-
     closeTaskCard()
   } catch (error) {
     // Handle errors
@@ -189,6 +134,85 @@ const saveTaskAndClose = async () => {
 }
 props.fetchData()
 </script>
+
+<template>
+  <div v-if="store.isopencard" class="task-card" ref="taskCard">
+    <div class="task-actions">
+      <!-- delete icon -->
+      <font-awesome-icon
+        title="Delete Task"
+        icon="fa-regular fa-trash-can"
+        class="trash"
+        @click="deleteTask(store.selectedTask)"
+      />
+      <!-- done icon -->
+      <font-awesome-icon
+        title="Mark As Done"
+        icon="fa-regular fa-check-square"
+        class="checkbox"
+        @click="updateTaskDoneStatus(store.selectedTask)"
+        :class="{ done: store.selectedTask.done }"
+      />
+      <!-- repeat icon -->
+      <font-awesome-icon
+        title="Repeat Task"
+        icon="fa-solid fa-repeat"
+        class="repeat"
+        @click="openRepeatCard()"
+      />
+    </div>
+    <!-- title -->
+    <div class="task-title">
+      <input
+        class="task-title"
+        v-model="store.selectedTask.title"
+        @input="updateTaskTitle"
+        @keyup.enter="saveTaskAndClose"
+        placeholder="Title"
+      />
+      <font-awesome-icon icon="fa-solid fa-pencil" />
+    </div>
+    <div class="task-date">
+      <VDatePicker
+        v-model="store.selectedTask.date"
+        @update:modelValue="handleDateSelection"
+        is-dark
+        class="date-picker"
+        color="indigo"
+        :popover="false"
+      >
+        <template #default="{ togglePopover }">
+          <div>
+            <button class="date-btn" @click="() => togglePopover()">
+              <span
+                ><font-awesome-icon icon="fa-solid fa-calendar-days" />{{
+                  store.selectedTask.date
+                }}</span
+              >
+            </button>
+          </div>
+        </template>
+      </VDatePicker>
+      <VueDatePicker
+        v-model="store.timepic"
+        class="time-picker"
+        dark
+        time-picker
+        @update:modelValue="handleTimeSelection"
+      />
+    </div>
+    <input
+      class="task-desc"
+      v-model="store.selectedTask.description"
+      @input="updateTaskDescription"
+      @keyup.enter="saveTaskAndClose"
+      placeholder="Description"
+    />
+
+    <taskRepeat v-if="store.isRepeatOpen"></taskRepeat>
+  </div>
+</template>
+
 <style lang="scss">
 @import './../styles.scss';
 .tasks {