frontend/src/views/TasksView.vue - master - Codename-Nik/WebApp

frontend/src/views/TasksView.vue
162 строки4 KB
Nikolay Pokhodnya
first commit
03 ноя 2025, 19:47
03 ноя 2025, 19:47a9fbdee
<template>
  <div>
    <v-row>
      <v-col cols="12">
        <div class="d-flex justify-space-between align-center">
          <h1 class="text-h4 font-weight-bold">Задачи</h1>
          <v-btn color="primary" prepend-icon="mdi-plus" @click="showCreateDialog = true">
            Новая задача
          </v-btn>
        </div>
      </v-col>
    </v-row>

    <v-card class="mb-4">
      <v-card-text>
        <v-row>
          <v-col cols="12" sm="4">
            <v-select
              label="Статус"
              :items="statusOptions"
              v-model="filters.status"
              clearable
              @update:model-value="handleFilterChange"
            ></v-select>
          </v-col>
          <v-col cols="12" sm="4">
            <v-select
              label="Приоритет"
              :items="priorityOptions"
              v-model="filters.priority"
              clearable
              @update:model-value="handleFilterChange"
            ></v-select>
          </v-col>
          <v-col cols="12" sm="4">
            <v-text-field
              label="Поиск"
              prepend-inner-icon="mdi-magnify"
              v-model="filters.search"
              @input="handleSearchChange"
            ></v-text-field>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>

    <v-card>
      <v-card-text>
        <TaskList 
          :tasks="tasks.tasks" 
          :loading="tasks.isLoading" 
          @create-task="showCreateDialog = true"
        />
      </v-card-text>
    </v-card>

    <v-dialog v-model="showCreateDialog" max-width="600">
      <TaskForm
        @submit="handleCreateTask"
        @cancel="showCreateDialog = false"
      />
    </v-dialog>

    <ConfirmDialog
      v-model="showDeleteDialog"
      title="Удаление задачи"
      :message="deleteMessage"
      confirm-text="Удалить"
      icon="mdi-delete"
      color="error"
      :loading="deleteLoading"
      @confirm="handleDeleteConfirm"
      @cancel="showDeleteDialog = false"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useTasksStore } from '@/stores/tasks'
import TaskList from '@/components/TaskList.vue'
import TaskForm from '@/components/TaskForm.vue'
import ConfirmDialog from '@/components/ConfirmDialog.vue'
import type { Task, TaskCreateData, TaskFilters } from '@/types/tasks'

const tasks = useTasksStore()
const showCreateDialog = ref(false)
const showDeleteDialog = ref(false)
const deleteLoading = ref(false)
const taskToDelete = ref<Task | null>(null)

const filters = reactive<TaskFilters>({
  status: '',
  priority: '',
  search: ''
})

const statusOptions = [
  { title: 'To Do', value: 'todo' },
  { title: 'In Progress', value: 'in_progress' },
  { title: 'Review', value: 'review' },
  { title: 'Done', value: 'done' }
]

const priorityOptions = [
  { title: 'Low', value: 'low' },
  { title: 'Medium', value: 'medium' },
  { title: 'High', value: 'high' },
  { title: 'Urgent', value: 'urgent' }
]

const deleteMessage = computed(() => {
  return taskToDelete.value 
    ? `Вы уверены, что хотите удалить задачу "${taskToDelete.value.title}"?`
    : 'Вы уверены, что хотите удалить задачу?'
})

const handleFilterChange = () => {
  tasks.fetchTasks(filters)
}

let searchTimeout: number
const handleSearchChange = () => {
  clearTimeout(searchTimeout)
  searchTimeout = setTimeout(() => {
    tasks.fetchTasks(filters)
  }, 500)
}

const handleCreateTask = async (taskData: TaskCreateData) => {
  try {
    await tasks.createTask(taskData)
    showCreateDialog.value = false
  } catch (error) {
    console.error('Error creating task:', error)
  }
}

const handleDeleteTask = (task: Task) => {
  taskToDelete.value = task
  showDeleteDialog.value = true
}

const handleDeleteConfirm = async () => {
  if (taskToDelete.value) {
    deleteLoading.value = true
    try {
      await tasks.deleteTask(taskToDelete.value.id)
      showDeleteDialog.value = false
      taskToDelete.value = null
    } catch (error) {
      console.error('Error deleting task:', error)
    } finally {
      deleteLoading.value = false
    }
  }
}

onMounted(() => {
  tasks.fetchTasks()
})
</script>