task-manager

1
<template>
2
  <div id="app" class="container mt-4">
3
    <h1 class="mb-4">Менеджер задач</h1>
4
    <ThemeSwitcher />
5
    <ImportExport />
6
    <div class="mb-3">
7
      <input v-model="searchQuery" class="form-control mb-2" placeholder="Поиск задач" />
8
      <select v-model="filter" class="form-control mb-2">
9
        <option value="all">Все</option>
10
        <option value="completed">Выполненные</option>
11
        <option value="incomplete">Невыполненные</option>
12
      </select>
13
      <select v-model="sortBy" class="form-control mb-2">
14
        <option value="date">По дате</option>
15
        <option value="text">По названию</option>
16
      </select>
17
    </div>
18
    <button class="btn btn-primary mb-3" @click="showAddTaskModal">Добавить задачу</button>
19
    <TaskList
20
      :tasks="filteredSortedTasks"
21
      @remove-task="removeTask"
22
      @update-task="updateTask"
23
    />
24
    <AddTaskModal v-if="showAddTask" @add-task="addTask" @close="closeAddTaskModal" />
25
    <EditTaskModal
26
      v-if="showEditTask"
27
      :task="taskToEdit"
28
      @update-task="updateTask"
29
      @close="closeEditTaskModal"
30
    />
31
  </div>
32
</template>
33

34
<script>
35
import TaskList from './components/TaskList.vue';
36
import ThemeSwitcher from './components/ThemeSwitcher.vue';
37
import AddTaskModal from './components/AddTaskModal.vue';
38
import EditTaskModal from './components/EditTaskModal.vue';
39
import ImportExport from './components/ImportExport.vue';
40

41
export default {
42
  name: 'App',
43
  components: {
44
    TaskList,
45
    ThemeSwitcher,
46
    AddTaskModal,
47
    EditTaskModal,
48
    ImportExport
49
  },
50
  data() {
51
    return {
52
      tasks: this.loadTasks(),
53
      showAddTask: false,
54
      showEditTask: false,
55
      taskToEdit: null,
56
      searchQuery: '',
57
      filter: 'all',
58
      sortBy: 'date'
59
    };
60
  },
61
  computed: {
62
    filteredSortedTasks() {
63
      let filteredTasks = this.tasks.filter(task => {
64
        if (this.filter === 'completed') return task.completed;
65
        if (this.filter === 'incomplete') return !task.completed;
66
        return true;
67
      });
68

69
      filteredTasks = filteredTasks.filter(task =>
70
        task.text.toLowerCase().includes(this.searchQuery.toLowerCase())
71
      );
72

73
      if (this.sortBy === 'date') {
74
        return filteredTasks.sort((a, b) => new Date(a.dueDate) - new Date(b.dueDate));
75
      } else {
76
        return filteredTasks.sort((a, b) => a.text.localeCompare(b.text));
77
      }
78
    }
79
  },
80
  methods: {
81
    loadTasks() {
82
      const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
83
      return tasks;
84
    },
85
    saveTasks() {
86
      localStorage.setItem('tasks', JSON.stringify(this.tasks));
87
    },
88
    addTask(task) {
89
      if (task.text.trim() && task.description.trim() && task.dueDate) {
90
        this.tasks.push({ ...task, completed: false });
91
        this.saveTasks();
92
        this.closeAddTaskModal();
93
      }
94
    },
95
    removeTask(index) {
96
      this.tasks.splice(index, 1);
97
      this.saveTasks();
98
    },
99
    updateTask({ index, updatedTask }) {
100
      this.tasks.splice(index, 1, updatedTask);
101
      this.saveTasks();
102
      this.closeEditTaskModal();
103
    },
104
    showAddTaskModal() {
105
      this.showAddTask = true;
106
    },
107
    closeAddTaskModal() {
108
      this.showAddTask = false;
109
    },
110
    showEditTaskModal(task) {
111
      this.taskToEdit = task;
112
      this.showEditTask = true;
113
    },
114
    closeEditTaskModal() {
115
      this.showEditTask = false;
116
      this.taskToEdit = null;
117
    }
118
  }
119
};
120
</script>
121