xref: /plugin/combo/resources/snippet/js/metadata.js (revision 4cadd4f8c541149bdda95f080e38a6d4e3a640ca)
1/* global combo */
2// noinspection JSUnresolvedVariable
3
4window.addEventListener("DOMContentLoaded", function () {
5
6
7        /**
8         *
9         * @type ComboModal modalManager
10         */
11        async function openMetaViewer(modalViewer, modalManager, pageId) {
12
13
14            if (modalViewer.wasBuild()) {
15                modalViewer.show();
16                return;
17            }
18
19            const viewerCallEndpoint = "combo-meta-viewer";
20            let viewerCall = combo
21                .createDokuRequest(viewerCallEndpoint)
22                .setProperty("id", pageId)
23            let jsonFormMeta = await viewerCall.getJson();
24
25
26            let formViewerId = combo.toHtmlId(`combo-metadata-viewer-form-${pageId}`);
27            let formHtmlElement = combo.createFormFromJson(formViewerId, jsonFormMeta).toHtmlElement();
28
29            /**
30             * Submit Button
31             */
32            let submitButton = document.createElement("button");
33            submitButton.classList.add("btn", "btn-primary");
34            submitButton.setAttribute("type", "submit");
35            submitButton.setAttribute("form", formHtmlElement.id);
36            submitButton.innerText = "Submit";
37            submitButton.addEventListener("click", async function (event) {
38                event.preventDefault();
39                let formData = new FormData(formHtmlElement);
40                let response = await combo.createDokuRequest(viewerCallEndpoint)
41                    .setMethod("post")
42                    .sendFormDataAsJson(formData);
43                modalViewer.reset();
44                modalManager.reset();
45                await processResponse(response, () => openMetaViewer(modalViewer, modalManager, pageId));
46            });
47            modalViewer
48                .setCallBackOnClose(() => openMetadataManager(pageId))
49                .setHeader("Metadata Viewer")
50                .addBody(`<p>The metadata viewer shows you the content of the metadata file (ie all metadata managed by ComboStrap or not):</p>`)
51                .addBody(formHtmlElement)
52                .addFooterCloseButton()
53                .addFooterButton(submitButton)
54                .show();
55
56
57        }
58
59
60        const metaManagerCall = "combo-meta-manager";
61
62        /**
63         *
64         * @param {Response} response
65         * @param {function} callBack
66         * @return {Promise<void>}
67         */
68        async function processResponse(response, callBack) {
69            let modalMessage = [];
70            if (response.status !== 200) {
71                modalMessage.push(`Error, unable to save. (return code: ${response.status})`);
72            }
73            try {
74                let json = await response.json();
75                if (json !== null) {
76                    if (json.hasOwnProperty("message")) {
77                        let jsonMessage = json["message"];
78                        if (Array.isArray(jsonMessage)) {
79                            modalMessage = modalMessage.concat(jsonMessage);
80                        } else {
81                            modalMessage.push(jsonMessage)
82                        }
83                    }
84                }
85            } catch (/** @type Error */ e) {
86                modalMessage.push(e.message)
87            }
88
89            combo.createTemporaryModal()
90                .setCallBackOnClose(callBack)
91                .centered()
92                .addBody(modalMessage.join("<br>"))
93                .show();
94        }
95
96        let openMetadataManager = async function (pageId) {
97
98
99            /**
100             * The manager modal root
101             * (used in button)
102             */
103            let modalManagerId = combo.toHtmlId(`combo-meta-manager-page-${pageId}`);
104            let managerModal = combo.getOrCreateModal(modalManagerId)
105                .addDialogClass("modal-fullscreen-md-down");
106            if (managerModal.wasBuild()) {
107                managerModal.show();
108                return;
109            }
110
111            /**
112             * The viewer
113             * We create it here because it needs to be reset if there is a submit on the manager.
114             */
115            let modalViewerId = combo.toHtmlId(`combo-metadata-viewer-modal-${pageId}`);
116            let modalViewer = combo.getOrCreateModal(modalViewerId)
117                .addDialogClass("modal-fullscreen-md-down");
118
119            /**
120             * Creating the form
121             */
122            let formMetadata = await combo
123                .createDokuRequest(metaManagerCall)
124                .setProperty("id", pageId)
125                .getJson();
126            let formId = combo.toHtmlId(`${modalManagerId}-form`);
127            let form = combo.createFormFromJson(formId, formMetadata);
128            let htmlFormElement = form.toHtmlElement();
129
130
131            /**
132             * Viewer Button
133             */
134            let viewerButton = document.createElement("button");
135            viewerButton.classList.add("btn", "btn-link", "text-primary", "text-decoration-bone", "fs-6", "text-muted");
136            viewerButton.style.setProperty("font-weight", "300");
137            viewerButton.textContent = "Open Metadata Viewer";
138            viewerButton.addEventListener("click", async function () {
139                managerModal.dismissHide();
140                await openMetaViewer(modalViewer, managerModal, pageId);
141            });
142
143            /**
144             * Submit Button
145             */
146            let submitButton = document.createElement("button");
147            submitButton.classList.add("btn", "btn-primary");
148            submitButton.setAttribute("type", "submit");
149            submitButton.setAttribute("form", formId);
150            submitButton.innerText = "Submit";
151            submitButton.addEventListener("click", async function (event) {
152                event.preventDefault();
153                let formData = new FormData(htmlFormElement);
154                let response = await combo.createDokuRequest(metaManagerCall)
155                    .setMethod("post")
156                    .sendFormDataAsJson(formData);
157                managerModal.reset();
158                modalViewer.reset();
159
160                /**
161                 * Send a cron request to re-render if any
162                 */
163                fetch(combo.DokuUrl.createRunner().toString(), {method: "GET"})
164                    .then((response) => {
165                            if (response.status !== 200) {
166                                console.error('Bad runner request, status Code is: ' + response.status);
167                            }
168                        }
169                    );
170
171                await processResponse(response, () => openMetadataManager(pageId));
172            })
173
174            /**
175             * The modal
176             */
177            managerModal
178                .resetIfBuild()
179                .setHeader(`Metadata Manager for Page (${pageId})`)
180                .addBody(htmlFormElement)
181                .addFooterButton(viewerButton)
182                .addFooterCloseButton()
183                .addFooterButton(submitButton)
184                .show();
185
186        }
187
188        document.querySelectorAll(".combo_metadata_item").forEach((metadataControlItem) => {
189
190            metadataControlItem.addEventListener("click", function (event) {
191                event.preventDefault();
192                void openMetadataManager(JSINFO.id)
193                    .catch(e => {
194                        if (e instanceof Error) {
195                            console.error(e.stack)
196                        } else {
197                            console.error(e.toString())
198                        }
199                    });
200            });
201
202        });
203    }
204)
205;
206
207