Page creation basics (#7)

* Page cration basics

* remove unused code

* add client-side Header validation

* remove static method

* rm await duplication

src/frontend/js/modules/writing.js

@@ -1,29 +1,115 @@
 /**
  * Module for pages create/edit
  */
+/**
+ * @typedef {object} editorData
+ * @property {{type, data}[]} blocks - array of Blocks
+ * @property {string} version - used Editor version
+ * @property {number} time - saving time
+ */
+
 export default class Writing {
+  /**
+   * Creates base properties
+   */
   constructor(){
-    this.editorWrapper = null;
     this.editor = null;
+    this.nodes = {
+      editorWrapper: null,
+      saveButton: null,
+      parentIdSelector: null,
+    }
   }
 
   /**
    * Called by ModuleDispatcher to initialize module from DOM
+   * @param {object} settings - module settings
+   * @param {HTMLElement} moduleEl - module element
    */
-  init(config, moduleEl) {
-    this.editorWrapper = document.createElement('div');
-    this.editorWrapper.id = 'codex-editor';
+  init(settings, moduleEl) {
+    /**
+     * Create Editor
+     */
+    this.nodes.editorWrapper = document.createElement('div');
+    this.nodes.editorWrapper.id = 'codex-editor';
 
-    moduleEl.appendChild(this.editorWrapper);
+    moduleEl.appendChild(this.nodes.editorWrapper);
 
     this.loadEditor().then((editor) => {
       this.editor = editor;
-    })
+    });
+
+    /**
+     * Activate form elements
+     */
+    this.nodes.saveButton = moduleEl.querySelector('[name="js-submit"]');
+    this.nodes.saveButton.addEventListener('click', () => {
+      this.saveButtonClicked();
+    });
+    this.nodes.parentIdSelector = moduleEl.querySelector('[name="parent"]');
   };
 
+  /**
+   * Loads class for working with Editor
+   * @return {Promise<Editor>}
+   */
   async loadEditor(){
     const {default: Editor} = await import(/* webpackChunkName: "editor" */ './../classes/editor');
 
     return new Editor();
   }
+
+  /**
+   * Returns all writing form data
+   * @throws {Error} - validation error
+   * @return {Promise.<{parent: string, body: {editorData}}>}
+   */
+  async getData(){
+    const editorData = await this.editor.save();
+    const firstBlock = editorData.blocks.length ? editorData.blocks[0] : null;
+    const title = firstBlock && firstBlock.type === 'header' ? firstBlock.data.text : null;
+
+    if (!title) {
+      throw new Error('Entry should start with Header');
+    }
+
+    return {
+      parent: this.nodes.parentIdSelector.value,
+      body: editorData
+    };
+  }
+
+  /**
+   * Handler for clicks on the Save button
+   */
+  async saveButtonClicked(){
+    try {
+      const writingData = await this.getData();
+
+      try {
+        let response = await fetch('/page', {
+          method: 'PUT',
+          headers: {
+            "Content-Type": "application/json; charset=utf-8",
+          },
+          body: JSON.stringify(writingData),
+        });
+
+        response = await response.json();
+
+        if (response.success){
+          document.location = '/page/' + response.result._id;
+        } else {
+          alert(response.error);
+          console.log('Validation failed:', response.error);
+        }
+
+      } catch (sendingError) {
+        console.log('Saving request failed:', sendingError);
+      }
+    } catch (savingError){
+      alert(savingError);
+      console.log('Saving error: ', savingError);
+    }
+  }
 }