Skip to content

Commit f449a21

Browse files
Mirror-ImageMirror-Image
committed
many things happened this night
1 parent ca883f0 commit f449a21

File tree

10 files changed

+284
-73
lines changed

10 files changed

+284
-73
lines changed

‎assets/css/style.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -348,6 +348,10 @@
348348
background-color: rgba(252, 252, 252, 0.8);
349349
}
350350

351+
.content__main-results-list-item[markedDone="true"] {
352+
background-color: #57c532;
353+
}
354+
351355
.content__main-results-list-item:hover a {
352356
visibility: visible;
353357
}
@@ -356,7 +360,12 @@
356360
display: none;
357361
}
358362

363+
#edit-item-button {
364+
display: inline-block;
365+
}
366+
359367
.content__main-results-list-item-text {
368+
padding: 7px 0;
360369
max-width: 70%;
361370
text-align: justify;
362371
word-wrap: break-word;

‎assets/js/buttons-component.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import ListComponent from "./list-component.js";
2+
import store from "./store/index.js";
3+
import {request} from "./network.js";
4+
5+
6+
export default class ButtonsComponent extends ListComponent{
7+
constructor() {
8+
super();
9+
this.itemsArray = document
10+
.getElementsByClassName('content__main-results-list-item-buttons');
11+
}
12+
13+
onInitButtons() {
14+
console.log('ButtonsComponent initialized');
15+
this.renderButtons();
16+
this.setupListenersButtons(this.anchor);
17+
this.onInitItem();
18+
}
19+
20+
markedDone(id) {
21+
document.getElementById(`${id}`).style.backgroundColor = '#57c532';
22+
request.markDoneItemRequest(id, true).then( () => {
23+
request.readSingleTodoRequest(id).then(obj => {
24+
store.dispatch('addItem', {
25+
createDate: obj.createDate,
26+
completed: obj.completed,
27+
completedAt: obj.completedAt,
28+
_id: obj._id,
29+
text: obj.text,
30+
creator: obj.creator,
31+
});
32+
33+
this.renderList();
34+
this.onInitButtons();
35+
});
36+
});
37+
}
38+
39+
renderButtons(value) {
40+
if (value) { // вызывается когда нужно отрисовать только один конкретный элемент
41+
value.lastElementChild.innerHTML = `
42+
<a class="content__main-results-list-item-buttons-done done-button"></a>
43+
<a class="content__main-results-list-item-buttons-delete delete-button"></a>
44+
<a class="content__main-results-list-item-buttons-edit edit-button"></a>
45+
`;
46+
this.setupListenersButtons(value);
47+
48+
} else {
49+
Array.prototype.forEach.call(this.itemsArray, item => item.innerHTML = `
50+
<a class="content__main-results-list-item-buttons-done done-button"></a>
51+
<a class="content__main-results-list-item-buttons-delete delete-button"></a>
52+
<a class="content__main-results-list-item-buttons-edit edit-button"></a>
53+
`);
54+
}
55+
56+
console.log( 'ButtonsComponent rendered' );
57+
}
58+
59+
setupListenersButtons(value) {
60+
// console.log( 12 );
61+
// console.log( value );
62+
value.querySelectorAll('.delete-button')
63+
.forEach((button, id) => {
64+
let idNumber = button.parentElement.parentElement.id;
65+
button.addEventListener('click', async () => {
66+
store.dispatch('removeItem', {id});
67+
await request.deleteItemRequest(idNumber);
68+
this.renderList();
69+
this.onInitButtons();
70+
})
71+
});
72+
73+
value.querySelectorAll('.done-button')
74+
.forEach((button, id) => {
75+
let idNumber = button.parentElement.parentElement.id;
76+
button.addEventListener('click', async () => {
77+
store.dispatch('editItem', {id});
78+
this.markedDone(idNumber);
79+
})
80+
});
81+
}
82+
}

‎assets/js/form-component.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default class FormComponent extends ContentComponent {
4747

4848
this.form.focus();
4949
this.form.value = '';
50-
await request.createItem(value, date, false);
50+
await request.createItemRequest(value, date, false);
5151
this.onInitList();
5252

5353
} else {

‎assets/js/item-component.js‎

Lines changed: 112 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,137 @@
1-
import ListComponent from "./list-component.js";
21
import store from "./store/index.js";
32
import {request} from "./network.js";
3+
import ButtonsComponent from "./buttons-component.js";
44

5-
export default class ItemComponent extends ListComponent {
5+
export default class ItemComponent extends ButtonsComponent {
66
constructor() {
77
super();
8-
this.itemsArray= document
9-
.getElementsByClassName('content__main-results-list-item-buttons');
108

119
this.itemAnchor = document
1210
.querySelector('.content__main-results-list');
1311

1412

1513
}
1614

17-
onInit() {
15+
onInitItem(item, value) {
1816
console.log( 'ItemComponent initialized' );
19-
this.render();
20-
17+
this.render(item, value);
18+
this.setupListeners(item);
2119
}
2220

23-
editItem() {
21+
/*
22+
TODO: найти причину и исправить ошибку
23+
(описание): после срабатывания 3го раза продряд условия if, консоль выдает
24+
ошибку, окно редактора не открывается, если завершать редктирование (менять
25+
значение элемента), то ошибка не всплывает.
26+
*/
27+
// Подставляет в элемент списка форму для редактирования
28+
onReadyToEditItem(item, value) {
29+
const list = document.querySelector('.content__main-results-list');
30+
let editingItem = list.getElementsByClassName('edit-list-form');
31+
console.log( editingItem );
32+
33+
/*
34+
Условие If срабатывает тогда, когда у нас уже один элемент открыт в режиме
35+
редактирования но мы хотим незавершая его переключиться на редактирование
36+
другого элемента
37+
*/
38+
if (editingItem.length) {
39+
let anchor = editingItem[0].parentElement;
40+
let value = editingItem[0].firstElementChild.getAttribute('value');
41+
// console.log( anchor );
42+
// console.log( value );
43+
this.renderList(value, anchor);
44+
this.renderButtons(anchor);
45+
this.render(anchor.lastElementChild);
2446

47+
} else {
48+
this.onInitItem(item, value);
49+
console.log( item, value );
50+
}
2551
}
2652

27-
render() {
28-
console.log( 'ItemComponent rendered' );
29-
// console.log( this.anchorItem );
30-
Array.prototype.forEach.call(this.itemsArray, item => item.innerHTML = `
31-
<a class="content__main-results-list-item-buttons-done done-button"></a>
32-
<a class="content__main-results-list-item-buttons-delete delete-button"></a>
33-
<a class="content__main-results-list-item-buttons-edit edit-button"></a>
34-
`);
35-
this.setupListeners()
53+
async applyEditingItem(event) {
54+
if (event.key === 'Enter' || event.type === 'click') {
55+
event.preventDefault();
56+
57+
let item = document.querySelector('#edit-item-input');
58+
let value = item.value.trim();
59+
let anchor = item.parentElement.parentElement;
60+
let id = item.parentElement.parentElement.id;
61+
62+
if (value.length >= 5) {
63+
64+
this.value = '';
65+
await request.updateItemRequest(id, false, value);
66+
67+
this.renderList(value, anchor);
68+
this.onInitButtons();
69+
70+
request.readSingleTodoRequest(id).then(obj => {
71+
store.dispatch('addItem', {
72+
createDate: obj.createDate,
73+
completed: obj.completed,
74+
completedAt: obj.completedAt,
75+
id: obj._id,
76+
text: obj.text,
77+
creator: obj.creator,
78+
});
79+
});
80+
} else {
81+
// TODO: rework it!
82+
alert('5 characters minimum');
83+
this.form.focus();
84+
}
85+
}
86+
};
87+
88+
render(item, value) {
89+
console.log( value, item );
90+
if (item && value) {
91+
console.log( value, item.parentElement );
92+
item.parentElement.innerHTML = `
93+
<form class="content__main-header-form-block edit-list-form">
94+
<input id="edit-item-input" class="content__main-header-form-block-input"
95+
type="text" placeholder="Type your note" value="${value}">
96+
<a id="edit-item-button"
97+
class="content__main-header-form-block-button">Add</a>
98+
</form>
99+
`;
100+
console.log( 'ItemComponent rendered' );
101+
}
36102
}
37103

38-
setupListeners() {
39-
this.anchor.querySelectorAll('.delete-button').forEach((button, id) => {
40-
let idNumber = button.parentElement.parentElement.id;
41-
button.addEventListener('click', async () => {
42-
store.dispatch('removeItem', {id});
43-
await request.deleteItem(idNumber);
104+
setupListeners(value) {
105+
if (value) {
106+
const form = this.itemAnchor.querySelector('.content__main-header-form-block');
107+
const editButton = document.getElementById('edit-item-button');
44108

45-
this.renderList();
46-
})
109+
form.addEventListener('keydown', this.applyEditingItem.bind(this));
110+
editButton.addEventListener('click', this.applyEditingItem.bind(this));
47111
}
48112

49-
)
50-
// this.anchor.querySelectorAll('.delete-button').forEach
51-
// console.log( this.anchor.getElementsByClassName('delete-button') );
52-
// Array.prototype.forEach.call(this.anchor.getElementsByClassName('delete-button'), (button, id) => {
53-
//
54-
// let a = button.parentElement.parentElement.id;
55-
//
56-
// button.addEventListener('click', (function(){
57-
// store.dispatch('removeItem', {id});
58-
// // console.log( button.parentElement.parentElement.id );
59-
//
60-
// console.log( a );
61-
//
62-
// request.deleteItem(a);
63-
// this.renderList();
64-
//
65-
// }).bind(this)
66-
// )
67-
//
68-
// }
69-
//
70-
//
71-
// )
113+
// Добавляем событие на кнопку списка, которое открывает редактор элемента
114+
// (кнопка доступна только на мобильных устройствах)
115+
this.itemAnchor.querySelectorAll('.edit-button')
116+
.forEach((listItem, id) => {
117+
let itemText = listItem.parentElement.previousElementSibling.innerText;
118+
let editedItem = listItem.parentElement;
119+
120+
listItem.addEventListener('click', () => {
121+
store.dispatch('editItem', {id});
122+
this.onReadyToEditItem(editedItem, itemText);
123+
})
124+
});
125+
126+
// Добавляем событие на элемент списка, которое открывает редактор элемента
127+
this.itemAnchor.querySelectorAll('.content__main-results-list-item-text')
128+
.forEach((listItem, id) => {
129+
let itemText = listItem.innerText;
130+
131+
listItem.addEventListener('click', () => {
132+
store.dispatch('editItem', {id});
133+
this.onReadyToEditItem(listItem, itemText);
134+
})
135+
});
72136
}
73137
}

‎assets/js/list-component.js‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,19 @@ export default class ListComponent extends FormComponent {
1313

1414
onInitList() {
1515
console.log( 'ListComponent initialized' );
16-
this.data = request.readTodosRequest();
16+
this.data = request.readAllTodosRequest();
1717
}
1818

1919
set data(value) {
2020
value.then(obj => {
2121
store.props = obj;
2222
console.log( store.props );
23-
this.renderList(store.props);
23+
this.renderList();
24+
this.onInitButtons();
2425
});
2526
}
2627

27-
renderList(value) {
28+
renderList(value, anchor) {
2829
console.log( 'ListComponent rendered' );
2930
if (store.props.length === 0) {
3031
this.anchorList.innerHTML = `
@@ -35,16 +36,19 @@ export default class ListComponent extends FormComponent {
3536
</li>
3637
</ul>
3738
`;
39+
} else if (value) {
40+
anchor.innerHTML = `
41+
<p class="content__main-results-list-item-text">${value}</p>
42+
<div class="content__main-results-list-item-buttons"></div>
43+
`;
3844
} else {
3945
this.anchorList.innerHTML = `
4046
<ul>
4147
${store.props.map(todoItem => `
4248
<li class="content__main-results-list-item" id="${todoItem._id}"
43-
executionStatus="${todoItem.completed}">
49+
executionStatus="${todoItem.completed}" markedDone="${todoItem.completed}">
4450
<p class="content__main-results-list-item-text">${todoItem.text}</p>
45-
<div class="content__main-results-list-item-buttons">
46-
47-
</div>
51+
<div class="content__main-results-list-item-buttons"></div>
4852
</li>
4953
`).join('')}
5054
</ul>

‎assets/js/login.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,13 @@ export default class LoginComponent extends Component{
1111
this.templateElement = document.getElementById('login-page')
1212
.content.cloneNode(true);
1313
this.anchor.appendChild(this.templateElement);
14-
this.setupListeners();
14+
this.onInit();
1515
}
1616

1717
onInit() {
1818
console.log( 'LoginComponent initialized' );
1919
request.checkAuthorizationRequest(this.settings);
20+
this.setupListeners();
2021
}
2122

2223
handleAuthorization(event) {

0 commit comments

Comments
 (0)