Create ontology GUI (#244)

* Implement split screen for the ontology editor GUI - wip

* Fix travis errors

* Enhancement: Make ontology form dialogue full screen

* NEW form with split screen for implementing ontology editor - wip

* ADD form buttons - wip

* ADD a list of newly created resources under the Add Resource Classes screen, so that they can be used later to be dnd-ed under the new ontology - same will be done for properties - wip

* STYLE resources list, ADD dnd within list, FIX travis errors

* FIX travis test error

* STYLE properties screen, ADD new property chip list - dnd does not work here, we must find a different dnd solution

* STYLE change: change to exoansion panel for adding new ontology, resource, property - add style to ontologies

* FIX dnd: All screens can drop their content to the main screen - wip: should make a tree structure to organize resources under ontologies and properties under resources

* bug (close icon): fix close icon and style of input field in add new property form

* fix (ontology builder): - fix form groups and form controls - add maxLength validators - add 'type' to resources and properties - start use of a 'mock' ontology service

* fix travis test error

* feature (onto builder): add remove button to list of properties and resources

* styling (ontology form): minor styling of close button and chips

* wip

* refactor (ontology form): remove elements from middle split area completely

* fix minor error

* refactor (ontology editor): just cleaning up code;
- fix console.error issues
- removed console.log comments

package.json

@@ -32,6 +32,7 @@
         "@firebase/app-types": "^0.1.2",
         "@ngx-translate/core": "^8.0.0",
         "@ngx-translate/http-loader": "^2.0.0",
+        "angular-split": "^1.0.0-rc.3",
         "angular-tree-component": "^6.1.0",
         "angularfire2": "^5.0.0-rc.6",
         "core-js": "^2.5.1",

src/app/app.module.ts

@@ -21,6 +21,7 @@ import {AppMaterialModule} from './app-material-module';
 import 'hammerjs';
 //
 // import other third party modules
+import { AngularSplitModule } from 'angular-split';
 //
 import {DndModule} from 'ng2-dnd';
 import {ApiService} from './model/services/api.service';
@@ -317,6 +318,7 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
         AngularFireModule.initializeApp(environment.firebase),
         InfiniteScrollModule,
         RecaptchaModule.forRoot(),
+        AngularSplitModule,
         TranslateModule.forRoot({
             loader: {
                 provide: TranslateLoader,

src/app/model/services/api.service.ts

@@ -122,6 +122,28 @@ export class ApiService {
         });
     }
 
+    httpGetBasicOnto(url: string, options?: RequestOptionsArgs): Observable<ApiServiceResult> {
+
+        if (!options) options = {withCredentials: true};
+
+        url = (url.slice(0, 4) === 'http' ? url : environment.api + url);
+
+        return this._http.get(url, options).map((response: Response) => {
+            try {
+                let apiServiceResult: ApiServiceResult = new ApiServiceResult();
+                apiServiceResult.status = response.status;
+                apiServiceResult.statusText = response.statusText;
+                apiServiceResult.body = response.json();
+                apiServiceResult.url = url;
+                return apiServiceResult;
+            } catch (e) {
+                return ApiService.handleError(response, url);
+            }
+        }).catch((error: any) => {
+            return Observable.throw(ApiService.handleError(error, url));
+        });
+    }
+
 
 
     /**

src/app/model/services/basic-ontology.service.ts

@@ -27,9 +27,12 @@ export class BasicOntologyService extends ApiService {
      *
      * @returns {Observable<any>}
      */
+    // getBasicOntology(): Observable<any> {
+    //     let url = environment.url;
+    //     return this.httpGet(url + '/data/base-data/basic-ontology.json', {withCredentials: false});
+    // }
     getBasicOntology(): Observable<any> {
-        let url = environment.url;
-        return this.httpGet(url + '/data/base-data/basic-ontology.json', {withCredentials: false});
+        return this.httpGetBasicOnto('/ontology/knora-api/v2');
     }
 
 }

src/app/model/test-data/basic-ontology.ts

@@ -12,8 +12,8 @@
  * License along with SALSAH.  If not, see <http://www.gnu.org/licenses/>.
  * */
 
-import {JsonObject, JsonProperty} from 'json2typescript';
-import {PropertyItem} from "../webapi/knora/v1/properties/property-item";
+import { JsonObject, JsonProperty } from 'json2typescript';
+import { PropertyItem } from '../webapi/knora/v1/properties/property-item';
 
 /**
  * has four default categories and four groups
@@ -123,15 +123,15 @@ export class ResourceClass {
 export class BasicOntology {
 
     // defaultProperties
-    @JsonProperty('defaultProperties', [PropertyItem])
+    @JsonProperty('defaultProperties', [PropertyItem], true)
     public defaultProperties: PropertyItem[] = undefined;
 
     // defaultPermissions
     @JsonProperty('defaultPermissions', Permissions, true)
     public defaultPermissions: Permissions = undefined;
 
     // defaultResourceClasses
-    @JsonProperty('resourceClasses', [ResourceClass])
+    @JsonProperty('resourceClasses', [ResourceClass], true)
     public resourceClasses: ResourceClass[] = undefined;
 
 }

src/app/model/webapi/knora/v1/properties/property-item.ts

@@ -12,7 +12,7 @@
  * License along with SALSAH.  If not, see <http://www.gnu.org/licenses/>.
  * */
 
-import {JsonObject, JsonProperty} from "json2typescript";
+import { JsonObject, JsonProperty } from 'json2typescript';
 
 @JsonObject
 export class PropertyItem {
@@ -47,36 +47,36 @@ export class PropertyItem {
     @JsonProperty('gui_name', String, true)
     public gui_name: string = undefined;
 
-/*
-    @JsonProperty('comments', [String], true)
-    public comments: string[] = undefined;
+    /*
+        @JsonProperty('comments', [String], true)
+        public comments: string[] = undefined;
 
-    @JsonProperty('is_annotation', String)
-    public is_annotation: string = undefined;
+        @JsonProperty('is_annotation', String)
+        public is_annotation: string = undefined;
 
-    @JsonProperty('locations', [Location], true)
-    public locations: Location[] = undefined;
+        @JsonProperty('locations', [Location], true)
+        public locations: Location[] = undefined;
 
-    @JsonProperty('regular_property', Number)
-    public regular_property: number = undefined;
+        @JsonProperty('regular_property', Number)
+        public regular_property: number = undefined;
 
-    @JsonProperty('value_firstprops', [String], true)
-    public value_firstprops: string[] = undefined;
+        @JsonProperty('value_firstprops', [String], true)
+        public value_firstprops: string[] = undefined;
 
-    @JsonProperty('value_iconsrcs', [String], true)
-    public value_iconsrcs: string[] = undefined;
+        @JsonProperty('value_iconsrcs', [String], true)
+        public value_iconsrcs: string[] = undefined;
 
-    @JsonProperty('value_ids', [String], true)
-    public value_ids: string[] = undefined;
+        @JsonProperty('value_ids', [String], true)
+        public value_ids: string[] = undefined;
 
-    @JsonProperty('value_restype', [String], true)
-    public value_restype: string[] = undefined;
+        @JsonProperty('value_restype', [String], true)
+        public value_restype: string[] = undefined;
 
-    @JsonProperty('value_rights', [Number], true)
-    public value_rights: Number[] = undefined;
+        @JsonProperty('value_rights', [Number], true)
+        public value_rights: Number[] = undefined;
 
-    @JsonProperty('values', [Object], true)
-    public values: any[] = undefined;
-*/
+        @JsonProperty('values', [Object], true)
+        public values: any[] = undefined;
+    */
 
 }

src/app/view/modules/dialog/form-dialog/form-dialog.component.ts

@@ -75,7 +75,7 @@ export class FormDialogComponent implements OnInit {
     toggleFullSize() {
         this.fullSize = (!this.fullSize);
 
-        if (this.fullSize) {
+        if (this.data.form == 'ontology') {
             this._dialogRef.updateSize('100vw', '100vh');
             this._dialogRef.updatePosition();
         } else {

src/app/view/modules/form/edit-resource-class/edit-resource-class.component.html

@@ -203,13 +203,16 @@ <h5>{{editResFormLabels.addProp.addLabel}}</h5>
                             <mat-icon>add</mat-icon>
                         </mat-panel-description>
                     </mat-expansion-panel-header>
-                    <mat-form-field class="large">
+                    <mat-form-field class="full-width">
                         <input matInput
                                placeholder={{editResFormLabels.addProp.autoComplete}}
                                [matAutocomplete]="autoProp"
                                [formControl]="propCtrl">
-                        <mat-icon matSuffix class="input-icon icon-for-autocomplete" (click)="resetAddProp()"
-                                  *ngIf="propCtrl.value && propCtrl.dirty">close
+                        <mat-icon *ngIf="propCtrl.value && propCtrl.dirty"
+                                  matSuffix
+                                  class="input-icon"
+                                  (click)="resetAddProp()">
+                            clear
                         </mat-icon>
                         <mat-autocomplete #autoProp="matAutocomplete"> <!-- [displayWith]="displayFn"> -->
                             <mat-option *ngFor="let prop of filteredProps | async" [value]="prop?.label"