Merge branch 'master' of https://dev.azure.com/HackKu/HackKu%202020/_git/frontend

package-lock.json

@@ -1680,6 +1680,16 @@
       "integrity": "sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=",
       "dev": true
     },
+    "ag-grid-angular": {
+      "version": "22.1.1",
+      "resolved": "https://registry.npmjs.org/ag-grid-angular/-/ag-grid-angular-22.1.1.tgz",
+      "integrity": "sha512-I1ynYxc+Chb8ecbYkM/+GM+mXCr/rnL+lHTXejBQvDFd61W1nTP2b8BiHwkxaJBDPcFrTyS5P2xqLXLkEzfm6g=="
+    },
+    "ag-grid-community": {
+      "version": "22.1.1",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-22.1.1.tgz",
+      "integrity": "sha512-FNyv9e9JIuuR8NNi/r3NjIjUVy2/K5GgPjwQ63g9/Z4U8EudQZLINGMVKI6OwtZfWyyNSd0hQDCNsdvx0OR1WQ=="
+    },
     "agent-base": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz",

package.json

@@ -23,6 +23,8 @@
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic/angular": "^4.7.1",
+    "ag-grid-angular": "^22.1.1",
+    "ag-grid-community": "^22.1.1",
     "angular-tree-component": "^8.5.2",
     "core-js": "^2.5.4",
     "rxjs": "~6.5.1",

src/app/app.component.ts

@@ -17,7 +17,6 @@ export class AppComponent implements OnInit {
   public addChildTarget: any = false;
   public deleteTarget: any = false;
   public lastClickEvent: Array<any> = [];
-
   public nodes = [];
   public options = {
     actionMapping: {

src/app/app.module.ts

@@ -1,16 +1,17 @@
-import { NgModule } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
-import { RouteReuseStrategy } from "@angular/router";
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouteReuseStrategy } from '@angular/router';
 
-import { IonicModule, IonicRouteStrategy } from "@ionic/angular";
-import { SplashScreen } from "@ionic-native/splash-screen/ngx";
-import { StatusBar } from "@ionic-native/status-bar/ngx";
+import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
+import { SplashScreen } from '@ionic-native/splash-screen/ngx';
+import { StatusBar } from '@ionic-native/status-bar/ngx';
 
-import { AppComponent } from "./app.component";
-import { AppRoutingModule } from "./app-routing.module";
-import { HttpClientModule } from "@angular/common/http";
-import { ComponentsModule } from "./components/components.module";
-import { TreeModule } from "angular-tree-component";
+import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app-routing.module';
+import { HttpClientModule } from '@angular/common/http';
+import { ComponentsModule } from './components/components.module';
+import { TreeModule } from 'angular-tree-component';
+import {AgGridModule} from 'ag-grid-angular';
 
 @NgModule({
   declarations: [AppComponent],
@@ -21,7 +22,8 @@ import { TreeModule } from "angular-tree-component";
     AppRoutingModule,
     HttpClientModule,
     ComponentsModule,
-    TreeModule.forRoot()
+    TreeModule.forRoot(),
+    AgGridModule.withComponents([]),
   ],
   providers: [
     StatusBar,

src/app/components/components.module.ts

@@ -1,11 +1,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HostComponent } from './editor/host/host.component';
+import {NodePickerComponent} from './editor/node-picker/node-picker.component';
+import {IonicModule} from '@ionic/angular';
 
 @NgModule({
-  declarations: [HostComponent],
-  imports: [CommonModule],
-  entryComponents: [HostComponent],
-  exports: [HostComponent]
+  declarations: [HostComponent, NodePickerComponent],
+  imports: [CommonModule, IonicModule],
+  entryComponents: [HostComponent, NodePickerComponent],
+  exports: [HostComponent, NodePickerComponent]
 })
 export class ComponentsModule {}

src/app/components/editor/node-picker/node-picker.component.html

@@ -0,0 +1,34 @@
+<ion-list>
+  <ion-item>
+    <ion-icon slot="start" name="menu"></ion-icon>
+    <ion-label>Paragraph</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-icon slot="start" name="alert"></ion-icon>
+    <ion-label>Heading 1</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-icon slot="start" name="alert"></ion-icon>
+    <ion-label>Heading 2</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-icon slot="start" name="alert"></ion-icon>
+    <ion-label>Heading 3</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-icon slot="start" name="alert"></ion-icon>
+    <ion-label>Heading 4</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-icon slot="start" name="code"></ion-icon>
+    <ion-label>Monospace Block</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-icon slot="start" name="link"></ion-icon>
+    <ion-label>Hyperlink</ion-label>
+  </ion-item>
+  <ion-item>
+    <ion-icon slot="start" name="analytics"></ion-icon>
+    <ion-label>Database</ion-label>
+  </ion-item>
+</ion-list>

src/app/components/editor/node-picker/node-picker.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'editor-node-picker',
+  templateUrl: './node-picker.component.html',
+  styleUrls: ['./node-picker.component.scss'],
+})
+export class NodePickerComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

src/app/pages/editor/editor.page.html

@@ -24,9 +24,9 @@
         </div>
       </div>
       <div class="editor-buttons">
-        <ion-button (click)="onAddClick()" class="ion-padding ion-margin">Add Node</ion-button>
-        <ion-button (click)="onSaveClick()" class="ion-padding ion-margin">Save</ion-button>
+        <ion-button (click)="onAddClick($event)" class="ion-padding ion-margin" fill="outline" color="medium">Add Node</ion-button>
+        <ion-button (click)="onSaveClick()" class="ion-padding ion-margin" fill="outline" color="medium">Save</ion-button>
       </div>
     </ng-container>
   </ion-content>
-</ng-container>
+</ng-container>

src/app/pages/editor/editor.page.ts

@@ -3,6 +3,8 @@ import HostRecord from '../../structures/HostRecord';
 import PageRecord from '../../structures/PageRecord';
 import {PageService} from '../../service/page.service';
 import {ActivatedRoute, Router} from '@angular/router';
+import {PopoverController} from '@ionic/angular';
+import {NodePickerComponent} from '../../components/editor/node-picker/node-picker.component';
 
 @Component({
   selector: 'app-editor',
@@ -21,6 +23,7 @@ export class EditorPage implements OnInit {
     protected pages: PageService,
     protected route: ActivatedRoute,
     protected router: Router,
+    protected popover: PopoverController,
   ) {
     this.route.params.subscribe(params => {
       this.pageId = params.id;
@@ -42,7 +45,7 @@ export class EditorPage implements OnInit {
     }
   }
 
-  onAddClick() {
+  /*onAddClick() {
     this.hostRecords.push(new HostRecord(''));
     setTimeout(() => {
       const host = this.editorHosts.toArray().reverse()[0].hostContainer.nativeElement;
@@ -53,6 +56,15 @@ export class EditorPage implements OnInit {
       s.removeAllRanges();
       s.addRange(r);
     }, 0);
+  }*/
+
+  async onAddClick($event) {
+    const popover = await this.popover.create({
+      component: NodePickerComponent,
+      event: $event,
+    });
+
+    await popover.present();
   }
 
   onNewHostRequested($event) {

src/global.scss

@@ -26,3 +26,5 @@
 @import "~@ionic/angular/css/flex-utils.css";
 
 @import "~angular-tree-component/dist/angular-tree-component.css";
+@import "~ag-grid-community/dist/styles/ag-grid.css";
+@import "~ag-grid-community/dist/styles/ag-theme-balham.css";