FilesExpand file tree

 main

/

todolist.js

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

67 lines (53 loc) · 2.26 KB

 main

/

todolist.js

Top

File metadata and controls

• Code
• Blame

67 lines (53 loc) · 2.26 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

'use strict'

import TaskForm from "./components/taskForm.js";

import Button from "./components/button.js";

import Container from "./components/container.js";

import Task from "./components/task.js";

import TaskList from "./components/tasks.js";

import TaskData, { TaskItem } from "./app.state.js";

import Dialog from "./components/dialog.js";

var toDoApp = document.querySelector('#todoapp');

function openTaskForm(task) {

var dialogTitle = document.createElement('h4');

dialogTitle.innerText = `${task ? 'Edit' : 'Add'} Task`;

var closeDialogButton = Button({label:"×", onClick:()=>dialog.close()});

var addTaskForm = TaskForm({

onAdd: (taskItem) => {

let taskIndex = TaskData.tasks.findIndex(tsk=>tsk.id == taskItem.id);

if(taskIndex == -1) taskIndex = TaskData.tasks.length;

const taskListItem = Task({

task:taskItem,

onRemove: () => TaskData.removeTask(taskIndex),

onMark: () => TaskData.markAs(TaskData.tasks.findIndex(tsk=>tsk.id == taskItem.id)),

onEdit: () => openTaskForm(TaskData.tasks.find(tsk=>tsk.id == taskItem.id))

});

if (taskItem.status === 'edited') {

TaskData.editTask(taskIndex, { ...taskItem, status: 'not-done' });

taskLIst.replaceChild(taskListItem, taskLIst.childNodes.item(taskIndex));

// taskLIst.childNodes.item(taskIndex).querySelector('div').innerHTML = taskItem.title;

}

else {

TaskData.addTask(taskItem);

taskLIst.append(taskListItem);

}

dialog.close();

},

defultTask: task

});

var dialogHeader = Container(dialogTitle, Container(closeDialogButton));

dialogHeader.classList.add('dialog-header');

const dialog = Dialog(dialogHeader, addTaskForm);

toDoApp.append(dialog);

dialog.showModal();

}

var taskLIst = TaskList(TaskData.tasks.map((tsk, i) => Task({

task:tsk,

onRemove: () => TaskData.removeTask(i),

onMark: () => TaskData.markAs(i),

onEdit: () => openTaskForm(tsk)

})));

var actionSection = Container(Button({

label: "Add Task",

onClick: ()=>openTaskForm()

}));

toDoApp.append(actionSection, Container(taskLIst));