diff --git a/package-lock.json b/package-lock.json index ee986d6..c58f736 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1728,6 +1728,17 @@ "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=", "dev": true }, + "angular-tree-component": { + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/angular-tree-component/-/angular-tree-component-8.5.2.tgz", + "integrity": "sha512-3NwMB+vLq1+WHz2UVgsZA73E1LmIIWJlrrasCKXbLJ3S7NmY9O/wKcolji3Vp2W//5KQ33RXu1jiPXCOQdRzVA==", + "requires": { + "lodash": "^4.17.11", + "mobx": "^5.14.2", + "mobx-angular": "3.0.3", + "opencollective-postinstall": "^2.0.2" + } + }, "ansi-colors": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz", @@ -6514,8 +6525,7 @@ "lodash": { "version": "4.17.15", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", - "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==", - "dev": true + "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" }, "lodash.clonedeep": { "version": "4.5.0", @@ -6989,6 +6999,16 @@ } } }, + "mobx": { + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/mobx/-/mobx-5.15.4.tgz", + "integrity": "sha512-xRFJxSU2Im3nrGCdjSuOTFmxVDGeqOHL+TyADCGbT0k4HHqGmx5u2yaHNryvoORpI4DfbzjJ5jPmuv+d7sioFw==" + }, + "mobx-angular": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/mobx-angular/-/mobx-angular-3.0.3.tgz", + "integrity": "sha512-mZuuose70V+Sd0hMWDElpRe3mA6GhYjSQN3mHzqk2XWXRJ+eWQa/f3Lqhw+Me/Xd2etWsGR1hnRa1BfQ2ZDtpw==" + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", @@ -7461,6 +7481,11 @@ "is-wsl": "^1.1.0" } }, + "opencollective-postinstall": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz", + "integrity": "sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw==" + }, "opn": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz", diff --git a/package.json b/package.json index 1037968..e7f6cad 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@ionic-native/splash-screen": "^5.0.0", "@ionic-native/status-bar": "^5.0.0", "@ionic/angular": "^4.7.1", + "angular-tree-component": "^8.5.2", "core-js": "^2.5.4", "rxjs": "~6.5.1", "tslib": "^1.9.0", diff --git a/src/app/app.component.html b/src/app/app.component.html index fffda45..87b8715 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,7 +1,7 @@ - + + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index b5cd3cc..ba56e2b 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,30 +1,53 @@ -import { Component } from '@angular/core'; +import { Component } from "@angular/core"; -import { Platform } from '@ionic/angular'; -import { SplashScreen } from '@ionic-native/splash-screen/ngx'; -import { StatusBar } from '@ionic-native/status-bar/ngx'; +import { Platform } from "@ionic/angular"; +import { SplashScreen } from "@ionic-native/splash-screen/ngx"; +import { StatusBar } from "@ionic-native/status-bar/ngx"; @Component({ - selector: 'app-root', - templateUrl: 'app.component.html', - styleUrls: ['app.component.scss'] + selector: "app-root", + templateUrl: "app.component.html", + styleUrls: ["app.component.scss"] }) export class AppComponent { public appPages = [ { - title: 'Home', - url: '/home', - icon: 'home' + title: "Home", + url: "/home", + icon: "home" }, { - title: 'List', - url: '/list', - icon: 'list' + title: "List", + url: "/list", + icon: "list" }, { - title: 'Editor', - url: '/editor', - icon: 'edit' + title: "Editor", + url: "/editor", + icon: "edit" + } + ]; + + public nodes = [ + { + id: 1, + name: "root1", + children: [ + { id: 2, name: "child1" }, + { id: 3, name: "child2" } + ] + }, + { + id: 4, + name: "root2", + children: [ + { id: 5, name: "child2.1" }, + { + id: 6, + name: "child2.2", + children: [{ id: 7, name: "subsub" }] + } + ] } ]; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5b66ac9..7a82ef5 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,15 +1,16 @@ -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 { 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"; @NgModule({ declarations: [AppComponent], @@ -20,6 +21,7 @@ import {ComponentsModule} from './components/components.module'; AppRoutingModule, HttpClientModule, ComponentsModule, + TreeModule.forRoot() ], providers: [ StatusBar, diff --git a/src/app/components/components.module.ts b/src/app/components/components.module.ts index c2e123b..155fabd 100644 --- a/src/app/components/components.module.ts +++ b/src/app/components/components.module.ts @@ -1,15 +1,11 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import {HostComponent} from './editor/host/host.component'; +import { NgModule } from "@angular/core"; +import { CommonModule } from "@angular/common"; +import { HostComponent } from "./editor/host/host.component"; @NgModule({ declarations: [HostComponent], - imports: [ - CommonModule - ], + imports: [CommonModule], entryComponents: [HostComponent], - exports: [ - HostComponent - ] + exports: [HostComponent] }) -export class ComponentsModule { } +export class ComponentsModule {} diff --git a/src/global.scss b/src/global.scss index d854de8..9741f7a 100644 --- a/src/global.scss +++ b/src/global.scss @@ -16,7 +16,7 @@ @import "~@ionic/angular/css/normalize.css"; @import "~@ionic/angular/css/structure.css"; @import "~@ionic/angular/css/typography.css"; -@import '~@ionic/angular/css/display.css'; +@import "~@ionic/angular/css/display.css"; /* Optional CSS utils that can be commented out */ @import "~@ionic/angular/css/padding.css"; @@ -24,3 +24,5 @@ @import "~@ionic/angular/css/text-alignment.css"; @import "~@ionic/angular/css/text-transformation.css"; @import "~@ionic/angular/css/flex-utils.css"; + +@import "~angular-tree-component/dist/angular-tree-component.css";