Final commit, done

Still a lot of room for improvement, however for now it's time to move on, it's nice for now :D

.gitignore

@@ -17,7 +17,14 @@ coverage
 /cypress/videos/
 /cypress/screenshots/
 
+public
+public/
+public/*
+
+
 # Editor directories and files
+.vscode
+.vscode/
 .vscode/*
 !.vscode/extensions.json
 .idea

README.md

@@ -1,14 +1,8 @@
 # odin-todo-vue
 
-This template should help get you started developing with Vue 3 in Vite.
+![preview](image.png)
 
-## Recommended IDE Setup
+using vue, vue-modal dialogs, vue dropdown, vue 3 date picker, tailwind, etc...
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
 
 ## Project Setup
 

src/components/NavBar.vue

@@ -1,24 +1,31 @@
 <script setup>
 
-import {
+// import {
-  TheDropDownNavbar,
+//   TheDropDownNavbar,
-  TheDropDownItem,
+//   TheDropDownItem,
-} from "vue3-dropdown-navbar";
+// } from "vue3-dropdown-navbar";
 
-let currentPage = "Projects";
+// let currentPage = "Projects";
 
 </script>
 
 <template>
 
-<TheDropDownNavbar class="">
+<div class="w-full bg-slate-900 p-5">
+  <div class="m-auto w-full lg:w-[1000px]">
+    <h1 class="text-2xl">Tasks</h1>
+  </div>
+</div>
+
+
+<!-- <TheDropDownNavbar class="">
   <template #logo>
     <h1 class="text-2xl">{{ currentPage }}</h1>
   </template>
   <TheDropDownItem link="#" class="text-lg">Projects</TheDropDownItem>
   <TheDropDownItem link="#" class="text-lg">Tasks</TheDropDownItem>
   <TheDropDownItem link="#" class="text-lg">Somethings</TheDropDownItem>
-</TheDropDownNavbar>
+</TheDropDownNavbar> -->
 
 </template>
 

src/instances/Task.vue

@@ -19,6 +19,7 @@ const props = defineProps(['item', 'remove', 'currentProject', 'rename'])
 const parsedDate = parseISO(props.item.dueDate ?? '');
 const isValidDate = isDateValid(parsedDate);
 // const formattedDate = formatDate(parsedDate, 'dd-MM-yyyy');
+const showModalDeleteTask = ref(false);
 
 const dateEnabled = ref(isValidDate);
 
@@ -30,6 +31,12 @@ function editMe(event) {
   setTimeout(() => showModalEdit.value = false, 1);
 }
 
+function removeMe(e) {
+  e.preventDefault();
+  props.remove(props.item);
+  setTimeout(() => showModalDeleteTask.value = false, 1);
+}
+
 </script>
 
 <template>
@@ -109,7 +116,7 @@ function editMe(event) {
         </li>
 
         <li class="hover:bg-slate-500"
-            @click="props.remove(item)">
+            @click="showModalDeleteTask = true">
           <X /> Delete
         </li>
       </ul>
@@ -169,6 +176,23 @@ function editMe(event) {
   </template>
 </Modal>
 
+
+<Modal v-model="showModalDeleteTask" title="Delete project">
+  <template v-slot:default>
+    <form method="post" @submit="function (e) {removeMe(e)}">
+      <div class="form-group">
+        <label for="inputEmail4" class="text-2xl block">Delete {{ props.item.name }}?</label>
+      </div>
+      <div class="row modal-footer">
+        <div class="*:p-2 *:rounded-lg *:border flex gap-2 mt-3">
+          <button class="bg-red-900 border-red-700" type="submit">Delete</button>
+          <button class="bg-slate-700 border-slate-600" type="button" @click="showModalDeleteTask = false">Cancel</button>
+        </div>
+      </div>
+    </form>
+  </template>
+</Modal>
+
 </template>
 
 <style scoped>

src/views/ProjectsView.vue

@@ -64,7 +64,6 @@ function onMoveCallback(){
       <button type="button" @click="showModalAddProject = true">
         <div class="flex items-center gap-1 rounded-xl border p-1 hover:border-slate-500 hover:bg-slate-600 border-slate-600 bg-slate-700"><Plus /> <p>Add project</p></div>
       </button>
-
       <Modal v-model="showModalAddProject" title="Add project">
         <template v-slot:default>
           <form method="post" @submit="function(event) {newProject(event)}">
@@ -92,7 +91,7 @@ function onMoveCallback(){
       handle=".handle"
       animation="150">
       <template #item="{element}">
-        <Project @change-current-project="(item) => {currentProject == reactive(toRaw(item)) ? currentProject = null : currentProject = toRaw(item); console.log(currentProject)}" :item="element" :remove="removeProject" :rename="renameProject" :current-project="currentProject" />
+          <Project @change-current-project="(item) => {currentProject == reactive(toRaw(item)) ? currentProject = null : currentProject = toRaw(item); console.log(currentProject)}" :item="element" :remove="removeProject" :rename="renameProject" :current-project="currentProject" />
       </template>
     </draggable>
     <div v-else class="text-2xl font-light text-center">No projects. Add one!</div>
@@ -101,4 +100,14 @@ function onMoveCallback(){
 </template>
 
 <style scoped>
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
 </style>

src/views/TasksView.vue

@@ -33,7 +33,24 @@ function newTask(event) {
   let form = new FormData(event.srcElement);
   let values = form.values();
   let item = toRaw(currentProject.value).newTask(values.next().value);
-  item.changeDescription(values.next().value.trim());
+  let desc = values.next().value.trim();
+  if (desc != "") {
+    item.changeDescription(desc);
+  } else {
+    item.changeDescription(null);
+  }
+  values.next();
+
+
+  let dateDate = values.next().value;
+  if (dateDate) {
+    let testDate = new Date(dateDate).toISOString();
+    item.changeDueDate(testDate);
+    console.log(testDate);
+  } else {
+    item.changeDueDate(null);
+  }
+
   setTimeout(() => showModalAddTask.value = false, 1);
   refreshTasks();
 }
@@ -64,9 +81,9 @@ function editTask(event, item) {
 
 function removeTask(item) {
   console.log(toRaw(item))
-  if (confirm(`Are you sure you want to remove task ${toRaw(item).name}?`)) {
+  // if (confirm(`Are you sure you want to remove task ${toRaw(item).name}?`)) {
-    toRaw(item).remove();
+  toRaw(item).remove();
-  }
+  // }
   refreshTasks();
 }
 
@@ -100,6 +117,10 @@ function checkIfAtLeastOneDone() {
 }
 
 
+const dateEnabled = ref(false);
+
+const dateE = ref(null);
+
 </script>
 
 <template>
@@ -121,6 +142,12 @@ function checkIfAtLeastOneDone() {
               <label for="add-task-description" class="text-xl block">Description</label>
               <input id="add-task-description" type="text" class="block bg-slate-700 text-lg p-1 rounded-lg border border-slate-600" placeholder="Description" name="description" />
             </div>
+            <div class="form-group">
+              <label for="add-task-description" class="text-xl block">Due date</label>
+              <input type="checkbox" v-model="dateEnabled" name="due-date-check-add" id="due-date-check-add" :value="false"> <label for="due-date-check-add">Enabled</label>
+              <VueDatePicker v-model="dateE" :min-date="new Date()" :dark="true" :disabled="!dateEnabled" :required="dateEnabled" name="vuedate"></VueDatePicker>
+              <!-- {{ date.toISOString() }} -->
+            </div>
             <div class="row modal-footer">
               <div class="*:p-2 *:rounded-lg *:border flex gap-2 mt-3">
                 <button class="bg-green-800 border-green-600" type="submit">Add</button>