Value components

[tobiasschweizer]

• TextValue:
  • TextValueAsStringComponent
  • TextValueAsXMLComponent (Viewer Value Component: TextValueAsXMLComponent  #5)
  • TextValueAsHTMLComponent (readonly, no editing) (Viewer Value Component: TextValueAsHTMLComponent  #6)
• IntValueComponent (Viewer Value Component: IntValueComponent #7) -> serves as reference implementation
• DecimalValueComponent (Viewer Value Component: DecimalValueComponent #8)
• BooleanValueComponent (Viewer Value Component: BooleanValueComponent #9)
• ColorValueComponent (Viewer Value Component: ColorValueComponent #10)
• DateValueComponent (Viewer Value Component: DateValueComponent #11)
• GeonameValueComponent (Viewer Value Component: GeonameValueComponent #12)
• IntervalValueComponent (Viewer Value Component: IntervalValueComponent #13)
• LinkValueComponent (Viewer Value Component: LinkValueComponent  #14)
• ListValueComponent (Viewer Value Component: ListValueComponent #15)
• TimeValueComponent (Viewer Value Component: TimeValueComponent  #16)
• UriValueComponent (Viewer Value Component: UriValueComponent #17)

To be defined:

• FileValueComponent (image, text, video, DDD) -> not relevant for now
• GeometryComponent -> part of Region

[tobiasschweizer]

A value component has to implement BaseValueComponent. We will use IntValueComponent as an example.

• create a new value component: ng g c viewer/values/IntValue --project @knora/ui --prefix=kui
• extend the base class, implement interfaces: class IntValueComponent extends BaseValueComponent implements OnInit, OnChanges, OnDestroy
• implement all abstract members from the base class: displayValue, valueFormControl, commentFormControl, form, valueChangesSubscription, customValidators, see https://github.com/dasch-swiss/knora-ui-ng-lib/blob/dfd3f514883de0c76961c1768f863d5dbb1dbd3a/projects/knora-ui/src/lib/viewer/values/int-value/int-value.component.ts#L14-L23
• inject FormBuilder and call the base class's constructor in the value component's constructor, see https://github.com/dasch-swiss/knora-ui-ng-lib/blob/dfd3f514883de0c76961c1768f863d5dbb1dbd3a/projects/knora-ui/src/lib/viewer/values/int-value/int-value.component.ts#L25-L27
• implement getInitValue for the given value, see https://github.com/dasch-swiss/knora-ui-ng-lib/blob/dfd3f514883de0c76961c1768f863d5dbb1dbd3a/projects/knora-ui/src/lib/viewer/values/int-value/int-value.component.ts#L29-L35
• implement ngOnInit for the given value, see https://github.com/dasch-swiss/knora-ui-ng-lib/blob/dfd3f514883de0c76961c1768f863d5dbb1dbd3a/projects/knora-ui/src/lib/viewer/values/int-value/int-value.component.ts#L37-L56
• implement ngOnChanges, see https://github.com/dasch-swiss/knora-ui-ng-lib/blob/d76fb8b5412f93e4fdf2987c95a431ee8806bdca/projects/knora-ui/src/lib/viewer/values/int-value/int-value.component.ts#L58-L60
• implement ngOnDestroy, see https://github.com/dasch-swiss/knora-ui-ng-lib/blob/d76fb8b5412f93e4fdf2987c95a431ee8806bdca/projects/knora-ui/src/lib/viewer/values/int-value/int-value.component.ts#L63-L65
• implement getNewValue for the given value, see https://github.com/dasch-swiss/knora-ui-ng-lib/blob/dfd3f514883de0c76961c1768f863d5dbb1dbd3a/projects/knora-ui/src/lib/viewer/values/int-value/int-value.component.ts#L71-L85
• implement getUpdatedValue fro the given value, see https://github.com/dasch-swiss/knora-ui-ng-lib/blob/dfd3f514883de0c76961c1768f863d5dbb1dbd3a/projects/knora-ui/src/lib/viewer/values/int-value/int-value.component.ts#L87-L104

[tobiasschweizer]

Each value component has to be tested (https://angular.io/guide/testing). https://github.com/dasch-swiss/knora-ui-ng-lib/blob/master/projects/knora-ui/src/lib/viewer/values/int-value/int-value.component.spec.ts offers a reference implementation of the test cases to be covered. See https://dasch-swiss.github.io/knora-api-js-lib/classes/_models_v2_resources_values_read_read_value_.readvalue.html and https://github.com/dasch-swiss/knora-api/blob/develop/webapi/_test_data/ontologies/anything-onto.ttl for more information about the value type to be implemented.

• Setup:
  Make sure to setup the test bed's config correctly (imports and declarations): https://github.com/dasch-swiss/knora-ui-ng-lib/blob/d76fb8b5412f93e4fdf2987c95a431ee8806bdca/projects/knora-ui/src/lib/viewer/values/int-value/int-value.component.spec.ts#L63-L77

• Display and edit:

  • create a test host component: https://github.com/dasch-swiss/knora-ui-ng-lib/blob/d76fb8b5412f93e4fdf2987c95a431ee8806bdca/projects/knora-ui/src/lib/viewer/values/int-value/int-value.component.spec.ts#L12-L39
  • display a value in read mode
  • make a value editable and change it in a valid way
  • make a value editable and change its comment
  • make a value editable and change it in an invalid way
  • restore the initially displayed value (cancellation)
  • set a new display value
  • correctly unsubscribe when component is destroyed

• Create a value:

  • create a test host component: https://github.com/dasch-swiss/knora-ui-ng-lib/blob/d76fb8b5412f93e4fdf2987c95a431ee8806bdca/projects/knora-ui/src/lib/viewer/values/int-value/int-value.component.spec.ts#L41-L59
  • create a value
  • set the value and comment back (cancellation)

[tobiasschweizer]

@mdelez @flavens @SepidehAlassi I will be back to work next week. Please feel free to pick a task from the list above (#4 (comment)).

As suggested by @SepidehAlassi, please create a new branchwip/${issuenumber}-my-value-component and PR per issue.

[tobiasschweizer]

Please note that you have to install dasch-swiss/dsp-js-lib#125 locally, see https://github.com/dasch-swiss/knora-ui-ng-lib/blob/d76fb8b5412f93e4fdf2987c95a431ee8806bdca/.github/workflows/nodejs.yml#L20-L22