From 98163fdb09266d509898fc36221de3e639d11dd6 Mon Sep 17 00:00:00 2001
From: Guz <43732358+Guz013@users.noreply.github.com>
Date: Thu, 17 Feb 2022 10:00:41 -0300
Subject: [PATCH] fix(subTasks): Fixed subTaskLists not being properly updated.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix ´SubTaskList´ components not being properly rendered when a task was deleted.

Also added a `v-if` and `Lazy` prefix for ´SubTaskList´ components.
---
 package.json                     |  2 +-
 src/components/Task/TaskComp.vue | 18 +++++++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 5a31000..2d39a20 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "ToToday",
-	"version": "1.0.2",
+	"version": "1.0.3",
 	"private": true,
 	"scripts": {
 		"dev": "nuxt",
diff --git a/src/components/Task/TaskComp.vue b/src/components/Task/TaskComp.vue
index ced39d7..7dd0642 100644
--- a/src/components/Task/TaskComp.vue
+++ b/src/components/Task/TaskComp.vue
@@ -33,7 +33,7 @@
 						:class="`${
 							openSubTasks ? 'openedSubtasksButton' : 'closedSubtasksButton'
 						} subtasksButton`"
-						@click="openSubTasks = !openSubTasks"
+						@click="openSubTasksFunc()"
 					>
 						<IconDropdown class="dropdownIcon" />
 					</button>
@@ -43,7 +43,7 @@
 				</nav>
 			</div>
 		</div>
-		<SubTaskList :parent="id" :opened="openSubTasks" />
+		<LazySubTaskList v-if="showSubTasks" :parent="id" :opened="openSubTasks" />
 	</li>
 </template>
 
@@ -78,6 +78,7 @@ export default Vue.extend({
 	data() {
 		return {
 			openSubTasks: false,
+			showSubTasks: false,
 			preventAnim: true,
 		};
 	},
@@ -87,6 +88,17 @@ export default Vue.extend({
 		}, 1000);
 	},
 	methods: {
+		openSubTasksFunc() {
+			if (!this.openSubTasks) {
+				this.openSubTasks = true;
+				this.showSubTasks = true;
+			} else {
+				this.openSubTasks = false;
+				setTimeout(() => {
+					this.showSubTasks = false;
+				}, 510);
+			}
+		},
 		changeState() {
 			const element = document.querySelector(
 				`input#checkboxInput${this.id}`
@@ -102,7 +114,7 @@ export default Vue.extend({
 		deleteTask() {
 			const localTasks: Task[] = sm.get('tasks');
 			localTasks.splice(this.id, 1);
-			sm.set('tasks', localTasks, ['taskList', 'taskState']);
+			sm.set('tasks', localTasks, [`subTaskList-${this.id}`, 'taskList', 'taskState']);
 		},
 	},
 });