feat: handle changing props

src/components/tasks/gantt-chart.vue

@@ -53,7 +53,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, nextTick, ref} from 'vue'
+import {computed, nextTick, ref, watch} from 'vue'
 import TaskCollectionService from '@/services/taskCollection'
 import {format, parse} from 'date-fns'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
@@ -85,6 +85,11 @@ const props = defineProps({
 		type: String,
 		required: true,
 	},
+	showTasksWithoutDates: {
+		type: Boolean,
+		required: false,
+		default: false,
+	},
 })
 
 const dateFromDate = computed(() => parse(props.dateFrom, 'yyyy-LL-dd', new Date()))
@@ -142,7 +147,7 @@ async function loadTasks() {
 		filter_comparator: ['greater_equals', 'less_equals'],
 		filter_value: [props.dateFrom, props.dateTo],
 		filter_concat: 'and',
-		filter_include_nulls: true,
+		filter_include_nulls: props.showTasksWithoutDates,
 	}
 
 	const taskCollectionService = new TaskCollectionService()
@@ -168,6 +173,10 @@ async function loadTasks() {
 
 loadTasks()
 
+watch(() => props.dateTo, loadTasks)
+watch(() => props.dateFrom, loadTasks)
+watch(() => props.showTasksWithoutDates, loadTasks)
+
 async function updateTask(e) {
 	const task = tasks.value.get(e.bar.ganttBarConfig.id)
 	task.startDate = e.bar.startDate

src/views/list/ListGantt.vue

@@ -28,7 +28,7 @@
 							</div>
 						</div>
 					</div>
-					<fancycheckbox class="is-block" v-model="showTaskswithoutDates">
+					<fancycheckbox class="is-block" v-model="showTasksWithoutDates">
 						{{ $t('list.gantt.showTasksWithoutDates') }}
 					</fancycheckbox>
 				</div>
@@ -44,6 +44,7 @@
 						:date-to="dateTo"
 						:precision="precision"
 						:list-id="props.listId"
+						:show-tasks-without-dates="showTasksWithoutDates"
 					/>
 
 				</card>
@@ -71,7 +72,7 @@ const props = defineProps({
 	},
 })
 
-const showTaskswithoutDates = ref(false)
+const showTasksWithoutDates = ref(false)
 const precision = ref('day')
 
 const now = ref(new Date())