diff options
author | ArthurHoaro <arthur@hoa.ro> | 2020-10-10 17:40:26 +0200 |
---|---|---|
committer | ArthurHoaro <arthur@hoa.ro> | 2020-10-27 20:11:30 +0100 |
commit | 5d8de7587d67b5c3e5d1fed8562d9b87ecde80c1 (patch) | |
tree | 2236e571035332a63f87a09222f2278b93f63515 /assets/common/js/shaare-batch.js | |
parent | b8e5a253ab5521ce2be6c0d3e04e0101527df3c1 (diff) | |
download | Shaarli-5d8de7587d67b5c3e5d1fed8562d9b87ecde80c1.tar.gz Shaarli-5d8de7587d67b5c3e5d1fed8562d9b87ecde80c1.tar.zst Shaarli-5d8de7587d67b5c3e5d1fed8562d9b87ecde80c1.zip |
Feature: bulk creation of bookmarks
This changes creates a new form in addlink page allowing to create
multiple bookmarks at once more easily. It focuses on re-using as much
existing code and template component as possible.
These changes includes:
- a new form in addlink (hidden behind a button by default),
containing a text area for URL, and tags/private status to apply to
created links
- this form displays a new template called editlink.batch, itself
including editlink template multiple times
- User interation in this new templates are handle by a new JS script
(shaare-batch.js) making AJAX requests, and therefore does not need page
reloading
- ManageShaareController has been split into 3 distinct controllers:
+ ShaareAdd: displays addlink template
+ ShaareManage: various operation applied on existing shaares
(change visibility, pin, deletion, etc.)
+ ShaarePublish: handles creation/edit forms and saving Shaare's
form
- Updated translations
Fixes #137
Diffstat (limited to 'assets/common/js/shaare-batch.js')
-rw-r--r-- | assets/common/js/shaare-batch.js | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/assets/common/js/shaare-batch.js b/assets/common/js/shaare-batch.js new file mode 100644 index 00000000..9f612993 --- /dev/null +++ b/assets/common/js/shaare-batch.js | |||
@@ -0,0 +1,107 @@ | |||
1 | const sendBookmarkForm = (basePath, formElement) => { | ||
2 | const inputs = formElement | ||
3 | .querySelectorAll('input[type="text"], textarea, input[type="checkbox"], input[type="hidden"]'); | ||
4 | |||
5 | const formData = new FormData(); | ||
6 | [...inputs].forEach((input) => { | ||
7 | formData.append(input.getAttribute('name'), input.value); | ||
8 | }); | ||
9 | |||
10 | return new Promise((resolve, reject) => { | ||
11 | const xhr = new XMLHttpRequest(); | ||
12 | xhr.open('POST', `${basePath}/admin/shaare`); | ||
13 | xhr.onload = () => { | ||
14 | if (xhr.status !== 200) { | ||
15 | alert(`An error occurred. Return code: ${xhr.status}`); | ||
16 | reject(); | ||
17 | } else { | ||
18 | formElement.remove(); | ||
19 | resolve(); | ||
20 | } | ||
21 | }; | ||
22 | xhr.send(formData); | ||
23 | }); | ||
24 | }; | ||
25 | |||
26 | const sendBookmarkDelete = (buttonElement, formElement) => ( | ||
27 | new Promise((resolve, reject) => { | ||
28 | const xhr = new XMLHttpRequest(); | ||
29 | xhr.open('GET', buttonElement.href); | ||
30 | xhr.onload = () => { | ||
31 | if (xhr.status !== 200) { | ||
32 | alert(`An error occurred. Return code: ${xhr.status}`); | ||
33 | reject(); | ||
34 | } else { | ||
35 | formElement.remove(); | ||
36 | resolve(); | ||
37 | } | ||
38 | }; | ||
39 | xhr.send(); | ||
40 | }) | ||
41 | ); | ||
42 | |||
43 | const redirectIfEmptyBatch = (basePath, formElements, path) => { | ||
44 | if (formElements == null || formElements.length === 0) { | ||
45 | window.location.href = `${basePath}${path}`; | ||
46 | } | ||
47 | }; | ||
48 | |||
49 | (() => { | ||
50 | const basePath = document.querySelector('input[name="js_base_path"]').value; | ||
51 | const getForms = () => document.querySelectorAll('form[name="linkform"]'); | ||
52 | |||
53 | const cancelButtons = document.querySelectorAll('[name="cancel-batch-link"]'); | ||
54 | if (cancelButtons != null) { | ||
55 | [...cancelButtons].forEach((cancelButton) => { | ||
56 | cancelButton.addEventListener('click', (e) => { | ||
57 | e.preventDefault(); | ||
58 | e.target.closest('form[name="linkform"]').remove(); | ||
59 | redirectIfEmptyBatch(basePath, getForms(), '/admin/add-shaare'); | ||
60 | }); | ||
61 | }); | ||
62 | } | ||
63 | |||
64 | const saveButtons = document.querySelectorAll('[name="save_edit"]'); | ||
65 | if (saveButtons != null) { | ||
66 | [...saveButtons].forEach((saveButton) => { | ||
67 | saveButton.addEventListener('click', (e) => { | ||
68 | e.preventDefault(); | ||
69 | |||
70 | const formElement = e.target.closest('form[name="linkform"]'); | ||
71 | sendBookmarkForm(basePath, formElement) | ||
72 | .then(() => redirectIfEmptyBatch(basePath, getForms(), '/')); | ||
73 | }); | ||
74 | }); | ||
75 | } | ||
76 | |||
77 | const saveAllButtons = document.querySelectorAll('[name="save_edit_batch"]'); | ||
78 | if (saveAllButtons != null) { | ||
79 | [...saveAllButtons].forEach((saveAllButton) => { | ||
80 | saveAllButton.addEventListener('click', (e) => { | ||
81 | e.preventDefault(); | ||
82 | |||
83 | const promises = []; | ||
84 | [...getForms()].forEach((formElement) => { | ||
85 | promises.push(sendBookmarkForm(basePath, formElement)); | ||
86 | }); | ||
87 | |||
88 | Promise.all(promises).then(() => { | ||
89 | window.location.href = basePath || '/'; | ||
90 | }); | ||
91 | }); | ||
92 | }); | ||
93 | } | ||
94 | |||
95 | const deleteButtons = document.querySelectorAll('[name="delete_link"]'); | ||
96 | if (deleteButtons != null) { | ||
97 | [...deleteButtons].forEach((deleteButton) => { | ||
98 | deleteButton.addEventListener('click', (e) => { | ||
99 | e.preventDefault(); | ||
100 | |||
101 | const formElement = e.target.closest('form[name="linkform"]'); | ||
102 | sendBookmarkDelete(e.target, formElement) | ||
103 | .then(() => redirectIfEmptyBatch(basePath, getForms(), '/')); | ||
104 | }); | ||
105 | }); | ||
106 | } | ||
107 | })(); | ||