SubPage front end #410

backend/routes/page-route.js

@@ -624,5 +624,91 @@ router.post('/addProfileTemplate/:pageID', multer({storage: storage}).single("fi
     });
 });
 
+//create sub-page
+router.post('/:pageId/newSubPage',checkAuth, (req, res, next) => {
+  let messages = [];
+  // Tests if title is undefined, null or is empty string
+  if (!Boolean(req.body.title)) messages.push('Your title is invalid!');
+
+  // Tests if description is undefined, null or is empty string
+  if (!Boolean(req.body.description)) messages.push('Your description is invalid!');
+
+  // Attaches error messages to the response
+  if (messages.length > 0) return res.status(400).json({messages: messages});
+
+  const newSubPage = new Page({
+    title: req.body.title,
+    description: req.body.description,
+    tiles: true,
+    openApps: []
+  });
+  newSubPage.save()
+    .then(resultQuery => {
+      Page.update({_id: req.params.pageId}, { $push: { hasSubPages: resultQuery._id } })
+        .then(updatedPage => {
+          if (updatedPage.n > 0) {
+            console.log(newSubPage);
+            console.log(updatedPage);
+            res.status(201).json({
+              message: 'Sub-page was created successfully and linked to the page',
+              subpage: newSubPage
+            });
+          } else {
+            res.status(400).json({
+              message: 'sub-page cannot be created'
+            });
+          }
+        })
+        .catch(errorUpdatePage => {
+          res.status(500).json({
+            message: 'Creating sub-page in page failed',
+            error: errorUpdatePage
+          });
+        });
+    })
+    .catch(errorSubPage => {
+      res.status(500).json({
+        message: 'Creating sub-page failed',
+        error: errorSubPage
+      });
+    });
+});
+
+router.get('/sub-pages/:pageId', checkAuth, (req, res, next) => {
+  Page.find({_id: req.params.pageId}, {_id: 0, hasSubPages: 1})
+    .populate('hasSubPages')
+    .then(subPagesIds => {
+      let message;
+      console.log(subPagesIds);
+      if (subPagesIds.length === 0) {
+        message = 'No sub-pages were found'
+      } else {
+        Page.find({_id: {$in: subPagesIds[0].hasSubPages}})
+          .then(subPagesDetails => {
+            console.log(subPagesDetails);
+            if (subPagesDetails.length === 0) {
+              message = 'No sub-pages were found'
+            } else {
+              message = 'All sub-pages details were found.'
+            }
+            res.status(200).json({
+              message: message,
+              subPages: subPagesDetails
+            });
+          })
+          .catch(error => {
+            res.status(500).json({
+              message: 'Could not retrieve sub-pages',
+              error: error
+            })
+          });
+      }
+    }).catch(error => {
+    res.status(500).json({
+      message: 'Could not retrieve page',
+      error: error
+    })
+  });
+});
 
 module.exports = router;

src/app/app-engine/nie-OS.module.ts

@@ -109,6 +109,7 @@ import { MatFileUploadModule } from 'angular-material-fileupload';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MachineReasoningComponent } from './apps/machine-reasoning/machine-reasoning.component';
+import { MenuItemComponent } from './page/menu-item/menu-item.component';
 
 
 @NgModule({
@@ -245,7 +246,9 @@ import { MachineReasoningComponent } from './apps/machine-reasoning/machine-reas
 
     CrisprComponent,
 
-    MachineReasoningComponent
+    MachineReasoningComponent,
+
+    MenuItemComponent
   ],
   exports: [
     PageComponent,

src/app/app-engine/page/menu-item/menu-item.component.html

@@ -0,0 +1,17 @@
+<mat-menu #childMenu="matMenu" [overlapTrigger]="false">
+  <span *ngFor="let child of items">
+    <!-- Handle branch node menu items -->
+    <span *ngIf="child.subPages && child.subPages.length > 0">
+      <button mat-menu-item color="primary" [matMenuTriggerFor]="menu.childMenu">
+        <span>{{child.page.title}}</span>
+      </button>
+      <app-menu-item #menu [items]="child.subPages"></app-menu-item>
+    </span>
+    <!-- Handle leaf node menu items -->
+    <span *ngIf="(!child.subPages || child.subPages.length === 0) && child.page">
+      <button mat-menu-item>
+        <span>{{child.page.title}}</span>
+      </button>
+    </span>
+  </span>
+</mat-menu>

src/app/app-engine/page/menu-item/menu-item.component.ts

@@ -0,0 +1,19 @@
+import {Component, Input, OnInit, ViewChild} from '@angular/core';
+import {Router} from '@angular/router';
+import {SubPageOfPageModel} from '../../../user-action-engine/mongodb/page/subPageOfPage.model';
+
+@Component({
+  selector: 'app-menu-item',
+  templateUrl: './menu-item.component.html',
+  styleUrls: ['./menu-item.component.scss']
+})
+export class MenuItemComponent implements OnInit {
+  @Input() items: SubPageOfPageModel[];
+  @ViewChild('childMenu') public childMenu;
+
+  constructor(public router: Router) {
+  }
+
+  ngOnInit() {
+  }
+}