Skip to content

Commit 5b28e56

Browse files
philwing100philwing100
committed
e
1 parent 155d1f6 commit 5b28e56

File tree

2 files changed

+95
-39
lines changed

2 files changed

+95
-39
lines changed

‎src/components/ListItems/ListElement.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@
128128
.item-text {
129129
margin-left: 10px;
130130
outline: none;
131+
word-break: break-all;
131132
}
132133

133134
.ListItem li {

‎src/components/ListItems/ListElement.vue

Lines changed: 94 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@
44
<h2 @blur="updateTitle" contenteditable="true" ref="titleInput" @keydown.enter.prevent="" spellcheck="false">
55
{{ title }}
66
</h2>
7-
<CheckedBox label="Due Date?" @checkbox-toggled="handleCheckboxToggled"/>
8-
<DateInput v-if="dueDate" @date-selected="handleDateChange" />
7+
<CheckedBox label="Due Date?" @checkbox-toggled="handleCheckboxToggled" />
8+
<DateInput v-if="dueDateCheckbox" @date-selected="handleDateChange" />
99

10-
<CheckedBox label="Recurring task?" @checkbox-toggled="handleRecurringTask"/>
11-
<!--Later: Recurring task checked = make ui and functions appear for making the list appear every day-->
10+
<CheckedBox label="Recurring task?" @checkbox-toggled="handleRecurringTask" />
11+
<!--Later: Recurring task checked = make ui and functions appear for making the list appear every day-->
1212

1313
<button v-if="debugMode" @click="clearStorage">clearStorage</button>
1414
</div>
1515
<div>
1616
<div class="input-container">
17-
<button @click="addItem" class="add-button">Remove</button>
17+
<button @click="removeItem" class="add-button">Remove</button>
1818
</div>
1919
<div>
2020
</div>
@@ -24,11 +24,12 @@
2424
<li v-for="(item, index) in itemsArray" :key="index" draggable="true" @dragstart="dragStart(index)"
2525
@dragover="dragOver" @drop="drop(index)">
2626
<div class="item-container" @click="focusEditable(index)">
27-
<button class="remove-button" @click="removeItem(index)">X</button>
27+
<span v-if="index === selectedItemIndex">✔️</span>
28+
<CheckedBox label="" @checkbox-toggled="completeItem(index)" />
2829
<div class="text-cursor item-text" ref="itemSpan" contenteditable="true"
2930
@keydown.enter.prevent="handleEnter(index, $event)" @keydown.backspace="handleBackspace(index, $event)"
3031
@keydown.up="handleArrowUp(index, $event)" @keydown.down="handleArrowDown(index, $event)"
31-
@blur="updateItem(index, $event)" spellcheck="false">{{ item }}</div>
32+
@blur="updateItem(index, $event)" spellcheck="false">{{ item.textString }}</div>
3233
</div>
3334
</li>
3435
</ul>
@@ -45,7 +46,7 @@
4546
<script>
4647
import DateInput from './DateInput.vue';
4748
import CheckedBox from './CheckBox.vue';
48-
import './ListElement.css';
49+
import './ListElement.css';
4950
export default {
5051
name: 'ListElement',
5152
props: {
@@ -57,15 +58,30 @@ export default {
5758
data() {
5859
return {
5960
title: this.listName,
60-
newItem: '',
6161
itemsArray: [],
6262
titlesArray: [],
63+
completedItemsArray: [],
64+
selectedItemIndex: 0,
6365
draggedIndex: null,
6466
isDropdownOpen: false,
65-
selectedMode: 'Mode 1',
66-
debugMode: false,
67-
dueDate: false,
68-
recurringTask: true
67+
debugMode: true,
68+
69+
textString: '',
70+
dueDateCheckbox: false,
71+
dueDateDate: null,
72+
dueDateTime: null,
73+
taskTimeEstimate: null,
74+
recurringTask: false,
75+
recurringTaskEndDate: null,
76+
addToCalendarCheckbox: false,
77+
78+
defaultDueDateCheckbox: false,
79+
defaultDueDateDate: null,
80+
defaultDueDateTime: null,
81+
defaultTaskTimeEstimate: null,
82+
defaultRecurringTask: false,
83+
defaultRecurringTaskEndDate: null,
84+
defaultAddToCalendarCheckbox: false
6985
};
7086
},
7187
created() {
@@ -75,6 +91,9 @@ export default {
7591
components: {
7692
DateInput,
7793
CheckedBox
94+
},
95+
computed: {
96+
7897
},
7998
methods: {
8099
loadInitialData() {
@@ -102,10 +121,13 @@ export default {
102121
this.selectedDate = date; // Update the parent component's selectedDate
103122
},
104123
handleCheckboxToggled() {
105-
this.dueDate= !this.dueDate;
124+
this.dueDateCheckbox = !this.dueDateCheckbox;
125+
},
126+
handleRecurringTask() {
127+
this.recurringTask = !this.recurringTask;
106128
},
107-
handleRecurringTask(){
108-
this.recurringTask =!this.recurringTask;
129+
completeItem(index) {
130+
//Adds item to the dropdownlist
109131
},
110132
updateTitle() {
111133
this.saveList();//Save the current list items to the title before changing the title
@@ -126,23 +148,42 @@ export default {
126148
this.saveTitlesArray();
127149
}
128150
localStorage.setItem('title', this.title);
129-
let newItems = localStorage.getItem(this.title)
130-
this.itemsArray = JSON.parse(newItems);
151+
let textStrings = localStorage.getItem(this.title)
152+
this.itemsArray = JSON.parse(textStrings);
131153
},
132154
saveList() {
133155
localStorage.setItem(this.title, JSON.stringify(this.itemsArray));
134156
},
135157
saveTitlesArray() {
136158
localStorage.setItem('titlesArray', JSON.stringify(this.titlesArray));
137159
},
138-
addItem() {
139-
if (this.newItem.trim() !== '') {
140-
if (!this.itemsArray) {
141-
this.itemsArray = [];
142-
}
143-
this.itemsArray.push(this.newItem.trim());
144-
this.newItem = '';
145-
this.saveList();
160+
loadDefaultItemValues() {
161+
//future makes api call to get this user's default values
162+
},
163+
createNewItem(text) {
164+
return {
165+
textString: text,
166+
dueDateCheckbox: false,
167+
dueDateDate: null,
168+
dueDateTime: null,
169+
taskTimeEstimate: null,
170+
recurringTask: false,
171+
recurringTaskEndDate: null,
172+
addToCalendarCheckbox: false,
173+
}
174+
},
175+
createItemWithExistingValues(text) {
176+
return {
177+
178+
//These could all instead be replaced with
179+
textString: text,
180+
dueDateCheckbox: this.dueDateCheckbox,
181+
dueDateDate: this.dueDateDate,
182+
dueDateTime: this.dueDateTime,
183+
taskTimeEstimate: this.taskTimeEstimate,
184+
recurringTask: this.recurringTask,
185+
recurringTaskEndDate: this.recurringTaskEndDate,
186+
addToCalendarCheckbox: this.addToCalendarCheckbox,
146187
}
147188
},
148189
dragStart(index) {
@@ -158,7 +199,21 @@ export default {
158199
this.draggedIndex = null;
159200
this.saveList();
160201
},
202+
selectCurrentIndex(index) {
203+
this.selectedItemIndex = index;
204+
},/*
205+
populateCurrentValues(index) {
206+
this.textString = this.itemsArray.textString[index];
207+
this.dueDateCheckbox = this.itemsArray.textString[index];
208+
this.dueDateDate = this.itemsArray[index];
209+
this.dueDateTime = this.itemsArray[index];
210+
this.taskTimeEstimate = this.itemsArray[index];
211+
this.recurringTask = this.itemsArray[index];
212+
this.recurringTaskEndDate = this.itemsArray[index];
213+
this.addToCalendarCheckbox = this.itemsArray[index];
214+
},*/
161215
focusEditable(index, position = null) {
216+
this.selectedItemIndex = index;
162217
this.$nextTick(() => {
163218
const element = this.$refs.itemSpan[index];
164219
if (element) {
@@ -180,8 +235,8 @@ export default {
180235
const textBeforeCaret = text.substring(0, caretPosition);
181236
const textAfterCaret = text.substring(caretPosition);
182237
183-
this.itemsArray.splice(index, 1, textBeforeCaret);
184-
this.itemsArray.splice(index + 1, 0, textAfterCaret);
238+
this.itemsArray.splice(index, 1, this.createItemWithExistingValues(textBeforeCaret));
239+
this.itemsArray.splice(index + 1, 0, this.createItemWithExistingValues(textAfterCaret));
185240
186241
this.$nextTick(() => {
187242
this.focusEditable(index + 1, 0);
@@ -196,22 +251,22 @@ export default {
196251
const previousText = this.itemsArray[index - 1];
197252
const newText = previousText + currentText;
198253
199-
this.itemsArray.splice(index - 1, 1, newText);
254+
this.itemsArray.splice(index - 1, 1, this.createItemWithExistingValues(newText));
200255
this.itemsArray.splice(index, 1);
201256
202257
this.$nextTick(() => {
203258
const previousElement = this.$refs.itemSpan[index - 1];
204259
if (previousElement) {
205260
previousElement.focus();
206261
this.setCaretPosition(previousElement, previousText.length);
207-
this.removeItem(index);
262+
this.removeItem();
208263
}
209264
this.saveList();
210265
});
211266
}
212267
},
213268
handleArrowUp(index, event) {
214-
if (event.target.innerText.length === 0) {
269+
if (event.target.innerText.length === 0 && index - 1 >= 0) {
215270
event.preventDefault(); // Prevent default arrow key behavior
216271
this.focusEditable(index - 1, this.itemsArray[index - 1].length);
217272
}
@@ -223,13 +278,13 @@ export default {
223278
// Check if the caret is in the top row
224279
const isTopRow = rect.top === elementRect.top;
225280
226-
if (isTopRow && index > 0 || event.target.innerText.length === 0) {
281+
if ((isTopRow || event.target.innerText.length === 0) && index - 1 >= 0) {
227282
event.preventDefault(); // Prevent default arrow key behavior
228283
this.focusEditable(index - 1, this.itemsArray[index - 1].length);
229284
}
230285
},
231286
handleArrowDown(index, event) {
232-
if (event.target.innerText.length === 0) {
287+
if (event.target.innerText.length === 0 && index + 1 < this.itemsArray.length) {
233288
event.preventDefault(); // Prevent default arrow key behavior
234289
this.focusEditable(index + 1, 0);
235290
}
@@ -240,17 +295,17 @@ export default {
240295
241296
const isBottomRow = Math.abs(rect.bottom - elementRect.bottom) < 1;
242297
243-
if (isBottomRow && index < this.itemsArray.length || event.target.innerText.length === 0) {
298+
if ((isBottomRow || event.target.innerText.length === 0) && index + 1 < this.itemsArray.length) {
244299
event.preventDefault(); // Prevent default arrow key behavior
245300
this.focusEditable(index + 1, 0);
246301
}
247302
},
248303
updateItem(index, event) {
249-
this.itemsArray.splice(index, 1, event.target.innerText);
304+
this.itemsArray.splice(index, 1, this.createNewItem(event.target.innerText));
250305
this.saveList();
251306
},
252-
removeItem(index) {
253-
this.itemsArray.splice(index, 1);
307+
removeItem() {
308+
this.itemsArray.splice(this.selectedItemIndex, 1);
254309
this.saveList();
255310
256311
// Ensure at least one empty item remains
@@ -260,7 +315,7 @@ export default {
260315
261316
// Check if the array is not empty and the index is valid before focusing
262317
if (this.itemsArray.length > 0) {
263-
const newIndex = index === this.itemsArray.length ? index - 1 : index;
318+
const newIndex = this.selectedItemIndex === this.itemsArray.length ? this.selectedItemIndex - 1 : this.selectedItemIndex;
264319
this.$nextTick(() => {
265320
this.focusEditable(newIndex);
266321
});
@@ -285,7 +340,7 @@ export default {
285340
localStorage.clear();
286341
this.title = 'Daily List'
287342
this.itemsArray = this.titlesArray = [];
288-
this.newItem = '';
343+
this.textString = '';
289344
this.loadInitialData();
290345
},
291346
toggleDropdown() {

0 commit comments

Comments
 (0)