requested changes and unit tests

src/frontend/js/modules/writing.js

@@ -42,11 +42,7 @@ export default class Writing {
     /**
      * Create Editor
      */
-    this.nodes.editorWrapper = document.createElement('div');
-    this.nodes.editorWrapper.id = 'codex-editor';
-
-    moduleEl.appendChild(this.nodes.editorWrapper);
-
+    this.nodes.editorWrapper = document.getElementById('codex-editor');
     if (settings.page) {
       this.page = settings.page;
     }
@@ -64,9 +60,13 @@ export default class Writing {
     });
 
     this.nodes.removeButton = moduleEl.querySelector('[name="js-submit-remove"]');
-    this.nodes.removeButton.addEventListener('click', () => {
-      this.removeButtonClicked();
-    });
+
+    if (this.nodes.removeButton) {
+      this.nodes.removeButton.addEventListener('click', () => {
+        this.removeButtonClicked();
+      });
+    }
+
     this.nodes.parentIdSelector = moduleEl.querySelector('[name="parent"]');
     this.nodes.putAboveIdSelector = moduleEl.querySelector('[name="above"]');
   };

src/frontend/styles/components/header.pcss

@@ -35,6 +35,7 @@
 
   &__button {
     @apply --button;
+    @apply --button-primary;
     margin: auto 30px auto auto;
   }
 }

src/frontend/styles/components/page.pcss

@@ -28,6 +28,7 @@
 
     &-button {
       @apply --button;
+      @apply --button-primary;
       padding: 5px 10px;
       font-size: 13px;
       margin-left: 10px;

src/frontend/styles/components/writing.pcss

@@ -10,19 +10,10 @@
 
   &__save {
     @apply --button;
+    @apply --button-primary;
     margin-left: auto;
   }
 
-  &__remove {
-    @apply --button;
-    margin-left: 10px;
-  }
-
-  &__save,
-  &__remove {
-    cursor: pointer;
-  }
-
   &__left {
     margin: auto 0;
     color: var(--color-text-second);
@@ -32,3 +23,10 @@
     }
   }
 }
+
+.writing-buttons {
+  &__remove {
+    @apply --button;
+    @apply --button-danger;
+  }
+}

src/frontend/styles/vars.pcss

@@ -3,6 +3,7 @@
   --color-text-second: #7B7E89;
   --color-line-gray: #E8E8EB;
   --color-link-active: #388AE5;
+  --color-button-danger: #ff1629;
 
   /**
    * Site layout sizes
@@ -14,17 +15,29 @@
 
   --button {
     display: inline-block;
-    background:  var(--color-link-active);
     color: #fff;
     border-radius: 3px;
     padding: 9px 15px;
     font-size: 14px;
     line-height: 1em;
     text-decoration: none;
+    cursor: pointer;
 
     svg {
       margin: 0 0.3em 0 -0.05em;
     }
+  }
+
+  --button-danger {
+    background: var(--color-button-danger);
+
+    &:hover {
+      background: color-mod(var(--color-button-danger) blackness(+10%));
+    }
+  }
+
+  --button-primary {
+    background:  var(--color-link-active);
 
     &:hover {
       background: color-mod(var(--color-link-active) blackness(+10%));

src/models/page.js

@@ -68,7 +68,7 @@ class Page {
 
     this.body = body || this.body;
     this.title = this.extractTitleFromBody();
-    this._parent = parent || this._parent;
+    this._parent = parent || this._parent || "0";
   }
 
   /**

src/models/pageOrder.js

@@ -135,6 +135,24 @@ class PageOrder {
     return this.order[currentPageInOrder - 1];
   }
 
+  /**
+   * Returns page before passed page with id
+   *
+   * @param pageId
+   */
+  getPageAfter(pageId) {
+    const currentPageInOrder = this.order.indexOf(pageId);
+
+    /**
+     * If page not found or is last
+     */
+    if (currentPageInOrder === -1 || currentPageInOrder === this.order.length - 1) {
+      return;
+    }
+
+    return this.order[currentPageInOrder + 1];
+  }
+
   /**
    * Returns ordered list
    *

src/routes/api/pages.js

@@ -115,12 +115,15 @@ router.delete('/page/:id', async (req, res) => {
     const page = await Pages.get(pageId);
     const parentPageOrder = await PagesOrder.get(page._parent);
     const pageBeforeId = parentPageOrder.getPageBefore(page._id);
+    const pageAfterId = parentPageOrder.getPageAfter(page._id);
 
-    let pageToReturn;
+    let responsePage;
     if (pageBeforeId) {
-      pageToReturn = await Pages.get(pageBeforeId);
+      responsePage = await Pages.get(pageBeforeId);
+    } else if (pageAfterId) {
+      responsePage = await Pages.get(pageAfterId);
     } else {
-      pageToReturn = page._parent !== "0" ? await Pages.get(page._parent) : null;
+      responsePage = page._parent !== "0" ? await Pages.get(page._parent) : null;
     }
 
     // remove current page and return previous from order
@@ -129,7 +132,7 @@ router.delete('/page/:id', async (req, res) => {
 
     res.json({
       success: true,
-      result: pageToReturn
+      result: responsePage
     });
   } catch (err) {
     res.status(400).json({

src/views/pages/form.twig

@@ -44,13 +44,13 @@
           </span>
         {% endif %}
       </span>
-      <span class="writing-header__save" name="js-submit-save">
-        Save
-      </span>
-
-      <span class="writing-header__remove" name="js-submit-remove">
-        Remove
-      </span>
+      <span class="writing-header__save" name="js-submit-save">Save</span>
     </header>
+    <div id="codex-editor"></div>
+    <div class="writing-buttons">
+      {% if page._id is not empty %}
+      <span class="writing-buttons__remove" name="js-submit-remove">Remove</span>
+      {% endif %}
+    </div>
   </section>
 {% endblock %}

test/models/page.js

@@ -24,7 +24,7 @@ describe('Page model', () => {
     expect(data._id).to.be.undefined;
     expect(data.title).to.be.empty;
     expect(data.body).to.be.undefined;
-    expect(data.parent).to.be.undefined;
+    expect(data.parent).to.be.equal('0');
 
     page = new Page(null);
 
@@ -33,7 +33,7 @@ describe('Page model', () => {
     expect(data._id).to.be.undefined;
     expect(data.title).to.be.empty;
     expect(data.body).to.be.undefined;
-    expect(data.parent).to.be.undefined;
+    expect(data.parent).to.be.equal('0');
 
     const initialData = {
       _id: 'page_id',
@@ -58,12 +58,12 @@ describe('Page model', () => {
     expect(data._id).to.equal(initialData._id);
     expect(data.title).to.equal(initialData.body.blocks[0].data.text);
     expect(data.body).to.deep.equal(initialData.body);
-    expect(data.parent).to.be.undefined;
+    expect(data.parent).to.be.equal('0');
 
     expect(json._id).to.equal(initialData._id);
     expect(json.title).to.equal(initialData.body.blocks[0].data.text);
     expect(json.body).to.deep.equal(initialData.body);
-    expect(json.parent).to.be.undefined;
+    expect(json.parent).to.be.equal('0');
 
     const update = {
       _id: 12345,
@@ -86,7 +86,7 @@ describe('Page model', () => {
     expect(data._id).to.equal(initialData._id);
     expect(data.title).to.equal(update.body.blocks[0].data.text);
     expect(data.body).to.equal(update.body);
-    expect(data.parent).to.be.undefined;
+    expect(data.parent).to.be.equal('0');
   });
 
   it('Saving, updating and deleting model in the database', async () => {

test/models/pageOrder.js

@@ -7,7 +7,7 @@ const {pagesOrder} = require('../../src/utils/database');
 
 describe('PageOrder model', () => {
   after(() => {
-    const pathToDB = path.resolve(__dirname, '../../', config.database, './pages.db');
+    const pathToDB = path.resolve(__dirname, '../../', config.database, './pagesOrder.db');
 
     if (fs.existsSync(pathToDB)) {
       fs.unlinkSync(pathToDB);

test/rest/pages.js

@@ -19,10 +19,15 @@ describe('Pages REST: ', () => {
   });
 
   after(async () => {
-    const pathToDB = path.resolve(__dirname, '../../', config.database, './pages.db');
+    const pathToPagesDB = path.resolve(__dirname, '../../', config.database, './pages.db');
+    const pathToPagesOrderDB = path.resolve(__dirname, '../../', config.database, './pagesOrder.db');
 
-    if (fs.existsSync(pathToDB)) {
-      fs.unlinkSync(pathToDB);
+    if (fs.existsSync(pathToPagesDB)) {
+      fs.unlinkSync(pathToPagesDB);
+    }
+
+    if (fs.existsSync(pathToPagesOrderDB)) {
+      fs.unlinkSync(pathToPagesOrderDB);
     }
   });
 
@@ -229,31 +234,36 @@ describe('Pages REST: ', () => {
       ]
     };
 
-    // let res = await agent
-    //   .put('/api/page')
-    //   .send({body});
-    //
-    // expect(res).to.have.status(200);
-    // expect(res).to.be.json;
-    //
-    // const {result: {_id}} = res.body;
+    let res = await agent
+      .put('/api/page')
+      .send({body});
 
-    // const res = await agent
-    //   .delete(`/api/page/${_id}`);
-    //
-    // expect(res).to.have.status(200);
-    // expect(res).to.be.json;
-    //
-    // const {success, result} = res.body;
-    //
-    // expect(success).to.be.true;
-    // expect(result._id).to.be.undefined;
-    // expect(result.title).to.equal(body.blocks[0].data.text);
-    // expect(result.body).to.deep.equal(body);
+    expect(res).to.have.status(200);
+    expect(res).to.be.json;
 
-    // const deletedPage = await model.get(_id);
+    const {result: {_id}} = res.body;
+    console.log('_id', _id);
 
-    // expect(deletedPage._id).to.be.undefined;
+    res = await agent
+      .delete(`/api/page/${_id}`);
+
+    expect(res).to.have.status(200);
+    expect(res).to.be.json;
+
+    const {success, result} = res.body;
+
+    expect(success).to.be.true;
+
+    if (result) {
+      expect(result._id).to.be.undefined;
+      expect(result.title).to.equal(body.blocks[0].data.text);
+      expect(result.body).to.deep.equal(body);
+      const deletedPage = await model.get(_id);
+
+      expect(deletedPage._id).to.be.undefined;
+    } else {
+      expect(result).to.be.null;
+    }
   });
 
   it('Removing page with not existing id', async () => {