chore(classes): sort resource classes by label (DEV-952) (#748)

* chore(search): sort res classes by label

* chore(resource): sort res classes by label

* chore(ontology): sort res classes by label

* style(resource-form): resolve style issue with submit button

* test(search): resolve imports

* test(search): resolve tests

src/app/project/ontology/property-form/property-form.component.ts

@@ -24,6 +24,7 @@ import { CacheService } from 'src/app/main/cache/cache.service';
 import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
 import { existingNamesValidator } from 'src/app/main/directive/existing-name/existing-name.directive';
 import { ErrorHandlerService } from 'src/app/main/services/error-handler.service';
+import { SortingService } from 'src/app/main/services/sorting.service';
 import { CustomRegex } from 'src/app/workspace/resource/values/custom-regex';
 import { AutocompleteItem } from 'src/app/workspace/search/advanced-search/resource-and-property-selection/search-select-property/specify-property-value/operator';
 import { DefaultProperties, DefaultProperty, PropertyCategory, PropertyInfoObject } from '../default-data/default-properties';
@@ -135,7 +136,8 @@ export class PropertyFormComponent implements OnInit {
         private _cache: CacheService,
         private _errorHandler: ErrorHandlerService,
         private _fb: FormBuilder,
-        private _os: OntologyService
+        private _os: OntologyService,
+        private _sortingService: SortingService
     ) { }
 
     ngOnInit() {
@@ -179,14 +181,16 @@ export class PropertyFormComponent implements OnInit {
                 // reset list of ontology classes
                 this.ontologyClasses = [];
                 response.forEach(onto => {
-                    const ontoClasses: ClassToSelect = {
-                        ontologyId: onto.id,
-                        ontologyLabel: onto.label,
-                        classes: onto.getAllClassDefinitions()
-                    };
-                    this.ontologyClasses.push(ontoClasses);
+                    const classDef = this._sortingService.keySortByAlphabetical(onto.getAllClassDefinitions(), 'label');
+                    if (classDef.length) {
+                        const ontoClasses: ClassToSelect = {
+                            ontologyId: onto.id,
+                            ontologyLabel: onto.label,
+                            classes: classDef
+                        };
+                        this.ontologyClasses.push(ontoClasses);
+                    }
                 });
-
             }
         );
 

src/app/workspace/resource/resource-instance-form/resource-instance-form.component.html

@@ -79,7 +79,7 @@
     </app-select-properties>
 
     <!-- action buttons: previous, cancel and save -->
-    <div class="form-panel form-action">
+    <div class="form-panel form-action" [class.fixed-at-bottom]="!showNextStepForm">
         <span>
             <button mat-button type="button" (click)="prevStep($event)">
                 &larr;&nbsp;{{ 'appLabels.form.action.back' | translate }}

src/app/workspace/resource/resource-instance-form/resource-instance-form.component.scss

@@ -11,7 +11,14 @@
 .form-action {
     width: 100%;
     margin-top: 24px;
-    // margin-left: 48px;
+
+    &.fixed-at-bottom {
+      position: sticky;
+      padding: 24px;
+      bottom: -24px;
+      margin-left: -24px;
+      background-color: #fff;
+    }
 }
 
 .errorIfNoElement {

src/app/workspace/resource/resource-instance-form/resource-instance-form.component.ts

@@ -19,6 +19,7 @@ import {
 import { Subscription } from 'rxjs';
 import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
 import { ErrorHandlerService } from 'src/app/main/services/error-handler.service';
+import { SortingService } from 'src/app/main/services/sorting.service';
 import { DefaultClass, DefaultResourceClasses } from 'src/app/project/ontology/default-data/default-resource-classes';
 import { ProjectService } from '../services/project.service';
 import { ResourceService } from '../services/resource.service';
@@ -92,7 +93,8 @@ export class ResourceInstanceFormComponent implements OnInit, OnDestroy {
         private _fb: FormBuilder,
         private _project: ProjectService,
         private _resourceService: ResourceService,
-        private _router: Router
+        private _router: Router,
+        private _sortingService: SortingService
     ) { }
 
 
@@ -329,6 +331,9 @@ export class ResourceInstanceFormComponent implements OnInit, OnDestroy {
                     (onto: ReadOntology) => {
                         this.resourceClasses = onto.getClassDefinitionsByType(ResourceClassDefinition);
 
+                        // sort resource classes by label
+                        this.resourceClasses = this._sortingService.keySortByAlphabetical(this.resourceClasses, 'label');
+
                         if (this.selectResourceClassComponent && this.resourceClasses.length === 1) {
                             // since the component already exists, the ngAfterInit method of the component will not be called so we must assign the value here manually
                             this.selectResourceClassComponent.form.controls.resources.setValue(this.resourceClasses[0].id);

src/app/workspace/search/advanced-search/resource-and-property-selection/resource-and-property-selection.component.spec.ts

@@ -1,17 +1,19 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ResourceAndPropertySelectionComponent } from './resource-and-property-selection.component';
 import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { Component, EventEmitter, Inject, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { OntologyCache } from '@dasch-swiss/dsp-js/src/cache/ontology-cache/OntologyCache';
-import { MockOntology, ReadOntology, ResourceClassDefinition, ResourcePropertyDefinition } from '@dasch-swiss/dsp-js';
-import { of } from 'rxjs';
+import { MatButtonHarness } from '@angular/material/button/testing';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { By } from '@angular/platform-browser';
-import { MatButtonHarness } from '@angular/material/button/testing';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MockOntology, ReadOntology, ResourceClassDefinition, ResourcePropertyDefinition } from '@dasch-swiss/dsp-js';
+import { OntologyCache } from '@dasch-swiss/dsp-js/src/cache/ontology-cache/OntologyCache';
+import { of } from 'rxjs';
 import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
+import { ResourceAndPropertySelectionComponent } from './resource-and-property-selection.component';
+
 
 /**
  * test host component to simulate select resource class component.
@@ -100,7 +102,9 @@ describe('ResourceAndPropertySelectionComponent', () => {
         await TestBed.configureTestingModule({
             imports: [
                 ReactiveFormsModule,
-                MatIconModule
+                MatDialogModule,
+                MatIconModule,
+                MatSnackBarModule
             ],
             declarations: [
                 ResourceAndPropertySelectionComponent,

src/app/workspace/search/advanced-search/resource-and-property-selection/resource-and-property-selection.component.ts

@@ -17,6 +17,8 @@ import {
     ResourcePropertyDefinition
 } from '@dasch-swiss/dsp-js';
 import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
+import { ErrorHandlerService } from 'src/app/main/services/error-handler.service';
+import { SortingService } from 'src/app/main/services/sorting.service';
 import { SearchSelectPropertyComponent } from './search-select-property/search-select-property.component';
 import { SearchSelectResourceClassComponent } from './search-select-resource-class/search-select-resource-class.component';
 
@@ -53,9 +55,11 @@ export class ResourceAndPropertySelectionComponent implements OnInit, OnChanges
     properties: ResourcePropertyDefinition[];
 
     constructor(
+        @Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection,
         @Inject(FormBuilder) private _fb: FormBuilder,
-        @Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection) {
-    }
+        private _errorHandler: ErrorHandlerService,
+        private _sortingService: SortingService
+    ) { }
 
     ngOnInit(): void {
 
@@ -94,11 +98,14 @@ export class ResourceAndPropertySelectionComponent implements OnInit, OnChanges
                 } else {
                     this.resourceClasses = resClasses;
                 }
+                // sort resource classes by label
+                this.resourceClasses = this._sortingService.keySortByAlphabetical(this.resourceClasses, 'label');
 
                 this.properties = onto.get(ontologyIri).getPropertyDefinitionsByType(ResourcePropertyDefinition);
+
             },
             error => {
-                console.error(error);
+                this._errorHandler.showMessage(error);
             }
         );
     }

src/app/workspace/search/advanced-search/resource-and-property-selection/search-select-resource-class/search-select-resource-class.component.spec.ts

@@ -10,6 +10,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatOptionModule } from '@angular/material/core';
 import { MatSelectHarness } from '@angular/material/select/testing';
 import { SearchSelectResourceClassComponent } from './search-select-resource-class.component';
+import { SortingService } from 'src/app/main/services/sorting.service';
 
 /**
  * test host component to simulate parent component.
@@ -29,14 +30,18 @@ class TestHostComponent implements OnInit {
 
     selectedResClassIri: string;
 
-    constructor(@Inject(FormBuilder) private _fb: FormBuilder) {
+    constructor(
+        @Inject(FormBuilder) private _fb: FormBuilder,
+        private _sortingService: SortingService
+    ) {
     }
 
     ngOnInit() {
         this.form = this._fb.group({});
 
         // get resource class defs
         this.resourceClassDefs = MockOntology.mockReadOntology('http://0.0.0.0:3333/ontology/0001/anything/v2').getClassDefinitionsByType(ResourceClassDefinition);
+        this.resourceClassDefs = this._sortingService.keySortByAlphabetical(this.resourceClassDefs, 'label');
 
     }
 
@@ -115,6 +120,10 @@ describe('SearchSelectResourceClassComponent', () => {
 
         expect(option2).toEqual('Blue thing');
 
+        const option3 = await options[2].getText();
+
+        expect(option3).toEqual('Document');
+
     });
 
     it('should emit the Iri of a selected resource class', async () => {