Restructure project folders

frontend/package.json

@@ -12,34 +12,34 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@fortawesome/free-regular-svg-icons": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@fortawesome/vue-fontawesome": "^3.0.6",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
     "@popperjs/core": "^2.11.8",
-    "@vuepic/vue-datepicker": "^8.0.0",
-    "@vueuse/core": "^10.7.2",
-    "axios": "^1.6.7",
-    "chart.js": "^3.9.1",
-    "pinia": "^2.1.7",
-    "sortablejs": "^1.15.2",
-    "uuid": "^9.0.1",
+    "@vuepic/vue-datepicker": "^9.0.3",
+    "@vueuse/core": "^11.1.0",
+    "axios": "^1.7.7",
+    "chart.js": "^4.4.5",
+    "pinia": "^2.2.4",
+    "sortablejs": "^1.15.3",
+    "uuid": "^10.0.0",
     "v-calendar": "^3.1.2",
-    "vue": "^3.4.15",
-    "vue-router": "^4.2.5",
+    "vue": "^3.5.12",
+    "vue-router": "^4.4.5",
     "vue3-charts": "^1.1.33"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.3.3",
-    "@vitejs/plugin-vue": "^5.0.3",
-    "@vitejs/plugin-vue-jsx": "^3.1.0",
-    "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/test-utils": "^2.4.4",
-    "eslint": "^8.49.0",
-    "eslint-plugin-vue": "^9.17.0",
-    "jsdom": "^24.0.0",
-    "prettier": "^3.0.3",
-    "sass": "^1.70.0",
-    "vite": "^5.0.11",
-    "vitest": "^1.2.2"
+    "@rushstack/eslint-patch": "^1.10.4",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "@vue/eslint-config-prettier": "^10.0.0",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.13.0",
+    "eslint-plugin-vue": "^9.29.0",
+    "jsdom": "^25.0.1",
+    "prettier": "^3.3.3",
+    "sass": "^1.80.3",
+    "vite": "^5.4.9",
+    "vitest": "^2.1.3"
   }
 }

frontend/src/components/nav-menu.vue

@@ -90,7 +90,7 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-@import './../styles.scss';
+@use '@/styles.scss' as *;
 .navbar {
   display: flex;
   justify-content: space-between;

frontend/src/components/task-card.vue → frontend/src/components/tasks/task-card.vue

@@ -17,7 +17,9 @@ const deleteTask = async (task, deleteThisOrAll) => {
     closeTaskCard()
     props.closeThisOrAll()
     if (localStorage.getItem('userId')) {
-      await axios.delete(`/api/users/${store.user.id}/tasks/${task.id}/`, { done: task.done })
+      await axios.delete(`/api/users/${store.user.id}/tasks/${task.id}/`, {
+        data: { deleteThisOrAll: deleteThisOrAll }
+      })
     } else {
       const localTasks = JSON.parse(localStorage.getItem('tasks')) || []
       if (task.repeatId && deleteThisOrAll == 'all') {
@@ -194,7 +196,7 @@ props.fetchData()
 </template>
 
 <style lang="scss">
-@import './../styles.scss';
+@use '@/styles.scss' as *;
 .tasks {
   padding: 5px;
   flex-grow: 1;

frontend/src/components/task-list.vue → frontend/src/components/tasks/task-list.vue

@@ -41,7 +41,7 @@ const updateTaskDoneStatus = async (task) => {
 props.fetchData()
 </script>
 <style lang="scss">
-@import './../styles.scss';
+@use '@/styles.scss' as *;
 .tasks {
   padding: 5px;
   flex-grow: 1;

frontend/src/components/task-repeat.vue → frontend/src/components/tasks/task-repeat.vue

@@ -182,7 +182,7 @@ const cancel = () => {
 </template>
 
 <style lang="scss">
-@import './../styles.scss';
+@use '@/styles.scss' as *;
 
 .task-repeat {
   position: absolute;

frontend/src/main.js

@@ -9,8 +9,8 @@ import VueDatePicker from '@vuepic/vue-datepicker'
 import '@vuepic/vue-datepicker/dist/main.css'
 import 'v-calendar/style.css'
 
-axios.defaults.baseURL = 'https://trisdev.pythonanywhere.com'
-//axios.defaults.baseURL = 'http://127.0.0.1:8000/'
+//axios.defaults.baseURL = 'https://trisdev.pythonanywhere.com'
+axios.defaults.baseURL = 'http://127.0.0.1:8000/'
 // font awesome icons
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {

frontend/src/router/index.js

@@ -1,5 +1,5 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import HomeView from '../views/home-view.vue'
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -12,36 +12,33 @@ const router = createRouter({
     {
       path: '/calendar',
       name: 'calendar',
-      component: () => import('../views/CalendarView.vue')
+      component: () => import('../views/calendar-view.vue')
     },
     {
       path: '/signup',
       name: 'sign up',
-      component: () => import('../components/user/sign-up.vue')
+      component: () => import('../views/user/sign-up.vue')
     },
     {
       path: '/login',
       name: 'log in',
-      component: () => import('../components/user/log-in.vue')
+      component: () => import('../views/user/log-in.vue')
     },
     {
       path: '/profile',
       name: 'My profile',
-      component: () => import('../components/user/user-profile.vue')
+      component: () => import('../views/user/user-profile.vue')
     },
 
     {
       path: '/pomodoro',
       name: 'Pomodoro',
-      component: () => import('../views/pomodoroView.vue')
+      component: () => import('../views/pomodoro-view.vue')
     },
     {
       path: '/journey',
       name: 'journey',
-      // route level code-splitting
-      // this generates a separate chunk (about.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../components/user-charts.vue')
+      component: () => import('../views/journey-view.vue')
     }
   ]
 })

frontend/src/views/CalendarView.vue → frontend/src/views/calendar-view.vue

@@ -3,8 +3,8 @@ import axios from 'axios'
 import { useStore } from '@/stores'
 import { computed, ref, onMounted } from 'vue'
 import Sortable from 'sortablejs'
-import tasklist from './../components/task-list.vue'
-import taskCard from './../components/task-card.vue'
+import tasklist from '@/components/tasks/task-list.vue'
+import taskCard from '@/components/tasks/task-card.vue'
 const store = useStore()
 const props = defineProps(['filterdays'])
 const today = new Date()
@@ -518,7 +518,7 @@ fetchData()
 </template>
 
 <style lang="scss">
-@import './../styles.scss';
+@use './../styles.scss' as *;
 .none::before {
   display: none;
 }

frontend/src/views/HomeView.vue → frontend/src/views/home-view.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { useStore } from '@/stores'
 import { ref, watch } from 'vue'
-import TodayTasks from './CalendarView.vue'
-import Pomodoro from './pomodoroView.vue'
+import TodayTasks from './calendar-view.vue'
+import Pomodoro from './pomodoro-view.vue'
 const store = useStore()
 const msg = ref('')