Newer
Older
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
"use strict";
const { fetch_article_by_title, fetch_delete_article } = require("../xhr");
const CreateArticleForm = require("./create-article-form");
class UpdateArticleForm {
constructor() {
this.state = {
search_article_title: "",
search_result: {},
article_to_update: {},
}
}
reset() {
this.state = {
search_article_title: "",
search_result: {},
article_to_update: {},
};
}
handle_search_article() {
fetch_article_by_title(this.state.search_article_title)
.then(res => {
this.state.search_result = res;
this.state.article_to_update = {};
this.refresh_search_result();
this.refresh_update_form();
})
.catch(err => alert(err));
}
handle_select_result() {
this.state.article_to_update = { ...this.state.search_result };
this.refresh_update_form();
}
handle_delete_article() {
fetch_delete_article(this.state.search_result._id.$oid)
.then(res => {
alert(res);
this.reset();
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
})
.catch(err => alert(err))
}
render_search() {
return {
tag: "form",
onsubmit: e => {
e.preventDefault();
this.handle_search_article();
},
style_rules: { display: "flex", gap: "10px", width: "100%" },
contents: [
{
tag: "input", type: "text", value: this.state.search_article_title,
style_rules: { flex: 1 },
placeholder: "Search article by title",
oninput: e => this.state.search_article_title = e.target.value,
},
{
tag: "input", type: "submit", value: "SEARCH"
}
]
}
}
refresh_search_result() {
obj2htm.subRender(
this.render_search_result(),
document.getElementById("update-article-form-search-result"),
{ mode: "replace" },
);
}
render_search_result() {
const { search_result } = this.state;
return {
tag: "div",
id: "update-article-form-search-result",
style_rules: {
display: "flex",
gap: "10px",
alignItems: "center"
},
contents: search_result.title ? [
{ tag: "strong", contents: search_result.title },
{
tag: "button", contents: "SELECT",
onclick: this.handle_select_result.bind(this)
},
{
tag: "button", contents: "DELETE",
onclick: this.handle_delete_article.bind(this)
}
] : []
}
}
refresh_update_form() {
obj2htm.subRender(
this.render_update_form(),
document.getElementById("update-article-form-container"),
{ mode: "replace" },
);
}
render_update_form() {
return {
tag: "div",
id: "update-article-form-container",
contents: this.state.article_to_update._id
? [new CreateArticleForm({
data: this.state.article_to_update,
on_article_sent: () => {
this.reset();
this.refresh_search_result();
}
}).render()]
: []
}
}
refresh() {
obj2htm.subRender(this.render(), document.getElementById("update-article-multiform"), { mode: "replace" })
}
render() {
return {
tag: "div",
id: "update-article-multiform",
style_rules: {
display: "flex",
flexDirection: "column",
gap: "20px",
maxWidth: "800px",
},
contents: [
this.render_search(),
this.render_search_result(),
{ tag: "hr", style_rules: { width: "100%" } },
this.render_update_form(),
]
}
}
}
module.exports = UpdateArticleForm;