feat(value): refactor boolean value (DEV-98) (#554)

* fix(value): display boolean value even it doesn't exist

* style(boolean value): display checkbox instead of true or false

* refactor(boolean-value): format code

* chore(advanced search): compare boolean value in useful way

* style(search): refactor advanced search

* style(search): refactor advanced search

* style(search): resolve style issue in date picker

* test(search): fix tests

* test(search): fix test in advanced search

* style(value): fixing styling issue in boolean value

Author: kilchenmann

src/app/workspace/resource/properties/properties.component.html

@@ -137,7 +137,11 @@ <h3 class="label mat-title">
                     </div>
                     <!-- Add button -->
                     <div *ngIf="addValueIsAllowed(prop) && project?.status">
-                        <button mat-icon-button type="button" class="value-action create"
+                        <!-- boolen value will always be displayed even if value is not defined (value = false) -->
+                        <span *ngIf="prop.propDef.objectType === booleanValueTypeIri">
+                            <app-boolean-value [mode]="'read'" class="boolean-value"></app-boolean-value>
+                        </span>
+                        <button *ngIf="prop.propDef.objectType !== booleanValueTypeIri" mat-icon-button type="button" class="value-action create"
                             (click)="showAddValueForm(prop, $event)"
                             title="Add a new value">
                             <mat-icon>add_box</mat-icon>

src/app/workspace/resource/properties/properties.component.spec.ts

@@ -402,7 +402,11 @@ describe('PropertiesComponent', () => {
             // so the amount of add buttons on the page should increase by 1
             // standoff links value and has incoming link value are system props and cannot be added: -2
             addButtons = propertyViewComponentDe.queryAll(By.css('button.create'));
-            expect(addButtons.length).toEqual(18);
+            expect(addButtons.length).toEqual(17);
+
+            // in case of boolean value, we do not display the add button, but the boolean value itself
+            const booleanValue = propertyViewComponentDe.queryAll(By.css('.boolean-value'));
+            expect(booleanValue.length).toEqual(1);
 
         });
 

src/app/workspace/resource/properties/properties.component.ts

@@ -122,6 +122,8 @@ export class PropertiesComponent implements OnInit, OnChanges, OnDestroy {
 
     representationConstants = RepresentationConstants;
 
+    booleanValueTypeIri = Constants.BooleanValue;
+
     hasIncomingLinkIri = Constants.KnoraApiV2 + Constants.HashDelimiter + 'hasIncomingLinkValue';
 
     project: ReadProject;

src/app/workspace/resource/resource-instance-form/select-properties/switch-properties/switch-properties.component.html

@@ -2,7 +2,7 @@
     <app-text-value-as-string #createVal *ngSwitchCase="'ReadTextValueAsString'" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName" [textArea]="textArea"></app-text-value-as-string>
     <app-text-value-as-xml #createVal *ngSwitchCase="'ReadTextValueAsXml'" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName"></app-text-value-as-xml>
     <app-int-value #createVal *ngSwitchCase="constants.IntValue" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName"></app-int-value>
-    <app-boolean-value #createVal *ngSwitchCase="constants.BooleanValue" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName"></app-boolean-value>
+    <app-boolean-value #createVal *ngSwitchCase="constants.BooleanValue" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName" [moreSpace]="true"></app-boolean-value>
     <app-uri-value #createVal *ngSwitchCase="constants.UriValue" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName"></app-uri-value>
     <app-decimal-value #createVal *ngSwitchCase="constants.DecimalValue" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName"></app-decimal-value>
     <app-color-value #createVal *ngSwitchCase="constants.ColorValue" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName"></app-color-value>

src/app/workspace/resource/values/boolean-value/boolean-value.component.html

@@ -1,11 +1,13 @@
 <span *ngIf="mode === 'read'; else showForm" class="read-mode-view">
-    <span class="rm-value">{{valueFormControl.value | formattedBoolean:preferredDisplayType}}</span>
+    <span class="rm-value">
+        <mat-icon>{{valueFormControl.value ? 'check_box' : 'check_box_outline_blank'}}</mat-icon>
+    </span>
     <span class="rm-comment" *ngIf="shouldShowComment">{{commentFormControl.value}}</span>
 </span>
 <ng-template #showForm>
     <span [formGroup]="form" (ngSubmit)="onSubmit()">
-        <mat-checkbox [formControlName]="'value'" class="value boolValue child-value-component">
-            {{valueFormControl.value | formattedBoolean:preferredDisplayType}}
+
+        <mat-checkbox [formControlName]="'value'" class="value boolValue child-value-component" [class.more-space]="moreSpace">
         </mat-checkbox>
         <mat-error *ngIf="valueFormControl.hasError('valueNotChanged') && valueFormControl.dirty">
                 <span class="custom-error-message">New value must be different than the current value.</span>

src/app/workspace/resource/values/boolean-value/boolean-value.component.scss

@@ -1 +1,13 @@
 @import "../../../../../assets/style/viewer";
+
+.read-mode-view .mat-icon,
+.boolValue {
+  margin-top: 4px;
+  margin-left: 4px;
+  display: block;
+
+  &.more-space {
+    margin-top: 16px;
+  }
+}
+

src/app/workspace/resource/values/boolean-value/boolean-value.component.spec.ts

@@ -114,7 +114,7 @@ describe('BooleanValueComponent', () => {
 
             expect(testHostComponent.booleanValueComponent.mode).toEqual('read');
 
-            expect(valueReadModeNativeElement.innerText).toEqual('true');
+            expect(valueReadModeNativeElement.innerText).toEqual('check_box');
         });
 
         it('should make an existing value editable', () => {
@@ -127,7 +127,6 @@ describe('BooleanValueComponent', () => {
             valueBooleanNativeElement = valueBooleanDebugElement.nativeElement;
 
             checkboxEl = valueBooleanDebugElement.query(By.css('input[type="checkbox"]')).nativeElement;
-            checkboxLabel = valueBooleanDebugElement.query(By.css('span[class="mat-checkbox-label"]')).nativeElement;
 
             expect(testHostComponent.booleanValueComponent.mode).toEqual('update');
 
@@ -137,8 +136,6 @@ describe('BooleanValueComponent', () => {
 
             expect(checkboxEl.checked).toBe(true);
 
-            expect(checkboxLabel.innerText).toEqual('true');
-
             checkboxEl.click();
 
             testHostFixture.detectChanges();
@@ -155,7 +152,6 @@ describe('BooleanValueComponent', () => {
 
             expect(checkboxEl.disabled).toBe(false);
 
-            expect(checkboxLabel.innerText).toEqual('false');
         });
 
         it('should validate an existing value with an added comment', () => {
@@ -168,7 +164,6 @@ describe('BooleanValueComponent', () => {
             valueBooleanNativeElement = valueBooleanDebugElement.nativeElement;
 
             checkboxEl = valueBooleanDebugElement.query(By.css('input[type="checkbox"]')).nativeElement;
-            checkboxLabel = valueBooleanDebugElement.query(By.css('span[class="mat-checkbox-label"]')).nativeElement;
 
             commentBooleanDebugElement = valueComponentDe.query(By.css('textarea.comment'));
             commentBooleanNativeElement = commentBooleanDebugElement.nativeElement;
@@ -181,8 +176,6 @@ describe('BooleanValueComponent', () => {
 
             expect(checkboxEl.checked).toBe(true);
 
-            expect(checkboxLabel.innerText).toEqual('true');
-
             commentBooleanNativeElement.value = 'this is a comment';
 
             commentBooleanNativeElement.dispatchEvent(new Event('input'));
@@ -208,7 +201,6 @@ describe('BooleanValueComponent', () => {
             valueBooleanNativeElement = valueBooleanDebugElement.nativeElement;
 
             checkboxEl = valueBooleanDebugElement.query(By.css('input[type="checkbox"]')).nativeElement;
-            checkboxLabel = valueBooleanDebugElement.query(By.css('span[class="mat-checkbox-label"]')).nativeElement;
 
             expect(testHostComponent.booleanValueComponent.mode).toEqual('update');
 
@@ -218,16 +210,12 @@ describe('BooleanValueComponent', () => {
 
             expect(checkboxEl.checked).toBe(true);
 
-            expect(checkboxLabel.innerText).toEqual('true');
-
             checkboxEl.click();
 
             testHostFixture.detectChanges();
 
             expect(checkboxEl.checked).toBe(false);
 
-            expect(checkboxLabel.innerText).toEqual('false');
-
             testHostComponent.booleanValueComponent.resetFormControl();
 
             testHostFixture.detectChanges();
@@ -236,7 +224,6 @@ describe('BooleanValueComponent', () => {
 
             expect(checkboxEl.checked).toBe(true);
 
-            expect(checkboxLabel.innerText).toEqual('true');
         });
 
         it('should set a new display value', () => {
@@ -250,7 +237,7 @@ describe('BooleanValueComponent', () => {
 
             testHostFixture.detectChanges();
 
-            expect(valueReadModeNativeElement.innerText).toEqual('false');
+            expect(valueReadModeNativeElement.innerText).toEqual('check_box_outline_blank');
 
             expect(testHostComponent.booleanValueComponent.form.valid).toBeTruthy();
         });
@@ -273,7 +260,6 @@ describe('BooleanValueComponent', () => {
         let valueBooleanDebugElement: DebugElement;
         let valueBooleanNativeElement;
         let checkboxEl;
-        let checkboxLabel;
         let commentBooleanDebugElement: DebugElement;
         let commentBooleanNativeElement;
 
@@ -292,7 +278,6 @@ describe('BooleanValueComponent', () => {
             valueBooleanDebugElement = valueComponentDe.query(By.css('mat-checkbox'));
             valueBooleanNativeElement = valueBooleanDebugElement.nativeElement;
             checkboxEl = valueBooleanDebugElement.query(By.css('input[type="checkbox"]')).nativeElement;
-            checkboxLabel = valueBooleanDebugElement.query(By.css('span[class="mat-checkbox-label"]')).nativeElement;
 
             commentBooleanDebugElement = valueComponentDe.query(By.css('textarea.comment'));
             commentBooleanNativeElement = commentBooleanDebugElement.nativeElement;
@@ -301,7 +286,6 @@ describe('BooleanValueComponent', () => {
             expect(testHostComponent.booleanValueComponent.form.valid).toBeTruthy();
             expect(checkboxEl.disabled).toBe(false);
             expect(checkboxEl.checked).toBe(false);
-            expect(checkboxLabel.innerText).toEqual('false');
             expect(commentBooleanNativeElement.value).toEqual('');
         });
 

src/app/workspace/resource/values/boolean-value/boolean-value.component.ts

@@ -16,6 +16,8 @@ export class BooleanValueComponent extends BaseValueDirective implements OnInit,
 
     @Input() displayValue?: ReadBooleanValue;
 
+    @Input() moreSpace?: boolean;
+
     valueFormControl: FormControl;
     commentFormControl: FormControl;
 

src/app/workspace/search/advanced-search/advanced-search.component.html

@@ -1,4 +1,4 @@
-<form *ngIf="!errorMessage" [formGroup]="form" (ngSubmit)="submit()" class="dsp-form-content">
+<form *ngIf="!errorMessage" [formGroup]="form" (ngSubmit)="submit()" class="app-form-content">
 
     <div *ngIf="ontologiesMetadata?.ontologies.length > 0">
         <app-search-select-ontology [formGroup]="form" [ontologiesMetadata]="ontologiesMetadata"
@@ -8,7 +8,7 @@
     <app-resource-and-property-selection *ngIf="activeOntology !== undefined" #resAndPropSel [formGroup]="form" [activeOntology]="activeOntology" [topLevel]="true">
     </app-resource-and-property-selection>
 
-    <div class="dsp-form-action">
+    <div class="app-form-action">
         <button class="reset" mat-button type="button" (click)="resourceAndPropertySelection?.resetForm()" [disabled]="this.activeOntology === undefined">
             Reset
         </button>

src/app/workspace/search/advanced-search/advanced-search.component.ts

@@ -10,7 +10,7 @@ import {
     ViewChild
 } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { ApiResponseError, Constants, KnoraApiConnection, OntologiesMetadata } from '@dasch-swiss/dsp-js';
+import { ApiResponseError, Constants, KnoraApiConnection, OntologiesMetadata, OntologyMetadata } from '@dasch-swiss/dsp-js';
 import { Subscription } from 'rxjs';
 import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
 import { NotificationService } from 'src/app/main/services/notification.service';
@@ -100,6 +100,9 @@ export class AdvancedSearchComponent implements OnInit, OnDestroy, AfterViewChec
                     response.ontologies = response.ontologies.filter(onto => onto.attachedToProject !== Constants.SystemProjectIRI);
 
                     this.ontologiesMetadata = response;
+
+                    this.preSelectFirstOntology(this.ontologiesMetadata.ontologies);
+
                 },
                 (error: ApiResponseError) => {
                     this._notification.openSnackBar(error);
@@ -112,18 +115,28 @@ export class AdvancedSearchComponent implements OnInit, OnDestroy, AfterViewChec
                     response.ontologies = response.ontologies.filter(onto => onto.attachedToProject !== Constants.SystemProjectIRI);
 
                     this.ontologiesMetadata = response;
+
+                    this.preSelectFirstOntology(this.ontologiesMetadata.ontologies);
+
                 },
                 (error: ApiResponseError) => {
                     this._notification.openSnackBar(error);
                     this.errorMessage = error;
                 });
         }
+
     }
 
     setActiveOntology(ontologyIri: string) {
         this.activeOntology = ontologyIri;
     }
 
+    preSelectFirstOntology(ontologies: OntologyMetadata[]) {
+        if (ontologies.length === 1) {
+            this.activeOntology = ontologies[0].id;
+        }
+    }
+
     submit() {
 
         if (!this.formValid) {