Fixed complete/incomplete list items

src/api.js

@@ -26,6 +26,29 @@ export async function createList(listData) {
   }
 }
 
+// API call to create a new list
+export async function getList(listData) {
+  const { sessionId } = store.state;
+
+  console.log(axios);
+
+  if (!sessionId) {
+    throw new Error('No session ID found. User may not be authenticated.');
+  }
+
+  try {
+    const response = await axios.post(
+      '/lists/',
+      listData,
+      { headers: { 'Authorization': `Bearer ${sessionId}` } }
+    );
+    return response.data;
+  } catch (error) {
+    console.warn('Error creating list:', error,...arguments);
+    throw error;
+  }
+}
+
 // Example function for other list-related actions
 // Add more functions as needed
 
@@ -46,3 +69,21 @@ export async function deleteList(listId) {
     throw error;
   }
 }
+
+export async function axiosGet(url, params = {}, sessionId) {
+  return axios.get(url, {
+    params, // Query parameters
+    headers: {
+      'Authorization': `Bearer ${sessionId}`
+    }
+  });
+}
+
+export async function axiosPost(url, data = {}, sessionId) {
+  return axios.post(url, data, {
+    headers: {
+      'Authorization': `Bearer ${sessionId}`,
+      'Content-Type': 'application/json'
+    }
+  });
+}

src/components/DashboardComponents/MultiplayerToggle.vue

@@ -0,0 +1,117 @@
+<template>
+  <div
+    class="slider-container"
+    tabindex="0"
+    @keydown.left.prevent="moveSlider(false)"
+    @keydown.right.prevent="moveSlider(true)"
+  >
+    <label class="slider-label">{{ label }}</label>
+    <div class="slider" @click="toggleSlider" :aria-checked="isChecked" role="switch">
+      <!--Needs to switch between an icon of one person and multiple -->
+      <div class="slider-tab" :class="{ 'slider-checked': isChecked }">{{ isChecked ? 'Yes' : 'No' }}</div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'BooleanSlider',
+  props: {
+    label: {
+      type: String,
+      default: 'Yes/No',
+    },
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      isChecked: this.modelValue,
+    };
+  },
+  watch: {
+    modelValue(newValue) {
+      this.isChecked = newValue; // Update local state when parent prop changes
+    },
+  },
+  methods: {
+    emitSliderChange() {
+      this.$emit('update:modelValue', this.isChecked); // Emit for v-model binding
+      console.log("toggling");
+    },
+    toggleSlider() {
+      this.isChecked = !this.isChecked;
+      this.emitSliderChange(); // Emit the change
+    },
+    moveSlider(direction) {
+      // True for right arrow (Yes), false for left arrow (No)
+      if (direction && !this.isChecked) {
+        this.isChecked = true;
+      } else if (!direction && this.isChecked) {
+        this.isChecked = false;
+      }
+      this.emitSliderChange(); // Emit the change
+    },
+  },
+  mounted() {
+    this.isChecked = this.modelValue; // Set initial state based on prop value
+  }
+};
+
+//ee
+</script>
+
+<style scoped>
+.slider-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  outline: none;
+}
+
+.slider-label {
+  text-align: center;
+  margin-bottom: 2px;
+  font-size: 16px;
+}
+
+.slider {
+  position: relative;
+  width: 80px;
+  height: 30px;
+  border-radius: 15px;
+  display: flex;
+  align-items: center;
+  padding: 0 5px;
+  transition: background-color 0.3s ease;
+}
+
+.slider-checked {
+  transform: translateX(40px);
+}
+
+.slider-tab {
+  width: 40px;
+  height: 24px;
+  border-radius: 12px;
+  background-color: #fff;
+  position: absolute;
+  transition: transform 0.3s ease;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  user-select: none;
+  pointer-events: none;
+}
+
+.slider[aria-checked="true"] {
+  background-color: blue;
+}
+
+.slider[aria-checked="false"] {
+  background-color: #383444;
+}
+</style>

src/components/ListItems/ListElement.css

@@ -33,12 +33,12 @@
   text-decoration: none;
   display: block;
   font-size: 14px;
-  text-decoration: line-through;
+  text-decoration: none;
 }
 
 .dropdown-content a:hover {
   background-color: grey;
-  text-decoration: none;
+  text-decoration: line-through;
 }
 
 .dropdown:hover .dropdown-content {

src/components/ListItems/ListElement.vue

@@ -7,7 +7,6 @@
         spellcheck="false">
         {{ listName }}
       </div>
-
       <div>
         <button @click="removeItem" class="add-button">Remove Task</button>
       </div>
@@ -32,7 +31,7 @@
     </div>
     <div class="ListContainer">
       <ul class="ListItem">
-        <li v-for="(item, index) in itemsArray" :key="index" draggable="true" @dragstart="dragStart(index)"
+        <li v-for="(item, index) in incompleteItems" :key="index" draggable="true" @dragstart="dragStart(index)"
           :style="index === selectedItemIndex ? 'border: 3px solid blue; border-radius:5px; transition: border-color 0.1s ease;' : 'border: 3px solid transparent;'"
           @dragover="dragOver" @drop="drop(index)">
           <div class="item-container" @click="focusEditable(index);">
@@ -51,14 +50,13 @@
     <div class="dropdown">
       <button @click="toggleDropdown" @keydown.enter.prevent="toggleDropdown" class="dropbtn">Completed Tasks</button>
       <div v-if="isDropdownOpen" class="dropdown-content">
-        <a v-for="(item, index) in itemsArray" :key="index" @click="selectOption(index)">{{ item.textString
-          }}</a>
+        <a v-for="(item, index) in completeItems" :key="index" @click="incompleteItem(index)">{{ item.textString
+          }}</a> 
       </div>
     </div>
   </div>
 </template>
 
-
 <script>
 /* eslint-disable*/
 
@@ -70,7 +68,6 @@ import MinuteInput from './MinuteInput.vue';
 import { createList } from '../../api.js';
 import './ListElement.css';
 
-
 export default {
   name: 'ListElement',
   props: {
@@ -140,11 +137,19 @@ export default {
     MinuteInput,
   },
   computed: {
+    //Need a computed property that returns the objects which are and arent completed
+    completeItems(){
+      return this.itemsArray.filter((item) => item.complete);
+    },
+    incompleteItems(){
+      return this.itemsArray.filter((item) => !item.complete);
+    }
 
   },
   methods: {
     saveEditableText(index, event) {
       // Get the text content from the contenteditable element
+      /*
       let newText = event.target.innerText.trim();
 
       // Optional: Limit the text length to 500 characters
@@ -155,14 +160,18 @@ export default {
       // Update the text in the itemsArray
       this.itemsArray[index].textString = newText;
 
-      // Call saveList to emit the updated itemsArray
+      // Call saveList to emit the updated itemsArray*/
       this.saveList();
     },
     completeItem(index) {
-      if (this.itemsArray[index].textString != null && this.itemsArray[index].textString != '') {
-        this.completedItemsArray.push(this.itemsArray[index]);
+      if (this.incompleteItems[index].textString != null && this.incompleteItems[index].textString != '') {
+        this.itemsArray[index].complete = true;
+        this.itemsArray.splice(this.itemsArray.length, 0, this.itemsArray[index])
+        this.itemsArray.splice(index,1);
+      }else{
+        this.removeItemByIndex(index);
       }
-      this.removeItemByIndex(index);
+      this.saveList();
     },
     saveList() {
       //LATER Need to add some debounce time maybe 750 ms to only call the api once every 3/4s second and not spam the backend.
@@ -362,7 +371,7 @@ export default {
       }
     },
     handleArrowDown(index, event) {
-      if (event.target.innerText.length === 0 && index + 1 < this.itemsArray.length) {
+      if (event.target.innerText.length === 0 && index + 1 < this.incompleteItems.length) {
         event.preventDefault(); // Prevent default arrow key behavior
         this.focusEditable(index + 1, 0);
       }
@@ -439,9 +448,12 @@ export default {
     toggleDropdown() {
       this.isDropdownOpen = !this.isDropdownOpen;
     },
-    selectOption(index) {
-      this.itemsArray.push(this.completedItemsArray[index]);
-      this.completedItemsArray.splice(index, 1);
+    incompleteItem(index) {
+      //Needs to be rewritten to put objects back 
+      console.log("Index: "+ index + " incomplete items:  " + this.incompleteItems.length + " whole index size: "+ this.itemsArray.length);
+      this.itemsArray.splice(this.incompleteItems.length, 0, this.itemsArray[this.incompleteItems.length+index]);
+      this.itemsArray[index+this.incompleteItems.length+1].complete = false;
+      this.itemsArray.splice(this.incompleteItems.length + index -1, 1);
       this.saveList();
     }
   }

src/views/Dashboard.vue

@@ -3,23 +3,21 @@
     <!-- Top row: Hero text and navigation buttons -->
     <div class="top-row" :style="{ 'background-color': colors.sideBar }">
       <div class="button-container">
-        <div class="bigButton" id="previousDay" @click="decrementDay"
-          :style="{ 'background-color': colors.background }">Previous Day</div>
-        <!--<DateInput  @date-selected="handleDueDateChange" :initialDate="currentDate"/>-->
-        <div class="bigButton" id="nextDay" :style="{ 'background-color': colors.background }">Next Day</div>
+        <MultiplayerToggle />
+        <!--Need to put these in a v-if is bound to the emits of multiplayer toggle-->
+        <div>
+          <div class="bigButton" id="previousDay" @click="decrementDay"
+            :style="{ 'background-color': colors.background }">Previous Day</div>
+          <!--<DateInput  @date-selected="handleDueDateChange" :initialDate="currentDate"/>-->
+          <div class="bigButton" id="nextDay" :style="{ 'background-color': colors.background }">Next Day</div>
+        </div>
       </div>
     </div>
 
     <div class="page-container" :style="{ 'background-color': colors.background }">
       <div class="lists-container">
-        <ListElement
-          listName="Backburner"
-          v-model="backburner"
-        />
-        <ListElement
-          listName="Daily List"
-          v-model="dailyList"
-        />
+        <ListElement listName="Backburner" v-model="backburner" />
+        <ListElement listName="Daily List" v-model="dailyList" />
         <DailyCalendar v-model:list1="backburner" v-model:list2="dailyList" />
       </div>
     </div>
@@ -34,13 +32,15 @@ import ListElement from '@/components/ListItems/ListElement.vue';
 import DailyCalendar from '@/components/CalendarComponents/DailyCalendar.vue';
 import DateInput from '@/components/ListItems/DateInput.vue';
 import './cssViews/Dashboard.css';
+import MultiplayerToggle from '@/components/DashboardComponents/MultiplayerToggle.vue';
 
 export default {
   name: 'DashboardWorld',
   components: {
     ListElement,
     DailyCalendar,
     DateInput,
+    MultiplayerToggle,
   },
   data() {
     return {
@@ -51,16 +51,16 @@ export default {
     };
   },
   watch: {
-  backburner(newVal) {
-    //console.log('Backburner list updated:', newVal);
+    backburner(newVal) {
+      //console.log('Backburner list updated:', newVal);
+    },
+    dailyList(newVal) {
+      //console.log('Daily list updated:', newVal);
+    }
   },
-  dailyList(newVal) {
-    //console.log('Daily list updated:', newVal);
-  }
-},
   methods: {
     handleDateChange(date) {
-      this.scheduledDate = date; 
+      this.scheduledDate = date;
       this.itemsArray[this.selectedItemIndex].scheduledDate = date;
     },
     decrementDay() {