Order child pages (#21)

* save ordering pages

* move to another collection

* requested changes. Code improvements

* add margin

* unit tests

* fix

* requested changes

* recursive method: create menu tree

* update comments

* fix bug

* requested changes

* move const

* fix error message on catch

* add migration

* rewrite to splices

* move methods

* testing put above method

* linter fix

src/controllers/pages.js

@@ -138,7 +138,6 @@ class Pages {
     }
 
     page.data = data;
-
     return page.save();
   }
 

src/controllers/pagesOrder.js

@@ -0,0 +1,95 @@
+const Model = require('../models/pageOrder');
+
+/**
+ * @class PagesOrder
+ * @classdesc PagesOrder controller
+ *
+ * Manipulates with Pages: changes the order, deletes, updates and so on...
+ */
+class PagesOrder {
+  /**
+   * Returns Page's order
+   *
+   * @param {string} parentId - of which page we want to get children order
+   * @returns {Promise<PageOrder>}
+   */
+  static async get(parentId) {
+    const order = await Model.get(parentId);
+
+    if (!order._id) {
+      throw new Error('Page with given id does not contain order');
+    }
+
+    return order;
+  }
+
+  /**
+   * Pushes the child page to the parent's order list
+   *
+   * @param {string} parentId - parent page's id
+   * @param {string} childId - new page pushed to the order
+   */
+  static async push(parentId, childId) {
+    const order = await Model.get(parentId);
+
+    order.push(childId);
+    await order.save();
+  }
+
+  /**
+   * Move one page to another Page's order
+   *
+   * @param {string} oldParentId - old parent page's id
+   * @param {string} newParentId - new parent page's id
+   * @param {string} targetPageId - page's id which is changing the parent page
+   */
+  static async move(oldParentId, newParentId, targetPageId) {
+    const oldParentOrder = await Model.get(oldParentId);
+
+    oldParentOrder.remove(targetPageId);
+    await oldParentOrder.save();
+
+    const newParentOrder = await Model.get(newParentId);
+
+    newParentOrder.push(targetPageId);
+    await newParentOrder.save();
+  }
+
+  /**
+   * Returns new array with ordered pages
+   *
+   * @param {Page[]} pages - list of all available pages
+   * @param {string} currentPageId - page's id around which we are ordering
+   * @param {string} parentPageId - parent page's id that contains page above
+   * @param {Boolean} ignoreSelf - should we ignore current page in list or not
+   * @return {Page[]}
+   */
+  static async getOrderedChildren(pages, currentPageId, parentPageId, ignoreSelf = false) {
+    const children = await PagesOrder.get(parentPageId);
+    const result = [];
+
+    children.order.forEach(pageId => {
+      pages.forEach(page => {
+        if (page._id === pageId && (pageId !== currentPageId || !ignoreSelf)) {
+          result.push(page);
+        }
+      });
+    });
+
+    return result;
+  }
+
+  /**
+   * @param {string} currentPageId - page's id that changes the order
+   * @param {string} parentPageId - parent page's id that contains both two pages
+   * @param {string} putAbovePageId - page's id above which we put the target page
+   */
+  static async update(currentPageId, parentPageId, putAbovePageId) {
+    const pageOrder = await Model.get(parentPageId);
+
+    pageOrder.putAbove(currentPageId, putAbovePageId);
+    await pageOrder.save();
+  }
+}
+
+module.exports = PagesOrder;

src/frontend/js/modules/writing.js

@@ -27,7 +27,8 @@ export default class Writing {
     this.nodes = {
       editorWrapper: null,
       saveButton: null,
-      parentIdSelector: null
+      parentIdSelector: null,
+      putAboveIdSelector: null,
     };
   }
 
@@ -61,6 +62,7 @@ export default class Writing {
       this.saveButtonClicked();
     });
     this.nodes.parentIdSelector = moduleEl.querySelector('[name="parent"]');
+    this.nodes.putAboveIdSelector = moduleEl.querySelector('[name="above"]');
   };
 
   /**
@@ -89,8 +91,15 @@ export default class Writing {
       throw new Error('Entry should start with Header');
     }
 
+    /** get ordering selector value */
+    let putAbovePageId = null;
+    if (this.nodes.putAboveIdSelector) {
+      putAbovePageId = this.nodes.putAboveIdSelector.value;
+    }
+
     return {
       parent: this.nodes.parentIdSelector.value,
+      putAbovePageId: putAbovePageId,
       body: editorData
     };
   }

src/frontend/styles/components/writing.pcss

@@ -16,5 +16,9 @@
   &__left {
     margin: auto 0;
     color: var(--color-text-second);
+
+    & span {
+      margin-right: 10px;
+    }
   }
 }

src/models/page.js

@@ -6,7 +6,6 @@ const {pages: db} = require('../utils/database/index');
  * @property {string} title - page title
  * @property {*} body - page body
  * @property {string} parent - id of parent page
- *
  */
 
 /**

src/models/pageOrder.js

@@ -0,0 +1,156 @@
+const {pagesOrder: db} = require('../utils/database/index');
+
+/**
+ * @typedef {Object} PageOrderData
+ * @property {string} _id - row unique id
+ * @property {string} page - page id
+ * @property {Array<string>} order - list of ordered pages
+ */
+
+/**
+ * @class PageOrder
+ * @classdesc PageOrder
+ *
+ * Creates order for Pages with children
+ */
+class PageOrder {
+  /**
+   * Returns current Page's children order
+   *
+   * @param {string} pageId - page's id
+   */
+  static async get(pageId) {
+    const order = await db.findOne({page: pageId});
+
+    let data = {};
+
+    if (!order) {
+      data.page = pageId;
+    } else {
+      data = order;
+    }
+
+    return new PageOrder(data);
+  }
+
+  /**
+   * @constructor
+   *
+   * @param {PageOrderData} data
+   */
+  constructor(data = {}) {
+    if (data === null) {
+      data = {};
+    }
+
+    if (data._id) {
+      this._id = data._id;
+    }
+
+    this.data = data;
+  }
+
+  /**
+   * constructor data setter
+   * @param {PageOrderData} pageOrderData
+   */
+  set data(pageOrderData) {
+    this._page = pageOrderData.page || 0;
+    this._order = pageOrderData.order || [];
+  }
+
+  /**
+   * Return Page Children order
+   * @returns {PageOrderData}
+   */
+  get data() {
+    return {
+      _id: this._id,
+      page: '' + this._page,
+      order: this._order
+    };
+  }
+
+  /**
+   * Pushes page id to the orders array
+   *
+   * @param {string} pageId - page's id
+   */
+  push(pageId) {
+    if (typeof pageId === 'string') {
+      this._order.push(pageId);
+    } else {
+      throw new Error('given id is not string');
+    }
+  }
+
+  /**
+   * Removes page id from orders array
+   *
+   * @param {string} pageId - page's id
+   */
+  remove(pageId) {
+    const found = this._order.indexOf(pageId);
+
+    if (found >= 0) {
+      this._order.splice(found, 1);
+    }
+  }
+
+  /**
+   * @param {string} currentPageId - page's id that changes the order
+   * @param {string} putAbovePageId - page's id above which we put the target page
+   *
+   * @returns void
+   */
+  putAbove(currentPageId, putAbovePageId) {
+    const found1 = this.order.indexOf(putAbovePageId);
+    const found2 = this.order.indexOf(currentPageId);
+
+    if (found1 === -1 || found2 === -1) {
+      return;
+    }
+
+    const margin = found1 < found2 ? 1 : 0;
+
+    this.order.splice(found1, 0, currentPageId);
+    this.order.splice(found2 + margin, 1);
+  }
+
+  /**
+   * Returns ordered list
+   *
+   * @return {string[]}
+   */
+  get order() {
+    return this._order;
+  }
+
+  /**
+   * Save or update page data in the database
+   */
+  async save() {
+    if (!this._id) {
+      const insertedRow = await db.insert(this.data);
+
+      this._id = insertedRow._id;
+    } else {
+      await db.update({_id: this._id}, this.data);
+    }
+
+    return this;
+  }
+
+  /**
+   * Remove page data from the database
+   */
+  async destroy() {
+    await db.remove({_id: this._id});
+
+    delete this._id;
+
+    return this;
+  }
+}
+
+module.exports = PageOrder;

src/routes/api/pages.js

@@ -2,6 +2,7 @@ const express = require('express');
 const router = express.Router();
 const multer = require('multer')();
 const Pages = require('../../controllers/pages');
+const PagesOrder = require('../../controllers/pagesOrder');
 
 /**
  * GET /page/:id
@@ -55,6 +56,9 @@ router.put('/page', multer.any(), async (req, res) => {
     const {title, body, parent} = req.body;
     const page = await Pages.insert({title, body, parent});
 
+    /** push to the orders array */
+    await PagesOrder.push(parent, page._id);
+
     res.json({
       success: true,
       result: page
@@ -76,9 +80,18 @@ router.post('/page/:id', multer.any(), async (req, res) => {
   const {id} = req.params;
 
   try {
-    const {title, body, parent} = req.body;
-    const page = await Pages.update(id, {title, body, parent});
+    const {title, body, parent, putAbovePageId} = req.body;
+    let page = await Pages.get(id);
 
+    if (page._parent !== parent) {
+      await PagesOrder.move(page._parent, parent, id);
+    } else {
+      if (putAbovePageId && putAbovePageId !== '0') {
+        await PagesOrder.update(page._id, page._parent, putAbovePageId);
+      }
+    }
+
+    page = await Pages.update(id, {title, body, parent});
     res.json({
       success: true,
       result: page

src/routes/middlewares/pages.js

@@ -1,17 +1,47 @@
 const Pages = require('../../controllers/pages');
+const PagesOrder = require('../../controllers/pagesOrder');
 const asyncMiddleware = require('../../utils/asyncMiddleware');
 
 /**
- * Process one-level pages list to parent-childrens list
- * @param {Page[]} pages - list of all available pages
+ * Process one-level pages list to parent-children list
+ * @param {string[]} pages - list of all available pages
+ * @param {number} level
+ * @param {number} currentLevel
+ *
  * @return {Page[]}
  */
-function createMenuTree(pages) {
-  return pages.filter(page => page._parent === '0').map(page => {
+async function createMenuTree(pages, level = 1, currentLevel = 1) {
+  return await Promise.all(pages.map(async pageId => {
+    const parent = await Pages.get(pageId);
+
+    /**
+     * By default we accept that deepestChildren is empty Array
+     * @type {Array}
+     */
+    let deepestChildren = [];
+
+    /**
+     * Here we try to check parent's children order
+     * If we got something, pluck to found Page deeper and get its children order
+     */
+    try {
+      /**
+       * Go deeper until we didn't get the deepest level
+       * On each 'currentLevel' create new Menu Tree with ordered Page ids
+       */
+      if (currentLevel !== level) {
+        const children = await PagesOrder.get(pageId);
+        deepestChildren = await createMenuTree(children.order, level, currentLevel + 1)
+      }
+    } catch (e) {}
+
+    /**
+     * Assign parent's children with found Menu Tree
+     */
     return Object.assign({
-      children: pages.filter(child => child._parent === page._id).reverse()
-    }, page.data);
-  });
+      children: deepestChildren
+    }, parent.data);
+  }));
 }
 
 /**
@@ -21,13 +51,16 @@ function createMenuTree(pages) {
  * @param next
  */
 module.exports = asyncMiddleware(async function (req, res, next) {
+  /**
+   * Pages without parent
+   * @type {string}
+   */
+  const parentIdOfRootPages = '0';
   try {
-    const menu = await Pages.getAll();
-
-    res.locals.menu = createMenuTree(menu);
+    const rootPages = await PagesOrder.get(parentIdOfRootPages);
+    res.locals.menu = await createMenuTree(rootPages.order, 2);
   } catch (error) {
     console.log('Can not load menu:', error);
   }
-
   next();
 });

src/routes/pages.js

@@ -1,6 +1,7 @@
 const express = require('express');
 const router = express.Router();
 const Pages = require('../controllers/pages');
+const PagesOrder = require('../controllers/pagesOrder');
 
 /**
  * Create new page form
@@ -21,12 +22,14 @@ router.get('/page/edit/:id', async (req, res, next) => {
   const pageId = req.params.id;
 
   try {
-    let page = await Pages.get(pageId);
-    let pagesAvailable = await Pages.getAllExceptChildrens(pageId);
+    const page = await Pages.get(pageId);
+    const pagesAvailable = await Pages.getAllExceptChildrens(pageId);
+    const parentsChildrenOrdered = await PagesOrder.getOrderedChildren(pagesAvailable, pageId, page._parent, true);
 
     res.render('pages/form', {
-      pagesAvailable,
-      page
+      page,
+      parentsChildrenOrdered,
+      pagesAvailable
     });
   } catch (error) {
     res.status(404);

src/utils/database/index.js

@@ -1,4 +1,5 @@
 const pages = require('./pages');
+const pagesOrder = require('./pagesOrder');
 
 /**
  * @class Database
@@ -142,5 +143,6 @@ class Database {
 
 module.exports = {
   class: Database,
-  pages: new Database(pages)
+  pages: new Database(pages),
+  pagesOrder: new Database(pagesOrder)
 };

src/utils/database/pagesOrder.js

@@ -0,0 +1,34 @@
+const Datastore = require('nedb');
+const config = require('../../../config');
+
+const db = new Datastore({filename: `./${config.database}/pagesOrder.db`, autoload: true});
+
+/**
+ * Current DataStore preparation
+ * Add initial row for RootPage
+ */
+(async function() {
+  const parentIdOfRootPages = '0';
+  const cbk = (resolve, reject) => (err, doc) => {
+    if (err) {
+      reject(err);
+    }
+
+    resolve(doc);
+  };
+
+  const order = await new Promise((resolve, reject) => {
+    db.findOne({page: parentIdOfRootPages}, cbk(resolve, reject));
+  });
+
+  if (!order) {
+    const initialData = {
+      page: '0',
+      order: []
+    };
+    await db.insert(initialData);
+  }
+
+}());
+
+module.exports = db;

src/views/pages/form.twig

@@ -14,21 +14,35 @@
     </module-settings>
     <header class="writing-header">
       <span class="writing-header__left">
+        <span>
         New Page at the
         {% set currentPageId = 0 %}
         {% if page is not empty %}
           {% set currentPageId = page._id %}
         {% endif %}
-        <select name="parent">
+          <select name="parent">
           <option value="0">Root</option>
-          {% for _page in pagesAvailable %}
-            {% if _page._id != currentPageId %}
-              <option value="{{ _page._id }}" {{ page is not empty and page._parent == _page._id ? 'selected' : ''}}>
+            {% for _page in pagesAvailable %}
+              {% if _page._id != currentPageId %}
+                <option value="{{ _page._id }}" {{ page is not empty and page._parent == _page._id ? 'selected' : ''}}>
                 {{ _page.title }}
               </option>
-            {% endif %}
-          {% endfor %}
+              {% endif %}
+            {% endfor %}
         </select>
+        </span>
+
+        {% if parentsChildrenOrdered is not empty %}
+          <span>
+            Put Above
+            <select name="above">
+              <option value="0">—</option>
+              {% for _page in parentsChildrenOrdered %}
+                <option value="{{ _page._id }}">{{ _page.title }}</option>
+              {% endfor %}
+            </select>
+          </span>
+        {% endif %}
       </span>
       <span class="writing-header__save" name="js-submit">
         Save