taskview-community/web/src/composables/useTaskDetailPanel.ts

import { ref, computed, watch } from 'vue'
import { createSharedComposable } from '@vueuse/core'
import { useRoute, useRouter } from 'vue-router'
import { useTasksStore } from '@/stores/tasks.store'
import { useBaseScreenStore } from '@/stores/base-screen.store'

const _useTaskDetailPanel = () => {
  const tasksStore = useTasksStore()
  const baseScreenStore = useBaseScreenStore()
  const route = useRoute()
  const router = useRouter()
  const activeTaskId = ref<number | null>(null)
  const initialEndDate = ref<string | null>(null)

  const isOpen = computed({
    get: () => activeTaskId.value !== null,
    set: (value: boolean) => {
      if (!value) {
        closeTask()
      }
    },
  })

  // When browser back removes taskId from URL — close panel without navigating
  watch(
    () => route.params.taskId,
    (taskId) => {
      if (!taskId && activeTaskId.value !== null && route.name === 'user') {
        syncBaseScreen()
        activeTaskId.value = null
        tasksStore.selectedTask = null
      }
    },
  )

  async function openTask(id: number) {
    activeTaskId.value = id
    await tasksStore.fetchTaskById(id)
    initialEndDate.value = tasksStore.selectedTask?.endDate ?? null

    // Update URL with taskId only when a project is already selected
    const task = tasksStore.selectedTask
    if (route.name === 'user' && route.params.projectId && task) {
      const projectId = String(route.params.projectId)
      const listId = String(route.params.listId)
      const taskId = String(task.id)

      if (route.params.taskId !== taskId) {
        // Switching from one open task to another (e.g. via dependencies) replaces
        // the history entry, so back/close returns to the list, not the previous task
        const target = { name: 'user', params: { projectId, listId, taskId } }
        if (route.params.taskId) {
          router.replace(target)
        } else {
          router.push(target)
        }
      }
    }
  }

  function syncBaseScreen() {
    if (!baseScreenStore.wasCalled) return

    const task = tasksStore.selectedTask
    if (!task) return

    const dateChanged = (task.endDate ?? null) !== initialEndDate.value

    if (dateChanged) {
      baseScreenStore.fetchAllState()
    } else {
      baseScreenStore.syncTask(task)
    }
  }

  function closeTask() {
    // On user route with taskId — remove taskId from the URL; the watcher clears state.
    if (route.name === 'user' && route.params.taskId) {
      syncBaseScreen()
      if (window.history.state?.back != null) {
        router.back()
      } else {
        router.replace({ name: 'user', params: { ...route.params, taskId: undefined } })
      }
      return
    }

    // On kanban/graph or no taskId in URL — just clear state
    syncBaseScreen()
    activeTaskId.value = null
    tasksStore.selectedTask = null
  }

  return {
    activeTaskId,
    isOpen,
    openTask,
    closeTask,
  }
}

export const useTaskDetailPanel = createSharedComposable(_useTaskDetailPanel)